mate-academy · Karanelus · Jun 4, 2024 · Jun 4, 2024 · Jun 5, 2024 · Jun 6, 2024
diff --git a/README.md b/README.md
@@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that:
   - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
 - watch the lesson videos and implement your page blocks similarly to the videos;
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://Karanelus.github.io/layout_miami/)
 - after each next block do the same (add, commit and push the changes, and deploy the updated demo;
 - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Miami",
+  "name": "bose-page",
   "version": "1.0.0",
   "description": "Miami landing page",
   "scripts": {

diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/images/Logo.svg b/src/images/Logo.svg
diff --git a/src/images/cross.svg b/src/images/cross.svg
diff --git a/src/images/crown.svg b/src/images/crown.svg
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/menu.svg b/src/images/menu.svg
diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg
diff --git a/src/images/phone.svg b/src/images/phone.svg
diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg
diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg
diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg
diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg
diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg
diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg
diff --git a/src/images/photos/Icon-Phone-call.svg b/src/images/photos/Icon-Phone-call.svg
diff --git a/src/images/photos/Sound-waves.svg b/src/images/photos/Sound-waves.svg
diff --git a/src/images/photos/category/imgFifth.png b/src/images/photos/category/imgFifth.png
diff --git a/src/images/photos/category/imgFirst.png b/src/images/photos/category/imgFirst.png
diff --git a/src/images/photos/category/imgFourth.png b/src/images/photos/category/imgFourth.png
diff --git a/src/images/photos/category/imgSecond.png b/src/images/photos/category/imgSecond.png
diff --git a/src/images/photos/category/imgSixth.png b/src/images/photos/category/imgSixth.png
diff --git a/src/images/photos/category/imgThird.png b/src/images/photos/category/imgThird.png
diff --git a/src/images/photos/footer.png b/src/images/photos/footer.png
diff --git a/src/images/photos/header.png b/src/images/photos/header.png
diff --git a/src/images/photos/recommended/bluetooth-speaker-II.png b/src/images/photos/recommended/bluetooth-speaker-II.png
diff --git a/src/images/photos/recommended/bluetooth-speaker.png b/src/images/photos/recommended/bluetooth-speaker.png
diff --git a/src/images/photos/recommended/portable-smart-speaker.png b/src/images/photos/recommended/portable-smart-speaker.png
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>BOSE</title>
+    <link
+      rel="shortcut icon"
+      href="./images/photos/Sound-waves.svg"
+    />
     <link
       rel="stylesheet"
       href="./styles/main.scss"
@@ -17,6 +21,249 @@
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header
+      class="header"
+      id="home"
+    >
+      <nav class="navigation header__navigation">
+        <img
+          src="./images/Logo.svg"
+          alt="logo"
+          class="navigation__logo"
+        />
+        <ul class="navigation__list">
+          <li class="navigation__item navigation__item--phone">
+            <img
+              src="./images/photos/Icon-Phone-call.svg"
+              alt="Number"
+              class="navigation__item--phone__logo"
+            />
+            <div class="navigation__item--phone--number">
+              <p class="navigation__item--phone--number--on-hover">
+                +1 234 555-55-55
+              </p>
+            </div>
+          </li>
+          <li class="navigation__item navigation__item--burger-menu">
+            <div class="navigation__item--burger-menu--part"></div>
+          </li>
+        </ul>
+        <nav class="burger-menu navigation__burger-menu">
+          <section class="burger-menu__container">
+            <img
+              src="./images/Logo.svg"
+              alt="logo"
+              class="burger-menu__logo"
+            />
+            <ul class="burger-menu__options">
+              <li class="burger-menu__links">
+                <a
+                  class="burger-menu__link"
+                  href="#home"
+                >
+                  home
+                </a>
+              </li>
+              <li class="burger-menu__links">
+                <a
+                  class="burger-menu__link"
+                  href="#recommended"
+                >
+                  recommended
+                </a>
+              </li>
+              <li class="burger-menu__links">
+                <a
+                  class="burger-menu__link"
+                  href="#categories"
+                >
+                  categories
+                </a>
+              </li>
+              <li class="burger-menu__links">
+                <a
+                  class="burger-menu__link"
+                  href="#how-to-buy"
+                >
+                  how to buy
+                </a>
+              </li>
+              <li class="burger-menu__links">
+                <a
+                  class="burger-menu__link"
+                  href="#home"
+                >
+                  contact
+                </a>
+              </li>
+            </ul>
+            <div class="burger-menu__contact-info">
+              <p class="burger-menu__tel-num">+1 234 5555-55-55</p>
+              <p class="burger-menu__tel-text">call to order</p>
+            </div>
+          </section>
+        </nav>
+      </nav>
+      <section class="motto header__motto">
+        <img
+          class="motto__img"
+          src="./images/photos/Sound-waves.svg"
+          alt=" "
+        />
+        <h1 class="motto__text">
+          The world shades.
+          <br />
+          Your music shines.
+        </h1>
+      </section>
+    </header>
+    <main class="content">
+      <section
+        id="recommended"
+        class="content__recommended recommended"
+      >
+        <h2
+          class="recommended__title"
+          data-title=" "
+        >
+          Recommended
+        </h2>
+        <div class="products-container recommended__products-container">
+          <article class="products-container__item">
+            <img
+              class="products-container__image"
+              src="./images/photos/recommended/portable-smart-speaker.png"
+              alt="Portable smart speaker"
+            />
+            <p class="products-container__name">Bose portable Smart speaker</p>
+            <p class="products-container__type">Smart home</p>
+            <p class="products-container__cost">$ 399.00</p>
+          </article>
+          <article class="products-container__item">
+            <img
+              class="products-container__image"
+              src="./images/photos/recommended/bluetooth-speaker.png"
+              alt="Bluetooth speaker"
+            />
+            <p class="products-container__name">
+              SoundLink Flex Bluetooth speaker
+            </p>
+            <p class="products-container__type">Portable bluetooth</p>
+            <p class="products-container__cost">$ 149.00</p>
+          </article>
+          <article class="products-container__item">
+            <img
+              class="products-container__image"
+              src="./images/photos/recommended/bluetooth-speaker-II.png"
+              alt="Bluetooth speaker II"
+            />
+            <p class="products-container__name">
+              SoundLink Color Bluetooth speaker II
+            </p>
+            <p class="products-container__type">Portable bluetooth</p>
+            <p class="products-container__cost">$ 129.00</p>
+          </article>
+        </div>
+      </section>
+      <section
+        id="category"
+        class="content__category category"
+      >
+        <h2
+          class="category__title"
+          data-title=" "
+        >
+          Browse Bose products by category
+        </h2>
+        <div class="category__type">
+          <section
+            class="category__img-container"
+            position="left"
+          >
+            <img
+              class="category__img"
+              src="./images/photos/category/imgFirst.png"
+              alt=" "
+            />
+            <img
+              class="category__img"
+              src="./images/photos/category/imgSecond.png"
+              alt=" "
+            />
+          </section>
+          <p class="category__type-title">Headphones & earbuds</p>
+        </div>
+        <div class="category__type">
+          <section
+            class="category__img-container"
+            position="left"
+          >
+            <img
+              class="category__img"
+              src="./images/photos/category/imgThird.png"
+              alt=" "
+            />
+            <img
+              class="category__img"
+              src="./images/photos/category/imgFourth.png"
+              alt=" "
+            />
+          </section>
+          <p class="category__type-title">Speakers</p>
+        </div>
+        <div class="category__type">
+          <section
+            class="category__img-container"
+            position="right"
+          >
+            <img
+              class="category__img"
+              src="./images/photos/category/imgFifth.png"
+              alt=" "
+            />
+            <img
+              class="category__img"
+              src="./images/photos/category/imgSixth.png"
+              alt=" "
+            />
+          </section>
+          <p class="category__type-title">Audio sunglasses</p>
+        </div>
+      </section>
+      <section
+        id="how-to-buy"
+        class="content__how-to-buy how-to-buy"
+      >
+        <article class="how-to-buy__container">
+          <h2
+            class="how-to-buy__title"
+            data-title=" "
+          >
+            Why buy direct from Bose
+          </h2>
+          <div class="how-to-buy__detail">
+            <ul class="how-to-buy__reasons">
+              <li class="how-to-buy__reason">
+                Free 2-day shipping and returns
+              </li>
+              <li class="how-to-buy__reason">90-day risk-free trial</li>
+              <li class="how-to-buy__reason">World class customer service</li>
+              <li class="how-to-buy__reason">My Bose account management</li>
+            </ul>
+            <p class="how-to-buy__text">
+              A great product is more than what’s in the box. It’s a promise of
+              premium performance, world-class support, and everything you
+              expect from a trusted brand. It’s just one of many reasons why
+              you’ll shop with confidence on Bose.com.
+            </p>
+          </div>
+        </article>
+      </section>
+      <section
+        id="contact"
+        class="content__contact contact"
+      ></section>
+    </main>
+    <footer class="footer"></footer>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,11 @@
 'use strict';
+
+const burgerMenuButton = document.querySelector(
+  '.navigation__item--burger-menu',
+);
+const burgerMenu = document.querySelector('.burger-menu');
+
+burgerMenuButton.addEventListener('click', () => {
+  burgerMenu.classList.toggle('burger-menu--active');
+  burgerMenuButton.classList.toggle('navigation__item--burger-menu--active');
+});
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss