"What we do sections using bootstrap 4"
Bootstrap 4.0.0 Snippet by abhijeetka

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <!-- how we do section --> <section id="how-we-do" class="p-0"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 how-bg-img"></div> <div class="col-xs-12 col-sm-12 col-md-6 how-contents"> <h4 class="section-title mb-2 h1">What we do</h4> <p class="mb-4">Having and managing a correct marketing strategy is crucial in a fast moving market.</p> <ul class="list-unstyled"> <li>Some quick example text to build on the card title and make up the bulk of the card's content.</li> <li>Some quick example text to build on the card title and make up the bulk of the card's content.</li> <li>Some quick example text to build on the card title and make up the bulk of the card's content.</li> <li>Some quick example text to build on the card title and make up the bulk of the card's content.</li> <li>Some quick example text to build on the card title and make up the bulk of the card's content.</li> <li>Some quick example text to build on the card title and make up the bulk of the card's content.</li> </ul> </div> </div> </div> </section> <!-- ./how we do section -->
/* FontAwesome for working BootSnippet :> */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); #how-we-do{ color:#ffffff; } #how-we-do h4{ text-align:left !important; } #how-we-do .how-bg-img{ background-image: url("https://www.arketipomagazine.it/wp-content/uploads/sites/20/2017/11/Nakaaoki_03.jpg"); background-size: cover; background-repeat: no-repeat; padding: 300px 0; filter:grayscale(100%); } #how-we-do:hover .how-bg-img{ -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; filter:grayscale(1%); } #how-we-do .how-contents{ padding:60px 30px; background:#007b5e; } #how-we-do .how-contents ul{ } #how-we-do .how-contents ul li{ padding-left: 50px; position: relative; margin-bottom:26px; } #how-we-do .how-contents ul li:before{ font-family: FontAwesome; content: "\f209"; position: absolute; font-size: 39px; color: #ffffff; left: 0; }

Related: See More


Questions / Comments: