create dia layout

src/styles/_fonts.scss

@@ -4,3 +4,17 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: Poppins, sans-serif;
+  src: url('../fonts/Poppins-Regular.ttf') format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: OpenSans, sans-serif;
+  src: url('../fonts/OpenSans-Regular.ttf') format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}

src/styles/blocks/bottom-bar.scss

@@ -0,0 +1,70 @@
+.bottom-bar {
+  display: block;
+  grid-column: 1 / -1;
+
+  @include on-small-desktop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__logo {
+    margin-bottom: 48px;
+
+    @include on-tablet {
+      gap: 24px;
+    }
+
+    @include on-small-desktop {
+      margin-bottom: 0;
+    }
+
+    @include hover(transform, scale(1.2));
+  }
+
+  &__list {
+    margin: 0;
+    padding: 0;
+    font-family: Poppins, sans-serif;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    @include on-tablet {
+      flex-direction: row;
+      gap: 40px;
+    }
+
+    @include on-small-desktop {
+      gap: 64px;
+    }
+  }
+
+  &__link {
+    color: $white-color;
+    font-size: 13px;
+    line-height: 19.5px;
+    letter-spacing: 3px;
+    font-weight: 700;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 2px;
+      background-color: $blue-color;
+      position: relative;
+      bottom: -8px;
+      border-radius: 4px;
+      transition: all 0.3s;
+      transform: scale(0);
+    }
+
+    &:hover::after {
+      transform: scale(1);
+    }
+  }
+}

src/styles/blocks/contact-us.scss

@@ -0,0 +1,91 @@
+.contact-us {
+  margin-bottom: 80px;
+  grid-column: 1 / -1;
+
+  @include on-tablet {
+    margin-bottom: 139px;
+  }
+
+  @include on-small-desktop {
+    margin: 0;
+    grid-column: 7 / -1;
+  }
+
+  @include on-desktop {
+    grid-column: 8 / -1;
+  }
+
+  &__title {
+    margin: 0;
+    color: $white-color;
+    font-family: Poppins, sans-serif;
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 48px;
+    margin-bottom: 48px;
+  }
+
+  &__subtitle {
+    margin: 0;
+    color: $grey-color;
+    font-family: Poppins, sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 19.5px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+
+  &__number,
+  &__address {
+    display: block;
+    color: $white-color;
+    text-decoration: none;
+    font-family: OpenSans, sans-serif;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 36px;
+    margin-bottom: 40px;
+
+    @include hover(transform, scale(1.2));
+  }
+
+  &__icons {
+    display: flex;
+    gap: 32px;
+  }
+
+  &__facebook {
+    background-image: url(../images/icons/facebook.png);
+    width: 32px;
+    height: 32px;
+    transition: all 0.3s;
+
+    &:hover {
+      background-image: url(../images/icons/facebook-1.png);
+    }
+  }
+
+  &__twitter {
+    background-image: url(../images/icons/twitter.png);
+    width: 32px;
+    height: 32px;
+    transition: all 0.3s;
+
+    &:hover {
+      background-image: url(../images/icons/twitter-1.png);
+    }
+  }
+
+  &__instagram {
+    background-image: url(../images/icons/instagram.png);
+    width: 32px;
+    height: 32px;
+    transition: all 0.3s;
+
+    &:hover {
+      background-image: url(../images/icons/instagram-1.png);
+    }
+  }
+}

src/styles/blocks/footer-form.scss

@@ -0,0 +1,96 @@
+.form {
+  display: block;
+  grid-column: 1 / -1;
+  margin-bottom: 80px;
+
+  @include on-tablet {
+    grid-column: 1 / 5;
+    margin-bottom: 120px;
+  }
+
+  @include on-small-desktop {
+    grid-column: 1 / 6;
+    margin-bottom: 104px;
+  }
+
+  &__title {
+    margin: 0;
+    color: $white-color;
+    font-family: Poppins, sans-serif;
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 41.6px;
+    margin-bottom: 48px;
+
+    @include on-tablet {
+      line-height: 48px;
+      margin-bottom: 56px;
+    }
+  }
+
+  &__email,
+  &__name {
+    background-color: $dark-color;
+    border: none;
+    border-bottom: solid 1px $grey-color;
+    outline: none;
+    width: 100%;
+    padding-bottom: 16px;
+    font-family: Poppins, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22.5px;
+    color: $grey-color;
+    margin-bottom: 40px;
+    transition: all 0.3s;
+  }
+
+  &__email:focus,
+  &__name:focus {
+    border-bottom: solid 1px $bright-blue-color;
+    color: $white-color;
+  }
+
+  &__message {
+    background-color: $dark-color;
+    border: none;
+    border-bottom: solid 1px $grey-color;
+    outline: none;
+    width: 100%;
+    padding-block: 0;
+    font-family: Poppins, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22.5px;
+    color: $grey-color;
+    margin-bottom: 56px;
+    resize: none;
+    transition: all 0.3s;
+  }
+
+  &__message:focus {
+    border-bottom: solid 1px $bright-blue-color;
+    color: $white-color;
+  }
+
+  &__button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $bright-blue-color;
+    border-radius: 8px;
+    color: $white-color;
+    font-family: Poppins, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22.5px;
+    width: 100%;
+    height: 56px;
+
+    @include hover(transform, scale(1.2));
+
+    @include on-tablet {
+      width: 264px;
+    }
+  }
+}

src/styles/blocks/footer.scss

@@ -0,0 +1,11 @@
+.footer {
+  width: 100%;
+  background-color: $dark-color;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  padding-block: 72px 80px;
+
+  @include on-tablet {
+    padding-block: 180px 80px;
+  }
+}

src/styles/blocks/header.scss

@@ -0,0 +1,7 @@
+.header {
+  background-color: $dark-color;
+  color: $white-color;
+  position: relative;
+  border-end-start-radius: 30px;
+  border-end-end-radius: 30px;
+}

src/styles/blocks/main.scss

@@ -0,0 +1,6 @@
+.main {
+  &__our-expertise {
+    background-color: $white-color;
+    border-radius: 30px;
+  }
+}

src/styles/blocks/menu.scss

@@ -0,0 +1,80 @@
+.menu {
+  box-sizing: border-box;
+
+  height: 100vh;
+  background-color: $dark-color;
+
+  padding-block: 20px 48px;
+  padding-inline: 20px;
+  overflow: hidden;
+
+  @include on-tablet {
+    padding-block: 20px 56px;
+    padding-inline: 41px;
+  }
+
+  @include on-small-desktop {
+    padding-block: 48px 38px;
+    padding-inline: 54px;
+  }
+
+  @include on-desktop {
+    padding-inline: 227px;
+  }
+
+  @include on-large-screens {
+    padding-inline: 707px;
+    max-width: 1600px;
+    margin-left: auto;
+  }
+
+  &__top {
+    padding: 0;
+    margin-block: 20px 80px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: $dark-color;
+  }
+
+  &__icon {
+    background-image: url(../images/icons/icon-close.png);
+    width: 24px;
+    height: 24px;
+  }
+
+  &__list {
+    font-family: Poppins, sans-serif;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+  }
+
+  &__link {
+    font-weight: 700;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: $white-color;
+    text-decoration: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 2px;
+      background-color: $blue-color;
+      position: absolute;
+      bottom: -8px;
+      border-radius: 4px;
+      transition: all 0.3s;
+      transform: scale(0);
+    }
+
+    &:hover::after {
+      transform: scale(1);
+    }
+  }
+}