Instagram Login Clone

In this example below you will see how to do a Instagram Login Clone with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by NemoryTR, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright NemoryTR ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Instagram Login Clone</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<div class="all">
<div class="instagram">
  <div class="logo">
    <img src="https://www.sirendesign.com.au/wp-content/themes/siren/library/images/instagram-logo.png" alt="" />
  </div>
  <div class="inputlar">
    <input type="text" placeholder="Kullanıcı adı" />
    <input type="password" placeholder="Şifre" />
  </div>
  <div class="buttons">
    <button>Giriş yap</button>
  </div>
  
  <div class="oryantal"></div>
  <div class="kayit">
    Üyeliğin yok mu ? <a href="#">Kaydol</a>
  </div>
</div>

<div class="instagram pad">
  <a href="#">Etiketler: NemoryTR & makcod</a>
  
</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/NemoryTR/instagram-login-clone-evxmRw */
body{
  background:#fafafa;
  margin:0;
  padding:0;
}
*{
  font-family: "proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.instagram{
  background:#ffffff;
  border: 1px solid #e6e6e6;
  width:350px;
  border-radius:3px;
  margin-bottom:10px;
  text-align:center;
  padding:5px;
}
.all{
  width:350px;
  position:relative;
  left:50%;
  margin-left:-175px;
  margin-top:25px;
}
.inputlar{
  width:270px;
  margin:auto;
}
.inputlar input{
  width: 250px;
  padding:10px;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  margin-top:7px;
  outline:0;
  color:#262626;
}
.inputlar input:focus{
  border:1px solid #aaa;
}
.buttons{
  width:270px;
  margin:auto;
}
.buttons button{
  width: 100%;
  outline:0;
  font-size:14px;
  margin-top:15px;
  margin-bottom:25px;
  padding:10px;
  font-weight:bold;
  color:#fff;
  background:#3897f0;
  border:none;
  border-radius:3px;
}
.logo {
  margin:auto;
  width:270px;
  text-align:center;
}
.logo img{
  width:60%;
  margin-top:20px;
}

.oryantal{
  width:270px;
  margin:auto;
  border-bottom:1px solid #c7c7c7;
  margin-bottom:15px;
}
.kayit{
  width:270px;
  margin:auto;
  text-align:center;
  color:#262626;
  font-size:13px;
  margin-bottom:15px;
}
a{
  text-decoration:none;
  color:#333;
}
.pad{
  padding:20px 5px;
}

Comments