diff --git a/Natours/starter/css/.DS_Store b/Natours/starter/css/.DS_Store
new file mode 100644
index 0000000..8a38f49
Binary files /dev/null and b/Natours/starter/css/.DS_Store differ
diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
index 252c94c..08d78a1 100644
--- a/Natours/starter/css/style.css
+++ b/Natours/starter/css/style.css
@@ -213,6 +213,31 @@ body {
   .feature-box:hover {
     transform: translateY(-1.5rem) scale(1.03); }
 
+.card {
+  perspective: 150rem;
+  -moz-perspective: 150rem;
+  position: relative;
+  height: 50rem; }
+  .card__side {
+    color: #fff;
+    font-size: 2rem;
+    height: 50rem;
+    transition: all .8s ease;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    backface-visibility: hidden; }
+    .card__side--front {
+      background-color: #fff; }
+    .card__side--back {
+      transform: rotateY(180deg);
+      background-color: green; }
+  .card:hover .card__side--front {
+    transform: rotateY(180deg); }
+  .card:hover .card__side--back {
+    transform: rotateY(0); }
+
 .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");
@@ -282,3 +307,8 @@ body {
   transform: skewY(-7deg); }
   .section-features > * {
     transform: skewY(7deg); }
+
+.section-tours {
+  background-color: #f7f7f7;
+  padding: 25rem 0 50rem 0;
+  margin-top: -10rem; }
diff --git a/Natours/starter/index.html b/Natours/starter/index.html
index ad261f0..e7c2c99 100644
--- a/Natours/starter/index.html
+++ b/Natours/starter/index.html
@@ -1,107 +1,157 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        
-        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="css/icon-font.css">
+    <link
+      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
+      rel="stylesheet"
+    />
 
-        <link rel="stylesheet" href="css/icon-font.css">
-        <link rel="stylesheet" href="css/style.css">
-        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
-        
-        <title>Natours | Exciting tours for adventurous people</title>
-    </head>
-    <body>
-        <header class="header">
-            <div class="header__logo-box">
-                <img src="./img/logo-white.png" alt="Logo" class="header__logo">
+    <link rel="stylesheet" href="css/icon-font.css" />
+
+    <link rel="stylesheet" href="css/icon-font.css" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
+
+    <title>Natours | Exciting tours for adventurous people</title>
+  </head>
+  <body>
+    <header class="header">
+      <div class="header__logo-box">
+        <img src="./img/logo-white.png" alt="Logo" class="header__logo" />
+      </div>
+      <div class="header__text-box">
+        <h1 class="heading--primary">
+          <span class="heading--primary-main">outdoors</span>
+          <span class="heading--primary-sub">is where life happens</span>
+        </h1>
+
+        <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
+      </div>
+    </header>
+
+    <main>
+      <section class="section-about">
+        <div class="u-center-text u-margin-bottom-big">
+          <h2 class="heading--secondary">
+            Exciting tours for adventurous people
+          </h2>
+        </div>
+        <div class="row">
+          <div class="col-1-of-2">
+            <h3 class="heading--terciary u-margin-bottom-small">
+              You're going to fall n love with nature
+            </h3>
+            <p class="paragraph">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo
+              ipsum magnam, accusantium quo modi deserunt excepturi praesentium
+              dolores dolorem cumque consequatur quod veniam!
+            </p>
+            <h3 class="heading--terciary u-margin-bottom-small">
+              Live adventure like never have before
+            </h3>
+            <p class="paragraph">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo
+              ipsum magnam.
+            </p>
+            <a href="#" class="btn-text">Learn more &rarr;</a>
+          </div>
+          <div class="col-1-of-2">
+            <div class="composition">
+              <img
+                src="img/nat-1-large.jpg"
+                alt="Photo 1"
+                class="composition__photo composition__photo--p1"
+              />
+              <img
+                src="img/nat-2-large.jpg"
+                alt="Photo 2"
+                class="composition__photo composition__photo--p2"
+              />
+              <img
+                src="img/nat-3-large.jpg"
+                alt="Photo 3"
+                class="composition__photo composition__photo--p3"
+              />
             </div>
-            <div class="header__text-box">
-                <h1 class="heading--primary">
-                    <span class="heading--primary-main">outdoors</span>
-                    <span class="heading--primary-sub">is where life happens</span>
-                </h1>
-
-                <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
+          </div>
+        </div>
+      </section>
+      <section class="section-features">
+        <div class="row">
+          <div class="col-1-of-4">
+            <div class="feature-box">
+              <i class="feature-box__icon icon-basic-world"></i>
+              <h3 class="heading-tertiary u-margin-bottom-small">
+                Explore the world
+              </h3>
+              <p class="feature-box__text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
+                tempora adipisci, laboriosam assumenda nostrum ab dicta.
+              </p>
             </div>
-        </header>
+          </div>
+          <div class="col-1-of-4">
+            <div class="feature-box">
+              <i class="feature-box__icon icon-basic-compass"></i>
+              <h3 class="heading-tertiary u-margin-bottom-small">
+                Meet nature
+              </h3>
+              <p class="feature-box__text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
+                tempora adipisci, laboriosam assumenda nostrum ab dicta.
+              </p>
+            </div>
+          </div>
+          <div class="col-1-of-4">
+            <div class="feature-box">
+              <i class="feature-box__icon icon-basic-map"></i>
+              <h3 class="heading-tertiary u-margin-bottom-small">
+                Find your way
+              </h3>
+              <p class="feature-box__text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
+                tempora adipisci, laboriosam assumenda nostrum ab dicta.
+              </p>
+            </div>
+          </div>
+          <div class="col-1-of-4">
+            <div class="feature-box">
+              <i class="feature-box__icon icon-basic-heart"></i>
+              <h3 class="heading-tertiary u-margin-bottom-small">
+                Live a healthier life
+              </h3>
+              <p class="feature-box__text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
+                tempora adipisci, laboriosam assumenda nostrum ab dicta.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
 
-        <main>
-            <section class="section-about">
-                <div class="u-center-text u-margin-bottom-big">
-                    <h2 class="heading--secondary">
-                        Exciting tours for adventurous people
-                    </h2>
-                </div>
-                <div class="row">
-                    <div class="col-1-of-2">
-                        <h3 class="heading--terciary u-margin-bottom-small">You're going to fall n love with nature</h3>
-                        <p class="paragraph">
+      <section class="section-tours">
+        <div class="u-center-text u-margin-bottom-big">
+          <h2 class="heading--secondary">Most popular tours</h2>
+        </div>
+        <div class="row">
+          <div class="col-1-of-3">
+            <div class="card">
+              <div class="card__side card__side--front">TEXT</div>
+              <div class="card__side card__side--back">TEXT</div>
+            </div>
+          </div>
+          <div class="col-1-of-3">Col 1 of 3</div>
+          <div class="col-1-of-3">Col 1 of 3</div>
+        </div>
+      </section>
+    </main>
 
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo ipsum magnam, accusantium quo modi deserunt excepturi praesentium dolores dolorem cumque consequatur quod veniam!
-                        </p>
-                        <h3 class="heading--terciary u-margin-bottom-small">Live adventure like never have before</h3>
-                        <p class="paragraph">
-                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo ipsum magnam.
-                        </p>
-                        <a href="#" class="btn-text">Learn more &rarr;</a>
-                    </div>
-                    <div class="col-1-of-2">
-                        <div class="composition">
-                            <img src="img/nat-1-large.jpg" alt="Photo 1" class="composition__photo composition__photo--p1">
-                            <img src="img/nat-2-large.jpg" alt="Photo 2" class="composition__photo composition__photo--p2">
-                            <img src="img/nat-3-large.jpg" alt="Photo 3" class="composition__photo composition__photo--p3">
-                        </div>
-                    </div>
-                </div>
-            </section>
-            <section class="section-features">
-
-                <div class="row">
-                    <div class="col-1-of-4">
-                        <div class="feature-box">
-                            <i class="feature-box__icon icon-basic-world"></i>
-                            <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
-                            <p class="feature-box__text">
-                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
-                            </p>
-                        </div>
-                    </div>
-                    <div class="col-1-of-4">
-                        <div class="feature-box">
-                            <i class="feature-box__icon icon-basic-compass"></i>
-                            <h3 class="heading-tertiary u-margin-bottom-small">Meet nature</h3>
-                            <p class="feature-box__text">
-                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
-                            </p>
-                        </div>
-                    </div>
-                    <div class="col-1-of-4">
-                        <div class="feature-box">
-                            <i class="feature-box__icon icon-basic-map"></i>
-                            <h3 class="heading-tertiary u-margin-bottom-small">Find your way</h3>
-                            <p class="feature-box__text">
-                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
-                            </p>
-                        </div>
-                    </div>
-                    <div class="col-1-of-4">
-                        <div class="feature-box">
-                            <i class="feature-box__icon icon-basic-heart"></i>
-                            <h3 class="heading-tertiary u-margin-bottom-small">Live a healthier life</h3>
-                            <p class="feature-box__text">
-                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </main>
-
-        <!--
+    <!--
         <section class="grid-test">
             <div class="row">
                 <div class="col-1-of-2">
@@ -162,5 +212,5 @@
             </div>
         </section>
         -->
-    </body>
+  </body>
 </html>
diff --git a/Natours/starter/sass/components/_card.scss b/Natours/starter/sass/components/_card.scss
new file mode 100644
index 0000000..da9018a
--- /dev/null
+++ b/Natours/starter/sass/components/_card.scss
@@ -0,0 +1,37 @@
+.card {
+    perspective: 150rem;
+    -moz-perspective: 150rem;
+    position: relative;
+    height: 50rem;
+
+    &__side {
+        color: #fff;
+        font-size: 2rem;
+
+        height: 50rem;
+        transition: all .8s ease;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        backface-visibility: hidden;
+
+        &--front {
+            background-color: $color-white;
+        }
+
+        &--back {
+            transform: rotateY(180deg);
+            background-color: green;
+        }
+    }
+
+    &:hover &__side--front {
+        transform: rotateY(180deg);
+    }
+
+    &:hover &__side--back {
+        transform: rotateY(0);
+    }
+}
\ No newline at end of file
diff --git a/Natours/starter/sass/main.scss b/Natours/starter/sass/main.scss
index 3cae0d7..f53d2a3 100644
--- a/Natours/starter/sass/main.scss
+++ b/Natours/starter/sass/main.scss
@@ -10,6 +10,7 @@
 @import "components/button";
 @import "components/composition";
 @import "components/feature-box";
+@import "components/card";
 
 @import "layout/header";
 @import "layout/grid";
diff --git a/Natours/starter/sass/pages/_home.scss b/Natours/starter/sass/pages/_home.scss
index 5c38bd2..8a5bbd2 100644
--- a/Natours/starter/sass/pages/_home.scss
+++ b/Natours/starter/sass/pages/_home.scss
@@ -15,4 +15,10 @@
     & > * {
         transform: skewY(7deg);
     }
+}
+
+.section-tours {
+    background-color: $color-grey-light-1;
+    padding: 25rem 0 50rem 0;
+    margin-top: -10rem;
 }
\ No newline at end of file