Responsive Neumorphism Service Section

byCodingFlicks -October 26, 2023

0

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.

Video Tutorial:

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. 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.

Each box in the service section we created has a font awesome icon, service heading, text, and a call-to-action button. Each service box has a neomorphism effect. Neomorphism is a UI design trend that combines elements of skeuomorphism and flat design. The hover effect of the boxes has a transform scale animation and the font awesome icon will also animate. Finally, using CSS Media Queries, the snippet has been made responsive for all devices.

You May Also like:

Responsive Neumorphism Service Section [ Source Code ]:

To create this Responsive Neumorphism Service Section project, you need to create HTML and CSS files. Add the external CSS file to the HTML. Then copy the HTML code from the HTML code box below and the CSS code from the CSS code box and paste it into your project file. If you have difficulty using the code, download the code from the button below.

ADD HTML:

<!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>

ADD CSS:

* {
    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;
    }
   }

Hope today's code works properly. Click on the Load More button to get the remaining 100+ code snippets of our website. If you like our website content, please share our blog posts with others. Thanks for visiting the website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.