tours section

Natours/starter/sass/components/_story.scss

@@ -0,0 +1,36 @@
+.story {
+  width: 75%;
+  margin: 0 auto;
+  box-shadow: 0 3rem 6rem rgba($color-black, 0.1);
+  background-color: $color-white;
+  border-radius: 3px;
+  padding: 6rem;
+  padding-left: 9rem;
+  font-size: $default-font-size;
+  transform: skewX(-12deg);
+
+  & > * {
+    transform: skewX(12deg);
+  }
+
+  &__shape {
+    width: 15rem;
+    height: 15rem;
+    float: left;
+
+    -webkit-shape-outside: circle(50% at 50% 50%);
+    shape-outside: circle(50% at 50% 50%);
+
+    -webkit-clip-path: circle(50% at 50% 50%);
+    clip-path: circle(50% at 50% 50%);
+    transform: translateX(-3rem) skewX(12deg);
+  }
+
+  &__img {
+    height: 100%;
+  }
+
+  &__text {
+    transform: skewX(12deg);
+  }
+}

Natours/starter/sass/main.scss

@@ -11,8 +11,9 @@
 @import "components/composition";
 @import "components/feature-box";
 @import "components/card";
+@import "components/story";
 
 @import "layout/header";
 @import "layout/grid";
 
-@import "pages/home"
+@import "pages/home";

Natours/starter/sass/pages/_home.scss

@@ -1,24 +1,34 @@
 .section-about {
-    background-color: $color-grey-light-1;
-    padding: 25rem 0;
-    margin-top: -20vh;
+  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);
+  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;
 
-    & > * {
-        transform: skewY(7deg);
-    }
+  margin-top: -10rem;
+  transform: skewY(-7deg);
+
+  & > * {
+    transform: skewY(7deg);
+  }
 }
 
 .section-tours {
-    background-color: $color-grey-light-1;
-    padding: 25rem 0 15rem 0;
-    margin-top: -10rem;
+  background-color: $color-grey-light-1;
+  padding: 25rem 0 15rem 0;
+  margin-top: -10rem;
+}
+
+.section-stories {
+  padding: 15rem 0;
+  background-color: $color-grey-light-1;
 }