<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- mobile showcase -->
<div class="space-medium">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="showcase-block">
<div class="display-logo ">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/nexus.png" alt=""></a>
</div>
<div class="showcase-img">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_1.png" alt=""></a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="showcase-block active">
<div class="display-logo alignleft">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/iphone.png" alt="">
</a>
</div>
<div class="showcase-img">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_2.png" alt="" style="padding-left: 80px;"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="showcase-block ">
<div class="display-logo ">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/samsung.png" alt="">
</a>
</div>
<div class="showcase-img">
<a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_3.png" alt=""> </a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="showcase-block">
<div class="display-logo ">
<a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/htc.png" alt=""></a>
</div>
<div class="showcase-img">
<a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_4.png" alt=""></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="showcase-block">
<div class="display-logo">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/alcatel.png" alt=""></a>
</div>
<div class="showcase-img">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_5.png" alt="">
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="showcase-block">
<div class="display-logo ">
<a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/pixel.png" alt=""></a>
</div>
<div class="showcase-img">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_6.png" alt=""></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="showcase-block">
<div class="display-logo ">
<a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/vivo.png" alt=""></a>
</div>
<div class="showcase-img">
<a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_7.png" alt=""></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
Created for <a href="https://goo.gl/mwiEhG" target="_blank">easetemplate</a>
</div></div>
</div>
</div>
<!-- /.mobile showcase -->
/*----------------------------------
1. Body / Typography
----------------------------------*/
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 0px; font-size: 16px; color: #848687; font-weight: 400; line-height: 30px; background-color: #f3f5f7; }
h1, h2, h3, h4, h5, h6 { color: #1c1e1e; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Roboto Condensed', sans-serif; }
h1 { font-size: 30px; line-height: 42px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 22px; line-height: 30px; }
h4 { font-size: 18px; line-height: 26px; }
h5 { font-size: 14px; font-weight: 400; }
h6 { font-size: 12px; font-weight: 400; }
p { margin: 0 0 24px; line-height: 1.8; }
p:last-child { margin: 0px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: #1c1e1e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #fb730f; }
.alignright { float: right; margin: 0px 0 20px 30px; }
.alignleft { float: left; margin: 0px 20px 0px 0; }
.showcase-block { margin-bottom: 30px; min-height: 300px; background-color: #e8eaec; padding: 30px 30px 0px 30px; text-align: center; }
.showcase-img { padding-top: 18px; }
.display-logo { margin-bottom: 30px; }
.showcase-block:hover { background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); }
.showcase-block.active { background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); }
