DEV Community: George-Florin Petrila

Instagram log in page remade with HTML, CSS and JS

George-Florin Petrila — Thu, 26 Jan 2023 13:35:51 +0000

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.

HTML/CSS landing page

George-Florin Petrila — Mon, 23 Jan 2023 14:48:48 +0000

This is a simple landing page I've created using HTML and CSS. Stylistically, it is similar to the screens I've previewed in my previous post.

Codepen demo

First, the HTML code:

<body>
  <div id="main">
    <div class="navbar">
      <button href="url" class="logo"></button>
      <div class="menu-container">
        <a href="url">Log in</a>
        <a href="url">Sign up</a>
        <a href="url">About</a>
        <a href="url">Contact</a>
      </div>
    </div>
    <div>
      <h1 class="welcome">Welcome</h1>
      <button class="start-btn">Get started</button>
    </div>
  </div>
  <hr>
  <div id="middle">
    <button class="panel">
      <h1>Free</h1>
      <h4>
        Features: <br />
        - 6 skips/hour <br />
        - ads <br />
        - available on one device <br />
      </h4>
      <h2>Price: 0.00€</h2>
    </button>
    <button class="panel">
      <h1>Standard</h1>
      <h4>
        Features: <br />
        - 10 skips/hour <br />
        - no ads <br />
        - available on two devices <br />
      </h4>
      <h2>Price: 5.99€/month</h2>
      <h4>Cancel at any time</h4>
    </button>
    <button class="panel">
      <h1>Premium</h1>
      <h4>
        Features: <br />
        - unlimited skips <br />
        - no ads <br />
        - available on three or more devices <br />
        - offline availability <br />
      </h4>
      <h2>Price: 9.99€/month</h2>
      <h4>Cancel at any time</h4>
      <h4>One month trial</h4>
    </button>
  </div>
  <hr>
  <div id="bottom">
    <div class="description">
      <h1 class="description-title">How does it work?</h1>
      <h2 class="description-items">1. Log in or create a new account (it's free!)</h2>
      <h2 class="description-items">2. Choose one of our three plans. If you choose a paid plan, you need to have a valid credit/debit card</h2>
      <h2 class="description-items">3. You can cancel your plan at any time</h2>
      <button class="newsletter-btn">Sign up for our newsletter</button>
    </div>

    <footer id="footer">
      <h4 class="copyright">© 2023 App. All rights reserved. Use of this site constitutes acceptance of our User Agreement and Privacy Policy and Cookie Statement and Your California Privacy Rights. The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of the owners.</h4>
    </footer>
  </div>
</body>

Now, the CSS part:

@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

body {
  font-family: "Lato", sans-serif;
  background-color: #181818;
  background-image: url("https://images2.alphacoders.com/238/thumb-1920-238870.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.landing {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding-top: 28px;
  height: 100vh;
}

.navbar {
  width: 100%;
  background-color: #2e2e2e;
  font-size: 20px;
  padding: 10px;
  height: 70px;
  display: block;
  justify-content: end;
}

.menu-container {
  position: absolute;
  right: 10px;
  top: 20px;
}

a {
  color: white;
  text-decoration: none;
  padding: 4px;
}

a:hover {
  border: 2px solid white;
  border-radius: 7px;
  transition: 0.3s;
  margin: 4px;
}

.logo {
  background-image: url("https://www.freepnglogos.com/uploads/logo-website-png/logo-website-file-globe-icon-svg-wikimedia-commons-21.png");
  width: 100px;
  height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #1ed760;
  border: none;
  border-radius: 4px;
}

.logo:hover {
  cursor: pointer;
  border: 2px solid white;
}

.welcome {
  color: white;
  font-size: 140px;
  padding: 10px;
}

.start-btn {
  background-color: #1ed760;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  width: 300px;
  height: 15vh;
  color: white;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  right: 40%;
}

.start-btn:hover {
  border: 2px solid white;
  margin: 10px;
  transition: 0.2s;
  box-shadow: 10px 10px 40px #995f99;
}

#main {
  width: 100%;
  height: 140vh;
}

#middle {
  width: 100%;
  height: 140vh;
  display: flex;
  justify-content: center;
}

#bottom {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

hr {
  height: 4px;
  background-color: black;
  border: none;
  width: 100%;
}

.panel {
  height: 90vh;
  width: 250px;
  background-color: #2e2e2e;
  border: 4px solid black;
  border-radius: 4px;
  margin: 100px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.panel:focus {
  margin: 130px 110px;
  box-shadow: 10px 10px 40px #995f99;
  transition: 0.6s;
  cursor: pointer;
}

.panel:hover {
  margin: 130px 110px;
  box-shadow: 10px 10px 40px #995f99;
  transition: 0.6s;
  cursor: pointer;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  text-align: center;
  background-color: #2e2e2e;
}

.copyright {
  color: white;
}

.description {
  text-align: center;
}

.description-title {
  color: white;
  font-size: 70px;
}

.description-items {
  color: white;
  font-size: 20px;
}

.newsletter-btn {
  background-color: #1ed760;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  width: 300px;
  height: 15vh;
  color: white;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  right: 40%;
}

.newsletter-btn:hover {
  border: 2px solid white;
  margin: 10px;
  transition: 0.2s;
  box-shadow: 10px 10px 40px #995f99;
}

And that is all. Feel free to post your feedback.

Log in/sign up/password reset screens made with HTML and CSS

George-Florin Petrila — Thu, 12 Jan 2023 15:17:32 +0000

This post will showcase three screens: one for logging in, one for signing up and one for requiring a password reset link.

Codepen demos:
Log in screen
Sign up screen
Password reset screen

First, the HTML code for the Log in screen:

<div class="login-screen">
  <h1>Sign in to your account</h1>
  <input type="email" placeholder="Email address" />
  </br></br>
  <input type="password" placeholder="Password" />
  </br></br>
  <a href="https://codepen.io/georgeflorinp1/pen/ExpmMvE">Forgot password?</a>
  </br></br>
  <button>Log in</button>
  <hr>
  <h4>Don't have an account?</h4>
  <a href="https://codepen.io/georgeflorinp1/pen/KKBmEyW" class="sign-up-btn">Sign up</b>
</div>

Now, the HTML code for the Sign up screen:

<div class="signup-screen">
  <h1>Create your account</h1>
  <input type="text" placeholder="First name" />
  </br></br>
  <input type="text" placeholder="Last name" />
  </br></br>
  <input type="text" placeholder="Email address" />
  </br></br>
  <input type="password" placeholder="Password" />
  </br></br>
  <input type="password" placeholder="Confirm password" />
  </br></br>
  <button>Sign up</button>
  <hr>
  <h4>Already have an account?</h4>
  <a href="https://codepen.io/georgeflorinp1/pen/poZPxXy?editors=1100" class="sign-up-btn">Sign in</b>
</div>

The HTML Code for the Password reset screen:

<div class="signup-screen">
  <h1>Create your account</h1>
  <input type="text" placeholder="First name" />
  </br></br>
  <input type="text" placeholder="Last name" />
  </br></br>
  <input type="text" placeholder="Email address" />
  </br></br>
  <input type="password" placeholder="Password" />
  </br></br>
  <input type="password" placeholder="Confirm password" />
  </br></br>
  <button>Sign up</button>
  <hr>
  <h4>Already have an account?</h4>
  <a href="https://codepen.io/georgeflorinp1/pen/poZPxXy?editors=1100" class="sign-up-btn">Sign in</b>
</div>

Finally, the CSS code:

for the Log in and Sign up screens:

@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

body {
  text-align: center;
  font-family: "Lato", sans-serif;
  background-color: #181818;
  color: white;
}

input {
  font-family: "Lato", sans-serif;
  border: 2px solid white;
  border-radius: 10px;
  padding: 10px;
  width: 15%;
  background-color: #2e2e2e;
  color: white;
}

button {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  border: 1px solid black;
  border-radius: 20px;
  padding: 10px;
  width: 15%;
  background-color: #1ed760;
  color: white;
  opacity: 1;
}

button:hover {
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
}

a {
  text-decoration: none;
}

hr {
  width: 25%;
}

sign-up-btn {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  border: 1px solid black;
  border-radius: 20px;
  padding: 10px;
  width: 15%;
  background-color: #1ed760;
  color: white;
  opacity: 1;
}

for the Password reset screen:

@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

body {
  text-align: center;
  font-family: "Lato", sans-serif;
  background-color: #181818;
  color: white;
}

input {
  font-family: "Lato", sans-serif;
  border: 2px solid white;
  border-radius: 10px;
  padding: 10px;
  width: 15%;
  background-color: #2e2e2e;
  color: white;
}

button {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  border: 1px solid black;
  border-radius: 20px;
  padding: 10px;
  width: 15%;
  background-color: #1ed760;
  color: white;
  opacity: 1;
}

button:hover {
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
}