mate-academy · aMtiIV · Feb 13, 2024 · Feb 13, 2024 · Feb 18, 2024 · Feb 18, 2024
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # POTR POTS landing page (HARD)
 
-**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** 
+**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).**
 
 Implement landing page according to [Figma design](https://www.figma.com/file/50zgLU65Mcd3MisFHMfLfx/POTR-POTS_FE-students?node-id=1760%3A281) - Use BEM and SCSS
 - The design 1440px
@@ -33,7 +33,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/50
 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/Potr_Pots/)
+  [DEMO LINK](https://aMtiIV.github.io/Potr_Pots/)
 14. Copy `DEMO LINK` to the PR description
 
 > To update you PR repeat steps 7-11

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@mate-academy/bemlint": "^0.1.1",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "*",
-    "@mate-academy/scripts": "^1.2.12",
+    "@mate-academy/scripts": "^1.7.0",
     "@mate-academy/stylelint-config": "^0.0.11",
     "@parcel/transformer-sass": "2.10.2",
     "backstopjs": "^6.2.2",

diff --git a/src/fonts/BebasNeue-Regular.ttf b/src/fonts/BebasNeue-Regular.ttf
diff --git a/src/fonts/Manrope-Bold.ttf b/src/fonts/Manrope-Bold.ttf
diff --git a/src/fonts/Manrope-Regular.ttf b/src/fonts/Manrope-Regular.ttf
diff --git a/src/fonts/Manrope-SemiBold.ttf b/src/fonts/Manrope-SemiBold.ttf
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/images/basket-icon.svg b/src/images/basket-icon.svg
diff --git a/src/images/favicon.ico b/src/images/favicon.ico
diff --git a/src/images/header-img-desktop.jpg b/src/images/header-img-desktop.jpg
diff --git a/src/images/header-img-mobile.jpg b/src/images/header-img-mobile.jpg
diff --git a/src/images/header-img-tablet.jpg b/src/images/header-img-tablet.jpg
diff --git a/src/images/menu-icon.svg b/src/images/menu-icon.svg
diff --git a/src/images/potrpots.svg b/src/images/potrpots.svg
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,142 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Title</title>
+    <title>POTR POTS</title>
     <link rel="stylesheet" href="./styles/main.scss">
+
+    <link
+      rel="shortcut icon"
+      href="./images/favicon.ico"
+      type="image/x-icon"
+    >
   </head>
+
   <body>
-    <h1>Hello Mate Academy</h1>
+    <header class="header" id="home">
+      <div class="trapezoid header__trapezoid"></div>
+
+      <nav class="navigation header__navigation">
+        <a class="logo-link navigation__logo-link" href="#home">
+          <img
+            class="logo-link__image"
+            src="./images/potrpots.svg"
+            alt="POTR POTS logo"
+          >
+        </a>
+
+        <ul class="navigation__links">
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Features</a>
+          </li>
+
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">About us</a>
+          </li>
+
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Materials</a>
+          </li>
+
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Message us</a>
+          </li>
+        </ul>
+
+        <a class="basket-link navigation__basket-link" href="#">
+          <span class="basket-link__label">Buy</span>
+        </a>
+
+        <a class="menu-link navigation__menu-link" href="#menu">
+          <span class="menu-link__label">Open menu</span>
+        </a>
+      </nav>
+
+      <picture class="header__image-wrapper">
+        <source
+          media="(min-width: 768px) and (max-width: 1439px)"
+          srcset="./images/header-img-tablet.jpg"
+        >
+
+        <source
+          media="(min-width: 1440px)"
+          srcset="./images/header-img-desktop.jpg"
+        >
+
+        <img
+          class="header__image"
+          src="./images/header-img-mobile.jpg"
+          alt="Cactus in pot"
+        >
+      </picture>
+
+      <h1 class="header__title">
+        POTR ~ Eco,
+        self-<span class="header__title header__title--highlight">watering, origami</span>
+        plant <span class="header__title header__title--highlight">pots</span>
+      </h1>
+
+      <div class="header__info">
+        <p class="header__price">$ 7,50</p>
+
+        <p class="header__discount">
+          Get the second order
+          <br>
+          in half price
+        </p>
+      </div>
+
+      <a class="button button--primary2 header__button" href="#">
+        Buy now
+        <span class="arrow"></span>
+      </a>
+
+      <aside class="header__about-link-wrapper">
+        <a class="about-link header__about-link" href="#">
+          More about POTR POTS
+          <span class="arrow arrow--long arrow--main-accent about-link__arrow"></span>
+        </a>
+      </aside>
+    </header>
+
+    <nav class="menu" id="menu">
+      <ul class="menu__links">
+        <li class="menu__item">
+          <a class="menu__link" href="#">
+            Basket
+            <p class="products-in-basket">0</p>
+          </a>
+        </li>
+
+        <li class="menu__item">
+          <a class="menu__link" href="#">Features</a>
+        </li>
+
+        <li class="menu__item">
+          <a class="menu__link" href="#">About us</a>
+        </li>
+
+        <li class="menu__item">
+          <a class="menu__link" href="#">Materials</a>
+        </li>
+
+        <li class="menu__item">
+          <a class="menu__link" href="#">Message us</a>
+        </li>
+      </ul>
+
+      <div class="menu__close-link-wrapper">
+        <a
+          class="close-link menu__close-link"
+          id="close"
+          href="#close"
+        >
+          <span class="cross close-link__cross"></span>
+          <span class="line line--light-grey"></span>
+          Close
+        </a>
+      </div>
+    </nav>
+
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,16 @@
 'use strict';
+
+function calculateClientWidth() {
+  document.documentElement
+    .style
+    .setProperty(
+      '--cw',
+      document.documentElement.clientWidth + 'px',
+    );
+}
+
+window.addEventListener('resize', calculateClientWidth, false);
+
+document.addEventListener('DOMContentLoaded', calculateClientWidth, false);
+
+window.addEventListener('load', calculateClientWidth);
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -1,6 +1,27 @@
 @font-face {
-  font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url("../fonts/Roboto-Regular-webfont.woff") format("woff");
-  font-weight: normal;
+  font-family: "Bebas Neue";
+  src: url("../fonts/BebasNeue-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("../fonts/Manrope-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("../fonts/Manrope-SemiBold.ttf");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Manrope;
+  src: url("../fonts/Manrope-Bold.ttf");
+  font-weight: 700;
   font-style: normal;
 }
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
@@ -1,3 +1,39 @@
-h1 {
-  @extend %h1;
+.header {
+  &__title {
+    @extend %title;
+  }
+
+  &__price {
+    @extend %price;
+  }
+
+  &__discount {
+    @extend %discount;
+  }
+}
+
+.navigation__link {
+  @extend %s3;
+}
+
+.button {
+  @extend %button;
+}
+
+.about-link {
+  @extend %s5;
+}
+
+.menu {
+  &__link {
+    @extend %s3;
+  }
+
+  &__close-link {
+    @extend %s5;
+  }
+}
+
+.products-in-basket {
+  @extend %products-in-basket;
 }
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -1,3 +1,6 @@
 @import "utils/vars";
 @import "utils/mixins";
 @import "utils/extends";
+@import "utils/reset";
+@import "utils/functions";
+@import "utils/trapezoid";
diff --git a/src/styles/blocks/about-link.scss b/src/styles/blocks/about-link.scss
@@ -0,0 +1,21 @@
+.about-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  text-decoration: none;
+  text-wrap: nowrap;
+  color: $main-accent;
+
+  @include for-foldable-width {
+    display: none;
+  }
+
+  &__arrow {
+    transition: transform $transition-duration;
+  }
+
+  &:hover &__arrow{
+      transform: translateX(10px);
+  }
+}
diff --git a/src/styles/blocks/arrow.scss b/src/styles/blocks/arrow.scss
@@ -0,0 +1,68 @@
+$arrow-color: black;
+$arrow-thickness: 1px;
+$arrow-length: 25px;
+$long-arrow-length: 44px;
+$arrowhead-size: 5px;
+
+@function set-arrowhead($length, $arrow-head-length) {
+  @return calc($length - $arrow-head-length);
+}
+
+@mixin arrowhead-line {
+  content: "";
+  display: block;
+
+  height: $arrow-thickness;
+  width: $arrowhead-size;
+
+  background-color: $arrow-color;
+  border-radius: 1px;
+}
+
+@mixin arrowhead($length) {
+  &::before {
+    @include arrowhead-line;
+
+    transform-origin: right;
+    transform: translate(
+      set-arrowhead($length, $arrowhead-size),
+      calc(-0.25 * $arrow-thickness)
+    ) rotate(-45deg);
+  }
+
+  &::after {
+    @include arrowhead-line;
+
+    transform-origin: right;
+    transform: translate(
+      set-arrowhead($length, $arrowhead-size),
+      calc(0.25 * $arrow-thickness - $arrow-thickness)
+    ) rotate(45deg);
+  }
+}
+
+.arrow {
+  height: $arrow-thickness;
+  width: $arrow-length;
+  background-color: $arrow-color;
+
+  @include arrowhead($arrow-length);
+
+  &--long {
+    width: $long-arrow-length;
+
+    @include arrowhead($long-arrow-length);
+  }
+
+  &--main-accent {
+    background-color: $main-accent;
+
+    &::before{
+      background-color: $main-accent;
+    }
+
+    &::after {
+      background-color: $main-accent;
+    }
+  }
+}