Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал header для пк

Browse Source
fitness
Kirill Pet 8 months ago
parent 13da123645
commit 3396d6e974
5 changed files with 181 additions and 17 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      assets/css/gp-style-core.css
  2. 97
      assets/css/gp-style-desktop.css
  3. 5
      assets/css/gp-style-mobile.css
  4. 3
      assets/img/icon/arrow-bottom.svg
  5. 85
      index.html

8
assets/css/gp-style-core.css
Unescape View File

@ -111,6 +111,8 @@ body{
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
transition: background-color .3s;
} }
.btn-big--border{ .btn-big--border{
padding: 21px 32px; padding: 21px 32px;
@ -120,6 +122,9 @@ body{
.btn-big--border--blood{ .btn-big--border--blood{
border-color: var(--blood); border-color: var(--blood);
} }
.btn-big--blood{
background-color: var(--blood);
}
.btn--100-per{ .btn--100-per{
@ -129,6 +134,9 @@ body{
/* header */ /* header */
.header__logo{ .header__logo{
width: 74px;
height: 64px;
background-image: url(/assets/img/main/logo.svg); background-image: url(/assets/img/main/logo.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;

97
assets/css/gp-style-desktop.css
Unescape View File

@ -1,8 +1,101 @@
/* Основные стили для компьютера */ .wrapper{
margin: auto;
width: 1440px;
}
/* писать сюда... */ /* header */
.header__phone{
display: none;
}
.phone-menu{
display: none;
}
.header{
}
.header__wrapper{
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__main{
display: flex;
align-items: center;
}
.header-main__item{
margin-left: 48px;
display: flex;
align-items: center;
}
.header-main__item:first-child{
margin-left: 0;
}
.header-main__btn{
margin-left: 16px;
}
.header-main__btn:first-child{
margin-left: 0;
}
.header__text{
font-weight: 400;
font-size: 18px;
color: var(--text-white);
}
.header__text a {
color: var(--text-white);
}
.header__text--bo-line{
text-decoration: none;
}
.header__menu{
padding: 16px 0;
background-color: var(--background-grey);
}
.header-menu__wrapper{
display: flex;
justify-content: space-between;
align-items: center;
}
.header-menu__list{
display: flex;
align-items: center;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
list-style-type: none;
}
.header-menu__list li{
margin-left: 32px;
}
.header-menu__list li:first-child{
margin-left: 0;
}
.header-menu__list a{
color: var(--text-white);
text-decoration: none;
}
.header-menu-list__next{
padding-right: 24px;
background-image: url(/assets/img/icon/arrow-bottom.svg);
background-repeat: no-repeat;
background-position: center right;
}
.header-menu__search{
width: 32px;
aspect-ratio: 1;
}
/* header */

5
assets/css/gp-style-mobile.css
Unescape View File

@ -11,11 +11,6 @@
position: relative; position: relative;
} }
.header__logo{
width: 74px;
height: 64px;
}
.header__phone{ .header__phone{
display: flex; display: flex;
align-items: center; align-items: center;

3
assets/img/icon/arrow-bottom.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6L8 10L4 6" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

85
index.html
Unescape View File

@ -49,25 +49,90 @@
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<div class="header__logo"></div> <div class="wrapper header__wrapper">
<div class="header__logo"></div>
<div class="header__phone"> <div class="header__text">
<div class="header-phone__item"> Работаем с гос.заказчиками <br>
<img src="/assets/img/icon/device-phone.svg" alt="phone"> по <a href="#">44-ФЗ/223-ФЗ</a>
</div> </div>
<div class="header-phone__item"> <div class="header__main">
<img src="/assets/img/icon/search.svg" alt="search"> <div class="header-main__item">
<a href="tel:+74957988081" class="header__text header__text--bo-line">+7 (495) 798-80-81</a>
</div>
<div class="header-main__item">
<a href="mailto:sales@bestinfitness.ru" class="header__text header__text--bo-line">sales@bestinfitness.ru</a>
</div>
<div class="header-main__item">
<a href="#" class="btn-social">
<img src="/assets/img/social/telegram.svg" alt="">
</a>
<a href="#" class="btn-social">
<img src="/assets/img/social/whatsapp.svg" alt="">
</a>
</div>
<div class="header-main__item">
<a href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
Заказать звонок
</a>
<a href="" class="btn-big btn-big--blood header-main__btn">
спецификация
</a>
</div>
</div> </div>
<div class="header-phone__item"> <div class="header__phone">
<div class="button-menu"> <div class="header-phone__item">
<img src="/assets/img/icon/menu-hamburger.svg" class="button-menu__open" alt="open"> <img src="/assets/img/icon/device-phone.svg" alt="phone">
<img src="/assets/img/icon/close.svg" class="button-menu__close" alt="close"> </div>
<div class="header-phone__item">
<img src="/assets/img/icon/search.svg" alt="search">
</div>
<div class="header-phone__item">
<div class="button-menu">
<img src="/assets/img/icon/menu-hamburger.svg" class="button-menu__open" alt="open">
<img src="/assets/img/icon/close.svg" class="button-menu__close" alt="close">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="header__menu">
<div class="wrapper header-menu__wrapper">
<ul class="header-menu__list">
<li>
<a href="#">О компании</a>
</li>
<li >
<a href="#" class="header-menu-list__next">каталог</a>
</li>
<li>
<a href="#" class="header-menu-list__next">бренды</a>
</li>
<li>
<a href="#">зонирование</a>
</li>
<li>
<a href="#">проекты</a>
</li>
<li>
<a href="#">интересное</a>
</li>
<li>
<a href="#">контакты</a>
</li>
</ul>
<img src="/assets/img/icon/search.svg" alt="" class="header-menu__search">
</div>
</div>
<div class="phone-menu"> <div class="phone-menu">
<div class="phone-menu__block-content"> <div class="phone-menu__block-content">
<div class="phone-menu__content"> <div class="phone-menu__content">

Write Preview
Loading…
Cancel
Save