JavaScripts Magic
Home  »  Elements • FORMS   »   (Source Code) Instagram Login Page With HTML & CSS

(Source Code) Instagram Login Page With HTML & CSS

Instagram login page

Hello! Frontend Web Developers. In this blog post, we will make an Instagram Login Page With pure HTML & CSS. Cloning web elements of such popular websites is the best way to level up web development skills.

Also Read: Facebook Login Page With HTML & CSS

In this tutorial, we will understand the HTML structure & styling that is used to make Instagram Login Page. Also, we will see key concepts used in this project that will boost your confidence to use these fundamental technologies.

Joinn Telegram

Key Concepts Used To Make Instagram Login Page

Understanding HTML Structure Of Instagram Login Page

Container: The outermost div with the class container holds all elements within it.

<div class="container">

Row: Inside the container, a div with class row forms the foundation for a grid layout.

<div class="row">

Column: Nested within the row, a div with class col-md-4 m-auto centers itself and provides a structure for content.

<div class="col-md-4 m-auto">

Card: Within the column, a div with class card card-body mt-2 creates a card layout with padding and margin.

<div class="card card-body mt-2">

Instagram Logo: The card contains an img tag displaying the Instagram logo.

<img src="https://raw.githubusercontent.com/Cshayan/Instagram-Login-Page-Using-SCSS/master/Images/instagram.png" alt="instagram">

Form Container: Another div within the card, with class col-md-12 m-auto, holds the login form and related elements.

<div class="col-md-12 m-auto">

Form: The form includes input fields for email/phone, password, and a submit button.

<form action="#" class="form-container" id="form">
   <div class="form-group">
       <input type="text" id="email" class="form-control" onkeyup="manage()" placeholder="Phone number, username, or email" required>
   </div>
   <div class="form-group">
       <input type="password" id="password" class="form-control" onkeyup="manage()" placeholder="Password" required>
   </div>
   <div class="form-group">
       <input type="submit" id="submit" class="btn btn-primary btn-block" value="Log In" disabled>
   </div>
</form>

OR Divider: A div with class or separates sections with two lines and the text “OR”.

<div class="or">
   <div class="line"></div>
   OR
   <div class="line"></div>
</div>

Facebook Login: A div provides a link for logging in with Facebook.

<div class="facebook-container">
   <a href="#" class="fb-login"><i class="fa fa-facebook" aria-hidden="true"></i> Log in with Facebook</a>
</div>

Forgot Password: A div with a link for password recovery.

<div class="text-center forgot-pass">
    <a href="#">Forgot Password?</a>
</div>

Sign Up Card: A div prompts users to sign up with a link to the registration page.

<div class="card card-body signup text-center">
    <div> Don't have an account? <a href="#">Sign up</a></div>
</div>

App Download Links: A div offers app download links with images.

<div class="app-container text-center">
    Get the app.
    <div class="logo-container">
        <a href="#" id="img1"><img src="https://raw.githubusercontent.com/Cshayan/Instagram-Login-Page-Using-SCSS/master/Images/appstore.png" alt="appstore"></a>
        <a href="#" id="img2"><img src="https://raw.githubusercontent.com/Cshayan/Instagram-Login-Page-Using-SCSS/master/Images/googleplay.png" alt="appstore"></a>
    </div>
</div>

Footer: The footer section includes various links and copyright information.

<footer class="footer">
    <div>
        <a href="https://javascriptsmagic.com/instagram-login-page-with-html-and-css/">Get Code</a>
        <a href="#">About us</a>
        <a href="#">Press</a>
        <a href="#">API</a>
        <a href="#">Jobs</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Directory</a>
        <a href="#">Profiles</a>
        <a href="#">Hashtags</a>
        <a href="#">Language</a>
    </div>
    <div>
        <p id="insta">&copy; <span id="year"></span> INSTAGRAM</p>
    </div>
</footer>

Understanding CSS Of Instagram Login Page

Global Styles: Resetting margin, padding, and setting box-sizing for all elements.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
}

Body Styles: Setting background color and font family for the entire page.

body {
  background: #f1f2f6;
  font-family: 'Roboto', sans-serif;
}

Heading Styles: Adjusting font weight for heading elements.

h1 {
  font-weight: bolder;
}

Image Styles: Setting width and margins for images.

img {
  width: 175px;
  margin-left: 70px;
  margin-top: 20px;
}

Form Styles: Styling input fields and form containers.

.form-container {
  margin-top: 30px;
}

Input Styles: Customizing input field appearance.

.form-control {
  background: #f1f2f6;
  border-radius: 3px;
  padding: 10px;
  font-size: 12px;
}

Input Focus Styles: Styling input fields when focused.

.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #a4b0be;
  background: #f1f2f6;
}

Card Styles: Setting border radius for cards.

.card {
  border-radius: 0px;
}

Button Styles: Styling buttons for primary actions.

.btn-primary {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

OR Divider Styles: Styling the OR divider with flexbox and lines.


.or {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #a4b0be;
font-weight: bold; 
}

Source Code Of Instagram Login Page (HTML & CSS)

HTML:

  <div class="container">
        <div class="row">
            <div class="col-md-4 m-auto">
                <div class="card card-body mt-2">
                    <img src="https://raw.githubusercontent.com/Cshayan/Instagram-Login-Page-Using-SCSS/master/Images/instagram.png" alt="instagram">
                    <div class="col-md-12 m-auto">
                        <form action="#" class="form-container" id="form">
                            <div class="form-group">
                                <input type="text" id="email" class="form-control" onkeyup="manage()" placeholder="Phone number, username, or email"
                                    required>
                            </div>
                            <div class="form-group">
                                <input type="password" id="password" class="form-control" onkeyup="manage()" placeholder="Password" required>
                            </div>
                            <div class="form-group">
                                <input type="submit" id="submit" class="btn btn-primary btn-block" value="Log In" disabled>
                            </div>
                        </form>
                        <div class="or">
                            <div class="line"></div>
                            OR
                            <div class="line"></div>
                        </div>
                        <div class="facebook-container">
                            <a href="#" class="fb-login"><i class="fa fa-facebook" aria-hidden="true"></i> Log in with Facebook</a>
                        </div>
                        <div class="text-center forgot-pass">
                            <a href="#">Forgot Password?</a>
                        </div>
                    </div>
                </div>
                <div class="card card-body signup text-center">
                    <div> Don't have an account? <a href="#">Sign up</a></div>
                </div>
                <div class="app-container text-center">
                    Get the app.
                    <div class="logo-container">
                        <a href="#" id="img1"><img src="https://raw.githubusercontent.com/Cshayan/Instagram-Login-Page-Using-SCSS/master/Images/appstore.png" alt="appstore"></a>
                        <a href="#" id="img2"><img src="https://raw.githubusercontent.com/Cshayan/Instagram-Login-Page-Using-SCSS/master/Images/googleplay.png" alt="appstore"></a>
                    </div>
                </div>
            </div>
        </div>
  <footer class="footer">
            <div>
                <a href="https://javascriptsmagic.com/instagram-login-page-with-html-and-css/">Get Code</a>
                <a href="#">About uS</a>
                <a href="#">Press</a>
                <a href="#">API</a>
                <a href="#">Jobs</a>
                <a href="#">Privacy</a>
                <a href="#">Terms</a>
                <a href="#">Directory</a>
                <a href="#">Profiles</a>
                <a href="#">Hashtags</a>
                <a href="#">Language</a>
            </div>
            <div>
                <p id="insta">&copy; <span id="year"></span> INSTAGRAM</p>
            </div>
        </footer>
    </div>

Also Read: Google Login Page With HTML & CSS

CSS:

<style>
    @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  text-decoration: none;
}

body {
  background: #f1f2f6;
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-weight: bolder;
}

img {
  width: 175px;
  margin-left: 70px;
  margin-top: 20px;
}

.form-container {
  margin-top: 30px;
}

.form-control {
  background: #f1f2f6;
  border-radius: 3px;
  padding: 10px;
  font-size: 12px;
}

.form-control:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid #a4b0be;
  background: #f1f2f6;
}

.card {
  border-radius: 0px;
}

.btn-primary {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.or {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #a4b0be;
  font-weight: bold;
  font-size: 14px;
}

.or .line {
  width: 105px;
  height: 1px;
  background: #efefef;
}

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

.facebook-container a {
  text-decoration: none;
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
  color: #3b5998;
  letter-spacing: 0.5px;
}

.forgot-pass {
  margin-top: 20px;
}

.forgot-pass a {
  font-size: 12px;
  color: #333;
  text-decoration: none;
}

.signup {
  margin-top: 12px;
}

.signup > div {
  font-size: 14px;
}

.signup > div a {
  text-decoration: none;
  color: #00a8ff;
}

.app-container {
  margin-top: 20px;
  font-size: 14px;
}

.app-container .logo-container {
  margin-top: 0px;
  margin-left: -65px;
}

.app-container .logo-container a img {
  width: 135px;
  height: 40px;
}

.footer {
  margin-top: 90px;
  margin-bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.footer a {
  font-size: 14px;
  color: #273c75;
  font-weight: bold;
  margin-left: 14px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
}

.footer #insta {
  color: #7f8fa6;
  font-size: 12px;
}

@media screen and (max-width: 568px) {
  .card {
    width: 80%;
    margin-left: 48px;
  }
  .footer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    text-align: center;
    line-height: 30px;
    margin-bottom: 2px;
  }
  .app-container .logo-container {
    margin-top: 0px;
  }
}
/*# sourceMappingURL=style.css.map */
  </style>

JAVASCRIPT:

<script>
    // Set the year in footer
document.getElementById('year').innerHTML = new Date().getFullYear();

// Make the button enable when all the form feilds are filled
var email = document.getElementById('email');
var password = document.getElementById('password');
var submit = document.getElementById('submit');

function manage() {
    if (email.value !== '' && password.value !== '') {
        submit.disabled = false;
    } else {
        submit.disabled = true;
    }
}
</script>

Last Updated: June 18, 2024

By JSM Hemant

About Author

Hello, Myself Hemant. I Am Web Developer & Likes To Create Awesome Projects By Using MERN, Java, Python, C++. In This Website You Will Get Cool Projects Made With Above Technologies With Full Source Code. You Can Also Follow This Website On Author Social Media:

Leave a Reply

Your email address will not be published. Required fields are marked *

Categories

Recent Posts