hero blue box

by Himanshu Joshi

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:400,700"></script>
<script src="https://s27.postimg.org/ynkzm23pv/Capture.png"></script>
<script src="https://s27.postimg.org/3unohqzwz/linkedin.png"></script>
<script src="https://s27.postimg.org/bbwvwypg3/twitter.png"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="https://www.gartner.com/webfiles/1503072882451/ui/gml/style.css;wa98f632d4ec43464f"></script>
<div class="expert_bio_card">
  <h1> Christie Eubanks </h1>
  <h2> Research Director </h2>
  <div class="list-wrapper">
    <ul class="ki-list">
      <li>Marketing Data and Analytics</li>
      <li>Social Marketing</li>
    </ul>
  </div>
  <div class="follow row">
    <div class="item col-xs-1">
      <span class="big-font">FOLLOW </span>
    </div>
    <div class="item col-xs-1 expert-social text-center">
      <a href="https://twitter.com" class="bg-secondary text-quaternary" target="_blank"><span class="icon-twitter" aria-hidden="true"></span></a>
    </div>

    <div class="item col-xs-1 expert-social text-left col-xs-">
      <a href="https://www.linkedin.com" class="bg-secondary text-quaternary" target="_blank"><span class="icon-linkedin" aria-hidden="true"></span></a>
    </div>
  </div>
  <!--<div class="follow">
    <span class="big-font">FOLLOW </span>
    <a href="URL_TO_PROFILE" class="twitter_follow" title="Open Twitter profile">
      <img src="twitter.png" />
    </a>
    <a href="URL_TO_PROFILE" class="linked_in_follow" title="Open LinkedIn profile">
      <img src="../img/linkedin.png" />
    </a>
    <a href="URL_TO_VIDEO" class="youtube_video_link" title="Open Youtube vids">
      <img src="../img/youtube_ico_small.png" />
    </a>
  </div>-->

</div>

CSS

.expert_bio_card {
  width: 965px;
  height: 100%;
  background-image: linear-gradient(262deg, rgba(0, 165, 227, 0), rgba(0, 165, 227, 0.98));
  padding: 35px;
  font-family: 'Roboto', sans-serif;
}

.expert_bio_card h1 {
  font-size: 56px;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  padding: 10px 0 0 0;
  margin: 0;
}

.expert_bio_card h2 {
  font-size: 30px;
  font-weight: 500;
  text-align: left;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

.expert_bio_card .ki-list {
  list-style-type: none;
  padding: 10px 0 0 0;
  margin: 0;
}

.expert_bio_card .follow {
  padding: 20px 0 0 0;
  margin: 0;
}

.expert_bio_card .ki-list li {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.38;
  text-align: left;
  color: #ffffff;
}

.expert_bio_card .follow a {
  padding: 0 0 0 15px;
  text-align: center;
  display: inline-table;
  position: relative;
}

.expert_bio_card .follow a span {
  height: 100%;
  width: 100%;
}


/* .expert_bio_card .follow .big-font {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.38;
  text-align: left;
  color: #ffffff;
  font-weight: bold;
} */

.follow .big-font {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.38;
  text-align: left;
  color: #ffffff;
  font-weight: bold;
}

.follow .item {
  padding: 0;
}

.follow .item a {
  padding: 5px;
  border-radius: 3px;
}
.text-quaternary {
    color: #00a5e3;
}
.bg-secondary {
    background-color: #fff;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon-gml' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-twitter:before {
    content: "\ea96";
}

.icon-linkedin:before {
    content: "\eaca";
}