From ded20de3b4f4286fef754a8b8aeff36cb5f4003d Mon Sep 17 00:00:00 2001
From: wownepal <phurba.sherpa@wowfinstacknepal.com>
Date: Sun, 7 Apr 2024 16:16:29 +0545
Subject: [PATCH] Finish trillio project

---
 css/style.css         | 105 ++++++++++++++++++++++++++++++++++++------
 sass/_base.scss       |  14 ++++--
 sass/_components.scss |  72 ++++++++++++++++++++++++++++-
 sass/_layout.scss     |  41 +++++++++++++++--
 4 files changed, 208 insertions(+), 24 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8e7847b..56e3f71 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,5 @@
 /*
 COLORS
-
-
-
-
 */
 :root {
   --color-primary: #eb2f64;
@@ -32,6 +28,9 @@ COLORS
 html {
   font-size: 62.5%;
   box-sizing: border-box; }
+  @media only screen and (max-width: 68.75em) {
+    html {
+      font-size: 50%; } }
 
 body {
   font-size: 1.6rem;
@@ -48,11 +47,15 @@ img {
 
 .container {
   max-width: 120rem;
-  width: 90%;
   margin: 8rem auto;
   background-color: var(--color-grey-light-1);
   box-shadow: var(--shadow-dark);
   min-height: 40rem; }
+  @media only screen and (max-width: 75em) {
+    .container {
+      margin: 0;
+      max-width: 100%;
+      width: 100%; } }
 
 .header {
   height: 7rem;
@@ -63,10 +66,17 @@ img {
   align-items: center;
   justify-content: space-between;
   padding-left: 2rem; }
+  @media only screen and (max-width: 31.25em) {
+    .header {
+      flex-wrap: wrap;
+      height: 11rem;
+      align-content: space-around; } }
 
 .content {
-  display: flex;
-  background-color: orange; }
+  display: flex; }
+  @media only screen and (max-width: 56.25em) {
+    .content {
+      flex-direction: column; } }
 
 .sidebar {
   background-color: var(--color-grey-dark-1);
@@ -85,6 +95,12 @@ img {
   background-color: var(--color-grey-light-1);
   border-bottom: var(--line);
   font-size: 1.4rem; }
+  @media only screen and (max-width: 56.25em) {
+    .detail {
+      padding: 2.5rem; } }
+  @media only screen and (max-width: 37.5em) {
+    .detail {
+      flex-direction: column; } }
 
 .desc {
   flex: 0 0 60%;
@@ -92,6 +108,14 @@ img {
   margin-right: 4.5rem;
   box-shadow: var(--shadow-light);
   padding: 3rem; }
+  @media only screen and (max-width: 56.25em) {
+    .desc {
+      padding: 2rem;
+      margin-right: 2.5rem; } }
+  @media only screen and (max-width: 37.5em) {
+    .desc {
+      margin-bottom: 2.5rem;
+      margin-right: 0; } }
 
 .user-reviews {
   flex: 1;
@@ -114,6 +138,11 @@ img {
   align-items: center;
   justify-content: center;
   font-size: 1.4rem; }
+  @media only screen and (max-width: 31.25em) {
+    .search {
+      order: 1;
+      flex: 0 0 100%;
+      background-color: var(--color-grey-light-2); } }
   .search__input {
     font-family: inherit;
     padding: .7rem 2rem;
@@ -196,10 +225,19 @@ img {
   list-style: none;
   font-size: 1.4rem;
   margin-top: 1.4rem; }
+  @media only screen and (max-width: 56.25em) {
+    .side-nav {
+      display: flex;
+      justify-content: center;
+      margin: 0; } }
   .side-nav__item {
     position: relative; }
     .side-nav__item:not(:last-child) {
       margin-bottom: .5rem; }
+      @media only screen and (max-width: 56.25em) {
+        .side-nav__item:not(:last-child) {
+          margin-bottom: 0;
+          margin-right: .5rem; } }
     .side-nav__item::before {
       content: '';
       display: block;
@@ -216,6 +254,9 @@ img {
       width: 100%; }
     .side-nav__item:active::before {
       background-color: var(--color-primary-light); }
+    @media only screen and (max-width: 56.25em) {
+      .side-nav__item {
+        flex: 1; } }
   .side-nav__link:link, .side-nav__link:visited {
     color: var(--color-grey-light-1);
     text-decoration: none;
@@ -225,11 +266,24 @@ img {
     align-items: center;
     z-index: 10;
     position: relative; }
+    @media only screen and (max-width: 56.25em) {
+      .side-nav__link:link, .side-nav__link:visited {
+        justify-content: center;
+        padding: 2rem 0; } }
+    @media only screen and (max-width: 37.5em) {
+      .side-nav__link:link, .side-nav__link:visited {
+        flex-direction: column;
+        padding: 1.5rem .5rem; } }
   .side-nav__icon {
     width: 1.75rem;
     height: 1.75rem;
     margin-right: 2rem;
     fill: currentColor; }
+    @media only screen and (max-width: 37.5em) {
+      .side-nav__icon {
+        margin-right: 0;
+        width: 1.5rem;
+        height: 1.5rem; } }
 
 /* =====================
     LEGAL
@@ -239,6 +293,9 @@ img {
   text-align: center;
   padding: 2.5rem;
   color: var(--color-grey-light-4); }
+  @media only screen and (max-width: 56.25em) {
+    .legal {
+      display: none; } }
 
 /* =====================
     GALLERY
@@ -255,13 +312,18 @@ img {
 .overview {
   display: flex;
   align-items: center;
-  border-bottom: var(--line) .overview __heading;
-    border-bottom-font-size: 2.25rem;
-    border-bottom-font-weight: 300;
-    border-bottom-text-transform: uppercase;
-    border-bottom-padding: 1.5rem 3rem;
-    border-bottom-letter-spacing: 1px;
-    border-bottom-color: var(--color-grey-dark-2); }
+  border-bottom: var(--line); }
+  .overview__heading {
+    font-size: 2.25rem;
+    font-weight: 300;
+    text-transform: uppercase;
+    padding: 1.5rem 3rem;
+    letter-spacing: 1px;
+    color: var(--color-grey-dark-2); }
+    @media only screen and (max-width: 37.5em) {
+      .overview__heading {
+        font-size: 1.6rem;
+        padding: 1rem; } }
   .overview__stars {
     margin-right: auto;
     display: flex; }
@@ -288,9 +350,15 @@ img {
     font-size: 2.25rem;
     font-weight: 300;
     margin-bottom: -3px; }
+    @media only screen and (max-width: 37.5em) {
+      .overview__rating-avg {
+        font-size: 1.8rem; } }
   .overview__rating-vote {
     font-size: .8rem;
     text-transform: uppercase; }
+    @media only screen and (max-width: 37.5em) {
+      .overview__rating-vote {
+        font-size: .5rem; } }
 
 /* =====================
     button
@@ -393,6 +461,8 @@ img {
   align-items: center; }
   .recommend__count {
     margin-right: auto; }
+  .recommend__friends {
+    display: flex; }
   .recommend__photo {
     box-sizing: content-box;
     height: 4rem;
@@ -412,6 +482,10 @@ img {
   padding: 3rem;
   position: relative;
   overflow: hidden; }
+  @media only screen and (max-width: 56.25em) {
+    .review {
+      padding: 2rem;
+      margin-bottom: 2.5rem; } }
   .review__text {
     margin-bottom: 2rem;
     position: relative;
@@ -455,6 +529,9 @@ img {
 .cta {
   padding: 3.5rem 0;
   text-align: center; }
+  @media only screen and (max-width: 56.25em) {
+    .cta {
+      padding: 2.5rem; } }
   .cta__book-now {
     text-transform: uppercase;
     font-size: 2rem;
diff --git a/sass/_base.scss b/sass/_base.scss
index afca7db..cccc8ca 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -1,9 +1,5 @@
 /*
 COLORS
-
-
-
-
 */
 :root {
     --color-primary: #eb2f64;
@@ -24,6 +20,12 @@ COLORS
     --line: 1px solid var(--color-grey-light-2);
 }
 
+$bp-largest: 75em;
+$bp-large: 68.75em;
+$bp-md: 56.25em;
+$bp-sm: 37.5em;
+$bp-xs: 31.25em;
+
 * {
     margin: 0;
     padding: 0;
@@ -39,6 +41,10 @@ COLORS
 html {
     font-size: 62.5%;
     box-sizing: border-box;
+
+    @media only screen and (max-width: $bp-large) {
+        font-size: 50%;
+    }
 }
 
 body {
diff --git a/sass/_components.scss b/sass/_components.scss
index c150d44..d3da41d 100644
--- a/sass/_components.scss
+++ b/sass/_components.scss
@@ -15,6 +15,13 @@
     justify-content: center;
     font-size: 1.4rem;
 
+    @media only screen and (max-width: $bp-xs) {
+        order: 1;
+        flex: 0 0 100%;
+        background-color: var(--color-grey-light-2);
+
+    }
+
     &__input {
         font-family: inherit;
         padding: .7rem 2rem;
@@ -78,6 +85,8 @@
     align-self: stretch;
     display: flex;
     align-items: center;
+
+   
     & > * {
         padding: 0 2rem;
         cursor: pointer;
@@ -124,6 +133,8 @@
         margin-right: 1rem;
     }
 
+
+
 }
 
 /* =====================
@@ -134,10 +145,21 @@
     list-style: none;
     font-size: 1.4rem;
     margin-top: 1.4rem;
+
+    @media only screen and (max-width: $bp-md) {
+        display: flex;
+        justify-content: center;
+        margin: 0;
+    }
     &__item {
         position: relative;
         &:not(:last-child) {
             margin-bottom: .5rem;
+            @media only screen and (max-width: $bp-md) {
+                margin-bottom: 0;
+                margin-right: .5rem;
+
+            }
         }
         &::before {
             content: '';
@@ -162,6 +184,10 @@
         &:active::before {
             background-color: var(--color-primary-light);
         }
+
+        @media only screen and (max-width: $bp-md) {
+            flex: 1;
+        }
     }
     &__link {
         
@@ -175,6 +201,15 @@
             align-items: center;
             z-index: 10;
             position: relative;
+
+            @media only screen and (max-width: $bp-md) {
+                justify-content: center;
+                padding: 2rem 0; 
+            }
+            @media only screen and (max-width: $bp-sm) {
+                flex-direction: column;
+                padding: 1.5rem .5rem;
+            }
         }
     }
     &__icon {
@@ -182,6 +217,11 @@
         height: 1.75rem;
         margin-right: 2rem;
         fill: currentColor;
+        @media only screen and (max-width: $bp-sm) {
+           margin-right: 0;
+           width: 1.5rem;
+           height: 1.5rem; 
+        }
     }
 
 }
@@ -194,6 +234,9 @@
     text-align: center;
     padding: 2.5rem;
     color: var(--color-grey-light-4);
+    @media only screen and (max-width: $bp-md) {
+        display: none;
+    }
 }
 
 
@@ -217,7 +260,7 @@
 .overview {
     display: flex;
     align-items: center;
-    border-bottom: var(--line)
+    border-bottom: var(--line);
     &__heading {
         font-size: 2.25rem;
         font-weight: 300;
@@ -225,6 +268,11 @@
         padding: 1.5rem 3rem;
         letter-spacing: 1px;
         color: var(--color-grey-dark-2);
+
+        @media only screen and (max-width: $bp-sm) {
+            font-size: 1.6rem;
+            padding: 1rem;
+        }
     }
 
     &__stars {
@@ -261,10 +309,19 @@
         font-size: 2.25rem;
         font-weight: 300;
         margin-bottom: -3px;
+
+        @media only screen and (max-width: $bp-sm) {
+            font-size: 1.8rem;
+        }
     }
     &__rating-vote {
         font-size: .8rem;
         text-transform: uppercase;
+
+        @media only screen and (max-width: $bp-sm) {
+            font-size: .5rem;
+        }
+
     }
 }
 
@@ -418,7 +475,9 @@
         margin-right: auto;
     }
 
-    &__friends {}
+    &__friends {
+        display: flex;
+    }
 
     &__photo {
         box-sizing: content-box;
@@ -443,6 +502,12 @@
     padding: 3rem;
     position: relative;
     overflow: hidden;
+
+    @media only screen and (max-width: $bp-md) {
+        padding: 2rem;
+        margin-bottom: 2.5rem;
+    }
+
     &__text {
         margin-bottom: 2rem;
         position: relative;
@@ -504,6 +569,9 @@
 .cta {
     padding: 3.5rem 0;
     text-align: center;
+    @media only screen and (max-width: $bp-md) {
+        padding: 2.5rem
+    }
     &__book-now {
         text-transform: uppercase;
         font-size: 2rem;
diff --git a/sass/_layout.scss b/sass/_layout.scss
index dbdfb61..269402c 100644
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -1,10 +1,16 @@
 .container {
     max-width: 120rem;
-    width: 90%;
+    // width: 90%;
     margin: 8rem auto;
     background-color: var(--color-grey-light-1);
     box-shadow: var(--shadow-dark);
     min-height: 40rem;
+
+    @media only screen and (max-width: $bp-largest) {
+        margin: 0;
+        max-width: 100%;
+        width: 100%;
+    }
 }
 
 .header {
@@ -16,14 +22,21 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    // padding: 0 3rem;
     padding-left: 2rem;
 
+    @media only screen and (max-width: $bp-xs) {
+        flex-wrap: wrap;
+        height: 11rem;
+        align-content: space-around;
+    }
+
 }
 
 .content {
     display: flex;
-    background-color: orange;
+    @media only screen and (max-width: $bp-md) {
+        flex-direction: column;
+    }
 }
 
 .sidebar {
@@ -32,6 +45,10 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    @media only screen and (max-width: $bp-md) {
+    }
+
+    
 }
 
 
@@ -46,7 +63,13 @@
     background-color: var(--color-grey-light-1);
     border-bottom: var(--line);
     font-size: 1.4rem;
-
+    
+    @media only screen and (max-width: $bp-md) {
+        padding: 2.5rem
+    }
+    @media only screen and (max-width: $bp-sm) {
+        flex-direction: column;
+    }
 }
 
 .desc {
@@ -56,6 +79,16 @@
     box-shadow: var(--shadow-light);
     padding: 3rem;
 
+    @media only screen and (max-width: $bp-md) {
+        padding: 2rem;
+        margin-right: 2.5rem;
+    }
+
+    @media only screen and (max-width: $bp-sm) {
+        margin-bottom: 2.5rem;
+        margin-right: 0;
+    }
+
 }
 
 .user-reviews {