by Sai gowtham

How to create a Instagram login Page

How to create a Instagram login Page

This is my first project in the #15daysofcss challenge where I created an Instagram login page.

Time spent

I spent 3hours of my time to complete this project.

Most of the time i spent on transition part to get the smooth transition.

Codepen demo

Here is the codepen demo of the Instagram login page.

Now, let’s get into the coding part.

The Html

First, we start with an HTML markup.

<div class="container">
    <div class="box">
        <div class="heading"></div>
        <form class="login-form">
            <div class="field">
                <input id="username" type="name" placeholder="Phone number, username, or email" />
                <label for="username">Phone number, username, or email</label>
            </div>
            <div class="field">
                <input id="password" type="password" placeholder="password" />
                <label for="password">Password</label>
            </div>
            <button class="login-button" title="login">Log In</button>
            <div class="separator">
                <div class="line"></div>
                <p>OR</p>
                <div class="line"></div>
            </div>
            <div class="other">
                <button class="fb-login-btn" type="button">
                    <i class="fa fa-facebook-official fb-icon"></i>
                    <span class="">Log in with Facebook</span>
                </button>
                <a class="forgot-password" href="#">Forgot password?</a>
            </div>
        </form>
    </div>
    <div class="box">
        <p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
    </div>
</div>

In the above code, we have a .container div with two .box divs

  • The first .box contains a

    • heading
    • Two form input fields (username, password).
    • Login button
    • OR separator (⎯⎯⎯⎯ OR ⎯⎯⎯⎯)
    • Other section (Log in with Facebook, forgot password)
  • The second .box contains a <p> element with Sign up link.

The CSS

Now, we need to style our html elements by using css.

body {
  font-family: sans-serif;
  background-color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
  font-size: 14px;
}

.box {
  max-width: 350px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ffff;
  border: 1px solid #e6e6e6;
  border-radius: 1px;
  margin: 0 0 10px;
  padding: 10px 0;
  flex-grow: 1;
}

.heading {
  margin: 22px auto 12px;
  background-image: url("https://www.instagram.com/static/bundles/es6/sprite_core_b20f2a3cd7e4.png/b20f2a3cd7e4.png");
  background-position: -98px 0;
  height: 51px;
  width: 177px;
  overflow: hidden;
}

.field {
  margin: 10px 0;
  position: relative;
  font-size: 14px;
  width: 100%;
  text-overflow: ellipsis;
}

input {
  padding: 9px 0px 7px 9px;
  font-size: 12px;
  width: 16rem;
  height: 1.2rem;
  outline: none;
  background: #fafafa;
  border-radius: 3px;
  border: 1px solid #efefef;
}

/* label intial position*/

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  padding-bottom: 15px;
  transform: translateY(10px);
  line-height: 6px;
  transition: all ease-out 0.1s;
  font-size: 14px;
  color: #999;
  padding-top: 6px;
}

/* hiding placeholder in all browsers */

input::placeholder {
  visibility: hidden;
}

/* hiding  placeholder in mozilla */
.login-form ::-moz-placeholder {
  color: transparent;
}

/* label final position */
input:not(:placeholder-shown) + label {
  transform: translateY(0);
  font-size: 11px;
}

/* input padding increases if placeholder is not shown */
input:not(:placeholder-shown) {
  padding-top: 14px;
  padding-bottom: 2px;
}

.login-button {
  text-align: center;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid transparent;
  background-color: #3897f0;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.separator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  margin-top: 6px;
}

.separator .line {
  height: 1px;
  width: 40%;
  background-color: #dbdbdb;
}

.other {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fb-login-btn {
  margin: 1rem;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  color: #385185;
  font-weight: 600;
  background: transparent;
}

.fb-icon {
  color: #385185;
  font-size: 1rem;
  padding-right: 1px;
}

.forgot-password {
  font-size: 11px;
  color: #003569;
}

.signup {
  color: #3897f0;
  font-weight: 600;
}

The Wow part

If you are still not tested the codepen demo then click on the above run pen button and start typing in the input field you will see the label is sliding up with a smooth transition.

To do that first we need to detect the user typing for that we need to use :placeholder-shown pseudo css class instead of using JavaScript onkeyup event.

Here is the code

  1. First, we need to hide the placeholder text by setting a visibility property to hidden.
/* hiding placeholder text in all browsers */

input::placeholder {
  visibility: hidden;
}

In Mozilla, i come with a trick by setting the color to transparent

/* hiding  placeholder text in mozilla */
.login-form ::-moz-placeholder {
  color: transparent;
}
  1. Now, We need to move the label text inside the input text box.
/* label final position */
label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  padding-bottom: 15px;
  transform: translateY(10px);
  line-height: 6px;
  transition: all ease-out 0.1s;
  font-size: 14px;
  color: #999;
  padding-top: 6px;
}
  1. When the user starts typing we need to detect and slide up the label by applying transition for smooth transformation.
input:not(:placeholder-shown) + label {
  transform: translateY(0);
  font-size: 11px;
}

The above code does is if the place-holder text is not shown move the label to 0px in the Y-axis and decrease the font-size to 11px.

Where plus + is used to the select the next element, in our html markup the next element to the input field is <label>.

OR Separator part

To create the OR separator like this.

⎯⎯⎯⎯  OR ⎯⎯⎯⎯
  1. We need to use a div .separator with 2 div tags and a p tag.
<div class="separator">
  <div class="line"></div>
  <p>OR</p>
  <div class="line"></div>
</div>
  1. To create the horizontal line on the left and right-hand side of the OR text we need to use height: 1px and width: 40%.

Basically we have 100% width, we give each line to 40% so 2x40% = 80% remaining 20% is occupied by the OR text.

We used flex-box to align everything in the X-axis, creating a space between the OR text and line

.separator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  margin-top: 6px;
}

.separator .line {
  height: 1px;
  width: 40%;
  background-color: #dbdbdb;
}

I hope you enjoyed ✓ and learned something new.

If you are interested in doing 15daysofcss challenge checkout 15daysofcss page.