How To Create A Simple Sign Up Form On Image?

How To Create A Simple Sign Up Form On Image?
426 Views

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 anupdebnath.info. 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.

Apply HTML CODE

First Step: Make the basic structure at first.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

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

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

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

Apply CSS CODE

First Step: Add css code for the background.

body{
		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.

    h2{
		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.

   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..

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