---
title: Flipboard Code Snippet
description: "The codes below are use if you want to implement the 'flipboard' section. ** i forgot the site where we had the flipboard section. will update with the url soon **HTML** ``` Lorem Ipsum Lorem ipsum dolor sit amet, consectetur…"
url: "https://www.lukehayes.com.au/kb/flipboard-code-snippet/"
updated: "2021-11-04"
category: HTML
---

# Flipboard Code Snippet

The codes below are use if you want to implement the 'flipboard' section.

** i forgot the site where we had the flipboard section. will update with the url soon

**HTML**

```
<div class="home-services-container">
  <div class="services-column services-column1">
    <div class="front vertical-align-middle">
      <div class="front-inner vertical-align-middle">
        <h4>Lorem Ipsum</h4>
      </div>
    </div>
    <div class="back vertical-align-middle">
      <div class="back-inner">
        <p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
  <div class="services-column services-column2">
    <div class="front vertical-align-middle">
      <div class="front-inner vertical-align-middle">
        <h4>Lorem Ipsum</h4>
      </div>
    </div>
    <div class="back vertical-align-middle">
      <div class="back-inner">
        <p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
  <div class="services-column services-column3">
    <div class="front vertical-align-middle">
      <div class="front-inner vertical-align-middle">
        <h4>Lorem Ipsum</h4>
      </div>
    </div>
    <div class="back vertical-align-middle">
      <div class="back-inner">
        <p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
  <div class="services-column services-column4">
    <div class="front vertical-align-middle">
      <div class="front-inner vertical-align-middle">
        <h4>Lorem Ipsum</h4>
      </div>
    </div>
    <div class="back vertical-align-middle">
      <div class="back-inner">
        <p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>
```

**CSS**

```
/*home flipboard*/
#main .home-services-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: unset !important;
  padding: 0 !important;
}
#main .home-services-container .services-column {
  width: 24.6%;
  float: left;
  height: 497px;
  margin: 0 0 .5% 0.5%;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
#main .home-services-container .services-column3 .front {
  background-image: url(/wp-content/uploads/2020/05/service_bg3.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#main .home-services-container .services-column2 .front {
  background-image: url(/wp-content/uploads/2020/05/service_bg2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#main .home-services-container .services-column1 .front, #main .home-services-container .services-column4 .front {
  background-image: url(/wp-content/uploads/2020/05/service_bg1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.front, .back {
  height: inherit;
  width: 100%;
}
.back {
  margin-top: -497px;
  padding: 0 25px;
  background-color: rgb(234, 234, 234);
}
#main .home-services-container .services-column > .back .services-links {
  background-color: transparent;
  border: 2px solid #000;
  padding: 9px 10px;
  text-transform: uppercase;
}
#main .home-services-container .services-column > .back .services-links, #main .home-services-container .services-column > .back p span {
  color: #000;
}
#main .home-services-container .services-column > .back p {
  text-align: center;
}
#main .home-services-container .services-column:hover > .front, #main .home-services-container .services-column:hover > .back {
  opacity: 1;
  -ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
  transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
  -webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
}
#main .home-services-container .services-column > .front, #main .home-services-container .services-column > .back {
  transition: all ease 500ms;
  transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#main .home-services-container .services-column:hover > .front, #main .home-services-container .services-column:hover > .back {
  -ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
  transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
  -webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
}
#main .home-services-container .services-column > .back {
  transform: rotateY(180deg);
}
#main .home-services-container .services-column:hover > .back {
  transform: rotateY(0deg);
}
#main .home-services-container .services-column > .front {
  transform: rotateY(0deg);
}
#main .home-services-container .services-column:hover > .front {
  transform: rotateY(-180deg);
}
#main .home-services-container .services-column > .front, #main .home-services-container .services-column > .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 40px;
}
#main .home-services-container .services-column h4 {
  font-size: 25px;
  color: #fff;
  max-width: 200px;
  margin-top: 30px;
  text-transform: uppercase;
  margin-bottom: 0;
}
#main .home-services-container .services-column1 h4, #main .home-services-container .services-column2 h4 {
  margin-top: 59px;
}
#main .home-services-container .services-column1 {
  margin-left: 0;
}
#main .home-services-container .services-column1 h4 {
  margin-left: 21px;
}
#main .home-services-container .services-column2 h4 {
  margin-left: 40px;
}
#main .home-services-container .services-column3 h4, #main .home-services-container .services-column4 h4 {
  margin-left: 50px;
}
#main .home-services-container .services-column1 > .front {
  background: #b79a95;
}
#main .home-services-container .services-column2 > .front {
  background: #cab3af;
}
#main .home-services-container .services-column3 > .front {
  background: #b79a95;
}
#main .home-services-container .services-column4 > .front {
  background: #cab3af;
}
/*END home flipboard*/
```