Services Section HTML CSS #3

August 31, 2026

This services section HTML CSS tutorial shows you how to build a two-column layout with a large display heading, a side image, and a list of service items that highlight on hover. Each item has a subtle background color transition and a diagonal arrow animation on hover, so the whole section feels polished and interactive without relying on JavaScript.

Final output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

responsive services section html css
01

Brand Strategy & Identity

Naming, brand voice, the connective tissue that makes companies recognizable across every touchpoint, from pitch deck to packaging.
02

Digital Product Design

Zero-to-one product thinking through to flow refinement. Interfaces that convert because they actually make sense to the people using them.

03

Web Engineering

Production-grade frontend and full-stack. We write code that ships, scales, and won’t embarrass you six months into production.

04

Motion & Creative Direction

Animation that earns its frame time, micro-interactions, campaign films, and product demos that communicate without a single word.
All Services

Steps for Services Section HTML CSS:

1. First, link the Jost and Gloock fonts from Google Fonts in the head.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gloock&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Let’s start with a section element with the class services-section. Inside it, add a .services-content-wrapper div with a .services-header and a .services-content div.

<section class="services-section">
    <div class="services-content-wrapper">
        <div class="services-header"></div>
        <div class="services-content"></div>
    </div>
</section>

Then reset margins, set Jost as the font family, and define a CSS variable for the dark text color so you can reuse it throughout. Give the section a very faint purple-tinted background and a warm muted text color. Use clamp() on the padding so it scales with the screen size rather than jumping between fixed values.

* {
    margin: 0;
    box-sizing: border-box;
}
:root {
    --text-dark: hsl(26, 14%, 10%);
}
body {
    font-family: "Jost", sans-serif;
}
.services-section {
    padding: clamp(3rem, 1.24rem + 7.5vw, 8rem) clamp(1.5rem, 5%, 3rem);
    background-color: hsla(252, 100%, 81%, 0.05);
    color: hsl(32, 10%, 49%);
}
.services-section .services-content-wrapper {
    max-width: 75rem;
    margin-inline: auto;
}

2. Fill in .services-header with a div containing the label and heading, and a description paragraph next to it.

<div class="services-header">
    <div>
        <span>What we offer</span>
        <h2>Services</h2>
    </div>
    <p>We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.</p>
</div>

Use a two-column grid on .services-header so the heading and description sit side by side. Set the align self property to end on the paragraph so it aligns to the bottom of the heading column rather than the top. On mobile, collapse to a single column so they stack vertically.

.services-section .services-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
    .services-section .services-header {
        grid-template-columns: 1fr;
    }
}

Output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

3. Style the label with a small uppercase font and wide letter spacing so it reads as a category tag above the heading. Then style the heading with the Gloock serif font and use clamp() on both the font size and letter spacing so they scale smoothly. Set the line height property to 0.9 to make the large display text feel tight and impactful.

.services-section .services-header span {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 2.75px;
    text-transform: uppercase;
}
.services-section .services-header h2 {
    margin-top: 1.5rem;
    font-family: "Gloock", serif;
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: clamp(-2.5px, -0.06em, -3.14px);
    color: var(--text-dark);
}

Style the description with a light font weight and a comfortable line height. On desktop, set the margin inline property to auto so it centers within its column.

.services-section .services-header p {
    align-self: end;
    max-width: 26rem;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
}
@media screen and (min-width: 769px) {
    .services-section .services-header p {
        margin-inline: auto;
    }
}

Output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

4. Fill in .services-content with an .img-wrapper div containing the services image, and a .services-item-wrapper div that will hold the service items.

<div class="services-content">
    <div class="img-wrapper">
        <img src="services.jpg" alt="">
    </div>
    <div class="services-item-wrapper"></div>
</div>

Use a two-column grid on .services-content so the image and services list sit side by side. On mobile, collapse to a single column and hide the image since it takes up too much vertical space when stacked.

.services-section .services-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
}
@media screen and (max-width: 768px) {
    .services-section .services-content {
        grid-template-columns: 1fr;
    }
}
.services-section .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media screen and (max-width: 768px) {
    .services-section .img-wrapper {
        display: none;
    }
}

Output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

our services section html css

5. Fill in .services-item-wrapper with the four service items and an “All Services” link at the bottom. Each .services-item contains an anchor tag with a content div on the left and a .link-icon div on the right.

<div class="services-item-wrapper">
    <div class="services-item">
        <a href="#">
            <div>
                <div>
                    <span>01</span>
                    <h3>Brand Strategy & Identity</h3>
                </div>
                <p>Naming, brand voice, the connective tissue that makes companies recognizable across every touchpoint.</p>
            </div>
            <div class="link-icon">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.66602 4.66602H11.3327V11.3327" stroke="#8A7F72" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M4.66602 11.3327L11.3327 4.66602" stroke="#8A7F72" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
        </a>
    </div>
    <!-- add more items -->
    <a class="all-services" href="#">All Services
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.5 3.5H8.5V8.5" stroke="#1C1815" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3.5 8.5L8.5 3.5" stroke="#1C1815" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </a>
</div>

Output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

our services section html css
01

Brand Strategy & Identity

Naming, brand voice, the connective tissue that makes companies recognizable across every touchpoint, from pitch deck to packaging.
02

Digital Product Design

Zero-to-one product thinking through to flow refinement. Interfaces that convert because they actually make sense to the people using them.

03

Web Engineering

Production-grade frontend and full-stack. We write code that ships, scales, and won’t embarrass you six months into production.

04

Motion & Creative Direction

Animation that earns its frame time, micro-interactions, campaign films, and product demos that communicate without a single word.
All Services

6. Style each .services-item. Add a top border on every item and a bottom border on the last one so all the items sit between clean horizontal dividers.

Style the anchor tag inside with flexbox and the justify content property set to space-between so the content and the arrow icon sit at opposite ends. Add a background color transition on hover so the row highlights subtly when the user hovers over it.

.services-section .services-item:last-of-type {
    border-bottom: 1px solid hsla(26, 14%, 10%, 0.12);
}
.services-section .services-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2.75rem clamp(1.5rem, 5vw, 3rem);
    border-top: 1px solid hsla(26, 14%, 10%, 0.12);
    transition: background-color .3s;
}
@media screen and (max-width: 768px) {
    .services-section .services-item a {
        padding-inline: 0;
    }
}
.services-section .services-item a:hover {
    background-color: hsla(252, 100%, 81%, 0.1);
}

Output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

our services section html css
01

Brand Strategy & Identity

Naming, brand voice, the connective tissue that makes companies recognizable across every touchpoint, from pitch deck to packaging.
02

Digital Product Design

Zero-to-one product thinking through to flow refinement. Interfaces that convert because they actually make sense to the people using them.

03

Web Engineering

Production-grade frontend and full-stack. We write code that ships, scales, and won’t embarrass you six months into production.

04

Motion & Creative Direction

Animation that earns its frame time, micro-interactions, campaign films, and product demos that communicate without a single word.
All Services

7. Now style the number and heading row inside each item. Use flexbox with the align-items property set to center and a gap to keep the number and heading on the same line. Style the heading with uppercase text and a wide letter spacing so it reads as a label rather than a body heading.

On hover, move the link icon diagonally up and to the right using a translate transform to hint that the item is a clickable link.

.services-section .services-item a > div div {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.services-section .services-item a > div div span {
    font-weight: 500;
    font-size: .675rem;
    line-height: 1.5;
    letter-spacing: 2px;
}
.services-section .services-item a > div div h3 {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--text-dark);
}
.services-section .services-item a p {
    margin-left: 2.5rem;
    margin-top: .875rem;
    font-weight: 300;
    font-size: .875rem;
    line-height: 1.5;
}
.services-section .link-icon {
    width: 1rem;
    height: 1rem;
    transition: transform .3s;
}
.services-section .services-item a:hover .link-icon {
    transform: translate(.5rem, -.5rem);
}

Finally, style the .all-services link. Set the justify self property to end so it sits at the right edge of the wrapper. Use flexbox with the align-items property set to center to keep the text and arrow icon on the same line. Add an opacity transition on hover so it feels interactive without being too loud.

.services-section .all-services {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 1.98px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-self: end;
    padding: 2.75rem 3rem 1rem;
    transition: opacity .3s;
}
.services-section .all-services:hover {
    opacity: .6;
}

Output:

What we offer

Services

We identify the precise disciplines each project demands, then bring the right people to execute them with rigour and intent.

our services section html css
01

Brand Strategy & Identity

Naming, brand voice, the connective tissue that makes companies recognizable across every touchpoint, from pitch deck to packaging.
02

Digital Product Design

Zero-to-one product thinking through to flow refinement. Interfaces that convert because they actually make sense to the people using them.

03

Web Engineering

Production-grade frontend and full-stack. We write code that ships, scales, and won’t embarrass you six months into production.

04

Motion & Creative Direction

Animation that earns its frame time, micro-interactions, campaign films, and product demos that communicate without a single word.
All Services

Final Output Code for Our Services Section HTML CSS #3:

Head

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gloock&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

HTML

<section class="services-section">
    <div class="services-content-wrapper">
        <div class="services-header">
            <div>
                <span>What we offer</span>
                <h2>Services</h2>
            </div>
            <p>We identify the precise disciplines each project demands, then
                bring the right people to execute them with rigour and intent.</p>
        </div>
        <div class="services-content">
            <div class="img-wrapper">
                <img src="services.jpg" alt="">
            </div>
            <div class="services-item-wrapper">
                <div class="services-item">
                    <a href="#">
                        <div>
                            <div>
                                <span>01</span>
                                <h3>Brand Strategy & Identity</h3>
                            </div>
                            <p>Naming, brand voice, the connective tissue that makes companies
                                recognizable across every touchpoint, from pitch deck to packaging.</p>
                        </div>
                        <div class="link-icon">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.66602 4.66602H11.3327V11.3327" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4.66602 11.3327L11.3327 4.66602" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="services-item">
                    <a href="#">
                        <div>
                            <div>
                                <span>02</span>
                                <h3>Digital Product Design</h3>
                            </div>
                            <p>Zero-to-one product thinking through to flow refinement. Interfaces that convert
                                because
                                they actually make sense to the people using them.
                            </p>
                        </div>

                        <div class="link-icon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.66602 4.66602H11.3327V11.3327" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4.66602 11.3327L11.3327 4.66602" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="services-item">
                    <a href="#">
                        <div>
                            <div>
                                <span>03</span>
                                <h3>Web Engineering</h3>
                            </div>
                            <p>Production-grade frontend and full-stack. We write code that ships, scales, and won't
                                embarrass you six months into production.
                            </p>
                        </div>

                        <div class="link-icon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.66602 4.66602H11.3327V11.3327" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4.66602 11.3327L11.3327 4.66602" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="services-item">
                    <a href="#">
                        <div>
                            <div>
                                <span>04</span>
                                <h3>Motion & Creative Direction</h3>
                            </div>
                            <p>
                                Animation that earns its frame time, micro-interactions, campaign films, and product
                                demos that communicate without a single word.</p>
                        </div>

                        <div class="link-icon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.66602 4.66602H11.3327V11.3327" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4.66602 11.3327L11.3327 4.66602" stroke="#8A7F72" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                    </a>
                </div>
                <a class="all-services" href="#">All Services
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.5 3.5H8.5V8.5" stroke="#1C1815" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M3.5 8.5L8.5 3.5" stroke="#1C1815" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

CSS

* {
    margin: 0;
    box-sizing: border-box;
}
:root {
    --text-dark: hsl(26, 14%, 10%);
}
body {
    font-family: "Jost", sans-serif;
}
.services-section {
    padding: clamp(3rem, 1.24rem + 7.5vw, 8rem) clamp(1.5rem, 5%, 3rem);
    background-color: hsla(252, 100%, 81%, 0.05);
    color: hsl(32, 10%, 49%);
}
.services-section .services-content-wrapper {
    max-width: 75rem;
    margin-inline: auto;
}
.services-section .services-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
    .services-section .services-header {
        grid-template-columns: 1fr;
    }
}
.services-section .services-header span {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 2.75px;
    text-transform: uppercase;
}
.services-section .services-header h2 {
    margin-top: 1.5rem;
    font-family: "Gloock", serif;
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: clamp(-2.5px, -0.06em, -3.14px);
    color: var(--text-dark);
}
.services-section .services-header p {
    align-self: end;
    max-width: 26rem;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
}
@media screen and (min-width: 769px) {
    .services-section .services-header p {
        margin-inline: auto;
    }
}
.services-section .services-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
}
@media screen and (max-width: 768px) {
    .services-section .services-content {
        grid-template-columns: 1fr;
    }
}
.services-section .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media screen and (max-width: 768px) {
    .services-section .img-wrapper {
        display: none;
    }
}
.services-section .services-item:last-of-type {
    border-bottom: 1px solid hsla(26, 14%, 10%, 0.12);
}
.services-section .services-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2.75rem clamp(1.5rem, 5vw, 3rem);
    border-top: 1px solid hsla(26, 14%, 10%, 0.12);
    transition: background-color .3s;
}
@media screen and (max-width: 768px) {
    .services-section .services-item a {
        padding-inline: 0;
    }
}
.services-section .services-item a:hover {
    background-color: hsla(252, 100%, 81%, 0.1);
}
.services-section .services-item a > div div {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.services-section .services-item a > div div span {
    font-weight: 500;
    font-size: .675rem;
    line-height: 1.5;
    letter-spacing: 2px;
}
.services-section .services-item a > div div h3 {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--text-dark);
}
.services-section .services-item a p {
    margin-left: 2.5rem;
    margin-top: .875rem;
    font-weight: 300;
    font-size: .875rem;
    line-height: 1.5;
}
.services-section .link-icon {
    width: 1rem;
    height: 1rem;
    transition: transform .3s;
}
.services-section .services-item a:hover .link-icon {
    transform: translate(.5rem, -.5rem);
}
.services-section .all-services {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: 1.98px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-self: end;
    padding: 2.75rem 3rem 1rem;
    transition: opacity .3s;
}
.services-section .all-services:hover {
    opacity: .6;
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.

Recently added:

Product Card HTML CSS #7

Product Card HTML CSS #7

About Section HTML CSS JS with Image Carousel

About Section HTML CSS JS with Image Carousel

Responsive Footer HTML CSS #3

Responsive Footer HTML CSS #3

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Most Voted
Newest Oldest

Similar Posts

Our Services section with accordion HTML CSS JS

Our Services section with accordion HTML CSS JS

Similar Posts

GSAP Scroll Animation Feature Cards HTML CSS

GSAP Scroll Animation Feature Cards HTML CSS

Check Out Other Posts
0
Would love your thoughts, please comment.x
()
x