Instagram log in page remade with HTML, CSS and JS

#html #css #javascript #codepen

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:

Here is the Codepen demo of the project.

Tools I used:

Visual Studio Code;
Codepen;
ColorPick Eyedropper, a Chrome extension for finding out the exact color of certain pages, buttons etc.;
WhatFont, 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 from W3Schools.

Feel free to post your feedback.

DEV Community

Instagram log in page remade with HTML, CSS and JS

Top comments (0)

Read next

Using Tailwind plugins to create custom utility classes

HTMZ inspired form subission

Deep Linking for Andriod and Apple in Next.js

Tools & Extensions for Vue JS