Skip to main content

Instagram Login clone by HTML | Html Code for insta 2021

 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 



Labels:

Comments

Post a Comment

The Most Populer

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon  Here is the code for camera icon design..try with your efforts..! ICON #CODE : >>                <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{     width: 50%;     height: 100vh;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto; } .body{     background-color: white;     border-radius: 30%;     width: 11rem;     height: 11rem;     position: relative;     box-shadow: 1px 1px 6px 1px slategrey; } .red{     border-radius: 50%;     background-color: crimson;     width: 10px;     height: 10px;     position: absolute;     ...
Post a Comment
Read more