Instagram log in page remade with HTML, CSS and JS
Tags: html, css, javascript, codepen
Published: 2023-01-26 13:35:51

In this project, I attempted to remake the log in page of Instagram, using HTML, CSS and some JavaScript.


A screenshot of the final product:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47z8o46i8syq3j371v71.png)


Here is the [Codepen demo](https://codepen.io/georgeflorinp1/full/YzjLKQJ) of the project.

Tools I used: 

- Visual Studio Code;
- Codepen;
- [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg), a Chrome extension for finding out the exact color of certain pages, buttons etc.;
- [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm), a Chrome extension that is useful for finding out the font, font weight and font size;

The HTML code: 

```
<body>
  <div class="left">
    <div class="phone-container">
      <img src="https://static.cdninstagram.com/rsrc.php/v3/y4/r/ItTndlZM2n2.png" class="ig-phone" />
      <img src="https://news-cdn.softpedia.com/images/news2/ios-14-reveals-unexpected-instagram-app-camera-access-company-says-it-s-a-bug-530623-2.jpg" class="screenshot" />
    </div>
  </div>
  <div class="right">
    <div class="login-box">
      <div class="logo-box">
        <img src="https://logos-download.com/wp-content/uploads/2016/03/Instagram_Logo_2016.png" class="instagram-logo" />
      </div>
      <input type="text" placeholder="Phone number, username, or email" />
      <input type="password" placeholder="Password" />
      <br />
      <button>Log in</button>
      <h3>
        <span>OR</span>
      </h3>
      <br />
      <a href="https://www.facebook.com/login.php?skip_api_login=1&api_key=124024574287414&kid_directed_site=0&app_id=124024574287414&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%3Fclient_id%3D124024574287414%26redirect_uri%3Dhttps%253A%252F%252Fwww.instagram.com%252Faccounts%252Fsignup%252F%26state%3D%257B%2522fbLoginKey%2522%253A%2522y3enoe1j17wzqao4unekcmnl017ppm2cxhokp511nxkw010ixsv8%2522%252C%2522fbLoginReturnURL%2522%253A%2522%252Ffxcal%252Fdisclosure%252F%253Fnext%253D%25252F%2522%257D%26scope%3Demail%26response_type%3Dcode%252Cgranted_scopes%26locale%3Den_US%26ret%3Dlogin%26fbapp_pres%3D0%26logger_id%3D7119b5c9-e6ef-436c-a7e0-88bee3247f2a%26tp%3Dunspecified&cancel_url=https%3A%2F%2Fwww.instagram.com%2Faccounts%2Fsignup%2F%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%26state%3D%257B%2522fbLoginKey%2522%253A%2522y3enoe1j17wzqao4unekcmnl017ppm2cxhokp511nxkw010ixsv8%2522%252C%2522fbLoginReturnURL%2522%253A%2522%252Ffxcal%252Fdisclosure%252F%253Fnext%253D%25252F%2522%257D%23_%3D_&display=page&locale=ro_RO&pl_dbl=0" class="facebook">Log in with Facebook</a>
      <br />
      <a href="https://www.instagram.com/accounts/password/reset/" class="forgot">Forgot password?</a>
    </div>
    <div class="sign-up-box">
      <h4>Don't have an account?</h4>
      <a href="https://www.instagram.com/accounts/emailsignup/" class="sign-up">Sign up</a>
    </div>
    <div class="app-install">
      <h4>Get the app.</h4>
      <a href="https://play.google.com/store/apps/details?id=com.instagram.android&referrer=utm_source%3Dinstagramweb%26utm_campaign%3DloginPage%26ig_mid%3D3F25D538-56F0-44F6-B0D3-2DDB3EB0F2E4%26utm_content%3Dlo%26utm_medium%3Dbadge">
        <img src="https://static.cdninstagram.com/rsrc.php/v3/yz/r/c5Rp7Ym-Klz.png" class="google" />
      </a>
      <a href="https://apps.microsoft.com/store/detail/instagram/9NBLGGH5L9XT">
        <img src="https://static.cdninstagram.com/rsrc.php/v3/yu/r/EHY6QnZYdNX.png" class="microsoft" />
      </a>
    </div>
  </div>
  <br />
  <div id="footer">
    <div class="footer-link-container">
      <a href="https://about.meta.com/" class="footer-link">Meta</a>
      <a href="https://about.instagram.com/" class="footer-link">About</a>
      <a href="https://about.instagram.com/blog" class="footer-link">Blog</a>
      <a href="https://about.instagram.com/about-us/careers" class="footer-link">Jobs</a>
      <a href="https://help.instagram.com/" class="footer-link">Help</a>
      <a href="https://developers.facebook.com/docs/instagram" class="footer-link">API</a>
      <a href="https://privacycenter.instagram.com/policy/?entry_point=ig_help_center_data_policy_redirect" class="footer-link">Privacy</a>
      <a href="https://help.instagram.com/581066165581870/" class="footer-link">Terms</a>
      <a href="https://www.instagram.com/directory/profiles/" class="footer-link">Top Accounts</a>
      <a href="https://www.instagram.com/explore/locations/" class="footer-link">Locations</a>
      <a href="https://www.instagram.com/web/lite/" class="footer-link">Instagram Lite</a>
      <a href="https://www.facebook.com/help/instagram/261704639352628" class="footer-link">Contact Uploading & Non-Users</a>
      <a href="https://help.instagram.com/397451835844752" class="footer-link">Digital Collectibles Privacy Notice</a>
    </div>
    <br />
    <div class="footer-details">
      <div class="dropdown">
        <span onclick="myFunction()" class="drop-btn">English</span>
        <div id="myDropdown" class="dropdown-content">
          <p>Română</p>
          <p>Deutsch</p>
          <p>Dansk</p>
          <p>Polski</p>
          <p>Español</p>
          <p>English (UK)</p>
        </div>
      </div>
      <p>© 2023 Instagram from Meta</p>
    </div>
  </div>
</body>
```

The CSS code: 

```
html * {
  font-family: "Segoe UI", Arial, sans-serif;
}

body {
  background-color: #fafafa;
  width: 100%;
  padding: 0;
  display: block;
  font-family: "Segoe UI", Arial, sans-serif;
}

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

.login-box {
  background-color: #ffffff;
  width: 350px;
  height: 400px;
  border: 1px solid #dbdbdb;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 40px;
}

.logo-box {
  margin: 4px;
  display: inline-block;
}

.instagram-logo {
  width: 150px;
  cursor: pointer;
  margin-top: 40px;
  margin-bottom: 35px;
}

input {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  width: 250px;
  height: 25px;
  padding: 7px;
  margin: 0 40px 6px;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  background-color: #fafafa;
}

input:focus {
  outline: none;
}

button {
  background-color: #4db5f9;
  color: white;
  text-align: center;
  width: 265px;
  height: 30px;
  border: none;
  border-radius: 7px;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
}

.sign-up-box {
  background-color: #ffffff;
  width: 350px;
  height: 60px;
  display: flex;
  justify-content: center;
  border: 1px solid #dbdbdb;
  margin: 0 0 10px;
}

.sign-up {
  color: #00a2f8;
  font-weight: 600;
  font-size: 14px;
  margin-top: 18.5px;
}

h3 {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #dbdbdb;
  line-height: 0.1em;
  margin: 10px 0 20px;
  color: #998e8e;
  font-weight: 600;
  font-size: 13px;
}

h3 span {
  background: #fff;
  margin: 4px;
}

.facebook {
  font-weight: 600;
  font-size: 14px;
  margin-top: 26px;
  color: #385185;
}

.forgot {
  font-weight: 400;
  font-size: 12px;
  margin-top: 26px;
  color: #00376B;
}

.app-install {
  text-align: center;
  width: 350px;
}

h4 {
  font-weight: 400;
  font-size: 14px;
  margin-right: 5px;
}

.google {
  width: 125px;
  cursor: pointer;
}

.microsoft {
  width: 100px;
  cursor: pointer;
  margin-left: 5px;
}

#footer {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
}

.footer-link-container {
  text-align: center;
}

.footer-link {
  color: #8e8e8e;
  font-weight: 400;
  font-size: 12px;
  margin: 0px 5px 0px 5px;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-details {
  text-align: center;
  display: flex;
  justify-content: center;
}

p {
  color: #8e8e8e;
  font-weight: 400;
  font-size: 12px;
}

.dropdown {
  display: inline-block;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 1px;
  bottom: 50%;
  background-color: #ffffff;
  min-width: 115px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:click .dropdown-content {
  display: block;
}

.drop-btn {
  background: transparent;
  color: #8e8e8e;
  padding: 10px;
  font-weight: 400;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.drop-btn:hover,
.drop-btn:focus {
  background-color: transparent;
}

.show {
  display: block;
}

.phone-container {
  margin: auto;
  width: 50%;
}

.ig-phone {
  background-repeat: no-repeat;
  background-size: cover;
  height: 580px;
  position: absolute;
  left: 340px;
  margin-top: 40px;
}

.screenshot {
  background-size: contain;
  height: 490px;
  position: absolute;
  left: 484px;
  margin-top: 65px;
  border-radius: 10px;
}


```

And the JavaScript code: 

```
/*Toggle dropdown content*/
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close dropdown if user clicks outside of it
  window.onclick = function (event) {
    if (!event.target.matches(".drop-btn")) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains("show")) {
          openDropdown.classList.remove("show");
        }
      }
    }
  };
  
```

The functionality of the dropdown language menu was created using [this code](https://www.w3schools.com/howto/howto_js_dropdown.asp) from W3Schools.

Feel free to post your feedback.