mate-academy · arturgorniak · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,5 @@ node_modules
 backstop_data
 dist
 .cache
+styles.css
+styles.css.map
diff --git a/.stylelintignore b/.stylelintignore
@@ -1,2 +1,4 @@
 /backstop_data/
 /dist
+reset.scss
+
diff --git a/README.md b/README.md
@@ -1,15 +1,11 @@
-# Miami landing page
-
-In this task, you will learn how to implement a landing page. To do that:
-
-- choose a landing page design from the list below;
-  - [BOSE landing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0)
-  - [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET)
-  - [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1)
-  - [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0)
-  - [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/) 
-- 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;
+DESCRIPTION
+First site made by me from start during the process of learning as Mate Academy part time student.
+Entire layout was created by following layout deployed on FIGMA.
+Site is online here:
+[DEMO LINK](https://arturgorniak.github.io/layout_miami/)
+Technologies used:
+- HTML
+- CSS
+- SCSS
+Link to layout on FIGMA:
+(https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-387&mode=design&t=pF8KFKX2hn8bzmrs-0)
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
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/index.html b/src/index.html
@@ -3,11 +3,314 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Miami</title>
-    <link rel="stylesheet" href="./styles/main.scss">
+    <title>Bang & Olufsen</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="icon" href="./pictures/favicon.png">
+    <link rel="stylesheet" href="./styles/index.scss">
     <script src="scripts/main.js" defer></script>
   </head>
+
   <body>
-    <h1>Miami</h1>
+    <header class="header">
+      <div class="nav header__nav">
+        <a class="nav__link" href="#">
+          <img
+          class="nav__item logo"
+          src="../src/pictures/Logo.svg"
+          alt="logo"
+          >
+        </a>
+        <div class="nav__links links">
+          <a class="nav__link phone" href="tel:+1 234 555-55-55">
+            <span class="phone__label">+1 234 555-55-55</span>
+          </a>
+          <a class="nav__link burger" href="#menu">
+            <span class="burger__label">Open menu</span>
+          </a>
+        </div>
+      </div>
+      <h1 class="header__title">
+        Your senses.
+        <br>
+        Set free.
+      </h1>
+    </header>
+
+    <nav class="menu" id="menu">
+      <div class="menu__header">
+        <a class="menu__link menu__link--logo" href="#">
+          <img
+          class="menu__icon logo"
+          src="../src/pictures/Logo.svg"
+          alt="logo"
+          >
+        </a>
+        <a class="menu__link menu__link--close" href="#">
+          <img
+          class="menu__icon close"
+          src="../src/pictures/Icon-Close.svg"
+          alt="menu"
+          >
+        </a>
+      </div>
+      <div class="menu__item">
+        <a class="menu__link" href="#recommended">
+          <h3 class="menu__title">Recommended</h3>
+        </a>
+        <a class="menu__link" href="#categories">
+          <h3 class="menu__title">Categories</h3>
+        </a>
+        <a class="menu__link" href="#aboutus">
+          <h3 class="menu__title">About Us</h3>
+        </a>
+        <a class="menu__link" href="#contactus">
+          <h3 class="menu__title">Contact Us</h3>
+        </a>
+      </div>
+      <div class="menu__item">
+        <p class="menu__paragraph">
+          +1 234 5555-55-55
+        </p>
+        <p class="menu__paragraph menu__paragraph--decorated">
+          call to order
+        </p>
+      </div>
+    </nav>
+
+    <main class="main">
+      <section class="section" id="recommended">
+        <h2 class="section__title">Recommended</h2>
+        <div class="section__item section__item--recommended">
+          <img
+            class="section__picture section__picture--recommended"
+            src="../src/pictures/recommended1.jpg"
+            alt="speaker"
+          >
+          <article class="section__article section__article--recommended">
+            <p class="section__paragraph section__paragraph--bold">
+              BEOSOUND A5
+            </p>
+            <p class="section__paragraph">
+              Huge sound anywhere – in the home or outdoors.
+              Beosound A5 is a Wi-Fi and Bluetooth speaker with
+              long-lasting battery and wireless charging built in.
+            </p>
+            <p class="section__paragraph section__paragraph--bold">
+              $ 1299.00
+            </p>
+          </article>
+        </div>
+        <div class="section__item section__item--recommended">
+          <img
+            class="section__picture section__picture--recommended"
+            src="../src/pictures/recommended2.jpg"
+            alt="headphones"
+          >
+          <article class="section__article  section__article--recommended">
+            <p class="section__paragraph section__paragraph--bold">
+              BEOPLAY HX
+            </p>
+            <p class="section__paragraph">
+              Wireless noise-cancelling headphones.
+              Listen in comfort whether you're on a call,
+              working from home or taking a moment for yourself.
+            </p>
+            <p class="section__paragraph section__paragraph--bold">
+              $ 499.00
+            </p>
+          </article>
+        </div>
+        <div class="section__item section__item--recommended">
+          <img
+            class="section__picture section__picture--recommended"
+            src="../src/pictures/recommended3.jpg"
+            alt="soundbar"
+          >
+          <article class="section__article  section__article--recommended">
+            <p class="section__paragraph section__paragraph--bold">
+              BEOSOUND THEATRE
+            </p>
+            <p class="section__paragraph">
+              Four patent-pending acoustic innovations in one sleek soundbar
+              envelop you in sound from every angle.
+              Made to fit any TV, and last for generations.
+            </p>
+            <p class="section__paragraph section__paragraph--bold">
+              $ 3199.00
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <section class="section" id="categories">
+        <h2 class="section__title">
+          Sound. Vision.
+          <br>
+          It’s your pick.
+        </h2>
+        <div class="section__item section__item--categories">
+          <div class="pictures">
+            <img
+            class="section__picture section__picture--categories"
+            src="../src/pictures/categories1.jpg"
+            alt="speaker"
+            >
+            <img
+            class="section__picture section__picture--categories"
+            src="../src/pictures/categories2.jpg"
+            alt="speaker"
+            >
+          </div>
+          <p class="section__paragraph section__paragraph--categories section__paragraph--bold">
+            Portable speakers
+          </p>
+        </div>
+        <div class="section__item section__item--categories">
+          <div class="pictures">
+            <img
+            class="section__picture section__picture--categories"
+            src="../src/pictures/categories3.jpg"
+            alt="earphones"
+            >
+            <img
+            class="section__picture section__picture--categories"
+            src="../src/pictures/categories4.jpg"
+            alt="earphones"
+            >
+          </div>
+          <p class="section__paragraph section__paragraph--categories section__paragraph--bold">
+            Earphones
+          </p>
+        </div>
+        <div class="section__item section__item--categories">
+          <div class="pictures">
+            <img
+            class="section__picture section__picture--categories"
+            src="../src/pictures/categories5.jpg"
+            alt="gadgets"
+            >
+            <img
+            class="section__picture section__picture--categories"
+            src="../src/pictures/categories6.jpg"
+            alt="gadgets"
+            >
+          </div>
+          <p class="section__paragraph section__paragraph--categories section__paragraph--bold">
+            Smart home
+          </p>
+        </div>
+        <button class="button">View all</button>
+      </section>
+
+      <section class="section section--aboutus" id="aboutus">
+        <div class="section__item section__item--aboutus__picture">
+          <img
+          class="section__picture section__picture--ignore"
+          src="../src/pictures/categories7.jpg"
+          alt="player"
+          >
+        </div>
+        <div class="section__item section__item--visually-hidden">
+          <img
+          class="section__picture section__picture--ignore"
+          src="../src/pictures/categories7.jpg"
+          alt="player"
+          >
+        </div>
+        <div class="section__item section__item--aboutus__paragraph">
+          <h2 class="section__title section__title--aboutus">
+            Timeless, for 50 years and counting
+          </h2>
+          <article class="section__article section__article--aboutus">
+            <p class="section__paragraph">
+            Bang & Olufsen is expanding its Recreated Classics Program
+            with the launch of Beosystems – a limited edition music
+            system that transcends time by bridging the gap between
+            one of our iconic designs from 1972 and today’s
+            cutting-edge digital technology.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <section class="section section--contactus" id="contactus">
+        <h2 class="section__title">
+          Contact us
+        </h2>
+        <form class="section__item section__item--form">
+          <label for="name"></label>
+          <input
+            class="input section__input"
+            type="text"
+            placeholder="Enter your name"
+            id="name"
+            required
+          >
+          <label for="email"></label>
+          <input
+            class="input section__input"
+            type="email"
+            placeholder="Enter your email"
+            id="email"
+            required
+          >
+          <label for="message"></label>
+          <textarea
+            class="textarea section__textarea"
+            name="message"
+            id="message"
+            placeholder="Enter text here"
+            required></textarea>
+          <input
+          class="button button--link"
+          type="submit"
+          value="Send"
+          >
+        </form>
+        <address class="section__item section__item--address">
+          <div class="section__paragraph--address">
+            <p class="section__paragraph section__paragraph--small">
+              Phone
+            </p>
+            <p class="section__paragraph--address__link">
+              <a class="section__paragraph" href="tel:+1 234 555-55-55">
+                +1 234 5555-55-55
+              </a>
+            </p>
+          </div>
+          <div class="section__paragraph--address">
+            <p class="section__paragraph section__paragraph--small">
+              Email
+            </p>
+            <p class="section__paragraph--address__link">
+              <a href="mailto:hello@bang&olufsen.com" class="section__paragraph">
+              hello@bang&olufsen.com
+              </a>
+            </p>
+          </div>
+          <div class="section__paragraph--address">
+            <p class="section__paragraph section__paragraph--small">
+            Address
+            </p>
+            <p class="section__paragraph--address__link">
+              <a class="section__paragraph"
+                target="_blank"
+                href="https://www.google.com/maps/place/Colle+McVoy/@44.9813776,
+                    -93.2755681,17z/data=!3m1!4b1!4m6!3m5!1s0x52b332863933ee65
+                    :0x92818bb17a988e0a!8m2!3d44.9813776!4d-93.2729932!16s%2Fg
+                    %2F1wn_5rqw">
+                400 first ave.
+                <br>
+                suite 700
+                <br>
+                Minneapolis, MN 55401
+              </a>
+            </p>
+          </div>
+        </address>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/src/pictures/Icon-Burger-menu-hover.svg b/src/pictures/Icon-Burger-menu-hover.svg
diff --git a/src/pictures/Icon-Burger-menu.svg b/src/pictures/Icon-Burger-menu.svg