How To Create A Log In Form On Image?

HOW TO CREATE A LOG IN FORM ON IMAGE ?
187 Views

Hi guys. What’s going on? I have passed a great day.

However, in my previous article i have discussed about how you can add a background image. Why am i talking about this?

It is because today I am going to show you a great tip. In this article you will learn how to make a log in form on image. Before starting my coding let’s see the preview of this. 🙂

Wow!!!!!!!!!!!!!!!!!!!! This is really cool. Am i right?

Let’s start coding.

Apply HTML Code

First Step:: You need to create the basic structure of HTML. Let’s create this.

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

</body>
</html>

Second Step:: Add your form now.

<section>
        <center>
		<h2>
			Create A Log In Form On Image
		</h2>
	</center>
</section>
	
<!-- log in form -->
<form>
    <label>Username:</label>
    <input type="text" name="name">
    <label>Password:</label>
    <input type="password" name="password">
    <center>
      <br>
      <button>Login</button>
    </center>
 </form>

We are all set. Time to add css codes.

Apply Css Code

First Step:: Add css code for background image of our page. Check this-

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;
}

Let’s check how it is looking.

Second Step:: Hae. We have added background image. Now apply css code for form.


	form{
	      padding: 25px;
	      width: 550px;
	      background-color: #dddddd20;
	      left: 27%;
	      top: 25%;
	      font-size: 20px;
	      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 pink;
	      color: #fff;
	      border-bottom-left-radius: 33%;
	      border-top-right-radius: 15%;
	     
	    }

Third Step:: Add css code for input items.

input[type=text], input[type=password] {
	      width: 100%;
	      padding: 15px;
	      margin: 8px 0;
	      display: inline-block;
	      border: 1px solid #ccc;
	      box-sizing: border-box;
	    }
	    button{
	      text-align: center;
	      padding: 15px;
	      cursor: pointer;
	      font-size: 17px;
	      border:1px solid green;
	      width: 120px;
	      font-family: georgia;
	    }

Add this? We are finished. Time to check our output.

See this?

Is not it good? Try yourself. <3

Related posts for you

Share Your Opinion With Me