Design a Nice Featured Layout with HTML and CSS in 5 minutes

A featured news or featured articles section on a website typically showcases select articles or news pieces that are deemed important, noteworthy, or otherwise deserving of special attention. This section is often placed prominently on the homepage or at the top of a news or blog website.

You may also like : Design a Good Looking 3 Column Blog Detail Page

Features of Featured Section

Here are some common characteristics and purposes of a featured news section:

• Prominence: The featured news section is usually given a prominent position on the webpage to attract the attention of visitors. It might be placed at the top of the page or in a visually appealing location.
• Visual Emphasis: Articles in the featured section are often accompanied by large images or visually striking graphics to make them stand out.
• Highlighting Important Content: The articles or news pieces featured in this section are typically considered to be important, significant, or particularly interesting. They might cover breaking news, feature in-depth analysis, showcase exclusive content, or highlight recent events.
• Navigation and Interaction: Users may be able to navigate through featured articles using arrows or buttons, allowing them to browse through the selected content easily.
• Promotion: The featured news section serves as a promotional tool for the website, drawing attention to specific articles or news items that the site wants to showcase.
• Engagement: By featuring compelling content, the section aims to engage visitors and encourage them to explore further, driving traffic deeper into the website.

Follow this video for complete guidance :

Full Source Code

<style type="text/css">
  body{
    margin:0;
    padding: 0;
  }
  .featured .thumb{
    height: 100vh;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
  }
  .featured .thumb:before{
    content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      top: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
  }
  .featured a{
    color:#fff;
    text-decoration: none;
  }
  .featured .featured-inner{
    position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        color: #fff;
        z-index: 2;
  }
  .featured .featured-inner .featured-sub{
        max-width: 85%;
        margin: 0 auto;
  }
  .featured .featured-inner .featured-sub .featured-title{
        max-width:65%;
  }
  .featured-inner .featured-sub ul{
      display: flex;
      margin-right: -15px;
      margin-left: -15px;
      padding-top: 15px;
    	padding-left: 0;
    	border-top:1px solid rgba(255,255,255,.26);
  }
  
  .featured-inner .featured-sub ul li{
        list-style: none;
      width: 100%;
      padding-right: 20px;
      padding-left: 20px;
    }
    .featured-inner .featured-sub ul li:not(:first-child){
    	border-left:1px solid rgba(255,255,255,.26);
    }
    .featured-title h2{
    	font-size:40px;
    	line-height: 60px;
    }
    .featured-inner h5{
      font-size: 20px;
    	line-height: 30px;
    }
</style>

<div class="featured">
    <div class="featured-thumb">
        <div class="thumb" style="background-image: url(https://youthsforum.com/wp-content/uploads/2024/05/programming-scaled.jpeg);"></div>
    </div>
    <div class="featured-inner">
        <div class="featured-sub">
            <div class="featured-title">
                <h2>
                    <a href="">
                        Beyond Syntax: Understanding the Principles of Clean Code
                    </a>
                </h2>
            </div>
            <ul>
            	<li>
                	<div class="sub-news">
                        <h5>
                        	<a href="">
                        		Design a Professional Visiting Card using HTML and CSS
                        	</a>
                        </h5>
                    </div>
                </li>
                <li>
                	<div class="sub-news">
                        <h5>
                        	<a href="">
                        		Personality Check with Date of Birth using JavaScript
                        	</a>
                        </h5>
                    </div>
                </li>
                <li>
                	<div class="sub-news">
                        <h5>
                        	<a href="">
                        		Numerology: Understanding the Personalities Behind Numbers 1 to 9
                        	</a>
                        </h5>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>