add task solution

src/scripts/main.js

@@ -1 +1,8 @@
 'use strict';
+
+const form = document.querySelector('.form');
+
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  form.reset();
+});

src/styles/_fonts.scss

@@ -4,3 +4,6 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

src/styles/_utils.scss

@@ -1,3 +1,29 @@
 @import "utils/vars";
 @import "utils/mixins";
 @import "utils/extends";
+
+@import "utils/container";
+@import "utils/top-bar";
+@import "utils/header";
+@import "utils/info";
+@import "utils/main";
+@import "utils/whoweare";
+@import "utils/expertise";
+@import "utils/store";
+@import "utils/section-title";
+@import "utils/navigation";
+@import "utils/services";
+@import "utils/creative";
+@import "utils/testimonials";
+@import "utils/vision";
+@import "utils/footer";
+@import "utils/slide";
+@import "utils/form--action";
+@import "utils/send";
+@import "utils/input";
+@import "utils/icon";
+@import "utils/group";
+@import "utils/menu";
+@import "utils/page";
+@import "utils/nav";
+@import "utils/close";

src/styles/main.scss

@@ -3,5 +3,6 @@
 @import "typography";
 
 body {
-  background: $c-gray;
+  margin: 0;
+  min-width: 320px;
 }

src/styles/utils/_mixins.scss

@@ -4,3 +4,76 @@
     #{$_property}: $_toValue;
   }
 }
+
+@mixin onTablet {
+  @media (min-width:$tablet-min-width) {
+    @content;
+  }
+}
+
+@mixin onDesktop {
+  @media (min-width:$desktop-min-width) {
+    @content;
+  }
+}
+
+@mixin onDesktop1600 {
+  @media (min-width:$desktop1600-min-width) {
+    @content;
+  }
+}
+
+@mixin onDesktop2560 {
+  @media (min-width:$desktop2560-min-width) {
+    @content;
+  }
+}
+
+@mixin contentPaddinginline() {
+  padding-inline: 20px;
+
+  @include onTablet {
+    padding-inline: 41px;
+  }
+
+  @include onDesktop() {
+    margin-inline: auto;
+    padding-inline: 54px;
+  }
+
+  @include onDesktop1600() {
+    padding-inline: 227px;
+  }
+
+  @include onDesktop2560() {
+    padding-inline: 707px;
+    max-width: 2560px;
+  }
+}
+
+@mixin pageGrid {
+  --columns: 2;
+  display: grid;
+  column-gap: 30px;
+  grid-template-columns: repeat(var(--columns),1fr);
+
+  @include onTablet {
+    column-gap: 30px;
+    --columns: 6;
+  }
+
+  @include onDesktop {
+    --columns: 12;
+    column-gap: 20px;
+  }
+
+  @include onDesktop1600() {
+    --columns: 12;
+    column-gap: 30px;
+  }
+
+  @include onDesktop2560() {
+    --columns: 12;
+    column-gap: 30px;
+  }
+}

src/styles/utils/_vars.scss

@@ -1 +1,13 @@
 $c-gray: #eee;
+$tablet-min-width: 640px;
+$desktop-min-width: 1024px;
+$desktop1600-min-width: 1600px;
+$desktop2560-min-width: 2560px;
+$time-transition:1000ms;
+$color-black:#2c2c2c;
+$color-white: #fff;
+$color-blue: #2060f6;
+$color-gray: #253757;
+$color-grayss: #6c788b;
+$color-gr:#c0cdd7;
+$color-bluesss: #144ed4;

src/styles/utils/close.scss

@@ -0,0 +1,3 @@
+.close path {
+  fill: $color-white;
+}

src/styles/utils/container.scss

@@ -0,0 +1,3 @@
+.container {
+  @include contentPaddinginline();
+}

src/styles/utils/creative.scss

@@ -0,0 +1,211 @@
+.creative {
+
+  &__cards {
+    position: absolute;
+  }
+
+  &__card {
+    border-radius: 16px;
+    background: #fff;
+    height: 264px;
+    width: 280px;
+    box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03);
+    grid-column: span 2;
+    margin-bottom: 30px;
+    cursor: pointer;
+    transition: transform $time-transition;
+
+    @include onTablet {
+      width: 264px;
+      transform: translate(0%, 130%);
+
+      &:hover {
+        transform: translate(0%,130%) scale(1.07);
+      }
+    }
+
+    @include onDesktop {
+      width: 214px;
+      margin-bottom: 20px;
+      transform: translate(220%,59%);
+
+      &:hover {
+        transform: translate(220%,59%) scale(1.07);
+      }
+    }
+
+    @include onDesktop1600 {
+      width: 264px;
+      margin-bottom: 30px;
+      transform: translate(220%,50%);
+
+      &:hover {
+        transform: translate(220%,50%) scale(1.07);
+      }
+    }
+
+    &--two {
+
+      @include onTablet {
+        transform: translate(110%,-20%);
+
+        &:hover {
+          transform: translate(110%,-20%) scale(1.07);
+        }
+      }
+
+      @include onDesktop {
+        transform: translate(329%,-107%);
+
+        &:hover {
+          transform: translate(329%,-107%) scale(1.07);
+        }
+      }
+
+      @include onDesktop1600 {
+        transform: translate(335%,-110%);
+
+        &:hover {
+          transform: translate(335%,-110%) scale(1.07);
+        }
+      }
+    }
+
+    &--three {
+      grid-column: span 2;
+
+      @include onTablet {
+        margin-bottom: 0;
+        transform: translate(0,19%);
+
+        &:hover {
+          transform: translate(0,19%) scale(1.07);
+        }
+      }
+
+      @include onDesktop {
+        transform: translate(220%,-40%);
+
+        &:hover {
+          transform: translate(220%,-40%) scale(1.07);
+        }
+      }
+
+      @include onDesktop1600 {
+        transform: translate(220%,-60%);
+
+        &:hover {
+          transform: translate(220%,-60%) scale(1.07);
+        }
+      }
+    }
+
+    &--four {
+      grid-column: span 2;
+
+      @include onTablet {
+        transform: translate(110%,-120%);
+
+        &:hover {
+          transform: translate(110%,-120%) scale(1.07);
+        }
+      }
+
+      @include onDesktop {
+        transform: translate( 330%, -200%);
+
+        &:hover {
+          transform: translate(330%,-200%) scale(1.07);
+        }
+      }
+
+      @include onDesktop1600 {
+        transform: translate( 335%, -209%);
+
+        &:hover {
+          transform: translate(335%,-209%) scale(1.07);
+        }
+      }
+    }
+  }
+
+  &__number {
+    display: flex;
+    margin-left: 32px;
+    margin-bottom: 24px;
+  }
+
+  &__numbers {
+    position: relative;
+    color: #2060f6;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: normal;
+    text-transform: uppercase;
+    font-family: "Poppins", sans-serif;
+    margin-top: 34px;
+    margin-left: 12px;
+    margin-bottom: 2px;
+  }
+
+  &__top {
+    width: 46px;
+    height: 24px;
+    background-color: #2060f6;
+    border-radius: 23px;
+    opacity: 0.1;
+    position: absolute;
+    z-index: 1;
+    margin-top: 32px;
+  }
+
+  &__text {
+    color: $color-grayss;
+    font-family: "Open Sans", sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 150%;
+    margin-left: 32px;
+    margin-bottom: 32px;
+    margin-right: 32px;
+  }
+
+  &__button {
+    display: flex;
+    background-image: url(../images/ellipse.png);
+    background-repeat: no-repeat;
+    height: 40px;
+    width: 40px;
+    background-size: contain;
+    margin-left: 32px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__buttonlean {
+    cursor: pointer;
+    text-decoration: none;
+    transition: transform $time-transition;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+
+  &__leanmore {
+    position: relative;
+    color: var(--text-200, #334563);
+    margin-left: 92px;
+    font-family: "Poppins", sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: normal;
+    bottom: 41px;
+    margin-top: 10px;
+  }
+}
+
+.buttons {
+  z-index: 1;
+  position: absolute;
+}