add task solution

src/styles/blocks.scss

@@ -0,0 +1,26 @@
+@import './utils/mixins';
+@import './blocks/header';
+@import './blocks/body';
+@import './blocks/nav';
+@import './blocks/menu';
+@import './blocks/page';
+@import './blocks/who-we-are';
+@import './blocks/our-expertise';
+@import './blocks/main';
+@import './blocks/article';
+@import './blocks/card';
+@import './blocks/pre-title';
+@import './blocks/process';
+@import './blocks/testimonials';
+@import './blocks/vis-pas-res';
+@import './blocks/footer';
+@import './blocks/form';
+@import './blocks/contact-us';
+@import './blocks/call-us';
+@import './blocks/visit-us';
+@import './blocks/socials';
+@import './blocks/contacts-title';
+@import './blocks/top-bar';
+@import './blocks/aside';
+@import './blocks/hire-us';
+@import './blocks/slider';

src/styles/blocks/article.scss

@@ -0,0 +1,27 @@
+.article {
+  &__title {
+    font-family: Poppins, sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    text-align: center;
+    color: #253757;
+    margin-bottom: 16px;
+  }
+
+  &__description {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+    text-align: center;
+    color: #6c788b;
+  }
+
+  &__img {
+    display: block;
+    margin-bottom: 32px;
+    height: 166px;
+    width: 166px;
+  }
+}

src/styles/blocks/aside.scss

@@ -0,0 +1,80 @@
+.aside {
+  height: 100vh;
+  background-color: #2c2c2c;
+  box-sizing: border-box;
+
+  @include on-small-desktop {
+    display: none;
+  }
+
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 35px;
+  }
+
+  &__logo {
+    display: block;
+    height: 28px;
+    width: 46px;
+  }
+
+
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &::after {
+      display: block;
+    }
+  }
+
+  &__link {
+    position: relative;
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+
+    font-family: Poppins, sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 19.5px;
+    letter-spacing: 3px;
+    color: #fff;
+
+    &::after {
+      position: absolute;
+      bottom: -8px;
+
+      left: 0;
+      display: block;
+      content: '';
+      height: 2px;
+      width: 100%;
+      background-color: #2060f6;
+      transform: scale(0);
+      transition: transform 0.3s;
+      transform-origin: left;
+    }
+
+    &:hover::after {
+      transform: scale(1);
+    }
+  }
+
+  &__icon-close {
+    display: block;
+    height: 14px;
+    width: 14px;
+
+    background-image: url(../images/icons/cross.png);
+    background-position: center;
+    background-size: cover;
+  }
+}

src/styles/blocks/body.scss

@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}

src/styles/blocks/call-us.scss

@@ -0,0 +1,22 @@
+.call-us {
+  &__title {
+    margin-bottom: 8px;
+  }
+
+  &__number-link {
+    text-decoration: none;
+    color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 36px;
+    text-align: left;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #144ED4;
+    }
+  }
+
+
+}

src/styles/blocks/card.scss

@@ -0,0 +1,76 @@
+.card {
+  background-color: #fff;
+  padding: 32px 0 28px 32px;
+  border-radius: 16px;
+  height: 264px;
+  box-sizing: border-box;
+
+  &__number {
+    background: rgba(32, 96, 246, 0.1);
+    width: 46px;
+    height: 24px;
+    border-radius: 23px;
+    color: #2060f6;
+    line-height: 24px;
+    margin-bottom: 24px;
+
+    font-family: Poppins, sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 32px;
+  }
+
+  &__item {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 19.5px;
+    text-align: left;
+    color: #6c788b;
+    margin-bottom: 3px;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    text-decoration: none;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background-color: #2060f6;
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  &__bottom {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+  }
+
+  &__learn-more {
+    font-family: Poppins, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22.5px;
+    text-align: center;
+    color: #334563;
+  }
+}

src/styles/blocks/contact-us.scss

@@ -0,0 +1,18 @@
+.contact-us {
+  &__title {
+    font-family: Poppins, sans-serif;
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 48px;
+    text-align: left;
+    color: #fff;
+
+    margin-bottom: 48px;
+  }
+
+  &__contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+}

src/styles/blocks/contacts-title.scss

@@ -0,0 +1,11 @@
+.contacts-title {
+  font-family: Poppins, sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 19.5px;
+  letter-spacing: 3px;
+  text-align: left;
+  color: #fff;
+  opacity: 50%;
+  text-transform: uppercase;
+}

src/styles/blocks/footer.scss

@@ -0,0 +1,116 @@
+.footer {
+  background-color: #2c2c2c;
+  padding-block: 72px 80px;
+  border-radius: 30px 30px 0 0;
+
+  &__content {
+    @include page-grid;
+
+    row-gap: 80px;
+
+    @include padding-inline;
+  }
+
+  &__form {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 1 / 5;
+    }
+
+    @include on-small-desktop {
+      grid-column: 1 / 6;
+    }
+  }
+
+  &__contact-us {
+    grid-column: 1 / -1;
+
+    @include on-small-desktop {
+      grid-column: 7 / -1;
+    }
+
+    @include on-desktop {
+      grid-column: 8 / -1;
+    }
+  }
+
+  &__logo-link {
+    display: block;
+    margin-bottom: 48px;
+
+    @include on-small-desktop {
+      margin: 0;
+    }
+  }
+
+  &__logo {
+    height: 28px;
+    width: 46px;
+  }
+
+  &__menu {
+    grid-column: 1 / -1;
+
+    @include on-small-desktop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  &__nav {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      @include on-tablet {
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 40px;
+      }
+
+      @include on-small-desktop {
+        gap: 64;
+      }
+
+
+    }
+
+    &-link {
+      position: relative;
+      text-decoration: none;
+      text-transform: uppercase;
+
+      font-family: Poppins, sans-serif;
+      font-size: 13px;
+      font-weight: 700;
+      line-height: 19.5px;
+      letter-spacing: 3px;
+      color: #fff;
+
+      padding-bottom: 8px;
+
+      &::after {
+        position: absolute;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        content: '';
+        background-color: #144ED4;
+        height: 2px;
+        transform: scale(0);
+        transition: transform 0.3s;
+        transform-origin: left;
+      }
+
+      &:hover::after {
+        transform: scale(1);
+      }
+    }
+  }
+}