add solution

README.md

@@ -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://nineuito.github.io/layout_creativeBakery/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.

package.json

@@ -23,7 +23,7 @@
     "@linthtml/linthtml": "^0.9.5",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.7.3",
+    "@mate-academy/scripts": "^1.8.1",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "jest": "^29.7.0",

src/scripts/main.js

@@ -1 +1,25 @@
 'use strict';
+
+  function handleScroll() {
+    const topBar = document.querySelector('.top-bar-header');
+    if (window.scrollY > 0) {
+      topBar.classList.add('scrolled');
+    } else {
+      topBar.classList.remove('scrolled');
+    }
+  }
+
+window.addEventListener('scroll', handleScroll);
+
+function changeBackgroundColor() {
+  const pageBody = document.querySelector('.page__body');
+  const currentColor = getComputedStyle(pageBody).getPropertyValue('background-color').trim();
+
+  if (currentColor === 'rgb(255, 238, 252)') {
+    pageBody.style.backgroundColor = '#EEF7FF';
+  } else {
+    pageBody.style.backgroundColor = '#FFEEFC';
+  }
+}
+
+setInterval(changeBackgroundColor, 5000);

src/styles/_fonts.scss

@@ -1,6 +1 @@
-@font-face {
-  font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
+@import 'https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900';

src/styles/_typography.scss

@@ -1,3 +1,15 @@
 h1 {
   @extend %h1;
 }
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+p {
+  @extend %p;
+}

src/styles/_utils.scss

@@ -1,3 +1,5 @@
 @import 'utils/vars';
+@import 'utils/reset';
+@import 'utils/normalize';
 @import 'utils/mixins';
 @import 'utils/extends';

src/styles/blocks/about-us.scss

@@ -0,0 +1,188 @@
+.about-us {
+  margin-bottom: 72px;
+
+  @include on-tablet {
+    margin-bottom: 152px;
+  }
+
+  @include on-laptop {
+    margin-bottom: 349px;
+  }
+
+  &__content {
+    @include page-grid;
+
+    position: relative;
+  }
+
+  &__background-image {
+    background-image: url(/src/images/about-us/crumbs-mobile-2x.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+
+    position: absolute;
+    width: 100vw;
+    height: 300px;
+    top: 544px;
+    left: 50%;
+    right: 50%;
+    transform: translateX(-50%);
+
+    z-index: -1;
+
+    @include on-tablet {
+      background-image: url(/src/images/about-us/crumbs-main-1x.png);
+      height: 493px;
+      width: 526px;
+      top: 51px;
+    }
+
+    @include on-laptop {
+      width: 718px;
+      height: 673px;
+      inset: 0;
+      transform: translateX(0%);
+      grid-column: 3 / 8;
+    }
+
+    @include on-desktop {
+      grid-column: 1 / -1;
+      left: 50%;
+      right: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &__title {
+    grid-column: 1 / -1;
+
+    font-size: 48px;
+    line-height: 40.8px;
+    letter-spacing: -0.05em;
+    text-align: left;
+    color: $accent-orange-color;
+
+    margin-bottom: 32px;
+
+    @include on-tablet {
+      font-size: 56px;
+      line-height: 47.6px;
+      grid-column: span 4;
+    }
+
+    @include on-laptop {
+      font-size: 72px;
+      line-height: 61.2px;
+    }
+  }
+
+  &__description {
+    grid-column: 1 / -1;
+
+    margin-bottom: 64px;
+
+    @include on-tablet {
+      grid-column: span 4;
+
+      margin-bottom: 72px;
+    }
+
+    @include on-laptop {
+      line-height: 24px;
+
+      margin-bottom: 146px;
+    }
+  }
+
+  &__statistics {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    margin-bottom: 48px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    @include on-tablet {
+      &:nth-last-child(-n + 2) {
+        margin-bottom: 0;
+      }
+    }
+
+    @include on-laptop {
+      margin-bottom: 0;
+    }
+  }
+
+  &__statistics-title {
+    font-size: 96px;
+    line-height: 81.6px;
+    letter-spacing: -0.05em;
+    color: $accent-orange-color;
+  }
+
+  &__statistics-year {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-row: 2;
+      grid-column: span 4;
+
+      margin-bottom: 80px;
+    }
+
+    @include on-laptop {
+      grid-column: span 2;
+
+      margin-bottom: 0;
+    }
+  }
+
+  &__statistics-stores {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-row: 2;
+      grid-column: span 4;
+
+      margin-bottom: 80px;
+    }
+
+    @include on-laptop {
+      grid-column: span 2;
+
+      margin-bottom: 0;
+    }
+  }
+
+  &__statistics-companies {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-row: 3;
+      grid-column: span 4;
+    }
+
+    @include on-laptop {
+      grid-row: 2;
+      grid-column: span 2;
+    }
+  }
+
+  &__statistics-clients {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-row: 3;
+      grid-column: span 4;
+    }
+
+    @include on-laptop {
+      grid-row: 2;
+      grid-column: span 2;
+    }
+  }
+}

src/styles/blocks/container.scss

@@ -0,0 +1,3 @@
+.container {
+  @include padding-inline;
+}