mobile-beta

mate-academy · Oct 4, 2023 · ef72d44 · ef72d44
1 parent a0ac49a
commit ef72d44
Show file tree

Hide file tree

Showing 40 changed files with 1,066 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -7,8 +7,8 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY
 - Tablet 640px
 - Mobile (> 320px)
 
-
 ## Github flow
+
 1. **Fork** the repo.
 2. **Clone** the forked one. (The project link should have your name but not `mate-academy`)
 3. Run `npm install` (or just `npm i`).
@@ -22,7 +22,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/layout_creativeBakery/).
+    [DEMO LINK](https://Stan1slav123.github.io/layout_creativeBakery/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.

diff --git a/src/images/crumbs.png b/src/images/crumbs.png
diff --git a/src/images/header-bg.png b/src/images/header-bg.png
diff --git a/src/images/icons/icon-arrow.png b/src/images/icons/icon-arrow.png
diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png
diff --git a/src/images/icons/icon-cookie-hover.png b/src/images/icons/icon-cookie-hover.png
diff --git a/src/images/icons/icon-cookie.png b/src/images/icons/icon-cookie.png
diff --git a/src/images/icons/icon-facebook-white.svg b/src/images/icons/icon-facebook-white.svg
diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg
diff --git a/src/images/icons/icon-instagram-white.svg b/src/images/icons/icon-instagram-white.svg
diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg
diff --git a/src/images/icons/icon-menu.png b/src/images/icons/icon-menu.png
diff --git a/src/images/icons/icon-phone.png b/src/images/icons/icon-phone.png
diff --git a/src/images/icons/icon-twitter-white.svg b/src/images/icons/icon-twitter-white.svg
diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg
diff --git a/src/images/logo-white.png b/src/images/logo-white.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/what-we-bake/cake-1.png b/src/images/what-we-bake/cake-1.png
diff --git a/src/images/what-we-bake/cake-2.png b/src/images/what-we-bake/cake-2.png
diff --git a/src/images/what-we-bake/cake-3.png b/src/images/what-we-bake/cake-3.png
diff --git a/src/images/what-we-bake/cake-4.png b/src/images/what-we-bake/cake-4.png
diff --git a/src/images/what-we-bake/cake-5.png b/src/images/what-we-bake/cake-5.png
diff --git a/src/images/what-we-bake/cake-6.png b/src/images/what-we-bake/cake-6.png
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,231 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="page" lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</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=Inter:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styles/index.scss">
   </head>
-  <body>
-    <h1>Hello Mate Academy</h1>
+  <body class="page__body">
+    <header class="header">
+      <nav class="nav header__nav">
+        <a href="#" class="nav__logo">
+          <img
+            src="images/logo.png"
+            alt="BakerLab-logo"
+            class="nav__logo-img"
+          >
+        </a>
+
+        <ul class="nav__list">
+          <li><a href="#" class="nav__link">Products</a></li>
+          <li><a href="#" class="nav__link">About Us</a></li>
+          <li><a href="#" class="nav__link">Blog</a></li>
+          <li><a href="tel:6295550129" class="nav__link nav__link--phone">Contact us</a></li>
+        </ul>
+
+        <a class="icon icon--menu" href="#menu"></a>
+      </nav>
+
+      <div class="header__bottom">
+        <p class="header__info">We bake your fantasies — croissants, cakes, cookies, and cupcakes.</p>
+        <h1 class="header__title">Creative bakery</h1>
+        <a class="header__button" href="#">Learn more</a>
+      </div>
+    </header>
+    <aside class="menu page__menu" id="menu">
+      <nav class="nav menu__nav">
+        <a href="#" class="nav__logo">
+          <img
+            src="images/logo.png"
+            alt="BakerLab-logo"
+            class="nav__logo-img"
+          >
+        </a>
+        <a class="icon icon--close" href="#"></a>
+      </nav>
+
+      <ul class="menu__list">
+        <li><a href="#" class="menu__link">Products</a></li>
+        <li><a href="#" class="menu__link">About Us</a></li>
+        <li><a href="#" class="menu__link">Blog</a></li>
+        <li><a href="tel:6295550129" class="menu__link menu__link--phone">Contact us</a></li>
+      </ul>
+
+    </aside>
+    <main class="main">
+      <section class="what-we-bake main__what-we-bake">
+        <h2 class="section-title what-we-bake__title">What we bake</h2>
+
+        <p class="info what-we-bake__info">We can customize our cookies right for your needs. Just imagine it</p>
+
+        <div class="what-we-bake__products">
+          <article class="product">
+            <img
+              class="product__photo"
+              src="images/what-we-bake/cake-1.png"
+              alt="Cakes-img"
+            >
+
+            <h3 class="product__title">Cakes</h3>
+            <p class="product__info">Oatmeal cookies with golden raisins, orange zest and chocolate chips</p>
+
+            <a href="#" class="product__button">Order</a>
+          </article>
+          <article class="product">
+            <img
+              class="product__photo"
+              src="images/what-we-bake/cake-2.png"
+              alt="Cakes-img"
+            >
+
+            <h3 class="product__title">Cakes</h3>
+            <p class="product__info">Oatmeal cookies with golden raisins, orange zest and chocolate chips</p>
+
+            <a href="#" class="product__button">Order</a>
+          </article>
+          <article class="product product--right-3">
+            <img
+              class="product__photo"
+              src="images/what-we-bake/cake-3.png"
+              alt="Cakes-img"
+            >
+
+            <h3 class="product__title">Cakes</h3>
+            <p class="product__info">Oatmeal cookies with golden raisins, orange zest and chocolate chips</p>
+
+            <a href="#" class="product__button">Order</a>
+          </article>
+          <article class="product product--right-4">
+            <img
+              class="product__photo"
+              src="images/what-we-bake/cake-4.png"
+              alt="Cakes-img"
+            >
+
+            <h3 class="product__title">Cakes</h3>
+            <p class="product__info">Oatmeal cookies with golden raisins, orange zest and chocolate chips</p>
+
+            <a href="#" class="product__button">Order</a>
+          </article>
+          <article class="product">
+            <img
+              class="product__photo"
+              src="images/what-we-bake/cake-5.png"
+              alt="Cakes-img"
+            >
+
+            <h3 class="product__title">Cakes</h3>
+            <p class="product__info">Oatmeal cookies with golden raisins, orange zest and chocolate chips</p>
+
+            <a href="#" class="product__button">Order</a>
+          </article>
+          <article class="product">
+            <img
+              class="product__photo"
+              src="images/what-we-bake/cake-6.png"
+              alt="Cakes-img"
+            >
+
+            <h3 class="product__title">Cakes</h3>
+            <p class="product__info">Oatmeal cookies with golden raisins, orange zest and chocolate chips</p>
+
+            <a href="#" class="product__button">Order</a>
+          </article>
+        </div>
+      </section>
+      <section class="about-us main__about-us">
+
+        <h2 class="section-title about-us__title">Few words About us</h2>
+
+        <p class="info about-us__info">
+          Like many design teams, Onfido made the transition from Abstract
+          + Sketch, to Figma in the last couple of years. One of the common
+          resistance points internally before making that switch, was Figma’s
+          lack of Git-style branching that Abstract enabled. The design team
+          had come to rely on branching and had built a lot of our processes around it.
+        </p>
+
+        <div class="items">
+
+          <div class="items__item">
+
+            <h3 class="items__heading">2015</h3>
+            <p class="itmes__info">Foundation year</p>
+          </div>
+
+          <div class="items__item">
+
+            <h3 class="items__heading">23</h3>
+            <p class="itmes__info">Stores</p>
+          </div>
+
+          <div class="items__item">
+
+            <h3 class="items__heading">155</h3>
+            <p class="itmes__info">Companies</p>
+          </div>
+
+          <div class="items__item">
+
+            <h3 class="items__heading">10k+</h3>
+            <p class="itmes__info">Clients</p>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer class="footer">
+      <section class="footer__navigation">
+        <a href="#" class="footer__logo">
+
+          <img
+            src="images/logo-white.png"
+            alt="BakerLab-logo"
+            class="footer__logo-img"
+          >
+        </a>
+
+        <ul class="footer__list">
+          <li><h3 class="footer__heading">Menu</h3></li>
+          <li><a href="#" class="footer__link">Products</a></li>
+          <li><a href="#" class="footer__link">About Us</a></li>
+          <li><a href="#" class="footer__link">Blog</a></li>
+          <li><a href="tel:6295550129" class="footer__link">Terms & Privacy</a></li>
+        </ul>
+      </section>
+      <section class="footer__contact">
+        <h2 class="section-title footer__title">Contact us</h2>
+
+        <div class="footer__phone-num">
+          <ul class="footer__list">
+            <li><h3 class="footer__heading">Call us</h3></li>
+            <li><a href="tel: 6295550129" class="footer__link">(629) 555-0129</a></li>
+            <li><a href="tel: 6295550123" class="footer__link">(603) 555-0123</a></li>
+            <li><a href="tel: 6295550127" class="footer__link">(704) 555-0127</a></li>
+          </ul>
+        </div>
+
+        <div class="footer__email">
+          <ul class="footer__list">
+            <li><h3 class="footer__heading">Email us</h3></li>
+            <li><a href="mailto: [email protected]" class="footer__link">[email protected]</a></li>
+          </ul>
+        </div>
+
+        <div class="footer__socials">
+          <a href="#" class="icon icon--facebook icon--facebook--hover"></a>
+          <a href="#" class="icon icon--instagram icon--instagram--hover"></a>
+          <a href="#" class="icon icon--twitter icon--twitter--hover"></a>
+        </div>
+
+        <p class="footer__end">
+          © Bakerlab 2022
+        </p>
+      </section>
+    </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss
@@ -0,0 +1,43 @@
+.about-us {
+  @include pageGrid;
+  max-width: 400px;
+  margin-inline: auto;
+
+  background-image: url(../images/crumbs.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+
+  @include onTablet {
+    max-width: 680px;
+  }
+
+  @include onDesktop {
+    max-width: 1112px;
+  }
+  &__title {
+    margin-bottom: 32px;
+    grid-column: span 2;
+
+    @include onTablet {
+      grid-column: span 4;
+    }
+
+    @include onDesktop {
+      margin-bottom: 144px;
+    }
+  }
+
+  &__info {
+    margin-bottom: 64px;
+    grid-column: span 2;
+
+    @include onTablet {
+      grid-column: span 4;
+    }
+
+    @include onDesktop {
+
+    }
+  }
+}