Add Header and Contact Us components

frontend/src/scss/_mixins.scss

@@ -16,6 +16,12 @@ $breakpoint-extra-large: 1300px;
   }
 }
 
+@mixin for-tablet-down {
+  @media (max-width: $breakpoint-large - 0.1px) {
+    @content;
+  }
+}
+
 @mixin for-tablet {
   @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large - 0.1px) {
     @content;

frontend/src/scss/_vars.scss

@@ -28,7 +28,12 @@ $primary-font: 'Mulish', sans-serif;
   Sizes
 ========================= */
 
+$side-padding: 15px;
+$border-radius: 8px;
+
+// header
 $desktop-header-height: 90px;
+$mobile-header-height: 70px;
 
 /* =========================
   Paths

frontend/src/scss/layout/_footer.scss

@@ -5,5 +5,77 @@
 ========================= */
 
 .page-footer {
-  // TODO
+  background-color: $inverse-primary-bg-color;
+  padding: 100px 0;
+
+  &__title {
+    @include heading2;
+    color: $inverse-primary-txt-color;
+    position: relative;
+
+    &::after {
+      display: block;
+      content: '';
+      width: 199px;
+      height: 3px;
+      background: $accent-bg-color;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  &__wrapper {
+    display: grid;
+    gap: 30px;
+    grid-template-columns: repeat(2, 1fr);
+    margin-top: 60px;
+
+    @include for-mobile {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+
+  &__pic {
+    width: 100%;
+    height: 100%;
+    border-radius: $border-radius;
+    object-fit: cover;
+  }
+
+  &__content {
+    color: $inverse-primary-txt-color;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    gap: 44px;
+  }
+
+  &__text {
+    font-size: 1.75em;
+    font-weight: 800;
+    line-height: 39.2px;
+    margin: 0;
+  }
+
+  &__contact-list {
+    list-style: none;
+    margin: 0;
+  }
+}
+
+.contact-row {
+  font-size: 1.125em;
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  &__content {
+    @include loud;
+    text-decoration: none;
+    display: block;
+    color: $inverse-primary-txt-color;
+  }
 }

frontend/src/scss/layout/_header.scss

@@ -6,10 +6,154 @@
 
 .page-header {
   position: relative;
+  @include sidePadding(60px);
+
+  @include for-tablet-down {
+    @include sidePadding($side-padding);
+  }
 
   &__in {
+    height: $desktop-header-height;
+    border-bottom: 1px solid rgba($white, 10%);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include for-tablet-down {
+      height: $mobile-header-height;
+    }
+  }
+
+  &__logo {
+    @include heading3;
+    color: $accent-txt-color;
+    z-index: 2;
+
+
+    @include for-tablet-down {
+      font-size: 20px;
+    }
+  }
+}
+
+.page-menu {
+  display: flex;
+  gap: 40px;
+  margin: 0;
+  list-style: none;
+  align-items: baseline;
+
+  @include for-tablet-down {
+    position: fixed;
+    gap: 0;
+    padding: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: $inverse-primary-bg-color;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    transform: translateX(-100%);
+    transition: transform 0.5s;
+
+    &--opened {
+      transform: translateX(0);
+    }
+  }
+
+  &__link {
+    display: block;
+    @include heading6;
+    color: $inverse-primary-txt-color;
+    text-decoration: none;
+    transition: 0.5s;
+
     @include for-desktop {
-      height: $desktop-header-height;
+      line-height: $desktop-header-height;
+    }
+
+    @include for-tablet-down {
+      display: block;
+      padding: 15px;
+      font-size: 18px;
+    }
+
+    @include activeHover {
+      color: $accent-txt-color;
+    }
+  }
+
+  &__donate {
+    margin-left: 78px;
+
+    @include for-tablet-down {
+      margin: 20px 0 0;
+    }
+  }
+}
+
+.burger {
+  $burger-dash-height: 3px;
+  $burger-dash-margin: 6px;
+  $burger-translate-y: calc($burger-dash-margin / 3 + $burger-dash-height);
+
+  position: relative;
+  outline: none;
+  border: none;
+  background: none;
+  height: 32px;
+  width: 32px;
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+  cursor: pointer;
+  padding: 0;
+  justify-content: center;
+
+  @include for-desktop {
+    display: none;
+  }
+
+  &__dash {
+    position: absolute;
+    width: 100%;
+    height: $burger-dash-height;
+    background-color: $primary-bg-color;
+    transition: 0.3s;
+
+    &:nth-child(2) {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &:first-child {
+      top: 0;
+    }
+
+    &:last-child {
+      bottom: 0;
+    }
+  }
+
+  &--opened {
+    .burger__dash {
+      &:nth-child(2) {
+        transform: translate(-50%, -50%) scaleX(0);
+      }
+
+      &:first-child {
+        transform: translateY($burger-translate-y) rotate(45deg);
+        top: 30%;
+      }
+
+      &:last-child {
+        transform: translateY($burger-translate-y) rotate(-45deg);
+        top: 30%;
+      }
     }
   }
 }

frontend/src/scss/layout/_layout.scss

@@ -40,5 +40,9 @@
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 15px;
+  padding: 0 $side-padding;
+}
+
+.body-menu-opened {
+  overflow: hidden;
 }