How to Create Sign Up Page with Image Background

How to create Sign Up Page:

In general, Sign up means "to register, to create an account". A Signup page (also known as a registration page) enables users and organizations to independently register and gain access to your SmartSimple instance. It is common to have multiple signup pages depending on the types of people and organizations you want to register and the languages your community speaks.

Here i give some steps to Create Sign Up Page with Image Background,so follow steps by steps:

Due to face zoom causes in image i give already complete source code. Please check out below


HTML Part:


  •  Open your Editor and give <!DOCTYPE html>,<html> and <head> and <title> is also with name as you want.

(i.e. <!DOCTYPE html>
<html>
<head>
    <title>Sign Up Page</title>
</head>
</html>
)



  • After <head> tag give <body> tag and also give <div> tag with a class attribute between <body></body>tag.

(i.e.  <body>
    <div class="signup">
   <div>
   <body>)



  • Give a heading of your sign up page.

(i.e. <h1>Sign Up Here</h1>)





  • Now create your sign up form with submit button.

(i.e. <form>
        <input type="text" placeholder="First Name" required>
        <input type="text" placeholder="Last Name" required>
        <input type="phone" placeholder="Phone Number" required>
        <input type="email" placeholder="Email" required>
        <input type="Password" placeholder="Password" required>
        <input type="submit" value="Submit">
        </form>)
Here your sign form is created now come to the css part to style your form.




CSS Part:



  • First link your CSS file into HTML file.

(i.e. <link rel="stylesheet" type="text/css" href="signup.css">



  • First give a constant margin and padding and background image of your body of page.

(i.e. *{
    margin: 0;
    padding: 0;
}
body{
    background: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")no-repeat center center/cover;
}
)




  •  Now come to style your form with giving as signup class.

(i.e. .signup{
    width: 350px;
    margin: auto;
    box-sizing: border-box;
    margin-top: 100px;
    background: rgba(0,0,0,0.8);
    color:antiquewhite;
    padding: 40px;
})



  • Then style your form element with given attribute.

(i.e. input[type=text],input[type=phone],input[type=email],input[type=password]{
        width: 100%;
    box-sizing: border-box;
    padding: 12px 5px;
    background: rgba(0,0,0,0.10);
    outline: none;
    border: none;
    border-bottom: 1px dotted #fff;
    color: #fff;
    border-radius: 5px;
    margin: 5px;
    font-weight: bold;
})



  • Then you can also give a style of your submit button with hover also.

(i.e. input[type=submit]{
        width: 100%;
    box-sizing: border-box;
    padding: 12px 5px;
    background: skyblue;
    opacity: 0.7;
    outline: none;
    border: none;
    border-bottom: 1px dotted #fff;
    color: #fff;
    border-radius: 20px;
    margin: 5px;
    font-weight: bold;
}
input[type=submit]:hover{
    background: red;
    color: white;
}
)



Complete HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Page</title>
   
<link rel="stylesheet" type="text/css" href="signup.css">
   
    </head>
    <body>
    <div class="signup">
          <h1>Sign Up Here</h1>
        <form>
        <input type="text" placeholder="First Name" required>
        <input type="text" placeholder="Last Name" required>
        <input type="phone" placeholder="Phone Number" required>
        <input type="email" placeholder="Email" required>
        <input type="Password" placeholder="Password" required>
        <input type="submit" value="Submit">
        </form>
        </div>
    </body>
</html>




Complete CSS Code:

*{
    margin: 0;
    padding: 0;
}
body{
    background: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")no-repeat center center/cover;
}
.signup{
    width: 350px;
    margin: auto;
    box-sizing: border-box;
    margin-top: 100px;
    background: rgba(0,0,0,0.8);
    color:antiquewhite;
    padding: 40px;
}
input[type=text],input[type=phone],input[type=email],input[type=password]
{
        width: 100%;
    box-sizing: border-box;
    padding: 12px 5px;
    background: rgba(0,0,0,0.10);
    outline: none;
    border: none;
    border-bottom: 1px dotted #fff;
    color: #fff;
    border-radius: 5px;
    margin: 5px;
    font-weight: bold;
}
input[type=submit]{
        width: 100%;
    box-sizing: border-box;
    padding: 12px 5px;
    background: skyblue;
    opacity: 0.7;
    outline: none;
    border: none;
    border-bottom: 1px dotted #fff;
    color: #fff;
    border-radius: 20px;
    margin: 5px;
    font-weight: bold;
}
input[type=submit]:hover{
    background: red;
    color: white;
}




Your Final Result:









Please share to others:

Post a Comment

0 Comments