How To Create Side Login And Sign Up Form Bar Using HTML
Learn how to create a Side login and registration form bar using HTML, CSS, and jQuery. It's simple to make a sidebar form using HTML, CSS, and jQuery. You will easily make this login and registration sidebar by following my Youtube video tutorial. I also provide you HTML, CSS, and Js Code which helps you to understand this Tutorial.
How To Make Side Login And Sign Up Form Bar Using HTML, CSS, and jQuery
- 0.0 - 1.25 min : Intro
- 1.25 - 37.0 min: Create Responsive Side Login And Sign Up Form Bar Using HTML, CSS and jQuery.
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
<html> <head> <meta charset="utf-8"> <meta content="IE-edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, intial-scale=1.0" name="viewport"> <title>Side Login and Registration Form Bar</title> <!--style-----> <style> body{ font-family:poppins; } </style> </head> <body> </body> </html>
Side Login and Registration Form
You can easily make this awesome Side Login and Registration Form on your website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML, CSS, and JavaScript code that I give below. Paste this HTML, CSS, and JavaScript code into your HTML, CSS, and JavaScript file. On the youtube video tutorial, I tell you all the important points which help you to make the Side Login and Registration Form like that for your website. So I recommended you watch the Side Login and Registration Form video Tutorial on how can I make this using HTML, CSS, and JavaScript.This Side Login and Registration Form is fully responsive and all browsers compatible. HTML, CSS, and JavaScript code I have given below this code help you to better understand my Side Login and Registration Form video tutorial on how I make this Side Login and Registration Form. I also provide you the source code, you can download and use this on your website without any copyright.
➤Side Login and Registration Form Bar HTML Code have given below.
<section class="main"> <!--img-------------------> <div class="main-img"> <img src="images/model.svg"/> </div> <!--text-and-btns---------------> <div class="text-btns"> <p>Hello, In this tutorial im gonna show you, How to make Side login bar using HTML, CSS and JQuery.</p> <!--login-and-sign-up-btns-------> <div class="btns"> <a href="#" class="login-btn">Login</a> <a href="#" class="sign-up-btn">Sign Up</a> </div> <!--login-with-social-media------------> <span>Or Via Social Media</span> <!--social-----------------> <div class="via-social"> <a href=""><i class="fab fa-facebook-f"></i></a> <a href=""><i class="fab fa-google"></i></a> <a href=""><i class="fab fa-twitter"></i></a> </div> </div> <!--side-login-bar-----------------------------------------> <div class="side-login"> <!--cancel-btn---------------> <a href="#" class="login-cancel-btn"> <i class="fas fa-times"></i> </a> <!--heading--------> <strong>Sign In</strong> <!--form------------------------> <form> <!--email----> <label>Email<samp>*</samp></label> <div class="email"> <i class="far fa-paper-plane"></i> <input type="email" name="email" required> </div> <!--password----> <label>Password<samp>*</samp></label> <div class="password"> <i class="fas fa-lock"></i> <input type="password" name="password" required> </div> <!--login-btn--> <input type="submit" name="login" class="login" value="Login"> <!--forget------------> <a href="#" class="forget">Forget Your Password?</a> </form> <!--relative-bottom-text-------------------> <div class="relative-text"> <span>Welcome To This Site</span> <p>Registering for this site allows you to access your order status and history. Just fill in the fields below, and we’ll get a new account set up for you in no time. We will only ask you for information necessary to make the purchase process faster and easier.</p> </div> </div> <!--side-sign-up-bar-----------------------------------------> <div class="side-sign-up"> <!--cancel-btn---------------> <a href="#" class="sign-up-cancel-btn"> <i class="fas fa-times"></i> </a> <!--heading--------> <strong>Sign Up</strong> <!--form------------------------> <form> <!--password----> <label>Full Name<samp>*</samp></label> <div class="name"> <i class="far fa-copy"></i> <input type="text" name="fullname" required> </div> <!--email----> <label>Email<samp>*</samp></label> <div class="email"> <i class="far fa-paper-plane"></i> <input type="email" name="email" required> </div> <!--password----> <label>Password<samp>*</samp></label> <div class="password"> <i class="fas fa-lock"></i> <input type="password" name="password" required> </div> <!--login-btn--> <input type="submit" name="login" class="sign-up" value="Sign Up"> </form> <!--relative-bottom-text-------------------> <div class="relative-text"> <span>Sign Up For Better Experience</span> <p>Registering for this site allows you to access your order status and history. Just fill in the fields below, and we’ll get a new account set up for you in no time. We will only ask you for information necessary to make the purchase process faster and easier.</p> </div> </div> </section>
➤ Font Awesome Link
<!--using FontAwesome---------------> <script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script>
➤ Side Login and Registration Form CSS Code is have given below.
body{
margin:0px;
padding: 0px;
font-family: poppins;
}
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.main{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height: 100vh;
background-image: url(../images/bg.png);
background-position: center;
background-size: 1200px;
background-repeat: no-repeat;
}
.main-img{
width:300px;
}
.main-img img{
width:100%;
height: 100%;
object-position: center;
object-fit: contain;
}
.text-btns{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-btns p{
color: #363636;
width:50%;
text-align: center;
margin: 10px 0px;
font-size: 0.9rem;
}
.btns{
display: flex;
flex-grow: 1;
width:50%;
height: 100%;
flex-direction: column;
}
.btns a{
height: 45px;
border-radius: 20px;
display: flex;
flex-grow: 0.5;
border: 1px solid #7e7e7e;
justify-content: center;
align-items: center;
color: #222222;
font-weight: 600;
font-size: 0.8rem;
margin: 5px;
letter-spacing: 1px;
}
.login-btn,
.btns a:hover{
background-color: #e8505b;
color: #ffffff !important;
border: none !important;
box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
transition: all ease 0.3s;
}
.text-btns span{
font-weight: 600;
color: #222222;
font-size: 0.9rem;
margin-top: 20px;
}
.via-social{
display: flex;
justify-content: center;
align-items: center;
}
.via-social a{
width:33px;
height: 33px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
font-size: 0.8rem;
color: #ffffff;
}
.via-social a:nth-child(1){
background-color: #155ee6;
}
.via-social a:nth-child(2){
background-color: #eb1515;
}
.via-social a:nth-child(3){
background-color: #197cfd;
}
.side-login,
.side-sign-up{
width:420px;
height: 100vh;
position: fixed;
right: 0px;
top: 0px;
background-color: #ffffff;
box-shadow: 3px 5px 30px rgba(0,0,0,0.1);
}
.side-login strong,
.side-sign-up strong{
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 1px;
color: #555555;
text-transform: uppercase;
width: 90%;
padding: 18px;
text-align: center;
display: flex;
justify-content: center;
border-bottom: 1px solid #acacac;
margin: auto;
}
.side-login form,
.side-sign-up form{
padding: 5px 30px 20px 30px;
}
.side-login form label,
.side-sign-up form label{
font-weight: 400;
color: #555555;
font-size: 0.9rem;
margin: 20px 0px 5px 0px;
display: flex;
letter-spacing: 1px;
}
.side-login form label samp,
.side-sign-up form label samp{
color: #d82710;
font-size: 1.1rem;
font-weight: 800;
}
.email,
.password,
.name{
width:100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #acacac;
}
.email input,
.password input,
.name input{
width:100%;
height: 100%;
border: none;
outline: none;
}
.email i,
.password i,
.name i{
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #acacac;
color: #555555;
}
.login,
.sign-up{
width:100%;
height: 45px;
background-color: #e8505b;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
margin: 20px 0px;
border: none;
outline: none;
font-weight: 500;
}
.relative-text{
width:90%;
text-align: center;
border-top: 1px solid #acacac;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.relative-text span{
font-weight: 600;
color: #222222;
font-size: 1rem;
text-transform: uppercase;
margin-top: 20px;
}
.relative-text p{
color: #7e7e7e;
margin: 7px 0px;
}
.login-cancel-btn,
.sign-up-cancel-btn{
position: absolute;
left: 0px;
top: 0px;
width:40px;
height: 40px;
background-color: #e8505b;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8rem;
}
.forget{
color: #333333;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 500;
font-size: 0.9rem;
}
.main-active:before{
content: '';
position: absolute;
left: 0px;
top: 0px;
width:100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.main-active{
position: absolute;
right: 240px;
animation: main 0.3s;
}
.side-login,
.side-sign-up{
display: none;
}
.side-login-active,
.side-sign-up-active{
display:block;
animation: side-bar 0.2s;
}
@keyframes main{
0%{
right: 0px;
}
100%{
right: 240px;
}
}
@keyframes side-bar{
0%{
right: -240px;
display: block;
}
100%{
right: 0px;
display: block;
}
}
@media(max-width:430px){
.side-login,
.side-sign-up{
width:100%;
}
.main-img{
width:60%
}
.btns a{
height: 45px;
}
.text-btns p,
.btns{
width:80%;
}
}
➤JQuery Link
<!--using JQuery---------------> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
➤JavaScript
$(document).on('click','.login-btn,.sign-up-btn',function(){
$('.main').addClass('main-active')
});
$(document).on('click','.login-btn',function(){
$('.side-login').addClass('side-login-active')
});
$(document).on('click','.sign-up-btn',function(){
$('.side-sign-up').addClass('side-sign-up-active')
});
$(document).on('click','.sign-up-cancel-btn,.login-cancel-btn',function(){
$('.main').removeClass('main-active')
});
$(document).on('click','.login-cancel-btn',function(){
$('.side-login').removeClass('side-login-active')
});
$(document).on('click','.sign-up-cancel-btn',function(){
$('.side-sign-up').removeClass('side-sign-up-active')
});
The Download Links Will Be Shown in 30 Seconds
This comment has been removed by the author.
ReplyDeleteA natural aphrodisiac performance honey that gives you energy and relief from erectile dysfunction and enhances both female arousal and male performance. PLz contact .PLz contact royal epimedium sex honey.
ReplyDelete