diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index d154742..fe472ca 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -1,3 +1,9 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
/* Переменные, шрифты, UI kit */
/*
@@ -83,7 +89,173 @@
/* Глобальные переменные: */
:root {
+ /* fonts */
--font-family: "Craftwork Grotesk", sans-serif;
--second-family: "DIN 2014 Rounded", sans-serif;
- --third-family: "Roboto", sans-serif
-}
\ No newline at end of file
+ --third-family: "Roboto", sans-serif;
+
+ /* color */
+ /* text */
+ --text-white: #fff;
+ --text-black: #121212;
+
+ /* background */
+ --background-white: #fff;
+ --background-black: #121212;
+ --background-grey: #f2f2f2;
+
+ /* gradient */
+ --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%);
+ --gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%);
+ --gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%);
+}
+
+
+/* общие */
+button{
+ cursor: pointer;
+}
+
+
+/* компоненты */
+
+/* lang*/
+.lang{
+ position: relative;
+}
+.lang__open{
+ padding: 12px 15px;
+
+ width: 74px;
+
+ background: none;
+ border: none;
+
+ font-family: var(--font-family);
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 125%;
+
+ text-align: start;
+
+ color: var(--text-black);
+
+ position: relative;
+
+ transition: opacity .2s ease-out;
+}
+.lang__open::before{
+ content: '';
+
+ position: absolute;
+ top: 19.25px;
+ right: 18.25px;
+
+ width: 10px;
+ height: 6px;
+
+ background-image: url(../img/svg/main/arrow-black.svg);
+ background-repeat: no-repeat;
+}
+.lang__open:hover{
+ opacity: .8;
+}
+.lang__content{
+ position: absolute;
+ top: 33px;
+ left: -13px;
+
+ /* height: 0; */
+
+ border-radius: 6px;
+
+ transition: height .2s ease-out;
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+}
+.lang__list{
+ width: 104px;
+
+ padding: 8px;
+
+ list-style-type: none;
+}
+.lang__item{
+ margin-top: 8px;
+}
+.lang__item:first-child{
+ margin-top: 0;
+}
+.lang__link{
+ display: block;
+
+ width: 100%;
+
+ padding: 4px;
+
+ border-radius: 6px;
+
+ font-family: var(--font-family);
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 120%;
+ color: var(--text-black);
+
+ text-decoration: none;
+
+ position: relative;
+
+ transition: background-color .2s ease-out;
+}
+.lang__link:hover,
+.lang__item.active .lang__link{
+ background-color: var(--background-grey);
+}
+.lang__item.active .lang__link::before{
+ content: '';
+
+ position: absolute;
+ top: 10px;
+ right: 8px;
+
+ width: 16px;
+ height: 12px;
+
+ background-image: url(../img/svg/main/arrow-selected.svg);
+}
+/* lang */
+
+
+/* mini-profile */
+.mini-profile{
+ display: flex;
+ align-items: center;
+}
+.mini-profile__item{
+ margin-left: 8px;
+}
+.mini-profile__item:first-child{
+ margin-left: 0;
+}
+.mini-profile__button{
+ display: block;
+
+ padding: 8px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background: none;
+ border: none;
+
+ transition: opacity .2s ease-out;
+}
+.mini-profile__button:hover{
+ opacity: .8;
+}
+.mini-profile__icon{
+ width: 24px;
+ aspect-ratio: 1;
+}
+/* mini-profile */
\ No newline at end of file
diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index 631a1a2..ce0f945 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -1,5 +1,45 @@
/* Основные стили для компьютера */
+.wrapper{
+ margin: 0 auto;
+
+ max-width: 1280px;
+}
+
+/* header start */
+
+.header{
+}
+
+.header__content{
+ height: 72px;
+
+ padding: 16px 24px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header__logo{
+ width: 182px;
+ height: 40px;
+}
+.header__logo-black{
+
+}
+
+.main-menu{
+ display: flex;
+ align-items: center;
+}
+
+
+
+
+
+
+/* header end */
/* писать сюда... */
diff --git a/assets/img/svg/logo/logo-black.svg b/assets/img/svg/logo/logo-black.svg
new file mode 100644
index 0000000..4cd0135
--- /dev/null
+++ b/assets/img/svg/logo/logo-black.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/assets/img/svg/logo/logo-gradient.svg b/assets/img/svg/logo/logo-gradient.svg
new file mode 100644
index 0000000..9054fde
--- /dev/null
+++ b/assets/img/svg/logo/logo-gradient.svg
@@ -0,0 +1,18 @@
+
diff --git a/assets/img/svg/logo/logo-white.svg b/assets/img/svg/logo/logo-white.svg
new file mode 100644
index 0000000..22c4489
--- /dev/null
+++ b/assets/img/svg/logo/logo-white.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/img/svg/main/arrow-black.svg b/assets/img/svg/main/arrow-black.svg
new file mode 100644
index 0000000..38fe433
--- /dev/null
+++ b/assets/img/svg/main/arrow-black.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/svg/main/arrow-selected.svg b/assets/img/svg/main/arrow-selected.svg
new file mode 100644
index 0000000..88d5abb
--- /dev/null
+++ b/assets/img/svg/main/arrow-selected.svg
@@ -0,0 +1,11 @@
+
diff --git a/assets/img/svg/mini-profile/basket.svg b/assets/img/svg/mini-profile/basket.svg
new file mode 100644
index 0000000..fdf6bf8
--- /dev/null
+++ b/assets/img/svg/mini-profile/basket.svg
@@ -0,0 +1,3 @@
+
diff --git a/assets/img/svg/mini-profile/profile.svg b/assets/img/svg/mini-profile/profile.svg
new file mode 100644
index 0000000..6a48c34
--- /dev/null
+++ b/assets/img/svg/mini-profile/profile.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
new file mode 100644
index 0000000..e78085d
--- /dev/null
+++ b/assets/js/gp-main.js
@@ -0,0 +1,27 @@
+'use strict';
+
+// lang start
+
+let lang = document.querySelector('.lang');
+
+
+lang.onclick = function (e) {
+ let target = e.target
+
+ console.log(e);
+
+
+ if (target.classList.contains('lang__open')) {
+
+ }
+
+ // let langOpenButton
+ // let langContent
+ // let langList
+
+ // let height = langList.offsetHeight;
+
+
+}
+
+// lang end
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
deleted file mode 100644
index e69de29..0000000
diff --git a/del.html b/del.html
new file mode 100644
index 0000000..41a30b9
--- /dev/null
+++ b/del.html
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/example/pc-header-white.png b/example/pc-header-white.png
new file mode 100644
index 0000000..89593aa
Binary files /dev/null and b/example/pc-header-white.png differ
diff --git a/example/pc-header.png b/example/pc-header.png
new file mode 100644
index 0000000..0bfdf7f
Binary files /dev/null and b/example/pc-header.png differ
diff --git a/index.html b/index.html
index a83a227..ace3e64 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,50 @@
- test
+
+
+
+
diff --git a/ui_kit.html b/ui_kit.html
index 4196742..6cc6d1c 100644
--- a/ui_kit.html
+++ b/ui_kit.html
@@ -5,7 +5,7 @@
UI kit
-
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+