mate-academy · juliasemchishin · Aug 28, 2025 · Sep 2, 2025 · Sep 3, 2025 · Sep 4, 2025
diff --git a/src/images/events/image-1.png b/src/images/events/image-1.png
diff --git a/src/images/events/image-2.png b/src/images/events/image-2.png
diff --git a/src/images/gallery/image-1.png b/src/images/gallery/image-1.png
diff --git a/src/images/gallery/image-2.png b/src/images/gallery/image-2.png
diff --git a/src/images/gallery/image-3.png b/src/images/gallery/image-3.png
diff --git a/src/images/gallery/image-4.png b/src/images/gallery/image-4.png
diff --git a/src/images/icons/burger-menu.png b/src/images/icons/burger-menu.png
diff --git a/src/images/icons/button-right-arrow.png b/src/images/icons/button-right-arrow.png
diff --git a/src/images/icons/facebook.png b/src/images/icons/facebook.png
diff --git a/src/images/icons/input-arrow_right-black.png b/src/images/icons/input-arrow_right-black.png
diff --git a/src/images/icons/instagram.png b/src/images/icons/instagram.png
diff --git a/src/images/icons/menu-close.png b/src/images/icons/menu-close.png
diff --git a/src/images/lesson/image-3.png b/src/images/lesson/image-3.png
diff --git a/src/images/main-image.png b/src/images/main-image.png
diff --git a/src/images/new-logo.png b/src/images/new-logo.png
diff --git a/src/images/subscribe.png b/src/images/subscribe.png
diff --git a/src/index.html b/src/index.html
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -1,6 +1,6 @@
-@font-face {
-  font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
+// @font-face {
+//  font-family: Roboto, Arial, Helvetica, sans-serif;
+//  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
+//  font-weight: normal;
+//  font-style: normal;
+// }
diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss
@@ -0,0 +1,117 @@
+.aside {
+  background-color: $background-color-menu;
+  z-index: 2;
+  padding-block: 27px;
+
+  @include on-tablet {
+    padding-block: 39px;
+  }
+
+  @include on-desktop {
+    padding-top: 40px;
+    padding-bottom: 48px;
+  }
+
+  &__content {
+    display: grid;
+
+    --columns: 2;
+
+    grid-template-columns: repeat(var(--columns), 1fr);
+    column-gap: 20px;
+
+    @include on-tablet {
+      --columns: 6;
+
+      column-gap: 30px;
+    }
+
+    @include on-desktop {
+      --columns: 12;
+    }
+
+    &-left {
+      grid-column: 1 / -1;
+
+      @include on-tablet {
+        grid-column: 1 / 4;
+        border-right: 1px solid white;
+      }
+
+      @include on-desktop {
+        grid-column: 1 / 7;
+      }
+    }
+
+    &-right {
+      grid-column: 1 / -1;
+
+      @include on-tablet {
+        grid-column: 4 / 7;
+      }
+
+      @include on-desktop {
+        grid-column: 8 / -1;
+      }
+    }
+  }
+
+  &__menu {
+    display: flex;
+    column-gap: 28px;
+
+    @include on-tablet {
+      column-gap: 38px;
+    }
+
+    @include on-desktop {
+      column-gap: 102px;
+    }
+  }
+
+  &__close-icon {
+    &-link {
+      background-image: url('../images/icons/menu-close.png');
+      display: block;
+      width: 24px;
+      height: 24px;
+
+      @include hover(transform, scale(1.1));
+    }
+  }
+
+  &__schedule {
+    color: white;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 150%;
+
+    @include on-tablet {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      column-gap: 26px;
+      align-items: end;
+    }
+
+    &-times {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      margin-bottom: 16px;
+
+      @include on-tablet {
+        margin-bottom: 0;
+      }
+
+      &-closed {
+        @include on-tablet {
+          width: 144px;
+        }
+      }
+    }
+  }
+}
+
+.bold-text {
+  font-weight: 600;
+}
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
@@ -0,0 +1,46 @@
+.button {
+  box-sizing: border-box;
+  border: 1px solid $button-color;
+  background-color: white;
+  margin: 0;
+  padding: 0 0 0 80px;
+
+  display: flex;
+  align-items: center;
+
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  text-transform: uppercase;
+
+  width: 280px;
+  height: 50px;
+
+  position: relative;
+
+  @include on-tablet {
+    width: 270px;
+    height: 70px;
+    padding: 0 0 0 68px;
+  }
+
+  &__img {
+    width: 50px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $button-color;
+    cursor: pointer;
+
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    @include on-tablet {
+      width: 70px;
+      height: 68px;
+    }
+  }
+}
diff --git a/src/styles/blocks/divider.scss b/src/styles/blocks/divider.scss
@@ -0,0 +1,28 @@
+.divider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: white;
+  margin-bottom: 24px;
+
+  @include on-tablet {
+    display: none;
+  }
+
+  &-footer {
+    background-color: #1a5a4c80;
+
+    grid-column: 1 / -1;
+    margin-bottom: 40px;
+
+    @include on-tablet {
+      display: grid;
+      grid-column: 2 / -2;
+      margin-bottom: 64px;
+    }
+
+    @include on-desktop {
+      display: none;
+    }
+  }
+}
diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss
@@ -0,0 +1,152 @@
+.events {
+  width: 100%;
+
+  &__section {
+    width: 100%;
+
+    article {
+      width: 100%;
+
+      img {
+        width: 100%;
+        height: auto;
+        max-width: 100%;
+        object-fit: cover;
+        display: block;
+      }
+    }
+
+    &-title {
+      font-family: Montserrat, sans-serif;
+      font-weight: 700;
+      font-size: 36px;
+      line-height: 100%;
+      text-align: center;
+      margin: 0;
+      margin-bottom: 40px;
+
+      @include on-tablet {
+        text-align: start;
+        font-size: 48px;
+        margin-bottom: 48px;
+      }
+
+      @include on-desktop {
+        margin-bottom: 56px;
+      }
+    }
+
+    &-content {
+      display: grid;
+
+      --columns: 2;
+
+      grid-template-columns: repeat(var(--columns), 1fr);
+      column-gap: 20px;
+
+      padding-bottom: 60px;
+
+      @include on-tablet {
+        --columns: 6;
+
+        column-gap: 30px;
+      }
+
+      @include on-desktop {
+        --columns: 12;
+
+        align-items: center;
+        padding-bottom: 104px;
+      }
+    }
+
+    &-image {
+      grid-column: 1 / -1;
+
+      margin-bottom: 20px;
+
+      @include on-tablet {
+        margin-bottom: 40px;
+      }
+
+      @include on-desktop {
+        grid-column: 1 / 8;
+
+        margin-bottom: 0;
+      }
+    }
+
+    &-text {
+      grid-column: 1 / -1;
+
+      @include on-tablet {
+        grid-column: 1 / 5;
+      }
+
+      @include on-desktop {
+        grid-column: 9 / -1;
+      }
+
+      &-wrapper {
+        display: flex;
+
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 15px;
+      }
+
+      &-title {
+        margin: 0;
+        font-family: Montserrat, sans-serif;
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 100%;
+
+        @include on-tablet {
+          font-size: 36px;
+        }
+      }
+
+      &-kvadrat {
+        display: block;
+        height: 10px;
+        width: 10px;
+        background-color: red;
+      }
+
+      &-topic {
+        margin: 0;
+        font-weight: 300;
+        font-size: 16px;
+        line-height: 150%;
+        color: $event-topic-color;
+      }
+    }
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+
+      @include on-tablet {
+        margin-bottom: 30px;
+      }
+
+      &-title {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 100%;
+        color: #687480;
+        text-transform: uppercase;
+      }
+
+      &-date {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 150%;
+        color: $button-color;
+      }
+    }
+  }
+}