Instagram Login Page
Today I create instagram login page by using HTML CSS. Here is my Source code
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>instagram</title>
<style>
main{
display: grid;
grid-template-columns: 1.5fr 1fr;
border: 1px solid;
height: 90vh;
}
.left{
/* border: 1px solid red; */
}
.right{
/* border: 1px solid black; */
display: flex;
flex-direction: column;
margin: auto;
width: 60vh;
gap:20px;
/* margin-bottom: 20px; */
}
img{
width: 80px;
height: 80px;
margin-left: 50px;
margin-top: 50px;
}
h1{
font-size: 40px;
margin-left: 100px;
}
img.image{
height: 400px;
width: 400px;
display: flex;
align-items: center;
/* border: 1px solid; */
margin-left: 200px;
margin-top: 25px;
}
input{
border-radius: 15px;
padding: 15px;
}
#log{
border-radius: 25px;
padding: 15px;
background-color:#0064e0;
color: white;
}
#forgot{
border: none;
}
#face{
border-radius: 25px;
padding: 15px;
}
#new{
border-radius: 25px;
padding: 15px;
}
footer{
display: flex;
}
a{
margin-left: 15px;
text-decoration: none;
}
</style>
</head>
<body>
<main>
<div class="left">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%2Fid%2FOIP.mYuUB1WDaECliIuuurE_cQHaHv%3Fpid%3DApi&f=1&ipt=c03e3db7ff0688f560a07115d317cf5ca8bcbd92836a6f26abe0858b1ae956c8&ipo=images" alt="">
<h1>See everyday moments from your close friends.</h1>
<img class="image" src="https://static.cdninstagram.com/rsrc.php/yR/r/92ZsVHNkyvf.webp" alt="">
</div>
<div class="right">
<h4>Log in to Instagram</h4>
<input type="text" placeholder="Mobile number,username or email address">
<input type="password" placeholder="Password">
<button id="log">Log in</button>
<button id="forgot">Forgotten password?</button>
<button id="face">Log in with Facebook</button>
<button id="new">Create new account</button>
</div>
</main>
</body>
<footer>
<a href="">Meta</a><a href="">About</a><a href="">Blog</a><a href="">Jobs</a><a href="">Privacy</a><a href="">Terms</a><a href="">Locations</a><a href="">Popular</a><a href="">Instagram Lite</a><a href="">Meta AI</a><a href="">Threads</a><a href="">Contact uploading and non-users</a><a href="">Meta Verified</a><a href="">English (UK)</a><a href="">© 2026 Instagram from Meta</a>
</footer>
</html>
Top comments (0)