Hey, developers welcome to Day 39 of our 90Days 90Projects challenge. And in Day 39 we are going to create a Responsive Our Services Section using HTML & CSS
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!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">
<title> Services </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="services">
<h2 class="heading"> Services </h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing. </p>
<!-- Services Main Container Starts from Here -->
<div class="services-container">
<!-- Service Item starts from here -->
<div class="service-item">
<ul>
<li><i class="fa-solid fa-desktop"></i></li>
</ul>
<article>
<h2 class="service-heading"> Developing </h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
tenetur soluta eius ut!</p>
</article>
</div>
<!-- Service Item Ends here -->
<!-- Service Item starts from here -->
<div class="service-item">
<ul>
<li><i class="fa-solid fa-chart-line"></i></li>
</ul>
<article>
<h2 class="service-heading"> Analyzing </h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
tenetur soluta eius ut!</p>
</article>
</div>
<!-- Service Item Ends here -->
<!-- Service Item starts from here -->
<div class="service-item">
<ul>
<li><i class="fa-brands fa-telegram"></i></li>
</ul>
<article>
<h2 class="service-heading"> Sharing </h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
tenetur soluta eius ut!</p>
</article>
</div>
<!-- Service Item Ends here -->
<!-- Service Item starts from here -->
<div class="service-item">
<ul>
<li><i class="fa-solid fa-building-columns"></i></li>
</ul>
<article>
<h2 class="service-heading"> Banking </h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
tenetur soluta eius ut!</p>
</article>
</div>
<!-- Service Item Ends here -->
<!-- Service Item starts from here -->
<div class="service-item">
<ul>
<li><i class="fa-sharp fa-solid fa-credit-card"></i></li>
</ul>
<article>
<h2 class="service-heading"> Cards </h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
tenetur soluta eius ut!</p>
</article>
</div>
<!-- Service Item Ends here -->
<!-- Service Item starts from here -->
<div class="service-item">
<ul>
<li><i class="fa-solid fa-bag-shopping"></i></li>
</ul>
<article>
<h2 class="service-heading"> Shoping </h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nemo eaque consequuntur quam
tenetur soluta eius ut!</p>
</article>
</div>
<!-- Service Item Ends here -->
</section>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#services {
width: 100%;
}
.heading {
font-size: 2rem;
margin: 1rem auto;
text-align: center;
font-family: system-ui;
}
#services p {
text-align: center;
margin-bottom: 1rem;
font-family: sans-serif;
}
.services-container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-around;
}
.service-item {
width: 20rem;
margin: 1rem;
padding: 10px;
display: flex;
flex-shrink: 1;
align-items: center;
flex-direction: column;
justify-content: center;
transition: all 0.1s linear;
border-radius: 10px;
cursor: pointer;
box-shadow: 3px 3px 10px 0px rgb(0, 0, 0, 0.1);
}
.service-item:hover {
transform: scale(1.01);
box-shadow: 5px 5px 15px 0px rgb(0, 0, 0, 0.2);
}
.service-item ul li {
width: 50px;
height: 50px;
color: white;
list-style: none;
font-size: 1.2rem;
display: flex;
border-radius: 50%;
align-items: center;
justify-content: center;
background-color: #e65000;
}
.service-heading {
margin: 1rem 0;
text-align: center;
color: #000000b7;
font-family: system-ui;
}
article p {
font-size: 14px;
color: #000000b7;
}
.service-item:hover p,
.service-item:hover .service-heading {
color: #000000;
}
