Pure HTML and CSS contact form with animation
- Last updated: Nov 3, 2023
- Views: 203
- Author: Admin
Hello colleagues.
Today we will learn how to create an animated contact form using pure html and css without using javascript code.
HTML Code:
<body>
<div class="contact-info">
<div class="card">
<i class="icon fas fa-envelope"></i>
<div class="card-content">
<h3>Email</h3>
<span>it-inzhener.com</span>
</div>
</div>
<div class="card">
<i class="icon fas fa-phone"></i>
<div class="card-content">
<h3>Phone</h3>
<span>+8888888888</span>
</div>
</div>
<div class="card">
<i class="icon fas fa-map-marker-alt"></i>
<div class="card-content">
<h3>Location</h3>
<span>Ukraine</span>
</div>
</div>
</div>
</body>
CSS Code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans",sans-serif;
}
body{
height: 100vh;
background-size: cover;
display: flex;
align-items: center;
background-color: #D1D5D8;
}
.contact-info{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card{
position: relative;
flex: 1;
max-width: 250px;
height: 150px;
background-color: #444;
margin: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.icon{
font-size: 30px;
color: #3498DB;
transition: .2s linear;
}
.card:hover .icon{
transform: scale(4);
opacity: 0;
}
.card-content h3,
.card-content span{
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
opacity: 0;
}
.card-content h3{
top: 22px;
text-transform: uppercase;
color: #3498DB;
}
.card-content span{
bottom: 20px;
color: #D1D5D8;
font-weight: 500;
}
.card:hover h3{
opacity: 1;
top: 45px;
transition: .3s linear .3s;
}
.card:hover span{
opacity: 1;
bottom: 45px;
transition: .2s linear .2s;
}
Thank you all, I hope my article was of some help to you.
