SimpleTuts.com
Login Register

Creating a Services Section

Previous Next

Build a Three Column Services Section Using Flexbox

In this chapter, students learn how to create a Services section with three columns using internal CSS, Flexbox, and reusable classes. This chapter builds directly on Chapter 3.

Chapter Goal

What is a Services Section?

A Services section highlights what a company offers. It usually contains:

Step 1: Add CSS for Services Section

Add the following CSS inside the existing <style> tag, below the About section styles.


/* services section */
#services-box{
    padding:0px 50px;
    display:flex;
    gap:30px;
}

.service-box{
    width:33.33%;
}

img.service-image{
    width:100%;
}
Run Code

Step 2: Add Services Section Title


<div>
    <h1 class="sec-title">Our Services</h1>
</div>
Run Code

Step 3: Create Services Layout


<div id="services-box">

</div>
Run Code

Step 4: Add Service Boxes


<div class="service-box">
    <img src="service1.avif" class="service-image">
    <h2>Service 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

<div class="service-box">
    <img src="service2.webp" class="service-image">
    <h2>Service 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

<div class="service-box">
    <img src="service3.avif" class="service-image">
    <h2>Service 3</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
Run Code

Final Output Code

This is the complete webpage code up to Chapter 4.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            margin:0px;
        }

        /* hero section */
        #hero{
            background-color:dodgerblue;
            color:white;
            padding:50px;
        }

        h1.sec-title{
            text-align:center;
        }

        /* about section */
        #about-box{
            display:flex;
            padding:0px 50px;
            gap:30px;
        }
        #about-text-box{
            width:50%;
        }
        #about-image-box{
            width:50%;
        }
        img#about-image{
            width:100%;
        }

        /* services section */
        #services-box{
            padding:0px 50px;
            display:flex;
            gap:30px;
        }
        .service-box{
            width:33.33%;
        }
        img.service-image{
            width:100%;
        }
    </style>
</head>
<body>

    <div id="hero">
        <h1>Welcome to ABC Interiors</h1>
        <p>Let's create your perfect home</p>
    </div>

    <div>
        <h1 class="sec-title">About Us</h1>
    </div>

    <div id="about-box">
        <div id="about-text-box">
            <p>This program is free software; you can redistribute it 
            and/or modify it under the terms of the GNU General Public License.</p>
            <p>This program is free software; you can redistribute it 
            and/or modify it under the terms of the GNU General Public License.</p>
        </div>
        <div id="about-image-box">
            <img src="about-pic.webp" id="about-image">
        </div>
    </div>

    <div>
        <h1 class="sec-title">Our Services</h1>
    </div>

    <div id="services-box">
        <div class="service-box">
            <img src="service1.avif" class="service-image">
            <h2>Service 1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="service-box">
            <img src="service2.webp" class="service-image">
            <h2>Service 2</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="service-box">
            <img src="service3.avif" class="service-image">
            <h2>Service 3</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
    </div>

</body>
</html>
Run Code

Practice Task

  1. Add a fourth service
  2. Change service titles
  3. Adjust spacing using gap

Chapter Summary

Watch video

Previous Next