Expertise section

In this example below you will see how to do a Expertise section with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by piyush0966, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright piyush0966 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Expertise section</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Great+Vibes'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <!--Projects section v.4-->
  <section class="text-center pb-3">
        
    
    
    <!--Grid row-->
    <div class="row">
    
        <!--Grid column-->
        <div class="col-md-12 mb-4">
            <div class="  custom-benefit-div" >
                <div class="text-white text-center  align-items-center rgba-black-strong py-5 px-4 rounded">
                    <div>
                        <h3 class="py-3 font-weight-bold custom-expert-heading" >
                          <span> Benefits </span>
                          <br>
                          <span> of travel expertise</span>
                        </h3>
                        <p class="pb-3 custom-expert-subheading">Travel experts bring you first-hand knowledge for the most unique travel experiences.
                        </p>
                    </div>
                  <!--Grid row-->
    <div class="row">

    <!--Grid column-->
    <div class="col-md-3">
        <i class="fa fa-area-chart fa-3x red-text"></i>
        <h5 class="font-weight-bold mt-3">Personal Service</h5>
        <p class="white-text">They understand your travel needs and brings you unique value-added inclusions.
        </p>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-3">
        <i class="fa fa-book fa-3x cyan-text"></i>
        <h5 class="font-weight-bold mt-3">Best Value</h5>
        <p class="white-text">Guarantee on thousands of cruise vacations with the world's best cruise lines.
        </p>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-3">
        <i class="fa fa-comments-o fa-3x orange-text"></i>
        <h5 class="font-weight-bold mt-3">Hotel Amenities</h5>
        <p class="white-text">At thousands of the world's highest-rated hotels.
        </p>
    </div>
    <!--Grid column-->
      
      <!--Grid column-->
    <div class="col-md-3">
        <i class="fa fa-area-chart fa-3x red-text"></i>
        <h5 class="font-weight-bold mt-3">Exclusive Privileges</h5>
        <p class="white-text">Like private shore excursions with your own car and driver.
        hic.
        </p>
    </div>
    <!--Grid column-->

    </div>
    <!--Grid row-->

                </div>
            </div>
        </div>
        <!--Grid column-->
    </div>
    <!--Grid row-->
    
</section>
<!--Projects section v.4-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/piyush0966/expertise-section-zRQLdQ */
.custom-benefit-div {
  background:url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg) no-repeat;
  background-size:cover;
}

.custom-expert-heading span:nth-child(1) {
  font-size:60px;
  letter-spacing:2px;
  font-family:'Great Vibes', cursive;
}
.custom-expert-subheading {
  font-style:italic;
}

Comments