By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > Login and Registration Form > How to Make Instagram Signup Page In HTML and CSS
HTML & CSSLogin and Registration Form

How to Make Instagram Signup Page In HTML and CSS

Admin
Last updated: 2022/12/15 at 4:56 PM
Admin
Share
10 Min Read
instagram signup form

In this article, we will see how to make instagram signup page In HTML and CSS. We will just use HTML and CSS/CSS3 only to create this page. This page will have some images, instagram logo, and of course one signup form. It will be pretty good and interesting form to create, also we will use little bit of bootstrap just for some buttons, we will see about that in this article later on.

Contents
Pre-requisites to Make Instagram Signup Page In HTML and CSSAdding Phone ImagesAdding Other Element For The PageAdding Signup formFull Source Code Of Create Instagram Signup Page Using HTML And CSS3OutputYou may also like:

Pre-requisites to Make Instagram Signup Page In HTML and CSS

  • Basic knowledge of HTML
  • Basic knowledge of CSS/CSS3

Adding Phone Images

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Instagram Registration</title>
    <link rel="stylesheet" href="style.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img src="pngegg.png" class="phone1img" alt="">
                <img src="pngwing.com.png" class="phone2img" alt="">
            </div>
       </div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
.phone1img, .phone2img{
    height: 650px;
    padding-top: 70px;
    float: right;
    margin: 10px;
    position: absolute;
}
.phone1img{
    z-index: 1;
}
.phone2img{
    left: -170px;

}

First of all, we will create images which should be in the left of the signup form. Before that, we have linked our style.css file and as we can see here we have a bunch of script files are there, these files are for bootstrap purpose, we can use classes of bootstrap to reduce our some CSS work, we are doing this project with HTML and CSS, so we won’t use it much.

Now we have added container div which have two images, you can use 1 image as well. Then we need to jump on the CSS part to set these images, Firstly, we have removed default margin and padding, then we are adjusting our images using width, float and padding, now here we have to use position to absolute, so both image come in same spot, and we have moved our second image to somewhat left, also we have applied z-index to 1 on first image, so it will come over the second image.

How to Make Instagram Signup Page In HTML and CSS

Adding Other Element For The Page

<div class="col-sm-6">
                <div class="right-column text-center">
                    <img src="instalogo.png" class="insta-logo" alt="">
                    <p class="insta-info">Sign up to see photos and videos from your friends.</p>
                    <button type="submit" class="btn btn-primary btn-block"><img src="fb.png" class="fbimg"> Log in With Facebook</button>
                    <p class="or-text">OR</p>
                </div>
</div>
body{
    background-color: #fafafa !important;
}

.container{
    margin-top: 20px;
}

.insta-logo{
    width: 12rem;
}

.right-column{
    background: #fff;
    border: 1px solid #e6e6e6;
    width: 350px;
    margin: 10px;
    padding: 40px;
}

.insta-info{
    font-weight: 600px;
    line-height: 20px;
    font-size: 17px;
    color: #999;
}

.btn .fbimg{
    width: 16px;
}
.or-text{
    font-size: 13px !important;
    color: #999;
    font-weight: 600;
}

.or-text::before{
    content: '';
    background: #efefef;
    display: block;
    height: 2px;
    width: 110px;
    position: relative;
    top: 11px;
    
}
.or-text::after{
    content: '';
    background: #efefef;
    display: block;
    height: 2px;
    width: 110px;
    position: relative;
    bottom: 10px;
    left: 160px;
}

Now we have done with images, after that we will focus on instagram logo, sign in with Facebook button, and little information of Instagram. First of all we have added instagram logo and short information, we have just adjusted it according to actual instagram signup form. Then we have added a sign-in with Facebook button, this button is created using bootstrap class btn btn-primary btn-block. Here btn-primary indicates blue color, so we will get blue button with these classes.

Now for instagram info, we just give some basic style and color to adjust it, then we need a OR text to do partition our signup form and information, we have again done some basic styling but here we used :before and :after to give lines with the text in left and right side.

How to Make Instagram Signup Page In HTML and CSS

Adding Signup form

<form>
                        <div class="form-group">
                            <input type="text" class="form-control" name="" placeholder="Mobile Number Or Email">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="" placeholder="Full Name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" name="" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary btn-block"> Sign up</button>
                    </form>
                    <p class="terms-text">By Signing up, you agree to our <b>Terms</b>,<b>Data Policy</b> and<b>Cookies policy</b>.</p>

                </div>
                <div class="login-text text-center">
                    <p>Have an account?<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Login</a></p>
                </div>
            </div>
.form-group{
    margin-bottom: 6px !important;
}

.form-control{
    background: #fafafa !important;
    border: 1px solid #efefef;
    font-size: 12px !important;
}

::placeholder{
    color: #999 !important;
}

.btn{
    margin: 12px auto;
    padding: 2px !important;
    font-weight: 600 !important;
}

.btn-primary{
    background-color: #3897f0;
    border: 1px solid #3897f0 !important;
}

.terms-text{
    line-height: 18px;
    font-size: 14px;
    color: #999;
    margin: 5px 20px;
}

.login-text{
    background: #fff;
    border: 1px solid #e6e6e6;
    width: 350px;
    margin: 20px;
}

.login-text a:hover{
    text-decoration: none;
}

Now finally, we will add our signup form which have basically 4 input fields for email, name, username, and password also we have included a button to submit the form. For the styling purpose, we just have to give some color to placeholders and font-size nothing so much we have done in here.

After that, we have a little paragraph for term and conditions, which don’t have much styling again. Now lastly we have sign-in button if user already have an account.

I recommend you to run this whole project as it is and click on login button, If you like the output you can share to your friends as well.

How to Make Instagram Signup Page In HTML and CSS

Full Source Code Of Create Instagram Signup Page Using HTML And CSS3

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Instagram Registration</title>
    <link rel="stylesheet" href="style.css">

    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img src="pngegg.png" class="phone1img" alt="">
                <img src="pngwing.com.png" class="phone2img" alt="">
            </div>
            <div class="col-sm-6">
                <div class="right-column text-center">
                    <img src="instalogo.png" class="insta-logo" alt="">
                    <p class="insta-info">Sign up to see photos and videos from your friends.</p>
                    <button type="submit" class="btn btn-primary btn-block"><img src="fb.png" class="fbimg"> Log in With Facebook</button>
                    <p class="or-text">OR</p>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" name="" placeholder="Mobile Number Or Email">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="" placeholder="Full Name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" name="" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary btn-block"> Sign up</button>
                    </form>
                    <p class="terms-text">By Signing up, you agree to our <b>Terms</b>,<b>Data Policy</b> and<b>Cookies policy</b>.</p>

                </div>
                <div class="login-text text-center">
                    <p>Have an account?<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Login</a></p>
                </div>
            </div> 
            
        </div>
    </div>
</body>

</html>

style.css

*{
    margin: 0;
    padding: 0;
}
.phone1img, .phone2img{
    height: 650px;
    padding-top: 70px;
    float: right;
    margin: 10px;
    position: absolute;
}
.phone1img{
    z-index: 1;
}
.phone2img{
    left: -170px;

}

body{
    background-color: #fafafa !important;
}

.container{
    margin-top: 20px;
}

.insta-logo{
    width: 12rem;
}

.right-column{
    background: #fff;
    border: 1px solid #e6e6e6;
    width: 350px;
    margin: 10px;
    padding: 40px;
}

.insta-info{
    font-weight: 600px;
    line-height: 20px;
    font-size: 17px;
    color: #999;
}

.btn .fbimg{
    width: 16px;
}
.or-text{
    font-size: 13px !important;
    color: #999;
    font-weight: 600;
}

.or-text::before{
    content: '';
    background: #efefef;
    display: block;
    height: 2px;
    width: 110px;
    position: relative;
    top: 11px;
    
}
.or-text::after{
    content: '';
    background: #efefef;
    display: block;
    height: 2px;
    width: 110px;
    position: relative;
    bottom: 10px;
    left: 160px;
}

.form-group{
    margin-bottom: 6px !important;
}

.form-control{
    background: #fafafa !important;
    border: 1px solid #efefef;
    font-size: 12px !important;
}

::placeholder{
    color: #999 !important;
}

.btn{
    margin: 12px auto;
    padding: 2px !important;
    font-weight: 600 !important;
}

.btn-primary{
    background-color: #3897f0;
    border: 1px solid #3897f0 !important;
}

.terms-text{
    line-height: 18px;
    font-size: 14px;
    color: #999;
    margin: 5px 20px;
}

.login-text{
    background: #fff;
    border: 1px solid #e6e6e6;
    width: 350px;
    margin: 20px;
}

.login-text a:hover{
    text-decoration: none;
} 

Output

How to Make Instagram Signup Page In HTML and CSS

You may also like:

  • How To Make a Quiz App With JavaScript
  • How To Make Slide Puzzle Game in HTML CSS and JavaScript
  • How To Make Space War Game Using HTML, CSS & JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: instagram, instagram signup page, signup page, UI Design, UX Design
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article How to Make Random Password Generator In JavaScript How to Make Random Password Generator In JavaScript
Next Article Calendar in HTML How to Make Dynamic Calendar in HTML & JavaScript
Leave a comment Leave a comment

Leave a Reply Cancel reply

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

- Advertisement -

You Might Also Like

Price Range Slider

How to Make Price Range Slider Using JavaScript

December 8, 2022
qr code generator in html

How to Make QR Code Generator in JavaScript

December 5, 2022
File Downlaoder Using JavaScript

How to Make File Downloader Using JavaScript

December 5, 2022
save text as File in HTML

How to Save Text as File in JavaScript

December 5, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?