Responsive service section with animations

The service section plays a very important role in showcasing what businesses and professional organizations have to offer. All types of business websites, including law firms, consulting firms, depend on how their service section is presented to potential clients. the way you present your services can significantly impact how potential clients perceive your brand. Today we will share a snippet called 'Responsive service section with animations' which is created with HTML CSS. Since responsive web design is a must for modern web design, the snippet is made responsive. The video tutorial below shows how to create the snippet.

Video Tutorial:

In today's digital landscape, a well-designed website is a necessity. Because through it we can capture and retain the attention of our visitors. Dynamic, visually appealing elements need to be present on the website to hook the visitor. The service section gives an overview about what the business does, sometimes descriptions of each service and benefits. A well-designed Service Section Clarifies Offerings, Builds Trust, Improves User Experience, Drives Conversions, Enhances SEO, Differentiates the Business, Showcases Expertise, Informs Decision-Making, Supports Marketing Efforts, Improves Transparency etc.

In this snippet, we have three primary service boxes. Every box represents a unique service and includes an icon, title, and description for easy identification and understanding. When users hover over any of the service boxes, a dynamic border animation will be triggered. The background subtly shifts colors and a sleek sliding animation passes over the box. This hover animation in this snippet is achieved through the use of CSS pseudo-elements and transitions.

You May Also Like:

Responsive service section with animations [ Source Code ]:

In order to create the Responsive service section with animations, you will need to start by creating the necessary files such as HTML and CSS. The entire process is demonstrated in the video tutorial above. Once you have completed that, simply copy the provided source code and paste it into your HTML and CSS files. If you would like to access the direct code for this project, you can download it by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <title>Responsive Animated Service Section</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <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>
    <div class="section-header">
        <h2>Our Services</h2>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="container">
        <div class="box">
            <span></span>
            <div class="icons">
                <i class="fa fa-user-secret"></i>
            </div>
            <h3>Criminal Law</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet et ullam labore, molestiae accusamus</p>
        </div>
        <div class="box">
            <span></span>
            <div class="icons">
                <i class="fa fa-gavel"></i>
            </div>
            <h3>Insurance Law</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet et ullam labore, molestiae accusamus</p>
        </div>
        <div class="box">
            <span></span>
            <div class="icons">
                <i class="fa fa-balance-scale"></i>
            </div>
            <h3>Corporate Law</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet et ullam labore, molestiae accusamus</p>
        </div>
    </div>
</body>
</html>

ADD CSS:

body {
	background: #262b3e;
	margin: 0;
	font-family: montserrat;
}
.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	padding: 20px;
}
.section-header {
	text-align: center;
	margin-top: 5%;
	color: #fff;
}
.section-header h2 {
	font-family: "Bebas Neue", sans-serif;
	font-size: 45px;
	margin: 0;
}
.section-header p {
	margin: 0;
}
.box {
	position: relative;
	height: 350px;
	background: linear-gradient(45deg, #fe7275, #a73ab1);
	box-sizing: border-box;
	padding: 50px;
	transition: .5s;
	overflow: hidden;
	margin: 20px;
	text-align: center;
	border-radius: 10px;
	transition: all 0.6s ease;
}
.box p {
	color: #fff;
	font-size: 16px;
}
.box h3 {
	font-size: 25px;
	text-transform: uppercase;
	color: #fff;
}
.icons {
	width: 80px;
	height: 80px;
	background: #fff;
	margin: auto;
	border-radius: 50px;
}
.icons i {
	font-size: 35px;
	line-height: 80px;
}
.box:before, .box:after {
	content: '';
	position: absolute;
	width: 0%;
	height: 0%;
	border: 5px solid #fff;
	opacity: 0;
	transition: .5s;
	box-sizing: border-box;
}
.box:before {
	top: 0;
	left: 0;
	border-top-left-radius: 10px;
}
.box:after {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 10px;
}
.box:hover:before, .box:hover:after {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition-delay: .3s;
}
.box:hover {
	box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
.box span {
	position: absolute;
	top: 0;
	left: -110%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	transition: .5s;
	transform: skewX(10deg);
}
.box:hover span {
	left: 110%;
}
.box:hover {
	background-image: linear-gradient(45deg, #b343cb, #180293);
	box-shadow: 0 2px 15px 5px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1000px) {
	.box {
		padding: 25px;
	}
}
@media (max-width: 600px) {
	.box {
		height: 320px;
		margin: 0;
	}
	.box h3 {
		font-size: 20px;
	}
}

Adding an animated services section to your website can greatly improve the user experience and give your site a more modern and professional look. By using the techniques described in this blog post, you can improve the aesthetics of your website. We hope you have collected the snippet. For more, please click the load more button on our homepage. Feel free to do drop your comments below. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive service section with animations [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive service section with animations

Video Tutorial:

Responsive service section with animations [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form