Creating 'Service Section' using HTML and CSS

Creating ‘Our Services Page/Section Design’ Using HTML and CSS With Source Code

Creating ‘Our Services Page/Section Design’ Using HTML and CSS With Source Code

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.

Services section using HTML and CSS

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.

Before we start with our project we need to understand some of the major concepts that help in creating our website.

What is a Service Section inside a webpage?

A service Section inside a webpage of a company website is the heart and soul of the webpage and helps in providing an overview to the user. The services that companies provide and the applicable fees for particular services are all mentioned in the service section of the website.

How to Create a Service Section?

To create a service section inside any webpage, you need to have a good knowledge of HTML for creating the base structure of the service section, but for now, we have provided you with a skeleton structure of a service section that you can customize and add to your website.

<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>          
</section>

 

50+ HTML, CSS & JavaScript Projects With Source Code

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Portfolio Website using HTML and CSS (Source Code)

Let us start by understand the <head> 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 <body>.

  • 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.

Restaurant Website Using HTML and CSS

OUTPUT: Basic structure using HTML

Creating 'Service Section' using HTML and CSS
Creating ‘Service Section’ using HTML and CSS

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 a 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;

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Let us take a look at what Our Service Section looks like till now

OUTPUT:

Creating 'Service Section' using HTML and CSS
Creating ‘Service Section’ using HTML and CSS

 

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;

Responsive Gym Website Using HTML ,CSS & JavaScript

ADVERTISEMENT

Final Output Of ‘Our Services Page/Section Design’ Using HTML & CSS

This is the outcome of our HTML and CSS combined to create the ‘Our Services’ Section.

Creating 'Service Section' using HTML and CSS
Creating a ‘Service Section’ using HTML and CSS

 

ADVERTISEMENT

I hope that this article was helpful and you understood the whole project. Now let’s take a look at the Live Preview of the ‘Our Service’ section.

ADVERTISEMENT

Snake Game Using HTML,CSS and JavaScript With Source Code

ADVERTISEMENT

Codepen preview of the Our Services Page with HTML and CSS:

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!!

ADVERTISEMENT

Follow: codeWithRandom

Code by: denn

Written by: Cheshta Vohra

FAQ Section

What is a Service Section inside a webpage?

A service Section inside a webpage of a company website is the heart and soul of the webpage and helps in providing an overview to the user. The services that companies provide and the applicable fees for particular services are all mentioned in the service section of the website.

How to Create a Service Section?

To create a service section inside any webpage, you need to have a good knowledge of HTML for creating the base structure of the service section, but for now, we have provided you with a skeleton structure of a service section that you can customize and add to your website.
<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> </section>



Leave a Reply