The Designer of this Form

T LUXSHAN

Creative Programmer

Real time example

Inspect the 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>Login form</title>
<style>
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
background-color:rgb(235, 176, 15);
padding: 0;
text-transform: uppercase;
margin: 0;
}

.card{
background-color: rgb(63, 49, 112);
width:90%;
max-width: 500px;position: relative;
margin:auto;
box-shadow: 0 0 20px 10px rgba(233,144,7,0.7);
}
.form{
background-color: white;
border-radius: 15px;
padding: 30px;
margin: 2%;
}
input[type = "password"],input[type = text]{
width:100%;
padding: 10px 1px;
}
input[type = "password"],input[type = text]{
padding: 10px 1px;
}
#forgetpsw {
text-align: center;
}
#forgetpsw a{
text-decoration: none;
}
input[type = "submit"]{
font-size:x-large;
width:100%;
padding: 10px;
background-color:rgb(33, 221, 0);
border:1px solid;
cursor: pointer;
}
.photo{
border-radius: 50%;
width: 70%;
height: 70%;
}
.internal{
box-shadow: 0 0 20px 10px rgba(121, 107, 87, 0.7);
}
</style>
</head>
<body>
<div class = "card">
<div class = "form">
<form method= "POST" action = "index.php">
<legend><center>
<div class="photo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0mrwyDjtnfqn3iPI0Ec2eOxTVy0-QEjk7uj9bx0sAhbWJP3nOePJ1hzv25IVu-DJ1Htbg3d9qSZR7_V0ktMAKNSer3MqgkQZ_hoZP-TttW4mTZBepggltAJMg44L7pFz6n73UTbnOqg/s320/tony.jpeg" alt="Avatar"  class="photo internal" > </div>
</center></legend>
<p id = "uname"> <label for="nme">username</label> <br>
<input type="text" name="nme" placeholder = "Enter your username" id="nme" required>
</p>
<p id = "pword"><label for="psw">password</label> <br>
<input type = "password" name = "psw" placeholder = "Enter your password" id="psw" required>    
</p>
<p id="forgetpsw">
<a href="">forget password?</a> 
</p>
<p id = "submit">
<input type = "submit" name = "sbt" value = "LOGIN">
</p>
</form>
</div>
</div>
</body>
</html>

Download this HTML Source Code

Kumar Lakshmanan

Login form by T LUXSHAN

The Designer of this Form

T LUXSHAN

Real time example

Inspect the HTML

Download this HTML Source Code

Post a Comment

1 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Login form by T LUXSHAN

The Designer of this Form

T LUXSHAN

Real time example

Inspect the HTML

Download this HTML Source Code

You may like these posts

Post a Comment

1 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget