final touch --1

Harsh-v3 · Oct 14, 2024 · 1caaf41 · 1caaf41
1 parent 1a375f4
commit 1caaf41
Show file tree

Hide file tree

Showing 19 changed files with 783 additions and 35 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/index.html b/index.html
@@ -38,25 +38,29 @@
       <nav class="navigation__nav">
         <ul class="navigation__list u-center-text">
           <li class="navigation__item">
-            <a href="#" class="navigation__link">
+            <a href="#about" class="navigation__link">
               <span>01</span> About Natours</a
             >
           </li>
           <li class="navigation__item">
-            <a href="#" class="navigation__link">
-              <span>02</span> Your benfits</a
+            <a href="#features" class="navigation__link">
+              <span>02</span> features</a
             >
           </li>
           <li class="navigation__item">
-            <a href="#" class="navigation__link">
+            <a href="#tours" class="navigation__link">
               <span>03</span> Popular tours</a
             >
           </li>
           <li class="navigation__item">
-            <a href="#" class="navigation__link"> <span>04</span> Stories</a>
+            <a href="#stories" class="navigation__link">
+              <span>04</span> Stories</a
+            >
           </li>
           <li class="navigation__item">
-            <a href="#" class="navigation__link"> <span>05</span> Book now</a>
+            <a href="#book" class="navigation__link">
+              <span>05</span> Book now</a
+            >
           </li>
         </ul>
       </nav>
@@ -226,7 +230,7 @@ <h4 class="card__heading">
                     <p class="card__price-only">Only</p>
                     <p class="card__price-value">$299</p>
                   </div>
-                  <a href="#" class="btn btn--white">Book now!</a>
+                  <a href="#popup" class="btn btn--white">Book now!</a>
                 </div>
               </div>
             </div>
@@ -256,7 +260,7 @@ <h4 class="card__heading">
                     <p class="card__price-only">Only</p>
                     <p class="card__price-value">$499</p>
                   </div>
-                  <a href="#" class="btn btn--white">Book now!</a>
+                  <a href="#popup" class="btn btn--white">Book now!</a>
                 </div>
               </div>
             </div>
@@ -286,7 +290,7 @@ <h4 class="card__heading">
                     <p class="card__price-only">Only</p>
                     <p class="card__price-value">$699</p>
                   </div>
-                  <a href="#" class="btn btn--white">Book now!</a>
+                  <a href="#popup" class="btn btn--white">Book now!</a>
                 </div>
               </div>
             </div>
@@ -365,7 +369,7 @@ <h3 class="heading-tertiary u-margin-bottom-small">
       </section>
 
       <!-- booking / form section -->
-      <div class="section-book" id="book">
+      <section class="section-book" id="book">
         <div class="row">
           <div class="book">
             <div class="book__form">
@@ -430,6 +434,35 @@ <h2 class="heading-secondary">Start Booking Now !</h2>
             </div>
           </div>
         </div>
+      </section>
+
+      <!-- Popups -->
+      <div class="popup" id="popup">
+        <div class="popup__content">
+          <div class="popup__left"></div>
+          <div class="popup__right">
+            <div class="popup__close">
+              <a href="#tours" class="popup__close--btn">&times;</a>
+            </div>
+            <h2 class="heading-secondary u-margin-bottom-small">
+              start cooking now!
+            </h2>
+            <h3 class="heading-tertiary u-margin-bottom-small">
+              important &ndash; Please read these terms before booking
+            </h3>
+            <div class="popup__text u-margin-bottom-medium">
+              Lmet consectetur adipisicing elit. Voluptatem, nihil ut
+              exercitationem nisi nulla error illum sunt Lorem ipsum dolor sit
+              amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet
+              consectetur adipisicing elit. Praesentium quidem consectetur nemo
+              sunt. Veritatis qui molestias iste minima eveniet at. voluptate
+              omnis. Fugiat, saepe soluta. Quia, repellendus ad? Ipsum omnis ut,
+              laudantium ea aperiam dolor repudiandae modi fugiat eos debitis
+              quis? distinctio, cum provident.
+            </div>
+            <a href="#" class="btn btn--green">Book now!</a>
+          </div>
+        </div>
       </div>
     </main>
 

diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
@@ -31,3 +31,49 @@
     rgba($color-dark, $opacity)
   );
 }
+
+//  media query manager
+/* 
+0 - 600px:     phone
+600 - 900px:   tablet potrait
+900 - 1200px:  tablet landscape
+[1200 - 1800px] is where our normal styles apple
+1800px +:      big desktop 
+
+breakpoint argument choices:
+-phone
+-tab-port
+-tab-land
+-big-desktop
+
+Order: Base + Typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
+
+@mixin respond($breakpoint) {
+  @if $breakpoint == phone {
+    // 600 px
+    @media only screen and (max-width: 37.5em) {
+      @content;
+    }
+  }
+  @if $breakpoint == tab-port {
+    // 900 px
+    @media only screen and (max-width: 56.25em) {
+      @content;
+    }
+  }
+  @if $breakpoint == tab-land {
+    // 1200 px
+    @media only screen and (max-width: 75em) {
+      @content;
+    }
+  }
+  @if $breakpoint == big-desktop {
+    // 1800 px
+    @media only screen and (min-width: 112.5em) {
+      @content;
+    }
+  }
+}
diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss
@@ -28,4 +28,5 @@ $default-font-size: 1.6rem;
 // GRID
 $grid-width: 114rem;
 $gutter-verticle: 8rem;
+$gutter-verticle-small: 6rem;
 $gutter-horizontal: 6rem;
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
@@ -5,17 +5,41 @@
 *::before {
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
+  box-sizing: inherit;
 }
 
 html {
+  // defining 1rem
   font-size: 62.5%;
+  // 1rem = 10 px , 10 / 16 = 62.5 %
+
+  @include respond(tab-land) {
+    font-size: 56.25%;
+    // 1rem = 9 px , 9 / 16 = 56.25 %
+  }
+
+  @include respond(tab-port) {
+    font-size: 50%;
+    // 1rem = 8 px , 8 / 16 = 50 %
+  }
+
+  @include respond(big-desktop) {
+    font-size: 75%;
+    // 1rem = 12 px , 12 / 16 = 75 %
+  }
 }
 
+/* setting overal font properties. we do it in body because the properties related to font are usually inherited */
+
 ::-webkit-scrollbar {
   display: none;
 }
 
 body {
   box-sizing: border-box;
 }
+
+::selection {
+  background-color: $color-primary;
+  color: $color-white;
+}
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
@@ -6,12 +6,15 @@ body {
   line-height: 1.7;
   color: $color-gray-dark-1;
   padding: 3rem;
+
+  @include respond(tab-port) {
+    padding: 0;
+  }
 }
 
 .heading-primary {
   color: $color-white;
   text-transform: uppercase;
-
   backface-visibility: hidden;
   margin-bottom: 6rem;
 
@@ -22,6 +25,11 @@ body {
     letter-spacing: 3.5rem;
 
     animation: MoveInLeft 1s ease-out;
+
+    @include respond(phone) {
+      letter-spacing: 1rem;
+      font-size: 5rem;
+    }
   }
 
   &--sub {
@@ -31,6 +39,10 @@ body {
     letter-spacing: 1.74rem;
 
     animation: MoveInRight 1s ease-out;
+
+    @include respond(phone) {
+      letter-spacing: 0.5rem;
+    }
   }
 }
 
@@ -50,6 +62,14 @@ body {
   transition: all 0.2s;
   letter-spacing: 2px;
 
+  @include respond(tab-port) {
+    font-size: 3rem;
+  }
+
+  @include respond(phone) {
+    font-size: 2.5rem;
+  }
+
   &:hover {
     transform: scale(1.02) translateY(-1rem);
     cursor: pointer;

diff --git a/sass/base/_utillities.scss b/sass/base/_utillities.scss
@@ -6,6 +6,10 @@
 }
 .u-margin-bottom-medium {
   margin-bottom: 4rem !important;
+
+  @include respond(tab-port) {
+    padding: 3rem !important;
+  }
 }
 .u-margin-bottom-big {
   margin-bottom: 8rem !important;
@@ -15,4 +19,8 @@
 }
 .u-margin-top-big {
   margin-top: 8rem !important;
+
+  @include respond(tab-port) {
+    padding: 5rem !important;
+  }
 }
diff --git a/sass/components/_card.scss b/sass/components/_card.scss
@@ -75,6 +75,7 @@
     height: 23rem;
     // Image Blending :
     background-blend-mode: screen;
+    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
 
     // Image of Card #1:
     &--1 {
@@ -176,4 +177,44 @@
       font-weight: 100;
     }
   }
+
+  // rewrite card section bcz display is different on smaller screen
+  @media only screen and (max-width: 56.25em), only screen and (hover: none) {
+    height: auto;
+    border-radius: 3px;
+    background-color: $color-white;
+    box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15);
+
+    &__side {
+      height: auto;
+      position: relative;
+      box-shadow: none;
+
+      &--back {
+        transform: rotateY(0);
+        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
+      }
+    }
+
+    &:hover &__side--front {
+      transform: rotateY(0);
+    }
+
+    &__cta {
+      position: relative;
+      top: 0;
+      left: 0;
+      transform: translate(0);
+      width: 100%;
+      padding: 7rem 4rem 4rem 4rem;
+    }
+
+    &__price {
+      margin-bottom: 3rem;
+
+      &-value {
+        font-size: 4rem;
+      }
+    }
+  }
 }
diff --git a/sass/components/_compositions.scss b/sass/components/_compositions.scss
@@ -9,28 +9,51 @@
     outline-offset: 2rem;
     transition: all 0.05s ease-out;
 
+    @include respond(tab-port) {
+      float: left;
+      position: relative;
+      width: 33.33333%;
+      box-shadow: 0 1.5rem 3rem rgba($color-black, 0.2);
+    }
+
     &--p1 {
       left: 0;
       top: -2rem;
+
+      @include respond(tab-port) {
+        top: 0;
+        transform: scale(1.2);
+      }
     }
 
     &--p2 {
       right: 0;
       top: 2rem;
+
+      @include respond(tab-port) {
+        top: -1rem;
+        transform: scale(1.3);
+        z-index: 100;
+      }
     }
 
     &--p3 {
       left: 20%;
       top: 10rem;
+      @include respond(tab-port) {
+        left: 0;
+        top: 1rem;
+        transform: scale(1.1);
+      }
     }
 
     &:hover {
-      outline: 1.5rem solid $color-primary;
-      border-radius: 0;
+      border-radius: 3px;
       transform: scale(1.05);
       box-shadow: 0 2.5rem 4rem rgba($color-black, 0.5);
       z-index: 20;
       cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.88, 0.19, 0.17, 1.74);
     }
   }