Bootstrap 5 Services Section:- Many professionals, small companies, and agencies need a way to showcase their services across their website.
What does the company provide as a service to its customer. This section of pages needs to be streamlined and aesthetic because, based on this, your company is different from the rest. You need to find an ideal way to explain it through image, icon, paragraph etc., in this way, your company will outperform your competitor.
Google Fonts is a service provided by Google for free that allows access to thousands of fonts. All available fonts are under an open source license, which means they are free to use for both commercial and non-commercial projects.
Choosing your fonts
It’s now time for us to choose our fonts. Head on over to fonts.google.com and select a font you like by pressing the little (+) (plus) button. I’m going to use Livvic. Once you’ve picked out your font, expand the drawer on the bottom of the page.
GOOGLE FONTS LINK:-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
Responsive Services Section. Inside this folder, we have two files – index.html and style.css. These files are the HTML document and the stylesheet.
I have used
CSS LINK:-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Service Section Using HTML:-
<!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">
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section class="section bg-color">
<div class="container">
<div class="row mb-5">
<div class="col-lg-5 col-md-8 m-auto">
<div class="sub-heading text-center">
<span>SERVICES</span>
<h2>We Are Offering All Kinds of IT Solutions Services</h2>
</div>
</div>
</div>
<div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/1.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Web Development</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/2.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Analytic Solutions</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/3.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Clould & DevOps</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/4.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Product & Design</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/5.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Data Center</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/6.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Web Development</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>Service Section Using CSS:-
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
font-family: 'Livvic', sans-serif;
}
.section{
padding-top: 50px;
padding-bottom: 50px;
}
.bg-color{
background-color: #F6F7F9;
}
.sub-heading span{
color: #106eea;
font-weight: 600;
}
.sub-heading h2{
font-weight: 700;
font-family: 'Livvic', sans-serif;
}
.service-box{
padding: 20px;
background-color: #fff;
transition: .4s;
transform: translateY(0);
cursor: pointer;
}
.service-content h3{
font-size: 24px;
font-weight: 700;
color: rgb(58, 58, 58);
}
.service-box:hover{
box-shadow: 0 0 30px #eee;
transform: translateY(-.5rem);
}
.service-content h3:hover{
color: #106eea;
}
If you would like to learn by coming along to the video tutorial, then check out the video down below. Also, subscribe to my youtube channel so you don’t miss any of the exciting tutorials I post regularly.
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.