Hello readers, in this blog we will move on how to design a responsive service box with the help of html and css.
You can use this service box design in your website. So that your website looks beautiful. Like how you are seeing in the above image. In whose left side a line is given which looks more beautiful to see this service box.
You might like this:
- Responsive Navbar with Social Media share icons
- laptop keyboard design
- Slider Sign In & Sign Up Form
- Login Form
- registration form
- Social Media Icons Hover Effects
Now we know about how we have decorated this service box design.
First we have taken a <section> tag inside <body> tag whose class name is class="service-container".And inside this <div> tag another <div> tag is taken whose class name is given class="service-icon " and took a <span> tag inside it and inside this tag we have taken a <i > whose class name is class="fa fa- globe " or is written for class icon which you can see icon above service box.
and <div>tag whose class name is class ="service-box " , below this we took another <div> tag and And the class name of this <div tag is class ="service-content " and inside it we took a <h1> tag and its class name is class ="service-title" and inside it we have added another <a> tag. Inside which we have written text. And we have taken a <p> tag under the <h1 > tag. In which some text of lorem is written.
We have understood the design of our responsive service box by writing about the code of html, so that you can understand something about it. If you want to understand the design of this service box by watching the video, then you can understand the design of this responsive service box by doing a video tutorial, which we are giving the link of the video below.
Video Tutorial of Responsive Service Box Desing
I sincerely hope that by watching this video tutorial, you must have understood how the code has been written. Which you can easily design a responsive service box and put it on your website. And make the website look great.
If you want to take the code of this responsive service box, then we have given the code of html and css below, which you can copy and paste easily in your text editor and you can see the output in your system.
HTML CODE FILE :
<!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>Service Box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="service-container">
<div class="service-box">
<div class="service-icon">
<span><i class="fa fa-globe"></i></span>
</div>
<div class="service-content">
<h1 class="service-title">
<a href="#">Web Design</a>
</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit eaque tenetur praesentium sed corrupti
esse commodi enim rerum ipsum inventore.</p>
</div>
</div>
<div class="service-box red">
<div class="service-icon">
<span><i class="fa fa-mobile"></i></span>
</div>
<div class="service-content">
<h1 class="service-title">
<a href="#">Responsive Design</a>
</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit eaque tenetur praesentium sed corrupti
esse commodi enim rerum ipsum inventore.</p>
</div>
</div>
</section>
</body>
</html>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0041f93d;
font-family: Arial, Helvetica, sans-serif;
}
.service-container {
width: 100%;
padding: 100px 0;
display: flex;
flex-direction: row;
gap: 30px;
justify-content: center;
}
.service-container .service-box {
width: 450px;
text-align: center;
padding: 0 0 30px 20px;
position: relative;
}
.service-container .service-box::before {
content: "";
border: 3px dotted #00cccc;
border-top-style: solid;
border-bottom-style: solid;
border-right: none;
position: absolute;
border-radius: 30px 0 0 30px;
-webkit-border-radius: 30px 0 0 30px;
-moz-border-radius: 30px 0 0 30px;
-ms-border-radius: 30px 0 0 30px;
-o-border-radius: 30px 0 0 30px;
width: 35%;
top: 90px;
bottom: 7px;
left: 0;
}
.service-container .service-icon {
font-size: 45px;
line-height: 95px;
background-color: #fff;
width: 100px;
height: 100px;
margin: 0 auto 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
box-shadow: 5px 5px 10px #0000004d;
position: relative;
color: #00cccc;
}
.service-container .service-content {
background-color: #fff;
padding: 20px 10px;
border: 3px solid #00cccc;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
box-shadow: 5px 5px 10px #0000004d;
}
.service-container .service-content::before,
.service-container .service-content::after {
content: "";
position: absolute;
background: #00cccc;
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
top: 86px;
left: 35%;
}
.service-container .service-content::after {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: auto;
bottom: 4px;
}
.service-container .service-title a {
font-size: 25px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 10px;
text-decoration: none;
color: #00cccc;
}
.service-container p {
color: #0e0e0e;
font-size: 22px;
line-height: 30px;
}
.service-container .service-box.red,
.service-container .service-box.red .service-title a,
.service-container .service-box.red .service-icon {
color: #F70437;
}
.service-container .service-box.red::before,
.service-container .service-box.red .service-icon,
.service-container .service-box.red .service-content {
border-color: #F70437;
}
.service-container .service-box.red .service-content::after,
.service-container .service-box.red .service-content::before {
background-color: #F70437;
}
@media(max-width:768px) {
.service-container {
flex-direction: column;
}
.service-container .service-box {
width: 85%;
margin: auto;
}
}
Post a Comment