Animated Contact Us Page Using HTML And CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact-page">
<h2>Get in touch</h2>
<div class="contact-info">
<div class="item">
<i class="icon fas fa-home"></i>
New York, United States
</div>
<div class="item">
<i class="icon fas fa-phone"></i>
+0 000 0000000
</div>
<div class="item">
<i class="icon fas fa-envelope"></i>
email@address.com
</div>
<div class="item">
<i class="icon fas fa-clock"></i>
Mon - Fri 8:00 AM to 6:00 PM
</div>
</div>
<form action="" class="contact-form">
<input type="text" class="textb" placeholder="Your Name">
<input type="email" class="textb" placeholder="Your Email">
<textarea placeholder="Your Message"></textarea>
<input type="submit" class="btn" value='Send'>
</form>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans",sans-serif;
}
body{
min-height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 13s ease infinite;
background-size: 400% 400%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.contact-page{
width: 100%;
max-width: 1400px;
padding: 50px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
h2{
width: 100%;
margin-bottom: 80px;
text-transform: uppercase;
color: #000;
font-size: 60px;
}
.contact-info, .contact-form{
flex: 1;
}
.item{
margin-bottom: 24px;
font-size: 16px;
color: #000;
}
.icon{
width: 60px;
height: 60px;
line-height: 60px;
background-color: #3494db;
text-align: center;
color: #fff;
border-radius: 50%;
margin-right: 16px;
}
.contact-form{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.textb{
width: calc(50% - 10px);
height: 50px;
padding: 12px;
background-color: #222;
border: none;
color: #fff;
margin-bottom: 20px;
}
textarea{
width: 100%;
min-height: 200px;
max-height: 400px;
resize: vertical;
padding: 12px;
background-color: #222;
border: none;
color: #fff;
margin-bottom: 20px;
}
.btn{
width: 120px;
height: 40px;
margin-left: auto;
background-color: #3494db;
border: none;
color: #fff;
text-transform: uppercase;
cursor: pointer;
border: 2px solid #3494db;
transition: .3s linear;
}
.btn:hover{
background-color: transparent;
color: #3494db;
}
@media screen and (max-width: 980px){
.contact-page{
max-width: 800px;
}
h2{
font-size: 40px;
margin-bottom: 40px;
}
.contact-info, .contact-form{
flex: 100%;
margin-bottom: 30px;
}
.textb{
width: 100%;
}
}
Post a Comment