Develop

src/scripts/main.js

@@ -1 +1,7 @@
-'use strict';
+import Aos from 'aos';
+
+window.addEventListener('load', () => {
+  Aos.init({
+    duration: 1200,
+  });
+});

src/styles/_typography.scss

@@ -1,3 +1,5 @@
+@use 'utils/index' as *;
+
 h1 {
   @extend %h1;
 }

src/styles/aside/_menu.scss

@@ -0,0 +1,12 @@
+.menu {
+  &__nav {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    justify-content: center;
+
+    pointer-events: none;
+    text-align: center;
+  }
+}

src/styles/blocks/_index.scss

@@ -0,0 +1,4 @@
+@forward 'logo/logo';
+@forward 'top-bar/top-bar';
+@forward 'nav/nav';
+@forward './article/article';

src/styles/blocks/article/_article.scss

@@ -0,0 +1,90 @@
+@use '../../utils/index' as *;
+
+.article {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &__container-image {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  &__image {
+    width: 100%;
+    cursor: pointer;
+
+    @include hover(transform, scale(1.2));
+
+    @include on-tablet {
+      aspect-ratio: 328 / 424;
+    }
+
+    @include on-desktop {
+      aspect-ratio: 402 / 512;
+    }
+  }
+
+  &__h3-title {
+    @extend %button-text;
+
+    margin-bottom: 8px;
+    color: $grey;
+  }
+
+  &__paragraph {
+    @extend %body-text;
+
+    color: $grey;
+  }
+
+  &__link-container {
+    display: flex;
+    align-items: center;
+    height: 24px;
+  }
+
+  &__link {
+    @extend %button-text;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    padding-left: 28px;
+
+    color: $orange;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      left: -4px;
+      width: 24px;
+      height: 24px;
+      background-image: url(../images/icons/main/icon-arrow.svg);
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 0;
+
+      display: block;
+      width: 100%;
+      height: 2px;
+      background-color: $orange;
+
+      transform: scale(0);
+      transform-origin: left;
+      transition: transform $transition;
+    }
+
+    &:hover::after {
+      transform: scale(1);
+    }
+  }
+}

src/styles/blocks/logo/_logo.scss

@@ -0,0 +1,22 @@
+@use '../../utils/index' as *;
+
+.logo-link {
+  display: block;
+
+  width: 136px;
+  height: 32px;
+
+  cursor: pointer;
+
+  background-color: $black;
+
+  @include mask('../images/icons/header/Logo.svg');
+
+  @include hover(background-color, $orange);
+
+  &--footer {
+    width: 168px;
+    height: 40px;
+    background-color: $white;
+  }
+}

src/styles/blocks/nav/_nav.scss

@@ -0,0 +1,69 @@
+@use '../../utils/index' as *;
+
+.nav {
+  &__list {
+    display: flex;
+    gap: 64px;
+
+    &--menu {
+      flex-direction: column;
+      justify-content: center;
+      gap: 24px;
+    }
+  }
+
+  &__link {
+    @extend %body-text;
+
+    position: relative;
+    pointer-events: all;
+    color: $black;
+
+    transition: color $transition;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 0;
+
+      display: block;
+      width: 100%;
+      height: 2px;
+      background-color: $orange;
+
+      transform: scale(0);
+      transform-origin: left;
+      transition: transform $transition;
+    }
+
+    &:hover {
+        color: $orange;
+      }
+
+    &:hover::after {
+      transform: scale(1);
+    }
+
+    &--contacts {
+      padding-left: 28px;
+      text-transform: uppercase;
+      color: $orange;
+      letter-spacing: 2%;
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        display: block;
+
+        width: 24px;
+        height: 24px;
+
+        background-image: url(../images/icons/header/Icon-phone.svg);
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
+  }
+}

src/styles/blocks/top-bar/_top-bar.scss

@@ -0,0 +1,32 @@
+@use '../../utils/index' as *;
+
+.top-bar {
+  display: flex;
+  align-items: center;
+
+  padding: 20px;
+
+  @include on-desktop {
+    padding: 28px 32px;
+  }
+
+  &__menu {
+    width: 24px;
+    height: 24px;
+    margin-left: auto;
+
+    cursor: pointer;
+
+    background-image: url(../images/icons/header/Icon-menu-open.svg);
+
+    @include hover(transform, scale(1.2));
+
+    @include on-desktop {
+      display: none;
+    }
+
+    &--close {
+      background-image: url(../images/icons/header/Icon-menu-close.svg);
+    }
+  }
+}