Media queries and grid for header

mate-academy · Feb 19, 2024 · 22585c1 · 22585c1
1 parent 51f5252
commit 22585c1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/images/picture-10-wide.jpg b/src/images/picture-10-wide.jpg
diff --git a/src/index.html b/src/index.html
@@ -15,7 +15,7 @@
   <body>
     <header class="header" id="home">
 
-      <nav class="navigation">
+      <nav class="navigation header__navigation">
         <a class="navigation__item" href="#">
           <img src="./incons/Company-Logo.svg" alt="logo">
         </a>
@@ -27,7 +27,7 @@
         </a>
       </nav>
 
-      <h1 class="title">
+      <h1 class="title header__title">
         Your senses. <br>
         Set free.
       </h1>

diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -3,10 +3,46 @@
   background-image: url(/src/images/header-background.jpg);
   background-repeat:no-repeat;
   background-size: cover;
+
+  // display: flex;
+  // flex-direction: column;
+  // justify-content: space-between;
+
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   padding: 0 20px 80px;
   box-sizing: border-box;
+
+  display: grid;
+  justify-content: center;
+
+  grid-template-columns: repeat(2, 130px);
+  grid-template-rows: 1fr 1fr;
+  gap: 20px;
+
+  @media (min-width: 1020px) {
+    grid-template-columns: repeat(12, 63px);
+    grid-template-rows: 1fr 1fr;
+    gap: 24px;
 }
+
+  &__navigation {
+    align-self: start;
+    grid-column: 1 / 3;
+    grid-row : 1 / 2;
+
+    @media (min-width: 1020px) {
+      grid-column: 1 / 13;
+  }
+}
+
+&__title {
+  align-self: end;
+  grid-column: 1 / 3;
+  grid-row: 2 / 3;
+
+  @media (min-width: 1020px) {
+    grid-column: 1 / 13;
+  }
+}
+}
+