How To Design A Responsive Contact Form For Website In HTML And CSS.|
Copy The Html file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head>
<body>
<form action="">
<div class="all">
<div class="text">
<h1>Contact Us</h1>
</div>
<div class="input">
<input type="text" placeholder="Enter Your Name"><br>
<input type="email" placeholder="Enter Your E-mail"><br>
<input type="text" placeholder="Enter Your Subject"><br>
</div>
<div class="textarea">
<textarea name="" id="" cols="30" rows="10" placeholder="Enter Your Message..."></textarea>
</div>
<div class="button">
<a href="#">Send Message</a>
</div>
</div>
</form>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d198741.27545049458!2d-77.15466081348372!3d38.893512762965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C%20DC%2C%20USA!5e0!3m2!1sen!2snp!4v1596352923503!5m2!1sen!2snp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</body>
</html>
Copy the css file:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
form{
margin-top: 135px;
margin-left: 90px;
background-color: brown;
width: 580px;
}
input[type=text]{
margin: 16px;
height: 35px;
width: 550px;
}
input[type=email]{
margin: 16px;
height: 35px;
width: 550px;
}
.text{
margin-left: 190px;
color: white;
}
.textarea{
margin-top: 20px;
margin-left: 50px;
}
.button{
margin-top: 15px;
margin-left: 125px;
}
.button a{
text-decoration: none;
color: black;
font-size: 25px;
border: 1px solid black;
border-radius: 10px;
}
.button a:hover{
color: white;
background-color: black;
}
.map{
margin-left: 750px;
margin-top: -460px;
}
::selection{
color: red;
background-color: aqua;
}
Comments
Post a Comment