Responsive Service Box HTML CSS Code Download Free

Hi developer! Are you searching for responsive service box HTML CSS code for your new website? Then you’ve landed on the right page.

I’m going to give a responsive service box code for free in this article. This service box is made by using simple HTML and CSS code. Simply, you can copy the HTML and CSS code and paste it into your code editor tools.

If you’re building a business website then we require a service section so the user can easily navigate what he is looking for. Well, if you’re a pro developer then you can create a service section box using HTML, CSS, and Java. But It takes little time and effort.

But, if you don’t want to put effort and time, simply you can use this HTML & CSS source code to create a service box.

Service Box Design Using HTML & CSS

1. Service Box Design Template

Font use – Font Awesome

HTML Code:

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Courses</title>
    
     <script data-optimized="1" src="https://urpn.org/wp-content/litespeed/js/a60cb3c531451ec33e9ef2d217825008.js?ver=25008" crossorigin="anonymous"></script> </head>
<body>
    <div class="container">

<div class="row">
<div class="main"><a href="https://urpn.org/"></a>
    <i class="fa-solid fa-folder-open"></i>
    <h2>General Knowledge</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-brands fa-aws"></i>
    <h2>Web development</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-brands fa-wordpress"></i>
    <h2>WordPress</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-brands fa-blogger"></i>
    <h2>Blogging</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-brands fa-codiepie"></i>
    <h2>Search Engine Optimization</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-solid fa-laptop-code"></i>
    <h2>Theme Customization</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-solid fa-circle-stop"></i>
    <h2>WordPress Theme</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>
<div class="main"><a href="https://urpn.org/">
    <i class="fa-solid fa-user-secret"></i>
    <h2>Coder</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eligendi iusto voluptatem porro repellendus et.</p>
</div></a>


</div>

    </div>
    
</body>
</html>

CSS Code:

				
					*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    background: rgb(255, 255, 255);
}
.container{
    width: 100%;
    height: 100vh;
    position: absolute;
    

}
.container h1{
    font-size: 50px;
    text-align: center;
    padding: 30px;
    
}
.row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 30px;
    margin: 0 50px;
    padding: 35px;
   
}
.main{
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    cursor: pointer;
    padding: 25px 10px;
    border-radius: 5px;
    text-align: center;
    color: rgb(0, 0, 0);
    z-index: 1;
    
}
.main a{
    color: black;
}
.main i{
    font-size: 45px;
    color: red;
    background: white;
    
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 15px 15px;
    border-radius: 50%;
    margin: -150px auto 0;
    transition: transform 1s;
    width: 30px;
    height: 30px;
}
.main h2{
    padding: 20px;
    position: relative;
}
.main h2::after{
    content: '';
    width: 40px;
    height: 10px;
    background: linear-gradient(to right, #fff, #007bff);
    position: absolute;
    right: 15px;
    top: -5px;
    z-index: -1;
}
.main h2::before{
    content: '';
    width: 40px;
    height: 10px;
    background: linear-gradient(to right, #fff, #007bff);
    position: absolute;
    left: 15px;
    bottom: -5px;
    z-index: -1;
}
.main p{
    padding: 40px;
    font-size: 15px;
}
.main:hover{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}
.main:hover i{
    transform: rotate(360deg);
}





/* Media query */

@media(max-width:780px){
    .container h1{
        color: red;
        
    }

}

Final Result is Here:

What you need to change HTML Code:

Heading (h1) – Our Coursers (Type your desired name) and uncomment this code.
URL – https://urpn.org/ – Change it with your page URL
Heading (h2) – Change it
Paragraph (p) – Change it

Note: If you’re saving a style.css file inside any folder then you need to change the stylesheet link path in the HTML Code file. For example, style.css file under style folder then your stylesheet link path will be <link rel=“stylesheet” href=“style/style.css“>

2. Service Box Design Template