Responsive Services Box with Flip Animation using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create Fully Responsive Services Box with Flip Animation using only HTML & CSS. Earlier I've shared a blog on how to create an Awesome Product Card Design in HTML & CSS. You may have seen the services box on many websites.

The services page is one of the most important pages on your website to show what you offer to your visitors or content viewers. Based on the service you need to figure out the best way to explain it. These could be through short sentences, long paragraphs, bullet point sections, or video.

In this program (Responsive Services Box with Flip Animation), on the webpage, there are three service cards or boxes with the icon and title of the services but when you hover on a particular box then the description of that hovered services card will be visible with a flip animation. This flip animation is fully based on HTML & CSS and these boxes are responsive for any devices.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Services Box with Flip Animation).

Video Tutorial of Responsive Services Box with Flip Animation

In the video, you have seen the flip animation of these Responsive Service Cards or Boxes and I hope you have understood the codes behind creating these cards and their animation. As you know, this is a pure CSS program so there are no vast codes used on this Services Box program. I have used CSS grid property to make these card responsive.

If you like this program (Responsive Services Box with Flip Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects, websites, and HTML pages.

Responsive Services Box with Flip Animation [Source Codes]

To create this program (Responsive Services Box with Flip Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Responsive Services Box | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <div class="front-face">
          <div class="icon">
<i class="fas fa-code"></i></div>
<span>Web Design</span>
        </div>
<div class="back-face">
          <span>Web Design</span>
          <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
</div>
</div>
<div class="box">
        <div class="front-face">
          <div class="icon">
<i class="fas fa-chart-line"></i></div>
<span>Advertising</span>
        </div>
<div class="back-face">
          <span>Advertising</span>
          <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
</div>
</div>
<div class="box">
        <div class="front-face">
          <div class="icon">
<i class="fas fa-rocket"></i></div>
<span>Game Design</span>
        </div>
<div class="back-face">
          <span>Game Design</span>
          <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
</div>
</div>
</div>
</body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100%;
  width: 100%;
  text-align: center;
  background: #f2f2f2;
}
.wrapper{
  display: grid;
  margin: 200px 90px auto;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
@media (max-width: 700px) {
  .wrapper{
    margin: 200px auto;
  }
}
.wrapper .box{
  width: 350px;
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
}
.wrapper .box .front-face{
  background: #fff;
  height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
  transition: all 0.5s ease;
}
.box .front-face .icon{
  height: 80px;
}
.box .front-face .icon i{
  font-size: 65px;
}
.box .front-face span,
.box .back-face span{
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.box .front-face .icon i,
.box .front-face span{
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box .back-face{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 220px;
  width: 100%;
  padding: 30px;
  color: #fff;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transform: translateY(110px) rotateX(-90deg);
  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
  transition: all 0.5s ease;
}
.box .back-face p{
  margin-top: 10px;
  text-align: justify;
}
.box:hover .back-face{
  opacity: 1;
  transform: rotateX(0deg);
}
.box:hover .front-face{
  opacity: 0;
  transform: translateY(-110px) rotateX(90deg);
}

Thanks for visiting, Keep visiting.

8 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Baba Shankar S N August 9, 2020 at 6:23 PM
you are genius bro. Please guide us bro in creating such.
Haj ŽiviniceSeptember 5, 2020 at 5:51 AM
Tnx
RAJ PatelOctober 20, 2020 at 6:52 PM
you are really full stack web developer, can you share some tips.
UnknownFebruary 27, 2021 at 6:40 PM
sir php se file uploading system kese bnae jime agar koi file upload karega to vo web me save ho jayega aur use dusre log bhi dekh skte h
UtkarshApril 26, 2021 at 5:32 PM
please sir tell us that how to add on blogger please sir

Video Tutorial of Responsive Services Box with Flip Animation

You might like this:

Responsive Services Box with Flip Animation [Source Codes]

Thanks for visiting, Keep visiting.

8 Comments

Post a Comment

About Us

Contact Form