Responsive contact us page
In this post we discuss how to create responsive contact us page using html and css. Code is very easy to understand.
Firstly we create a two files one is index.html for structure of contact page and another is style.css for styling a contact us page.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<h2> Message Me</h2>
<div class="inputfield">
<input type="text"placeholder="Enter Name" name="name">
</div>
<div class="inputfield">
<input type="text"placeholder="Enter Email" name="email ">
</div>
<div class="inputfield">
<input type="text"placeholder="Enter Contact " name="phone ">
</div>
<div class="inputfield">
<input type="text"placeholder="Enter Message " name="message ">
</div>
<input type="submit" class="send" name="send" value="Send">
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
.main{
margin:20px 0 0 0;
text-align :center;
}
.inputfield{
height :45px;
padding :5px;
}
input[type=text]
{
padding :5px;
width :70%;
height :30px;
border :2px solid crimson;
}
.send{
background:crimson;
color:#fff;
padding :10px;
font-size :20px;
text-decoration :none;
margin-top :5px;
border:none;
border-radius :5px;
}
.send:hover{
background :transparent;
border :2px solid crimson ;
color : crimson ;
transition :0.7s;
}
Also learn - What is basic structure of html ?
comment 0 comments
more_vert