15 sep

Natours/starter/sass/components/_card.scss

@@ -0,0 +1,37 @@
+.card {
+    perspective: 150rem;
+    -moz-perspective: 150rem;
+    position: relative;
+    height: 50rem;
+
+    &__side {
+        color: #fff;
+        font-size: 2rem;
+
+        height: 50rem;
+        transition: all .8s ease;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        backface-visibility: hidden;
+
+        &--front {
+            background-color: $color-white;
+        }
+
+        &--back {
+            transform: rotateY(180deg);
+            background-color: green;
+        }
+    }
+
+    &:hover &__side--front {
+        transform: rotateY(180deg);
+    }
+
+    &:hover &__side--back {
+        transform: rotateY(0);
+    }
+}

Natours/starter/sass/main.scss

@@ -10,6 +10,7 @@
 @import "components/button";
 @import "components/composition";
 @import "components/feature-box";
+@import "components/card";
 
 @import "layout/header";
 @import "layout/grid";

Natours/starter/sass/pages/_home.scss

@@ -15,4 +15,10 @@
     & > * {
         transform: skewY(7deg);
     }
+}
+
+.section-tours {
+    background-color: $color-grey-light-1;
+    padding: 25rem 0 50rem 0;
+    margin-top: -10rem;
 }