Design a Responsive Services Section Template using HTML and CSS

Last Updated : 12 Jan, 2024

A Services Website plays a vital role in showcasing the different services that a particular company or any other contractor has to offer. In this article, we are going to build a services page, it will illustrate the different components of the services like the title, description, and learn more button. We will use HTML to define the basic structure like title, details, buttons, etc. and CSS will give a beautiful design to our layout like text decoration, text color, background color, text alignment, margin, padding, box floating, etc.

Preview

gfg-2

Approach

Create an HTML structure containing a title for the services section and a container for service cards.
Apply CSS styles to create an appealing layout with a background image, font styling, and responsive design.
Design service cards with a flex container, individual card styles, and transition effects on hover.
Integrate Font Awesome for scalable and customizable icons within the service cards.
Implement media queries to ensure a responsive design, adjusting the layout for smaller screens.
Replace placeholder content with actual service information and customize icons based on the services offered.
Add hover effects to service cards for visual feedback and include links for users to learn more about each service.

Example: In this example, we will design a services webpage using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
  
    <!-- Font Awesome CDN-->
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
  
    <!-- For font family Poppins -->
    <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=Poppins:wght@400;700&display=swap" 
          rel="stylesheet"> 
    <title>Responsive Services Section</title> 
    <style> 
        * { 
            box-sizing: border-box; 
        } 
  
        body { 
            font-family: 'Poppins', sans-serif; 
            margin: 0; 
            padding: 0; 
            background-image: url( 
https://media.geeksforgeeks.org/wp-content/uploads/20240109184517/gfg-image.jpg); 
            background-repeat: no-repeat; 
            background-size: cover; 
            background-color: rgb(90, 90, 90); 
            background-blend-mode: multiply; 
            background-position: center; 
            color: #fff; 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            text-transform: uppercase; 
        } 
  
        h1 { 
            position: relative; 
            max-width: max-content; 
            margin: 2rem auto 5rem auto; 
        } 
  
        h1::after { 
            content: ""; 
            position: absolute; 
            width: 75%; 
            height: 5px; 
            background-color: lightgreen; 
            bottom: -2rem; 
            left: 25px; 
        } 
  
        i { 
            font-size: 3rem; 
            color: lightgreen; 
            padding: 1rem; 
            transition: all 0.3s linear; 
            transform: rotate(-45deg); 
        } 
  
        .services-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 20px; 
            display: flex; 
            flex-wrap: wrap; 
            justify-content: space-around; 
        } 
  
        .service-card { 
            cursor: pointer; 
            width: 300px; 
            margin: 20px; 
            padding: 2rem 20px 20px 20px; 
            text-align: center; 
            border-radius: 5px; 
            transition: all 0.3s ease-in-out; 
        } 
  
        .icon-container { 
            border: 2px solid lightgreen; 
            transition: 0.3s linear; 
            width: max-content; 
            margin: 0 auto; 
            transform: rotate(45deg); 
        } 
  
        .service-card:hover { 
            box-shadow: 0 0 30px 0 lightgreen; 
            transform: scale(1.1); 
        } 
  
        .service-card a { 
            color: lightgreen; 
            text-decoration: none; 
        } 
  
        @media (max-width: 768px) { 
            .service-card { 
                width: 100%; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Our Services</h1> 
    <div class="services-container"> 
        <div class="service-card"> 
            <div class="icon-container"> 
                <i class="fa-solid fa-user"></i> 
            </div> 
            <h3>Service 1</h3> 
            <p> 
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, 
                how to ace data structures and 
                algorithms, GeeksforGeeks is a 
                one-stop solution.</p> 
            <a href="#" class="button">Learn More</a> 
        </div> 
  
        <div class="service-card"> 
            <div class="icon-container"> 
                <i class="fa-solid fa-cart-shopping"></i> 
            </div> 
            <h3>Service 2</h3> 
            <p> 
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, 
                how to ace data structures and 
                algorithms, GeeksforGeeks is a 
                one-stop solution.</p> 
            <a href="#" class="button">Learn More</a> 
        </div> 
  
        <div class="service-card"> 
            <div class="icon-container"> 
                <i class="fa-solid fa-toolbox"></i> 
            </div> 
            <h3>Service 3</h3> 
            <p> 
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, 
                how to ace data structures and 
                algorithms, GeeksforGeeks is a 
                one-stop solution.</p> 
            <a href="#" class="button">Learn More</a> 
        </div> 
  
        <div class="service-card"> 
            <div class="icon-container"> 
                <i class="fa-brands fa-android"></i> 
            </div> 
            <h3>Service 4</h3> 
            <p> 
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, 
                how to ace data structures and 
                algorithms, GeeksforGeeks is a 
                one-stop solution.</p> 
            <a href="#" class="button">Learn More</a> 
        </div> 
  
        <div class="service-card"> 
            <div class="icon-container"> 
                <i class="fa-solid fa-database"></i> 
            </div> 
            <h3>Service 5</h3> 
            <p> 
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, 
                how to ace data structures and 
                algorithms, GeeksforGeeks is a 
                one-stop solution.</p> 
            <a href="#" class="button">Learn More</a> 
        </div> 
  
        <div class="service-card"> 
            <div class="icon-container"> 
                <i class="fa-solid fa-pen"></i> 
            </div> 
            <h3>Service 6</h3> 
            <p> 
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, 
                how to ace data structures and 
                algorithms, GeeksforGeeks is a 
                one-stop solution.</p> 
            <a href="#" class="button">Learn More</a> 
        </div> 
    </div> 
</body> 
  
</html>