The Services section is made up of information about the services or products that a website owner or organization provides. Suppose you are running a Frontend Development Online Course website. In the website services section, you just need to inform your visitors about the services you are providing, isn't it? Otherwise, they will not know about your frontend development services and you will lose customers. Today we will design a simple responsive services section using the CSS Flexbox grid system. In this snippet, we will use a dark neomorphic design technique and CSS animation for the hover effect. The video tutorial below will show you the process of making this snippet.
We hope you have seen the video tutorial about the Responsive Neumorphism Service Section. One of the vital components of a website is the service section or service page. Because this section or page serves the main purpose of a website.
You may Also Like:
- Automatic Image slider in HTML and CSS
- Awesome CSS Button Hover Animation
- CSS 3D Card Flipping Animation
The main function of this section or page is to clearly inform the visitors about a product. Doing so builds trust with visitors and helps them make decisions. On the other hand, the service section can also be used as a marketing tool. By highlighting the unique features, benefits, and value proposition of your services, you can grab visitors' attention. The service section is important for many other reasons. Some of these are SEO benefits, user experience, conversion and lead generation, competitive edge, marketing, etc.
<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<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>CSS Service Section Design</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&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="wrapper">
<div class="card">
<div class="icon">
<i class="fa fa-envira"></i>
</div>
<h2>Service Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, modi</p>
<a href="#">Learn More</a>
</div>
<div class="card">
<div class="icon">
<i class="fa fa-bar-chart"></i>
</div>
<h2>Service Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, modi</p>
<a href="#">Learn More</a>
</div>
<div class="card">
<div class="icon">
<i class="fa fa-clipboard"></i>
</div>
<h2>Service Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, modi</p>
<a href="#">Learn More</a>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: montserrat;
}
.wrapper {
width: 80%;
display: flex;
justify-content: space-around;
}
.icon {
width: 70px;
height: 70px;
background: #ee5310;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-bottom: 30px;
box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.icon i {
color: #fff;
font-size: 25px;
}
.card {
width: 300px;
height: 350px;
background-color: #212121;
box-shadow: 15px 15px 30px #191919, -15px -15px 30px #292929;
transition: all .5s ease;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
color: #a7a9ab;
}
.card h2 {
font-size: 16px;
text-transform: uppercase;
margin-bottom: 15px;
letter-spacing: 1px;
}
.card p {
font-size: 12px;
line-height: 2;
}
.card a {
background: linear-gradient(45deg,#bf2311,#e7550c);
display: inline-block;
text-decoration: none;
color: #fff;
margin-top: 30px;
padding: 5px 20px;
border-radius: 50px;
}
.card:hover {
transform: scale(1.05);
}
.card:hover i{
transition: all .9s ease;
transform: rotate(360deg);
}
@media (max-width:991px){
.wrapper {
flex-direction: column;
margin: auto;
align-items: center;
}
.card{
width: 250px;
margin-bottom: 30px;
}
}
For More VISIT HERE
Top comments (0)