Hello EveryOne,
.png)
Today in this tutorial i will see how to make responsive our service section. This Project we will use HTML and CSS.
Video Tutorial:
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.
Folder Structure:
we create folder which name responsive service section and we have two files –
index.html and style.css. These files are the HTML document and the stylesheet.#responsiveservicesection
#responsive_web_design
#responsiveservicesectionwithhtmlcss
#css #html #responsive #servicesectiondesign2022
#bestservicesectiondesgin2022
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">
<title>Responsive Services Section</title>
<!-- Font Awesome CDN-->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<div class="row">
<h2 class="section-heading">Our Services</h2>
</div>
<div class="row">
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-hammer"></i>
</div>
<h3>Service Heading</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
consequatur necessitatibus eaque.
</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-brush"></i>
</div>
<h3>Service Heading</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
consequatur necessitatibus eaque.
</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-wrench"></i>
</div>
<h3>Service Heading</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
consequatur necessitatibus eaque.
</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-truck-pickup"></i>
</div>
<h3>Service Heading</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
consequatur necessitatibus eaque.
</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-broom"></i>
</div>
<h3>Service Heading</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
consequatur necessitatibus eaque.
</p>
</div>
</div>
<div class="column">
<div class="card">
<div class="icon-wrapper">
<i class="fas fa-plug"></i>
</div>
<h3>Service Heading</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
consequatur necessitatibus eaque.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
height: 100vh;
width: 100%;
display: grid;
place-items: center;
}
.row {
display: flex;
flex-wrap: wrap;
}
.column {
width: 100%;
padding: 0 1em 1em 1em;
text-align: center;
}
.card {
width: 100%;
height: 100%;
padding: 2em 1.5em;
background: linear-gradient(#ffffff 50%, #2c7bfe 50%);
background-size: 100% 200%;
background-position: 0 2.5%;
border-radius: 5px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: 0.5s;
}
h3 {
font-size: 20px;
font-weight: 600;
color: #1f194c;
margin: 1em 0;
}
p {
color: #575a7b;
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.03em;
}
.icon-wrapper {
background-color: #2c7bfe;
position: relative;
margin: auto;
font-size: 30px;
height: 2.5em;
width: 2.5em;
color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
transition: 0.5s;
}
.card:hover {
background-position: 0 100%;
}
.card:hover .icon-wrapper {
background-color: #ffffff;
color: #2c7bfe;
}
.card:hover h3 {
color: #ffffff;
}
.card:hover p {
color: #f0f0f0;
}
@media screen and (min-width: 768px) {
section {
padding: 0 2em;
}
.column {
flex: 0 50%;
max-width: 50%;
}
}
@media screen and (min-width: 992px) {
section {
padding: 1em 3em;
}
.column {
flex: 0 0 33.33%;
max-width: 33.33%;
}
}
.png "CSS Water Wave Background Animation Effects | devcraw coding")
.png "Awesome Contact Form Using HTML & CSS & JavaScript | How to make contact form 2022| DevCraw")
.png&description=Responsive Services Section Using HTML & CSS | Best Service Section design 2022 | Services Section){kind=link}
0 Comments