Here is an amazing css contact info section with only html and css from Darkcode. To see how it works, just click on the button Run Pen below:
Note: This project also uses Font Awesome for creating icons.
How to create an amazing CSS with contact info section
Step 1: Add Html
<div class="contact-info">
<div class="card">
<i class="card-icon far fa-envelope"></i>
<p>[email protected]</p>
</div>
<div class="card">
<i class="card-icon fas fa-phone"></i>
<p>+000000000000</p>
</div>
<div class="card">
<i class="card-icon fas fa-map-marker-alt"></i>
<p>New York, USA</p>
</div>
</div>Step 2: Add CSS
* {
margin: 0;
padding: 0;
font-family: 'montserrat', sans-serif;
box-sizing: border-box;
}
body {
background: #f1f1f1;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.contact-info {
display: flex;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.card {
background: #2f3542;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
cursor: pointer;
}
.card-icon {
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon {
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p {
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p {
max-height: 40px;
opacity: 1;
}
@media screen and (max-width: 800px) {
.contact-info {
flex-direction: column;
}
.card {
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}