Instagram Login Page Clone Using HTML & CSS

By Faraz - September 24, 2025

Learn how to create an Instagram login page clone using HTML and CSS. Easy step-by-step tutorial for beginners to build responsive Instagram login UI.

Join us on Telegram

Read Also make your own responsive pizza shop website using html, css and javascript.jpg

Make Your Own Responsive Pizza Shop Website Using HTML, CSS and JavaScript

Instagram is one of the most popular social media platforms worldwide, used by millions of users daily to share photos, videos, and stories. Its login page is simple, clean, and visually appealing, making it a perfect example for beginners to practice HTML and CSS skills. Creating an Instagram login page clone using HTML and CSS is not only a fun project but also an excellent way to understand real-world web design techniques.

In this tutorial, we will guide you step by step on how to build a responsive Instagram login page clone. You will learn how to structure your HTML with proper semantic tags, style it with CSS for a clean layout, and make it responsive so that it looks great on both desktop and mobile screens.

By following this tutorial, beginners and aspiring web developers can enhance their front-end development skills, understand flexbox layout, CSS styling, form design, and gain hands-on experience with building Instagram-like user interfaces. This project will also help you create portfolio-worthy UI components and prepare for real-world web development projects.

Prerequisites:

Before you start, make sure you have:

Basic knowledge of HTML elements like <div>, <form>, <input>, and <button>.
Basic understanding of CSS properties such as flex, margin, padding, border, background-color, and font.
A text editor such as VS Code, Sublime Text, or Atom.

After completing this tutorial, you will have a fully functional Instagram login page clone that can be further customized with animations, hover effects, or even backend functionality for a real login experience.

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our Instagram login page. Let's break down the HTML code step by step:

1. Document Setup

<!DOCTYPE html>
<html lang="en">
<head>

<!DOCTYPE html> → Defines HTML5 document type.
<html lang="en"> → Root element, sets the language to English.
<head> contains metadata (not visible on the page).

2. Meta & Title

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram • Login</title>

charset="UTF-8" → Supports all characters (emojis, special symbols, etc.).
viewport → Ensures responsiveness on mobile devices.
<title> → Browser tab title: "Instagram • Login".

3. Fonts & Styles

<!-- Google Fonts (Inter) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">

Preconnects to Google Fonts for faster loading.
Loads Inter font.
Links to external stylesheet styles.css for styling.

4. Body & Main Content

<main class="main-container">
    <div class="content-wrapper">

<main> → The main section of the page.
.main-container and .content-wrapper → Structural wrappers (styled in CSS).

5. Phone Image (Left Side)

<div class="phone-image-container">
   <img class="phone-screenshot" src="..." alt="Instagram screenshot">
</div>

Displays a screenshot of Instagram’s app (hidden on small screens with CSS).

6. Login & Signup Section (Right Side)

<div class="forms-container">

Holds login and signup forms.

Login Form

<div class="card login-box">
    <i ... style="background-image: url(...);"></i> <!-- Instagram logo -->
    <form class="login-form">
        <!-- Username -->
        <input type="text" placeholder="Phone number, username, or email">
        <!-- Password -->
        <input type="password" placeholder="Password">
        <!-- Login Button -->
        <button type="submit" class="login-button">Log in</button>
    </form>

Instagram logo (<i> styled with background image).
Input fields for username/email/phone & password.
Login button.

OR Separator

<div class="separator">
    <div class="line start"></div>
    <div class="text">OR</div>
    <div class="line end"></div>
</div>

Horizontal divider with "OR" in the middle.

Facebook Login

<button class="facebook-login">
    <svg ...></svg>
    <span>Log in with Facebook</span>
</button>

Facebook logo (SVG).
Text button: "Log in with Facebook".

Forgot Password

<a href="#" class="forgot-password">Forgot password?</a>

Link to reset password.

Signup Box

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

Message with signup link.

7. Footer Section

<footer class="page-footer">
    <div class="footer-links">
        <a href="#">Meta</a>
        <a href="#">About</a>
        ...
    </div>
    <div class="copyright">
        <span>English (UK)</span>
        <span>© 2025 Instagram from Meta</span>
    </div>
</footer>

Footer contains links (Meta, About, Blog, Help, Privacy, etc.).
Shows language & copyright.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram • Login</title>
    <!-- Google Fonts (Inter) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <main class="main-container">
        <div class="content-wrapper">

            <!-- Phone Image (hidden on small screens) -->
            <div class="phone-image-container">
                 <img class="phone-screenshot" src="https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/instagram-login-page.png" alt="Instagram screenshot">
            </div>

            <!-- Login & Signup Forms -->
            <div class="forms-container">

                <!-- Login Form -->
                <div class="card login-box">
                    <i data-visualcompletion="css-img" aria-label="Instagram" class="" role="img" style="background-image: url("https://static.cdninstagram.com/rsrc.php/v4/yz/r/H_-3Vh0lHeK.png"); background-position: 0px -2959px; background-size: auto; width: 175px; height: 51px; background-repeat: no-repeat; display: inline-block;"></i>
                    
                    <form class="login-form">
                        <div class="input-container">
                        <input 
                            aria-label="Phone number, username, or email"
                            type="text" 
                            placeholder="Phone number, username, or email" 
                        >
                    </div>
                <div class="input-container">
                        <input 
                            aria-label="Password"
                            type="password" 
                            placeholder="Password"
                        >
                    </div>
                <div class="input-container">
                        <button 
                            type="submit"
                            class="login-button"
                        >
                            Log in
                        </button>
                    </div>
                    </form>

                    <!-- OR Separator -->
                    <div class="separator">
                        <div class="line start"></div>
                        <div class="text">OR</div>
                        <div class="line end"></div>
                    </div>

                    <!-- Log in with Facebook -->
                    <button class="facebook-login">
                        <svg aria-hidden="true" fill="#0095f6" viewBox="0 0 24 24" style="width: 1rem; height: 1rem;border-radius:100px;">
                            <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.046c.73 0 1.325-.593 1.325-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"></path>
                        </svg>
                        <span>Log in with Facebook</span>
                    </button>
                    
                    <a href="#" class="forgot-password">Forgot password?</a>
                </div>

                <!-- Sign up Box -->
                <div class="card signup-box">
                    <span>Don't have an account?</span>
                    <a href="#">Sign up</a>
                </div>

            </div>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="page-footer">
        <div class="footer-links">
            <a href="#">Meta</a>
            <a href="#">About</a>
            <a href="#">Blog</a>
            <a href="#">Jobs</a>
            <a href="#">Help</a>
            <a href="#">API</a>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Locations</a>
            <a href="#">Instagram Lite</a>
            <a href="#">Threads</a>
            <a href="#">Contact Uploading & Non-Users</a>
            <a href="#">Meta Verified</a>
        </div>
        <div class="copyright">
            <span>English (UK)</span>
            <span>© 2025 Instagram from Meta</span>
        </div>
    </footer>

</body>
</html>

Read Also create-dental-clinic-landing-page-with-html-and-tailwind-css.webp

Create Dental Clinic Landing Page with HTML and Tailwind CSS

Step 2 (CSS Code):

Once the basic HTML structure of the login page is in place, the next step is to add styling to the page using CSS. Let's break down the CSS code step by step:

1. Global Styles

* {
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

* = universal selector (applies to all elements).
Uses Inter font for all text.
box-sizing: border-box makes width/height include padding & borders (easier layout).
Resets padding & margin → creates a clean base.

body {
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

Light grey background (#fafafa = Instagram’s style).
Flexbox layout with column direction (content stacked vertically).

2. Main Layout

.main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-grow: 1;
}

Centers the content both horizontally & vertically.

.content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 32px;
  margin-top: 52px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 935px;
}

Holds both phone image (left) and forms (right).
Centers it with margin-inline-start/end: auto.
max-width: 935px → prevents content from stretching too wide.

3. Phone Image Section

.phone-image-container {
  display: none;
}

Hidden on small screens (mobile).

.phone-screenshot {
  height: 450px;
  margin-left: -55px;
  width: auto;
  object-fit: fill;
  border: 0px;
}

Displays an Instagram app screenshot.
Negative left margin shifts the image closer to forms.

4. Forms Section

.forms-container {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

Login/signup box column.
Max width = 350px (similar to Instagram’s real design).
gap: 10px adds spacing between boxes.

5. Login Form

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Centers the login box content vertically.

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.login-form .input-container {
  margin-bottom: 6px;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

Adds spacing around inputs.

.login-form input {
  width: 100%;
  padding: 10px;
  background-color: #fafafa;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  font-size: 12px;
}

Inputs styled like Instagram: light grey background, thin border.
Small font size (12px).

.login-form input:focus {
  outline: none;
  border-color: #a8a8a8;
}

On focus: removes default blue glow, darkens border.

.login-button {
  width: 100%;
  background-color: #4a5df9;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}
.login-button:hover {
  opacity: 1;
}

Blue login button (Instagram-style).
Slightly transparent by default, full opacity on hover.

6. OR Separator

.separator {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 22px;
}
.separator .line {
  height: 1px;
  background-color: #dbdbdb;
  flex-grow: 1;
}
.separator .text {
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  color: #8e8e8e;
}

Horizontal line on both sides with "OR" in the middle.
Grey lines, small grey text.

7. Facebook Login Button

.facebook-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  border: none;
  background: none;
  cursor: pointer;
}
.facebook-login span {
  font-size: 14px;
  font-weight: 600;
  color: #0095f6;
}

Flex container with Facebook logo + text side by side.
Blue colored text (#0095f6) like Instagram’s style.

8. Forgot Password

.forgot-password {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  text-decoration: none;
}

Black text link (no underline).
Styled like Instagram’s "Forgot password?".

9. Signup Box

.signup-box {
  padding: 44px;
  font-size: 14px;
}
.signup-box a {
  font-weight: 600;
  color: #4a5df9;
  text-decoration: none;
}

White box below login form.
Signup link styled in blue (#4a5df9).

10. Footer

.page-footer {
  padding: 32px;
  text-align: center;
  font-size: 12px;
  color: #8e8e8e;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.footer-links a {
  color: inherit;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}

Grey footer with links (About, Privacy, Jobs, etc.).
Links evenly spaced, underlined on hover.

11. Responsive (Desktop View)

@media (min-width: 768px) {
  .content-wrapper {
    flex-direction: row;
  }
  .phone-image-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
  }
}

On screens ≥ 768px (tablets/desktop):
- Layout changes to row → phone image on left, form on right.
- Phone image becomes visible.

/* General Body Styles */
* {
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

/* Main container to center content */
.main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-grow: 1;
}

.content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 32px;
  margin-top: 52px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 935px;
}

/* Phone image styles */
.phone-image-container {
  display: none;
}

.phone-screenshot {
  height: 450px;
  margin-left: -55px;
  width: auto;
  object-fit: fill;
  border: 0px;
}

/* Forms container */
.forms-container {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

.card {
  text-align: center;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Login Form */
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.login-form .input-container {
  margin-bottom: 6px;
  margin-top: 0;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

.login-form input {
  width: 100%;
  padding: 10px;
  background-color: #fafafa;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  font-size: 12px;
  box-sizing: border-box;
}

.login-form input:focus {
  outline: none;
  border-color: #a8a8a8;
}

.login-button {
  width: 100%;
  background-color: #4a5df9;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

.login-button:hover {
  opacity: 1;
}

/* 'OR' separator */
.separator {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 22px;
}

.separator .line {
  height: 1px;
  background-color: #dbdbdb;
  flex-grow: 1;
}

.separator .line.start {
  margin-inline-start: 40px;
}

.separator .line.end {
  margin-inline-end: 40px;
}

.separator .text {
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  color: #8e8e8e;
}

/* Facebook Login Button */
.facebook-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  border: none;
  background: none;
  cursor: pointer;
}

.facebook-login span {
  font-size: 14px;
  font-weight: 600;
  color: #0095f6;
}

.forgot-password {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  text-decoration: none;
}

/* Signup Box */
.signup-box {
  padding: 44px;
  font-size: 14px;
}

.signup-box a {
  font-weight: 600;
  color: #4a5df9;
  text-decoration: none;
}

/* Footer */
.page-footer {
  padding: 32px;
  text-align: center;
  font-size: 12px;
  color: #8e8e8e;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Responsive styles for desktop */
@media (min-width: 768px) {
  .content-wrapper {
    flex-direction: row;
  }
  .phone-image-container {
    display: flex;
    justify-content: center;
    height: auto;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
  }
}

Final Output:

Read Also build-amazon-clone-with-html-css-and-javascript-2025.webp

Build Amazon Clone with HTML, CSS and JavaScript

Conclusion:

By completing this tutorial, you have successfully created a fully responsive Instagram login page clone using HTML and CSS. This project demonstrates how to combine semantic HTML structure, modern CSS styling, and flexbox layout to replicate a professional-looking login interface similar to Instagram’s.

Building an Instagram login page clone is an excellent way for beginners to practice and improve front-end web development skills, such as form design, responsive layouts, typography, and user interface (UI) creation. You also gained hands-on experience in designing responsive web pages that adapt seamlessly to mobile, tablet, and desktop screens.

With the skills learned in this project, you can:

Design other social media login page clones for Facebook, Twitter, or LinkedIn.
Enhance your portfolio with real-world UI examples.
Improve your understanding of CSS Flexbox, form styling, hover effects, and responsive design.
Prepare for front-end development projects in web development careers.

This Instagram login page clone project is beginner-friendly, easy to follow, and provides a foundation for more advanced UI/UX web design projects. You can further customize it with animations, color themes, and JavaScript interactivity to make it more dynamic.

By practicing such projects, you will not only improve your HTML and CSS skills but also gain confidence to build professional, responsive, and visually appealing web pages, giving you a competitive edge as an aspiring web developer.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: instagram login page clone using html and css, how to make instagram login ui with html and css, instagram login page design tutorial for beginners, responsive instagram login page clone, instagram clone, login page html css, instagram login ui, instagram login page

End of the article

Latest Components

Free HTML News Website Landing Page Code Snippet: Modern & Responsive

by Faraz - April 21, 2026

Download a free, high-performance HTML news website landing page template. Built with Tailwind CSS and JavaScript, this "Newstant" template is optimized for corporate news and business intelligence portals.