How to Create a Animated Login and Registration Form with HTML & CSS And JavaScript
**Introduction: How to Create a Animated Login and Registration Form with HTML & CSS And JavaScript
Ready to craft eye-catching login and registration forms that make a lasting impression? Unlock the secrets of HTML and CSS in this 8-minute crash course!
Join me as we transform simple code into stunning forms that seamlessly blend functionality and style. No prior experience needed – just a thirst for web design magic!
In this video, you'll discover:
- The power of HTML and CSS to build engaging forms without breaking a sweat.
- Step-by-step instructions that make learning a breeze, even for complete beginners.
- Pro tips to elevate your forms from basic to beautiful, ensuring a user-friendly experience.
- How to tailor your forms to match your unique brand and style, standing out from the crowd.
Grab your favorite beverage and settle in – by the end of this video, you'll be ready to create login and registration forms that captivate and convert!
Click the play button now and start your journey to web design mastery!
ScreenShots
<->
start, add the following HTML codes to your Login_34.html file.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> Login and Register Form Html Templates</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="font/flaticon.css">
<!-- Google Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="preloader" class="preloader">
<div class='inner'>
<div class='line1'></div>
<div class='line2'></div>
<div class='line3'></div>
</div>
</div>
<section class="fxt-template-animation fxt-template-layout34" data-bg-image="img/elements/bg1.png">
<div class="fxt-shape">
<div class="fxt-transformX-L-50 fxt-transition-delay-1">
<img src="img/elements/shape1.png" alt="Shape">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="fxt-column-wrap justify-content-between">
<div class="fxt-animated-img">
<div class="fxt-transformX-L-50 fxt-transition-delay-10">
<img src="img/figure/bg34-1.png" alt="Animated Image">
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-3">
<a href="login-34.html" class="fxt-logo"><img src="img/logo-34.png" alt="Logo"></a>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-5">
<div class="fxt-middle-content">
<h1 class="fxt-main-title">Sign In to Rechage Direct</h1>
<div class="fxt-switcher-description1">If you don’t have an account You can<a href="register-34.html" class="fxt-switcher-text ms-2">Sign Up</a></div>
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-7">
<div class="fxt-qr-code">
<img src="img/elements/qr-login-34.png" alt="QR">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="fxt-column-wrap justify-content-center">
<div class="fxt-form">
<form method="POST">
<div class="form-group">
<input type="email" id="email" class="form-control" name="email" placeholder="Enter Email or Mobile Number" required="required">
</div>
<div class="form-group">
<input id="password" type="password" class="form-control" name="password" placeholder="********" required="required">
<i toggle="#password" class="fa fa-fw fa-eye toggle-password field-icon"></i>
</div>
<div class="form-group">
<div class="fxt-switcher-description2 text-right">
<a href="forgot-password-34.html" class="fxt-switcher-text">Recovery Password</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="fxt-btn-fill">Sign In</button>
</div>
</form>
</div>
<div class="fxt-style-line">
<span>Or Continus with</span>
</div>
<ul class="fxt-socials">
<li class="fxt-google">
<a href="#" title="google"><i class="fab fa-google-plus-g"></i></a>
</li>
<li class="fxt-apple">
<a href="#" title="apple"><i class="fab fa-apple"></i></a>
</li>
<li class="fxt-facebook">
<a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- jquery-->
<script src="js/jquery-3.5.0.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- Imagesloaded js -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- Validator js -->
<script src="js/validator.min.js"></script>
<!-- Custom Js -->
<script src="js/main.js"></script>
</body>
</html>
add the following HTML codes to your Register_34.html file.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Xmee | Login and Register Form Html Templates</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="font/flaticon.css">
<!-- Google Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="preloader" class="preloader">
<div class='inner'>
<div class='line1'></div>
<div class='line2'></div>
<div class='line3'></div>
</div>
</div>
<section class="fxt-template-animation fxt-template-layout34" data-bg-image="img/elements/bg1.png">
<div class="fxt-shape">
<div class="fxt-transformX-L-50 fxt-transition-delay-1">
<img src="img/elements/shape1.png" alt="Shape">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="fxt-column-wrap justify-content-between">
<div class="fxt-animated-img">
<div class="fxt-transformX-L-50 fxt-transition-delay-10">
<img src="img/figure/bg34-1.png" alt="Animated Image">
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-3">
<a href="login-34.html" class="fxt-logo"><img src="img/logo-34.png" alt="Logo"></a>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-5">
<div class="fxt-middle-content">
<h1 class="fxt-main-title">Sign Up to Rechage Direct</h1>
<div class="fxt-switcher-description1">If you have an account You can<a href="login-34.html" class="fxt-switcher-text ms-2">Sign In</a></div>
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-7">
<div class="fxt-qr-code">
<img src="img/elements/qr-register-34.png" alt="QR">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="fxt-column-wrap justify-content-center">
<div class="fxt-form">
<form method="POST">
<div class="form-group">
<input type="text" id="f_name" class="form-control" name="f_name" placeholder="Fast Name" required="required">
</div>
<div class="form-group">
<input type="text" id="l_name" class="form-control" name="l_name" placeholder="Last Name" required="required">
</div>
<div class="form-group">
<input type="email" id="email" class="form-control" name="email" placeholder="E-mail Address" required="required">
</div>
<div class="form-group">
<input id="password" type="password" class="form-control" name="password" placeholder="********" required="required">
<i toggle="#password" class="fa fa-fw fa-eye toggle-password field-icon"></i>
</div>
<div class="form-group">
<div class="fxt-checkbox-box">
<input id="checkbox1" type="checkbox">
<label for="checkbox1" class="ps-4">I agree with <a
class="terms-link" href="#">Terms</a> and <a class="terms-link" href="#">Privacy Policy</a></label>
</div>
</div>
<div class="form-group">
<button type="submit" class="fxt-btn-fill">Sign Up</button>
</div>
</form>
</div>
<div class="fxt-style-line">
<span>Or Continus with</span>
</div>
<ul class="fxt-socials">
<li class="fxt-google">
<a href="#" title="google"><i class="fab fa-google-plus-g"></i></a>
</li>
<li class="fxt-apple">
<a href="#" title="apple"><i class="fab fa-apple"></i></a>
</li>
<li class="fxt-facebook">
<a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- jquery-->
<script src="js/jquery-3.5.0.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- Imagesloaded js -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- Validator js -->
<script src="js/validator.min.js"></script>
<!-- Custom Js -->
<script src="js/main.js"></script>
</body>
</html>
add the following HTML codes to your Forget_Password_34.html file.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Xmee | Login and Register Form Html Templates</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="font/flaticon.css">
<!-- Google Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="preloader" class="preloader">
<div class='inner'>
<div class='line1'></div>
<div class='line2'></div>
<div class='line3'></div>
</div>
</div>
<section class="fxt-template-animation fxt-template-layout34" data-bg-image="img/elements/bg1.png">
<div class="fxt-shape">
<div class="fxt-transformX-L-50 fxt-transition-delay-1">
<img src="img/elements/shape1.png" alt="Shape">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="fxt-column-wrap justify-content-between">
<div class="fxt-animated-img">
<div class="fxt-transformX-L-50 fxt-transition-delay-10">
<img src="img/figure/bg34-1.png" alt="Animated Image">
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-3">
<a href="login-34.html" class="fxt-logo"><img src="img/logo-34.png" alt="Logo"></a>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-5">
<div class="fxt-middle-content">
<h1 class="fxt-main-title">Reset Password</h1>
<div class="fxt-switcher-description1">Enter the email address or mobile number associated</div>
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-7">
<div class="fxt-qr-code">
<img src="img/elements/qr-forgot-password-34.png" alt="QR">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="fxt-column-wrap justify-content-center">
<div class="fxt-form">
<form method="POST">
<div class="form-group">
<label for="email" class="fxt-label">Email or Mobile Number</label>
<input type="email" id="email" class="form-control" name="email" placeholder="Enter Email or Mobile Number" required="required">
</div>
<div class="form-group">
<button type="submit" class="fxt-btn-fill">Sign In</button>
</div>
</form>
<div class="fxt-switcher-description3">Return to?<a href="login-34.html" class="fxt-switcher-text ms-1">Log in</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- jquery-->
<script src="js/jquery-3.5.0.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- Imagesloaded js -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- Validator js -->
<script src="js/validator.min.js"></script>
<!-- Custom Js -->
<script src="js/main.js"></script>
</body>
</html>
add the following HTML codes to your OTP_34.html file.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Xmee | Login and Register Form Html Templates</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="font/flaticon.css">
<!-- Google Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="preloader" class="preloader">
<div class='inner'>
<div class='line1'></div>
<div class='line2'></div>
<div class='line3'></div>
</div>
</div>
<section class="fxt-template-animation fxt-template-layout34" data-bg-image="img/elements/bg1.png">
<div class="fxt-shape">
<div class="fxt-transformX-L-50 fxt-transition-delay-1">
<img src="img/elements/shape1.png" alt="Shape">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="fxt-column-wrap justify-content-between">
<div class="fxt-animated-img">
<div class="fxt-transformX-L-50 fxt-transition-delay-10">
<img src="img/figure/bg34-1.png" alt="Animated Image">
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-3">
<a href="login-34.html" class="fxt-logo"><img src="img/logo-34.png" alt="Logo"></a>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-5">
<div class="fxt-middle-content">
<h1 class="fxt-main-title">Validate OTP</h1>
<div class="fxt-switcher-description1">Please enter the OTP (one time password) to verify your account. A Code has been sent to +2*******337</div>
</div>
</div>
<div class="fxt-transformX-L-50 fxt-transition-delay-7">
<div class="fxt-qr-code">
<img src="img/elements/qr-otp-34.png" alt="QR">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="fxt-column-wrap justify-content-center">
<div class="fxt-form">
<a href="#" class="fxt-otp-logo"><img src="img/elements/otp-icon.png" alt="Otp Logo"></a>
<form method="POST" id="otp-form">
<label for="reset" class="fxt-label">Enter OTP Code Here</label>
<div class="fxt-otp-row">
<input type="text" class="fxt-otp-col otp-input form-control" maxlength="1" required="required">
<input type="text" class="fxt-otp-col otp-input form-control" maxlength="1" required="required">
<input type="text" class="fxt-otp-col otp-input form-control" maxlength="1" required="required">
<input type="text" class="fxt-otp-col otp-input form-control" maxlength="1" required="required">
</div>
<div class="fxt-otp-btn">
<button type="submit" class="fxt-btn-fill">Verify</button>
</div>
</form>
<div class="fxt-switcher-description3">Not received your code?<a href="login-34.html" class="fxt-switcher-text ms-1">Resend code</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- jquery-->
<script src="js/jquery-3.5.0.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- Imagesloaded js -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- Validator js -->
<script src="js/validator.min.js"></script>
<!-- Custom Js -->
<script src="js/main.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css
@charset "UTF-8";
/*For Prealoder*/
/*=======================================================================
1. Typography
=========================================================================*/
html {
height: 100%;
}
body {
font-size: 16px;
font-family: "Roboto", sans-serif;
font-weight: 400;
height: 100%;
line-height: 1.7;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: #646464;
background-color: #fff;
}
p {
margin: 0 0 20px 0;
color: #646464;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
font-family: "Roboto", sans-serif;
margin: 0 0 20px 0;
color: #111;
}
h1,
h2 {
line-height: 1.2;
}
h3,
h4,
h5,
h6 {
line-height: 1.4;
}
h1 {
font-size: 36px;
}
@media only screen and (max-width: 1199px) {
h1 {
font-size: 34px;
}
}
@media only screen and (max-width: 991px) {
h1 {
font-size: 32px;
}
}
@media only screen and (max-width: 767px) {
h1 {
font-size: 30px;
}
}
h2 {
font-size: 28px;
}
@media only screen and (max-width: 1199px) {
h2 {
font-size: 26px;
}
}
@media only screen and (max-width: 991px) {
h2 {
font-size: 24px;
}
}
@media only screen and (max-width: 767px) {
h2 {
font-size: 22px;
}
}
h3 {
font-size: 22px;
}
@media only screen and (max-width: 991px) {
h3 {
font-size: 20px;
}
}
@media only screen and (max-width: 767px) {
h3 {
font-size: 18px;
}
}
h4 {
font-size: 20px;
}
@media only screen and (max-width: 991px) {
h4 {
font-size: 18px;
}
}
@media only screen and (max-width: 767px) {
h4 {
font-size: 16px;
}
}
h5 {
font-size: 18px;
}
@media only screen and (max-width: 991px) {
h5 {
font-size: 16px;
}
}
/*=======================================================================
2. Template Default Style
=========================================================================*/
a {
text-decoration: none;
}
a:active,
a:hover,
a:focus {
text-decoration: none;
}
a:active,
a:hover,
a:focus {
outline: 0 none;
}
img {
max-width: 100%;
height: auto;
}
ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.fxt-content-between {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
.fxt-none-767 {
display: none !important;
}
}
@media only screen and (max-width: 991px) {
.fxt-none-991 {
display: none !important;
}
}
/*Preloader Styles Start*/
.preloader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: 999999;
}
.preloader .inner {
width: 99px;
height: 99px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.preloader .inner > div {
border-radius: 50%;
position: absolute;
-webkit-animation-name: circle_rotate;
animation-name: circle_rotate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.preloader .inner .line1 {
width: 100%;
height: 100%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 6px solid #740eaf;
border-left: 6px solid rgba(116, 14, 175, 0);
border-right: 6px solid rgba(116, 14, 175, 0);
border-bottom: 6px solid rgba(116, 14, 175, 0);
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.preloader .inner .line2 {
width: 70%;
height: 70%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 6px solid #9726d8;
border-left: 6px solid rgba(151, 38, 216, 0);
border-right: 6px solid rgba(151, 38, 216, 0);
border-bottom: 6px solid rgba(151, 38, 216, 0);
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.preloader .inner .line3 {
width: 40%;
height: 40%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 6px solid #be70eb;
border-left: 6px solid rgba(190, 112, 235, 0);
border-right: 6px solid rgba(190, 112, 235, 0);
border-bottom: 6px solid rgba(190, 112, 235, 0);
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes circle_rotate {
50%, 100% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes circle_rotate {
50%, 100% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
/*Preloader Styles End*/
/*========================================================================
3. Template Animation
=========================================================================*/
.fxt-template-animation {
position: relative;
z-index: 1;
width: 100%;
opacity: 0;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fxt-template-animation .fxt-opacity {
opacity: 0;
}
.fxt-template-animation .fxt-transformY-50 {
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
}
.fxt-template-animation .fxt-transformX-L-50 {
opacity: 0;
-webkit-transform: translateX(-50px);
-ms-transform: translateX(-50px);
transform: translateX(-50px);
}
.fxt-template-animation .fxt-transformX-R-50 {
opacity: 0;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
transform: translateX(50px);
}
.loaded.fxt-template-animation {
opacity: 1;
}
.loaded.fxt-template-animation .fxt-opacity {
opacity: 1;
-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transformY-50 {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transformX-L-50 {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transformX-R-50 {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transition-delay-1 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-2 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-3 {
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-4 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-5 {
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-6 {
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-7 {
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-8 {
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-9 {
-webkit-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-10 {
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-11 {
-webkit-transition-delay: 1.1s;
-o-transition-delay: 1.1s;
transition-delay: 1.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-12 {
-webkit-transition-delay: 1.2s;
-o-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-13 {
-webkit-transition-delay: 1.3s;
-o-transition-delay: 1.3s;
transition-delay: 1.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-14 {
-webkit-transition-delay: 1.4s;
-o-transition-delay: 1.4s;
transition-delay: 1.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-15 {
-webkit-transition-delay: 1.5s;
-o-transition-delay: 1.5s;
transition-delay: 1.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-16 {
-webkit-transition-delay: 1.6s;
-o-transition-delay: 1.6s;
transition-delay: 1.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-17 {
-webkit-transition-delay: 1.7s;
-o-transition-delay: 1.7s;
transition-delay: 1.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-18 {
-webkit-transition-delay: 1.8s;
-o-transition-delay: 1.8s;
transition-delay: 1.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-19 {
-webkit-transition-delay: 1.9s;
-o-transition-delay: 1.9s;
transition-delay: 1.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-20 {
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;
}
/*========================================================================
37. Demo Layout Thirty Four
=========================================================================*/
.fxt-template-layout34 {
position: relative;
min-height: 100vh;
width: 100%;
background-repeat: no-repeat;
background-position: center top;
}
.fxt-template-layout34 .fxt-column-wrap {
position: relative;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 15vh;
padding-bottom: 15vh;
}
@media only screen and (max-width: 991px) {
.fxt-template-layout34 .fxt-column-wrap {
padding-top: 10vh;
padding-bottom: 10vh;
min-height: auto;
}
}
@media only screen and (max-width: 767px) {
.fxt-template-layout34 .fxt-column-wrap {
padding-top: 8vh;
padding-bottom: 8vh;
}
}
@media only screen and (max-width: 575px) {
.fxt-template-layout34 .fxt-column-wrap {
padding-top: 6vh;
padding-bottom: 6vh;
}
}
.fxt-template-layout34 .fxt-shape {
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
.fxt-template-layout34 .fxt-animated-img {
position: absolute;
z-index: -1;
top: 50%;
right: 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.fxt-template-layout34 .fxt-logo {
margin-bottom: 50px;
display: block;
max-width: 35vw;
}
.fxt-template-layout34 .fxt-main-title {
max-width: 280px;
width: 100%;
font-size: 40px;
font-weight: 700;
color: #000000;
margin-bottom: 20px;
}
@media only screen and (max-width: 991px) {
.fxt-template-layout34 .fxt-main-title {
font-size: 36px;
}
}
@media only screen and (max-width: 767px) {
.fxt-template-layout34 .fxt-main-title {
font-size: 32px;
}
}
@media only screen and (max-width: 575px) {
.fxt-template-layout34 .fxt-main-title {
font-size: 28px;
}
}
.fxt-template-layout34 .fxt-switcher-description1 {
color: #363636;
font-size: 20px;
max-width: 260px;
width: 100%;
margin-bottom: 40px;
}
.fxt-template-layout34 .fxt-switcher-description1 .fxt-switcher-text {
display: inline-block;
color: #4460f1;
font-size: 18px;
font-weight: 600;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fxt-template-layout34 .fxt-switcher-description1 .fxt-switcher-text:hover {
color: #0925ad;
text-decoration: underline;
}
.fxt-template-layout34 .fxt-switcher-description2 .fxt-switcher-text {
color: #b1b1b2;
font-size: 14px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fxt-template-layout34 .fxt-switcher-description2 .fxt-switcher-text:hover {
color: #1a34b8;
text-decoration: underline;
}
.fxt-template-layout34 .fxt-switcher-description3 {
text-align: center;
font-size: 16px;
color: #646464;
margin-bottom: 10px;
}
.fxt-template-layout34 .fxt-switcher-description3 .fxt-switcher-text {
color: #4460f1;
font-size: 16px;
font-weight: 500;
display: inline-block;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fxt-template-layout34 .fxt-switcher-description3 .fxt-switcher-text:hover {
color: #0f2ab2;
text-decoration: underline;
}
.fxt-template-layout34 .fxt-qr-code {
display: inline-block;
max-width: 35vw;
}
.fxt-template-layout34 .fxt-qr-code img {
-webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
padding: 20px;
border: 1px solid #dfdfdf;
}
@media only screen and (max-width: 575px) {
.fxt-template-layout34 .fxt-qr-code img {
padding: 5px;
}
}
.fxt-template-layout34 .fxt-form {
margin-top: 10px;
}
.fxt-template-layout34 .fxt-form .fxt-label {
color: #14133b;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.fxt-template-layout34 .fxt-form .form-group {
position: relative;
z-index: 1;
margin-bottom: 25px;
}
.fxt-template-layout34 .fxt-form .form-group .field-icon {
position: absolute;
z-index: 1;
right: 26px;
bottom: 24px;
font-size: 14px;
color: #a1a1a1;
}
.fxt-template-layout34 .fxt-form .form-group .field-icon:before {
padding: 17px 10px;
}
.fxt-template-layout34 .fxt-form .form-control {
border-radius: 10px;
background-color: #ebf0f6;
min-height: 60px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #ebf0f6;
padding: 10px 20px;
color: #111;
}
@media only screen and (max-width: 767px) {
.fxt-template-layout34 .fxt-form .form-control {
min-height: 50px;
}
}
.fxt-template-layout34 .fxt-form input::-webkit-input-placeholder {
color: #858588;
font-size: 14px;
font-weight: 300;
}
.fxt-template-layout34 .fxt-form input::-moz-placeholder {
color: #858588;
font-size: 14px;
font-weight: 300;
}
.fxt-template-layout34 .fxt-form input:-moz-placeholder {
color: #858588;
font-size: 14px;
font-weight: 300;
}
.fxt-template-layout34 .fxt-form input:-ms-input-placeholder {
color: #858588;
font-size: 14px;
font-weight: 300;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box {
margin-bottom: 25px;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box label {
color: #14133b;
margin-bottom: 0;
font-size: 14px;
font-weight: 500;
position: relative;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box label:before {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 5px;
left: 0;
right: 0;
border: 1px solid;
border-color: #dcdcdc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box label:after {
position: absolute;
font-size: 10px;
color: #555555;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box input[type=checkbox] {
display: none;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box input[type=checkbox]:checked + label::after {
font-family: "Font Awesome 5 Free";
content: "";
font-weight: 900;
color: #ffffff;
left: 0;
right: 0;
top: 5px;
width: 16px;
text-align: center;
}
.fxt-template-layout34 .fxt-form .fxt-checkbox-box input[type=checkbox]:checked + label::before {
background-color: #4460f1;
border-color: #4460f1;
}
.fxt-template-layout34 .fxt-form .fxt-otp-logo {
margin-bottom: 30px;
display: block;
}
.fxt-template-layout34 .fxt-form .fxt-otp-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.fxt-template-layout34 .fxt-form .fxt-otp-row .fxt-otp-col {
min-height: 50px;
padding: 5px;
text-align: center;
margin-right: 15px;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.fxt-template-layout34 .fxt-form .fxt-otp-row .fxt-otp-col:last-child {
margin-right: 0;
}
.fxt-template-layout34 .fxt-form .fxt-otp-btn {
margin-bottom: 20px;
}
.fxt-template-layout34 .terms-link {
display: inline-block;
color: #4460f1;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fxt-template-layout34 .terms-link:hover {
color: #1a34b8;
text-decoration: underline;
}
.fxt-template-layout34 .fxt-btn-fill {
font-family: "Roboto", sans-serif;
cursor: pointer;
display: inline-block;
font-size: 18px;
font-weight: 500;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border: 0;
color: #fff;
border-radius: 10px;
background-color: #4460f1;
padding: 12px 36px;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fxt-template-layout34 .fxt-btn-fill:hover {
background-color: #1a34b8;
}
.fxt-template-layout34 .fxt-btn-fill:focus {
outline: none;
}
@media only screen and (max-width: 767px) {
.fxt-template-layout34 .fxt-btn-fill {
font-size: 16px;
padding: 11px 30px;
}
}
.fxt-template-layout34 .fxt-style-line {
overflow: hidden;
text-align: center;
margin-bottom: 20px;
}
.fxt-template-layout34 .fxt-style-line span {
text-align: center;
font-size: 15px;
color: #acacac;
display: inline-block;
position: relative;
padding: 0 25px;
z-index: 1;
}
.fxt-template-layout34 .fxt-style-line span:before {
display: inline-block;
content: "";
height: 2px;
width: 100%;
background-color: #cfcfcf;
left: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
z-index: 1;
}
.fxt-template-layout34 .fxt-style-line span:after {
display: inline-block;
content: "";
height: 2px;
width: 100%;
background-color: #cfcfcf;
right: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
z-index: 1;
}
.fxt-template-layout34 ul.fxt-socials {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: -5px;
margin-left: -5px;
}
.fxt-template-layout34 ul.fxt-socials li {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
}
.fxt-template-layout34 ul.fxt-socials li a {
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 20px;
height: 60px;
width: 80px;
border: 1px solid;
border-color: #cfcfcf;
background-color: #fefefe;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
.fxt-template-layout34 ul.fxt-socials li a {
font-size: 18px;
height: 50px;
width: 60px;
}
}
.fxt-template-layout34 ul.fxt-socials li a:hover {
background-color: #ffffff;
border-color: #ffffff;
-webkit-box-shadow: 0 0 62px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 62px 0 rgba(0, 0, 0, 0.1);
}
.fxt-template-layout34 ul.fxt-socials li.fxt-google a {
color: #CC3333;
}
.fxt-template-layout34 ul.fxt-socials li.fxt-apple a {
color: #132133;
}
.fxt-template-layout34 ul.fxt-socials li.fxt-facebook a {
color: #3b5998;
}
/*# sourceMappingURL=style.css.map */
Next, add the following JavaScript codes to your JavaScript.js
@charset "UTF-8";
/*For Prealoder*/
(function($) {
"use strict";
/*-------------------------------------
Background image
-------------------------------------*/
$("[data-bg-image]").each(function() {
var img = $(this).data("bg-image");
$(this).css({
backgroundImage: "url(" + img + ")"
});
});
/*-------------------------------------
After Load All Content Add a Class
-------------------------------------*/
window.onload = addNewClass();
function addNewClass() {
$('.fxt-template-animation').imagesLoaded().done(function(instance) {
$('.fxt-template-animation').addClass('loaded');
});
}
/*-------------------------------------
Toggle Class
-------------------------------------*/
$(".toggle-password").on('click', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
/*-------------------------------------
Youtube Video
-------------------------------------*/
if ($.fn.YTPlayer !== undefined && $("#fxtVideo").length) {
$("#fxtVideo").YTPlayer({ useOnMobile: true });
}
/*-------------------------------------
Vegas Slider
-------------------------------------*/
if ($.fn.vegas !== undefined && $("#vegas-slide").length) {
var target_slider = $("#vegas-slide"),
vegas_options = target_slider.data('vegas-options');
if (typeof vegas_options === "object") {
target_slider.vegas(vegas_options);
}
}
/*-------------------------------------
OTP Form (Focusing on next input)
-------------------------------------*/
$("#otp-form .otp-input").keyup(function() {
if (this.value.length == this.maxLength) {
$(this).next('.otp-input').focus();
}
});
/*-------------------------------------
Social Animation
-------------------------------------*/
$('#fxt-login-option >ul >li').hover(function() {
$('#fxt-login-option >ul >li').removeClass('active');
$(this).addClass('active');
});
/*-------------------------------------
Preloader
-------------------------------------*/
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
})(jQuery);