diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 5f160ef..cb506b3 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -1,16 +1,136 @@
/* Переменные, шрифты, UI kit */
+@font-face {
+ font-family: "Proxima Nova";
+ src: local("Proxima Nova Bold"),
+ local("ProximaNova-Bold"),
+ url("/assets/fonts/ProximaNova-Bold.woff2") format("woff2"),
+ url("/assets/fonts/ProximaNova-Bold.woff") format("woff"),
+ url("/assets/fonts/ProximaNova-Bold.ttf") format("ttf");
+ font-weight: 700;
+}
+@font-face {
+ font-family: "Proxima Nova";
+ src: local("Proxima Nova Semibold"),
+ local("ProximaNova-Semibold"),
+ url("/assets/fonts/ProximaNova-Semibold.woff2") format("woff2"),
+ url("/assets/fonts/ProximaNova-Semibold.woff") format("woff"),
+ url("/assets/fonts/ProximaNova-Semibold.ttf") format("ttf");
+ font-weight: 600;
+}
+@font-face {
+ font-family: "Proxima Nova";
+ src: local("Proxima Nova Regular"),
+ local("ProximaNova-Regular"),
+ url("/assets/fonts/ProximaNova-Regular.woff2") format("woff2"),
+ url("/assets/fonts/ProximaNova-Regular.woff") format("woff"),
+ url("/assets/fonts/ProximaNova-Regular.ttf") format("ttf");
+ font-weight: 400;
+}
-/*
+@font-face {
+ font-family: "Proxima Nova";
+ src: local("Proxima Nova Light"),
+ local("ProximaNova-Light"),
+ url("/assets/fonts/ProximaNova-Light.woff2") format("woff2"),
+ url("/assets/fonts/ProximaNova-Light.woff") format("woff"),
+ url("/assets/fonts/ProximaNova-Light.ttf") format("ttf");
+ font-weight: 300;
+}
-ШАБЛОН использования глобальных переменных:
+
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
:root {
- --main-text: #e1667c;
- --main-color: #8da6cb;
- --font-family: "Craftwork Grotesk", sans-serif;
+ --font-family: "Proxima Nova", sans-serif;
+
+ --red: #d3241d;
+ --blood: #ae0b05;
+
+ --background-main: #111114;
+ --background-grey: #2a2a2d;
+ --background-grey-hover: #46464a;
+
+ --text-white: #fff;
}
-*/
+body{
+ background-color: var(--background-main);
+
+ font-family: var(--font-family);
+}
+
+/* components */
+.btn-social{
+ margin-left: 16px;
+
+ width: 40px;
+ aspect-ratio: 1;
+
+ padding: 8px;
+
+ display: flex;
+ align-items: center;
+
+ border-radius: 4px;
+
+ background-color: var(--background-grey);
+
+ transition: background-color .3s;
+}
+.btn-social:first-child{
+ margin-left: 0;
+}
+.btn-social:hover{
+ background-color: var(--background-grey-hover);
+}
+.btn-social:active{
+ background-color: var(--background-grey-hover);
+}
+.btn-social> img{
+ width: 24px;
+ aspect-ratio: 1;
+}
+
+.btn-big{
+ display: block;
+
+ padding: 22px 32px;
+
+ font-weight: 400;
+ font-size: 16px;
+ text-transform: uppercase;
+ color: var(--text-white);
+ text-decoration: none;
+ text-align: center;
+
+ border-radius: 4px;
+}
+.btn-big--border{
+ padding: 21px 32px;
+
+ border: 1px solid;
+}
+.btn-big--border--blood{
+ border-color: var(--blood);
+}
+
+
+.btn--100-per{
+ width: 100%;
+}
+/* components */
+
+/* header */
+.header__logo{
+ background-image: url(/assets/img/main/logo.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+/* header */
\ No newline at end of file
diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css
index 0cf51d3..ea762e4 100644
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -1,5 +1,158 @@
/* Стили для мобильных устройств */
@media only screen and (max-width: 576px) {
+/* header */
+.header{
+ padding: 24px 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.header__logo{
+ width: 74px;
+ height: 64px;
+}
+
+.header__phone{
+ display: flex;
+ align-items: center;
+}
+.header-phone__item{
+ margin-left: 24px;
+
+ width: 32px;
+ height: 32px;
+
+ transition: opacity .3s;
+}
+.header-phone__item > img{
+ width: 100%;
+ height: 100%;
+}
+.header-phone__item:first-child{
+ margin-left: 0;
+}
+.header-phone__item:active{
+ opacity: .8;
+}
+
+.button-menu{
+ width: 100%;
+ height: 100%;
+
+ position: relative;
+
+ overflow: hidden;
+}
+.button-menu__open{
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100%;
+
+ transition: opacity .3s;
+}
+.button-menu__close{
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100%;
+
+ transition: opacity .3s;
+ opacity: 0;
+}
+.button-menu.open .button-menu__open{
+ opacity: 0;
+}
+.button-menu.open .button-menu__close{
+ opacity: 1;
+}
+
+.phone-menu{
+ position: absolute;
+ top: 112px;
+ right: 0;
+ left: 0;
+
+ width: 100%;
+}
+.phone-menu__block-content{
+ /* height: 0; */
+ /* overflow: hidden; */
+}
+.phone-menu__content{
+ padding: 0 16px 40px 16px;
+
+}
+.phone-menu__block{
+ margin-top: 32px;
+}
+.phone-menu__title{
+ font-weight: 700;
+ font-size: 32px;
+ color: var(--text-white);
+}
+.phone-menu__list{
+ list-style-type: none;
+
+ font-weight: 400;
+ font-size: 14px;
+ text-transform: uppercase;
+ color: var(--text-white);
+}
+.phone-menu__list a{
+ font-weight: 400;
+ font-size: 14px;
+ text-transform: uppercase;
+ color: var(--text-white);
+
+ text-decoration: none;
+}
+.phone-menu__list li{
+ margin-top: 24px;
+}
+.phone-menu__list li:first-child{
+ margin-top: 0;
+}
+.phone-menu--next{
+ display: block;
+
+ background-image: url(/assets/img/icon/arrow-right.svg);
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+
+.phone-menu__text{
+ margin-top: 24px;
+
+ display: block;
+
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--text-white);
+}
+.phone-menu__text:first-child{
+ margin-top: 0;
+}
+.phone-menu__text > a {
+ color: var(--text-white);
+}
+.phone-menu__text--no-line{
+ text-decoration: none;
+}
+
+.phone-social{
+ margin-top: 24px;
+
+ display: flex;
+ align-items: center;
+}
+/* header */
}
\ No newline at end of file
diff --git a/assets/fonts/ProximaNova-Bold.ttf b/assets/fonts/ProximaNova-Bold.ttf
new file mode 100644
index 0000000..497a51a
Binary files /dev/null and b/assets/fonts/ProximaNova-Bold.ttf differ
diff --git a/assets/fonts/ProximaNova-Bold.woff b/assets/fonts/ProximaNova-Bold.woff
new file mode 100644
index 0000000..3fdcebe
Binary files /dev/null and b/assets/fonts/ProximaNova-Bold.woff differ
diff --git a/assets/fonts/ProximaNova-Bold.woff2 b/assets/fonts/ProximaNova-Bold.woff2
new file mode 100644
index 0000000..6c3d34e
Binary files /dev/null and b/assets/fonts/ProximaNova-Bold.woff2 differ
diff --git a/assets/fonts/ProximaNova-Light.ttf b/assets/fonts/ProximaNova-Light.ttf
new file mode 100644
index 0000000..d9fb8b8
Binary files /dev/null and b/assets/fonts/ProximaNova-Light.ttf differ
diff --git a/assets/fonts/ProximaNova-Light.woff b/assets/fonts/ProximaNova-Light.woff
new file mode 100644
index 0000000..d473a0c
Binary files /dev/null and b/assets/fonts/ProximaNova-Light.woff differ
diff --git a/assets/fonts/ProximaNova-Light.woff2 b/assets/fonts/ProximaNova-Light.woff2
new file mode 100644
index 0000000..bc214d3
Binary files /dev/null and b/assets/fonts/ProximaNova-Light.woff2 differ
diff --git a/assets/fonts/ProximaNova-Regular.ttf b/assets/fonts/ProximaNova-Regular.ttf
new file mode 100644
index 0000000..928acd6
Binary files /dev/null and b/assets/fonts/ProximaNova-Regular.ttf differ
diff --git a/assets/fonts/ProximaNova-Regular.woff b/assets/fonts/ProximaNova-Regular.woff
new file mode 100644
index 0000000..68b0f7f
Binary files /dev/null and b/assets/fonts/ProximaNova-Regular.woff differ
diff --git a/assets/fonts/ProximaNova-Regular.woff2 b/assets/fonts/ProximaNova-Regular.woff2
new file mode 100644
index 0000000..e2ac94c
Binary files /dev/null and b/assets/fonts/ProximaNova-Regular.woff2 differ
diff --git a/assets/fonts/ProximaNova-Semibold.ttf b/assets/fonts/ProximaNova-Semibold.ttf
new file mode 100644
index 0000000..083c3dc
Binary files /dev/null and b/assets/fonts/ProximaNova-Semibold.ttf differ
diff --git a/assets/fonts/ProximaNova-Semibold.woff b/assets/fonts/ProximaNova-Semibold.woff
new file mode 100644
index 0000000..e9af9f6
Binary files /dev/null and b/assets/fonts/ProximaNova-Semibold.woff differ
diff --git a/assets/fonts/ProximaNova-Semibold.woff2 b/assets/fonts/ProximaNova-Semibold.woff2
new file mode 100644
index 0000000..c5ee07d
Binary files /dev/null and b/assets/fonts/ProximaNova-Semibold.woff2 differ
diff --git a/assets/img/icon/arrow-right.svg b/assets/img/icon/arrow-right.svg
new file mode 100644
index 0000000..1c98265
--- /dev/null
+++ b/assets/img/icon/arrow-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/icon/close.svg b/assets/img/icon/close.svg
new file mode 100644
index 0000000..397ba4c
--- /dev/null
+++ b/assets/img/icon/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/icon/device-phone.svg b/assets/img/icon/device-phone.svg
new file mode 100644
index 0000000..7afc46e
--- /dev/null
+++ b/assets/img/icon/device-phone.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/icon/menu-hamburger.svg b/assets/img/icon/menu-hamburger.svg
new file mode 100644
index 0000000..9dbd145
--- /dev/null
+++ b/assets/img/icon/menu-hamburger.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/icon/search.svg b/assets/img/icon/search.svg
new file mode 100644
index 0000000..43f29ff
--- /dev/null
+++ b/assets/img/icon/search.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/main/logo.svg b/assets/img/main/logo.svg
new file mode 100644
index 0000000..afebb7f
--- /dev/null
+++ b/assets/img/main/logo.svg
@@ -0,0 +1,23 @@
+
diff --git a/assets/img/social/telegram.svg b/assets/img/social/telegram.svg
new file mode 100644
index 0000000..c3696f3
--- /dev/null
+++ b/assets/img/social/telegram.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/social/whatsapp.svg b/assets/img/social/whatsapp.svg
new file mode 100644
index 0000000..233c20b
--- /dev/null
+++ b/assets/img/social/whatsapp.svg
@@ -0,0 +1,3 @@
+
diff --git a/index.html b/index.html
index 3f280c3..7c0695f 100644
--- a/index.html
+++ b/index.html
@@ -48,20 +48,76 @@
+