mate-academy · Bo-dikkk · Apr 29, 2026 · Apr 29, 2026 · Apr 30, 2026 · Apr 30, 2026
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ Adapt the page to the following screens:
 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_dia/).
+  [DEMO LINK](https://Bo-dikkk.github.io/layout_dia/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/index.html b/index.html
@@ -1,19 +1,89 @@
+<!-- #region head -->
 <!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>Dia</title>
+    <title>Air</title>
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="src/styles/style.scss"
     />
+    <link
+      rel="shortcut icon"
+      href="src/images/logo/air-logo.svg"
+      type="image/x-icon"
+    >
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
   </head>
-  <body>
-    <h1>Dia</h1>
+  <!-- #endregion -->
+  <body class="page__body">
+    <header class="header">
+      <div class="container">
+        <div class="header__content">
+          <div class="top-bar">
+            <div class="top-bar__block">
+              <a href="#" class="top-bar__logo-link">
+                <img
+                  src="src/images/logo/air-logo.svg"
+                  alt="Air logo"
+                  class="top-bar__logo"
+                >
+              </a>
+              <a
+                href="#"
+                class="top-bar__icon top-bar__icon--menu"
+              ></a>
+            </div>
+
+            <a class="top-bar__hire-us" href="#">Hire us</a>
+          </div>
+
+          <div class="header__bottom">
+            <h1 class="header__title">
+              Strategic Agency
+            </h1>
+
+            <p class="header__text">
+              We believe in the power of bold ideas that can solve business challenges.
+            </p>
+
+            <div class="header__button-wrapper">
+              <div class="header__button">
+                Learn more
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="slide-bar">
+        <div class="slide-bar__buttons">
+          <a
+            href="#"
+            class="slide-bar__button slide-bar__button--left"
+          ></a>
+          <a
+            href="#"
+            class="slide-bar__button slide-bar__button--right"
+          ></a>
+        </div>
+
+        <div class="slide-bar__title">Intro</div>
+
+        <div class="slide-bar__text">
+          By the same illusion which lifts the horizon.
+        </div>
+      </div>
+    </header>
     <script src="src/scripts/main.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.2",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg
diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg
diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg
diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg
diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss
@@ -0,0 +1,3 @@
+.container {
+  padding-inline: 20px;
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -0,0 +1,62 @@
+.header {
+  background-color: $header-bg-color;
+  color: #fff;
+  height: 100vh;
+
+  &__content {
+    margin: 0;
+  }
+
+  &__title {
+    margin: 0;
+    margin-top: 48px;
+
+    font-weight: 600;
+    font-size: 52px;
+    line-height: 120%;
+    letter-spacing: -2px;
+  }
+
+  &__text {
+    margin: 0;
+    margin-top: 32px;
+
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 150%;
+  }
+
+  &__button-wrapper {
+    @include page-grid;
+  }
+
+  &__button {
+    grid-column: span 2;
+
+    margin: 0;
+    margin-top: 72px;
+    margin-bottom: 48px;
+    height: 50px;
+    background-color: #2060f6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-radius: 8px;
+
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 100%;
+
+    &:hover {
+      transition: all 0.3s;
+      background-color: blue;
+      cursor: pointer;
+    }
+
+    &:active {
+      background-color: darkblue;
+    }
+  }
+}
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -0,0 +1,16 @@
+.page {
+  margin: 0;
+  padding: 0;
+
+  font-family: Poppins, sans-serif;
+  font-weight: 700;
+
+  scroll-behavior: smooth;
+
+  &__body {
+    margin: 0;
+    padding: 0;
+    background-color: $c-gray;
+    min-width: 320px;
+  }
+}
diff --git a/src/styles/blocks/slide-bar.scss b/src/styles/blocks/slide-bar.scss
@@ -0,0 +1,55 @@
+.slide-bar {
+  background-image: url(/src/images/slider/slide-img-1.jpg);
+  border-radius: 30px;
+  height: 390px;
+  padding-inline: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  background-size: cover;
+  background-position: center;
+
+  &__buttons {
+    display: flex;
+    gap: 16px;
+    padding-top: 250px;
+  }
+
+  &__button {
+    display: block;
+    height: 32px;
+    width: 32px;
+    background-size: cover;
+    background-position: center;
+
+    &--left {
+      background-image: url(/src/images/slider/arrow-left.svg);
+    }
+
+    &--right {
+      background-image: url(/src/images/slider/arrow-right.svg);
+    }
+  }
+
+  &__title {
+    margin: 0;
+    margin-top: 16px;
+    text-align: left;
+    text-transform: uppercase;
+
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 100%;
+    letter-spacing: 3px;
+  }
+
+  &__text {
+    margin: 0;
+    margin-top: 8px;
+    text-align: left;
+
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+  }
+}