From 8823c672b3348e37fca1fbc0a6bea090f2b3567f Mon Sep 17 00:00:00 2001
From: Oleksii Verbytskyi <alverba88@gmail.com>
Date: Mon, 14 Aug 2023 19:20:03 +0300
Subject: [PATCH] added font asome icons, mofy hover packeges section

---
 src/partials/components/scripts.html   |   1 +
 src/partials/components/styles.html    |   4 +-
 src/partials/layouts/destinations.html |  20 +-
 src/partials/layouts/packages.html     | 266 +++++++++++--------------
 src/sass/layout/_destinations.scss     |  10 +-
 src/sass/layout/_packages.scss         |  22 +-
 6 files changed, 153 insertions(+), 170 deletions(-)

diff --git a/src/partials/components/scripts.html b/src/partials/components/scripts.html
index a3739c6..70bedae 100644
--- a/src/partials/components/scripts.html
+++ b/src/partials/components/scripts.html
@@ -1,4 +1,5 @@
 <script src='./service/swiper-bundle.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js'></script>
+
 <script type='module' src='./service/index.js'></script>
\ No newline at end of file
diff --git a/src/partials/components/styles.html b/src/partials/components/styles.html
index 504ab72..11f8dc9 100644
--- a/src/partials/components/styles.html
+++ b/src/partials/components/styles.html
@@ -1,9 +1,9 @@
+<script src="https://kit.fontawesome.com/b3021908e5.js" crossorigin="anonymous"></script>
+
 <link rel='preconnect' href='https://fonts.googleapis.com'>
 <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
 <link
   href='https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@100;200;300;400;500;700&display=swap'
   rel='stylesheet'>
 <link rel='stylesheet' href='./sass/base/swiper-bundle.min.css'>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-
 <link rel='stylesheet' href='./sass/main.scss' />
\ No newline at end of file
diff --git a/src/partials/layouts/destinations.html b/src/partials/layouts/destinations.html
index 7a2085d..6cae394 100644
--- a/src/partials/layouts/destinations.html
+++ b/src/partials/layouts/destinations.html
@@ -11,7 +11,9 @@ <h2 class='destinations__title'>Must-Visit Destinations</h2>
             </div>
             <div class='d-item__content'>
               <div class='d-item__location'>
-                <i class='fa-solid fa-location-dot'></i>
+               <span class='location-icon'>
+                 <i class='fas fa-map-marker-alt'></i>
+               </span>
                 <p class='t-item_content'>Madrid, Spain</p>
               </div>
               <p class='d-item__title'>Calle Gran Via</p>
@@ -27,7 +29,9 @@ <h2 class='destinations__title'>Must-Visit Destinations</h2>
             </div>
             <div class='d-item__content'>
               <div class='d-item__location'>
-                <i class='fa-solid fa-location-dot location-icon'></i>
+                               <span class='location-icon'>
+                 <i class='fas fa-map-marker-alt'></i>
+               </span>
                 <p class='t-item_content'>Champ de Mars, France</p>
               </div>
               <p class='d-item__title'>Calle Gran Via</p>
@@ -43,7 +47,9 @@ <h2 class='destinations__title'>Must-Visit Destinations</h2>
             </div>
             <div class='d-item__content'>
               <div class='d-item__location'>
-                <i class='fa-solid fa-location-dot location-icon'></i>
+                <span class='location-icon'>
+                 <i class='fas fa-map-marker-alt'></i>
+               </span>
                 <p class='t-item_content'>Bali, Indonesia</p>
               </div>
               <p class='d-item__title'>Diamond Beach</p>
@@ -59,7 +65,9 @@ <h2 class='destinations__title'>Must-Visit Destinations</h2>
             </div>
             <div class='d-item__content'>
               <div class='d-item__location'>
-                <i class='fa-solid fa-location-dot location-icon'></i>
+                <span class='location-icon'>
+                 <i class='fas fa-map-marker-alt'></i>
+               </span>
                 <p class='t-item_content'>Madrid, Spain</p>
               </div>
               <p class='d-item__title'>Calle Gran Via</p>
@@ -75,7 +83,9 @@ <h2 class='destinations__title'>Must-Visit Destinations</h2>
             </div>
             <div class='d-item__content'>
               <div class='d-item__location'>
-                <i class='fa-solid fa-location-dot location-icon'></i>
+               <span class='location-icon'>
+                 <i class='fas fa-map-marker-alt'></i>
+               </span>
                 <p class='t-item_content'>Madrid, Spain</p>
               </div>
               <p class='d-item__title'>Calle Gran Via</p>
diff --git a/src/partials/layouts/packages.html b/src/partials/layouts/packages.html
index 1161f57..065db17 100644
--- a/src/partials/layouts/packages.html
+++ b/src/partials/layouts/packages.html
@@ -10,41 +10,41 @@ <h2 class='packages__title'>Customized Experiences</h2>
             <p class='packages__price'>$399</p>
             <p class='packages__people-info'> For 2 People</p>
             <ul class='packages__info p-info'>
-              <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+              <li class='p-info__item  active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Tour Guide</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Hotel accomodation </p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Special dinner</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Speedboat and yachts</p>
               </li>
               <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Refundable
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Refundable</p>
               </li>
               <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Bonus and gifts
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Bonus and gifts</p>
               </li>
             </ul>
             <a class='packages__link' href='#'>Choose Package</a>
@@ -54,41 +54,41 @@ <h2 class='packages__title'>Customized Experiences</h2>
             <p class='packages__price'>$410</p>
             <p class='packages__people-info'> For 2-4 People</p>
             <ul class='packages__info p-info'>
-              <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+              <li class='p-info__item  active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Tour Guide</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Hotel accomodation </p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Special dinner</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Speedboat and yachts</p>
               </li>
               <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Refundable
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Refundable</p>
               </li>
               <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Bonus and gifts
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Bonus and gifts</p>
               </li>
             </ul>
             <a class='packages__link' href='#'>Choose Package</a>
@@ -98,41 +98,41 @@ <h2 class='packages__title'>Customized Experiences</h2>
             <p class='packages__price'>$499</p>
             <p class='packages__people-info'> For 2-4 People</p>
             <ul class='packages__info p-info'>
-              <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+              <li class='p-info__item  active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Tour Guide</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Hotel accomodation </p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Special dinner</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Speedboat and yachts</p>
               </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Refundable
+              <li class='p-info__item active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Refundable</p>
               </li>
               <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Bonus and gifts
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Bonus and gifts</p>
               </li>
             </ul>
             <a class='packages__link' href='#'>Choose Package</a>
@@ -142,41 +142,41 @@ <h2 class='packages__title'>Customized Experiences</h2>
             <p class='packages__price'>$510</p>
             <p class='packages__people-info'> For 4 People</p>
             <ul class='packages__info p-info'>
-              <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+              <li class='p-info__item  active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Tour Guide</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Hotel accomodation </p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Special dinner</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Speedboat and yachts</p>
               </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Refundable
+              <li class='p-info__item active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Refundable</p>
               </li>
               <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Bonus and gifts
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Bonus and gifts</p>
               </li>
             </ul>
             <a class='packages__link' href='#'>Choose Package</a>
@@ -186,93 +186,49 @@ <h2 class='packages__title'>Customized Experiences</h2>
             <p class='packages__price'>$600</p>
             <p class='packages__people-info'> For 4-5 People</p>
             <ul class='packages__info p-info'>
-              <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+              <li class='p-info__item  active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Tour Guide</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Hotel accomodation </p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Special dinner</p>
               </li>
               <li class='p-info__item active'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
                 <p>Speedboat and yachts</p>
               </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Refundable
-              </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Bonus and gifts
-              </li>
-            </ul>
-            <a class='packages__link' href='#'>Choose Package</a>
-          </div>
-          <div class='packages__slide swiper-slide'>
-            <p class='packages__card-title'>Packages 1</p>
-            <p class='packages__price'>$399</p>
-            <p class='packages__people-info'> For 2 People</p>
-            <ul class='packages__info p-info'>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
-                Tour Guide
-              </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
-                Hotel accomodation
-              </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
-                Special dinner
-              </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#activeChecked'></use>
-                </svg>
-                Speedboat and yachts
-              </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Refundable
+              <li class='p-info__item active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Refundable</p>
               </li>
-              <li class='p-info__item'>
-                <svg class='icon' width='20' height='20'>
-                  <use xlink:href='./images/icons/icons.svg#notChecked'></use>
-                </svg>
-                Bonus and gifts
+              <li class='p-info__item active'>
+                <span class='p-info__icon'>
+                  <i class='far fa-check-circle fa-lg'></i>
+                </span>
+                <p>Bonus and gifts</p>
               </li>
             </ul>
             <a class='packages__link' href='#'>Choose Package</a>
           </div>
         </div>
       </div>
-      <div class="packages__btn-prev">Prev</div>
-      <div class="packages__btn-next">Next</div>
+      <div class='packages__btn-prev'>Prev</div>
+      <div class='packages__btn-next'>Next</div>
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/src/sass/layout/_destinations.scss b/src/sass/layout/_destinations.scss
index 9b8f0bf..3fc3eeb 100644
--- a/src/sass/layout/_destinations.scss
+++ b/src/sass/layout/_destinations.scss
@@ -110,6 +110,7 @@
   &__location {
     display: flex;
     justify-content: start;
+    align-items: center;
     margin-top: 42px;
     color: rgba(161, 161, 161, 0.60);
     font-family: Nexa Bold, sans-serif;
@@ -160,7 +161,10 @@
 }
 
 .location-icon {
-  width: 11px;
-  height: 12px;
-  fill: #00A0B1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  color: #00A0B1;
 }
\ No newline at end of file
diff --git a/src/sass/layout/_packages.scss b/src/sass/layout/_packages.scss
index 307d80c..eef12e5 100644
--- a/src/sass/layout/_packages.scss
+++ b/src/sass/layout/_packages.scss
@@ -179,6 +179,15 @@
       line-height: calc(24 / 16); /* 150% */
     }
 
+  }
+  &__item.active  {
+    .p-info__icon{
+      color: #00A0B1;
+    }
+    p{
+      color: #363636;
+    }
+
   }
 
   .packages__slide:hover &__item {
@@ -193,10 +202,13 @@
   &__item:not(:last-child) {
     margin-bottom: 15px;
   }
-}
+  &__icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    color: #A1A1A1E5;
+  }
 
-.active {
-  color: #363636;
-  fill: #00A0B1;
 }
-