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

create a NOTE app by HTML-JS | Design for note app | App challenge

 CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI Hello There..! Here is the sticky note app code of html . 👇👇👇👇👇👇 <!DOCTYPE html> <html>     <head>         <title>Clock + to-do app</title>         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         <script type="text/javascript">           function app(){ var today = new Date(); var date = today.getDate(); var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var month = montharr[today.getMonth()]; var year = today.getFullYear(); $("#date").text(date + " " + month + "," + " " + year); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var ampm = ""; if(h...
Post a Comment
Read more

How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text || #CODE :                 Barcode.html ==>        <html>        <head>            <title>Barcode Generator</title>            <link rel="stylesheet" href="Barcode.css">     </head>     <body>         <div>Barcode Generator</div>         <input type="text" placeholder="Type..."/>         <button onclick="generate()">Generate Barcode</button>           <svg id="barcode"></svg>           <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>           <script>     ...
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