Hey, Coders, today in this tutorial we will learn how to create a fully responsive 'Our Service Section' using HTML and CSS, no Javascript is required.
Let us first understand why websites require a service section:-
A services section is a fundamental part of any company website. It gives visitors an overview of your company and what you offer, so they can decide whether they want to learn more. They present a product to the customers, motivate them to get in touch with the company, make it possible for them to make a purchase, as well as allow the company to collect the customer's data.
Let us now start creating Service Section for your website.
Step 1: Adding basic HTML
Creating a basic structure of the service section using HTML - Hypertext Markup Language.
Here is the code for you to directly use it. The code will be explained below for you to understand how to create the service section.
<html>
<head>
<title>Our Services</title>
<link rel="stylesheet" href="serviceSection.css">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<section class="service-grid pb-5 pt-5">
<div class="container">
<div class="row">
<div class="col-xl-12 text-center mb-4">
<div class="service-title">
<h4>Our Services</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 text-center mb-3">
<div class="service-wrap">
<div class="service-icon">
<i class="fas fa-layer-group"></i>
</div>
<h4>Web Application</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
<a href="#">Read More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center mb-3">
<div class="service-wrap">
<div class="service-icon">
<i class="far fa-chart-bar"></i>
</div>
<h4>Highly customizable</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
<a href="#">Read More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center mb-3">
<div class="service-wrap">
<div class="service-icon">
<i class="fas fa-database"></i>
</div>
<h4>Responsive design</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
<a href="#">Read More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center mb-3">
<div class="service-wrap">
<div class="service-icon">
<i class="fas fa-cogs"></i>
</div>
<h4>service & plugins</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
<a href="#">Read More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center mb-3">
<div class="service-wrap">
<div class="service-icon">
<i class="fas fa-chart-pie"></i>
</div>
<h4>Optimised for speed</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
<a href="#">Read More</a>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center mb-3">
<div class="service-wrap">
<div class="service-icon">
<i class="fas fa-thumbs-up"></i>
</div>
<h4>Dedicated support</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry...</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Let us start by understand the
section of out HTML code:Here we have linked boostrap link via CDN which you can directly use for your project from https://getbootstrap.com/ .
Then we have directly used Javascript bundle with popper via CDN and added it using the script tag, you can also directly use it from https://getbootstrap.com/
<head>
<title>Our Services</title>
<link rel="stylesheet" href="serviceSection.css">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
Now let's start creating the basic structure of Our Service section inside the .
We will start by creating a section using section tag and add 3 classes in this section- class="service-grid pb-5 pt-5".
Inside the section we will create a division using div tag and add a class="container" in it. Nesting 3 more div tags in this tag with classes -class="row", class="col-xl-12 text-center mb-4" and class="service-title" respectively. And now in this div tag we will use heading tag to give heading for our service section- Our Services.
Now we will show what services we provide in our service section.
Firstly using heading tag in div tag with class="service-wrap" we will write our 1st service i.e, Web Application. Inside this div we will add another div to add our icon. Using paragraph tag we will write the details, for reference we have written Lorem Ipsum as a dummy description. Using anchor tag we will provide a link for the viewer to read more about the service.
Similarly we will add more services such as Highly customizable, Responsive design, service & plugins, Optimised for speed and Dedicated support. You can add your services according to your website.
Step 2: Add CSS to style the basic structure of Our Service Section
.service-grid {
background: #fcfcfc;
}
.service-title h4 {
position: relative;
display: inline-block;
}
.service-icon {
position: relative;
}
.service-title p {
padding: 0 190px;
margin-bottom: 10px;
}
.about-info-text h2 {
margin-bottom: 23px;
text-transform: capitalize;
font-weight: 700;
line-height: .9;
}
.about-info-text p {
padding: 0 100px;
font-size: 18px;
margin-bottom: 26px;
position: relative;
}
.about-content p {
margin-bottom: 0;
}
.about-info-text a {
margin-bottom: 20px;
position: relative;
}
.service-icon i {
font-size: 40px;
color: #e8bc00;
margin-bottom: 20px;
display: inline-block;
}
.service-wrap {
border: 1px solid #e6e6e6;
padding: 50px 30px;
position: relative;
}
.service-wrap p{
position: relative;
}
.service-wrap:hover {
background-image: url(https://i.ibb.co/mykzQks/services1.jpg);
background-size: cover;
background-position: center center;
background-attachment: local;
transition: all .5s;
}
.service-wrap:hover:before {
background: rgba(0, 0, 0, 0.2901960784313726);
position: absolute;
height: 100%;
width: 100%;
left: 0px;
content: "";
top: 0;
opacity: 1;
}
.service-wrap:hover h4,.service-wrap:hover p{
color: #fff;
}
.service-wrap h4 {
font-weight: 600;
color: #1e2331;
margin-bottom: 17px;
font-size: 18px;
text-transform: capitalize;
position: relative;
}
.service-wrap a {
font-size: 14px;
font-weight: 600;
position: relative;
}
Let us now understand how we will style Our Service Section page:
The HTML element with class="service-grid" targeted by dot selector will have background as #fcfcfc.
Now we will style heading with h4 tag having class="service-title" with position property set to relative and display as inline-block which allows us to set a width and height on the element.
For HTML elements with class="service-icon", set position as relative.
Now styleing the service description written using paragraph tag with class="service-title" will have padding: 0 190px and margin-bottom: 10px.
HTML elements with class="about-info-text" in h2 tag will be styled using the following properties:
margin-bottom: 23px; text-transform: capitalize; font-weight: 700; line-height: .9
HTML elements with class="about-info-text" in paragraph tag will be styled using the following properties: padding: 0 100px;
font-size: 18px; margin-bottom: 26px; position: relative;
HTML elements with class="about-content" inside paragraph tag will be styled using property: margin-bottom: 0;
The links used will have properties set as margin-bottom: 20px; position: relative;
The service icons will have the following styles : font-size: 40px; color: #e8bc00; margin-bottom: 20px; display: inline-block
Now we will add further more styles like hover property and etc., to make our Service Section more eye-catching.
Let us begin understanding second half of the code:
.service-wrap {
border: 1px solid #e6e6e6;
padding: 50px 30px;
position: relative;
}
.service-wrap p{
position: relative;
}
.service-wrap:hover {
background-image: url(https://i.ibb.co/mykzQks/services1.jpg);
background-size: cover;
background-position: center center;
background-attachment: local;
transition: all .5s;
}
.service-wrap:hover:before {
background: rgba(0, 0, 0, 0.2901960784313726);
position: absolute;
height: 100%;
width: 100%;
left: 0px;
content: "";
top: 0;
opacity: 1;
}
.service-wrap:hover h4,.service-wrap:hover p{
color: #fff;
}
.service-wrap h4 {
font-weight: 600;
color: #1e2331;
margin-bottom: 17px;
font-size: 18px;
text-transform: capitalize;
position: relative;
}
.service-wrap a {
font-size: 14px;
font-weight: 600;
position: relative;
}
Now we will add styles to HTML elements with class="service-wrap" using the following properties:
border: 1px solid #e6e6e6; padding: 50px 30px; position: relative; and the same class but inside the paragraph tag will have position set as relative.
When we hover over elements having class service-wrap, we want to display an image in all the services using the property background-image and add the URL given in the code. Now we will add the following properties to make it interactive : background-size: cover; background-position: center; background-attachment: local; transition: all .5s;
Before hovering we want the services to be styled using these properties: background: rgba(0, 0, 0, 0.2901960784313726); position: absolute; height: 100%; width: 100%; left: 0px; content: ""; top: 0; opacity: 1;
When hover we want the text color to change (heading and paragraph) to color: #fff;
For elements with class service-wrap inside the heading (h4) tag, the styles we want to add are font-weight: 600; color: #1e2331; margin-bottom: 17px; font-size: 18px; text-transform: capitalize; position: relative;
Finally styling the links having class service-wrap the styling would include these properties: font-size 14px; font-weight: 600; position: relative;
I hope that this article was helpful and you understood the whole project.
We have successfully created the 'Our Services Section' using HTML and CSS. You can use this project directly by copying it into your IDE. We hope that you understood the project. If you have any doubts then feel free to comment them down!!
Follow: codeWithRandom
Code by: denn
Top comments (0)