5+ CSS Instagram Login Page Examples

This post contains a total of 5+ Hand-Picked CSS Instagram Login Page Examples with Source Code. All these Instagram Login Pages are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Instagram Login Page Examples

1. By Mhamed Kchikech

Made by Mhamed Kchikech. Simple Instagram login page with Instagram Logo. Source

CSS instagram login page by Mhamed Kchikech
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
*{
	font-family: Montserrat;
}
body,html{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
body{
  display:flex;
	background-color: #fafafa;
}
.login{
	width:350px;
	height: auto;
	padding-bottom: 40px;
	margin: auto;
	border: 1px solid #e6e6e6;
	background-color: white;
}
.logo{
	width: 100%;
	display: flex;
	height: 150px;
}
.logo img{
	width: 150px;
	margin-left: auto;
	margin-right: auto;
}
.form{
	width: 100%;
	display: flex;
}
.form form{
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}
.inputGroup{
	width: 100%;
	display: flex;
	position: relative;
	margin-top: 5px;
}
.form form input{
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	outline: none;
	background-color: white;
	border: 1px solid #efefef;
	outline: none;
	height: 36px;
	border-radius: 2px;
	padding-left: 7px; 
	padding-right: 7px; 
	font-size: 12px;
	font-family: Montserrat;
}
label{
	position: absolute;
	left: 12%;
	top: 12px;
	color: #999;
	font-size: 12px;
	
	cursor: text;
	transition-duration: .2s;	
}
.form form input:focus ~ label {
	top: 3px;
	font-size: 10px;
	transition-duration: .2s;
}
.form form input:valid ~ label{
	top: 3px;
	font-size: 10px;
	transition-duration: .2s;	
}
#login{
	margin-right: auto;
	margin-left: auto;
	background-color: #3897f0;
	border-style: none;
	width: 79%;
	height: 30px;
	color: white;
	font-size: 15px;
	cursor: pointer;
	border-radius: 2px;
	margin-top: 5px;
	font-weight: bold;

}
@media (max-width: 767px){
	.login{
		margin:2.5% auto 2.5% auto;
		width: 95%;
		height: auto;
		background-color: transparent;
		border-color: transparent;
	}
	.form form input{
		width: 100%;
	}
	.inputGroup label{
		left: 1%;
	}
	#login{
		width: 100%;
	}
}
</style>
</head>
<body>
  <body class="flex">

	<div class="login">
		<div class="logo"><img src="https://cdn130.picsart.com/259430940027212.png?r1024x1024"></div>
		<div class="form">
			<form>
				<div class="inputGroup">
					<input id="input" type="text" name="user" autocomplete="off" required="">
					<label for="input">Phone number, username, or email</label>
				</div>
				<div class="inputGroup">
					<input id="input" type="password" name="pass" autocomplete="off" required="">
					<label for="input">Password</label>
				</div>
				<div class="inputGroup">
					<button id="login">Login</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

2. By Doğukan Akgün

Made by Doğukan Akgün. CSS Instagram Login Clone. Source

CSS instagram login page by dogukan akgun
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
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;
}
</style>
</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="PLace holder" />
    <input type="password" placeholder="placeholder" />
  </div>
  <div class="buttons">
    <button>Login</button>
  </div>
  
  <div class="oryantal"></div>
  <div class="kayit">
    Text<a href="#">Here</a>
  </div>
</div>

<div class="instagram pad">
  <a href="#">Text Here</a>
  
</div>
</div>
</body>
</html>

3. By John James

Made by John James. Instagram login page with Gradient Background. Source

CSS instagram login page by john james
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,700');

body {
font-family: 'Fira Sans', sans-serif;
color: #fff;  
background: #f09433; 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background-repeat: no-repeat;  
background-size: cover;  
}

.logo-container {
  margin: 15% 0 3%;
  text-align: center;
}

.logo-container img {
  width: 250px;
}

.login-form-container {
  width: 30%;
  margin: 0 auto 14%;
}

.login-form-container form {
  margin: 0 auto;
}

.login-form-container form input {
  width: calc(100% - 30px);
  margin: 0 auto 20px;
  padding: 10px 15px;
  height: 25px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .3px;
  transition: all .3s ease;  
}

.login-form-container form input:focus {
  border: 1px solid rgba(255, 255, 255, 0.35);
  outline: none;
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.45);
}
::-moz-placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.login-form-container form button {
  display: block;
  width: 100%;
  margin-bottom: 15%;
  padding: 15px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .3px;
  transition: all .3s ease;  
}

.login-form-container form button:hover {
  background: #000;
  color: #fff;
  cursor: pointer;
}
.login-form-container form p {
  text-align: center;
}

.login-form-container form p a {
  display: block;
  margin: 15px 0 20px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .3px;
  text-decoration: none;
}

.app-download-links {
  text-align: center;
}

.app-download-links p {
  margin-bottom: 25px;
}
.app-download-links a img {
  height: 45px;
  margin: 0 7px 20px;
}
</style>
</head>
<body>
  <div class="logo-container">
<img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533395974/instagram-font-logo-white-png.png" alt="logo" />
</div>  

<div class="login-form-container">
    <form action="#" method="post">
      <input type="text" placeholder="Username" required="yes" />
      <input type="password" placeholder="Password" required="yes" />
      <button type="submit">Log In</button>
      <p><a href="#">Forgot Password</a><a href="#">Sign Up</a></p>
    </form>   
</div>  

<div class="app-download-links">
  <p>Get the app.</p>
  <a href="#"><img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533403096/download-appstore.png" alt="Download on App Store" /></a>
  <a href="#"><img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533403096/download-googleplay.png" alt="Download on Google Play" /></a> 
  <a href="#"><img src="https://res.cloudinary.com/jorpdesigns/image/upload/v1533403096/download-microsoft.png" alt="Get from Microsoft" /></a> 
</div>
</body>
</html>

4. By Apratim Shukla

Made by Apratim Shukla. Source

CSS instagram login page by apratim shukla
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html { height: 100% }
body {
  background: rgba(250,250,250,1);
}
.login {
  background: #fff;
  border: 1px solid rgb(236, 234, 234);
  border-radius: 0px;
  height: 410px;
  margin: 30px auto 0;
  width: 400px;
}
.login h1 {
  box-sizing: border-box;
  margin: 20px 0 30px 0;
  text-align: center;
  user-select: none;
}
input[type="password"], input[type="text"] {
  background: rgba(250,250,250,1);
  border: 1px solid rgb(236, 234, 234);
  border-radius: 3px;
  box-shadow: 0 1px #fff;
  box-sizing: border-box;
  color: black;
  height: 39px;
  margin: 10px 0 0 40px;
  padding: 10px;
  font-size: 13px;
  width: 320px;
}
input[type="password"]::placeholder, input[type="text"]::placeholder {
  color: rgb(165, 164, 164);
}
input[type="password"]:focus, input[type="text"]:focus {
  outline: 0;
  border: 1px solid #a1a1a1;
}

.forgot {
  color: #7f7f7f;
  display: inline-block;
  box-sizing: border-box;
  font: 12px/1 sans-serif;
  left: -19px;
  position: relative;
  text-decoration: none;
  top: -15px;
  transition: color .4s;
}
.forgot:hover { color: #3b3b3b }

input[type="submit"] {
  background: #3897F0;
  border: 0px;
  border-radius: 4px;
  box-sizing: border-box;
  color: #f8f8f8;
  font-weight: 600;
  height: 29px;
  margin: 14px 0 0 40px;
  width: 320px;
}
input[type="submit"]:hover, input[type="submit"]:focus {
  background: rgb(48, 144, 233);
  outline: 0;
}


.divider {
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  color:rgb(165, 164, 164);
  font-size: 13.5px;
  font-weight: 500;
  margin: 20px 0 0 40px;
  width: 320px;
}

.divider:before,
.divider:after {
  background-color: rgb(224, 221, 221);
  content: "";
  display: inline-block;
  height: 1.2px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.divider:before {
  right: 2em;
  margin-left: -50%;
}

.divider:after {
  left: 2em;
  margin-right: -50%;
}

.fbwrapper {
  text-align: center;
  margin-top: 25px;
}

.fb a{
  font-weight: 600;
  font-size: 14px;
  display: inline;
  vertical-align: middle;
  margin: 20px 0 0 10px;
  text-decoration: none;
  color: rgb(107, 106, 106);
  
}
.fb img {
  vertical-align: middle;
}

.forgotwrapper{
  text-align: center;
  margin-top: 35px;
}

.forgot a{
  margin: 20px 0 0 40px;
  text-decoration: none;
  color: rgb(107, 106, 106);
}

.infobox {
  background: #fff;
  border: 1px solid rgb(236, 234, 234);
  border-radius: 0px;
  height: 60px;
  margin: 10px auto 0;
  width: 400px;
}
.infobox p {
  box-sizing: border-box;
  margin: 22px 0 30px 0;
  text-align: center;
  user-select: none;
  font-size: 14px;
}

.infobox p a{
  color: rgb(94, 163, 243);
  text-decoration: none;
  font-weight: 600;
}

.apps {
  height: 100px;
  margin: 20px auto 0;
  width: 400px;
}

.apps p {
  box-sizing: border-box;
  margin: 10px 0 30px 0;
  text-align: center;
  user-select: none;
  font-size: 14px;
}

.apps span a{
  box-sizing: border-box;
  margin-left: 28px;
}

.app span a img{
  padding-left: 20px;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  margin-top: 50px;
  width: 100%;
  text-align: center;
}

.footer p a {
  color: #003569;
  text-decoration: none;
  padding-left: 10px;
  font-size: 13px;
}

.footer p span {
  color: rgb(189, 186, 186);
  padding-left: 80px;
  font-size: 13px;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>
<body>
<div class="login">
  <h1><img src="https://i.imgur.com/wvLiKam.png" width="200px" height="68px"></h1>
  <form action="" method="POST">
  <input placeholder="Phone number, username, or email" type="text" name="username" >
  <input placeholder="Password" type="password" name="password">
  <input type="submit" value="Log In" /><br>
  </form>

  <div class="divider"><b>OR</b></div>
  <div class="fbwrapper"><div class="fb"><a href="#"><img src="https://i.imgur.com/exksovo.png">  Log in with Facebook</a></div></div>
  <div class="forgotwrapper"><div class="forgot"><a href="#">Forgot password?</a></div></div>

</div>
<div class="infobox">
  <p>Don't have an account? <a href="#">Sign up</a></p>
</div>

<div class="apps">

  <p>Get the app.</p>
  <span><a href="#"><img src="https://i.imgur.com/lREV6Qa.png" height="45px" width="153px"></a><a href="#"><img src="https://i.imgur.com/DFQNKXK.png" height="45" width="151px"></a></span>

</div>
</body>
</html>

5. By Robert

Made by Robert. Responsive CSS Instagram Login Page with Image on Left side. Source

CSS instagram login page by robert
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Noto+Sans&display=swap");

* {
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  font-family: Noto Sans;
}
body {
  background: white;
}
.content-ctr {
  width: 350px;
  height: 90%;
  min-height: 650px;
  margin: auto;
}
.right-content {
  width: 100%;
}
.login-ctr {
  padding: 0 50px 20px;
  box-sizing: border-box;
  text-align: center;
}
.login-ctr img {
  width: 100%;
}
.login-ctr input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 5px 0;
  padding: 10px;
  font-size: 11px;
  border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
  border-radius: 2px;
}
.login-ctr input[type="submit"] {
  padding: 5px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background: #a3e2dc;
  border: none;
  margin: 15px 0 25px;
}
hr {
  border: none;
  border-bottom: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
}
.login-ctr p {
  margin: -10px;
}
.login-ctr p span {
  background: white;
  padding: 0 15px;
  color: grey;
  font-size: 14px;
  font-weight: 600;
}
.login-ctr a {
  display: block;
  margin-top: 35px;
  color: #385185;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.login-ctr a:nth-of-type(2) {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 400;
}
.sign-up-ctr {
  text-align: center;
  padding: 50px;
  font-size: 13px;
}
.sign-up-ctr a {
  text-decoration: none;
  color: #22bed6;
  font-weight: 600;
}
.button-ctr {
  margin-top: 25px;
  text-align: center;
}
.button-ctr img {
  width: 35%;
  margin-top: 20px;
}
footer {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  margin: 5px auto 15px;
  min-width: 350px;
}
footer a {
  display: block;
  margin: 0 8px;
  text-decoration: none;
  color: #777;
  line-height: 30px;
}
.translate {
  display: flex;
  justify-content: center;
  color: #777;
  font-size: 13px;
  min-width: 350px;
}
select {
  border: none;
  color: #777;
  margin-bottom: 40px;
  margin-right: 15px;
}
.flex > img {
  display: none;
}

/* Small devices (portrait tablets and large phones, 450px and up) */
@media only screen and (min-width: 450px) {
  body {
    background: rgba(var(--b3f, 250, 250, 250), 1);
  }
  .content-ctr {
    margin-top: 40px;
  }
  .login-ctr {
    background: white;
    border: 1px solid lightgrey;
  }
  .login-ctr input {
    background: rgba(var(--b3f, 250, 250, 250), 1);
  }
  .sign-up-ctr {
    background: white;
    border: 1px solid lightgrey;
    padding: 20px 0;
    margin: 10px 0;
  }
  select {
    background: rgba(var(--b3f, 250, 250, 250), 1);
  }
  footer {
    margin-top: -25px;
  }
}

/* Large devices (laptops/desktops, 900px and up) */
@media only screen and (min-width: 900px) {
  .content-ctr {
    width: 700px;
  }
  .flex {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
  }
  .right-content {
    width: 50%;
  }
  .flex > img {
    width: 40%;
    display: block;
  }
  footer {
    margin-top: -40px;
  }
  .translate {
    padding-bottom: 40px;
  }
}
</style>
</head>
<body>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

<div class="content-ctr">
  <div class="flex">
    <div class="right-content">
      <div class="login-ctr">
        <img src="https://assets.codepen.io/6060109/ig-logo.png">
        <form>
          <input type="text" placeholder="Phone number, username, or email">
          <input type="password" placeholder="Password">
          <input type="submit" value="Log In">
        </form>
        <hr>
        <p><span>OR</span></p>
        <a href="#"> <i class='fa fa-facebook-official' style='color: #385185; font-size: 18px;'></i> Log in with Facebook</a>
        <a href="#">Forgot password?</a>
      </div>
      <div class="sign-up-ctr">
        <p>Don't have an account? <a href="#">Sign up</a></p>
      </div>
      <div class="button-ctr">
        <p>Get the app.</p>
        <div class="btn-flex">
          <img src="https://assets.codepen.io/6060109/IG-app-store-button.png">
          <img src="https://assets.codepen.io/6060109/IG-Google-Play-Button.png">
        </div>
      </div>
    </div>
    <img src="https://assets.codepen.io/6060109/IG-phone.jpeg">
  </div>
</div>
<footer>
  <a href="#">Meta</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Help</a>
  <a href="#">API</a>
  <a href="#">Privacy</a>
  <a href="#">Terms</a>
  <a href="#">Top Accounts</a>
  <a href="#">Hashtags</a>
  <a href="#">Locations</a>
  <a href="#">Instagram Lite</a>
  <a href="#">Beauty</a>
  <a href="#">Dance</a>
  <a href="#">Fitness</a>
  <a href="#">Food & Drink</a>
  <a href="#">Home & Garden</a>
  <a href="#">Music</a>
  <a href="#">Visual Arts</a>
</footer>
<div class="translate">
  <select>
    <option>English</option>
    <option>Spanish</option>
    <option>German</option>
  </select>
  <p>&copy; 2022 Instagram from Meta</p>
</div>
</body>
</html>

6. By Saigotham

Made by Saigotham. Basic Instagram login page clone. Source

CSS instagram login page by saigotham
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> 
<style>
body {
  font-family: sans-serif;
  background-color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
  font-size: 14px;
}

.box {
  max-width: 350px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ffff;
  border: 1px solid #e6e6e6;
  border-radius: 1px;
  margin: 0 0 10px;
  padding: 10px 0;
  flex-grow: 1;
}

.heading {
  margin: 22px auto 12px;
  background-image: url("https://www.instagram.com/static/bundles/es6/sprite_core_b20f2a3cd7e4.png/b20f2a3cd7e4.png");
  background-position: -98px 0;
  height: 51px;
  width: 177px;
  overflow: hidden;
}

.field {
  margin: 10px 0;
  position: relative;
  font-size: 14px;
  width: 100%;
  text-overflow: ellipsis;
}

input {
  padding: 9px 0px 7px 9px;
  font-size: 12px;
  width: 16rem;
  height: 1.2rem;
  outline: none;
  background: #fafafa;
  border-radius: 3px;
  border: 1px solid #efefef;
}

/* label intial position*/

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  padding-bottom: 15px;
  transform: translateY(10px);
  line-height: 6px;
  transition: all ease-out 0.1s;
  font-size: 14px;
  color: #999;
  padding-top: 6px;
}

/* hiding placeholder in all browsers */

input::placeholder {
  visibility: hidden;
}

/* hiding  placeholder in mozilla */
.login-form ::-moz-placeholder {
  color: transparent;
}

/* label final position */
input:not(:placeholder-shown) + label {
  transform: translateY(0);
  font-size: 11px;
}

/* input padding increases if placeholder is not shown */
input:not(:placeholder-shown) {
  padding-top: 14px;
  padding-bottom: 2px;
}

.login-button {
  text-align: center;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid transparent;
  background-color: #3897f0;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.separator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  margin-top: 6px;
}

.separator .line {
  height: 1px;
  width: 40%;
  background-color: #dbdbdb;
}

.other {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fb-login-btn {
  margin: 1rem;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  color: #385185;
  font-weight: 600;
  background: transparent;
}

.fb-icon {
  color: #385185;
  font-size: 1rem;
  padding-right: 1px;
}

.forgot-password {
  font-size: 11px;
  color: #003569;
}

.signup {
  color: #3897f0;
  font-weight: 600;
}
</style>
</head>
<body>
  <div class="container">
      <div class="box">
        <div class="heading"></div>
        <form class="login-form">
          <div class="field">
            <input
              id="username"
              type="name"
              placeholder="Phone number, username, or email"
            />
            <label for="username">Phone number, username, or email</label>
          </div>
          <div class="field">
            <input id="password" type="password" placeholder="password" />
            <label for="password">Password</label>
          </div>
						<button class="login-button" title="login">Log In</button>
						<div class="separator">
							<div class="line"></div>
							<p>OR</p>
							<div class="line"></div>
						</div>
          <div class="other">
            <button class="fb-login-btn" type="button">
              <i class="fa fa-facebook-official fb-icon"></i>
              <span class="">Log in with Facebook</span>
            </button>
            <a class="forgot-password" href="#">Forgot password?</a>
          </div>
        </form>
      </div>
      <div class="box">
        <p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
      </div>
    </div>
</body>
</html>