"FEATURES"
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="//code.jquery.com/jquery-1.11.1.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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> <!-- ======= Features Section ======= --> <section id="features" class="features"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Sectors We do Work</h2> </div> <div class="row" style="padding-top:50px" data-aos="fade-up" data-aos-delay="300"> <div class="col-lg-3 col-md-4"> <div class="icon-box"> <i class="ri-store-line" style="color: #ffbb2c;"></i> <h3><a href="">Lorem Ipsum</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4 mt-md-0"> <div class="icon-box"> <i class="ri-bar-chart-box-line" style="color: #5578ff;"></i> <h3><a href="">Dolor Sitema</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4 mt-md-0"> <div class="icon-box"> <i class="ri-calendar-todo-line" style="color: #e80368;"></i> <h3><a href="">Sed perspiciatis</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4 mt-lg-0"> <div class="icon-box"> <i class="fas fa-building" style="color: #e361ff;"></i> <h3><a href="">Manufacturing</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-database-2-line" style="color: #47aeff;"></i> <h3><a href="">Nemo Enim</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-gradienter-line" style="color: #ffa76e;"></i> <h3><a href="">Eiusmod Tempor</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-file-list-3-line" style="color: #11dbcf;"></i> <h3><a href="">Midela Teren</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-price-tag-2-line" style="color: #4233ff;"></i> <h3><a href="">Pira Neve</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-anchor-line" style="color: #b2904f;"></i> <h3><a href="">Dirada Pack</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-disc-line" style="color: #b20969;"></i> <h3><a href="">Moton Ideal</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-base-station-line" style="color: #ff5828;"></i> <h3><a href="">Verdo Park</a></h3> </div> </div> <div class="col-lg-3 col-md-4 mt-4"> <div class="icon-box"> <i class="ri-fingerprint-line" style="color: #29cc61;"></i> <h3><a href="">Flavor Nivelanda</a></h3> </div> </div> </div> </div> </section><!-- End Features Section -->
.section-title h2 { font-size: 32px; font-weight: bold; text-transform: uppercase; position: relative; color: #222222; } section { padding: 60px 0; overflow: hidden; } .section-title h2::before, .section-title h2::after { content: ''; width: 50px; height: 2px; background: #3498db; display: inline-block; } .section-title h2::before { margin: 0 15px 10px 0; } .section-title h2::before, .section-title h2::after { content: ''; width: 50px; height: 2px; background: #3498db; display: inline-block; } .section-title h2 { font-size: 32px; font-weight: bold; text-transform: uppercase; position: relative; color: #222222; } .section-title h2::after { margin: 0 0 10px 15px; } /*-------------------------------------------------------------- # Features --------------------------------------------------------------*/ .features .icon-box { display: flex; align-items: center; padding: 20px; background: #f6f6f6; transition: ease-in-out 0.3s; } .features .icon-box i { font-size: 32px; padding-right: 10px; line-height: 1; } .features .icon-box h3 { font-weight: 700; margin: 0; padding: 0; line-height: 1; font-size: 16px; } .features .icon-box h3 a { color: #222222; transition: ease-in-out 0.3s; } .features .icon-box h3 a:hover { color: #3498db; } .features .icon-box:hover { background: #eef7fc; }

Related: See More


Questions / Comments: