Introduction
Login pages are everywhere — from social media apps to e‑commerce sites. To practice my web development skills, I recreated a simple Instagram‑style login page using HTML and CSS. This project helped me understand layout design, form styling, and how to add a clean footer with navigation links.
Page Structure
The page is divided into three main sections:
Left Section – Displays the logo, a headline, and an image.
Right Section – Contains the login form with input fields and buttons.
Footer – Shows copyright and navigation links.
Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body{
/* border:1px solid gray; */
height:100%;
width:100%;
/* border-bottom: none; */
background-color:#fafafa;
}
main{
/* border:1px solid gray; */
height:90vh;
display: grid;
grid-template-columns: 1fr 1fr;
}
.left{
border-right: 1px solid gray;
height:90vh;
}
.right{
padding:20px;
display: flex;
justify-content: center;
align-items: center;
}
footer{
height:10vh;
border-top:1px solid gray;
text-align:center;
font-size: medium;
color: black;
padding:10px;
}
nav a{
text-decoration: none;
color: red;
}
.left img{
height: 80px;
width: 80px;
padding: 15px;
}
h1{
text-align: center;
width:450px;
margin-left: 100px;
line-height: 1.5;
}
span{
color:red;
}
.it img{
/* border:1px solid; */
height:400px;
width:400px;
margin-left: 70px;
}
.log{
/* border:1px solid; */
display: flex;
flex-direction: column;
justify-content: space-between;
width: 400px;
gap:15px;
font-size: large;
font-weight: 600;
}
input,button{
font size 10px;
padding:8px;
border-radius: 20px;
}
#login{
background-color: rgb(66, 103, 178);
border-radius: 25px;
font-weight: 600;
color: aliceblue;
font-size: large ;
}
#forget{
border: none;
background-color: white;
font-weight: 600;
font-size: large;
curser:pointer;
}
#create{
border-radius: 25px;
font-weight: 600;
font-size: large;
color:rgb(66, 103, 178);
background-color:white;
border: 2px solid;
}
#fb{
border-radius: 25px;
font-weight: 600;
font-size: large;
color:rgb(66, 103, 178);
background-color:white;
border: 2px solid;
}
input:hover{
border:1px solid black;
}
#create:hover{
border:1px solid black;
}
#fb:hover{
border: 1px solid black;
}
.log img{
width:80px;
}
.meta{
text-align: center;
}
</style>
</head>
<body>
<main>
<div class="left">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjGhtH3I_1g1PTlzSQyWlBnNjivMMOWBPmaPcBlqNHJg&s" alt="logo">
<h1>See everyday moments from <span>your close friend</span></h1>
<div class="it">
<img src="https://static.xx.fbcdn.net/rsrc.php/yb/r/HpEiFYDux5j.webp" alt="alt">
</div>
</div>
<div class="right">
<div class="log">
<p>Log into instagram</p>
<input type="text" placeholder="Email address or Mobile number">
<input type="password" placeholder="Password">
<button id="login">Log in</button>
<button id="forget">Forgotten password? </button>
<button id="create">Create new account</button>
<button id="fb">Login with facebook</button>
<div class="meta">
<img src="https://1000logos.net/wp-content/uploads/2021/10/Meta-Logo.png" alt="mt">
</div>
</div>
</div>
</main>
<footer>
<p>
© 2026 Instagram from Meta
</p>
<nav>
<a href="#">About</a> •
<a href="#">Help</a> •
<a href="#">Privacy</a> •
<a href="#">Terms</a>
</nav>
</footer>
</body>
</html>
New thing learned
line-height: 1.5; → Each line will be spaced 1.5 times the font size apart.
Output
Top comments (0)