mate-academy · bashtovaA · Oct 4, 2023 · Oct 5, 2023 · Oct 17, 2023 · Oct 31, 2023
diff --git a/dist/BG-footer.c5bd759a.png b/dist/BG-footer.c5bd759a.png
diff --git a/dist/BG.1e51202d.png b/dist/BG.1e51202d.png
diff --git a/dist/Ellipse4.1a2f46bd.png b/dist/Ellipse4.1a2f46bd.png
diff --git a/dist/Photo.538110d5.png b/dist/Photo.538110d5.png
diff --git a/dist/Roboto-Regular-webfont.1b7be813.woff b/dist/Roboto-Regular-webfont.1b7be813.woff
diff --git a/dist/Shapes.4fe94914.png b/dist/Shapes.4fe94914.png
diff --git a/dist/ellipse.b822e4a5.png b/dist/ellipse.b822e4a5.png
diff --git a/dist/expertise1.9576368d.png b/dist/expertise1.9576368d.png
diff --git a/dist/expertise2.ff7d92b8.png b/dist/expertise2.ff7d92b8.png
diff --git a/dist/expertise3.25847404.png b/dist/expertise3.25847404.png
diff --git a/dist/favicon.aaeb10c9.ico b/dist/favicon.aaeb10c9.ico
diff --git a/dist/girl.f530952a.png b/dist/girl.f530952a.png
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/main.2a8c351e.js b/dist/main.2a8c351e.js
diff --git a/dist/main.2a8c351e.js.map b/dist/main.2a8c351e.js.map
diff --git a/dist/main.60726788.css b/dist/main.60726788.css
diff --git a/dist/main.60726788.css.map b/dist/main.60726788.css.map
diff --git a/dist/man.b39679a7.png b/dist/man.b39679a7.png
diff --git a/dist/photo2.3a7bff23.png b/dist/photo2.3a7bff23.png
diff --git a/dist/woman.392d73dc.png b/dist/woman.392d73dc.png
diff --git a/src/favicon/favicon.ico b/src/favicon/favicon.ico
diff --git a/src/images/BG-footer.png b/src/images/BG-footer.png
diff --git a/src/images/BG.png b/src/images/BG.png
diff --git a/src/images/BGvision.png b/src/images/BGvision.png
diff --git a/src/images/Photo.png b/src/images/Photo.png
diff --git a/src/images/Rectangle11.png b/src/images/Rectangle11.png
diff --git a/src/images/Rectangle12.png b/src/images/Rectangle12.png
diff --git a/src/images/Rectangle7.png b/src/images/Rectangle7.png
diff --git a/src/images/ellipse.png b/src/images/ellipse.png
diff --git a/src/images/expertise1.png b/src/images/expertise1.png
diff --git a/src/images/expertise2.png b/src/images/expertise2.png
diff --git a/src/images/expertise3.png b/src/images/expertise3.png
diff --git a/src/images/girl.png b/src/images/girl.png
diff --git a/src/images/logo/Ellipse.svg b/src/images/logo/Ellipse.svg
diff --git a/src/images/logo/Ellipse4.png b/src/images/logo/Ellipse4.png
diff --git a/src/images/logo/Logo.png b/src/images/logo/Logo.png
diff --git a/src/images/logo/Menu.png b/src/images/logo/Menu.png
diff --git a/src/images/logo/Rectangle11.png b/src/images/logo/Rectangle11.png
diff --git a/src/images/logo/Rectangle12.png b/src/images/logo/Rectangle12.png
diff --git a/src/images/logo/photo3.png b/src/images/logo/photo3.png
diff --git a/src/images/man.png b/src/images/man.png
diff --git a/src/images/photo2.png b/src/images/photo2.png
diff --git a/src/images/woman.png b/src/images/woman.png
diff --git a/src/index.html b/src/index.html
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,39 @@
+/* eslint-disable no-console */
 'use strict';
+
+const form = document.querySelector('#form');
+
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  form.reset();
+});
+
+const images = document.querySelectorAll('.slider .slider-line img');
+const sliderLine = document.querySelector('.slider-line');
+let count = 0;
+let width;
+
+function init() {
+  console.log('resize');
+  width = document.querySelector('.slider').offsetWidth;
+  sliderLine.style.width = width * images.length + 'px';
+
+  images.forEach(item => {
+    item.style.width = width + 'px';
+  });
+}
+window.addEventListener('resize', init);
+init();
+
+document.querySelector('.slider__next').addEventListener('click', function() {
+  count++;
+
+  if (count >= images.length) {
+    count = 0;
+  }
+  rollSlider();
+});
+
+function rollSlider() {
+  sliderLine.style.transform = 'translate(-' + count * width + 'px)';
+};
diff --git a/src/styles/_fonts.scss b/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");
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -1,3 +1,30 @@
 @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";
+@import "utils/slider";
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -3,5 +3,6 @@
 @import "typography";
 
 body {
-  background: $c-gray;
+  margin: 0;
+  min-width: 320px;
 }
diff --git a/src/styles/utils/_mixins.scss b/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;
+  }
+}
diff --git a/src/styles/utils/_vars.scss b/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;
diff --git a/src/styles/utils/close.scss b/src/styles/utils/close.scss
@@ -0,0 +1,3 @@
+.close path {
+  fill: $color-white;
+}
diff --git a/src/styles/utils/container.scss b/src/styles/utils/container.scss
@@ -0,0 +1,3 @@
+.container {
+  @include contentPaddinginline();
+}
diff --git a/src/styles/utils/creative.scss b/src/styles/utils/creative.scss
@@ -0,0 +1,188 @@
+.creative {
+
+  &__card {
+    border-radius: 16px;
+    background: #fff;
+    height: 264px;
+    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 {
+      grid-column: 1/4;
+
+      &:hover {
+        transform: scale(1.07);
+      }
+    }
+
+    @include onDesktop {
+      margin-bottom: 20px;
+      grid-column: 7/10;
+      grid-row: 1;
+      transform: translateY(46%);
+
+      &:hover {
+        transform: translateY(46%) scale(1.07);
+      }
+    }
+
+    @include onDesktop1600 {
+      grid-column: 7/10;
+      margin-bottom: 30px;
+    }
+
+    &--two {
+
+      @include onTablet {
+        grid-column: 4/-1;
+        transform: translateY(-40%);
+
+        &:hover {
+          transform: translateY(-50%) scale(1.07);
+        }
+      }
+
+      @include onDesktop {
+        grid-column: 10/-1;
+        transform: translateY(0%);
+
+        &:hover {
+          transform: translateY(0%) scale(1.07);
+        }
+      }
+    }
+
+    &--three {
+      grid-column: span 2;
+      margin-bottom: 20px;
+
+      @include onTablet {
+        grid-column: 1/4;
+        margin-bottom: 0;
+
+        &:hover {
+          transform: scale(1.07);
+        }
+      }
+
+      @include onDesktop {
+        grid-column: 7/10;
+        margin-bottom: 0;
+        transform: translateY(155%);
+
+        &:hover {
+          transform: translateY(155%) scale(1.07);
+        }
+      }
+    }
+
+    &--four {
+      grid-column: span 2;
+      margin-bottom: 0;
+
+      @include onTablet {
+        grid-column: 4/-1;
+        transform: translateY(-40%);
+
+        &:hover {
+          transform: translateY(-40%) scale(1.07);
+        }
+      }
+
+      @include onDesktop {
+        grid-column: 10/-1;
+        transform: translateY(110%);
+        margin: 0;
+
+        &:hover {
+          transform: translateY(110%) scale(1.07);
+        }
+      }
+    }
+  }
+
+  &__number {
+    display: flex;
+    margin-left: 32px;
+    margin-bottom: 26px;
+  }
+
+  &__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;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 32px;
+    transition: transform $time-transition;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+
+  &__leanmore {
+    position: relative;
+    color: var(--text-200, #334563);
+    font-family: "Poppins", sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: normal;
+    margin: 0;
+  }
+}
+
+.buttons {
+  z-index: 1;
+  position: absolute;
+}