In this Popup Model Box I am using input type="checkbox" it is very important in HTML. It's work like a toggle in JavaScript, I will create a two label like a button <label for="click"> when you click on button popup will be display and I have a another label when this will be click popup will be hide.
So here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's start learning responsive popup model using only HTML and CSS from scratch. So let's start..
In this tutorial you will learn to create a Responsive Popup Model Login Form in HTML and CSS coding, subscribe E-CODEC channel to watch more videos on website designing tutorials for beginners.
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel. Thank you..
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
Create a new file index.html, Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to make a Popup login Form Using only HTML and CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Custome stylesheet link-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Google fonts link-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="box">
<input type="checkbox" id="click">
<label for="click" class="btn">View Form</label>
<div class="model-box">
<h1>Login</h1>
<label for="click" class="close">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</label>
<form>
<input type="text" class="input-data" placeholder="Ussername" required>
<input type="password" class="input-data" placeholder="Password" required>
<input type="submit" value="Login" class="btn login-btn">
<a href="#">Forget Password ?</a>
</form>
</div>
</div>
</body>
</html>
STEP 3: Create a style.css file with CSS extension
Create a new file style.css, Here is the code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
min-height: 100vh;
display: flex;
justify-content: safe center;
align-items: center;
background-color: #5d6d7d;
}
.box{
max-width: 500px;
width: 100%;
min-height: 300px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn{
background: linear-gradient(to right, #ff5200e3, #800000e0);
padding: 10px 30px;
cursor: pointer;
max-width: 200px;
color: #fff;
}
.model-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #fff;
display: none;
}
form{
width: 100%;
padding: 30px;
}
form .input-data{
width: 100%;
padding: 10px;
outline: none;
border: 1px solid #111;
margin-top: 10px;
}
h1{
display: block;
text-align: center;
background: linear-gradient(to right, #ff5200e3, #800000e0);
padding: 15px 0;
color: #fff;
font-weight: 700;
}
.login-btn{
border: 0;
margin-top: 15px;
}
a{
color: #ff5200e3;
font-size: 1em;
margin-left: 15px;
}
.close{
position: absolute;
top: 15px;
right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
}
.close .bar{
width: 100%;
height: 3px;
background-color: #fff;
margin-top: 10px;
}
.close .bar1{
transform: rotate(45deg);
}
.close .bar2{
transform: rotate(137deg);
margin-top: -2px;
}
#click{
display: none;
}
#click:checked~.model-box{
display: block;
}
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel on YouTube. Thank you..
You can also learn:- Learn how to make a tab slider using HTML CSS and JavaScript
0 Comments