How to create Amazing Responsive Sign In Page | HTML & CSS Project - Frontend everything
Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Sign In Page with the help of HTML and CSS Only! 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Sign In Page that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Sign In Page Using HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<div class="logo">
<img src="
https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c0840e59-db43-4681-ae7b-31a04dc4bc55/d7eqdvw-4e97ac92-e4b9-4498-9655-e4d612eb478b.png/v1/fill/w_1600,h_900,strp/random_logo_by_criticl_d7eqdvw-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvYzA4NDBlNTktZGI0My00NjgxLWFlN2ItMzFhMDRkYzRiYzU1XC9kN2VxZHZ3LTRlOTdhYzkyLWU0YjktNDQ5OC05NjU1LWU0ZDYxMmViNDc4Yi5wbmciLCJ3aWR0aCI6Ijw9MTYwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.X991O1jF5lTNZbbEoHEfoo6nlHEihBMHMIm5-uBCXcU"
alt="logo" >
</div>
<div class="items">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#"><button class="btn">Services?</button></a></li>
</ul>
</div>
</div>
<section class="login_sec">
<form action="#">
<div class="container">
<div class="heading">
<h1>Sign In</h1>
<button class="apple_id"> Log in using your Apple ID </button>
</div>
<div class="inp-items">
<label for="email">
<span>Email address</span>
<input type="email" placeholder="john@gmail.com" class="inp">
</label>
<label for="password">
<div class="inline">
<span>Password</span>
<span class="pass_fgt">Forgot Password?</span>
</div>
<input type="password" placeholder="Enter your Password" class="inp">
</label>
<label for="submit">
<input type="submit" value="Sign In" class="submit_btn">
</label>
</div>
</div>
</div>
</form>
</section>
</body>
</html>
After the HTML we will design the registration form..
Output till now
CSS🎈( step - 2)
/* font links */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html{
}
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navbar */
.nav{
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(247, 247, 247);
height: 80px;
}
.logo img{
width: 100px;
}
.items > ul{
display: flex;
align-items: center;
}
ul li{
list-style-type: none;
margin: 0 20px;
transition: .3s;
}
ul li:hover{
text-decoration: underline;
}
li > a{
text-decoration: none;
color: #000;
font-family: roboto;
font-size: 1em;
}
.btn{
background: rgb(223, 223, 223);
width: auto;
height: 30px;
padding: 0 10px;
color: #000;
border: 2px solid transparent;
border-radius: 8px;
font-weight: 400;
font-size: 1em;
cursor: pointer;
transition: .3s ;
}
.btn:hover{
background: #000;
color: rgb(223, 223, 223);
}
/* navbar end */
/* Sign In Form */
.login_sec{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
/* background: #000; */
}
.container{
width: 500px;
height: auto;
/* background: rgb(231, 231, 231); */
margin-top: 8em;
display: flex;
flex-direction: column;
align-items: center;
}
.heading h1{
font-size: 30px;
font-family: poppins;
letter-spacing: 1px;
text-align: center;
}
.heading .apple_id{
padding: 5px;
background: #4267B2;
color: #ffff;
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: .3s ;
letter-spacing: 1px;
}
.inp-items{
margin: 30px 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.inp-items label{
display: flex;
flex-direction: column;
font-size: 14px;
padding: 10px 0;
}
label .inp{
margin: 10px 0;
padding: 7px;
border-radius: 7px;
border: 1px solid rgb(218, 218, 218);
transition: .1s;
outline: 1px solid #fff;
width: 230px;
}
label .inp:focus{
outline: 1px solid #406cc4;
border: 1px solid #406cc4;
}
.inline{
display: flex;
justify-content: space-between;
}
.inline .pass_fgt{
color: #406cc4;
text-decoration: underline;
cursor: pointer;
}
.submit_btn{
background: rgb(5, 172, 5);
color: #fff;
padding: 7px;
border: 2px solid #fff;
border-radius: 8px;
font-size: 17px;
transition: .2s;
cursor: pointer;
}
.submit_btn:hover{
background: #fff;
color: rgb(5, 172, 5);
border: 2px solid rgb(5, 172, 5);
}
/* Sign In Form End */
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
.
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
project: frontend everything ( Piyush Aggarwal )
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
More blogs you should give a check!