mate-academy · Krzychu92 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
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/Image_mid-site.jpg b/src/images/Image_mid-site.jpg
diff --git a/src/images/Nowy folder/main_section-first_img.png b/src/images/Nowy folder/main_section-first_img.png
diff --git a/src/images/Nowy folder/main_section-first_photo.png b/src/images/Nowy folder/main_section-first_photo.png
diff --git a/src/images/background-header.jpg b/src/images/background-header.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/header-logo.png b/src/images/header-logo.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/main_section-first_img.jpg b/src/images/main_section-first_img.jpg
diff --git a/src/images/main_section-second_img.png b/src/images/main_section-second_img.png
diff --git a/src/images/main_section-third_img.jpg b/src/images/main_section-third_img.jpg
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/photo-1.jpg b/src/images/photo-1.jpg
diff --git a/src/images/photo-11.png b/src/images/photo-11.png
diff --git a/src/images/photo-2.jpg b/src/images/photo-2.jpg
diff --git a/src/images/photo-22.png b/src/images/photo-22.png
diff --git a/src/images/photo-3.jpg b/src/images/photo-3.jpg
diff --git a/src/images/photo-33.png b/src/images/photo-33.png
diff --git a/src/images/photo-4.jpg b/src/images/photo-4.jpg
diff --git a/src/images/photo-44.png b/src/images/photo-44.png
diff --git a/src/images/photo-5.jpg b/src/images/photo-5.jpg
diff --git a/src/images/photo-55.png b/src/images/photo-55.png
diff --git a/src/images/photo-6.jpg b/src/images/photo-6.jpg
diff --git a/src/images/photo-66.png b/src/images/photo-66.png
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/test.jpg b/src/images/test.jpg
diff --git a/src/index.html b/src/index.html
@@ -4,10 +4,305 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Miami</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=Roboto:wght@400;500;700&family=Space+Grotesk:wght@400;700&family=Space+Mono&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="header">
+      <nav class="navigation">
+        <a href="#">
+          <img
+            class="navigation__logo"
+            src="../src/images/header-logo.png"
+            alt="Header logo"
+          >
+        </a>
+
+        <div class="navigation__buttons">
+          <a href="#">
+            <img
+              src="../src/images/Icon-Phone-call.svg"
+              alt="Phone"
+            >
+          </a>
+          <a href="#menu">
+            <img
+                src="../src/images/Icon-Burger-menu.svg"
+                alt="Menu"
+              >
+          </a>
+        </div>
+
+      </nav>
+      <h1 class="title title--header">
+        Bring joy back
+        <br>
+        to the everyday
+      </h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation">
+        <a href="#">
+          <img
+            class="navigation__logo"
+            src="../src/images/header-logo.png"
+            alt="Header logo"
+          >
+        </a>
+
+        <div class="navigation__buttons">
+          <a href="#header">
+            <img
+              src="../src/images/Icon-Close.svg"
+              alt="Phone"
+            >
+          </a>
+        </div>
+
+      </nav>
+      <nav class="links">
+        <ul class="links__list">
+          <li class="links__item"><a class="links__link" href="#">Products</a></li>
+          <li class="links__item"><a class="links__link" href="#">Store</a></li>
+          <li class="links__item"><a class="links__link" href="#">Login</a></li>
+          <li class="links__item"><a class="links__link" href="#">Cart(0)</a></li>
+        </ul>
+      </nav>
+
+      <p class="menu__paragraph">
+        +1 234 5555-55-55
+      </p>
+      <p class="menu__paragraph">
+        <a
+          class="menu__call-link"
+          href="#">
+            call to order
+        </a>
+      </p>
+    </div>
+
+    <main class="main">
+      <section class="section">
+        <article>
+          <h2 class="title title__first">
+            Recommended
+          </h2>
+          <div class="main__photo"></div>
+
+          <p class="main__paragraph main__paragraph--name">
+            Phone (1)
+          </p>
+
+          <p class="main__paragraph main__paragraph--description">
+              Designed with instinct, to bring joy back to the everyday. Through the Glyph Interface, a perfected OS and exceptional dual camera. All startlingly fast.
+          </p>
+
+          <p class="main__paragraph main__paragraph--price">
+            $ 499.00
+          </p>
+        </article>
+
+        <article>
+          <img
+            class="main__photo"
+            src="./images/main_section-second_img.png"
+            alt="ear">
+          <p class="main__paragraph main__paragraph--name">Ear (2)</p>
+          <p class="main__paragraph main__paragraph--description">
+            Perfecting the path from artist to ear. So that music sounds just as it was intended.
+          </p>
+          <p class="main__paragraph main__paragraph--price">
+            $ 149.00
+          </p>
+        </article>
+
+        <article>
+          <img
+            class="main__photo"
+            src="./images/main_section-third_img.jpg"
+            alt="ear">
+          <p class="main__paragraph main__paragraph--name">Ear (stick)</p>
+          <p class="main__paragraph main__paragraph--description">
+            Tech you can’t feel. Leaving just space for sound to come to life. Powered by custom sound technology.
+          </p>
+          <p class="main__paragraph main__paragraph--price">
+            $ 119.00
+          </p>
+        </article>
+      </section>
+
+      <section class="section">
+        <h2 class="title title__second">
+          Browse Nothing products by category
+        </h2>
+
+        <article class="article">
+          <div class="pictures">
+            <div class="pictures__item">
+              <img
+              class="pictures__image"
+              src="../src/images/photo-11.png"
+              alt="pic-1"
+            >
+            </div>
+            <div class="pictures__item">
+              <img
+              class="pictures__image"
+              src="../src/images/photo-22.png"
+              alt="pic-2"
+            >
+            </div>
+          </div>
+
+          <p class="article__paragraph">
+            All products
+          </p>
+        </article>
+
+        <article class="article">
+          <div class="pictures">
+            <div class="pictures__item">
+              <img
+              class="pictures__image pictures__image--png"
+              src="../src/images/photo-33.png"
+              alt="pic-1"
+            >
+            </div>
+            <div class="pictures__item">
+              <img
+              class="pictures__image"
+              src="../src/images/photo-44.png"
+              alt="pic-2"
+            >
+            </div>
+          </div>
+          <p class="article__paragraph">
+            Audio
+          </p>
+        </article>
+
+
+        <article class="article">
+          <div class="pictures">
+            <div class="pictures__item">
+              <img
+              class="pictures__image"
+              src="../src/images/photo-55.png"
+              alt="pic-1"
+            >
+            </div>
+            <div class="pictures__item">
+              <img
+              class="pictures__image pictures__image--png"
+              src="../src/images/photo-66.png"
+              alt="pic-2"
+            >
+            </div>
+          </div>
+          <p class="article__paragraph">
+            Accessories
+          </p>
+        </article>
+        <button class="button button--primary">
+          <a class="button__text button__text--first" href="#">
+           View All
+          </a>
+        </button>
+
+      </section>
+      <img
+        class="pictures__mid"
+        src="./images/Image_mid-site.jpg"
+        alt="mid photo of phone"
+      >
+      <section class="section">
+        <h2 class="title title--about">
+          About Us
+        </h2>
+        <article class="article article__about-us">
+          <p>
+             We’re a London-based tech company on a mission to remove barriers between people and technology. <br><br>
+          </p>
+          <p>
+          To do this, we’re crafting intuitive, flawlessly connected products that improve our lives without getting in the way.
+          No confusing tech-speak. No silly product names. Just artistry, passion and trust. And products we’re proud to share with our friends and family. Simple. <br><br>
+          </p>
+
+          <p>          Because beautiful tech shouldn’t be complicated.
+          </p>
+        </article>
+      </section>
+
+      <section class="section">
+        <h2 class="title title--contact">
+          Contact us
+        </h2>
+
+        <form class="form">
+          <div class="form__item">
+            <label class="form__label" for="name"> Name:</label>
+            <input
+              class="form__input"
+              type="text"
+              name="name"
+              id="name"
+              placeholder="Name"
+            >
+          </div>
+          <div class="form__item">
+            <label class="form__label" for="email">Email:</label>
+            <input
+              class="form__input"
+              type="email"
+              name="email"
+              id="email"
+              placeholder="Email"
+            >
+          </div>
+          <div class="form__item">
+            <label class="form__label" for="message">Message:</label>
+            <textarea
+              placeholder="Message"
+              class="form__textarea"
+              id="message">
+            </textarea>
+          </div>
+          <button class="button button--secondary button__text button__text--second">Send</button>
+        </form>
+      </section>
+
+      <section class="section">
+        <address class="address">
+          <h4 class="address__label">
+            Phone
+          </h4>
+          <p class="address__content">
+            +1 234 5555-55-55
+          </p>
+          <h4 class="address__label">
+            Email
+          </h4>
+          <p class="address__content">
+            hello@nothing.com
+          </p>
+          <h4 class="address__label">
+            Address
+          </h4>
+          <p class="address__content">
+            400 first ave. <br>suite 700 <br>Minneapolis, MN 55401
+          </p>
+        </address>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: "Roboto";
+  font-family: "Space Grotesk";
   src: url("../fonts/Roboto-Regular-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;

diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss