сделал main-menu

cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 3a612da230
commit f10ce31722
  1. 67
      assets/css/gp-style-core.css
  2. 11
      assets/css/gp-style-desktop.css
  3. 19
      index.html
  4. 24
      ui_kit.html

@ -98,6 +98,7 @@
/* text */ /* text */
--text-white: #fff; --text-white: #fff;
--text-black: #121212; --text-black: #121212;
--text-dark: #2b2b3b;
/* background */ /* background */
--background-white: #fff; --background-white: #fff;
@ -199,7 +200,7 @@ button{
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
color: var(--text-black); color: var(--text-dark);
text-decoration: none; text-decoration: none;
@ -259,3 +260,67 @@ button{
aspect-ratio: 1; aspect-ratio: 1;
} }
/* mini-profile */ /* mini-profile */
/* main-menu */
.main-menu{
display: flex;
align-items: center;
list-style-type: none;
}
.main-menu__item{
margin-left: 24px;
transition: opacity .2s ease-out;
}
.main-menu__item:first-child{
margin-left: 0;
}
.main-menu__item:hover{
opacity: .8;
}
.main-menu__link{
display: block;
padding: 8px 12px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
text-decoration: none;
}
.main-menu__button{
padding: 8px 32px 8px 12px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
border: none;
border-radius: 24px;
background: var(--gradient-turquoise);
position: relative;
}
.main-menu__button::before{
content: '';
position: absolute;
top: 14px;
right: 14px;
width: 13px;
height: 8px;
background-image: url(../img/svg/main/arrow-black.svg);
background-repeat: no-repeat;
background-size: contain;
}
/* main-menu */

@ -28,17 +28,6 @@
.header__logo-black{ .header__logo-black{
} }
.main-menu{
display: flex;
align-items: center;
}
/* header end */ /* header end */

@ -69,25 +69,6 @@
</li> </li>
</ul> --> </ul> -->
<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>
<a href="#" class="lang__item">
RU
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> </div>
</header> </header>

@ -54,7 +54,7 @@
</div> --> </div> -->
<div class="mini-profile"> <!-- <div class="mini-profile">
<div class="mini-profile__item"> <div class="mini-profile__item">
<div class="lang"> <div class="lang">
<button class="lang__open"> <button class="lang__open">
@ -92,6 +92,28 @@
<img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon"> <img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
</button> </button>
</div> </div>
</div> -->
<div>
<ul class="main-menu">
<li class="main-menu__item">
<a href="#" class="main-menu__link">ГЛАВНАЯ</a>
</li>
<li class="main-menu__item">
<a href="#" class="main-menu__link">О COSMOPET</a>
</li>
<li class="main-menu__item">
<a href="#" class="main-menu__link">ПРОИЗВОДСТВО</a>
</li class="main-menu__item">
<li class="main-menu__item">
<a href="#" class="main-menu__link">БЛОГ</a>
</li>
<li class="main-menu__item">
<button class="main-menu__button">
ПРОДУКЦИЯ
</button>
</li>
</ul>
</div> </div>

Loading…
Cancel
Save