mate-academy · kate-prakofyeva · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
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://kate-prakofyeva.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/src/images/Beoplay-HX.jpg b/src/images/Beoplay-HX.jpg
diff --git a/src/images/Beosound-A5.jpg b/src/images/Beosound-A5.jpg
diff --git a/src/images/Beosound-Theatre.jpg b/src/images/Beosound-Theatre.jpg
diff --git a/src/images/Earphones-1.jpg b/src/images/Earphones-1.jpg
diff --git a/src/images/Earphones-2.jpg b/src/images/Earphones-2.jpg
diff --git a/src/images/Icon-Burger-menu-hover.svg b/src/images/Icon-Burger-menu-hover.svg
diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg
diff --git a/src/images/Icon-Close.svg b/src/images/Icon-Close.svg
diff --git a/src/images/Icon-Phone-call.svg b/src/images/Icon-Phone-call.svg
diff --git a/src/images/Portable-speakers-1.jpg b/src/images/Portable-speakers-1.jpg
diff --git a/src/images/Portable-speakers-2.jpg b/src/images/Portable-speakers-2.jpg
diff --git a/src/images/Smart-Home-1.jpg b/src/images/Smart-Home-1.jpg
diff --git a/src/images/Smart-Home-2.jpg b/src/images/Smart-Home-2.jpg
diff --git a/src/images/Vinyl-Player.jpg b/src/images/Vinyl-Player.jpg
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/header-background.jpg b/src/images/header-background.jpg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/logo.svg b/src/images/logo.svg
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,257 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Miami</title>
+    <title>BANG & OLUFSEN</title>
+    <link rel="icon"
+      type="image/x-icon"
+      href="./images/favicon.png"
+    >
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    >
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Roboto:ital,wght@0,300;0,400;0,500;1,700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./styles/main.scss">
     <script src="scripts/main.js" defer></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="home">
+      <nav class="navigation">
+        <a href="#home" class="navigation__logo">
+          <img
+            src="./images/logo.svg"
+            alt="BANG & OLUFSEN Logo"
+            class="navigation__image"
+          >
+        </a>
+        <a href="tel:+123455555555" class="navigation__phone">
+          <img src="./images/Icon-Phone-call.svg" alt="Phone icon">
+        </a>
+        <a href="#menu" class="navigation__burger">
+          <img
+            src="./images/Icon-Burger-menu.svg"
+            alt="Mobile menu icon"
+          >
+        </a>
+      </nav>
+      <h1 class="title">Your senses.
+        <br>
+        Set free.
+      </h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation">
+        <a href="#home" class="navigation__logo">
+          <img
+            src="./images/logo.svg"
+            alt="BANG & OLUFSEN Logo"
+            class="navigation__image"
+          >
+        </a>
+        <a href="#header"  class="navigation__close">
+          <img src="./images/Icon-Close.svg" alt="Close mobile menu icon">
+        </a>
+      </nav>
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <li class="links__item">
+            <a href="#recommended" class="links__link">Recommended</a>
+          </li>
+          <li class="links__item">
+            <a href="#categories" class="links__link">Categories</a>
+          </li>
+          <li class="links__item">
+            <a href="#about" class="links__link">About Us</a>
+          </li>
+          <li class="links__item">
+            <a href="#contacts" class="links__link">Contact Us</a>
+          </li>
+        </ul>
+      </nav>
+      <p class="menu__link menu__link--paragraph">+1 234 5555-55-55</p>
+      <p><a href="tel:+123455555555" class="menu__link menu__link--call">call to order</a></p>
+    </div>
+
+    <main class="main">
+      <section class="section main__recommended" id="recommended">
+        <h2 class="title title--secondary section__title">Recommended</h2>
+        <article class="card">
+          <div class="card__photos photos">
+            <img class="photos__item"
+              src="./images/Beosound-A5.jpg"
+              alt="Beosound A5 speaker"
+            >
+          </div>
+          <p class="card__title">BEOSOUND A5</p>
+          <p class="card__description">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="card__price">$ 1299.00</p>
+        </article>
+        <article class="card">
+          <div class="card__photos photos">
+            <img class="photos__item"
+              src="./images/Beoplay-HX.jpg"
+              alt="Beosound A5 speaker"
+            >
+          </div>
+          <p class="card__title">BEOPLAY HX</p>
+          <p class="card__description">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="card__price">$ 499.00</p>
+        </article>
+        <article class="card">
+          <div class="card__photos photos">
+            <img class="photos__item"
+              src="./images/Beosound-Theatre.jpg"
+              alt="Beosound A5 speaker"
+            >
+          </div>
+          <p class="card__title">BEOSOUND THEATRE</p>
+          <p class="card__description">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="card__price">$ 3199.00</p>
+        </article>
+      </section>
+
+      <section class="section main__categories" id="categories">
+        <h2 class="title title--secondary section__title">
+          Sound. Vision.<br>
+          It’s your pick.
+        </h2>
+        <article class="main__product product">
+          <div class="product__pictures pictures">
+            <img
+              src="./images/Portable-speakers-1.jpg"
+              alt="Portable speakers"
+              class="pictures__item"
+            >
+            <img
+              src="./images/Portable-speakers-2.jpg"
+              alt="Portable speakers"
+              class="pictures__item"
+            >
+          </div>
+          <p class="product__category">Portable speakers</p>
+        </article>
+        <article class="main__product product">
+          <div class="product__pictures pictures">
+            <img
+              src="./images/Earphones-1.jpg"
+              alt="Earphones"
+              class="pictures__item"
+            >
+            <img
+              src="./images/Earphones-2.jpg"
+              alt="Earphones"
+              class="pictures__item"
+            >
+          </div>
+          <p class="product__category">Earphones</p>
+        </article>
+        <article class="main__product product">
+          <div class="product__pictures pictures">
+            <img
+              src="./images/Smart-Home-1.jpg"
+              alt="Smart Home"
+              class="pictures__item"
+            >
+            <img
+              src="./images/Smart-Home-2.jpg"
+              alt="Smart Home"
+              class="pictures__item"
+            >
+          </div>
+          <p class="product__category">Smart Home</p>
+        </article>
+
+        <a href="#categories" class="button">View all</a>
+      </section>
+
+      <section class="main__about about" id="about">
+        <div class="about__image"></div>
+        <article class="main__description description">
+          <h3 class="title title--section about__title">
+            Timeless, for 50 years and counting
+          </h3>
+          <p class="description__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>
+      </section>
+
+      <section class="section contacts" id="contacts">
+        <h3 class="title title--secondary section__title">Contact us</h3>
+        <form
+          action="#"
+          class="section__form form"
+          method="get"
+          id="form"
+        >
+          <div class="form__item">
+            <label for="name"  class="form__label">Name</label>
+            <input
+              type="text"
+              id="name"
+              placeholder="Name"
+              class="form__input"
+              required
+              minlength="2"
+              maxlength="30"
+
+            >
+          </div>
+          <div class="form__item">
+            <label for="email" class="form__label">Email</label>
+            <input
+              id="email"
+              placeholder="Email"
+              class="form__input"
+              required
+              type="email"
+              pattern="^(http(s){0,1}:\/\/.){0,1}[\-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([\-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)$"
+            >
+          </div>
+          <div class="form__item">
+            <label for="message" class="form__label">Message</label>
+            <textarea
+              id="message"
+              placeholder="Message"
+              class="form__textarea"
+              required
+              minlength="2"
+              maxlength="256"
+            ></textarea>
+          </div>
+          <button class="button button--primary">
+            Send
+          </button>
+        </form>
+        <address class="main__address address">
+          <h4 class="address__label">Phone</h4>
+          <a href="tel:+123455555555" class="address__content">
+            +1 234 5555-55-55
+          </a>
+          <h4 class="address__label">Email</h4>
+          <a
+            class="address__content"
+            href="mailto:hello@bang&olufsen.com"
+          >
+            hello@bang&olufsen.com
+          </a>
+          <h4 class="address__label">Address</h4>
+          <div >
+            <a
+              class="address__content"
+              href="https://maps.app.goo.gl/N918GZqXPwQ5tH4CA"
+              target="_blank"
+            >
+              400 first ave.<br>
+              suite 700<br>
+              Minneapolis, MN 55401
+            </a>
+          </div>
+        </address>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,8 @@
 'use strict';
+
+const form = document.getElementById('form');
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+  form.reset();
+});
diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss
@@ -0,0 +1,19 @@
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: $secondary-bg-color;
+
+  &__title {
+    margin-bottom: 24px;
+  }
+
+  &__image {
+    width: 100%;
+    min-height: 200px;
+    background-image: url(../images/Vinyl-Player.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+}
diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss
@@ -0,0 +1,34 @@
+.address {
+  &__label {
+    color: $label-text-color;
+    font-family: $primary-font-family;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 140%; /* 19.6px */
+    letter-spacing: 0.15px;
+    margin-bottom: 8px;
+  }
+
+  &__content {
+    display: block;
+    color: $primary-text-color;
+    font-family: $primary-font-family;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 22.4px */
+    letter-spacing: 0.15px;
+    margin-bottom: 24px;
+    @extend %link-style;
+    @extend %link-no-highlight;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &:active,
+    &:focus {
+      @extend %link-no-highlight;
+    }
+  }
+}