MWgowJx

index.html

<div class="footer-social-icons">
  <div class="footer-title"><span>CONNECT WITH ME</span></div>
  <ul class="social-icons">
    <li><a href="mailto:[email protected]" class="social-icon"><i class="fa fa-envelope smooth-transition"></i></a></li>
    <li><a target="blank" href="https://www.instagram.com/aindrilla_" class="social-icon"> <i class="fa fa-instagram smooth-transition"></i></a></li>
    <li><a target="blank" href="https://twitter.com/aindrilla_" class="social-icon"> <i class="fa fa-twitter smooth-transition"></i></a></li>
    <li><a target="blank" href="https://www.linkedin.com/in/aindrilla" class="social-icon"> <i class="fa fa-linkedin smooth-transition"></i></a></li>
  </ul>
</div>

mwgowjx.markdown

MWgowJx

A Pen by Soham Mondal on CodePen.

License.

style.css

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
.footer-social-icons{
  display:flex;
  justify-content:left;
}
.footer-title{
font-family: Oswald;
font-size: 38px;
line-height: 1.42;
font-weight: 400;
color: rgba(31,31,31,1);
text-transform: uppercase;
 margin-right:10px;
}
.fa {
  font-size: 2.5em;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 1.35;
}
.social-icons {
  list-style: none;
  display:contents;
}
.social-icons li {
  vertical-align: top;
  display: inline;
}
.social-icon {
  color: black;
  padding: 0px 5px;
}
.smooth-transition {
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.fa-envelope:hover {
  color: #d14836;
}

.fa-instagram:hover {
  color: #e4405f;
}

.fa-twitter:hover {
  color: #00aced;
}
.fa-linkedin:hover {
  color: #0077b5;
}