goitacademy · Irina-Musat · Aug 26, 2024 · Aug 26, 2024 · Aug 26, 2024 · Aug 26, 2024
diff --git a/assets/actions-config-step-1.png b/assets/actions-config-step-1.png
diff --git a/assets/actions-config-step-2.png b/assets/actions-config-step-2.png
diff --git a/assets/how-it-works.png b/assets/how-it-works.png
diff --git a/assets/repo-settings.png b/assets/repo-settings.png
diff --git a/assets/status.png b/assets/status.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://radu2023.github.io/team-leader-yacht-site-/",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /team-leader-yacht-site-/"
   },
   "repository": {
     "type": "git",

diff --git a/src/image/about/about-desc.jpg b/src/image/about/about-desc.jpg
diff --git a/src/image/about/[email protected] b/src/image/about/[email protected]
diff --git a/src/image/about/about-mob.jpg b/src/image/about/about-mob.jpg
diff --git a/src/image/about/[email protected] b/src/image/about/[email protected]
diff --git a/src/image/about/about-tab.jpg b/src/image/about/about-tab.jpg
diff --git a/src/image/about/[email protected] b/src/image/about/[email protected]
diff --git a/src/image/advantages/advantages-desc.jpg b/src/image/advantages/advantages-desc.jpg
diff --git a/src/image/advantages/[email protected] b/src/image/advantages/[email protected]
diff --git a/src/image/advantages/advantages-mob.jpg b/src/image/advantages/advantages-mob.jpg
diff --git a/src/image/advantages/[email protected] b/src/image/advantages/[email protected]
diff --git a/src/image/advantages/advantages-tab.jpg b/src/image/advantages/advantages-tab.jpg
diff --git a/src/image/advantages/[email protected] b/src/image/advantages/[email protected]
diff --git a/src/image/hero/favicon.png b/src/image/hero/favicon.png
diff --git a/src/image/hero/hero-desc.jpg b/src/image/hero/hero-desc.jpg
diff --git a/src/image/hero/[email protected] b/src/image/hero/[email protected]
diff --git a/src/image/hero/hero-mob.jpeg b/src/image/hero/hero-mob.jpeg
diff --git a/src/image/hero/[email protected] b/src/image/hero/[email protected]
diff --git a/src/image/hero/hero-tab.jpg b/src/image/hero/hero-tab.jpg
diff --git a/src/image/hero/[email protected] b/src/image/hero/[email protected]
diff --git a/src/image/hero/icons.svg b/src/image/hero/icons.svg
diff --git a/src/image/price/arrow.jpg b/src/image/price/arrow.jpg
diff --git a/src/image/price/[email protected] b/src/image/price/[email protected]
diff --git a/src/image/price/belle.jpg b/src/image/price/belle.jpg
diff --git a/src/image/price/[email protected] b/src/image/price/[email protected]
diff --git a/src/image/price/benetti.jpg b/src/image/price/benetti.jpg
diff --git a/src/image/price/[email protected] b/src/image/price/[email protected]
diff --git a/src/image/price/line.jpeg b/src/image/price/line.jpeg
diff --git a/src/image/rent/rent-desk-1x.jpg b/src/image/rent/rent-desk-1x.jpg
diff --git a/src/image/rent/rent-desk-2x.jpg b/src/image/rent/rent-desk-2x.jpg
diff --git a/src/image/rent/rent-mob-1x.jpg b/src/image/rent/rent-mob-1x.jpg
diff --git a/src/image/rent/rent-mob-2x.jpg b/src/image/rent/rent-mob-2x.jpg
diff --git a/src/image/rent/rent-tab-1x.jpg b/src/image/rent/rent-tab-1x.jpg
diff --git a/src/image/rent/rent-tab-2x.jpg b/src/image/rent/rent-tab-2x.jpg
diff --git a/src/image/review/ihor.png b/src/image/review/ihor.png
diff --git a/src/image/review/[email protected] b/src/image/review/[email protected]
diff --git a/src/image/review/john.png b/src/image/review/john.png
diff --git a/src/image/review/[email protected] b/src/image/review/[email protected]
diff --git a/src/image/review/victoria.png b/src/image/review/victoria.png
diff --git a/src/image/review/[email protected] b/src/image/review/[email protected]
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/index.html b/src/index.html
@@ -2,14 +2,41 @@
 <html lang="ru">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="./image/hero/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Page title</title>
+    <title>YachtJet</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css"
+      integrity="sha512-4xo8blKMVCiXpTaLzQSLSw3KFOVPWhm/TRtuPVc4WG6kUgjH6J03IBuG7JZPkcWMxJ5huwaBpOpnwYElP/m6wg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+
+    <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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+
     <link rel="stylesheet" href="./sass/index.scss" />
-    <script type="module" src="./index.js"></script>
+    <script type="module" src="./js/mobile-menu.js"></script>
+    <script type="module" src="./js/carousel.js" ></script>
+
   </head>
+
   <body>
-    <h1>Example title</h1>
     <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+    <include src="./partials/header.html"></include>
+    <include src="./partials/mobile-menu.html"></include>
+    <include src="./partials/hero.html"></include>
+    <include src="./partials/about-us.html"></include>
+    <include src="./partials/our-yachts.html"></include>
+    <include src="./partials/advantages.html"></include>
+    <include src="./partials/rent-yachts.html"></include>
+    <include src="./partials/reviews.html"></include>
+    <include src="./partials/footer.html"></include>
   </body>
 </html>
diff --git a/src/js/carousel.js b/src/js/carousel.js
@@ -0,0 +1,39 @@
+
+export function rotateReviewsListSection() {
+    function rotateReviews() {
+        const reviewsList = document.querySelector('.reviews-list');
+        const firstItem = reviewsList.firstElementChild;
+        reviewsList.appendChild(firstItem);
+    }
+
+    function shouldRotateReviews() {
+        return window.innerWidth <= 1279;
+    }
+
+    // Store initial order of reviews
+    const initialReviewsOrder = Array.from(
+        document.querySelectorAll('.reviews-list li')
+    );
+
+    // Initial rotation
+    rotateReviews();
+
+    window.addEventListener('resize', function () {
+        const reviewsList = document.querySelector('.reviews-list');
+
+        if (shouldRotateReviews()) {
+            rotateReviews();
+        } else {
+            reviewsList.innerHTML = '';
+            initialReviewsOrder.forEach(function (item) {
+                reviewsList.appendChild(item);
+            });
+        }
+    });
+
+    setInterval(function () {
+        if (shouldRotateReviews()) {
+            rotateReviews();
+        }
+    }, 5000);
+}
diff --git a/src/index.js → src/js/index.js b/src/index.js → src/js/index.js
diff --git a/src/js/mobile-menu.js b/src/js/mobile-menu.js
@@ -0,0 +1,15 @@
+
+const modalOpen = document.getElementsByClassName("modal-open")[0];
+modalOpen.addEventListener('click', openModal, false);
+function openModal() {
+    document.getElementById("mobile-menu").className = "mobile-menu-container is-open";
+}
+
+const modalClose = document.getElementsByClassName("modal-close");
+for (let i = 0; i < modalClose.length; i++) {
+    modalClose[i].addEventListener('click', closeModal, false);
+}
+function closeModal() {
+    document.getElementById("mobile-menu").className = "mobile-menu-container";
+}
+
diff --git a/src/partials/about-us.html b/src/partials/about-us.html
@@ -0,0 +1,52 @@
+<section class="about-us-section" id="about">
+  <div class="container about-us-container">
+    <div class="about-us-section-section-one">
+      <h2 class="about-us-heading">
+        YachtJet fleet is here to take you on the ultimate adventure
+      </h2>
+      <ul class="about-us-list">
+        <li class="about-us-item-first">
+          From spacious decks to state-of-the-art technology, our yachts are
+          designed to provide the perfect blend of luxury and functionality.
+        </li>
+        <li class="about-us-item-second">
+          Take a look at our selection below and choose the yacht that matches
+          your needs and preferences.No matter which yacht you choose, our
+          experienced crew will ensure that your journey is smooth and
+          enjoyable. Book now and get ready for an unforgettable adventure on
+          the high seas.
+        </li>
+      </ul>
+    </div>
+    <div class="about-us-section-section-two">
+      <picture class="about-us-picture">
+        <source
+          srcset="
+            ./image/about/about-desc.jpg    1x,
+            ./image/about/[email protected] 2x
+          "
+          media="(min-width: 1280px)"
+        />
+        <source
+          srcset="
+            ./image/about/about-tab.jpg    1x,
+            ./image/about/[email protected] 2x
+          "
+          media="(min-width: 768px)"
+        />
+        <source
+          srcset="
+            ./image/about/about-mob.jpg    1x,
+            ./image/about/[email protected] 2x
+          "
+          media="(max-width: 767px)"
+        />
+        <img
+          class="about-us-photo"
+          src="./image/about/about-mob.jpg"
+          alt="picture yacht"
+        />
+      </picture>
+    </div>
+  </div>
+</section>
diff --git a/src/partials/advantages.html b/src/partials/advantages.html
@@ -0,0 +1,53 @@
+<section class="advantages-section">
+    <div class="big-container">
+
+        <h2 class="visually-hidden">Advantages</h2>
+
+        <div class="advantages-container">
+            <ol class="advantages-list">
+                <li class="advantage-box">
+                    <span class="number">01</span>
+                    <div class="middle-line"></div>
+                    <p class="text">Swimming and water sports: try your hand at water skiing</p>
+                </li> 
+                <li class="advantage-box">
+                    <span class="number">02</span>
+                    <div class="middle-line"></div>
+                    <p class="text">Fishing: try to catch your own dinner</p>
+                </li>
+                <li class="advantage-box">
+                    <span class="number">03</span>
+                    <div class="middle-line"></div>
+                    <p class="text">Sightseeing tours: take a shore or island tour, enjoy the views and sunsets from the water</p>
+                </li>
+                <li class="advantage-box">
+                    <span class="number">04</span>
+                    <div class="middle-line"></div>
+                    <p class="text">Rest and relaxation: read a book or listen to music while enjoying the outdoor atmosphere.</p>
+                </li>
+            </ol>
+        </div>
+
+        <img
+                src="/src/image/advantages/advantages-mob.jpg"
+                srcset="
+                    /src/image/advantages/advantages-mob.jpg 1x,
+                    /src/image/advantages/[email protected] 2x,
+                    /src/image/advantages/advantages-tab.jpg 768w,
+                    /src/image/advantages/[email protected] 1536w,
+                    /src/image/advantages/advantages-desc.jpg 1280w,
+                    /src/image/advantages/[email protected] 2560w"
+                sizes="(max-width: 767px) 100vw, 
+                       (min-width: 768px) and (max-width: 1279px) 50vw, 
+                       (min-width: 1280px) 33vw"
+                alt="Advantages Image"
+                class="advantages-image"
+            />
+    </div>
+</section>
+
+
+
+
+
+
diff --git a/src/partials/example.html b/src/partials/example.html
diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -0,0 +1,59 @@
+<footer class="site-footer">
+  <div class="footer-container">
+    <div class="tablet-desktop-container">
+      <div class="footer-and-sections-container">
+        <a href="#" class="footer-logo">yachtjet</a>
+        <ul class="site-sections-list-footer">
+          <li class="site-section-item"><a href="#">About</a></li>
+          <li class="site-section-item"><a href="#">Yachts</a></li>
+          <li class="site-section-item"><a href="#reviews">Reviews</a></li>
+        </ul>
+      </div>
+
+      <ul class="social-link-list-footer">
+        <li class="social-link-footer">
+          <a
+            class="social-link-footer-icon"
+            href="https://www.instagram.com/goitclub/"
+            target="_blank"
+          >
+            <svg class="footer-icon" width="24" height="24">
+              <use href="/src/image/hero/icons.svg#icon-instagram"></use>
+            </svg>
+          </a>
+        </li>
+        <li class="social-link-footer">
+          <a
+            class="social-link-footer-icon"
+            href="https://www.youtube.com/c/GoIT"
+            target="_blank"
+          >
+            <svg class="footer-icon" width="24" height="24">
+              <use href="/src/image/hero/icons.svg#icon-youtube"></use>
+            </svg>
+          </a>
+        </li>
+        <li class="social-link-footer">
+          <a
+            class="social-link-footer-icon"
+            href="https://www.facebook.com/goITclub/"
+            target="_blank"
+          >
+            <svg class="footer-icon" width="24" height="24">
+              <use href="/src/image/hero/icons.svg#icon-facebook"></use>
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <p class="site-slogan">
+      No matter which yacht you choose, our experienced crew will ensure that
+      your journey is smooth and enjoyable.
+    </p>
+    <div class="policy-container">
+      <p class="adventures-privacy">2023. Yacht Adventures</p>
+      <p class="adventures-privacy">Privacy Police</p>
+    </div>
+  </div>
+</footer>
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -0,0 +1,47 @@
+ <header class="header">
+      <nav class= " header-container">
+        <div class="mobile-nav">
+          <div class="logo-container">
+            <a href="./index.html" class="header-logo logo"> yachtjet </a>
+          </div>
+
+          <ul class="nav-list">
+            <li class="nav-item"><a class="nav-link" href="#about-us">About</a></li>
+            <li class="nav-item"><a class="nav-link" href="#our-yachts">Yachts</a></li>
+            <li class="nav-item"><a class="nav-link" href="#reviews">Reviews</a></li>
+          </ul>
+            <div class="social-icons">
+          <ul class="social-list">
+            <li class="social-item">
+              <a  class="social-link" href="https://www.instagram.com/goitclub/">
+                 <svg class="icon" width="24" height="24">
+                    <use href="./image/hero/icons.svg#icon-instagram"></use>
+                  </svg>
+                </a>
+            </li>
+                  <li class="social-item">
+              <a class="social-link" href="https://www.youtube.com/c/GoIT">
+                 <svg class="icon" width="24" height="24">
+                    <use href="./image/hero/icons.svg#icon-youtube"></use>
+                  </svg>
+                </a>
+            </li>
+            <li class="social-item">
+              <a class="social-link" href="https://www.facebook.com/goITclub/">
+                 <svg class="icon" width="24" height="24">
+                    <use href="./image/hero/icons.svg#icon-facebook"></use>
+                  </svg>
+                </a>
+            </li>
+          </ul>
+        </div>
+
+          <button class="mobile-menu modal-open"  type="button" >
+            <svg class="icon-hamburger-menu" width="28" height="28" aria-label="menu">
+              <use href="./image/hero/icons.svg#icon-menu"></use>
+            </svg>
+          </button>
+        </div>
+      </div>
+          </nav>
+    </header>