project done

config.js

@@ -26,8 +26,8 @@ let config = {
     './script.js',
   ],
   'addAssets': {
-    'src/img/demo-*.{png,svg,jpg,jpeg}': 'img/',
-    // 'src/fonts/demo-empty-open-sans.woff2': 'fonts/',
+    'src/img/*.{png,svg,jpg,jpeg}': 'img/',
+    'src/fonts/*.{woff,woff2}': 'fonts/',
     // 'src/favicon/*.{png,ico,svg,xml,webmanifest}': 'img/favicon',
     // 'node_modules/somePackage/images/*.{png,svg,jpg,jpeg}': 'img/',
   },

package-lock.json

@@ -13,6 +13,7 @@
         "baron": "^3.0.3",
         "choices.js": "^9.0.1",
         "closest": "0.0.1",
+        "jquery": "^3.6.0",
         "svg4everybody": "^2.1.8"
       },
       "devDependencies": {
@@ -11973,6 +11974,11 @@
       "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
       "dev": true
     },
+    "node_modules/jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -32527,6 +32533,11 @@
       "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
       "dev": true
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",

package.json

@@ -83,6 +83,7 @@
     "baron": "^3.0.3",
     "choices.js": "^9.0.1",
     "closest": "0.0.1",
+    "jquery": "^3.6.0",
     "svg4everybody": "^2.1.8"
   },
   "husky": {

src/blocks/btn/btn.scss

@@ -8,31 +8,56 @@
   max-width: 100%;
   margin: 0;
   border-radius: $border-radius;
-  // border: 1px solid $gray-lighter;
-  border: 0;
-  padding: $field-padding-vertical  $field-padding-horizontal;
+  border: 1px solid transparent;
+  padding: 14px 20px;
   vertical-align: middle;
   white-space: nowrap;
   text-overflow: ellipsis;
   user-select: none;
   text-align: center;
-  font-size: 1em;
-  font-family: inherit;
-  line-height: $line-height;
+  font-weight: 800;
   text-decoration: none;
-  text-transform: none;
-  color: $text-color;
-  background-color: $gray-lightest;
+  text-transform: uppercase;
+  color: $color-1;
+  font-size: 13px;
+  font-family: $font-family;
+  background-color: #fff;
   background-image: none;
   cursor: pointer;
   overflow: hidden;
+  transition: color $transition-time, background-color $transition-time,
+    border-color $transition-time;
+
+  @media (min-width: $screen-xl) {
+    padding: 16px 30px;
+    font-size: 18px;
+  }
+
+  @media (min-width: $screen-xl) and (max-width: ($screen-xxl - 1)) {
+    @at-root .form-block__second & {
+      padding: 14px 20px;
+      min-width: 180px;
+      font-size: 16px;
+    }
+  }
+
+  @media (min-width: $screen-lg) {
+    padding: 15px 20px;
+    font-size: 14px;
+  }
 
   &:hover,
   &:focus {
     text-decoration: none;
-    color: $text-color;
-    background-color: darken($gray-lightest, 10%);
-    // border-color: darken($gray-lighter, 12%);
+    color: #fff;
+    background-color: transparent;
+    border-color: #fff;
+
+    svg {
+      path {
+        stroke: #fff;
+      }
+    }
   }
 
   // &:visited {
@@ -41,7 +66,14 @@
 
   &:active,
   &:focus {
-    @include field-focus;
+    outline: none;
+    // @include field-focus;
+  }
+
+  svg {
+    path {
+      transition: stroke $transition-time;
+    }
   }
 
   &--disabled,
@@ -57,13 +89,30 @@
     }
   }
 
+  &--ico {
+    display: inline-flex;
+    align-items: center;
+
+    svg {
+      margin-left: 10px;
+      width: auto;
+      height: 25px;
+
+      @media (min-width: $screen-xxl) {
+        margin-left: 15px;
+        height: 32px;
+      }
+
+      @media (min-width: $screen-xl) {
+      }
+    }
+  }
+
   // &__icon {
   //   display: inline-block;
   //   vertical-align: middle;
   // }
 
-
-
   // &--main {
   //   color: #fff;
   //   background-color: $color-main;

src/blocks/burger/burger.js

@@ -12,11 +12,16 @@ ready(function(){
   }
 
   function showBurgerTarget() {
+    const body = document.querySelector('body');
     var targetId = this.getAttribute('data-target-id');
     var targetClassToggle = this.getAttribute('data-target-class-toggle');
+
     if (targetId && targetClassToggle) {
       this.classList.toggle('burger--close');
       document.getElementById(targetId).classList.toggle(targetClassToggle);
+      body.classList.toggle('of-h');
+      body.classList.toggle('mob-menu-active');
+      // document.querySelector('.black-background').classList.toggle('active');
     }
   }
 

src/blocks/burger/burger.scss

@@ -6,57 +6,60 @@
   position: relative;
   z-index: 1;
   display: inline-flex;
+  justify-content: flex-end;
   align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 25px;
+  height: 16px;
   border: none;
   padding: 0;
   background: transparent;
   user-select: none;
   cursor: pointer;
 
-  > span { // stylelint-disable-line  selector-combinator-blacklist
+  > span {
+    // stylelint-disable-line  selector-combinator-blacklist
     display: block;
     position: relative;
-    width: 90%;
+    width: 13px;
     height: $toggler-part-height;
     font-size: 0;
     color: transparent;
-    background: $gray-dark;
+    background: $color-1;
     transition: background $transition-time $transition-time;
 
     &:before,
     &:after {
-      content: '';
+      content: "";
       position: absolute;
-      left: 0;
-      width: 100%;
+      right: 0;
+      width: 25px;
       height: $toggler-part-height;
-      background: $gray-dark;
+      background: #3a3a3a;
       transform-origin: 50% 50%;
-      transition: top $transition-time $transition-time, transform $transition-time;
+      transition: top $transition-time $transition-time,
+        background-color $transition-time, transform $transition-time;
     }
 
     &:before {
-      top: -10px;
+      top: -8px;
     }
 
     &:after {
-      top: 10px;
+      top: 8px;
     }
   }
 
   &--close {
-
-    > span { // stylelint-disable-line  selector-combinator-blacklist
+    > span {
+      // stylelint-disable-line  selector-combinator-blacklist
       transition: background $transition-time 0s;
       background: transparent;
 
       &:before,
       &:after {
         top: 0;
-        transition: top $transition-time, transform $transition-time $transition-time;
+        transition: top $transition-time,
+          transform $transition-time $transition-time;
       }
 
       &:before {
@@ -65,6 +68,7 @@
 
       &:after {
         transform: rotate3d(0, 0, 1, -45deg);
+        background-color: $color-1;
       }
     }
   }

src/blocks/dropdown/dropdown.js

+/* global document */
+
+// const ready = require('../../js/utils/documentReady.js');
+
+// ready(function(){
+//   
+// });

src/blocks/dropdown/dropdown.pug

+//- Все примеси в этом файле должны начинаться c имени блока (dropdown)
+
+mixin dropdown(elem, elemText, elemLink, elemMods, mods)
+
+  //- Принимает:
+  //-   elem       {string} - значения: link | button | text
+  //-   elemText   {string} - текст elem
+  //-   elemLink   {string} - ссылка, если elem = link
+  //-   elemMods   {string} - список модификаторов elem
+  //-   mods       {string} - список модификаторов dropdown
+  //- Вызов:
+        +dropdown('link', 'ico', '', '')
+          +dropdown-item()
+            a(href='tel:+78314618980') +7 (831) 461-89-80
+          +dropdown-item()
+            a(href='tel:+78314618980') +7 (831) 461-89-80
+          +dropdown-item()
+            a(href='tel:+78314618980') +7 (831) 461-89-80
+
+  -
+    // список модификаторов
+    var allMods = '',
+        elemType = '',
+        elemAllMods = '';
+
+    if(elemLink === 'undefined' || elemLink === '') {
+      elemLink = '#';
+    }
+
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' dropdown--' + modsList[i].trim();
+      }
+    }
+
+    if(typeof(elemMods) !== 'undefined' && elemMods) {
+      var arrMods = elemMods.split(',');
+      for (var i = 0; i < arrMods.length; i++) {
+        elemAllMods = elemAllMods + ' ' + arrMods[i].trim();
+      }
+    }
+
+    if (typeof(elem) !== 'undefined' && elem) {
+      switch(elem){
+        case 'link':
+          elemType = '<div class="dropdown__block"><a class="dropdown__elem '+elemMods+'" href="'+elemLink+'">'+elemText+'</a>';
+          elemType += '<button class="dropdown__toggler"></button></div>';
+          break;
+        case 'button':
+          elemType = '<div class="dropdown__block"><button class="dropdown__elem '+elemMods+'">'+elemText+'</button>';
+          elemType += '<button class="dropdown__toggler"></button></div>';
+          break;
+        case 'text':
+          elemType = '<div class="dropdown__block"><span class="dropdown__elem '+elemMods+'">'+elemText+'</span>';
+          elemType += '<button class="dropdown__toggler"></button></div>';
+          break;
+        case 'ico':
+          elemType = '<div class="dropdown__block"><span class="dropdown__elem '+elemMods+'">'+elemText+' <img src="img/flag-1.png" alt="United Kingdom flag"></span>';
+          elemType += '<button class="dropdown__toggler"></button></div>';
+          break;
+      }
+    }
+
+  .dropdown(class=allMods)&attributes(attributes) !{elemType}
+    ul.dropdown__list
+      block
+
+mixin dropdown-item()
+
+  li
+    block
+    
\ No newline at end of file

src/blocks/dropdown/dropdown.scss

+// В этом файле должны быть стили для БЭМ-блока dropdown, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.dropdown {
+  $block-name: &;
+
+  position: relative;
+
+  &:focus,
+  &:hover {
+    #{$block-name}__block {
+      border-bottom-color: transparent;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    #{$block-name}__toggler {
+      background-image: url("../img/arr-dwn--orange.svg");
+    }
+
+    #{$block-name}__list {
+      border: 1px solid #eeeeee;
+      border-top: 0;
+      opacity: 1;
+      transform: translateY(0);
+      visibility: visible;
+    }
+  }
+
+  &__block {
+    display: flex;
+    align-items: center;
+    position: relative;
+    border: 1px solid #eeeeee;
+    padding: 5px 30px 5px 5px;
+    width: 320px;
+    border-radius: 20px;
+  }
+
+  &__elem {
+    text-decoration: none;
+    font-size: 12px;
+
+    @media (min-width: $screen-sm) {
+      font-size: 14px;
+    }
+
+    &:hover {
+      // color: $color-main-2;
+    }
+  }
+
+  &__toggler {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    padding: 0;
+    border: 0;
+    width: 40px;
+    height: 100%;
+    background: url("../img/arr-dwn.svg") center/auto 10px no-repeat;
+    transition: var(--transition-duration);
+  }
+
+  &__list {
+    position: absolute;
+    right: 0;
+    z-index: 5;
+    transform: translateY(-4px);
+    margin: 0;
+    padding: 5px 0;
+    min-width: 155px;
+    width: 100%;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    list-style: none;
+    overflow: hidden;
+    background-color: #ffffff;
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
+    opacity: 0;
+    visibility: hidden;
+    transition: var(--transition-duration);
+    font-size: 12px;
+
+    @media (min-width: $screen-sm) {
+      font-size: 14px;
+    }
+
+    li {
+      & > a,
+      & > span {
+        display: block;
+        padding: 5px 20px;
+        transition: var(--transition-duration);
+        text-decoration: none;
+        color: $color-2;
+
+        &:focus,
+        &:hover {
+          background-color: #f5f6f8;
+          // color: $color-main-2;
+        }
+      }
+    }
+  }
+
+  &--width-auto {
+    .dropdown__block {
+      width: auto;
+    }
+    .dropdown__list {
+      min-width: auto;
+    }
+  }
+
+  &--no-border {
+    .dropdown__block {
+      border: inherit;
+      padding: 4px 27px 4px 10px;
+      border-radius: inherit;
+    }
+
+    .dropdown__toggler {
+      width: 27px;
+      background-position: right 2px center;
+      transform-origin: calc(50% + 0.65rem) 50%;
+    }
+
+    .dropdown__list {
+      li {
+        & > a,
+        & > span {
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+      }
+    }
+  }
+
+  &--align-right {
+    text-align: right;
+
+    .dropdown__elem {
+      margin-left: auto;
+    }
+
+    .dropdown__list {
+      li {
+        & > a,
+        & > span {
+          padding-right: 30px;
+        }
+      }
+    }
+  }
+
+  &--align-right.dropdown--no-border {
+    .dropdown__list {
+      li {
+        & > a,
+        & > span {
+          padding-right: 27px;
+        }
+      }
+    }
+  }
+
+  &--width-auto-left {
+    .dropdown__block {
+      width: auto;
+    }
+    .dropdown__list {
+      min-width: auto;
+      width: auto;
+      left: 0;
+      right: inherit;
+    }
+  }
+
+  &--arr-left {
+    #{$block-name}__block {
+      padding-left: 30px;
+      padding-right: 5px;
+    }
+
+    #{$block-name}__toggler {
+      left: 5px;
+      right: inherit;
+      width: 25px;
+    }
+
+    #{$block-name}__list {
+      li {
+        & > a,
+        & > span {
+          padding-left: 15px;
+          padding-right: 15px;
+        }
+      }
+    }
+  }
+
+  &--items-with-ico {
+    #{$block-name}__elem {
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-left: 12px;
+        width: 25px;
+        height: auto;
+
+        @media (min-width: $screen-sm) {
+          width: 30px;
+        }
+      }
+    }
+
+    #{$block-name}__list {
+      padding: 0;
+
+      li {
+        & > a,
+        & > span {
+          display: flex;
+          align-items: center;
+          padding-right: 5px;
+          transition: color $transition-time;
+
+          &:focus,
+          &:hover {
+            background-color: transparent;
+            color: $color-1;
+          }
+
+          img {
+            box-sizing: content-box;
+            margin-left: auto;
+            padding-left: 12px;
+            width: 25px;
+            height: auto;
+
+            @media (min-width: $screen-sm) {
+              width: 30px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/blocks/field-text/field-text.scss

@@ -3,7 +3,6 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .field-text {
-
   $block-name: &; // #{$block-name}__element
 
   display: block;
@@ -21,22 +20,20 @@
     @include field-text;
 
     @at-root textarea#{&} {
-      $textarea-height: ($line-height * 2) + ($field-padding-vertical * 2);
+      // $textarea-height: ($line-height * 2) + ($field-padding-vertical * 2);
 
       height: auto;
-      min-height: calc(#{$textarea-height} + 2px);
+      // min-height: calc(#{$textarea-height} + 2px);
       resize: vertical;
     }
   }
 
   &__help-text {
     @include field-help-text;
+    display: none;
   }
 
-
-
   &--error {
-
     #{$block-name}__name,
     #{$block-name}__input,
     #{$block-name}__help-text {

src/blocks/logo/logo.scss

@@ -3,13 +3,31 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .logo {
-
-  $block-name:                &; // #{$block-name}__element
+  $block-name: &;
 
   display: inline-block;
   white-space: nowrap;
+  line-height: 0;
+  width: 135px;
+
+  @media (min-width: $screen-xl) {
+    width: 200px;
+  }
+
+  @media (min-width: $screen-lg) {
+    width: 170px;
+  }
+
+  @media (min-width: $screen-md) {
+    width: 150px;
+  }
 
   img {
     display: block;
   }
+
+  svg {
+    width: 100%;
+    height: auto;
+  }
 }

src/blocks/page-footer/page-footer.scss

@@ -2,7 +2,72 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
+.page__footer-wrapper {
+}
+
 .page-footer {
+  $block-name: &;
+  background-color: $color-2;
+  color: #fff;
+
+  &__inner {
+  }
+
+  &__first {
+    padding: 40px 0;
+
+    @media (min-width: $screen-xxl) {
+    }
+
+    @media (min-width: $screen-xl) {
+    }
+
+    @media (min-width: $screen-lg) {
+    }
+
+    @media (min-width: $screen-md) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    @media (min-width: $screen-sm) {
+    }
+  }
+
+  &__f-left {
+    @media (max-width: ( $screen-md - 1)) {
+      text-align: center;
+    }
+  }
+
+  &__f-right {
+    @media (min-width: $screen-md) {
+      padding-left: 15px;
+    }
+
+    @media (max-width: ( $screen-md - 1)) {
+      margin-top: 40px;
+    }
+  }
+
+  &__second {
+    padding: 20px 0;
+    border-top: 1px solid rgba(239, 239, 239, 0.2);
+
+    @media (min-width: $screen-sm) {
+      padding-top: 30px;
+      padding-top: 30px;
+    }
+  }
+}
+
+.copyright {
+  margin-bottom: 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
 
-  $block-name:                &; // #{$block-name}__element
+  @media (max-width: ( $screen-md - 1)) {
+    text-align: center;
+  }
 }

src/blocks/page-header/page-header.scss

@@ -3,6 +3,128 @@
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
 .page-header {
+  $block-name: &;
 
-  $block-name:                &; // #{$block-name}__element
+  padding: 20px 0;
+  background-color: #fff;
+
+  @at-root .mob-menu-active & {
+    @media (min-width: $screen-md) {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  @media (min-width: $screen-xxl) {
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+
+  @media (min-width: $screen-xl) {
+    padding-top: 35px;
+    padding-bottom: 35px;
+  }
+
+  @media (min-width: $screen-md) {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+
+  &.fixed {
+    position: fixed !important;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    width: 100%;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+
+    @media (min-width: $screen-md) {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+
+    .logo {
+      @media (min-width: $screen-md) {
+        width: 150px;
+      }
+    }
+  }
+
+  & + .big-text {
+    margin-top: 20px;
+
+    @media (min-width: $screen-xl) {
+      margin-top: 70px;
+    }
+
+    @media (min-width: $screen-md) {
+      margin-top: 40px;
+    }
+  }
+
+  #{$block-name}__inner {
+    display: flex;
+    align-items: center;
+  }
+
+  #{$block-name}__right {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: 15px;
+
+    .simple-menu,
+    .feedback {
+      margin-right: 20px;
+
+      @media (min-width: $screen-xxl) {
+        margin-right: 70px;
+      }
+
+      @media (min-width: $screen-xl) {
+        margin-right: 55px;
+      }
+
+      @media (min-width: $screen-lg) {
+        margin-right: 40px;
+      }
+
+      @media (min-width: $screen-md) {
+        margin-right: 30px;
+      }
+    }
+
+    .feedback,
+    .dropdown {
+      @media (max-width: ($screen-sm - 1)) {
+        display: none;
+      }
+    }
+
+    .simple-menu {
+      @media (min-width: $screen-lg) {
+        display: flex;
+      }
+
+      @media (max-width: ($screen-lg - 1)) {
+        display: none;
+      }
+    }
+
+    .burger {
+      display: inline-flex;
+
+      @media (min-width: $screen-lg) {
+        display: none;
+      }
+
+      @media (min-width: $screen-md) {
+        margin-right: 30px;
+      }
+
+      @media (min-width: $screen-sm) {
+        margin-right: 20px;
+      }
+    }
+  }
 }

src/img/arr-dwn--orange.svg

+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.125 6.25L5 3.125L1.875 6.25" stroke="#F36601" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/img/arr-dwn.svg

+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.125 3.75L5 6.875L1.875 3.75" stroke="#1B1B1B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/js/script.js

 // /* global document console */
 
-// import ready from 'Utils/documentReady.js';
-// import getScrollSize from 'Utils/getScrollSize.js';
-
-// ready(function() {
-//   console.log('DOM героически построен!');
-//   // Добавление кастомного свойства с системной шириной скролла
-//   document.documentElement.style.setProperty('--css-scroll-size', `${getScrollSize()}px`);
-// });
-
-// import $ from 'jquery'; // Перед использованием установить как зависимость
-// $(function() {
-//   console.log('jQuery героически сработал!');
-// });
+import ready from 'Utils/documentReady.js';
+import getScrollSize from 'Utils/getScrollSize.js';
+
+ready(function() {
+  const body = document.querySelector('body');
+
+  console.log('DOM героически построен!');
+  // Добавление кастомного свойства с системной шириной скролла
+  document.documentElement.style.setProperty('--css-scroll-size', `${getScrollSize()}px`);
+
+  const stickyHeader = document.querySelector('.page-header');
+  const headerOffset = findOffset(stickyHeader);
+  const headerOriginalHeight = stickyHeader.clientHeight;
+
+  document.documentElement.style.setProperty('--header-bottom', `${stickyHeader.getBoundingClientRect().bottom}px`);
+  
+  window.addEventListener('scroll', () => {
+    const bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  
+    if (bodyScrollTop > headerOffset.top) {
+      body.style.paddingTop = `${headerOriginalHeight}px`;
+      stickyHeader.classList.add('fixed');
+    } else {
+      body.style.paddingTop = `0`;
+      stickyHeader.classList.remove('fixed');
+    }
+
+    document.documentElement.style.setProperty('--header-bottom', `${stickyHeader.getBoundingClientRect().bottom}px`);
+  });
+
+  function findOffset(element) {
+    let top = 0, left = 0;
+  
+    do {
+      top += element.offsetTop  || 0;
+      left += element.offsetLeft || 0;
+      element = element.offsetParent;
+    } while(element);
+  
+    return {
+      top: top,
+      left: left
+    };
+  }
+
+  // Mobile menu
+  const mobMenu = document.querySelector(".mob-menu");
+
+  if (mobMenu) {
+    mobMenu.addEventListener("click", (e) => {
+      if (e.target.classList.contains("mob-menu__close")) {
+        closeMobMenu();
+      }
+    });
+  }
+});
+
+function closeMobMenu() {
+  const body = document.querySelector('body');
+  const mobMenuTrigger = document.querySelector('.page-header .burger');
+
+  mobMenuTrigger.classList.remove('burger--close');
+  mobMenu.classList.remove('active');
+  body.classList.remove('of-h', 'mob-menu-active');
+}
+
+import $ from 'jquery'; // Перед использованием установить как зависимость
+
+$(function() {
+  console.log('jQuery героически сработал!');
+
+  $('.move-to').click( function(){
+    var scroll_el = $(this).children('a').attr('href');
+    var body = $('body');
+
+    if(scroll_el == undefined) {
+      scroll_el = $(this).attr('href');
+    }
+
+    if ($(scroll_el).length != 0) {
+      $('html, body').animate({ scrollTop: $(scroll_el).offset().top - 90 }, 850);
+      closeMobMenu();
+    }
+
+    return false;
+  });
+});

src/pages/404.pug

@@ -7,9 +7,6 @@ block meta
 //- block append head
 //-   link(rel='stylesheet', href='css/some.css')
 
-block nav
-  +main-nav('-1')
-
 block content
   h1 Error 404
   p Page not found.

src/pages/index.pug

@@ -7,14 +7,125 @@ block meta
 //- block append head
 //-   link(rel='stylesheet', href='css/some.css')
 
-block nav
-  +main-nav('10')
-
 block content
-  h1 Заголовок
-  p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
 
-  p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium illo earum ipsa dicta? Harum architecto incidunt earum beatae eius rem nulla ab blanditiis placeat voluptas. Hic velit praesentium odit eius!
+  section.big-text
+    .big-text__inner.container
+      p The INTERSTATE SUPPLIES D.O.O. company, as an independent solution provider and contractor, can supply individual machines, industrial equipment, combined systems and complete solutions tailored to your individual requirements. 
+
+  section.banner
+    .banner__inner.container
+      .banner__img
+        picture
+          source(media="(min-width: 992px)", srcset="/img/banner-pc.jpg")
+          img(src="/img/banner-tablet.jpg", alt="img alt", loading="lazy")
+
+  section#about-us.about-us
+    .about-us__inner.container
+      .about-us__first
+        h2.def-title About us
+      .about-us__second
+        .text-flow 
+          p It is not easy to find suitable suppliers. And finding reliable supplies in the perspective is the same challenging. But by good fortune we work in the field of individual industrial needs of our customers and use our extensive international contacts in order to select a high-quality technological solution for your particular task. 
+          p The INTERSTATE SUPPLIES D.O.O. company, as an independent solution provider and contractor, can supply individual machines, industrial equipment, combined systems and complete solutions tailored to your individual requirements. 
+          p With our extensive network of first class suppliers, knowledge of local market trends and experience in a variety of industries, we are a strong and competent partner to help bring your projects to life. 
+
+  section#services.big-list
+    .big-list__inner.container 
+      ul.big-list__block
+        li.big-list__b-item
+          .big-list__b-item-first
+            .big-list__b-item-img 
+              img(src="/img/l-img-1.jpg", alt="img desc")
+
+          .big-list__b-item-second
+            span.big-list__b-item-number
+            h3.big-list__b-item-title Machinery and industrial equipment 
+            .text-flow 
+              p INTERSTATE SUPPLIES D.O.O. is an independent industrial solutions provider. We focus on individual machines, industrial equipment, combined systems and complete solutions delivery by the cost-benefit analysis, also we upgrade the existing facilities to enhance and maximize the performance. 
+        
+        li.big-list__b-item
+          .big-list__b-item-first
+            .big-list__b-item-img 
+              img(src="/img/l-img-2.jpg", alt="img desc")
+
+          .big-list__b-item-second
+            span.big-list__b-item-number
+            h3.big-list__b-item-title Manufacturing Equipment 
+            .text-flow 
+              p Regardless of the task, we will find the most suitable equipment to increase the efficiency of your production. We are committed to delivery of high quality machinery and equipment produced by our partners – internationally renowned machine manufacturing company.
+
+        li.big-list__b-item
+          .big-list__b-item-first
+            .big-list__b-item-img 
+              img(src="/img/l-img-3.jpg", alt="img desc")
+
+          .big-list__b-item-second
+            span.big-list__b-item-number
+            h3.big-list__b-item-title Processing lines  
+            .text-flow 
+              p Each specific piece of equipment is effective only when it is part of a complete technological line. Our task is the successful integration of our equipment into your existing production. We are focused on creating efficient and automated processes to increase productivity and achieve consistently high product quality. 
+
+        li.big-list__b-item
+          .big-list__b-item-first
+            .big-list__b-item-img 
+              img(src="/img/l-img-4.jpg", alt="img desc")
+
+          .big-list__b-item-second
+            span.big-list__b-item-number
+            h3.big-list__b-item-title Commercial Licensing and Consulting  
+            .text-flow 
+              p Using and absorbing the latest technologies is essential to staying competitive in business.
+              p For various products, INTERSTATE SUPPLIES D.O.O. offers laboratory and pilot testing of raw materials and formulations. We also cooperate with design centers and universities across the borders to stay abreast of the latest market developments and investigations in new technologies. 
+              p For manufacturing finished, semi-finished products, or fine chemicals, we offer commercial licensing, consisting of a package of basic design, technical services, and comprehensive start-up and support of further production. 
+
+        li.big-list__b-item
+          .big-list__b-item-first
+            .big-list__b-item-img 
+              img(src="/img/l-img-5.jpg", alt="img desc")
+
+          .big-list__b-item-second
+            span.big-list__b-item-number
+            h3.big-list__b-item-title Consumables and raw materials 
+            .text-flow 
+              p The non-stop operation of a manufacturing facility always depends on the quality of the stock and raw material applied in production: this is the only way we can guarantee that the product is manufactured to the highest standards. 
+              p Once your plant is up and running, we proceed with our support as a supplier of consumables and raw materials necessary for manufacturing. 
+              p Irrespective of whether you require the excipients, catalysts or other specific ingredients or materials, we are ready to provide you with our services in this area. Using our wide network of specialist providers, we can guarantee the high consistent quality of the delivered goods, openning the manufacturer a possibility to concentrate on manufacturing the premium class products. 
+
+  section.form-block.container 
+    .form-block__inner
+      .form-block__first
+        h2.def-title Any questions? <br> Contact us!
+
+      .form-block__second
+        form(action="", method="post") 
+          +field-text({
+            helpText: 'Подсказка',
+            mods: '',
+            attrs: {
+              name: 'name',
+              placeholder: 'Name',
+            }
+          })
+          +field-text({
+            helpText: 'Подсказка',
+            mods: '',
+            attrs: {
+              name: 'email',
+              placeholder: 'E-mail',
+            }
+          })
+          +field-text({
+            helpText: 'Подсказка',
+            mods: '',
+            attrs: {
+              name: 'phone',
+              placeholder: 'Phone',
+            }
+          })
+          +btn('contact us', 'ico')(type="button")
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 16H27" stroke="#F36601" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 7L27 16L18 25" stroke="#F36601" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+
 
 //- block footer
 //-   p footer

src/scss/mixins/form-mixins.scss

@@ -4,20 +4,24 @@
   display: inline-block;
   vertical-align: middle;
   width: 100%;
-  min-height: calc(#{$line-height}em + #{$field-padding-vertical} + #{$field-padding-vertical} + 2px); // Привет, IE
+  // min-height: calc(#{$line-height}em + #{$field-padding-vertical} + #{$field-padding-vertical} + 2px);
   margin: 0;
-  border: 1px solid $border-color;
+  border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: $border-radius;
-  padding: $field-padding-vertical  $field-padding-horizontal;
+  padding: 18px 20px;
   line-height: $line-height;
   font-size: 1em;
   font-family: inherit;
-  background-color: #fff;
+  background-color: transparent;
   -moz-appearance: textfield; // stylelint-disable-line
   appearance: textfield;
+  transition: border-color $transition-time;
+  color: #fff;
 
   &:focus {
-    @include field-focus;
+    outline: 0;
+    border-color: #ffffff;
+    // @include field-focus;
   }
 
   &[disabled],
@@ -33,17 +37,16 @@
     -webkit-appearance: none; // stylelint-disable-line  property-no-vendor-prefix
   }
 
-  &[type='color'] {
+  &[type="color"] {
     padding: 0;
   }
 
   &::placeholder {
-    color: $text-color-muted;
+    color: #fff;
     opacity: 1;
   }
 }
 
-
 @mixin field-help-text {
   display: block;
   padding-top: 0.4em;
@@ -51,18 +54,17 @@
   line-height: 1.2em;
   color: $text-color-muted;
 
-  &:empty { // stylelint-disable-line
+  &:empty {
+    // stylelint-disable-line
     display: none;
   }
 }
 
-
 @mixin field-focus {
   outline: 0;
   box-shadow: 0 0 0 2px rgba($color-main, $opacity);
 }
 
-
 @mixin field-name {
   display: block;
   margin-bottom: 0.4em;

src/scss/variables.scss

@@ -17,13 +17,16 @@ $color-success:               hsl(120, 39%, 54%);
 $color-danger: hsl(2, 64%, 58%);
 $color-warning: hsl(35, 84%, 62%);
 
+$color-1: #f36601;
+$color-1-1: #d35800;
+$color-2: #1b1b1b;
+$color-3: #303030;
+
 $color-vk: #4a76a8;
 $color-fb: #4267b2;
 $color-tw: #40a2f5;
 $color-gh: #24292e;
 
-
-
 // Семантические цвета
 
 $text-color: $gray-darkest;
@@ -35,11 +38,9 @@ $link-color--hover:           darken($color-main, 15%);
 
 $border-color: $gray-lighten;
 
-
-
 // Базовая типографика
 
-$font-size:                   16px;
+$font-size: 18px;
 
 $font-size-h1: 40px;
 $font-size-h2: 32px;
@@ -50,46 +51,41 @@ $font-size-h6:                16px;
 
 $font-size-sm: 0.75em; // 12px от 16px
 
-$line-height:                 1.5;
+$line-height: 160%;
 
 $typo-margin-vertical: 1em;
 
-$font-family:                 -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-$font-family--monospace:     SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family: "Manrope", sans-serif;
+$font-family--monospace: "SFMono-Regular", Menlo, Monaco, Consolas,
+  Liberation Mono, "Courier New", monospace;
 // Georgia, Times New Roman, Times, serif
 
-
-
 // Ширины
 
 $screen-xs: 0;
 $screen-sm: 480px;
-$screen-md:                   768px;
-$screen-lg:                   992px;
-$screen-xl:                   1200px;
-$screen-xxl:                  1800px;
+$screen-md: 798px;
+$screen-lg: 1022px;
+$screen-xl: 1230px;
+$screen-xxl: 1670px;
 
 $container-sm: 100%;
 $container-md: 100%;
-$container-lg:                $screen-lg - 30;
-$container-xl:                $screen-xl - 30;
-$container-xxl:               $screen-xxl - 30;
-
-
+$container-lg: $screen-lg + 30;
+$container-xl: $screen-xl + 30;
+$container-xxl: $screen-xxl + 30;
 
 // Модульная сетка
 
 $grid-columns: 12;
 $grid-gutter-width: 30px;
 
-
-
 // Разное
 
 $field-padding-vertical: 5px;
 $field-padding-horizontal: 12px;
 
-$border-radius:               3px;
+$border-radius: 8px;
 $opacity: 0.7;
 $transition-time: 0.3s;
 $shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);