tours section

Natours/starter/css/style.css

@@ -319,6 +319,32 @@ body {
     font-size: 6rem;
     font-weight: 100; }
 
+.story {
+  width: 75%;
+  margin: 0 auto;
+  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  border-radius: 3px;
+  padding: 6rem;
+  padding-left: 9rem;
+  font-size: 1.6rem;
+  transform: skewX(-12deg); }
+  .story > * {
+    transform: skewX(12deg); }
+  .story__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); }
+  .story__img {
+    height: 100%; }
+  .story__text {
+    transform: skewX(12deg); }
+
 .header {
   height: 95vh;
   background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero.jpg");
@@ -393,3 +419,7 @@ body {
   background-color: #f7f7f7;
   padding: 25rem 0 15rem 0;
   margin-top: -10rem; }
+
+.section-stories {
+  padding: 15rem 0;
+  background-color: #f7f7f7; }

Natours/starter/index.html

@@ -231,11 +231,38 @@
           </div>
         </div>
 
-
         <div class="u-center-text u-margin-top-huge">
           <a href="#" class="btn btn--green">Discover all tours</a>
         </div>
+      </section>
 
+      <section class="section-stories">
+        <div class="u-center-text u-margin-bottom-big">
+          <h2 class="heading--secondary">We make people genuinely happy</h2>
+        </div>
+
+        <div class="row">
+          <div class="story">
+            <figure class="story__shape">
+              <img
+                src="img/nat-8.jpg"
+                alt="Person on a tour"
+                class="story__img"
+              />
+            </figure>
+            <div class="story__text"></div>
+            <h3 class="heading--terciary u-margin-bottom-small">
+              I had the best weekend with my family
+            </h3>
+            <p>
+              Lorem ipsum dolor sit amet, qui minim labore adipisicing minim
+              sint cillum sint consectetur cupidatat. Lorem ipsum dolor sit
+              amet, qui minim labore adipisicing minim sint cillum sint
+              consectetur cupidatat. Lorem ipsum dolor sit amet, qui minim
+              labore adipisicing minim sint cillum sint consectetur cupidatat.
+            </p>
+          </div>
+        </div>
       </section>
     </main>
 

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;
+  background-color: $color-grey-light-1;
-    padding: 25rem 0;
+  padding: 25rem 0;
-    margin-top: -20vh;
+  margin-top: -20vh;
 }
 
 .section-features {
-    padding: 20rem 0;
+  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-image: linear-gradient(
-    background-size: cover;
+      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;
+  margin-top: -10rem;
-    transform: skewY(-7deg);
+  transform: skewY(-7deg);
 
-    & > * {
+  & > * {
-        transform: skewY(7deg);
+    transform: skewY(7deg);
-    }
+  }
 }
 
 .section-tours {
-    background-color: $color-grey-light-1;
+  background-color: $color-grey-light-1;
-    padding: 25rem 0 15rem 0;
+  padding: 25rem 0 15rem 0;
-    margin-top: -10rem;
+  margin-top: -10rem;
+}
+
+.section-stories {
+  padding: 15rem 0;
+  background-color: $color-grey-light-1;
 }