mate-academy · szymonpachucki · Nov 23, 2023 · danon321 · Nov 29, 2023 · danon321
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [12.x]
 
     steps:
     - uses: actions/checkout@v2

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/images/Cookie.svg b/src/images/Cookie.svg
diff --git a/src/images/Crumbs.svg b/src/images/Crumbs.svg
diff --git a/src/images/Logo.svg b/src/images/Logo.svg
diff --git a/src/images/LogoFooter.svg b/src/images/LogoFooter.svg
diff --git a/src/images/Photo (1).svg b/src/images/Photo (1).svg
diff --git a/src/images/Photo (2).svg b/src/images/Photo (2).svg
diff --git a/src/images/Photo (3).svg b/src/images/Photo (3).svg
diff --git a/src/images/Photo (4).svg b/src/images/Photo (4).svg
diff --git a/src/images/Photo (5).svg b/src/images/Photo (5).svg
diff --git a/src/images/Photo.svg b/src/images/Photo.svg
diff --git a/src/images/Vector (1).png b/src/images/Vector (1).png
diff --git a/src/images/Vector (2).png b/src/images/Vector (2).png
diff --git a/src/images/Vector (3).png b/src/images/Vector (3).png
diff --git a/src/images/Vector (4).png b/src/images/Vector (4).png
diff --git a/src/images/Vector (5).png b/src/images/Vector (5).png
diff --git a/src/images/Vector (6).png b/src/images/Vector (6).png
diff --git a/src/images/Vector.png b/src/images/Vector.png
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,269 @@
     <link rel="stylesheet" href="./styles/main.scss">
   </head>
   <body>
-    <h1>Hello Mate Academy</h1>
+    <header class="header">
+      <img
+        src="./images/Logo.svg"
+        alt="logo"
+        class="header__logo"
+      >
+      <div class="header__nav">
+        <a class="header__nav-link" href="#products">Products</a>
+        <a class="header__nav-link" href="#aboutUs">About Us</a>
+        <a class="header__nav-link" href="#aboutUs">Blog</a>
+        <div class="header__nav-contact">
+          <img
+            src="./images/Vector.png"
+            alt="phone"
+            class="header__nav-contact-img"
+          >
+          <a href="#footer" class="header__nav-contact-link">contact us</a>
+        </div>
+      </div>
+      <img
+        src="./images/Vector (1).png"
+        alt="burger menu"
+        class="header__iconMenu"
+        onclick="toggleStyles()"
+      >
+      <img
+      src="./images/Vector (2).png"
+      alt="burger menu"
+      class="header__iconMenu-close"
+      onclick="toggleStyles()"
+    >
+      <div class="header__burger">
+        <nav class="header__burger-nav">
+          <a
+            class="header__burger-nav-link"
+            onclick="toggleStyles()"
+            href="#products"
+          >
+            Products
+          </a>
+          <a
+            class="header__burger-nav-link"
+            onclick="toggleStyles()"
+            href="#aboutUs"
+          >
+            About Us
+          </a>
+          <a
+            class="header__burger-nav-link"
+            onclick="toggleStyles()"
+            href="#aboutUs"
+          >
+            Blog
+          </a>
+          <div
+            class="header__burger-nav-contact"
+            onclick="toggleStyles()"
+          >
+            <img
+              src="./images/Vector.png"
+              alt="phone"
+              class="header__burger-nav-contact-img"
+            >
+            <a href="#footer" class="header__burger-nav-contact-link">contact us</a>
+          </div>
+        </nav>
+      </div>
+    </header>
+    <section class="home" id="home">
+      <h3 class="home__text">We bake your fantasies — croissants, cakes, cookies, and cupcakes.</h3>
+      <h1 class="home__title">Creative bakery</h1>
+      <button class="home__button" href="#aboutUs"><img src="./images/Vector (3).png" alt="cookie"><h3>learn more</h3></button>
+      <img
+        class="home__backgroundImg"
+        src="./images/Cookie.svg"
+        alt="cookie"
+      >
+    </section>
+    <section class="products" id="products">
+      <h1 class="products__title">What we bake</h1>
+      <h3 class="products__text">We can customize our cookies right for your needs. Just imagine it</h3>
+      <div class="products__productCard">
+        <img
+          src="./images/Photo.svg"
+          alt="product photo"
+          class="products__productCard-img"
+        >
+        <h4 class="products__productCard-tag">cakes</h4>
+        <h3 class="products__productCard-text">Oatmeal cookies with golden raisins, orange zest and chocolate chips</h3>
+        <div class="products__productCard-order">
+          <img
+            src="./images/Vector (3).png"
+            alt="order button"
+            class="products__productCard-order-img"
+          >
+          <a href="#example" class="products__productCard-order-link">order</a>
+        </div>
+      </div>
+      <div class="products__productCard">
+        <img
+          src="./images/Photo (1).svg"
+          alt="product photo"
+          class="products__productCard-img"
+        >
+        <h4 class="products__productCard-tag">cakes</h4>
+        <h3 class="products__productCard-text">Chocolate biscuit coffee cake topped with a buttercream and powder</h3>
+        <div class="products__productCard-order">
+          <img
+            src="./images/Vector (3).png"
+            alt="order button"
+            class="products__productCard-order-img"
+          >
+          <h3 class="products__productCard-order-link">order</h3>
+        </div>
+      </div>
+      <div class="products__productCard">
+        <img
+          src="./images/Photo (2).svg"
+          alt="product photo"
+          class="products__productCard-img"
+        >
+        <h4 class="products__productCard-tag">donuts</h4>
+        <h3 class="products__productCard-text">Light multi-layered croissant strewn with cinammon and almond “petals”</h3>
+        <div class="products__productCard-order">
+          <img
+            src="./images/Vector (3).png"
+            alt="order button"
+            class="products__productCard-order-img"
+          >
+          <h3 class="products__productCard-order-link">order</h3>
+        </div>
+      </div>
+      <div class="products__productCard">
+        <img
+          src="./images/Photo (3).svg"
+          alt="product photo"
+          class="products__productCard-img"
+        >
+        <h4 class="products__productCard-tag">donuts</h4>
+        <h3 class="products__productCard-text">Light multi-layered croissant strewn with coconut and nuts</h3>
+        <div class="products__productCard-order">
+          <img
+            src="./images/Vector (3).png"
+            alt="order button"
+            class="products__productCard-order-img"
+          >
+          <h3 class="products__productCard-order-link">order</h3>
+        </div>
+      </div>
+      <div class="products__productCard">
+        <img
+          src="./images/Photo (5).svg"
+          alt="product photo"
+          class="products__productCard-img"
+        >
+        <h4 class="products__productCard-tag">cookies</h4>
+        <h3 class="products__productCard-text">Oatmeal cookies with golden raisins, orange zest and chocolate chips</h3>
+        <div class="products__productCard-order">
+          <img
+            src="./images/Vector (3).png"
+            alt="order button"
+            class="products__productCard-order-img"
+          >
+          <h3 class="products__productCard-order-link">order</h3>
+        </div>
+      </div>
+      <div class="products__productCard">
+        <img
+          src="./images/Photo (4).svg"
+          alt="product photo"
+          class="products__productCard-img"
+        >
+        <h4 class="products__productCard-tag">cakes</h4>
+        <h3 class="products__productCard-text">Chocolate salted caramel, Vanilla frutti pebbles</h3>
+        <div class="products__productCard-order">
+          <img
+            src="./images/Vector (3).png"
+            alt="order button"
+            class="products__productCard-order-img"
+          >
+          <h3 class="products__productCard-order-link">order</h3>
+        </div>
+      </div>
+    </section>
+    <section class="aboutUs" id="aboutUs">
+      <div class="aboutUs__description">
+        <h1 class="aboutUs__description-title">Few words About us</h1>
+        <h3 class="aboutUs__description-text">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.</h3>
+      </div>
+      <div class="aboutUs__stats">
+        <div class="aboutUs__stats-display">
+          <h1 class="aboutUs__stats-display-title">2015</h1>
+          <h4 class="aboutUs__stats-display-text">Foundation year</h4>
+        </div>
+        <div class="aboutUs__stats-display">
+          <h1 class="aboutUs__stats-display-title">23</h1>
+          <h4 class="aboutUs__stats-display-text">Stores</h4>
+        </div>
+        <div class="aboutUs__stats-display">
+          <h1 class="aboutUs__stats-display-title">155</h1>
+          <h4 class="aboutUs__stats-display-text">Companies</h4>
+        </div>
+        <div class="aboutUs__stats-display">
+          <h1 class="aboutUs__stats-display-title">10K+</h1>
+          <h4 class="aboutUs__stats-display-text">Clients</h4>
+        </div>
+      </div>
+    </section>
+    <footer class="footer" id="footer">
+      <div class="footer__menu">
+        <img
+          src="./images/LogoFooter.svg"
+          alt="logo"
+          class="footer__menu-logo"
+        >
+        <nav class="footer__menu-nav">
+          <h3 class="footer__menu-nav-title">menu</h3>
+          <a href="#products" class="footer__menu-nav-link">Products</a>
+          <a href="#aboutUs" class="footer__menu-nav-link">About Us</a>
+          <a href="#aboutUs" class="footer__menu-nav-link">Blog</a>
+          <a href="#example" class="footer__menu-nav-link">Terms & Privacy</a>
+        </nav>
+      </div>
+      <div class="footer__contact">
+        <h1 class="footer__contact-title">contact us</h1>
+        <div class="footer__contact-description">
+          <div class="footer__contact-description-item">
+            <h3 class="footer__contact-description-item-title">call us</h3>
+            <a href="tel:+48504838558" class="footer__contact-description-item-link">504838558</a>
+          </div>
+          <div class="footer__contact-description-item">
+            <h3 class="footer__contact-description-item-title">email us</h3>
+            <a href="mailto:[email protected]" class="footer__contact-description-item-link">[email protected]</a>
+          </div>
+          <div class="footer__contact-description-item">
+            <h3 class="footer__contact-description-item-title">linkedin</h3>
+            <a href="https://www.linkedin.com/in/szymon-pachucki-6b1329289/" class="footer__contact-description-item-link">Linkedin Profile</a>
+          </div>
+          <div class="footer__contact-description-item">
+            <h3 class="footer__contact-description-item-title">our code</h3>
+            <a href="https://github.com/szymonpachucki" class="footer__contact-description-item-link">Github profile</a>
+          </div>
+        </div>
+      </div>
+      <div class="footer__social">
+        <img
+          class="footer__social-img"
+          src="./images/Vector (5).png"
+          alt="social link"
+        >
+        <img
+          class="footer__social-img"
+          src="./images/Vector (4).png"
+          alt="social link"
+        >
+        <img
+          class="footer__social-img"
+          src="./images/Vector (6).png"
+          alt="social link"
+        >
+      </div>
+      <h4 class="footer__rights">© Bakerlab 2022</h4>
+    </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>