Responsive Services Section Design using HTML and CSS

byCodingFlicks -September 14, 2020

0

Responsive Services Section Design using HTML CSS

Hello, and welcome to the blog. In this project, we will make a snippet based on how to make a simple responsive service section. I have also added a shiny hover effect on each service boxes so that it looks a nit aesthetic. I have used plain HTML and CSS to get the result. Previously I have shared a snippet on Side Navigation Menu. Check that out if you haven't already.

Service section or pages in web design are crucial as they indicate what the company offers as a service to their customer. This section of pages needed to be well-organized and aesthetic because, based on it, your company stands out from the rest. Whatever services you provide, you need to find an ideal way to explain it via image, icon, paragraph, etc. in this way, your company will perform better than your competitor.

In the HTML markup, I have taken the div element and named it wrapper. This div will act as the container of the services boxes. Inside that, I have taken a header and three single div elements named "single-service." then I put all the features like an icon box, an h3 header tag, and some random text. I also included a span tag, which we will use to get the shiny hover CSS animation for each service boxes. I have used font-awesome icons here, so you need to add that to your project as well. I have added the font-awesome CDN below for your convenience.

You may also like:

For the CSS part, I have given some default margin padding to the body tag. Besides, I have given a background image and height of 90vh to it. I have used Poppins as the primary font for this project. You can use any fonts of your choice when you modify the snippet. Then I gave the wrapper class width of 1170px and a style margin value to align the web page's middle. I have taken a width of 31% for each single service div element and float them to the left. In this way, it will align horizontally. After that, I did some basic styling with the rest of the service boxes content. To get the shiny hover effect, I used CSS transform-property and a skew value to get the result. For the responsive web design, I used media-queries and changed some values of different elements. In this way, the layout will look responsive in medium and small devices.

To make this snippet your own, you need to create two files. These are HTML and CSS files. You then copy and paste the code below in your files and save it. Run the project in your browser and modify it according to your need.

REQUIRED FILE

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

HTML

<div class="wrapper">
  <h2>
Services</h2>
<div class="line">
</div>
<div class="single-service">
      <div class="social">
<i class="fa fa-codepen"></i></div>
<span></span>
       <h3>
Web Design</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et delectus, in veritatis veniam non praesentium corporis dolorum necessitatibus. Culpa odio enim amet praesentium illo voluptates ab quidem, nam consequuntur. Natus.</p>
</div>
<div class="single-service">
      <div class="social">
<i class="fa fa-cogs"></i></div>
<span></span>
       <h3>
ui / ux design</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et delectus, in veritatis veniam non praesentium corporis dolorum necessitatibus. Culpa odio enim amet praesentium illo voluptates ab quidem, nam consequuntur. Natus.</p>
</div>
<div class="single-service">
      <div class="social">
<i class="fa fa-diamond"></i></div>
<span></span>
       <h3>
Graphics design</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et delectus, in veritatis veniam non praesentium corporis dolorum necessitatibus. Culpa odio enim amet praesentium illo voluptates ab quidem, nam consequuntur. Natus.</p>
</div>
</div>

CSS

body{
    margin: 0;
    padding: 0;
    background-image: url(https://i.postimg.cc/dQZssk2d/1.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    height: 90vh;
    font-family: poppins;
}
.wrapper{
    width: 1170px;
    margin: 5% auto;
}
.wrapper h2{
    text-transform: uppercase;
    font-family: poppins;
    font-weight: bold;
    text-align: center;
    font-size: 60px;
    color: #fff;
    margin: 0;
}
.single-service {
position: relative;
width: 31%;
height: 320px;
background: #fff;
box-sizing: border-box;
padding: 0 15px;
transition: .5s;
overflow: hidden;
float: left;
margin: 0 10px;
text-align: center;
}
.line {
width: 150px;
height: 3px;
background: #fff;
margin: 0 auto 60px auto;
}
.single-service p{            
    color: #262626;
    font-size: 14px;
}
.single-service h3 {
    font-size: 25px;
    text-transform: uppercase;
    font-family: poppins;
    letter-spacing: 1px;
    color: #262626;
}
.social {
width: 60px;
height: 60px;
background: #262626;
border-radius: 50%;
margin: 5% auto;
}
.social i {
font-size: 30px;
padding: 15px;
    color: #fff;
}
.single-service:hover{
    box-shadow: 0 30px 35px rgba(0,0,0,0.7);
}
.single-service span {
position: absolute;
top: 0;
left: -110%;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
transition: .7s;
transform: skewX(10deg);
}
.single-service:hover span{
    left: 110%;
}

@media (max-width:1000px){
    .wrapper {
width: 100%;
}
.single-service {
width: 95%;
margin-bottom: 30px;
}
.wrapper h2 {
font-size: 30px;
}
}

I hope you find it useful. Please follow our social media profiles to keep yourself updated for a future post from this blog. Thanks for vising.

Please do not enter any spam link in the comment box.