diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/assets/img/circle.svg b/src/assets/img/circle.svg
new file mode 100644
index 0000000..0c0a815
--- /dev/null
+++ b/src/assets/img/circle.svg
@@ -0,0 +1,15 @@
+
\ No newline at end of file
diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg
new file mode 100644
index 0000000..9fb47f8
--- /dev/null
+++ b/src/assets/img/logo.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/assets/scss/components/main-menu.scss b/src/assets/scss/components/main-menu.scss
new file mode 100644
index 0000000..85a5dc5
--- /dev/null
+++ b/src/assets/scss/components/main-menu.scss
@@ -0,0 +1,33 @@
+/*-------------- main-menu -----------------*/
+.main-menu{
+ &__list,
+ &__item{
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+
+ &__list{
+ display: flex;
+ align-items: center;
+ gap: 2.6041666667vw;
+ }
+
+
+ &__item{
+ font-size: 1.1458333333vw;
+ font-weight: 500;
+ }
+
+ &__link{
+ color: #fff;
+ transition: all .3s ease-in-out;
+ border-bottom: 1px solid hsla(0,0%,100%,0);
+ }
+
+ &__link:hover{
+ border-bottom: 1px solid #fff;
+ color: #fff;
+
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/social.scss b/src/assets/scss/components/social.scss
new file mode 100644
index 0000000..8349bb4
--- /dev/null
+++ b/src/assets/scss/components/social.scss
@@ -0,0 +1,6 @@
+/*-------------- social -----------------*/
+.social{
+ display: flex;
+ align-items: center;
+ gap: 0.5208333333333333vw;
+}
\ No newline at end of file
diff --git a/src/assets/scss/layouts/footer.scss b/src/assets/scss/layouts/footer.scss
index e69de29..5d235ef 100644
--- a/src/assets/scss/layouts/footer.scss
+++ b/src/assets/scss/layouts/footer.scss
@@ -0,0 +1,93 @@
+.footer{
+ background: var(--color-primary);
+ color: #fff;
+
+ a:not(.btn){color: #fff;}
+
+ &__main{
+ display: flex;
+ justify-content: space-between;
+ gap: 1.5625vw;
+ padding: 40px 0;
+ }
+
+ &__logo-wrap{
+ display: flex;
+ align-items: center;
+ max-width: 9.479166666666667vw;
+ }
+
+ &__logo{max-width: 9.6875vw;}
+
+ &__slogan{
+ font-size: 0.9375vw;
+ font-weight: 500;
+ }
+
+ .main-menu{
+ margin-top: 2.083333333333333vw;
+ &__list{gap: 1.041666666666667vw;}
+ &__item{font-size: 1.041666666666667vw;}
+ }
+
+ &__bottom{
+ font-size: 0.8333333333333333vw;
+ text-align: center;
+ padding-bottom: 0.2604166666666667vw;
+ }
+
+ &__copyright{font-weight: 500;}
+ &__polit{text-decoration: underline;}
+}
+
+.footer-dev{
+ display: flex;
+ align-items: center;
+ gap: 0.5208333333333333vw;
+ margin-top: 1.5625vw;
+
+ &__img{
+ flex-shrink: 0;
+ width: 2.604166666666667vw;
+ }
+
+ &__content{line-height: 1.1;}
+ &__label{font-size: 0.5583333333333333vw;}
+
+ &__text{
+ font-size: 0.6916666666666667vw;
+ letter-spacing: .03em;
+ }
+
+ &__phone{
+ margin-top: 0.2604166666666667vw;
+ font-size: 0.6770833333333333vw;
+ font-weight: bold;
+
+ a{color: #fff;}
+ }
+}
+
+.footer-contacts{
+ text-align: right;
+
+ &__title{
+ font-size: 1.145833333333333vw;
+ font-weight: 500;
+ margin-bottom: 0.78125vw;
+ }
+
+ &__item{
+ font-size: 0.9375vw;
+ font-weight: 500;
+ }
+
+ .social{
+ justify-content: flex-end;
+ margin-top: 0.4166666666666667vw;
+
+ .icon{fill: #fff;}
+ }
+
+ .btn{margin-top: 0.78125vw;}
+}
\ No newline at end of file
diff --git a/src/assets/scss/layouts/header.scss b/src/assets/scss/layouts/header.scss
index e69de29..1a448da 100644
--- a/src/assets/scss/layouts/header.scss
+++ b/src/assets/scss/layouts/header.scss
@@ -0,0 +1,22 @@
+.header{
+ background: var(--color-primary);
+ padding: 1.145833333333333vw 0;
+
+ &__conent{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2.6041666667vw;
+ color: #fff;
+ }
+
+ &__logo{max-width: 9.6875vw;}
+
+ &__actions{
+ display: flex;
+ align-items: center;
+ gap: 1.0416666667vw;
+
+ .btn{min-width: 9.21875vw;}
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/layouts/main.scss b/src/assets/scss/layouts/main.scss
index 41e434d..3e15337 100644
--- a/src/assets/scss/layouts/main.scss
+++ b/src/assets/scss/layouts/main.scss
@@ -103,6 +103,12 @@ main{
width: 100%;
}
+.st-width{
+ width: 83.3333333333vw;
+ margin-left: auto;
+ margin-right: auto;
+}
+
.btn,
input[type="submit"].btn,
button.btn{
@@ -111,14 +117,12 @@ button.btn{
justify-content: center;
gap: 22px;
height: 2.8645833333vw;
- // min-width: 260px;
background: var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: 8px;
@include font(normal, 500, .9375vw, 1.2, #fff);
text-transform: uppercase;
text-align: center;
- letter-spacing: 2px;
text-decoration: none;
text-align: center;
padding: 0 25px;
@@ -155,6 +159,8 @@ button.btn{
border-color: #fff;
background: #fff;
color: var(--color-primary);
+
+ &:hover{color: var(--color-primary);}
}
}
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index cd00e17..d6ad0a3 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -16,3 +16,5 @@
@import "components/icons";
@import "components/type-icon";
+@import "components/main-menu";
+@import "components/social";
diff --git a/src/assets/svg-icon/ic-telegram.svg b/src/assets/svg-icon/ic-telegram.svg
new file mode 100644
index 0000000..20d1af0
--- /dev/null
+++ b/src/assets/svg-icon/ic-telegram.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/src/assets/svg-icon/ic-twitter.svg b/src/assets/svg-icon/ic-twitter.svg
deleted file mode 100644
index d53f092..0000000
--- a/src/assets/svg-icon/ic-twitter.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
diff --git a/src/assets/svg-icon/ic-vk.svg b/src/assets/svg-icon/ic-vk.svg
new file mode 100644
index 0000000..77fcfce
--- /dev/null
+++ b/src/assets/svg-icon/ic-vk.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/pug/layout/footer.pug b/src/pug/layout/footer.pug
index 3fe5730..44b1f9e 100644
--- a/src/pug/layout/footer.pug
+++ b/src/pug/layout/footer.pug
@@ -1,2 +1,57 @@
footer.footer
- .st-width footer
\ No newline at end of file
+ .st-width
+ .footer__main
+ .footer__info
+ .footer__logo-wrap
+ .footer__logo
+ img(src="assets/img/logo.svg", alt="")
+
+ .footer__slogan Национальный союз мясопереработчиков
+
+ nav.main-menu
+ ul.main-menu__list
+ -
+ var list=[
+ {text:'Главная'},
+ {text:'Новости'},
+ {text:'Участие в НСМ'},
+ {text:'Контакты'},
+ ]
+ each item in list
+ li.main-menu__item
+ a(href="#").main-menu__link= item.text
+
+ .footer-dev
+ .footer-dev__img
+ img(src="assets/img/circle.svg", alt="")
+
+ .footer-dev__content
+ .footer-dev__label Разработка & Дизайн
+ .footer-dev__text Корпоративный маркетинг
+ .footer-dev__phone
+ a(href="tel:+79169881121") +7 (916) 988 11 21
+
+ .footer-contacts
+ .footer-contacts__title Контакты
+
+ .footer-contacts__item
+ a(href="tel:+74956767011") +7 (495) 676-70-11
+
+ .footer-contacts__item
+ a(href="maito:office@nsmrf.ru") office@nsmrf.ru
+
+ .social
+ a(href="#").social__item
+ +svg('ic-telegram','ic-telegram', '1.5625vw', '1.5625vw')
+
+ a(href="#").social__item
+ +svg('ic-vk','ic-vk', '1.5625vw', '1.5625vw')
+
+ a(href="#").btn.btn_white Вступить
+
+ .footer__bottom
+ .footer__copyright © 1997-2023 Национальный союз мясоперерабочиков
+
+ .footer__polit
+ a(href="#") Политика конфинденциальности в отношении пользовательских данных
+
diff --git a/src/pug/layout/header.pug b/src/pug/layout/header.pug
index 04ddb83..1a7380b 100644
--- a/src/pug/layout/header.pug
+++ b/src/pug/layout/header.pug
@@ -1,2 +1,22 @@
header.header
- .st-width header
\ No newline at end of file
+ .st-width
+ .header__conent
+ .header__logo
+ img(src="assets/img/logo.svg", alt="")
+
+ nav.main-menu
+ ul.main-menu__list
+ -
+ var list=[
+ {text:'Главная'},
+ {text:'Новости'},
+ {text:'Вступить в НСМ'},
+ {text:'Контакты'},
+ ]
+ each item in list
+ li.main-menu__item
+ a(href="#").main-menu__link= item.text
+
+ .header__actions
+ a(href="#").btn.btn_white Каталог
+ a(href="#").btn.btn_border Войти
\ No newline at end of file
diff --git a/src/pug/pages/tipografika.pug b/src/pug/pages/tipografika.pug
index 7b36051..43892ea 100644
--- a/src/pug/pages/tipografika.pug
+++ b/src/pug/pages/tipografika.pug
@@ -68,5 +68,10 @@ block content
.type-icon
.type-icon__item
.type-icon__img
- +svg('ic-twitter','ic-twitter', '17', '14')
- .type-icon__name ic-twitter
\ No newline at end of file
+ +svg('ic-telegram','ic-telegram', '1.5625vw', '1.5625vw')
+ .type-icon__name ic-telegram
+
+ .type-icon__item
+ .type-icon__img
+ +svg('ic-vk','ic-vk', '1.5625vw', '1.5625vw')
+ .type-icon__name ic-vk
\ No newline at end of file