How to create responsive form in css
How to create responsive form in css
In this post we are going to show you how to create a responsive
form with html and css. It is very easy to create and designing of
responsive Form like this.
In this form we have created two input field whcih is beautifully designed with css button and a link.
It is very responsive and is very easy for everyone to create form like that.
Here is the code .
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.flow-text
{
font-weight :200;
font-size :20px;
color:#222;
background :rgba(140,20,20,0.1) ;
padding:5px;
border-radius :3px ;
}
p
{
font-weight :250;
font-size :16px;
}
.input
{
width:auto;
height: auto;
padding-top: 7px;
padding-bottom: 7px;
border:1px solid #ddd;
outline: 0;
border:1px solid #ddd;
transition:.5s;
border-radius: 3px;
}
.input:hover
{
box-shadow: 0 4px 4px 2px #1c4166;
}
.full
{
width: 100%;
}
.link
{
background-color:none;
text-decoration:none;
font-weight:normal;
color:#1e90ff;
font-weight :16px;
font-weight :250;
}
.btn{
width:100px;
height: 40px;
padding:5px 5px 5px 5px;
border-radius: 3px;
border:0;
color:#fff;
}
.blue
{
background:#1c4166;
color:#fff;
}
</style>
</head>
<body>
<p class="flow-text">Login Form</p>
<p>Email </p>
<input class="input full" placeholder="Enter your Email">
<p>Password </p>
<input class="input full" placeholder="Enter your Password "><br><br>
<button class="btn blue ">Log In</button><a style="float:right;"href="#" class="link">
Forgot password</a>
</body>
</html>
Comments
Post a Comment