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

How to Create a Featured Section for Your Website

When people visit your website, you need to be able to make a good impression quickly and display your best work in a prominent place. Capture the attention of your visitors with a well-designed featured section and encourage them to check out the rest of your work.

Whether you want to display your best portfolio piece or your featured blog post, creating a well-designed featured section will draw the attention of your visitors and make your content stand out. In this tutorial, we'll show you how to create a visually compelling featured section using custom free Google fonts and Bootstrap.

Getting Started

The links below include Bootstrap files and custom Google fonts. Copy and paste them in your project's HTML file:

Note: If you wish to use other Google fonts, you can visit this link, pick the font you like and include it as a stylesheet link.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Lobster&display=swap" rel="stylesheet">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

The HTML code below is made using the Bootstrap grid and has two parts: the image container and the text. The image container is a div container inside a .col-md-7 and the text container is inside a .col-md-5 column. If you'd like to make your image smaller and text larger, you can change these column sizes. There is an h2 heading divided into two tags: small and span. With these tags, we can have one main h2 title but we can adjust the style of each word in our heading. The small tag will have a smaller font size and different font and color while the word inside the span tag will be bigger. These minor customizations can create different interesting and different typography.

Underneath that, we have an h3 tag that we use for tags for the project. We also put two buttons under the text, one button to see the featured project. Inside the a tag, the link address leads to that specific project but we also provided a button to see all projects so that your visitors can go to the main page where they can see all your works.

<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Lobster&display=swap" rel="stylesheet">

<section class="ct-u-paddingBoth80 marginTopNone-mobile paddingTopNone-mobile">
  <div class="container">
    <div class="featured-section-container text-center-md text-center-sm text-center-xs">
      <div class="row ct-u-paddingBoth20">
        <div class="col-md-7">
          <div class="imgContainer">
          </div>
        </div>
        <div class="col-md-5 ct-u-paddingTop20">
          <div class="inline-block text-left text">
            <h2 class="ct-section_header ct-section_header--type2">
              <small>Featured</small>
              <span>Project</span></h2>
            <h3 class="bebas ct-u-size40 tags">Illustration, Spaceship, gray tones</h3>
            <span class="ct-u-size19 ct-u-fw700 created-by">Created by LunarXP.</span>

            <div class="ct-u-size17 inline-block text-left">

            </div>
            <div class="clearfix"></div>
            <a aria-label="" href="" class="btn btn-red ct-u-marginTop60">See the Project</a>
            <a href="#" class="btn btn-blkborder ct-u-marginTop60 see-all-projects">See All Projects</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

CSS

This is the most important part. With CSS, we determine the necessary kind of styling: color, font family, font size and the line heights along with proper spacing of the words. We also need to adjust the spacing of the columns for different screen widths. Copy and paste the CSS code below and feel free to change the colors and the font families to match them with your branding style:

h2 {
    font-size: 30px;
  }
  
  h1,
  h2,
  h3 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-weight: 500;
    line-height: 1.1;
  }
  
  section {
    background-color: #F5F5F5;
    font-family: 'Bebas Neue', cursive;
  }
  
  section.ct-u-paddingBoth80 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  
  .ct-u-paddingTop20 {
    padding-top: 20px;
  }
  
  .ct-u-size40 {
    font-size: 40px;
  }
  
  .ct-section_header--type2 small {
    color: rgb(117, 121, 27);
    font-family: 'Lobster', cursive;
    font-size: 58px;
    line-height: .7;
    display: block;
    font-weight: 700;
    position: relative;
    padding-bottom: 7px;
  }
  
  .ct-section_header--type2 span {
    font-family: 'Bebas Neue';
    font-size: 115px;
    line-height: 0.8;
  }
  
  .tags {
    color: rgb(178, 16, 28);
    line-height: 0.8;
  }
  
  .btn.btn-red:hover {
    background-color: #ae1b21;
  }
  
  .imgContainer {
    background: url('https://raw.githubusercontent.com/solodev/featured-section/master/images/featured-image.jpg') 50% 50% no-repeat #fff;
    background-size: 80%;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .btn.btn-red {
    color: #fff;
    background-color: #CF2026;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }
  
  .created-by {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  .ct-u-marginTop60 {
    margin-top: 60px;
  }
  
  .btn {
    border-radius: 0;
    text-transform: uppercase;
    color: #111;
    font-size: 26px;
    padding: 12px 30px;
  }
  
  .btn.focus,
  .btn:focus,
  .btn:hover {
    text-decoration: underline;
  }
  
  .btn.see-all-projects {
    margin-left: 12px;
    border: 3px solid #000;
    padding: 9px 20px;
  }
  
  .btn.see-all-projects:hover {
    background-color: #000;
    color: #fff;
  }
  
  @media (min-width: 768px) {
    .col-md-7 {
        -ms-flex: 0 0 55.5%;
        flex: 0 0 55.5%;
    }

    .imgContainer {
      border: 14px solid #Fafafa;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
      height: 500px;
      width: 500px;
    }
  }
  
  .text {
    max-width: 400px;
  }
  
  @media (max-width: 768px) {
    .imgContainer {
      border: 14px solid #Fafafa;
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
      height: 300px;
      width: 300px;
      margin: 0 auto 40px;
    }
  
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
  
    .col-md-7,
    .col-md-5 {
      display: block;
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
  
  @media (max-width: 991px) {
    .imgContainer {
      width: 350px;
      height: 350px;
    }
  
    .imgContainer,
    .text {
      margin: 0 auto;
    }
  }

  @media (max-width: 1200px) {
    .btn {
      font-size: 20px;
    }
  }

And there it is. Check out the JSFiddle below to see how the featured section works before committing to its use:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
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