From 11ea48a038330a9ff72d8f56f2ec89721445fb67 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Sun, 2 May 2021 14:21:03 +0300
Subject: [PATCH] styled front side of the card component

---
 src/commons/tours-section/tours.jsx | 18 ++++++-
 src/sass/abstracts/_variables.scss  |  1 +
 src/sass/components/_card.scss      | 79 +++++++++++++++++++++++++++--
 3 files changed, 92 insertions(+), 6 deletions(-)

diff --git a/src/commons/tours-section/tours.jsx b/src/commons/tours-section/tours.jsx
index c78152a..6695e78 100644
--- a/src/commons/tours-section/tours.jsx
+++ b/src/commons/tours-section/tours.jsx
@@ -8,7 +8,23 @@ function Tours() {
       <div className="row">
         <div className="col-1-of-3">
           <div className="card">
-            <div className="card__side card__side--front">Front</div>
+            <div className="card__side card__side--front">
+              <div className="card__picture card__picture--1">&nbsp;</div>
+              <h4 className="card__heading">
+                <span className="card__heading-span card__heading-span--1">
+                  The Sea Explorer
+                </span>
+              </h4>
+              <div className="card__details">
+                <ul>
+                  <li>3 day tours</li>
+                  <li>Up to 30 people</li>
+                  <li>2 tour guides</li>
+                  <li>Sleep in cozy hotels</li>
+                  <li>Difficulty: easy</li>
+                </ul>
+              </div>
+            </div>
             <div className="card__side  card__side--back card__side--back-1">
               Back
             </div>
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
index bfd9326..c5d3d1b 100644
--- a/src/sass/abstracts/_variables.scss
+++ b/src/sass/abstracts/_variables.scss
@@ -10,6 +10,7 @@ $color-tertiary-light: #2998ff;
 $color-tertiary-dark: #5643fa;
 
 $color-grey-light-1: #f7f7f7;
+$color-grey-light-2: #eee;
 
 $color-grey-dark: #777;
 $color-white: #fff;
diff --git a/src/sass/components/_card.scss b/src/sass/components/_card.scss
index b807518..7954ec8 100644
--- a/src/sass/components/_card.scss
+++ b/src/sass/components/_card.scss
@@ -1,12 +1,11 @@
 .card {
+  // functionality
   perspective: 150rem;
   position: relative;
-  height: 50rem;
+  height: 52rem;
 
   &__side {
-    font-size: 2rem;
-
-    height: 50rem;
+    height: 52rem;
     transition: all 0.58s ease;
     position: absolute;
     top: 0;
@@ -14,6 +13,7 @@
     width: 100%;
     backface-visibility: hidden;
     border-radius: 3px;
+    overflow: hidden;
     box-shadow: $shadow-default;
 
     &--front {
@@ -34,10 +34,79 @@
   }
 
   &:hover &__side--front {
-    transform: rotateY(180deg);
+    transform: rotateY(-180deg);
   }
 
   &:hover &__side--back {
     transform: rotateY(0deg);
   }
+
+  // Front side styling
+
+  &__picture {
+    background-size: cover;
+    height: 23rem;
+    background-blend-mode: screen;
+    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+
+    &--1 {
+      background-image: linear-gradient(
+          to right bottom,
+          $color-secondary-light,
+          $color-secondary-dark
+        ),
+        url(../../commons/images/nat-5.jpg);
+    }
+
+    &--2 {
+      background-image: url(../../commons/images/nat-5.jpg);
+    }
+
+    &--3 {
+      background-image: url(../../commons/images/nat-5.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;
+    box-decoration-break: clone;
+    &--1 {
+      background-image: linear-gradient(
+        to right bottom,
+        rgba($color-secondary-light, 0.85),
+        rgba($color-secondary-dark, 0.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;
+        }
+      }
+    }
+  }
 }