Responsive Services Section Design using HTML and CSS

byCodingFlicks -September 14, 2020

0

In this blog post, we will create a snippet of how to make a simple responsive services section. We added a glossy hover effect to each service box to give it a clean aesthetic. We used plain HTML and CSS to achieve this result. Previously, we have shared snippets of CSS animation examples, responsive web design, JavaScript projects, and more on this website. Check that out if you haven't already.

Service sections or pages are very important in web design because they indicate what the company offers as a service to its customers. This section of pages needs 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 them through images, icons, paragraphs, etc. This way, your company will outperform your competitors. We've provided a video tutorial below that shows how we created this snippet step by step.

Video Tutorial:

In the HTML markup, we took a div element and named it wrapper. This div will act as a container for the service boxes. Inside it, we took a header called “single-service” and three single div elements. Then we put all the elements like an icon box, an h3 header tag, and some random text. We also included a span tag, which we will use to get the shiny CSS hover animation for each service box. We used the font-awesome icon here, so we need to add it to our project. We have added the font-awesome CDN to the source code for your convenience.

You may also like:

For the CSS part, we have given some default margins and padding to the body element of the project. We have also given it a background image and a height of 90vh. We have used Poppins as the primary font for this project. You can use any font you like when you change the snippet. Then we have given the wrapper class width of 1170px and a style margin value to align it in the middle of the web page. We have taken 31% width for each single service div element and aligned them to the left. After that, we did some basic styling with the rest of the content of the service box. To get the glossy hover effect, we have used the CSS transform property and a skew value to get the result. For responsive web design, we have used media queries and changed some values of different elements. This way, the layout will look responsive on medium and small devices.

Responsive Services Section Design [ Source Code ]:

To create this snippet, you need to create two files. One of these files is an HTML file and the other is a CSS file. Then you need to copy and paste the code below and paste it in your files. After that, save the project. Run the project in your browser and modify it as per your requirements. You can also download the project by clicking on the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Services Section Design using HTML and CSS</title>
	<link href="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" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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><!-- lorem30 -->
            
		</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>
</body>
</html>

CSS

  body {
	margin: 0;
	padding: 0;
	background-image: url(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 90vh;
	font-family: "Poppins", serif;
}
.wrapper {
	width: 1170px;
	margin: 5% auto;
}
.wrapper h2 {
	text-transform: uppercase;
	font-family: "Poppins", serif;
	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", serif;
	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;
	}
    .single-service p {
        font-size: 12px;
    }
}

We hope you have successfully downloaded this responsive web design project. Please follow our social media profiles to keep yourself updated for future posts from this blog. If you want more source code then you can click on the Load More button on our homepage. Thank you for visiting our website.

DOWNLOAD FILE

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