MAKE THE INSTAGRAM LOGIN PAGE BY HTML
Instagram login clone
HTML FILE -
<!DOCTYPE html>
<html>
<head>
<script src="insta_clone.js">
</script>
<link rel="stylesheet" href="insta_clone.css">
<script src="https://kit.fontawesome.com/7067f9ae94.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>title</title>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"><i class="fab fa-instagram"></i></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<div class="container">
<div class="head">
<div class="txt"><p><b>Instagram</b><br><span>Find it for free on Google play.</span></p></div>
<div class="but"><button>GET</button></div>
</div>
<div class="lang">
<button id="eng">English <i class="fas fa-chevron-down"></i></button>
</div>
<div class="logo">
<h2><img src="https://dl.dropbox.com/s/7jedbedcf0ldaid/5a4e432a2da5ad73df7efe7a.png" alt="INSTAGRAM"></h2>
</div>
<div class="faceb">
<button id="face"><i class="fab fa-facebook-square"></i>Continue with facebook</button>
</div>
<div class="cont">
<p>OR</p>
</div>
<div class="input">
<input placeholder="Phone number, username, or email"></input>
</div>
<div class="input">
<input placeholder="Password"></input>
</div>
<div class="forgot_P">
<button>Forgot password?</button>
</div>
<div class="login">
<button><b> Log in</b></button>
</div>
<div class="signup">
<button><span> Don't have an account?</span><b> Sign up</b></button>
</div>
<div class="bottom">
<p>from <br><b> FACEBOOK</b></p>
</div>
</div>
</div>
</body>
</html>
CSS FILE -- /* Created by DEEPAK */
body{
font-family: Arial, Helvetica, sans-serif;
}
.fa-instagram{
font-size: 70px;
color: gray;
position: absolute;
top: 40%;
left: 43%;
width: 100%;
height: 100%;
}
.head{
display:grid;
grid-template-columns:80% 20%;
background: linear-gradient(90deg, #d62976, #F58529);
height:55px;
}
.txt span{
font-size:12px;
}
.txt p{
text-align:left;
color:white;
margin-left:12px;
margin-top:10px;
}
.but button{
position:absolute;
right:0px;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
background-color:transparent;
border: 2px solid white;
border-radius:5px;
padding:8px;
padding-left:15px;
padding-right:15px;
color:white;
outline:none;
}
/*******************/
.fa-chevron-down{
font-size: 15px;
color:grey;
}
.lang{
margin-top:20px;
}
.lang button{
background-color: white;
border: none;
outline:none;
}
#eng{
color:#414A4C;
}
/****************/
.logo img{
width:200px;
}
/**********************/
.faceb button{
border: none;
color: white;
border-radius: 4px;
margin:5px;
width: 65%;
padding-left: 10px;
padding-right: 10px;
background-color: #1877f2;
outline:none;
}
.fa-facebook-square{
margin: 5px;
font-size: 18px;
}
/************************/
.cont{
text-align:center;
}
/************************/
.input input{
width: 61%;
margin-bottom: 10px;
padding:10px;
font-size:12px;
height:21px;
background-color: #f0f0f0;
border:1px solid #e8e8e8;
border-radius:3px;
outline:none;
}
/**************************/
.forgot_P button{
border: none;
background-color: white;
color: #4d94ff;
width: 66%;
text-align: right;
margin-bottom: 10px;
outline:none;
}
/***************************/
.login button{
background-color: #4d94ff;
border: none;
color: white;
width: 66%;
padding: 10px;
margin-bottom: 10px;
border-radius:4px;
outline:none;
}
/****************************/
.signup button{
background-color: white;
border: none;
color: black;
outline:none;
}
.signup button b{
color: #4d94ff;
}
.signup button span{
}
/*****************************/
.bottom {
position: relative ;
bottom:-130px;
left: 0;
right: 0;
}
.container{
display: grid;
grid-template-columns: auto
grid-template-rows: auto auto auto auto auto auto auto auto auto;
}
#myDiv {
display: none;
text-align: center;
}
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s;
}
@-webkit-keyframes animatebottom {
from {
bottom: -100px;
opacity: 0;
}
to {
bottom: 0px;
opacity: 1;
}
}
@keyframes animatebottom {
from {
bottom: -100px;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
JAVASCRIPT FILE --
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
LIKE --- SHARE --- COMMENT --- SUBSCRIBE
VIDEO
Comments
Post a Comment