new lesson

Natours/starter/sass/components/_card.scss

@@ -2,13 +2,12 @@
     perspective: 150rem;
     -moz-perspective: 150rem;
     position: relative;
-    height: 50rem;
+    height: 52rem;
 
     &__side {
-        color: #fff;
         font-size: 2rem;
 
-        height: 50rem;
+        height: 52rem;
         transition: all .8s ease;
 
         position: absolute;
@@ -17,21 +16,137 @@
         width: 100%;
         backface-visibility: hidden;
 
+        border-radius: 3px;
+        overflow: hidden;
+        box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
+
         &--front {
             background-color: $color-white;
         }
 
         &--back {
             transform: rotateY(180deg);
-            background-color: green;
+
+            &-1{
+              background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark);
+
+            }
+
+            &-2{
+              background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
+
+            }
+            
+            &-3{
+              background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark);
+
+            }
         }
     }
 
     &:hover &__side--front {
-        transform: rotateY(180deg);
+        transform: rotateY(-180deg);
     }
 
     &:hover &__side--back {
         transform: rotateY(0);
     }
-}
+
+    // Front side styling
+    &__picture {
+      background-size: cover;
+      height: 23rem;
+      background-blend-mode: screen;
+      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+
+      &--1{
+        background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark), url(../img/nat-5.jpg);
+      }
+      &--2{
+        background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark), url(../img/nat-6.jpg);
+      }
+      &--3{
+        background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark), url(../img/nat-7.jpg);
+      }
+    }
+
+    &__heading {
+      font-size: 2.8rem; 
+      font-weight: 300;
+      text-transform: uppercase;
+      color: $color-white;
+
+      position: absolute;
+      top: 12rem;
+      right: 2rem;
+      text-align: right;
+
+      width: 75%;
+    }
+
+    &__heading--span {
+      padding: 1rem 1.5rem;
+      -webkit-box-decoration-break: clone;
+      box-decoration-break: clone;
+
+      &--1 {
+        background-image: linear-gradient(to right bottom, rgba($color-secondary-light, .85), rgba($color-secondary-dark, 85)); 
+      }
+
+      &--2 {
+        background-image: linear-gradient(to right bottom, rgba($color-primary-light, .85), rgba($color-primary-dark, 85)); 
+      }
+
+      &--3 {
+        background-image: linear-gradient(to right bottom, rgba($color-tertiary-light, .85), rgba($color-tertiary-dark, 85)); 
+      }
+    }
+
+    &__details {
+      padding: 3rem;
+      ul {
+        list-style: none;
+        width: 80%;
+        margin: 0 auto;
+
+        li {
+          text-align: center;
+          font-size: 1.5rem;
+          padding: 1rem;
+
+          &:not(:last-child){
+            border-bottom: 1px solid $color-grey-light-2;
+          }
+        }
+      }
+    }
+
+
+    //Back side styling
+    &__cta {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      width: 90%;
+      text-align: center;
+    }
+
+    &__price-box {
+      color: $color-white;
+      margin-bottom: 8rem;
+    }
+
+    &__price-only {
+      font-size: 1.4rem;
+      text-transform: uppercase;
+    }
+
+    &__price-value {
+      font-size: 6rem;
+      font-weight: 100;
+    }
+}