Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @font-face {
- font-family: SourceSansPro-Regular;
- src: url('../fonts/source-sans-pro/SourceSansPro-Regular.ttf');
- }
- @font-face {
- font-family: SourceSansPro-Bold;
- src: url('../fonts/source-sans-pro/SourceSansPro-Bold.ttf');
- }
- @font-face {
- font-family: SourceSansPro-SemiBold;
- src: url('../fonts/source-sans-pro/SourceSansPro-SemiBold.ttf');
- }
- @font-face {
- font-family: JosefinSans-Bold;
- src: url('../fonts/JosefinSans/JosefinSans-Bold.ttf');
- }
- /*//////////////////////////////////////////////////////////////////
- [ RESTYLE TAG ]*/
- * {
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- }
- body, html {
- height: 100%;
- font-family: SourceSansPro-Regular, sans-serif;
- }
- /*---------------------------------------------*/
- a {
- font-family: SourceSansPro-Regular;
- font-size: 14px;
- line-height: 1.7;
- color: #666666;
- margin: 0px;
- transition: all 0.4s;
- -webkit-transition: all 0.4s;
- -o-transition: all 0.4s;
- -moz-transition: all 0.4s;
- }
- a:focus {
- outline: none !important;
- }
- a:hover {
- text-decoration: none;
- }
- /*---------------------------------------------*/
- h1,h2,h3,h4,h5,h6 {
- margin: 0px;
- }
- p {
- font-family: SourceSansPro-Regular;
- font-size: 14px;
- line-height: 1.7;
- color: #666666;
- margin: 0px;
- }
- ul, li {
- margin: 0px;
- list-style-type: none;
- }
- /*---------------------------------------------*/
- input {
- outline: none;
- border: none;
- }
- textarea {
- outline: none;
- border: none;
- }
- textarea:focus, input:focus {
- border-color: transparent !important;
- }
- input::-webkit-input-placeholder { color: #4b2354;}
- input:-moz-placeholder { color: #4b2354;}
- input::-moz-placeholder { color: #4b2354;}
- input:-ms-input-placeholder { color: #4b2354;}
- textarea::-webkit-input-placeholder { color: #4b2354;}
- textarea:-moz-placeholder { color: #4b2354;}
- textarea::-moz-placeholder { color: #4b2354;}
- textarea:-ms-input-placeholder { color: #4b2354;}
- /*---------------------------------------------*/
- button {
- outline: none !important;
- border: none;
- background: transparent;
- }
- button:hover {
- cursor: pointer;
- }
- iframe {
- border: none !important;
- }
- /*//////////////////////////////////////////////////////////////////
- [ Utility ]*/
- .txt1 {
- font-family: SourceSansPro-Regular;
- font-size: 16px;
- line-height: 1.4;
- color: #999999;
- }
- .txt2 {
- font-family: SourceSansPro-Regular;
- font-size: 16px;
- line-height: 1.4;
- color: #4b2354;
- }
- .hov1:hover {
- color: #4b2354;
- text-decoration: underline;
- }
- /*//////////////////////////////////////////////////////////////////
- [ login ]*/
- .container-login100 {
- width: 100%;
- min-height: 100vh;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- padding: 15px;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- position: relative;
- z-index: 1;
- }
- .container-login100::before {
- content: "";
- display: block;
- position: absolute;
- z-index: -1;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background: rgba(93,84,240,0.5);
- background: -webkit-linear-gradient(left, rgba(0,168,255,0.5), rgba(185,0,255,0.5));
- background: -o-linear-gradient(left, rgba(0,168,255,0.5), rgba(185,0,255,0.5));
- background: -moz-linear-gradient(left, rgba(0,168,255,0.5), rgba(185,0,255,0.5));
- background: linear-gradient(left, rgba(0,168,255,0.5), rgba(185,0,255,0.5));
- pointer-events: none;
- }
- .wrap-login100 {
- width: 390px;
- background: #fff;
- border-radius: 10px;
- overflow: hidden;
- box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
- -o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
- -ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
- }
- /*==================================================================
- [ Form ]*/
- .login100-form {
- width: 100%;
- }
- .login100-form-title {
- display: block;
- font-family: SourceSansPro-Bold;
- font-size: 30px;
- color: #4b2354;
- line-height: 1.2;
- text-align: center;
- }
- /*------------------------------------------------------------------
- [ Input ]*/
- .wrap-input100 {
- width: 100%;
- position: relative;
- background-color: #fff;
- border-radius: 20px;
- }
- .input100 {
- font-family: SourceSansPro-Bold;
- font-size: 16px;
- color: #4b2354;
- line-height: 1.2;
- display: block;
- width: 100%;
- height: 62px;
- background: transparent;
- padding: 0 20px 0 23px;
- }
- /*------------------------------------------------------------------
- [ Focus Input ]*/
- .focus-input100 {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- pointer-events: none;
- border-radius: 20px;
- box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1);
- -o-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1);
- -ms-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1);
- -webkit-transition: all 0.4s;
- -o-transition: all 0.4s;
- -moz-transition: all 0.4s;
- transition: all 0.4s;
- }
- .input100:focus + .focus-input100 {
- box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
- -webkit-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
- -o-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
- -ms-box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2);
- }
- /*------------------------------------------------------------------
- [ Button ]*/
- .container-login100-form-btn {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- }
- .login100-form-btn {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 0 20px;
- min-width: 160px;
- height: 50px;
- background-color: #bd59d4;
- border-radius: 25px;
- font-family: SourceSansPro-SemiBold;
- font-size: 14px;
- color: #fff;
- line-height: 1.2;
- text-transform: uppercase;
- -webkit-transition: all 0.4s;
- -o-transition: all 0.4s;
- -moz-transition: all 0.4s;
- transition: all 0.4s;
- box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.5);
- -moz-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.5);
- -webkit-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.5);
- -o-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.5);
- -ms-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.5);
- }
- .login100-form-btn:hover {
- background-color: #4b2354;
- box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.8);
- -moz-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.8);
- -webkit-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.8);
- -o-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.8);
- -ms-box-shadow: 0 10px 30px 0px rgba(189, 89, 212, 0.8);
- }
- /*------------------------------------------------------------------
- [ Alert validate ]*/
- .validate-input {
- position: relative;
- }
- .alert-validate .focus-input100 {
- box-shadow: 0 5px 30px 0px rgba(250, 66, 81, 0.1);
- -moz-box-shadow: 0 5px 30px 0px rgba(250, 66, 81, 0.1);
- -webkit-box-shadow: 0 5px 30px 0px rgba(250, 66, 81, 0.1);
- -o-box-shadow: 0 5px 30px 0px rgba(250, 66, 81, 0.1);
- -ms-box-shadow: 0 5px 30px 0px rgba(250, 66, 81, 0.1);
- }
- .alert-validate::before {
- content: attr(data-validate);
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- align-items: center;
- position: absolute;
- width: 100%;
- min-height: 62px;
- background-color: #fff;
- border-radius: 20px;
- top: 0px;
- left: 0px;
- padding: 0 45px 0 22px;
- pointer-events: none;
- font-family: SourceSansPro-Bold;
- font-size: 16px;
- color: #fa4251;
- line-height: 1.2;
- }
- .btn-hide-validate {
- font-family: Material-Design-Iconic-Font;
- font-size: 15px;
- color: #fa4251;
- cursor: pointer;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- height: 62px;
- top: 0px;
- right: 23px;
- }
- .rs1-alert-validate.alert-validate::before {
- background-color: #fff;
- }
- .true-validate::after {
- content: "\f269";
- font-family: Material-Design-Iconic-Font;
- font-size: 15px;
- color: #57b846;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- height: 62px;
- top: 0px;
- right: 23px;
- }
- /*//////////////////////////////////////////////////////////////////
- [ Social item ]*/
- .login100-social-item {
- font-size: 25px;
- color: #3b5998;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background-color: #fff;
- margin: 5px;
- box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
- -o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
- -ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
- }
- .login100-social-item img {
- width: 26px;
- }
- .login100-social-item:hover {
- color: #3b5998;
- box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2);
- -webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2);
- -o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2);
- -ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2);
- }
- /*//////////////////////////////////////////////////////////////////
- [ Responsive ]*/
- @media (max-width: 480px) {
- .wrap-login100 {
- padding-left: 15px;
- padding-right: 15px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement