Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding an Industry Section to your Homepage

Adding an industries section to your homepage allows you to serve up the right content to the right visitor.

There's no better marketing than targeting content to the right audience. Adding an industries section to your homepage allows you to serve up the right content to the right visitor. You may an offering of products and services that have different uses for different industries and informing your website visitors of that is crucial.

In this article we provide code and instruct you on how to add a generic industries section to your homepage. We recommend placing it on your homepage as it is the most viewed page of your website. There's also a nice hover effect as site visitors hover over different industries and Font Awesome was used for the icons.

Below is the HTML, CSS, and JavaScript required a slide down menu. Customize it to fit your needs!

Step 1 - industry-section.html

Copy and paste the code below into your web page

<section class="paddingSection ct-u-sectionGrey text-center">
<div class="innerContainer">
<h2 class="ct-pageHeader text-center">
   Industries We Serve
</h2>
<p class="paddingBottom45">
   Business isn't one size fits all. Every industry requires a custom solution.<br>
   Learn more about how we've helped businesses in your industry by clicking below.
</p>
<div class="ct-tabs-outer js-tabs">
   <div class="row text-center">
      <div class="col-md-2 col-sm-2 col-xs-4">
         <div class="item v_associations" >
            <div class="inner">
               &nbsp;
               <i class="fa fa-train" aria-hidden="true"></i>
            </div>
            <h2>
               Infrastructure
            </h2>
         </div>
      </div>
      <div class="col-md-2 col-sm-2 col-xs-4">
         <div class="item v_education" >
            <div class="inner">
               &nbsp;
               <i class="fa fa-university" aria-hidden="true"></i>

            </div>
            <h2>
               Government
            </h2>
         </div>
      </div>
      <div class="col-md-2 col-sm-2 col-xs-4">
         <div class="item v_entertainment" >
            <div class="inner">
               &nbsp;
               <i class="fa fa-television" aria-hidden="true"></i>

            </div>
            <h2>
               Media
            </h2>
         </div>
      </div>
      <div class="col-md-2 col-sm-2 col-xs-4">
         <div class="item v_finance" >
            <div class="inner">
               &nbsp;
               <i class="fa fa-line-chart" aria-hidden="true"></i>

            </div>
            <h2>
               Finance
            </h2>
         </div>
      </div>
      <div class="col-md-2 col-sm-2 col-xs-4">
         <div class="item v_government" >
            <div class="inner">
               &nbsp;
              <i class="fa fa-heartbeat" aria-hidden="true"></i>
            </div>
            <h2>
               Healthcare
            </h2>
         </div>
      </div>
      <div class="col-md-2 col-sm-2 col-xs-4">
         <div class="item v_healthcare">
            <div class="inner">
               &nbsp;
               <i class="fa fa-car" aria-hidden="true"></i>

            </div>
            <h2>
               Automotive
            </h2>
         </div>
      </div>
   </div>
</div>

Step 2 - industry-section.css

Download the CSS below and include it in your web page

industry-section.css

Step 3 - Include the following resources on your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="industry-section.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

If you followed the above steps correctly, you should now have a fully-functioning industry section with CSS hover effects and Font Awesome Icons. Simply switch out the icons, industry names, colors, and make it your own!

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev