Kirill Pet
8 months ago
parent
b1afb0f09c
commit
13da123645
@ -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 */ |
||||
@ -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 */ |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 194 B |
|
After Width: | Height: | Size: 217 B |
|
After Width: | Height: | Size: 473 B |
|
After Width: | Height: | Size: 253 B |
|
After Width: | Height: | Size: 411 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 745 B |
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,13 @@ |
||||
<!-- Пример формы для отправки в Телеграмм (обработчик 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> --> |
||||
|
||||
Loading…
Reference in new issue