"back"
Bootstrap 4.1.1 Snippet by saikrishna99666

<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="//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 ----------> <div class="more-information container-fluid"> <div class="more-layy"> <div class="container"> <div class="row"> <div class="col-md-9 mx-auto info-det"> <h2>Need More Information</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p> </div> <div class="info-row row no-margin"> <div class="col-md-4"> <div class="infright"> <div class="icon"> <i class="fal fa-clipboard-list"></i> </div> <div class="detail"> <h5>List your Ads Here</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <div class="col-md-4 "> <div class="infright"> <div class="icon"> <i class="fal fa-search-location"></i> </div> <div class="detail"> <h5>Search for Products</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> <div class="col-md-4 "> <div class="infright"> <div class="icon"> <i class="far fa-shopping-bag"></i> </div> <div class="detail"> <h5>Buy or Sell products</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> </div> </div> </div> </div> </div>
.more-information { background-image: url(https://www.smarteyeapps.com/demo/eye-classified/assets/images/new_bg.jpg); background-attachment: fixed; } .more-information .more-layy { background-color: rgba(40, 167, 69, 0.9); text-align: center; color: #FFF; padding: 50px; padding-top: 80px; padding-bottom: 80px; } .more-information .more-layy .info-det h2 { font-size: 2rem; font-weight: 700; margin-bottom: 20px; } .more-information .more-layy .info-det p { font-weight: 600; font-size: 1rem; } .more-information .more-layy .info-row { margin-top: 80px; } .no-margin { margin: 0px; } .more-information .more-layy .info-row .infright { display: flex; } .more-information .more-layy .info-row .infright .icon { padding: 20px; } .more-information .more-layy .info-row .infright .icon i { font-size: 47px; } .more-information .more-layy .info-row .infright .detail { text-align: left; }

Related: See More


Questions / Comments:

can you made this responsive for mobile devices?

happychristian () - 4 years ago - Reply 0