How To Create A Simple Sign Up Form On Image?

How To Create A Simple Sign Up Form On Image?

How To Create A Simple Sign Up Form On Image?

Do you know the importance of a sign up form? Without completing sign up process you can not use all facilities of a website if it has sign in option.

Hi guys, welcome back to In this article I am going to discuss about how you can make a simple sign up form on image using html and css.

Check the preview before going to start your coding.

How To Create A Simple Sign Up Form On   Image?

Let’s start coding.


First Step: Make the basic structure at first.

<!DOCTYPE html>


Second Step: Save the file as html format and write code for sign up form.

			Create A Sign Up Form On Image
<!-- log in form -->
    <label>First Name</label>
    <input type="text" name="Fname">
    <label>Last Name</label>
    <input type="text" name="Lname">
    <input type="email" name="email">
    <input type="password" name="password">
    <label>Confirm Password:</label>
    <input type="password" name="cpassword">

You have created the basic sign up form. Now, apply css code and see the magic


First Step: Add css code for the background.

		background-image: linear-gradient(#00000095,#00000055),linear-gradient(#00000055,#00000095), url(images/coffee-569178_960_720.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;

Second Step: Add css code for h2 tag.

		letter-spacing: 15px;
		top: 0;
		left: 0;
		padding-top: 15px;
		padding-bottom: 25px;
		color: #fff;
		border-bottom: 1px solid pink;

Third Step: apply css code for form.

	    padding: 25px;
	    width: 580px;
	    background-color: #dddddd20;
	    left: 26%;
	    top: 20%;
	    font-size: 18px;
	    display: inline-block;
	    box-shadow: 0px 20px 30px rgba(0,0,0,0.2);
	    position: absolute;
	    border-top: 1px solid black;
	    border-bottom: 10px solid green;
	    border-top: 10px solid red;
	    color: #fff;
	    border-bottom-left-radius: 33%;
	    border-top-right-radius: 15%;

Fourth Step: Add css code for input elements.

input[type=text], input[type=password], input[type="email"] {
	    width: 100%;
	    padding: 15px;
	    margin: 5px 10px;
	    display: inline-block;
	    border: 1px solid #ccc;
	    box-sizing: border-box;

Fifth Step: Add css code for button..

	      text-align: center;
	      padding: 15px;
	      cursor: pointer;
	      font-size: 17px;
	      border:1px solid green;
	      width: 120px;
	      font-family: georgia;

You have added everything on your file. Save the file and run it on your browser.

Now see the beauty.

Related posts for you

Share Your Opinion With Me