Compare commits
6 Commits
master
...
vectorbric
| Author | SHA1 | Date |
|---|---|---|
User A1032551
|
2cc2f8495d | 11 months ago |
|
User A1032551
|
1edb20881d | 11 months ago |
|
User A1032551
|
6e518a5d76 | 11 months ago |
|
User A1032551
|
fad5afb0c1 | 11 months ago |
|
User A1032551
|
9d68663b9c | 11 months ago |
Константин Белан
|
18e2e45585 | 11 months ago |
@ -1,14 +0,0 @@ |
|||||||
<IfModule mod_rewrite.c> |
|
||||||
# Редирект: ...// -> .../ |
|
||||||
RewriteCond %{REQUEST_URI} (.*)\/\/$ |
|
||||||
RewriteRule ^(.*)$ https://%{HTTP_HOST}/%1/ [R=301,L] |
|
||||||
|
|
||||||
# Редирект: с www -> без www |
|
||||||
RewriteCond %{HTTP_HOST} ^www\.(.*)$ |
|
||||||
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] |
|
||||||
|
|
||||||
# Редирект: HTTP -> HTTPS |
|
||||||
RewriteCond %{HTTP:X-Forwarded-Proto} !https |
|
||||||
RewriteCond %{HTTPS} off |
|
||||||
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] |
|
||||||
</IfModule> |
|
||||||
@ -1,84 +0,0 @@ |
|||||||
## **Требования к верстке** |
|
||||||
|
|
||||||
### **С точки зрения веб-разработки:** |
|
||||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
|
||||||
* соблюдаем Scope-ориентированный подход: |
|
||||||
- каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта. |
|
||||||
|
|
||||||
- пример: <br> |
|
||||||
|
|
||||||
HTML: |
|
||||||
``` |
|
||||||
<section class="my-namespace"> |
|
||||||
<h1>Новый заголовок</h1> |
|
||||||
<button class="my-button">Кнопка</button> |
|
||||||
</section> |
|
||||||
``` |
|
||||||
|
|
||||||
CSS: |
|
||||||
|
|
||||||
``` |
|
||||||
.my-namespace h1 { |
|
||||||
font-size: 24px; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
.my-namespace .my-button { |
|
||||||
background-color: #007BFF; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
``` |
|
||||||
|
|
||||||
|
|
||||||
* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
|
||||||
`block-name__elem-name--mod-name--mod-val` |
|
||||||
+ имена записываются латиницей в нижнем регистре |
|
||||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
|
||||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
|
||||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
|
||||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
|
||||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
|
||||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) |
|
||||||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. |
|
||||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы |
|
||||||
* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил. |
|
||||||
* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*) |
|
||||||
|
|
||||||
### **С точки зрения SEO:** |
|
||||||
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. |
|
||||||
* на странице должен быть только один заголовок первого уровня (h1) |
|
||||||
* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 |
|
||||||
* для кнопок, нажатие на которые не требует редиректа используем тег \<button\>, а не \<a\> |
|
||||||
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке |
|
||||||
|
|
||||||
|
|
||||||
## **Порядок работы** |
|
||||||
|
|
||||||
### **Подготовка окружения для локальной разработки** |
|
||||||
1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git` |
|
||||||
|
|
||||||
заменить переменную: |
|
||||||
`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS) |
|
||||||
|
|
||||||
2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}` |
|
||||||
3. Приступить к локальной разработке в созданной ветке |
|
||||||
4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}` |
|
||||||
- во время push для авторизации понадобиться логин/пароль: `freelancer/freelancerfreelancer00` |
|
||||||
5. Отписать в чат, чтоб руководитель проектом посмотрел результат и выкачал его на тестовый стенд |
|
||||||
|
|
||||||
в командах заменить переменные: |
|
||||||
`${project_name}` -- условное названия проекта (как варинат использовать домен сайта) |
|
||||||
`${name}` -- имя/ник исполнителя |
|
||||||
|
|
||||||
|
|
||||||
## **Оптимальный порядок непосредственно в процессе верстки** |
|
||||||
1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css` |
|
||||||
2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css` |
|
||||||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. |
|
||||||
Саму HTML-верстку для UI kit делать в файле `ui_kit.html` |
|
||||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css` |
|
||||||
|
|
||||||
|
|
||||||
### **Примечания** |
|
||||||
|
|
||||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |
|
||||||
@ -1,16 +1,149 @@ |
|||||||
/* Переменные, шрифты, UI kit */ |
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap'); |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'DIN Pro'; |
||||||
|
src: url('../fonts/DINPro-Medium.eot'); |
||||||
/* |
src: local('DIN Pro Medium'), local('DINPro-Medium'), |
||||||
|
url('../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'), |
||||||
ШАБЛОН использования глобальных переменных: |
url('../fonts/DINPro-Medium.woff') format('woff'), |
||||||
|
url('../fonts/DINPro-Medium.ttf') format('truetype'); |
||||||
:root { |
font-weight: 500; |
||||||
--main-text: #e1667c; |
font-style: normal; |
||||||
--main-color: #8da6cb; |
font-display: swap; |
||||||
--font-family: "Craftwork Grotesk", sans-serif; |
} |
||||||
|
@font-face { |
||||||
|
font-family: 'DIN Pro'; |
||||||
|
src: url('../fonts/DINPro-Black.eot'); |
||||||
|
src: local('DIN Pro Black'), local('DINPro-Black'), |
||||||
|
url('../fonts/DINPro-Black.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('../fonts/DINPro-Black.woff') format('woff'), |
||||||
|
url('../fonts/DINPro-Black.ttf') format('truetype'); |
||||||
|
font-weight: 900; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
} |
} |
||||||
|
|
||||||
*/ |
html, |
||||||
|
body, |
||||||
|
div, |
||||||
|
span, |
||||||
|
applet, |
||||||
|
object, |
||||||
|
iframe, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6, |
||||||
|
p, |
||||||
|
blockquote, |
||||||
|
pre, |
||||||
|
a, |
||||||
|
abbr, |
||||||
|
acronym, |
||||||
|
address, |
||||||
|
big, |
||||||
|
cite, |
||||||
|
code, |
||||||
|
del, |
||||||
|
dfn, |
||||||
|
em, |
||||||
|
img, |
||||||
|
ins, |
||||||
|
kbd, |
||||||
|
q, |
||||||
|
s, |
||||||
|
samp, |
||||||
|
small, |
||||||
|
strike, |
||||||
|
strong, |
||||||
|
sub, |
||||||
|
sup, |
||||||
|
tt, |
||||||
|
var, |
||||||
|
b, |
||||||
|
u, |
||||||
|
i, |
||||||
|
center, |
||||||
|
dl, |
||||||
|
dt, |
||||||
|
dd, |
||||||
|
ol, |
||||||
|
ul, |
||||||
|
li, |
||||||
|
fieldset, |
||||||
|
form, |
||||||
|
label, |
||||||
|
legend, |
||||||
|
table, |
||||||
|
caption, |
||||||
|
tbody, |
||||||
|
tfoot, |
||||||
|
thead, |
||||||
|
tr, |
||||||
|
th, |
||||||
|
td, |
||||||
|
article, |
||||||
|
aside, |
||||||
|
canvas, |
||||||
|
details, |
||||||
|
embed, |
||||||
|
figure, |
||||||
|
figcaption, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
menu, |
||||||
|
nav, |
||||||
|
output, |
||||||
|
ruby, |
||||||
|
section, |
||||||
|
summary, |
||||||
|
time, |
||||||
|
mark, |
||||||
|
audio, |
||||||
|
video { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
font-size: 100%; |
||||||
|
font: inherit; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
/* HTML5 display-role reset for older browsers */ |
||||||
|
article, |
||||||
|
aside, |
||||||
|
details, |
||||||
|
figcaption, |
||||||
|
figure, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
menu, |
||||||
|
nav, |
||||||
|
section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
body { |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
ol, |
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
blockquote, |
||||||
|
q { |
||||||
|
quotes: none; |
||||||
|
} |
||||||
|
blockquote:before, |
||||||
|
blockquote:after, |
||||||
|
q:before, |
||||||
|
q:after { |
||||||
|
content: ''; |
||||||
|
content: none; |
||||||
|
} |
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; |
||||||
|
} |
||||||
|
|||||||
@ -1,18 +1,869 @@ |
|||||||
/* Основные стили для компьютера */ |
:root { |
||||||
|
--clr-general: #141210; |
||||||
|
} |
||||||
|
|
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
html { |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
body { |
||||||
|
font-family: 'Onest', sans-serif; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: var(--clr-general); |
||||||
|
background: #fffaf7; |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
*[class*='__container'] { |
||||||
|
width: 100%; |
||||||
|
max-width: 1328px; |
||||||
|
margin: 0 auto; |
||||||
|
padding: 0 64px; |
||||||
|
} |
||||||
|
|
||||||
/* писать сюда... */ |
.flex { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.flex-ac { |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.flex-jcsb { |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.gap-10 { |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
.gap-24 { |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
.gap-42 { |
||||||
|
gap: 42px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Title */ |
||||||
|
h1 { |
||||||
|
font-family: 'DIN Pro', sans-serif; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 62px; |
||||||
|
line-height: 110%; |
||||||
|
letter-spacing: -0.04em; |
||||||
|
text-transform: uppercase; |
||||||
|
background: linear-gradient( |
||||||
|
142deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.15) 32%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
var(--clr-general); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
h1 b, |
||||||
|
h1 strong { |
||||||
|
font-weight: 900; |
||||||
|
} |
||||||
|
h1 span { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 0px 16px; |
||||||
|
letter-spacing: -0.02em; |
||||||
|
border-radius: 14px; |
||||||
|
background: linear-gradient( |
||||||
|
142deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.15) 41.5%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#ff875c; |
||||||
|
|
||||||
|
font-weight: 500; |
||||||
|
font-size: 54px; |
||||||
|
line-height: 135%; |
||||||
|
color: #fff; |
||||||
|
position: relative; |
||||||
|
background-clip: initial; |
||||||
|
-webkit-background-clip: initial; |
||||||
|
-webkit-text-fill-color: initial; |
||||||
|
margin-top: 6px; |
||||||
|
text-transform: initial; |
||||||
|
} |
||||||
|
|
||||||
|
/* Button */ |
||||||
|
.btn { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
box-shadow: 0 12px 24px 0 rgba(255, 204, 0, 0.25); |
||||||
|
background: linear-gradient( |
||||||
|
322deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.32) 41.5%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#fc0; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
font-weight: 600; |
||||||
|
font-size: 15px; |
||||||
|
line-height: 140%; |
||||||
|
color: var(--clr-general); |
||||||
|
cursor: pointer; |
||||||
|
transition: all 0.15s ease-in-out; |
||||||
|
} |
||||||
|
.btn:hover { |
||||||
|
box-shadow: 0 1px 14px 0 rgba(255, 204, 0, 0.2); |
||||||
|
transform: scale(0.98); |
||||||
|
} |
||||||
|
.btn-small { |
||||||
|
border-radius: 14px; |
||||||
|
padding: 17px 24px; |
||||||
|
} |
||||||
|
.btn-big { |
||||||
|
height: 72px; |
||||||
|
font-size: 16px; |
||||||
|
border-radius: 20px; |
||||||
|
padding: 20px 24px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Header */ |
||||||
|
.header { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.header__container { |
||||||
|
position: absolute; |
||||||
|
top: 24px; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
.header__logo { |
||||||
|
max-width: 280px; |
||||||
|
} |
||||||
|
.header__logo p { |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 130%; |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
.header__contacts { |
||||||
|
} |
||||||
|
.header__socials { |
||||||
|
} |
||||||
|
.header__socials-link { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 47px; |
||||||
|
height: 47px; |
||||||
|
border-radius: 9px; |
||||||
|
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.07); |
||||||
|
background: #fff; |
||||||
|
transition: transform 0.2s ease-in-out; |
||||||
|
} |
||||||
|
.header__socials-link:hover { |
||||||
|
transform: scale(1.1); |
||||||
|
} |
||||||
|
.header__tel { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 22px; |
||||||
|
letter-spacing: -0.03em; |
||||||
|
color: var(--clr-general); |
||||||
|
text-decoration: none; |
||||||
|
transition: opacity 0.2s ease-in-out; |
||||||
|
} |
||||||
|
.header__tel:hover { |
||||||
|
opacity: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
/* Hero */ |
||||||
|
.hero { |
||||||
|
padding-top: 160px; |
||||||
|
padding-bottom: 92px; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.hero::after { |
||||||
|
content: ''; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: url('../img/bg_after.webp') top left no-repeat; |
||||||
|
background-size: contain; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
.hero::before { |
||||||
|
content: ''; |
||||||
|
width: 220px; |
||||||
|
height: 295px; |
||||||
|
background: url('../img/bg_before.webp') center no-repeat; |
||||||
|
background-size: contain; |
||||||
|
position: absolute; |
||||||
|
bottom: 100px; |
||||||
|
left: 0; |
||||||
|
z-index: 1; |
||||||
|
animation: herobefore 6s ease-in-out infinite; |
||||||
|
} |
||||||
|
@keyframes herobefore { |
||||||
|
0%, |
||||||
|
100% { |
||||||
|
transform: translateY(0) translateX(0); |
||||||
|
} |
||||||
|
40%, |
||||||
|
60% { |
||||||
|
transform: translateY(20px) translateX(-2px); |
||||||
|
} |
||||||
|
} |
||||||
|
.hero__img { |
||||||
|
} |
||||||
|
.hero__content { |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 64px; |
||||||
|
justify-content: space-between; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.hero__content::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
top: -64px; |
||||||
|
right: -240px; |
||||||
|
width: 880px; |
||||||
|
height: 830px; |
||||||
|
pointer-events: none; |
||||||
|
z-index: -1; |
||||||
|
background: url('../img/hero-img.webp') center no-repeat; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.hero__leftside { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 42px; |
||||||
|
max-width: 590px; |
||||||
|
} |
||||||
|
.hero__title { |
||||||
|
} |
||||||
|
.hero__title h1 { |
||||||
|
} |
||||||
|
.hero__desc { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.hero__desc p { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
gap: 12px; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 130%; |
||||||
|
padding: 12px 20px 12px 18px; |
||||||
|
border-radius: 12px; |
||||||
|
border: 1px solid rgba(0, 7, 30, 0.15); |
||||||
|
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.01); |
||||||
|
} |
||||||
|
.hero__desc p::before { |
||||||
|
display: none; |
||||||
|
content: ''; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background: url('../img/i-info.svg') center no-repeat; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.hero__desc p b { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.hero__price { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 24px; |
||||||
|
border-radius: 28px; |
||||||
|
padding: 6px; |
||||||
|
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.02); |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.hero__price-header { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
gap: 24px; |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 4px; |
||||||
|
} |
||||||
|
.hero__price-header span { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
gap: 12px; |
||||||
|
border-radius: 14px; |
||||||
|
padding: 14px; |
||||||
|
font-weight: 600; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 140%; |
||||||
|
color: #fff; |
||||||
|
width: 100%; |
||||||
|
border-right: 3px solid #54596c; |
||||||
|
border-left: 3px solid #54596c; |
||||||
|
background: linear-gradient( |
||||||
|
329deg, |
||||||
|
rgba(255, 255, 255, 0) 9.59%, |
||||||
|
rgba(255, 255, 255, 0.1) 47.6%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
var(--clr-general); |
||||||
|
} |
||||||
|
.hero__price-header span::before { |
||||||
|
content: ''; |
||||||
|
width: 22px; |
||||||
|
height: 22px; |
||||||
|
background: url('../img/i-percent.svg') center no-repeat; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.hero__price-header p { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16.5px; |
||||||
|
line-height: 130%; |
||||||
|
} |
||||||
|
.hero__price-header p b { |
||||||
|
font-weight: 600; |
||||||
|
color: #ffcc02; |
||||||
|
} |
||||||
|
.hero__price-content { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
.hero__price-stock { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-end; |
||||||
|
gap: 2px; |
||||||
|
} |
||||||
|
.hero__price-stock span { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 140%; |
||||||
|
letter-spacing: -0.02em; |
||||||
|
text-decoration: line-through; |
||||||
|
text-align: right; |
||||||
|
opacity: 0.4; |
||||||
|
} |
||||||
|
.hero__price-stock p { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 30px; |
||||||
|
line-height: 140%; |
||||||
|
letter-spacing: -0.02em; |
||||||
|
} |
||||||
|
.hero__price-unit { |
||||||
|
border-radius: 10px; |
||||||
|
padding: 7px 14px; |
||||||
|
background: linear-gradient( |
||||||
|
322deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.34) 41.5%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#fc0; |
||||||
|
} |
||||||
|
.hero__price-unit p { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 140%; |
||||||
|
} |
||||||
|
.hero__rightside { |
||||||
|
} |
||||||
|
.hero__form { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 24px; |
||||||
|
max-width: 490px; |
||||||
|
border: 1px solid rgba(255, 255, 255, 0.7); |
||||||
|
border-radius: 26px; |
||||||
|
padding: 12px; |
||||||
|
padding-bottom: 32px; |
||||||
|
box-shadow: 0 10px 42px 0 rgba(0, 0, 0, 0.17); |
||||||
|
background: linear-gradient( |
||||||
|
142deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.2) 41.5%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#f2f2f2; |
||||||
|
} |
||||||
|
.hero__form-title { |
||||||
|
padding-left: 12px; |
||||||
|
padding-right: 12px; |
||||||
|
max-width: 320px; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
.hero__form-title p { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 17.5px; |
||||||
|
line-height: 130%; |
||||||
|
letter-spacing: -0.02em; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.hero__form-title p b { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.hero__form-action { |
||||||
|
padding-left: 24px; |
||||||
|
padding-right: 24px; |
||||||
|
} |
||||||
|
.hero__form-action form { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.hero__form-action select, |
||||||
|
.hero__form-action input { |
||||||
|
width: 100%; |
||||||
|
height: 72px; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
border-radius: 20px; |
||||||
|
padding: 12px 32px; |
||||||
|
background: #fff; |
||||||
|
font-family: 'Onest', sans-serif; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
color: var(--clr-general); |
||||||
|
transition: color 0.15s ease-in-out; |
||||||
|
} |
||||||
|
.hero__form-action input:hover::placeholder, |
||||||
|
.hero__form-action select:hover { |
||||||
|
color: rgba(28, 27, 27, 0.75); |
||||||
|
} |
||||||
|
.hero__form-action select { |
||||||
|
color: rgba(28, 27, 27, 0.5); |
||||||
|
-webkit-appearance: none; |
||||||
|
-moz-appearance: none; |
||||||
|
text-indent: 1px; |
||||||
|
text-overflow: ''; |
||||||
|
position: relative; |
||||||
|
background: url('../img/i-select.svg') center no-repeat #fff; |
||||||
|
background-size: 18px; |
||||||
|
background-position-x: calc(100% - 32px); |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.hero__form-action select::-ms-expand { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.hero__form-action select:has(option[value='']:not(:checked)) { |
||||||
|
color: var(--clr-general); |
||||||
|
} |
||||||
|
.hero__form-action input::placeholder { |
||||||
|
color: rgba(28, 27, 27, 0.5); |
||||||
|
transition: color 0.15s ease-in-out; |
||||||
|
} |
||||||
|
.hero__form-gift { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 10px; |
||||||
|
margin-top: 8px; |
||||||
|
border-radius: 20px; |
||||||
|
padding: 24px 12px 24px 24px; |
||||||
|
background: linear-gradient( |
||||||
|
130deg, |
||||||
|
rgba(255, 255, 255, 0) 30%, |
||||||
|
rgba(255, 255, 255, 0.24) 80%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
var(--clr-general); |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.hero__form-gift::after { |
||||||
|
content: ''; |
||||||
|
width: 150px; |
||||||
|
height: 105px; |
||||||
|
z-index: -1; |
||||||
|
pointer-events: none; |
||||||
|
background: url('../img/gift.webp') center no-repeat; |
||||||
|
background-size: cover; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
.hero__form-gift p { |
||||||
|
display: inline-flex; |
||||||
|
border-radius: 90px; |
||||||
|
padding: 4px 12px; |
||||||
|
background: rgba(255, 255, 255, 0.12); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 140%; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.hero__form-gift ul { |
||||||
|
list-style-type: disc; |
||||||
|
padding-left: 24px; |
||||||
|
} |
||||||
|
.hero__form-gift ul li { |
||||||
|
list-style-type: disc; |
||||||
|
font-weight: 600; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 140%; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.hero__advantages { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 24px; |
||||||
|
margin-top: 92px; |
||||||
|
margin-top: 72px; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.hero__advantages-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-start; |
||||||
|
flex-direction: column; |
||||||
|
gap: 20px; |
||||||
|
border-radius: 24px; |
||||||
|
padding: 24px 14px; |
||||||
|
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.01); |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.hero__advantages-item p { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 140%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.hero__advantages-icon { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 20px; |
||||||
|
min-width: 60px; |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
background: linear-gradient( |
||||||
|
329deg, |
||||||
|
rgba(255, 255, 255, 0) 9.59%, |
||||||
|
rgba(255, 255, 255, 0.1) 47.6%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
var(--clr-general); |
||||||
|
} |
||||||
|
|
||||||
|
/* Footer */ |
||||||
|
.footer { |
||||||
|
background: linear-gradient( |
||||||
|
329deg, |
||||||
|
rgba(255, 255, 255, 0) 9.59%, |
||||||
|
rgba(255, 255, 255, 0.02) 47.6%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
var(--clr-general); |
||||||
|
padding-top: 42px; |
||||||
|
padding-bottom: 52px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.footer__container { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 42px; |
||||||
|
} |
||||||
|
.footer__top { |
||||||
|
display: grid; |
||||||
|
align-items: center; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
} |
||||||
|
.footer__logo { |
||||||
|
} |
||||||
|
.footer__logo p { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 13px; |
||||||
|
line-height: 140%; |
||||||
|
max-width: 210px; |
||||||
|
} |
||||||
|
.footer__address { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.footer__contacts { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
gap: 46px; |
||||||
|
} |
||||||
|
.footer__tel { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 22px; |
||||||
|
color: #fff; |
||||||
|
text-decoration: none; |
||||||
|
transition: color 0.15s ease-in-out; |
||||||
|
} |
||||||
|
.footer__tel:hover { |
||||||
|
color: #fc0; |
||||||
|
} |
||||||
|
.footer__socials { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
.footer__socials-link { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 9px; |
||||||
|
padding: 10px; |
||||||
|
width: 44px; |
||||||
|
height: 44px; |
||||||
|
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.07); |
||||||
|
background: rgba(255, 255, 255, 0.1); |
||||||
|
transition: transform 0.2s ease-in-out; |
||||||
|
} |
||||||
|
.footer__socials-link:hover { |
||||||
|
transform: scale(1.1); |
||||||
|
} |
||||||
|
.footer__bottom { |
||||||
|
display: grid; |
||||||
|
align-items: center; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
} |
||||||
|
.footer__bottom p, |
||||||
|
.footer__bottom a { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 14px; |
||||||
|
color: #fff; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.footer__bottom a { |
||||||
|
transition: opacity 0.2s ease-in-out; |
||||||
|
} |
||||||
|
.footer__bottom a:hover { |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
.footer__bottom a:nth-child(2) { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.footer__bottom a:nth-child(3) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
/* Preloader */ |
||||||
|
.preloader { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: rgba(0, 7, 30, 0.8); |
||||||
|
-webkit-transition: opacity 0.2s linear; |
||||||
|
transition: opacity 0.2s linear; |
||||||
|
opacity: 1; |
||||||
|
z-index: 200; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.preloader.hidden { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
/* Стили для лептопов */ |
.preloader.hidden .preloader__icon { |
||||||
/* @media only screen and (min-width: 992px) and (max-width: 1400px) { |
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
} */ |
.preloader__icon { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: 128px; |
||||||
|
height: 128px; |
||||||
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23FFCC00" stroke="%23FFCC00" stroke-width="15" width="30" height="30" x="25" y="50"><animate attributeName="y" calcMode="spline" dur="2" values="50;120;50;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></rect><rect fill="%23FFCC00" stroke="%23FFCC00" stroke-width="15" width="30" height="30" x="85" y="50"><animate attributeName="y" calcMode="spline" dur="2" values="50;120;50;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></rect><rect fill="%23FFCC00" stroke="%23FFCC00" stroke-width="15" width="30" height="30" x="145" y="50"><animate attributeName="y" calcMode="spline" dur="2" values="50;120;50;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></rect></svg>'); |
||||||
|
background-size: contain; |
||||||
|
-webkit-transform: translate(-50%, -50%); |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
opacity: 1; |
||||||
|
-webkit-transition: opacity 0.2s linear; |
||||||
|
transition: opacity 0.2s linear; |
||||||
|
} |
||||||
|
|
||||||
|
/* Modal */ |
||||||
|
#modal__bg { |
||||||
|
display: none; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: rgba(0, 7, 30, 0.8); |
||||||
|
z-index: 155; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.modal { |
||||||
|
display: none; |
||||||
|
position: fixed; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
z-index: 255; |
||||||
|
padding: 42px; |
||||||
|
background: #fff; |
||||||
|
border-radius: 32px; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.modal.opened, |
||||||
|
#modal__bg.opened { |
||||||
|
display: flex; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.modal__close { |
||||||
|
position: absolute; |
||||||
|
top: -32px; |
||||||
|
right: -32px; |
||||||
|
width: 42px; |
||||||
|
height: 42px; |
||||||
|
background: url('../img/i-close.svg') center no-repeat; |
||||||
|
background-size: 20px; |
||||||
|
border-radius: 12px; |
||||||
|
cursor: pointer; |
||||||
|
transition: opacity 0.15s ease-in-out; |
||||||
|
} |
||||||
|
.modal__close:hover { |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
.modal__content { |
||||||
|
position: relative; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 145%; |
||||||
|
} |
||||||
|
.modal__content p { |
||||||
|
} |
||||||
|
.modal__content span { |
||||||
|
display: inline-flex; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
margin-bottom: 14px; |
||||||
|
} |
||||||
|
.modal__title { |
||||||
|
max-width: 420px; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
.modal__title p { |
||||||
|
font-family: 'DIN Pro', sans-serif; |
||||||
|
font-size: 26px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 130%; |
||||||
|
text-align: center; |
||||||
|
letter-spacing: -0.04em; |
||||||
|
text-transform: uppercase; |
||||||
|
background: linear-gradient( |
||||||
|
142deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.22) 42%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
var(--clr-general); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
.modal__title p b, |
||||||
|
.modal__title p strong { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.modal__form { |
||||||
|
} |
||||||
|
.modal__form form { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 12px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal__form form input { |
||||||
|
width: 100%; |
||||||
|
height: 72px; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
border-radius: 20px; |
||||||
|
padding: 12px 32px; |
||||||
|
background: linear-gradient( |
||||||
|
142deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.2) 41.5%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#f2f2f2; |
||||||
|
font-family: 'Onest', sans-serif; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
color: var(--clr-general); |
||||||
|
transition: color 0.25s ease-in-out; |
||||||
|
} |
||||||
|
.modal__form form input::placeholder { |
||||||
|
color: rgba(28, 27, 27, 0.5); |
||||||
|
transition: color 0.15s ease-in-out; |
||||||
|
} |
||||||
|
.modal__form form input:hover::placeholder { |
||||||
|
color: rgba(28, 27, 27, 0.8); |
||||||
|
} |
||||||
|
|
||||||
|
/* Form */ |
||||||
|
form.sending { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
form.sending::before, |
||||||
|
form.sending::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
form.sending::after { |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: rgb(245 245 245 / 60%); |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
section.modal form.sending::after { |
||||||
|
background: rgb(255 255 255 / 60%); |
||||||
|
} |
||||||
|
form::before { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: 128px; |
||||||
|
height: 128px; |
||||||
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%23FFCC00" stroke="%23FFCC00" stroke-width="15" width="30" height="30" x="25" y="50"><animate attributeName="y" calcMode="spline" dur="2" values="50;120;50;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></rect><rect fill="%23FFCC00" stroke="%23FFCC00" stroke-width="15" width="30" height="30" x="85" y="50"><animate attributeName="y" calcMode="spline" dur="2" values="50;120;50;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></rect><rect fill="%23FFCC00" stroke="%23FFCC00" stroke-width="15" width="30" height="30" x="145" y="50"><animate attributeName="y" calcMode="spline" dur="2" values="50;120;50;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></rect></svg>'); |
||||||
|
background-size: contain; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
opacity: 0; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
form.sending::before { |
||||||
|
opacity: 1; |
||||||
|
z-index: 15; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) and (min-width: 992px) { |
||||||
|
.hero__content { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.hero__content::after { |
||||||
|
opacity: 0.2; |
||||||
|
} |
||||||
|
.footer__socials { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|||||||
@ -1,5 +1,247 @@ |
|||||||
/* Стили для мобильных устройств */ |
@media screen and (max-width: 576px) { |
||||||
@media only screen and (max-width: 576px) { |
.hero__rightside { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.hero__price { |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.hero__content::after { |
||||||
|
right: -320px; |
||||||
|
top: 290px; |
||||||
|
} |
||||||
|
.hero__desc { |
||||||
|
gap: 6px; |
||||||
|
} |
||||||
|
.hero__desc p { |
||||||
|
font-size: 13px; |
||||||
|
padding: 8px 12px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
.hero__desc img { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
.hero__leftside { |
||||||
|
gap: 18px; |
||||||
|
} |
||||||
|
.hero__advantages { |
||||||
|
margin-top: 42px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 540px) { |
||||||
|
.header__container { |
||||||
|
align-items: flex-start; |
||||||
|
gap: 24px; |
||||||
|
padding-bottom: 20px; |
||||||
|
top: 20px; |
||||||
|
} |
||||||
|
.header__container::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 24px; |
||||||
|
width: calc(100% - 48px); |
||||||
|
height: 1px; |
||||||
|
background: #e7e7e7; |
||||||
|
} |
||||||
|
.header__logo { |
||||||
|
max-width: 240px; |
||||||
|
} |
||||||
|
.header__logo img { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
.header__logo p { |
||||||
|
font-size: 9px; |
||||||
|
} |
||||||
|
.header__socials { |
||||||
|
gap: 6px; |
||||||
|
} |
||||||
|
.header__contacts { |
||||||
|
flex-wrap: wrap; |
||||||
|
width: 100%; |
||||||
|
justify-content: flex-end; |
||||||
|
gap: 6px; |
||||||
|
} |
||||||
|
.header__contacts .header__tel { |
||||||
|
} |
||||||
|
.header__tel { |
||||||
|
font-size: 20px; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.hero { |
||||||
|
padding-top: 110px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 470px) { |
||||||
|
h1 { |
||||||
|
font-size: 39px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
h1 span { |
||||||
|
font-size: 32px; |
||||||
|
padding-left: 12px; |
||||||
|
padding-right: 12px; |
||||||
|
border-radius: 10px; |
||||||
|
margin-top: 6px; |
||||||
|
} |
||||||
|
.hero__leftside { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
.hero__price { |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
.hero__content { |
||||||
|
gap: 34px; |
||||||
|
} |
||||||
|
.hero__content::after { |
||||||
|
opacity: 0.6; |
||||||
|
right: -125px; |
||||||
|
width: 200px; |
||||||
|
height: 140px; |
||||||
|
background-size: contain; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
.hero::before { |
||||||
|
opacity: 0.4; |
||||||
|
} |
||||||
|
.hero__form-gift { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.hero__form-gift::after { |
||||||
|
right: -10%; |
||||||
|
opacity: 0.6; |
||||||
|
} |
||||||
|
.hero__advantages { |
||||||
|
grid-template-columns: 1fr; |
||||||
|
gap: 6px; |
||||||
|
} |
||||||
|
.hero__price { |
||||||
|
border-radius: 12px; |
||||||
|
padding: 10px; |
||||||
|
padding-bottom: 14px; |
||||||
|
} |
||||||
|
.hero__price-header { |
||||||
|
gap: 10px; |
||||||
|
padding: 10px; |
||||||
|
padding-bottom: 0; |
||||||
|
border-radius: 10px; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.hero__price-header p { |
||||||
|
font-size: 13.5px; |
||||||
|
} |
||||||
|
.hero__price-header span { |
||||||
|
border-radius: 10px; |
||||||
|
border: none; |
||||||
|
padding-left: 2px; |
||||||
|
padding-right: 2px; |
||||||
|
gap: 7px; |
||||||
|
} |
||||||
|
.hero__price-header span::before { |
||||||
|
min-width: 18px; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
} |
||||||
|
.hero__price-stock p { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.hero__price-stock span { |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
.hero__price-unit { |
||||||
|
border-radius: 8px; |
||||||
|
padding: 6px 12px; |
||||||
|
} |
||||||
|
.hero__price-unit p { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
.hero__price-content { |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
.header__logo { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.header__container { |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.header__tel { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.hero__form { |
||||||
|
gap: 20px; |
||||||
|
padding: 0 0 20px 0; |
||||||
|
border-radius: 16px; |
||||||
|
} |
||||||
|
.hero__form-title p { |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 390px) { |
||||||
|
h1 { |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
h1 span { |
||||||
|
font-size: 29px; |
||||||
|
} |
||||||
|
.header__logo img { |
||||||
|
width: 42px; |
||||||
|
} |
||||||
|
.header__logo p { |
||||||
|
font-size: 9px; |
||||||
|
} |
||||||
|
.header__tel { |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
.hero__form-action select, |
||||||
|
.hero__form-action input { |
||||||
|
height: 60px; |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.hero__price-header p { |
||||||
|
font-size: 12.5px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 375px) { |
||||||
|
*[class*='__container'] { |
||||||
|
padding-left: 12px; |
||||||
|
padding-right: 12px; |
||||||
|
} |
||||||
|
.header__container { |
||||||
|
gap: 0; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
font-size: 34px; |
||||||
|
} |
||||||
|
.hero__desc::before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__logo img { |
||||||
|
width: 39px; |
||||||
|
} |
||||||
|
.header__tel { |
||||||
|
font-size: 16.5px; |
||||||
|
} |
||||||
|
.hero__form-action select, |
||||||
|
.hero__form-action input { |
||||||
|
font-size: 13.5px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 360px) { |
||||||
|
.hero__desc { |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
.hero__price-header span { |
||||||
|
padding-left: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.hero__content { |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
.hero__price-header span::before { |
||||||
|
min-width: 20px; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
} |
} |
||||||
@ -1,5 +1,255 @@ |
|||||||
/* Стили для планшетов */ |
*[class*='__container'] { |
||||||
@media only screen and (max-width: 992px) { |
padding: 0 42px; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
font-size: 52px; |
||||||
|
} |
||||||
|
h1 span { |
||||||
|
font-size: 42px; |
||||||
|
margin-top: 0; |
||||||
|
top: -2px; |
||||||
|
} |
||||||
|
.hero__content { |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.hero__leftside { |
||||||
|
max-width: 100%; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.hero__content::after { |
||||||
|
opacity: 0.1; |
||||||
|
right: -140px; |
||||||
|
} |
||||||
|
.footer__tel { |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
.header__contacts { |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
.header__contacts button.btn, |
||||||
|
.header__contacts .header__tel p { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__contacts .header__tel { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 47px; |
||||||
|
height: 47px; |
||||||
|
border-radius: 9px; |
||||||
|
position: relative; |
||||||
|
padding: 0; |
||||||
|
background: linear-gradient( |
||||||
|
322deg, |
||||||
|
rgba(255, 255, 255, 0) 0%, |
||||||
|
rgba(255, 255, 255, 0.32) 41.5%, |
||||||
|
rgba(255, 255, 255, 0) 100% |
||||||
|
), |
||||||
|
#fc0; |
||||||
|
} |
||||||
|
.header__contacts .header__tel::before { |
||||||
|
content: ''; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background: url('../img/i-tel.svg') center no-repeat; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.hero__advantages { |
||||||
|
grid-template-columns: repeat(2, 1fr); |
||||||
|
} |
||||||
|
.hero__advantages-item { |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
.hero__advantages-item p { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.hero__advantages-item p br { |
||||||
|
content: ''; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.footer__logo { |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.footer__tel { |
||||||
|
font-size: 19px; |
||||||
|
} |
||||||
|
.footer__contacts { |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
.footer__top, |
||||||
|
.footer__bottom { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
.footer__bottom { |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.footer__bottom p { |
||||||
|
padding-bottom: 32px; |
||||||
|
} |
||||||
|
@media screen and (max-width: 740px) { |
||||||
|
.header__logo { |
||||||
|
max-width: 200px; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
.header__logo img { |
||||||
|
width: 64px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.header__logo p { |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 670px) { |
||||||
|
.header__socials-link, |
||||||
|
.footer__socials-link, |
||||||
|
.header__contacts .header__tel { |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
.header__socials-link img, |
||||||
|
.footer__socials-link img { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
.header__contacts .header__tel::before { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
.header__tel, |
||||||
|
.footer__tel { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
font-size: 49px; |
||||||
|
} |
||||||
|
h1 span { |
||||||
|
font-size: 39px; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 620px) { |
||||||
|
*[class*='__container'] { |
||||||
|
padding: 0 24px; |
||||||
|
} |
||||||
|
.header__logo { |
||||||
|
max-width: 140px; |
||||||
|
gap: 14px; |
||||||
|
} |
||||||
|
.header__logo img { |
||||||
|
width: 56px; |
||||||
|
} |
||||||
|
.hero__advantages { |
||||||
|
gap: 16px; |
||||||
|
} |
||||||
|
.hero__advantages-item { |
||||||
|
gap: 14px; |
||||||
|
padding: 16px 14px; |
||||||
|
border-radius: 16px; |
||||||
|
} |
||||||
|
.hero__advantages-icon { |
||||||
|
min-width: 46px; |
||||||
|
width: 46px; |
||||||
|
height: 46px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
.hero__advantages-icon img { |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
.hero__advantages-item p { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
font-size: 42px; |
||||||
|
} |
||||||
|
h1 span { |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
.header__socials-link, |
||||||
|
.footer__socials-link, |
||||||
|
.header__contacts .header__tel { |
||||||
|
width: 37px; |
||||||
|
height: 37px; |
||||||
|
} |
||||||
|
.header__socials-link img, |
||||||
|
.footer__socials-link img { |
||||||
|
width: 22px; |
||||||
|
height: 22px; |
||||||
|
} |
||||||
|
.header__contacts .header__tel::before { |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
} |
||||||
|
.hero { |
||||||
|
padding-top: 140px; |
||||||
|
padding-bottom: 64px; |
||||||
|
} |
||||||
|
.hero__leftside { |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
.hero__desc::before { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
.hero__desc p { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.hero__price { |
||||||
|
gap: 12px; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
.hero__price-header, |
||||||
|
.hero__price-content { |
||||||
|
flex-direction: column; |
||||||
|
gap: 16px; |
||||||
|
} |
||||||
|
.hero__price-stock { |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.hero__price-header p { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.hero__price-stock span { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.hero__price-stock p { |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
.hero__price-unit { |
||||||
|
} |
||||||
|
.hero__price-unit p { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.hero__content::after { |
||||||
|
opacity: 1; |
||||||
|
right: -290px; |
||||||
|
width: 620px; |
||||||
|
height: 420px; |
||||||
|
background-size: contain; |
||||||
|
top: 230px; |
||||||
|
} |
||||||
|
.hero__form-title p { |
||||||
|
font-size: 16px; |
||||||
|
max-width: 390px; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
.hero__form-action select, |
||||||
|
.hero__form-action input, |
||||||
|
.btn-big { |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
.hero__form-gift p, |
||||||
|
.hero__form-gift ul li { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.hero__advantages { |
||||||
|
margin-top: 64px; |
||||||
|
} |
||||||
} |
} |
||||||
@ -1,4 +0,0 @@ |
|||||||
/* Стили для ультрашироких экранов */ |
|
||||||
@media only screen and (min-width: 1400px) { |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,2 +0,0 @@ |
|||||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
|
||||||
/*# sourceMappingURL=normalize.min.css.map */ |
|
||||||
@ -1 +0,0 @@ |
|||||||
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
|
||||||
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: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 373 KiB |
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 311 B |
|
After Width: | Height: | Size: 862 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 808 B |
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,8 @@ |
|||||||
|
/** |
||||||
|
* Minified by jsDelivr using UglifyJS v3.4.4. |
||||||
|
* Original file: /npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.js |
||||||
|
*
|
||||||
|
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
|
||||||
|
*/ |
||||||
|
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?e(require("jquery")):e(jQuery)}(function(R){var a,e=navigator.userAgent,S=/iphone/i.test(e),i=/chrome/i.test(e),T=/android/i.test(e);R.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},R.fn.extend({caret:function(e,t){var n;if(0!==this.length&&!this.is(":hidden")&&this.get(0)===document.activeElement)return"number"==typeof e?(t="number"==typeof t?t:e,this.each(function(){this.setSelectionRange?this.setSelectionRange(e,t):this.createTextRange&&((n=this.createTextRange()).collapse(!0),n.moveEnd("character",t),n.moveStart("character",e),n.select())})):(this[0].setSelectionRange?(e=this[0].selectionStart,t=this[0].selectionEnd):document.selection&&document.selection.createRange&&(n=document.selection.createRange(),e=0-n.duplicate().moveStart("character",-1e5),t=e+n.text.length),{begin:e,end:t})},unmask:function(){return this.trigger("unmask")},mask:function(t,v){var n,b,k,y,x,j,A;if(!t&&0<this.length){var e=R(this[0]).data(R.mask.dataName);return e?e():void 0}return v=R.extend({autoclear:R.mask.autoclear,placeholder:R.mask.placeholder,completed:null},v),n=R.mask.definitions,b=[],k=j=t.length,y=null,t=String(t),R.each(t.split(""),function(e,t){"?"==t?(j--,k=e):n[t]?(b.push(new RegExp(n[t])),null===y&&(y=b.length-1),e<k&&(x=b.length-1)):b.push(null)}),this.trigger("unmask").each(function(){var o=R(this),c=R.map(t.split(""),function(e,t){if("?"!=e)return n[e]?f(t):e}),l=c.join(""),r=o.val();function u(){if(v.completed){for(var e=y;e<=x;e++)if(b[e]&&c[e]===f(e))return;v.completed.call(o)}}function f(e){return e<v.placeholder.length?v.placeholder.charAt(e):v.placeholder.charAt(0)}function s(e){for(;++e<j&&!b[e];);return e}function h(e,t){var n,a;if(!(e<0)){for(n=e,a=s(t);n<j;n++)if(b[n]){if(!(a<j&&b[n].test(c[a])))break;c[n]=c[a],c[a]=f(a),a=s(a)}d(),o.caret(Math.max(y,e))}}function g(e){p(),o.val()!=r&&o.change()}function m(e,t){var n;for(n=e;n<t&&n<j;n++)b[n]&&(c[n]=f(n))}function d(){o.val(c.join(""))}function p(e){var t,n,a,i=o.val(),r=-1;for(a=t=0;t<j;t++)if(b[t]){for(c[t]=f(t);a++<i.length;)if(n=i.charAt(a-1),b[t].test(n)){c[t]=n,r=t;break}if(a>i.length){m(t+1,j);break}}else c[t]===i.charAt(a)&&a++,t<k&&(r=t);return e?d():r+1<k?v.autoclear||c.join("")===l?(o.val()&&o.val(""),m(0,j)):d():(d(),o.val(o.val().substring(0,r+1))),k?t:y}o.data(R.mask.dataName,function(){return R.map(c,function(e,t){return b[t]&&e!=f(t)?e:null}).join("")}),o.one("unmask",function(){o.off(".mask").removeData(R.mask.dataName)}).on("focus.mask",function(){var e;o.prop("readonly")||(clearTimeout(a),r=o.val(),e=p(),a=setTimeout(function(){o.get(0)===document.activeElement&&(d(),e==t.replace("?","").length?o.caret(0,e):o.caret(e))},10))}).on("blur.mask",g).on("keydown.mask",function(e){if(!o.prop("readonly")){var t,n,a,i=e.which||e.keyCode;A=o.val(),8===i||46===i||S&&127===i?(n=(t=o.caret()).begin,(a=t.end)-n==0&&(n=46!==i?function(e){for(;0<=--e&&!b[e];);return e}(n):a=s(n-1),a=46===i?s(a):a),m(n,a),h(n,a-1),e.preventDefault()):13===i?g.call(this,e):27===i&&(o.val(r),o.caret(0,p()),e.preventDefault())}}).on("keypress.mask",function(e){if(!o.prop("readonly")){var t,n,a,i=e.which||e.keyCode,r=o.caret();e.ctrlKey||e.altKey||e.metaKey||i<32||!i||13===i||(r.end-r.begin!=0&&(m(r.begin,r.end),h(r.begin,r.end-1)),(t=s(r.begin-1))<j&&(n=String.fromCharCode(i),b[t].test(n))&&(function(e){var t,n,a,i;for(n=f(t=e);t<j;t++)if(b[t]){if(a=s(t),i=c[t],c[t]=n,!(a<j&&b[a].test(i)))break;n=i}}(t),c[t]=n,d(),a=s(t),T?setTimeout(function(){R.proxy(R.fn.caret,o,a)()},0):o.caret(a),r.begin<=x&&u()),e.preventDefault())}}).on("input.mask paste.mask",function(){o.prop("readonly")||setTimeout(function(){var e=p(!0);o.caret(e),u()},0)}),i&&T&&o.off("input.mask").on("input.mask",function(e){var t=o.val(),n=o.caret();if(A&&A.length&&A.length>t.length){for(p(!0);0<n.begin&&!b[n.begin-1];)n.begin--;if(0===n.begin)for(;n.begin<y&&!b[n.begin];)n.begin++;o.caret(n.begin,n.begin)}else{p(!0);var a=t.charAt(n.begin);n.begin<j&&(b[n.begin]||n.begin++,b[n.begin].test(a)&&n.begin++),o.caret(n.begin,n.begin)}u()}),p()})}})}); |
||||||
|
//# sourceMappingURL=/sm/0db8177a53b6eab1363e81af339c3641bb98c7faaf29a367c2094d37f014e37e.map
|
||||||
@ -0,0 +1,42 @@ |
|||||||
|
window.addEventListener('load', function () { |
||||||
|
const preloader = document.querySelector('#preloader') |
||||||
|
preloader.classList.add('hidden') |
||||||
|
setTimeout(function () { |
||||||
|
preloader.remove() |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
|
||||||
|
jQuery(document).ready(function () { |
||||||
|
$('input[type="tel"]').mask('+7 (999) 999-9999') |
||||||
|
}) |
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||||
|
let modalBg = document.querySelector('#modal__bg') |
||||||
|
if (modalBg) { |
||||||
|
let modalBtnAll = document.querySelectorAll('.modal__btn') |
||||||
|
let modalBtnCloseAll = document.querySelectorAll('.modal__close') |
||||||
|
for (const modalBtnItem of modalBtnAll) { |
||||||
|
modalBtnItem.addEventListener('click', function (e) { |
||||||
|
e.preventDefault() |
||||||
|
let modalBtnData = this.dataset.modal |
||||||
|
let modalSection = document.querySelector( |
||||||
|
'section.modal[data-id=' + modalBtnData + ']' |
||||||
|
) |
||||||
|
modalBg.classList.add('opened') |
||||||
|
modalSection.classList.add('opened') |
||||||
|
}) |
||||||
|
} |
||||||
|
modalBg.addEventListener('click', function () { |
||||||
|
modalBg.classList.remove('opened') |
||||||
|
document.querySelector('section.modal.opened').classList.remove('opened') |
||||||
|
}) |
||||||
|
for (const modalBtnCloseItem of modalBtnCloseAll) { |
||||||
|
modalBtnCloseItem.addEventListener('click', function () { |
||||||
|
modalBg.classList.remove('opened') |
||||||
|
document |
||||||
|
.querySelector('section.modal.opened') |
||||||
|
.classList.remove('opened') |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
@ -1,38 +0,0 @@ |
|||||||
<?php |
|
||||||
/* Пример из: https://vc.ru/dev/158136-kak-otpravlyat-zayavki-s-lendinga-pryamo-v-telegram */ |
|
||||||
|
|
||||||
|
|
||||||
//В переменную $token нужно вставить токен, который нам прислал @botFather |
|
||||||
$token = "1094153697:AAFiLXXXXXLl0hRDsxBij1lddKydKxSSsOg04"; |
|
||||||
|
|
||||||
//Сюда вставляем chat_id |
|
||||||
$chat_id = "-40XXXX740"; |
|
||||||
|
|
||||||
//Определяем переменные для передачи данных из нашей формы |
|
||||||
if ($_POST['phone'] !== '') { |
|
||||||
$name = ($_POST['name']); |
|
||||||
$phone = ($_POST['phone']); |
|
||||||
|
|
||||||
//Собираем в массив то, что будет передаваться боту |
|
||||||
$arr = array( |
|
||||||
'Имя:' => $name, |
|
||||||
'Телефон:' => $phone |
|
||||||
); |
|
||||||
|
|
||||||
//Настраиваем внешний вид сообщения в телеграме |
|
||||||
foreach($arr as $key => $value) { |
|
||||||
$txt .= "<b>".$key."</b> ".$value."%0A"; |
|
||||||
}; |
|
||||||
|
|
||||||
//Передаем данные боту |
|
||||||
$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r"); |
|
||||||
|
|
||||||
//Выводим сообщение об успешной отправке |
|
||||||
if ($sendToTelegram) { |
|
||||||
echo 'Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.'; |
|
||||||
}else{ |
|
||||||
echo 'Что-то пошло не так. Попробуйте отправить форму ещё раз.'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
?> |
|
||||||
@ -0,0 +1,29 @@ |
|||||||
|
jQuery(document).ready(function () { |
||||||
|
jQuery('form').submit(function () { |
||||||
|
var formID = jQuery(this).attr('id') |
||||||
|
var formNm = jQuery('#' + formID) |
||||||
|
formNm.addClass('sending') |
||||||
|
jQuery.ajax({ |
||||||
|
type: 'POST', |
||||||
|
url: 'send/send.php', |
||||||
|
data: formNm.serialize(), |
||||||
|
dataType: 'json', |
||||||
|
success: function (data, jqXHR) { |
||||||
|
if (data.result == 'success') { |
||||||
|
setTimeout(() => { |
||||||
|
formNm.removeClass('sending') |
||||||
|
jQuery('section.modal.opened').removeClass('opened') |
||||||
|
jQuery('#modal__bg').addClass('opened') |
||||||
|
jQuery('section.modal[data-id="success"]').addClass('opened') |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
}, |
||||||
|
error: function (jqXHR, text, error) { |
||||||
|
console.log('ошибка') |
||||||
|
console.log(jqXHR) |
||||||
|
console.log(error) |
||||||
|
}, |
||||||
|
}) |
||||||
|
return false |
||||||
|
}) |
||||||
|
}) |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
/** |
||||||
|
* PHPMailer Exception class. |
||||||
|
* PHP Version 5.5. |
||||||
|
* |
||||||
|
* @see https://github.com/PHPMailer/PHPMailer/ The PHPMailer GitHub project |
||||||
|
* |
||||||
|
* @author Marcus Bointon (Synchro/coolbru) <phpmailer@synchromedia.co.uk> |
||||||
|
* @author Jim Jagielski (jimjag) <jimjag@gmail.com> |
||||||
|
* @author Andy Prevost (codeworxtech) <codeworxtech@users.sourceforge.net> |
||||||
|
* @author Brent R. Matzelle (original founder) |
||||||
|
* @copyright 2012 - 2020 Marcus Bointon |
||||||
|
* @copyright 2010 - 2012 Jim Jagielski |
||||||
|
* @copyright 2004 - 2009 Andy Prevost |
||||||
|
* @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License |
||||||
|
* @note This program is distributed in the hope that it will be useful - WITHOUT |
||||||
|
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or |
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE. |
||||||
|
*/ |
||||||
|
|
||||||
|
namespace PHPMailer\PHPMailer; |
||||||
|
|
||||||
|
/** |
||||||
|
* PHPMailer exception handler. |
||||||
|
* |
||||||
|
* @author Marcus Bointon <phpmailer@synchromedia.co.uk> |
||||||
|
*/ |
||||||
|
class Exception extends \Exception |
||||||
|
{ |
||||||
|
/** |
||||||
|
* Prettify error message output. |
||||||
|
* |
||||||
|
* @return string |
||||||
|
*/ |
||||||
|
public function errorMessage() |
||||||
|
{ |
||||||
|
return '<strong>' . htmlspecialchars($this->getMessage(), ENT_COMPAT | ENT_HTML401) . "</strong><br />\n"; |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,73 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
// ini_set('display_errors', 1); |
||||||
|
// error_reporting(E_ALL); |
||||||
|
|
||||||
|
require 'phpmailer/PHPMailer.php'; |
||||||
|
require 'phpmailer/SMTP.php'; |
||||||
|
require 'phpmailer/Exception.php'; |
||||||
|
|
||||||
|
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { |
||||||
|
|
||||||
|
$mail = new PHPMailer\PHPMailer\PHPMailer(); |
||||||
|
$mail->SMTPDebug = 0; |
||||||
|
|
||||||
|
// $mail->isSMTP(); |
||||||
|
$mail->SMTPAuth = true; |
||||||
|
$mail->CharSet = 'utf-8'; |
||||||
|
|
||||||
|
$mail->Host = 'mail.hosting.reg.ru'; |
||||||
|
$mail->Username = 'admin@dezhub.ru'; |
||||||
|
$mail->Password = 'vM7hA0vS0qmL1qQ4'; |
||||||
|
$mail->SMTPSecure = 'tls'; |
||||||
|
$mail->Port = 587; |
||||||
|
|
||||||
|
// $mail->setFrom('noreply@vectortomsk.ru', 'Вектор'); |
||||||
|
$mail->setFrom('noreply@ledoffsky.agency', 'Вектор'); |
||||||
|
|
||||||
|
$mailAddress = 'kosbelan@yandex.ru'; |
||||||
|
$mail->addAddress($mailAddress); |
||||||
|
|
||||||
|
$message = ''; |
||||||
|
foreach($_POST as $key => $value) { |
||||||
|
preg_match("/name/", $key, $match); |
||||||
|
if (strpos($key, 'name') !== false) { |
||||||
|
$key = 'Имя:'; |
||||||
|
} |
||||||
|
if (strpos($key, 'tel') !== false) { |
||||||
|
$key = 'Номер телефона:'; |
||||||
|
} |
||||||
|
if (strpos($key, 'types') !== false) { |
||||||
|
$key = 'Тип блока:'; |
||||||
|
} |
||||||
|
if (strpos($key, 'quantity') !== false) { |
||||||
|
$key = 'Количество:'; |
||||||
|
} |
||||||
|
if( empty($value) ) { |
||||||
|
$key = ''; |
||||||
|
$value = ''; |
||||||
|
} |
||||||
|
|
||||||
|
$message .= "<tr><td style='background:#f5f5f5;border-radius:10px;'><b>".$key."</b></td><td>".$value."</td></tr>"; |
||||||
|
}; |
||||||
|
|
||||||
|
$body = ' |
||||||
|
<table cellpadding="10" cellspacing="5" style="border:1px solid #ebebeb;border-radius:10px;"> |
||||||
|
<tbody> |
||||||
|
'. $message .' |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
<p>Отправлено с сайта: <a href="https://vectortomsk.ru/">Вектор</a></p> |
||||||
|
'; |
||||||
|
|
||||||
|
$mail->isHTML(true); |
||||||
|
|
||||||
|
$mail->Subject = 'Заявка с сайта Вектор'; |
||||||
|
$mail->Body = $body; |
||||||
|
|
||||||
|
if($mail->send()){ |
||||||
|
echo json_encode(array('result' => 'success')); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
?> |
||||||
@ -1,39 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<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"> |
|
||||||
</head> |
|
||||||
<style> |
|
||||||
/* Стили для выравнивания UI-элеметнов для данной страницы */ |
|
||||||
.ui__ui-wrapper{ |
|
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(4, 1fr); |
|
||||||
grid-column-gap: 30px; |
|
||||||
grid-row-gap: 30px; |
|
||||||
width: 100vw; |
|
||||||
min-height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
.ui, |
|
||||||
.ui__item{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
/* ВСЕ ОСТАЛЬНЫЕ СТИЛИ ПИШЕМ В style-core.css!!! */ |
|
||||||
</style> |
|
||||||
<body class="ui"> |
|
||||||
<div class="ui__ui-wrapper"> |
|
||||||
<div class="ui__item"></div> |
|
||||||
<div class="ui__item"></div> |
|
||||||
<div class="ui__item"></div> |
|
||||||
<!-- ... --> |
|
||||||
<div class="ui__item"></div> |
|
||||||
</div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue