Animated Responsive Service Section

Animated Responsive Service Section

A service section is a dedicated section of a website that contains a detailed description of what services an organization, business, or individual offers. This section is a platform where company owners showcase their products or services to their customers. If the service section is well presented to the users, there is a possibility of increasing the sale. Today we will design an animated and responsive service section using a CSS neomorphism and animation. Add fonts, and icons to your project by watching the video tutorial below. There are many videos on frontend development on our YouTube channel. You are invited to visit.

Video Tutorial:

Hope you have watched the video tutorial. The service section is one of the most important elements of a website. It not only generates a lot of leads and sales but also increases the credibility of a website. For example, if you go to a website to take a service, but if you get any details, will you take the service? Of course not. Any company that is transparent can be understood through the detailed information in its service section. The online landscape has become very competitive. A properly designed services section highlights a company's products or services that make them stand out from other companies. The role of a well-designed service section in enhancing business growth and trust is undeniable.

Our service section layout is built on the CSS dark neomorphism concept. For those who don't know, CSS neumorphism is an illusion of depth created with soft shadows. This design trend is used to design User Interface (UI) and User Experience (UX). Also, the line icon used in the snippet has a glowing effect. The glowing color will change in the hover state. The snippet is designed using CSS Flexbox. The animation you see when hovering over each responsive service box is created using the CSS transform property. All your confusion will be cleared by watching the above video tutorial.

You May also like:

Animated Responsive Service Section [ Source Code ]:

To create the snippet, first add the line icon CDN to your HTML file. Then add poppins font CDN from Google Fonts. Add your CSS file to the HTML file. Copy the code from the code box below and paste it into your files. If you have any problems after testing it in the browser, download the code from the download button below.

ADD HTML:

<html lang="en">
 <!-- divinectorweb.com -->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Services Section Design using HTML and CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
  <body>
    <div class="wrapper">
      <div class="box-area">
        <div class="icon-area">
          <i class="lni lni-keyboard"></i>
        </div>
        <h6>Coding</h6>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, nobis?</p>
      </div>

      <div class="box-area">
        <div class="icon-area">
          <i class="lni lni-layers"></i>
        </div>
        <h6>designing</h6>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, nobis?</p>
      </div>
      
      <div class="box-area">
        <div class="icon-area">
          <i class="lni lni-paint-roller"></i>
        </div>
        <h6>Photography</h6>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, nobis?</p>
      </div>
    </div>
    
  </body>
 </html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #222;
	font-family: 'Poppins', sans-serif;
	text-align: center;
}
.wrapper {
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.box-area {
	width: 350px;
	margin: 25px;
	padding: 40px;
	background-color: #222;
	color: #fff;
	box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5),
				inset 3px 3px 5px rgba(255,255,255,.07);
	transition: all 0.6s ease-in-out;
}
.box-area .icon-area {
	width: 100%;
	margin-bottom: 40px;
}
.icon-area i {
	font-size: 70px;
	color: #fff;
	transition: all .9s ease-in-out;
	text-shadow: 0 0 10px rgba(33,156,243,1),
	0 0 10px rgba(33,156,243,1);
}
.box-area h6 {
	margin-bottom: 10px;
	color: #fff;
	font-size: 30px;
	font-family: meddon;
	text-transform: capitalize;
	transition: all .9s ease-in-out;
}
.box-area:hover {
	background-color: #161619;
	transform: scale(1.15);
}
.box-area:hover i{
	transform: rotate(360deg);
	text-shadow: 0 0 10px rgba(233,85,99,1),
	0 0 10px rgba(233,85,99,1);
}
.box-area:hover h6{
	color: #fff;
	text-shadow: 0 0 10px rgba(233,85,99,1),
	0 0 10px rgba(233,85,99,1);
}

@media (max-width: 767px){
	.box-area:hover {
		transform: scale(1);
	}
}

Hope the code is working properly. Click the Load More button below our homepage to get more such snippets. Thanks for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box