Header almoust done and footer ready

mate-academy · Jun 4, 2024 · 4254052 · 4254052
1 parent 03b8d7d
commit 4254052
Show file tree

Hide file tree

Showing 35 changed files with 333 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that:
   - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
 - watch the lesson videos and implement your page blocks similarly to the videos;
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://Karanelus.github.io/layout_miami/)
 - after each next block do the same (add, commit and push the changes, and deploy the updated demo;
 - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
diff --git a/package.json b/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",

diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/images/Logo.svg b/src/images/Logo.svg
diff --git a/src/images/cross.svg b/src/images/cross.svg
diff --git a/src/images/crown.svg b/src/images/crown.svg
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/menu.svg b/src/images/menu.svg
diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg
diff --git a/src/images/phone.svg b/src/images/phone.svg
diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg
diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg
diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg
diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg
diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg
diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg
diff --git a/src/images/photos/Icon-Phone-call.svg b/src/images/photos/Icon-Phone-call.svg
diff --git a/src/images/photos/Sound-waves.svg b/src/images/photos/Sound-waves.svg
diff --git a/src/images/photos/footer.png b/src/images/photos/footer.png
diff --git a/src/images/photos/header.png b/src/images/photos/header.png
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>BOSE</title>
+    <link
+      rel="shortcut icon"
+      href="./images/photos/Sound-waves.svg"
+    />
     <link
       rel="stylesheet"
       href="./styles/main.scss"
@@ -17,6 +21,47 @@
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header
+      class="header"
+      id="home"
+    >
+      <nav class="navigation header__navigation">
+        <img
+          src="./images/Logo.svg"
+          alt="logo"
+          class="navigation__logo"
+        />
+        <ul class="navigation__list">
+          <li class="navigation__item navigation__item--phone">
+            <img
+              src="./images/photos/Icon-Phone-call.svg"
+              alt="Number"
+              class="navigation__item--phone__logo"
+            />
+            <div class="navigation__item--phone--number">
+              <p class="navigation__item--phone--number--on-hover">
+                +1 234 555-55-55
+              </p>
+            </div>
+          </li>
+          <li class="navigation__item navigation__item--burger-menu">
+            <div class="navigation__item--burger-menu--part"></div>
+          </li>
+        </ul>
+      </nav>
+      <section class="motto header__motto">
+        <img
+          class="motto__img"
+          src="./images/photos/Sound-waves.svg"
+          alt=" "
+        />
+        <h1 class="motto__text">
+          The world shades.
+          <br />
+          Your music shines.
+        </h1>
+      </section>
+    </header>
+    <footer class="footer"></footer>
   </body>
 </html>
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/footer.scss b/src/styles/blocks/footer.scss
@@ -0,0 +1,14 @@
+.footer {
+  background: url('../images/photos/footer.png') top center no-repeat;
+  background-size: cover;
+  height: var(--footer-height);
+  width: 100dvw;
+
+  @media screen and (max-width: 1259px) {
+    --footer-height: 25rem;
+  }
+
+  @media screen and (max-width: 743px) {
+    --footer-height: 12.5rem;
+  }
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -0,0 +1,50 @@
+@use '../utils/vars' as *;
+
+.header {
+  align-content: space-between;
+  animation: header-animation 1.5s ease;
+  background: url('../images/photos/header.png') center no-repeat;
+  background-size: cover;
+  display: grid;
+  flex-direction: column;
+  height: var(--header-height);
+  width: 100dvw;
+
+  > * {
+    margin-inline: auto;
+  }
+
+  @media screen and (max-width: 1259px) {
+    --header-height: 48.38rem;
+    --nav-width: 37.5rem;
+  }
+
+  @media screen and (max-width: 743px) {
+    --header-height: 35.5rem;
+    --nav-width: 17.5rem;
+    --motto-m: 2.5rem;
+  }
+
+  &__navigation {
+    align-items: center;
+    display: flex;
+    height: 6rem;
+    justify-content: space-between;
+    padding-block: 2rem;
+    width: var(--nav-width);
+  }
+
+  &__motto {
+    margin-bottom: var(--motto-m);
+    width: var(--nav-width);
+  }
+}
+
+@keyframes header-animation {
+  from {
+    background-size: 125%;
+  }
+  to {
+    background-size: 100%;
+  }
+}
diff --git a/src/styles/blocks/motto.scss b/src/styles/blocks/motto.scss
@@ -0,0 +1,30 @@
+.motto {
+  &__img {
+    margin-bottom: var(--motto-img-mb);
+
+    @media screen and (max-width: 1259px) {
+      --motto-img-mb: 2.5rem;
+    }
+
+    @media screen and (max-width: 743px) {
+      --motto-img-mb: 1rem;
+    }
+  }
+
+  &__text {
+    font-size: var(--motto-font-size);
+    font-family: Inter, sans-serif;
+    font-style: italic;
+    font-weight: 800;
+    line-height: var(--motto-font-size);
+    letter-spacing: -1.5px;
+
+    @media screen and (max-width: 1259px) {
+      --motto-font-size: 2.5rem;
+    }
+
+    @media screen and (max-width: 743px) {
+      --motto-font-size: 2rem;
+    }
+  }
+}
diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss
@@ -0,0 +1,94 @@
+@use '../utils/vars' as *;
+
+.navigation {
+  @media screen and (max-width: 743px) {
+    --nav-button-size: 1.5rem;
+    --nav-logo-size: 1rem;
+  }
+
+  &__logo {
+    height: var(--nav-logo-size);
+  }
+
+  &__list {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    list-style: none;
+  }
+
+  &__item {
+    aspect-ratio: 1;
+    cursor: pointer;
+    display: grid;
+    height: var(--nav-button-size);
+    place-items: center;
+    position: relative;
+    transition: 0.5s ease;
+
+    &--phone {
+      &--number {
+        text-align: left;
+        height: var(--nav-button-size);
+        left: calc(-3.1 * var(--nav-button-size));
+        line-height: var(--nav-button-size);
+        font-size: 0.75rem;
+        font-weight: 700;
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: calc(3.1 * var(--nav-button-size));
+
+        &--on-hover {
+          transform: translateX(110%);
+          transition: 0.5s;
+        }
+      }
+    }
+
+    &:hover &--number &--number--on-hover {
+      transform: none;
+    }
+
+    &--burger-menu {
+      &--part {
+        background-color: $natual-black;
+        border-radius: 100dvh;
+        height: $burger-menu-height;
+        position: relative;
+        width: 1.5rem;
+
+        &::before,
+        &::after {
+          background-color: $natual-black;
+          border-radius: 100dvh;
+          content: '';
+          height: $burger-menu-height;
+          position: absolute;
+          transition: 0.5s ease;
+          width: 1.5rem;
+        }
+
+        &::before {
+          top: -0.5rem;
+        }
+
+        &::after {
+          top: 0.5rem;
+        }
+      }
+
+      &:hover &--part {
+        &::before {
+          width: 1.13rem;
+        }
+
+        &::after {
+          width: 0.75rem;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/fonts/_fonts.scss b/src/styles/fonts/_fonts.scss
@@ -0,0 +1 @@
+@import 'https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap';
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;
-}
+@use './utils/global' as *;
+@use './utils/vars' as *;
+@use './utils/mixins' as *;
+@use './fonts/fonts' as *;
+@use './blocks/header.scss';
+@use './blocks/navigation.scss';
+@use './blocks/motto.scss';
+@use './blocks/footer.scss';
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
diff --git a/src/styles/utils/_global.scss b/src/styles/utils/_global.scss
@@ -0,0 +1,41 @@
+@use './vars' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: $natual-black;
+}
+
+img,
+picture,
+video,
+svg {
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-style: italic;
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration-line: none;
+}
+
+body {
+  background: $natual-white;
+  min-width: 100dvh;
+  font-family: Roboto, sans-serif;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import 'https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap';