features section done

Natours/starter/sass/abstracts/_variables.scss

@@ -1,6 +1,6 @@
 //Colors
-$color-primary: #7ed56f;
-$color-primary-light: #55c57a;
+$color-primary-light: #7ed56f;
+$color-primary: #55c57a;
 $color-primary-dark: #28b485;
 
 $color-grey-light-1: #f7f7f7;
@@ -12,4 +12,7 @@ $color-black: #000;
 //Grid Spacing
 $grid-width: 114rem;
 $gutter-vertical: 8rem;
-$gutter-horizontal: 6rem;
+$gutter-horizontal: 6rem;
+
+//Font sizing
+$default-font-size: 1.6rem;

Natours/starter/sass/base/_typography.scss

@@ -54,4 +54,17 @@ body {
         transform: skewY(2deg) skewX(15deg) scale(1.1);
         text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
     }
+}
+
+.heading--terciary {
+    font-size: $default-font-size;
+    font-weight: 700;
+    text-transform: capitalize;
+}
+
+.paragraph {
+    font-size: $default-font-size;
+    &:not(:last-child) {
+        margin-bottom: 3rem;
+    }
 }

Natours/starter/sass/base/_utilities.scss

@@ -2,6 +2,14 @@
     text-align: center;
 }
 
-.u-margin-bottom-8 {
+.u-margin-bottom-small {
+    margin-bottom: 2rem;
+}
+
+.u-margin-bottom-medium {
+    margin-bottom: 4rem;
+}
+
+.u-margin-bottom-big {
     margin-bottom: 8rem;
 }

Natours/starter/sass/components/_button.scss

@@ -8,7 +8,7 @@
         border-radius: 10rem;
         transition: all 0.2s;
         position: relative;
-        font-size: 1.6rem; 
+        font-size: $default-font-size; 
     }
 
     &--animated {
@@ -50,4 +50,30 @@
         z-index: -1;
         transition: all 0.4s;
     }
+}
+
+.btn-text {
+    &:link,
+    &:visited {
+        font-size: $default-font-size;
+        color: $color-primary;
+        display: inline-block;
+        text-decoration: none;
+        border-bottom: 1px solid $color-primary;
+        padding: 3px;
+        transition: all .2s;
+    }
+
+    &:hover {
+        background-color: $color-primary;
+        color: $color-white;
+        box-shadow: 0 1rem 2reem rgba($color-black, .15);
+        transform: translateY(-2px);
+    }
+
+    &:active {
+
+        box-shadow: 0 .5rem 1reem rgba($color-black, .15);
+        transform: translateY(0px);
+    }
 }

Natours/starter/sass/components/_composition.scss

@@ -0,0 +1,38 @@
+.composition {
+    position: relative;
+    &__photo {
+        width: 55%;
+        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
+        border-radius: 2px;
+        position: absolute;
+        z-index: 10;
+        transition: all .2s;
+        outline-offset: 2rem;
+
+        &--p1 {
+            left: 0;
+            top: -2rem;
+        }
+
+        &--p2 {
+            right: 0;
+            top: 2rem;
+        }
+
+        &--p3 {
+            left: 20%;
+            top: 10rem;
+        }
+
+        &:hover {
+            outline: 1.5rem solid $color-primary;
+            transform: scale(1.05) translateY(-.5rem);
+            box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
+            z-index: 20;
+        }
+    }
+
+    &:hover &__photo:not(:hover) {
+        transform: scale(0.9);
+    }
+}

Natours/starter/sass/components/_feature-box.scss

@@ -0,0 +1,26 @@
+.feature-box {
+    background-color: rgba($color-white, .8);
+    font-size: 1.5rem;
+    padding: 2.5rem;
+    text-align: center;
+    border-radius: 3px;
+    box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
+    transition: transform .3s;
+
+    &__icon {
+        font-size: 6rem;
+        margin-bottom: .5rem;
+        display: inline-block;
+        background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+
+    &__text {
+
+    }
+
+    &:hover {
+        transform: translateY(-1.5rem) scale(1.03);
+    }
+}

Natours/starter/sass/main.scss

@@ -8,6 +8,9 @@
 @import "base/utilities";
 
 @import "components/button";
+@import "components/composition";
+@import "components/feature-box";
+
 @import "layout/header";
 @import "layout/grid";
 

Natours/starter/sass/pages/_home.scss

@@ -2,4 +2,17 @@
     background-color: $color-grey-light-1;
     padding: 25rem 0;
     margin-top: -20vh;
+}
+
+.section-features {
+    padding: 20rem 0;
+    background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/nat-4.jpg");
+    background-size: cover;
+    
+    margin-top: -10rem;
+    transform: skewY(-7deg);
+
+    & > * {
+        transform: skewY(7deg);
+    }
 }