сделал верстку lang и mini-profile

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
+    --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 */

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 */
 
 
 /* писать сюда... */

assets/img/svg/main/arrow-black.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L5 3.93934L8.46967 0.46967C8.76256 0.176777 9.23744 0.176777 9.53033 0.46967C9.82322 0.762563 9.82322 1.23744 9.53033 1.53033L5.53033 5.53033C5.23744 5.82322 4.76256 5.82322 4.46967 5.53033L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#333333"/>
+</svg>

assets/img/svg/main/arrow-selected.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 0.292893C16.0976 0.683417 16.0976 1.31658 15.7071 1.70711L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071L0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289C0.683417 5.90237 1.31658 5.90237 1.70711 6.29289L5 9.58579L14.2929 0.292893C14.6834 -0.0976311 15.3166 -0.0976311 15.7071 0.292893Z" fill="url(#paint0_radial_4_10214)"/>
+<defs>
+<radialGradient id="paint0_radial_4_10214" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.9562 -7.00625) rotate(143.344) scale(34.5677 45.2811)">
+<stop stop-color="#0F5881"/>
+<stop offset="0.512169" stop-color="#1EA49C"/>
+<stop offset="0.807073" stop-color="#76CE75"/>
+<stop offset="0.911458" stop-color="#ECF39F"/>
+</radialGradient>
+</defs>
+</svg>

assets/img/svg/mini-profile/basket.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 3.53846C11.3616 3.53846 10.7499 3.78159 10.2988 4.21437C9.84778 4.64715 9.59439 5.23412 9.59439 5.84615V7.12821H14.4045V5.84615C14.4045 5.23412 14.1511 4.64715 13.7001 4.21437C13.2491 3.78159 12.6373 3.53846 11.9995 3.53846ZM16.0079 7.12821V5.84615C16.0079 4.82609 15.5856 3.84781 14.8339 3.12651C14.0821 2.40522 13.0626 2 11.9995 2C10.9364 2 9.91679 2.40522 9.16506 3.12651C8.41333 3.84781 7.99102 4.82609 7.99102 5.84615V7.12821H5.93986M7.99102 8.66667H5.93976C5.74711 8.66665 5.55664 8.7066 5.38159 8.78378C5.20654 8.86097 5.05095 8.97356 4.9255 9.11385C4.80004 9.25413 4.70769 9.41879 4.65477 9.59653C4.60186 9.77423 4.58961 9.9608 4.61887 10.1435C4.61886 10.1434 4.61888 10.1435 4.61887 10.1435L5.96036 18.5045C6.04768 19.0493 6.33539 19.5463 6.77139 19.9052C7.20738 20.2642 7.76287 20.4615 8.33735 20.4615C8.33734 20.4615 8.33736 20.4615 8.33735 20.4615H15.6616C16.2362 20.4617 16.7921 20.2644 17.2283 19.9055C17.6645 19.5465 17.9523 19.0496 18.0396 18.5046L19.3811 10.1436C19.3811 10.1436 19.3811 10.1435 19.3811 10.1436C19.4104 9.96093 19.3981 9.77423 19.3452 9.59653C19.2923 9.41879 19.1999 9.25413 19.0745 9.11385C18.949 8.97356 18.7935 8.86097 18.6184 8.78378C18.4433 8.7066 18.253 8.66665 18.0603 8.66667H16.0079V10.9744C16.0079 11.3992 15.649 11.7436 15.2062 11.7436C14.7635 11.7436 14.4045 11.3992 14.4045 10.9744V8.66667H9.59439V10.9744C9.59439 11.3992 9.23547 11.7436 8.79271 11.7436C8.34995 11.7436 7.99102 11.3992 7.99102 10.9744V8.66667ZM16.0079 7.12821H18.0601C18.0601 7.12821 18.0602 7.12821 18.0601 7.12821C18.4839 7.12817 18.9028 7.21606 19.2879 7.38586C19.673 7.55567 20.0153 7.80338 20.2913 8.11201C20.5673 8.42063 20.7705 8.78288 20.8869 9.1739C21.0033 9.56493 21.0303 9.97549 20.9658 10.3774L19.6244 18.7385C19.6243 18.7385 19.6244 18.7384 19.6244 18.7385C19.4788 19.6467 18.9991 20.475 18.2722 21.0732C17.5453 21.6715 16.6192 22.0002 15.6616 22C15.6615 22 15.6616 22 15.6616 22H8.33735C7.37986 22 6.45398 21.6711 5.72732 21.0728C5.00069 20.4746 4.52121 19.6466 4.37565 18.7386C4.37565 18.7385 4.37566 18.7386 4.37565 18.7386L3.03416 10.3776C2.96974 9.97561 2.99665 9.56493 3.11308 9.1739C3.22951 8.78288 3.43268 8.42063 3.70868 8.11201C3.98468 7.80338 4.32697 7.55567 4.71208 7.38586C5.09717 7.21606 5.51606 7.12817 5.93986 7.12821" fill="#333333"/>
+</svg>

assets/img/svg/mini-profile/profile.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64124 3.64124C9.53204 2.75044 10.7402 2.25 12 2.25C13.2598 2.25 14.468 2.75044 15.3588 3.64124C16.2496 4.53204 16.75 5.74022 16.75 7C16.75 8.25978 16.2496 9.46796 15.3588 10.3588C14.468 11.2496 13.2598 11.75 12 11.75C10.7402 11.75 9.53204 11.2496 8.64124 10.3588C7.75044 9.46796 7.25 8.25978 7.25 7C7.25 5.74022 7.75044 4.53204 8.64124 3.64124ZM12 3.75C11.138 3.75 10.3114 4.09241 9.7019 4.7019C9.09241 5.3114 8.75 6.13805 8.75 7C8.75 7.86195 9.09241 8.6886 9.7019 9.2981C10.3114 9.90759 11.138 10.25 12 10.25C12.862 10.25 13.6886 9.90759 14.2981 9.2981C14.9076 8.6886 15.25 7.86195 15.25 7C15.25 6.13805 14.9076 5.3114 14.2981 4.7019C13.6886 4.09241 12.862 3.75 12 3.75Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.75C9.13805 15.75 8.3114 16.0924 7.7019 16.7019C7.09241 17.3114 6.75 18.138 6.75 19V21C6.75 21.4142 6.41421 21.75 6 21.75C5.58579 21.75 5.25 21.4142 5.25 21V19C5.25 17.7402 5.75044 16.532 6.64124 15.6412C7.53204 14.7504 8.74022 14.25 10 14.25H14C15.2598 14.25 16.468 14.7504 17.3588 15.6412C18.2496 16.532 18.75 17.7402 18.75 19V21C18.75 21.4142 18.4142 21.75 18 21.75C17.5858 21.75 17.25 21.4142 17.25 21V19C17.25 18.138 16.9076 17.3114 16.2981 16.7019C15.6886 16.0924 14.862 15.75 14 15.75H10Z" fill="#333333"/>
+</svg>

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

del.html

@@ -0,0 +1,12 @@
+<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
+<form class="form" method="post" action="/send-telegram.php">
+    <div class="form__item">
+        <input class="form__input" type="text" name="name" required>
+        <label class="form__label">Ваше имя</label>
+    </div>
+    <div class="form__item">
+        <input class="form__input" type="text" name="phone" required>
+        <label class="form__label">Номер телефона</label>
+    </div>
+    <input class="form__input btn" type="submit" value="Отправить">
+</form>

ui_kit.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UI kit</title>
-    <link rel="stylesheet" type="text/css" href="/assets/css/style-core.css">
+    <link rel="stylesheet" type="text/css" href="/assets/css/gp-style-core.css">
 </head>
 <style>
     /* Стили для выравнивания UI-элеметнов для данной страницы */
@@ -28,12 +28,73 @@
     /* ВСЕ ОСТАЛЬНЫЕ СТИЛИ ПИШЕМ В style-core.css!!! */
 </style>
 <body class="ui">
-    <div class="ui__ui-wrapper">
+    <!-- <div class="lang">
-        <div class="ui__item"></div>
+        <button class="lang__open">
-        <div class="ui__item"></div>
+            RU
-        <div class="ui__item"></div>
+        </button>
-        <!-- ... -->
+        <div class="lang__content">
-        <div class="ui__item"></div>
+            <ul class="lang__list">
+                <li class="lang__item active">
+                    <a href="#" class="lang__link">
+                        RU
+                    </a>
+                </li>
+                <li class="lang__item">
+                    <a href="#" class="lang__link">
+                        EN
+                    </a>
+                </li>
+                <li class="lang__item">
+                    <a href="#" class="lang__link">
+                        AR
+                    </a>
+                </li>
+            </ul>
+        </div>
+            
+    </div> -->
+
+    <div class="mini-profile">
+        <div class="mini-profile__item">
+            <div class="lang">
+                <button class="lang__open">
+                    RU
+                </button>
+                <div class="lang__content">
+                    <ul class="lang__list">
+                        <li class="lang__item active">
+                            <a href="#" class="lang__link">
+                                RU
+                            </a>
+                        </li>
+                        <li class="lang__item">
+                            <a href="#" class="lang__link">
+                                EN
+                            </a>
+                        </li>
+                        <li class="lang__item">
+                            <a href="#" class="lang__link">
+                                AR
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                    
+            </div>
+        </div>
+        <div class="mini-profile__item">
+            <a href="" class="mini-profile__button">
+                <img src="assets/img/svg/mini-profile/profile.svg" alt="" class="mini-profile__icon">
+            </a>
+        </div>
+        <div class="mini-profile__item">
+            <button class="mini-profile__button">
+                <img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
+            </button>
+        </div>
     </div>
+    
+
+    <script src="/assets/js/gp-main.js"></script>
 </body>
 </html>