<div id="container"> 
  <blockquote class="speech-bubble">
    <div class="box">
      <div class="marquee-one">
        <i class="fa fa-twitter fa-3x fa-fw"></i>
        <i class="fa fa-github fa-3x fa-fw"></i>
        <i class="fa fa-instagram fa-3x fa-fw"></i>
        <i class="fa fa-facebook fa-3x fa-fw"></i>
        <i class="fa fa-pinterest fa-3x fa-fw"></i>
        <i class="fa fa-google-plus fa-3x fa-fw"></i>
        <i class="fa fa-behance fa-3x fa-fw"></i>
      </div>
    </div>
  </blockquote>
</div>

<div id="footer">
  <p>
    Thanks to <a href="http://nicolasgallagher.com/" target="_blank">Nicolas Gallagher</a> for the speech bubble code ;)
  </p>
</div>

#container {
width: 400px;
padding: 0 0 50px;
margin: 0 auto;
}

.speech-bubble {
position: relative;
padding: 70px 0px;
margin: 1em auto 80px;
  background: -webkit-linear-gradient(left, #84c8c0, #6490c2); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right,  #84c8c0, #6490c2); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right,  #84c8c0, #6490c2); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right,  #84c8c0, #6490c2); /* Standard syntax */
text-align: center;
color: #fff;
-webkit-border-top-left-radius: 140px 140px;
-webkit-border-top-right-radius: 140px 140px;
-webkit-border-bottom-right-radius: 140px 140px;
-webkit-border-bottom-left-radius: 140px 140px;
-moz-border-radius: 140px / 140px;
border-radius: 140px / 140px;
}

.speech-bubble:before {
content: "";
position: absolute;
z-index: 10;
bottom: -40px;
right: 100px;
width: 50px;
height: 50px;
background: -webkit-linear-gradient(left, #84c8c0, #6490c2); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right,  #84c8c0, #6490c2); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right,  #84c8c0, #6490c2); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right,  #84c8c0, #6490c2); /* Standard syntax */
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
display: block;
}

.speech-bubble:after {
content: "";
position: absolute;
z-index: 10;
bottom: -60px;
right: 50px;
width: 25px;
height: 25px;
background: -webkit-linear-gradient(left, #84c8c0, #6490c2); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right,  #84c8c0, #6490c2); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right,  #84c8c0, #6490c2); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right,  #84c8c0, #6490c2); /* Standard syntax */
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
display: block;
}

.box {
    overflow: hidden;
}

.marquee-one {
  animation: marquee-one 5s linear infinite; 
  -webkit-animation: marquee-one 5s linear infinite;
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
}

@-webkit-keyframes marquee-one {
    0%   { text-indent: 18em }
    100% { text-indent: -50em }
}