In this tutorial, learn how to replicate the Instagram login page using HTML, CSS, and JavaScript. Here we build the Instagram Login page Step by Step.
SourceCode: Provided to the below in the tutorial…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instagram Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="phones-screenshots">
<div class="main-image">
<img src="images/home-phones.png" alt="" />
</div>
<div class="screenshots">
<img id="screenshot" src="images/1.png" alt="" />
</div>
</div>
<div class="right-forms">
<div class="login-forms">
<form action="#">
<div class="logo">
<img src="images/logo.png" alt="" />
</div>
<input
type="text"
name="pue"
placeholder="Phone number, username, or email"
/>
<input type="password" name="pass" placeholder="Password" />
<button type="submit">Log in</button>
</form>
<div class="divider">
<hr />
OR
<hr />
</div>
<div class="login-facebook">
<img src="images/fb.png" alt="" />
Log in with Facebook
</div>
<div class="forgot">
<a href="#">Forgot password?</a>
</div>
</div>
<div class="create-account">
<span>Don't have a account? </span> <a href="#">Sign up</a>
</div>
<div class="apps">
<p>Get the app.</p>
<div class="buttons">
<img src="images/google-play.png" alt="" />
<img src="images/microsoft.png" alt="" />
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lato", sans-serif;
}
.container {
width: 80%;
display: flex;
justify-content: center;
align-items: start;
margin: auto;
padding: 2rem 0;
}
.phones-screenshots {
position: relative;
}
.screenshots {
position: absolute;
top: 26px;
right: 58px;
}
#screenshot {
transition: all ease-in 0.4s;
}
.right-forms {
text-align: center;
box-sizing: border-box;
margin-top: 1rem;
}
.login-forms {
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 2rem;
width: 350px;
max-width: 350px;
}
form {
margin-top: 1rem;
}
form input,
button {
display: block;
width: 100%;
height: 35px;
padding: 10px;
outline: none;
font-size: 11px;
background: rgb(250, 250, 250);
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 4px 0;
border-radius: 5px;
}
button[type="submit"] {
height: 30px;
font-size: 14px;
line-height: 10px;
border: none;
font-weight: bold;
border-radius: 10px;
background: rgba(0, 148, 246, 0.697);
color: #fff;
margin: 1rem 0;
}
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
margin: 1rem 0;
font-size: 12px;
}
hr {
width: 100%;
}
.login-facebook {
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0;
font-size: 14px;
gap: 10px;
}
.forgot a {
text-decoration: none;
color: rgb(0, 55, 107);
font-size: 13px;
display: inline-block;
}
.create-account {
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 1.5rem 0;
margin-top: 1rem;
}
.create-account a {
text-decoration: none;
color: rgb(0, 149, 246);
font-weight: 700;
}
.apps {
margin-top: 1rem;
font-size: 13px;
}
.buttons {
margin-top: 1rem;
}
.buttons img {
width: 140px;
height: 35px;
}
.buttons img:last-child {
width: 130px;
}
@media (max-width: 850px) {
.phones-screenshots {
display: none;
}
}let image = ["1.png", "2.png", "3.png", "4.png"];
window.addEventListener("load", () => {
let i = 1;
setInterval(() => {
screenshot.style.opacity = 0.1;
setTimeout(() => {
screenshot.setAttribute("src", `images/${image[i]}`);
screenshot.style.opacity = 1;
i = (i + 1) % image.length;
}, 400);
}, 2400);
});
Comments
Oops!