header-start

mate-academy · Aug 29, 2024 · 77a14de · 77a14de
1 parent 5f4d00c
commit 77a14de
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 33 deletions.
diff --git a/src/index.html b/src/index.html
@@ -15,6 +15,18 @@
       rel="preconnect"
       href="https://fonts.gstatic.com"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:wght@400;500;600;700&family=Roboto&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=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
       rel="stylesheet"
@@ -49,14 +61,35 @@
 
         <a
           href="#hire-us"
-          class="navigation__item hire-us"
+          class="navigation__item navigation__item--hire-us"
         >
           hire us
-          <div class="hire-us__blue-line"></div>
         </a>
       </nav>
 
-      <h1 class="header__title">Strategic Agency</h1>
+      <div class="header__info-block">
+        <h1 class="header__title">Strategic Agency</h1>
+
+        <p class="header__paragraph">
+          We believe in the power of bold ideas that can solve business
+          challenges.
+        </p>
+
+        <a
+          href="#learn-more"
+          class="button header__button"
+        >
+          Learn more
+        </a>
+      </div>
+
+      <div class="header__slider-block">
+        <img
+          src="../src/images/slider/slide-img-1.jpg"
+          alt="slide"
+          class="header__slider-image"
+        />
+      </div>
     </header>
     <script src="scripts/main.js"></script>
   </body>

diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
@@ -0,0 +1,19 @@
+.button {
+  display: block;
+  height: 50px;
+  font-family: Poppins, sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 50px;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+  background-color: #2060f6;
+  border-radius: 8px;
+  transition: 300ms;
+
+  &:hover {
+    transition: 300ms;
+    background-color: #143b96;
+  }
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -1,18 +1,135 @@
+@use '../utils/mixins' as *;
+
 .header {
+  position: relative;
+  overflow-x: hidden;
   background-color: #2c2c2c;
-  padding: 20px 20px 48px;
+  border-radius: 0 0 30px 30px;
+
+  @include page-grid;
+
+  &__info-block {
+    padding: 0 20px 48px;
+    grid-column: span 2;
+
+    @include page-grid;
+
+    @include for-tablet {
+      padding: 0 20px 147px;
+      grid-column: span 6;
+    }
+
+    @include for-desktop {
+      display: block;
+      padding: 120px 0 0;
+      grid-column: span 6;
+    }
+  }
+
+  &__navigation {
+    padding: 20px 20px 0;
+    margin-bottom: 48px;
+
+    grid-column: span 2;
+
+    @include for-tablet {
+      padding: 20px 0 0;
+      margin-bottom: 56px;
+      grid-column: span 6;
+    }
+
+    @include for-desktop {
+      padding: 48px 0 0;
+      margin-bottom: 48px;
+      grid-column: span 12;
+    }
+  }
 
   &__title {
+    margin-bottom: 32px;
     font-family: Poppins, sans-serif;
     font-size: 52px;
     font-weight: 600;
     line-height: 62px;
     letter-spacing: -2px;
     text-align: left;
     color: #fff;
+
+    grid-column: span 2;
+
+    @include for-tablet {
+      margin-bottom: 24px;
+      font-size: 64px;
+      line-height: 68px;
+      grid-column: span 6;
+    }
+
+    @include for-desktop {
+      margin-bottom: 32px;
+      grid-column: span 4;
+    }
   }
 
-  &__navigation {
-    margin-bottom: 48px;
+  &__paragraph {
+    margin-bottom: 72px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 27px;
+    text-align: left;
+    color: #fff;
+
+    grid-column: span 2;
+
+    @include for-tablet {
+      margin-bottom: 56px;
+      grid-column: span 4;
+    }
+
+    @include for-desktop {
+      margin-bottom: 83px;
+      grid-column: span 5;
+    }
+  }
+
+  &__button {
+    grid-column: span 2;
+
+    @include for-tablet {
+      grid-column: span 3;
+    }
+
+    @include for-desktop {
+      grid-column: span 3;
+    }
+  }
+
+  &__slider-block {
+    overflow: hidden;
+    width: 100%;
+    height: 390px;
+
+    @include for-tablet {
+      grid-column: span 6;
+    }
+
+    @include for-desktop {
+      height: 680px;
+      grid-column: span 6;
+    }
+  }
+
+  &__slider-image {
+    position: absolute;
+    left: 0;
+    border-radius: 30px;
+    width: 100%;
+    height: 390px;
+    object-fit: cover;
+
+    @include for-desktop {
+      left: auto;
+      height: 680px;
+    }
   }
 }
diff --git a/src/styles/blocks/hire-us.scss b/src/styles/blocks/hire-us.scss
diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss
@@ -24,5 +24,26 @@
       width: 18px;
       height: 8px;
     }
+
+    &--hire-us {
+      display: inline-block;
+      text-transform: uppercase;
+      font-family: Poppins, sans-serif;
+      font-size: 13px;
+      font-weight: 700;
+      line-height: 19.5px;
+      letter-spacing: 3px;
+      text-align: center;
+      color: #fff;
+      text-decoration: none;
+      padding-bottom: 7px;
+      border-bottom: 2px solid #2060f6;
+      transition: 300ms;
+
+      &:hover {
+        transform: 300ms;
+        border-bottom: 2px solid #153fa3;
+      }
+    }
   }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3,4 +3,4 @@
 @import 'typography';
 @import './blocks/header';
 @import './blocks/navigation';
-@import './blocks/hire-us';
+@import './blocks/button';
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -4,3 +4,42 @@
     #{$_property}: $_toValue;
   }
 }
+
+@mixin visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@mixin for-tablet() {
+  @media (min-width: 640px) and (max-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin for-desktop() {
+  @media (min-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin page-grid {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, minmax(130px, 180px));
+  column-gap: 20px;
+
+  @include for-tablet {
+    grid-template-columns: repeat(6, 68px);
+    column-gap: 30px;
+  }
+
+  @include for-desktop {
+    grid-template-columns: repeat(12, 58px);
+    column-gap: 20px;
+  }
+}