in this tutorial, I will show you how to make a contact us form in HTML and CSS
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<form>
<h1>Contact us</h1>
<label>Full Name: </label><br>
<input type="text"><br>
<label>Email: </label><br>
<input type="email"><br>
<label>Message: </label><br>
<textarea rows="8"></textarea><br>
<button>Write to Us</button>
</form>
</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'nunito',sans-serif;
}
body{
background-color: #e8eaf6;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 15px 20px;
background-color: #fafafa;
box-shadow: 0 6px 8px rgba(0,0,0,.1);
border-radius: 8px;
width: 300px;
}
.container h1{
margin-bottom: 12px;
color: #1e88e5;
text-transform: uppercase;
}
.container label{
color: #1e88e5;
}
.container input,textarea{
padding: 8px 10px;
width: calc(100% - 20px);
font-size: 16px;
margin: 12px 0;
resize: none;
}
.container button{
width: 100%;
padding: 10px 0;
background-color: #1e88e5;
border: none;
border-radius: 30px;
text-transform: uppercase;
color: #fafafa;
font-weight: bold;
transition: .4s;
}
button:hover{
background-color: #0d47a1;
}
Modern Contact Us Form in HTML and CSS
Reviewed by Medics
on
August 14, 2019
Rating:
Reviewed by Medics
on
August 14, 2019
Rating:
No comments: