<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <section id="Services" class="container"> <div class="col-md-12 section-title text-center"> <h2>Services</h2> <p>Est sale assum ut, in sed ludus convenire partiendo.</p> </div><!--col-md-12--> <div class="services-inner text-center"> <div class="col-sm-4 service"> <div class="service-content"> <h3><strong>Web Development</strong></h3> <p>Regione probatus conclusionemque vel ne, assum congue in eos. Elitr accusata nam ne, est an altera maiorum, purto nostrum verterem pri et. Odio numquam appareat mea an, ne nam dicat putant, his an mazim paulo aperiam.</p> </div> </div><!--col-sm-3--> <div class="col-sm-4 service"> <div class="service-content"> <h3><strong>Web Designing</strong></h3> <p>Regione probatus ne nam dicat putant, his an mazim paulo aperiam.</p> </div> </div><!--col-sm-3--> <div class="col-sm-4 service"> <div class="service-content"> <h3><strong>SEO</strong></h3> <p> Regione probatus conclusionemque vel ne, assum congue in eos. his an mazim paulo aperiam. </p> </div> </div><!--col-sm-3--> <div class="col-sm-4 service"> <div class="service-content"> <h3><strong>Branding</strong></h3> <p>Regione ne nam dicat putant, his an mazim paulo aperiam.</p> </div> </div><!--col-sm-3--> <div class="col-sm-4 service"> <div class="service-content"> <h3><strong>Social Media</strong></h3> <p>Odio numquam appareat mea an, ne nam dicat putant, his an mazim paulo aperiam.</p> </div> </div><!--col-sm-3--> <div class="col-sm-4 service"> <div class="service-content"> <h3><strong>eCommerce</strong></h3> <p>Regione probatus conclusionemque vel ne, assum congue in eos. Elitr accusata nam ne, est an altera maiorum, purto nostrum verterem pri et. </p> </div> </div><!--col-sm-3--> </div><!--services-inner--> </section>

body { background-color: #f0f0f0; color:#333; } section{ margin:50px 0; } .section-title{ background-color: #fff; margin-bottom: 50px; overflow: hidden; color:#ff4444; border-left: 5px solid #ff4444; } .services-inner{ overflow: hidden; clear: both; display: flex; flex-wrap: wrap; } .service{ padding: 20px 0; background-color: #333; border:1px solid #ff4444; } .service h3{ color:#ff4444; } .service:hover{ padding: 20px 0; background-color: #ff4444; } .service:hover h3{ color:#fff; } .service-content{ color: #fff; padding: 0 10px; } @media(max-width: 767px){ .services-inner{ display: block; } }