Amazing CSS with contact info section

Posted on October 23rd, 2019

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@domain.com</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;
  }
}