service section in html css -codingiwithkaushal

How To Create Our Service Section Using HTML and CSS ?

Kaushal Rao

November 2, 2023
3 min read
html css modern Service page our Service section HTML CSS our service section source code Our services section

How to create our service section for website using HTML CSS ???

The main purpose of a Our service Section is It Provides essential information about the services or products offed by the business or organization , helping visitor understand what is available.

A well Presented service Section can enhance the credibility and professionalism of the website, installing trust in potential customers or clients.

Below Output :

Watch Video Tutorial

In this tutorial blog we are going to create responsive Service Section Using HTML and CSS.

Lets start with HTML [Source Code]

First we need to create basic starting template with required links of CSS CDN links in head section of HTML file.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Service Section</title>
    <link rel="stylesheet" href="style.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body> <script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script></body>
</html>

				
					<div class="container">
        <div class="service-wrapper">
            <div class="service">
                <h1>Our Service <span></span></h1>
                <div class="cards">
                    <div class="card">
                        <i class="fa-brands fa-chromecast"></i>
                        <h2>Business Stratagy</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quos perspiciatis sint dolor dolorem?
                             Animi, recusandae! Itaque architecto aliquam accusantium?</p>

                    </div>
                    <div class="card">
                        <i class="fa-solid fa-layer-group"></i>
                        <h2>WebSite Development</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quos perspiciatis sint dolor dolorem?
                             Animi, recusandae! Itaque architecto aliquam accusantium?</p>    
                    </div>
                    <div class="card">
                        <i class="fa-solid fa-user-group"></i>
                        <h2>Marketing And Reporting</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quos perspiciatis sint dolor dolorem?
                             Animi, recusandae! Itaque architecto aliquam accusantium?</p>
                             
                    </div>
                    <div class="card">
                        <i class="fa-solid fa-desktop"></i>
                        <h2>Mobile Development</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quos perspiciatis sint dolor dolorem?
                             Animi, recusandae! Itaque architecto aliquam accusantium?</p>
                             
                    </div>
                    <div class="card">
                        <i class="fa-solid fa-camera"></i>
                        <h2>Graphic Design</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quos perspiciatis sint dolor dolorem?
                             Animi, recusandae! Itaque architecto aliquam accusantium?</p>
                             
                    </div>
                    <div class="card">
                        <i class="fa-solid fa-gear"></i>
                        <h2>Other</h2>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda quos perspiciatis sint dolor dolorem?
                             Animi, recusandae! Itaque architecto aliquam accusantium?</p>
                             
                    </div>
                </div>
            </div>
        </div>
    </div>

More Tutorial Like This

Output Screenshot :

Now lets start our CSS code

				
					 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

				
					
.container{
    min-height: 100vh;
    width: 100%;
    background-color: #191a2b;
}

.service-wrapper{
    padding: 5% 8%;
}

.service{
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    color: #fff;
    font-size: 5rem;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: transparent;
    letter-spacing: 4px;
    background-color: rgb(4, 52, 83);
    background: linear-gradient(8deg,rgba(8,52,83,1) 0%,rgba(0,230,173,1) 41%,rgba(41,17,45,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
h1:after{
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    height: 8px;
    width: 80%;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
}

h1 span{
    position: absolute;
    top: 100%;
    left: 10%;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #72e2ae;
    animation: anim 5s linear infinite;
}

@keyframes anim {
    95%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        left: 88%;
    }
}

.cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 80px;
}

.card{
    height: 350px;
    width: 370px;
    background-color: #1c2335;
    padding: 3% 8%;
    border: 0.2px solid rgba(114, 226, 174,0.2);
    border-radius: 8px;
    transition: .6s;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.card:after{
    content: "";
    position: absolute;
    top: 150%;
    left: -200px;
    width: 120%;
    transform: rotate(50deg);
    background-color: #fff;
    height: 18px;
    filter: blur(30px);
    opacity: 0.5;
    transition: 1s;
}
.card:hover:after{
    width: 225%;
    top: -100%;
}
.card i{
    color: #72e2ae;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 4.8rem;
}

.card h2{
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}

.card p{
    text-align: center;
    width: 100%;
    margin: 12px 0;
    color: rgba(255, 255, 255, 0.6);

}
.card:hover{
    background-color: transparent;
    transform: translateY(-8px);
    border-color: #00ff37;
}

.card:hover i{
    color: #00ff37;
}

Media Query Code for Responsive Design

				
					
@media screen and (max-width:1200px) {
    .cards{
        grid-template-columns: repeat(2,1fr);
    }
}@media screen and (max-width:900px) {
    .cards{
        grid-template-columns: repeat(1,1fr);
    }
    h1{
        font-size: 3.5rem;
    }
}

Below Tutorial for beginners How To Create Responsive Service Section in HTML and CSS.

click on video to view and Don’t Forget to subscribe Our Channel