mate-academy · lucasschumann · Feb 8, 2025 · Feb 8, 2025 · Feb 8, 2025 · Feb 9, 2025
diff --git a/src/images/Image.png b/src/images/Image.png
diff --git a/src/images/burger-icon-hover.png b/src/images/burger-icon-hover.png
diff --git a/src/images/burger-icon.png b/src/images/burger-icon.png
diff --git a/src/images/disco-player.png b/src/images/disco-player.png
diff --git a/src/images/earphones-1-square.png b/src/images/earphones-1-square.png
diff --git a/src/images/earphones-2-square.png b/src/images/earphones-2-square.png
diff --git a/src/images/headphone.png b/src/images/headphone.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/phone.png b/src/images/phone.png
diff --git a/src/images/portable-speaker-1-square.png b/src/images/portable-speaker-1-square.png
diff --git a/src/images/portable-speaker-2-square.png b/src/images/portable-speaker-2-square.png
diff --git a/src/images/smart-home-1-square.png b/src/images/smart-home-1-square.png
diff --git a/src/images/smart-home-2-square.png b/src/images/smart-home-2-square.png
diff --git a/src/images/speaker.png b/src/images/speaker.png
diff --git a/src/images/tv-speaker.png b/src/images/tv-speaker.png
diff --git a/src/images/x-icon.png b/src/images/x-icon.png
diff --git a/src/index.html b/src/index.html
@@ -6,17 +6,329 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Landing Page</title>
+    <title>B&O</title>
     <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@200..800&display=swap"
       rel="stylesheet"
-      href="./styles/main.scss"
+    />
+    <link
+      rel="stylesheet"
+      href="./styles/style.scss"
+    />
+    <link
+      rel="icon"
+      href="./images/logo.png"
     />
     <script
       src="scripts/main.js"
       defer
     ></script>
   </head>
-  <body>
-    <h1>Landing Page</h1>
+  <body class="page">
+    <header class="header">
+      <div class="header__bars">
+        <nav class="top-bar">
+          <a
+            href="#"
+            class="top-bar__logo--link"
+          >
+            <img
+              src="./images/logo.png"
+              alt="logo"
+              class="top-bar__logo"
+            />
+          </a>
+          <div class="top-bar__icons">
+            <a
+              href="tel:+12345555-55-55"
+              class="icon icon--phone"
+            ></a>
+            <a
+              href="#menu"
+              class="icon icon--menu"
+            ></a>
+            <div class="icon--menu--hover"></div>
+          </div>
+        </nav>
+        <div class="header__bottom">
+          <h1 class="header__title">
+            Your senses.
+            <br />
+            Set free.
+          </h1>
+        </div>
+      </div>
+    </header>
+
+    <aside
+      class="menu page__menu"
+      id="menu"
+    >
+      <nav class="container">
+        <div class="top-bar">
+          <a
+            href="#"
+            class="top-bar__logo--link"
+          >
+            <img
+              src="./images/logo.png"
+              alt="logo"
+              class="top-bar__logo"
+            />
+          </a>
+          <a
+            href="#"
+            class="icon icon--x"
+          ></a>
+        </div>
+        <div class="menu__links">
+          <a
+            href="#recommended"
+            class="menu__link"
+          >
+            Recommended
+          </a>
+          <a
+            href="#categories"
+            class="menu__link"
+          >
+            Categories
+          </a>
+          <a
+            href="#about"
+            class="menu__link"
+          >
+            About us
+          </a>
+          <a
+            href="#contact"
+            class="menu__link"
+          >
+            Contact us
+          </a>
+        </div>
+        <div class="menu__bottom">
+          <a
+            href="tel:+12345555-55-55"
+            class="menu__tel"
+          >
+            +1 234 5555-55-55
+          </a>
+          <a
+            href="tel:+12345555-55-55"
+            class="menu__tel menu__tel--text"
+          >
+            call to order
+          </a>
+        </div>
+      </nav>
+    </aside>
+
+    <div class="container">
+      <main class="main">
+        <section
+          class="main__section"
+          id="recommended"
+        >
+          <h2 class="main__section--title">Recommended</h2>
+          <div class="main__section--recommended">
+            <div class="main__section--recommended--product">
+              <img
+                src="images/speaker.png"
+                alt="speaker"
+                class="main__section--recommended--img"
+              />
+              <h3>BEOSOUND A5</h3>
+              <p>
+                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>
+              <strong>$ 1299.00</strong>
+            </div>
+            <div class="main__section--recommended--product">
+              <img
+                src="images/headphone.png"
+                alt="headphone"
+                class="main__section--recommended--img"
+              />
+              <h3>BEOPLAY HX</h3>
+              <p>
+                Wireless noise-cancelling headphones. Listen in comfort whether
+                you're on a call, working from home or taking a moment for
+                yourself.
+              </p>
+              <strong>$ 499.00</strong>
+            </div>
+            <div class="main__section--recommended--product">
+              <img
+                src="images/tv-speaker.png"
+                alt="tv-speaker"
+                class="main__section--recommended--img"
+              />
+              <h3>BEOSOUND THEATRE</h3>
+              <p>
+                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>
+              <strong>$ 3199.00</strong>
+            </div>
+          </div>
+        </section>
+
+        <section
+          class="main__section"
+          id="categories"
+        >
+          <h2 class="main__section--title">
+            Sound. Vision.
+            <br />
+            It's your pick.
+          </h2>
+          <div class="categories">
+            <article class="categories__product">
+              <div class="categories__imgs">
+                <img
+                  src="images/portable-speaker-1-square.png"
+                  alt="portable-1"
+                  class="categories__img"
+                />
+                <img
+                  src="images/portable-speaker-2-square.png"
+                  alt="portable-2"
+                  class="categories__img"
+                />
+                <h3 class="categories__title">Portable speakers</h3>
+              </div>
+            </article>
+
+            <article class="categories__product">
+              <div class="categories__imgs">
+                <img
+                  src="images/earphones-1-square.png"
+                  alt="earphones-1"
+                  class="categories__img"
+                />
+                <img
+                  src="images/earphones-2-square.png"
+                  alt="earphones-2"
+                  class="categories__img"
+                />
+                <h3 class="categories__title">Earphones</h3>
+              </div>
+            </article>
+
+            <article class="categories__product">
+              <div class="categories__imgs">
+                <img
+                  src="images/smart-home-1-square.png"
+                  alt="smart-home-1"
+                  class="categories__img"
+                />
+                <img
+                  src="images/smart-home-2-square.png"
+                  alt="smart-home-2"
+                  class="categories__img"
+                />
+                <h3 class="categories__title">Smart Home</h3>
+              </div>
+            </article>
+          </div>
+          <a
+            href="#"
+            class="categories__button"
+          >
+            <strong>View all</strong>
+          </a>
+        </section>
+      </main>
+
+      <section id="about">
+        <div class="about">
+          <div class="about__content">
+            <img
+              src="images/disco-player.png"
+              alt="disco-player"
+              class="about__img"
+            />
+            <div class="about__info">
+              <div class="about__box">
+                <h2 class="about__title">
+                  Timeless, for 50 years and counting
+                </h2>
+                <p class="about__text">
+                  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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div
+        id="contact"
+        class="contact"
+      >
+        <h2 class="contact__title">Contact us</h2>
+        <div class="contact__content">
+          <form class="contact__form">
+            <input
+              class="contact__input"
+              type="text"
+              placeholder="Name"
+              required
+            />
+            <input
+              class="contact__input"
+              type="email"
+              placeholder="E-mail"
+              required
+            />
+            <textarea
+              class="contact__input"
+              rows="9"
+              placeholder="Message"
+              required
+            ></textarea>
+            <button
+              type="submit"
+              class="contact__button"
+            >
+              Send
+            </button>
+          </form>
+          <footer class="contact__footer">
+            <div class="contact__footer--category">Phone</div>
+            <a href="tel:+12345555-55-55" class="contact__footer--info">+1 234 5555-55-55</a>
+            <div class="contact__footer--category">Email</div>
+            <a href="mailto:hello@bang&olufsen.com" class="contact__footer--info">hello@bang&olufsen.com</a>
+            <div class="contact__footer--category">Adress</div>
+            <a
+            href="https://www.google.com/maps/place/400+N+1st+Ave+STE+700,+Minneapolis,+MN+55401,+EUA/@44.9813258,-93.2731311,17z/"
+            target="_blank"
+            class="contact__footer--info">
+              400 first ave.
+              <br />
+              suite 700
+              <br />
+              Minneapolis, MN 55401
+            </a>
+          </footer>
+        </div>
+      </div>
+    </div>
   </body>
 </html>