Responsive HTML and CSS form design and video background
In this post, I am going to share how to design responsive login and registration form design. Also, how to use video in the background using HTML and CSS. You also learn how to use the jQuery toggle property. You will learn how to toggle two div elements using jQuery. If you have basic HTML and CSS knowledge, you can continue to learn.
The requirement for this project
- Notepad, Brackets, Visual Code, or any IDE.
- jQuery min CDN.
Workflow
1. Create an index.html and file and paste the below code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Login an Registration Page with Video Backgroud</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="accoutn_main">
<video muted loop autoplay class="video">
<source src="image/colors.mp4" type="video/mp4">
</video>
<div class="form_area">
<div class="main_con">
<div class="headline">
<h1>Food Shop</h1>
<span>100% Fresh Food</span>
</div>
<div class="form_con">
<div class="log_form">
<h2>Login Now!!</h2>
<form action="">
<div class="input-box">
<input type="email" name="email" required>
<label>Email</label>
</div>
<div class="input-box">
<input type="password" name="password" required>
<label>Password</label>
</div>
<div class="button">
<button type="submit">LOGIN</button>
</div>
</form>
</div>
<!-- Registration form -->
<div class="reg_form hidden">
<h2>Register Now!!</h2>
<form action="">
<div class="input-box">
<input type="text" name="name" required>
<label>Email</label>
</div>
<div class="input-box">
<input type="email" name="email" required>
<label>Email</label>
</div>
<div class="input-box">
<input type="password" name="password" required>
<label>Password</label>
</div>
<div class="button">
<button type="submit">REGISTRATION</button>
</div>
</form>
</div>
<div class="text-center">
<span id="action">Switch Mode</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#action").click(function(){
$(".log_form, .reg_form").toggle(1200);
});
</script>
</body>
</html>2. Create the main.css file, under your CSS folder, and paste the below code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accoutn_main{
position: relative;
height: 100%;
width: 100%;
z-index: 999;
}
.accoutn_main .video{
position: fixed;
z-index: -100;
width: 100%;
height: auto;
}
.form_area{
width: 100%;
height: 100%;
background-size: 100% 200%;
background: radial-gradient(circle at 250% 50%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, #1661C2 100%);
}
.main_con{
position: relative;
padding: 50px;
width: 550px;
}
.headline{
text-align: center;
color: #fff;
margin: 20px 0;
}
.form_con{
position: relative;
padding: 30px;
width: 100%;
}
.form_con h2{
margin: 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.form_con .input-box{
position: relative;
}
.form_con .input-box input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.form_con .input-box label{
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 15px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.form_con .input-box input:focus + label,
.form_con .input-box input:valid + label{
top: -25px;
left: 0;
color: #fff;
font-size: 18px;
}
.form_con .button{
text-align: center;
}
.form_con button{
font-size: 20px;
padding: 8px 20px;
background: none;
border: 2px solid #fff;
cursor: pointer;
color: #fff;
text-align: center;
border-radius: 5px;
}
.form_con button:hover{
background: #DDDDDD;
color: #1661C2;
border-radius: 5px;
box-shadow: 0 0 5px #DDDDDD, 0 0 25px #DDDDDD, 0 0 50px #DDDDDD, 0 0 100px #DDDDDD;
}
.hidden{
display: none;
}
.text-center{
text-align: center;
color: #fff;
margin: 15px 0;
cursor: pointer;
}
/* responsive media query */
@media (max-width: 1080px){
.video{
display: none;
}
.accoutn_main{
width: 100%;
height: 100%;
background: url(../image/m-d-playing.jpg) no-repeat;
background-size: cover;
}
}
@media (max-width: 665px){
.video{
display: none;
}
.accoutn_main{
background: #1661C2;
}
}
@media (max-width: 550px){
.video{
display: none;
}
.accoutn_main{
background: #1661C2;
}
.main_con{
width: 100%;
}
}3. Download the required image and videos file from the download link and paste those to the image folder in your project directory.
So, that’s all from this project. If you don’t understand anything, feel free to comment. And also share this post on your social media account.
