Did you know that a service section can make your website look more professional and clear for your visitors? In this post, we’ll create a simple and attractive Services Section design using HTML and CSS. And yes — you’ll get the full source code once we finish. So without wasting any time, let’s start building the Services Section step by step.
Which file you create first before start this tutorial
- you know it’s a very easy service section card layout and this card create only HTML and CSS so you need to 2 file
- first index.html In which the layout of the service section will be made and another style.css In which you can design your service section.
- and the style.css should be link in your html file in a head tag so that all the style show in your design.
- I used a remix icon it’s a icon library you can use any icon of this library after link a CDN of this.
How to Services Section Design using HTML and CSS
Once you’ve created all the required files, copy the code below and paste it inside the body tag of your HTML file.
<div class="container">
<div class="card">
<div class="icon" style="--col : #ff0385">
<i class="ri-window-fill"></i>
</div>
<div class="content">
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos omnis, voluptatem iste qui possimus laborum.</p>
</div>
</div>
<div class="card">
<div class="icon" style="--col : #00adb5">
<i class="ri-pencil-ruler-line"></i>
</div>
<div class="content">
<h2>Content Writer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos omnis, voluptatem iste qui possimus laborum.</p>
</div>
</div>
<div class="card">
<div class="icon" style="--col : #f5564e">
<i class="ri-line-chart-fill"></i>
</div>
<div class="content">
<h2>SEO</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos omnis, voluptatem iste qui possimus laborum.</p>
</div>
</div>
<div class="card">
<div class="icon" style="--col : #6f00ff">
<i class="ri-shape-2-fill"></i>
</div>
<div class="content">
<h2>Designer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos omnis, voluptatem iste qui possimus laborum.</p>
</div>
</div>
<div class="card">
<div class="icon" style="--col : #3a6f43">
<i class="ri-shake-hands-line"></i>
</div>
<div class="content">
<h2>Performance</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos omnis, voluptatem iste qui possimus laborum.</p>
</div>
</div>
<div class="card">
<div class="icon" style="--col : #fcc61d">
<i class="ri-stock-fill"></i>
</div>
<div class="content">
<h2>Marketer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos omnis, voluptatem iste qui possimus laborum.</p>
</div>
</div>
</div>
Design Service Section with the help of CSS
If you want to add a hover effect to your service section cards and give them a nice color style, just include the code below in your style.css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 1000px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.card{
width: 320px;
height: 280px;
background-color: rgb(52, 39, 73);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.card .icon{
position: absolute;
width: 100%;
height: 100%;
background-color: var(--col);
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
transition: 0.5s;
z-index: 1;
}
.card:hover .icon{
top: 30px;
font-size: 2.5rem;
width: 80px;
height: 80px;
left: calc(50% - 40px);
border-radius: 50%;
}
.card .content{
position: relative;
text-align: center;
padding: 15px;
margin-top: 100px;
scale: 0;
transition: 0.5s;
color: white;
}
.card:hover .content{
scale: 1;
transition-delay: 0.5s;
}
Conclusion
Creating a Services Section with HTML and CSS is an easy way to make your website look professional and more user-friendly. With a simple layout and clean styling, you can highlight your services in a clear and attractive way. Now that you have the full source code and structure, feel free to customize the colors, icons, or layout to match your website’s style.