mate-academy · katerinalex · Aug 17, 2023 · Aug 18, 2023 · Aug 18, 2023 · Aug 18, 2023
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://<katerinalex>.github.io/layout_dia/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/src/images/features/menu.svg b/src/images/features/menu.svg
diff --git a/src/images/logo/logo.svg b/src/images/logo/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/Photo-2.png b/src/images/slider/Photo-2.png
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,91 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="page">
   <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="./styles/main.scss">
+    <link rel="icon" href="./images/logo/logo.svg">
+    <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@400;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
   </head>
-  <body>
-    <h1>Dia</h1>
+  <body class="page__body">
+    <header class="header page__section" >
+      <div class="container">
+        <div class="header__content">
+          <div class="header__icons">
+            <a href="#" class="logo">
+              <img
+                src="./images/logo/logo.svg"
+                alt="logo"
+                class="logo__image"
+              >
+            </a>
+            <a href="#menu" class=" icon icon--menu"></a>
+          </div>
+          <nav class="header__menu menu">
+            <ul class="menu__list">
+              <li class="menu__item">
+                <a href="about-us" class="menu__link">About us</a>
+              </li>
+              <li class="menu__item">
+                <a href="#services" class="menu__link">Services</a>
+              </li>
+              <li class="menu__item">
+                <a href="#testimonials" class="menu__link">Testimonials</a>
+              </li>
+              <li class="menu__item">
+                <a href="#contact-us" class="menu__link">Contact Us</a>
+              </li>
+            </ul>
+          </nav>
+          <div class="hire-us">
+            <a href="#hire-us" class="menu__link menu__link--hire-us">Hire us</a>
+          </div>
+        </div>
+      </div>
+    </header>
+    <section class="strategicAgency page__section">
+      <div class="container strategicAgency__flex">
+        <div class="strategicAgency__content">
+          <h2 class="strategicAgency__title">Strategic Agency</h2>
+          <p class="strategicAgency__paragraph">
+            We believe in the power of bold ideas that can solve business challenges.
+          </p>
+          <button class="strategicAgency__button">
+            Learn more
+          </button>
+        </div>
+        <div class="strategicAgency__slider">
+          <div class="strategicAgency__slider__content">
+            <div class="strategicAgency__slider__arrows_and_description">
+              <div class="strategicAgency__slider__arrows arrows">
+                <a href="./left" class="arrow">
+                  <img
+                    src="./images/slider/Arrow left.svg"
+                    alt="arrow"
+                    class="arrow__image"
+                  >
+                </a>
+                <a href="./right" class="arrow">
+                  <img
+                    src="./images/slider/Arrow right.svg"
+                    alt="arrow"
+                    class="arrow__image"
+                  >
+                </a>
+              </div>
+              <div class="strategicAgency__slider__description">
+                <h4 class="strategicAgency__slider__description__title">INtro</h4>
+                <p class="strategicAgency__slider__description__paragraph">By the same illusion which lifts the horizon.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <script type="text/javascript" src="scripts/main.js"></script>
   </body>
 </html>
diff --git a/src/styles/container.scss b/src/styles/container.scss
@@ -0,0 +1,17 @@
+.container {
+  margin: 0 auto;
+  max-width: 1024px;
+  padding: 20px;
+  // box-sizing: border-box;
+  // width: 100vh;
+
+  @include onTablet() {
+    padding: 32px 72px;
+    max-width: 1026px;
+  }
+
+  @include onDesktop() {
+    padding: 50px 120px;
+    max-width: 1026px;
+  }
+}
diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -0,0 +1,13 @@
+.header {
+  background-color: #2c2c2c;
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__icons {
+    display: flex;
+    gap: 35px;
+  }
+}
diff --git a/src/styles/icon.scss b/src/styles/icon.scss
@@ -0,0 +1,16 @@
+.icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &--menu {
+    background-image: url(../images/features/menu.svg);
+  }
+
+  @include onDesktop() {
+    display: none;
+  }
+}
diff --git a/src/styles/logo.scss b/src/styles/logo.scss
@@ -0,0 +1,6 @@
+.logo {
+  &__image {
+    width: 45px;
+    height: 25px;
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,7 +1,8 @@
-@import "utils";
-@import "fonts";
-@import "typography";
-
-body {
-  background: $c-gray;
-}
+@import "mixins";
+@import "container";
+@import "logo";
+@import "header";
+@import "icon";
+@import "menu";
+@import "page";
+@import "strategicAgency";
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
@@ -0,0 +1,81 @@
+.menu {
+  &__list {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    @include onDesktop() {
+      // margin-left: 136px;
+    }
+
+    @include onLargeDesktop() {
+      // margin-left: 251px;
+    }
+
+    .hire-us {
+      display: flex;
+    }
+  }
+
+  &__item {
+    margin-left: 48px;
+    display: none;
+
+    :first-of-type {
+      margin-left: 0;
+    }
+
+    @include onDesktop() {
+      display: inline-block;
+    }
+
+    @include onLargeDesktop() {
+      display: inline-block;
+    }
+
+    &--hire-us {
+      // justify-self:flex-end;
+      display: inline-block;
+      // margin-left: 114px;
+      // margin-right: 0;
+      position: relative;
+      right: 0;
+
+      @include onTablet() {
+        // margin-left: 392px;
+      }
+
+      @include onDesktop() {
+        // margin-left: 114px;
+      }
+
+      @include onLargeDesktop() {
+        // margin-left: 230px;
+      }
+    }
+  }
+
+  &__link {
+    // display: none;
+    padding-bottom: 8px;
+    // border-bottom: 1px solid transparent;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 150%;
+    text-align: center;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: #fff;
+
+    @include onDesktop() {
+      display: inline-block;
+    }
+
+    &--hire-us {
+      display: inline-block;
+      border-bottom: 2px solid #2060f6;
+    }
+  }
+}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -0,0 +1,23 @@
+@mixin onLargeDesktop {
+  @media (min-width: 1600px) {
+    @content;
+  }
+}
+
+@mixin onDesktop {
+  @media (min-width: 1024px) and (max-width: 1600px) {
+    @content;
+  }
+}
+
+@mixin onTablet {
+  @media (min-width: 640px ) and (max-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin onMobile {
+  @media (min-width: 320px ) and (max-width: 640px) {
+    @content;
+  }
+}
diff --git a/src/styles/page.scss b/src/styles/page.scss
@@ -0,0 +1,7 @@
+.page {
+  font-family: "Poppins", "Open Sans", sans-serif;
+
+  &__body {
+    margin: 0;
+  }
+}