How to create a Instagram login Page
In this post we will give you information about How to create a Instagram login Page. Hear we will give you detail about How to create a Instagram login PageAnd how to use it also give you demo for it if it is necessary.
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 > <div > <div ></div> <form > <div > <input id="username" type="name" placeholder="Phone number, username, or email" /> <label for="username">Phone number, username, or email</label> </div> <div > <input id="password" type="password" placeholder="password" /> <label for="password">Password</label> </div> <button title="login">Log In</button> <div > <div ></div> <p>OR</p> <div ></div> </div> <div > <button type="button"> <i ></i> <span >Log in with Facebook</span> </button> <a href="#">Forgot password?</a> </div> </form> </div> <div > <p>Don't have an account? <a href="#">Sign Up</a></p> </div></div>
In the above code, we have a .containerdiv with two .boxdivs
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-shownpseudo css class instead of using JavaScript onkeyup event.
Here is the code
- 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;}- 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;}- 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 ⎯⎯⎯⎯
- We need to use a div.separator with 2 div tags and a p tag.
<div > <div ></div> <p>OR</p> <div ></div></div>
- 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 2×40% = 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.
Hope this code and post will helped you for implement How to create a Instagram login Page. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs