Updates

anya-shults · Sep 17, 2023 · eb16623 · eb16623
commit eb16623
Show file tree

Hide file tree

Showing 43 changed files with 1,120 additions and 0 deletions.
diff --git a/img/footer-bg.png b/img/footer-bg.png
diff --git a/img/header-bg-desktop.png b/img/header-bg-desktop.png
diff --git a/img/header-bg-mobile.png b/img/header-bg-mobile.png
diff --git a/img/header-bg-tablet.png b/img/header-bg-tablet.png
diff --git a/img/icons/icon-burger-menu-hover.png b/img/icons/icon-burger-menu-hover.png
diff --git a/img/icons/icon-burger-menu.png b/img/icons/icon-burger-menu.png
diff --git a/img/icons/icon-close.png b/img/icons/icon-close.png
diff --git a/img/icons/icon-phone.png b/img/icons/icon-phone.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/section-category/category-birds-desktop.png b/img/section-category/category-birds-desktop.png
diff --git a/img/section-category/category-birds-tablet.png b/img/section-category/category-birds-tablet.png
diff --git a/img/section-category/category-charger-desktop.png b/img/section-category/category-charger-desktop.png
diff --git a/img/section-category/category-charger-tablet.png b/img/section-category/category-charger-tablet.png
diff --git a/img/section-category/category-ear-desktop.png b/img/section-category/category-ear-desktop.png
diff --git a/img/section-category/category-ear-stick-desktop.png b/img/section-category/category-ear-stick-desktop.png
diff --git a/img/section-category/category-ear-stick-one-desktop.png b/img/section-category/category-ear-stick-one-desktop.png
diff --git a/img/section-category/category-ear-stick-one-tablet.png b/img/section-category/category-ear-stick-one-tablet.png
diff --git a/img/section-category/category-ear-stick-tablet.png b/img/section-category/category-ear-stick-tablet.png
diff --git a/img/section-category/category-ear-tablet.png b/img/section-category/category-ear-tablet.png
diff --git a/img/section-category/category-phone-desktop.png b/img/section-category/category-phone-desktop.png
diff --git a/img/section-category/category-phone-tablet.png b/img/section-category/category-phone-tablet.png
diff --git a/img/section-recommended/recommended-ear-stick-tablet.png b/img/section-recommended/recommended-ear-stick-tablet.png
diff --git a/img/section-recommended/recommended-ear-tablet.png b/img/section-recommended/recommended-ear-tablet.png
diff --git a/img/section-recommended/recommended-phone-tablet.png b/img/section-recommended/recommended-phone-tablet.png
diff --git a/index.html b/index.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="en" class="page">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nothing</title>
+    <link rel="stylesheet" href="./styles/main.scss">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400&display=swap" rel="stylesheet">
+    <link rel="icon" href="https://intl.nothing.tech/cdn/shop/files/favicon_32x32.png?v=1627223914">
+    <script src="scripts/main.js" defer></script>
+  </head>
+  <body class="page__body">
+    <header class="header">
+      <div class="header__top">
+        <div class="top-bar header__top-bar">
+          <a href="#" class="top-bar__logo-link">
+            <img
+              src="./img/logo.png"
+              alt="Nothing logo"
+              class="top-bar__logo"
+            >
+          </a>
+
+          <div class="top-bar__icons">
+            <a href="tel:+1 234 5555-55-55" class="icon icon--phone"></a>
+            <a href="#menu" class="icon icon--menu"></a>
+          </div>
+        </div>
+      </div>
+
+      <div class="header__bottom">
+        <h1 class="header__title">
+          Bring joy back
+          <br>
+          to the everyday
+        </h1>
+      </div>
+    </header>
+
+    <aside class="menu page__menu" id="menu">
+      <div class="menu__container">
+        <div class="top-bar menu__top-bar">
+          <a href="#" class="top-bar__logo-link">
+            <img
+              src="./img/logo.png"
+              alt="Nothing logo"
+              class="top-bar__logo"
+            >
+          </a>
+
+          <div class="top-bar__icons">
+            <a href="#" class="icon icon--close"></a>
+          </div>
+        </div>
+        <nav class="nav menu__nav">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a href="#recommended" class="nav__link">Products</a>
+            </li>
+            <li class="nav__item">
+              <a href="#category" class="nav__link">Store</a>
+            </li>
+            <li class="nav__item">
+              <a href="#" class="nav__link">Login</a>
+            </li>
+            <li class="nav__item">
+              <a href="#" class="nav__link">Card(<span class="menu__in-card">0</span>)</a>
+            </li>
+          </ul>
+        </nav>
+
+        <a href="tel:+1 234 5555-55-55" class="menu__phone-number">+1 234 5555-55-55</a>
+        <a href="tel:+1 234 5555-55-55" class="menu__call-to-order">call to order</a>
+      </div>
+    </aside>
+
+    <main class="main page__main">
+      <section class="recommended" id="recommended">
+        <h2 class="section-title recommended__title">Recommended</h2>
+
+        <div class="recommended__products">
+          <article class="product-card recommended__product-card">
+            <img
+              src="./img/section-recommended/recommended-phone-tablet.png"
+              alt="nothing phone"
+              class="product-card__img"
+            >
+
+            <h3 class="product-card__title">Phone (1)</h3>
+
+            <p class="product-card__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>
+
+            <h3 class="product-card__price">$ 499.00</h3>
+          </article>
+
+          <article class="product-card recommended__product-card">
+            <img
+              src="./img/section-recommended/recommended-ear-tablet.png"
+              alt="nothing ear"
+              class="product-card__img"
+            >
+
+            <h3 class="product-card__title">Ear (2)</h3>
+
+            <p class="product-card__description">
+              Perfecting the path from artist to ear. So that music sounds just as it was intended.
+            </p>
+
+            <h3 class="product-card__price">$ 149.00</h3>
+          </article>
+
+          <article class="product-card recommended__product-card">
+            <img
+              src="./img/section-recommended/recommended-ear-stick-tablet.png"
+              alt="nothing ear stick"
+              class="product-card__img"
+            >
+
+            <h3 class="product-card__title">Ear (stick)</h3>
+
+            <p class="product-card__description">
+              Tech you can’t feel. Leaving just space for sound to come to life. Powered by custom sound technology.
+            </p>
+
+            <h3 class="product-card__price">$ 119.00</h3>
+          </article>
+        </div>
+      </section>
+
+      <section class="category" id="category">
+        <h2 class="section-title category__title">Browse Nothing products by category</h2>
+
+        <div class="category__categories">
+          <img
+            src="./img/section-category/category-birds-desktop.png"
+            alt="birds on phone"
+            class="category__image category__image--long"
+          >
+
+          <img
+            src="./img/section-category/category-ear-desktop.png"
+            alt="ears"
+            class="category__image"
+          >
+
+          <a href="#" class="category__header">All products</a>
+        </div>
+
+        <div class="category__categories">
+          <img
+            src="./img/section-category/category-ear-stick-one-desktop.png"
+            alt="one ear stick"
+            class="category__image"
+          >
+
+          <img
+            src="./img/section-category/category-ear-stick-desktop.png"
+            alt="ear stick"
+            class="category__image category__image--long"
+          >
+
+          <a href="#" class="category__header">Audio</a>
+        </div>
+
+        <div class="category__categories">
+          <img
+            src="./img/section-category/category-phone-desktop.png"
+            alt="phone"
+            class="category__image category__image--long"
+          >
+
+          <img
+            src="./img/section-category/category-charger-desktop.png"
+            alt="charger"
+            class="category__image"
+          >
+
+          <a href="#" class="category__header">Accessories</a>
+        </div>
+
+        <a href="#" class="button category__button">View all</a>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer_background-image"></div>
+      <section class="about-us footer__about-us">
+        <h2 class="about-us__title section-title section-title--about-us">About us</h2>
+        <div class="about-us__text">
+          <p class="about-us__paragraph">
+            We’re a London-based tech company on a mission to remove barriers between people and technology.
+            <br><br>
+            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>
+            Because beautiful tech shouldn’t be complicated.
+          </p>
+        </div>
+      </section>
+
+      <section class="contact-us footer__contact-us">
+        <h2 class="section-title contact-us__title">Contact us</h2>
+        <form
+          action="#"
+          class="contact-us__form"
+          onsubmit="this.reset(); return false;"
+        >
+          <input
+            type="text"
+            name="name"
+            placeholder="Name"
+            class="contact-us__input"
+            required
+          >
+
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            class="contact-us__input"
+            required
+          >
+
+          <textarea
+            name="message"
+            cols="30"
+            rows="4"
+            class="contact-us__input contact-us__message"
+            placeholder="Message"
+          ></textarea>
+
+          <input
+            type="submit"
+            class="button contact-us__submit"
+            value="Send"
+          >
+        </form>
+        <div class="contact-us__info">
+          <h4 class="contact-us__label">Phone</h4>
+          <span class="contact-us__contacts">+1 234 5555-55-55</span>
+          <h4 class="contact-us__label">Email</h4>
+          <span class="contact-us__contacts">hello@nothing.com</span>
+          <h4 class="contact-us__label">Address</h4>
+          <a
+            href="https://www.google.com/maps/place/400+N+1st+Ave+STE+700,+Minneapolis,+MN+55401,+%D0%A1%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D1%96+%D0%A8%D1%82%D0%B0%D1%82%D0%B8+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8/@44.9813258,-93.2731311,17z/data=!3m1!4b1!4m6!3m5!1s0x52b3328fdf233887:0x3348e5113ed2472d!8m2!3d44.9813258!4d-93.2731311!16s%2Fg%2F11nyn_tfyt?entry=ttu"
+            class="contact-us__contacts contact-us__contacts--link"
+            target="_blank"
+            >
+              400 first ave.
+            <br>
+              suite 700
+            <br>
+              Minneapolis, MN 55401
+          </a>
+        </div>
+      </section>
+    </footer>
+  </body>
+</html>
diff --git a/scripts/main.js b/scripts/main.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/styles/blocks/about-us.scss b/styles/blocks/about-us.scss
@@ -0,0 +1,35 @@
+.about-us {
+  @include getGrid;
+
+  &__title {
+    grid-column: span 2;
+
+    @include onTablet {
+      grid-column: span 3;
+
+      align-self: start;
+    }
+
+    @include onDesktop {
+      grid-column: span 6;
+    }
+  }
+
+  &__text {
+    margin-bottom: 104px;
+
+    grid-column: span 2;
+
+    @include onTablet {
+      grid-column: span 3;
+    }
+
+    @include onDesktop {
+      grid-column: span 6;
+    }
+  }
+
+  &__paragraph {
+    @include resetMargin;
+  }
+}
diff --git a/styles/blocks/button.scss b/styles/blocks/button.scss
@@ -0,0 +1,28 @@
+.button {
+  box-sizing: border-box;
+
+  height: 56px;
+  background-color: $main-color;
+
+  @include getSpaceGroteskFont(16px, 56px, 700);
+  color: #fff;
+  text-decoration: none;
+  text-align: center;
+
+  border: 2px solid $main-color;
+  border-radius: 8px;
+
+  transition: all 0.3s;
+
+  &:hover {
+    color: $main-color;
+    background-color: $input-background-color;
+    border: 2px solid $submit-border-color;
+  }
+
+  &:active {
+    background-color: $main-color;
+    color: #fff;
+
+  }
+}