<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-12 text-center">
<div class="box-column">
<div class="box-header box-header-twitter">
<i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
</div>
<div class="box-bottom">
<div class="box-title twitter-title">
Twitter
</div>
<div class="box-text">
Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.
</div>
<a href="#" target="_blank">GO NOW</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 text-center">
<div class="box-column">
<div class="box-header box-header-instagram">
<i class="fa fa-instagram fa-3x" aria-hidden="true"></i>
</div>
<div class="box-bottom">
<div class="box-title instagram-title">
Instagram
</div>
<div class="box-text">
Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.
</div>
<a href="#" target="_blank">GO NOW</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 text-center">
<div class="box-column">
<div class="box-header box-header-facebook">
<i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
</div>
<div class="box-bottom">
<div class="box-title facebook-title">
Facebook
</div>
<div class="box-text">
Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.
</div>
<a href="#" target="_blank">GO NOW</a>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
body {
background-color: #eee;
font-family: 'Montserrat', sans-serif;
}
a:hover,
a:focus {
text-decoration:none;
}
.box-header {
background: #dedede;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 60px 0px;
}
.box-header .fa {
color: #FFF;
}
.box-header-instagram {
background: linear-gradient(45deg, #f2935b, #6f49c0);
}
.box-header-twitter {
background: linear-gradient(45deg, #cae1f3, #55aded);
}
.box-header-facebook {
background: linear-gradient(45deg, #95a2c1, #3b579d);
}
.box-bottom {
background: #FFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 30px 0px;
}
.box-text {
padding: 10px 0px;
}
instagram-title {
background: linear-gradient(45deg, #f2935b, #6f49c0);
font-size: 20px;
font-weight: 600;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.twitter-title {
background: linear-gradient(45deg, #cae1f3, #55aded);
font-size: 20px;
font-weight: 600;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.facebook-title {
color: #428bca;
font-size: 20px;
font-weight: 600;
}
