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

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

Android Logo Design

                    Android Logo Design By Html-Css                                                                                 Here is the code for designing the logo of Android. Design the logo by using programming language like Html and Css. You can simply design the logo, just small code for it. Don't hasitate and start to write it.. CODE :                 <!DOCTYPE html> <html> <head> <title>Android logo</title> <link href="https://fonts.googleapis.com/css2?family=Piedra&display=swap" rel="stylesheet"> <style type="text/css"> body{ background-color: black; } h4{ text-alig...
Post a Comment
Read more