freelancer
11 months ago
parent
b1afb0f09c
commit
17c7665854
@ -1,50 +0,0 @@ |
||||
## **Требования к верстке** |
||||
|
||||
### **С точки зрения веб-разработки:** |
||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
||||
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
||||
`block-name__elem-name--mod-name--mod-val` |
||||
+ имена записываются латиницей в нижнем регистре |
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) |
||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные 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. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git` |
||||
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'); |
||||
|
||||
|
||||
|
||||
|
||||
/* |
||||
|
||||
ШАБЛОН использования глобальных переменных: |
||||
|
||||
:root { |
||||
--main-text: #e1667c; |
||||
--main-color: #8da6cb; |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
@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'); |
||||
font-weight: 500; |
||||
font-style: normal; |
||||
font-display: swap; |
||||
} |
||||
@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,823 @@ |
||||
/* Основные стили для компьютера */ |
||||
:root { |
||||
--clr-general: #00071e; |
||||
} |
||||
|
||||
* { |
||||
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: #f9f7f6; |
||||
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: 120%; |
||||
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; |
||||
} |
||||
h1 b, |
||||
h1 strong { |
||||
font-weight: 900; |
||||
} |
||||
|
||||
/* 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: 28px; |
||||
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: 170px; |
||||
padding-bottom: 102px; |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
.hero::after { |
||||
content: ''; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: url('../img/bg_after.webp') bottom 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: 200px; |
||||
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-end; |
||||
gap: 64px; |
||||
justify-content: space-between; |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
.hero__content::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: -60px; |
||||
right: -590px; |
||||
width: 1230px; |
||||
height: 830px; |
||||
pointer-events: none; |
||||
z-index: -1; |
||||
background: url('../img/hero-img-full.webp') center no-repeat; |
||||
background-size: cover; |
||||
} |
||||
.hero__leftside { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
gap: 32px; |
||||
max-width: 590px; |
||||
} |
||||
.hero__title { |
||||
} |
||||
.hero__title h1 { |
||||
} |
||||
.hero__desc { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
gap: 14px; |
||||
border: 2px solid rgba(28, 27, 27, 0.9); |
||||
border-radius: 15px; |
||||
padding: 13px 24px; |
||||
} |
||||
.hero__desc::before { |
||||
content: ''; |
||||
width: 24px; |
||||
height: 24px; |
||||
background: url('../img/i-info.svg') center no-repeat; |
||||
background-size: cover; |
||||
} |
||||
.hero__desc p { |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
line-height: 130%; |
||||
} |
||||
.hero__desc p b { |
||||
font-weight: 700; |
||||
} |
||||
.hero__price { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 24px; |
||||
border-radius: 28px; |
||||
padding: 16px 16px 24px 16px; |
||||
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.02); |
||||
background: #fff; |
||||
} |
||||
.hero__price-header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24px; |
||||
border-radius: 24px; |
||||
padding: 16px; |
||||
background: linear-gradient( |
||||
142deg, |
||||
rgba(255, 255, 255, 0) 0%, |
||||
rgba(255, 255, 255, 0.2) 41.5%, |
||||
rgba(255, 255, 255, 0) 100% |
||||
), |
||||
#f7f5f3; |
||||
} |
||||
.hero__price-header span { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
border-radius: 14px; |
||||
padding: 14px 20px; |
||||
background: linear-gradient( |
||||
142deg, |
||||
rgba(255, 255, 255, 0) 0%, |
||||
rgba(255, 255, 255, 0.2) 41.5%, |
||||
rgba(255, 255, 255, 0) 100% |
||||
), |
||||
#d92d2d; |
||||
font-weight: 600; |
||||
font-size: 18px; |
||||
line-height: 140%; |
||||
color: #fff; |
||||
} |
||||
.hero__price-header span::before { |
||||
content: ''; |
||||
width: 24px; |
||||
height: 24px; |
||||
background: url('../img/i-percent.svg') center no-repeat; |
||||
background-size: cover; |
||||
} |
||||
.hero__price-header p { |
||||
font-weight: 400; |
||||
font-size: 17px; |
||||
line-height: 130%; |
||||
max-width: 220px; |
||||
} |
||||
.hero__price-header p b { |
||||
font-weight: 600; |
||||
} |
||||
.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: 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 { |
||||
} |
||||
.hero__form-title p { |
||||
font-weight: 400; |
||||
font-size: 18px; |
||||
line-height: 130%; |
||||
letter-spacing: -0.02em; |
||||
text-align: center; |
||||
} |
||||
.hero__form-title p b { |
||||
font-weight: 600; |
||||
} |
||||
.hero__form-action { |
||||
} |
||||
.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: 102px; |
||||
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: 260px; |
||||
} |
||||
.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: #282828; */ |
||||
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); |
||||
/* background: #00071e; */ |
||||
/* -webkit-backdrop-filter: blur(2px); |
||||
backdrop-filter: blur(2px); */ |
||||
-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 { |
||||
opacity: 0; |
||||
} |
||||
|
||||
/* Стили для лептопов */ |
||||
/* @media only screen and (min-width: 992px) and (max-width: 1400px) { |
||||
.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: 23px; |
||||
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; |
||||
} |
||||
|
||||
@ -1,5 +1,185 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 576px) { |
||||
|
||||
|
||||
@media screen and (max-width: 576px) { |
||||
.hero__price { |
||||
margin-top: 24px; |
||||
} |
||||
.hero__content::after { |
||||
right: -320px; |
||||
top: 290px; |
||||
} |
||||
} |
||||
@media screen and (max-width: 540px) { |
||||
.header__container { |
||||
align-items: flex-start; |
||||
gap: 24px; |
||||
padding-bottom: 24px; |
||||
} |
||||
.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 p { |
||||
font-size: 12px; |
||||
} |
||||
.header__contacts { |
||||
flex-wrap: wrap; |
||||
width: 100%; |
||||
justify-content: flex-end; |
||||
row-gap: 24px; |
||||
} |
||||
.header__contacts button.btn { |
||||
} |
||||
.header__tel { |
||||
font-size: 20px; |
||||
margin: 0; |
||||
} |
||||
.hero { |
||||
padding-top: 170px; |
||||
} |
||||
} |
||||
@media screen and (max-width: 470px) { |
||||
h1 { |
||||
font-size: 39px; |
||||
text-align: left; |
||||
} |
||||
.hero__leftside { |
||||
align-items: flex-start; |
||||
} |
||||
.hero__price { |
||||
margin-top: 12px; |
||||
} |
||||
.hero__price-header p { |
||||
max-width: 160px; |
||||
} |
||||
.hero__content { |
||||
gap: 34px; |
||||
} |
||||
.hero__content::after { |
||||
opacity: 1; |
||||
right: -290px; |
||||
width: 520px; |
||||
height: 320px; |
||||
background-size: contain; |
||||
top: 280px; |
||||
} |
||||
.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; |
||||
border-radius: 10px; |
||||
} |
||||
.hero__price-header p { |
||||
font-size: 14px; |
||||
} |
||||
.hero__price-header span { |
||||
padding: 8px 12px; |
||||
border-radius: 10px; |
||||
font-size: 14px; |
||||
} |
||||
.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-header span::before { |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
.hero__price-content { |
||||
gap: 10px; |
||||
} |
||||
.header__logo { |
||||
/* flex-direction: column; |
||||
align-items: flex-start; */ |
||||
} |
||||
.header__logo p { |
||||
/* max-width: 100%; */ |
||||
} |
||||
.header__container { |
||||
align-items: center; |
||||
} |
||||
.header__tel { |
||||
font-size: 18px; |
||||
} |
||||
.hero__form { |
||||
gap: 20px; |
||||
padding: 20px 14px; |
||||
border-radius: 16px; |
||||
} |
||||
.hero__form-title p { |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
@media screen and (max-width: 390px) { |
||||
h1 { |
||||
font-size: 36px; |
||||
} |
||||
.header__logo img { |
||||
width: 46px; |
||||
} |
||||
.header__logo p { |
||||
font-size: 11px; |
||||
} |
||||
.header__tel { |
||||
font-size: 17px; |
||||
} |
||||
.hero__form-action select, |
||||
.hero__form-action input { |
||||
height: 60px; |
||||
border-radius: 12px; |
||||
} |
||||
} |
||||
@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: 44px; |
||||
} |
||||
.header__logo p { |
||||
font-size: 10px; |
||||
} |
||||
.header__tel { |
||||
font-size: 16.5px; |
||||
} |
||||
} |
||||
@ -1,5 +1,249 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
|
||||
*[class*='__container'] { |
||||
padding: 0 42px; |
||||
} |
||||
h1 { |
||||
font-size: 52px; |
||||
} |
||||
.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__tel { |
||||
order: 3; |
||||
margin-left: 14px; |
||||
} |
||||
.header__contacts button.btn p { |
||||
display: none; |
||||
} |
||||
.header__contacts button.btn { |
||||
width: 47px; |
||||
height: 47px; |
||||
border-radius: 9px; |
||||
position: relative; |
||||
padding: 0; |
||||
} |
||||
.header__contacts button.btn::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 button.btn { |
||||
width: 40px; |
||||
height: 40px; |
||||
} |
||||
.header__socials-link img, |
||||
.footer__socials-link img { |
||||
width: 24px; |
||||
height: 24px; |
||||
} |
||||
.header__contacts button.btn::before { |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
.header__tel, |
||||
.footer__tel { |
||||
font-size: 18px; |
||||
} |
||||
h1 { |
||||
font-size: 49px; |
||||
} |
||||
} |
||||
@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; |
||||
} |
||||
.header__socials-link, |
||||
.footer__socials-link, |
||||
.header__contacts button.btn { |
||||
width: 37px; |
||||
height: 37px; |
||||
} |
||||
.header__socials-link img, |
||||
.footer__socials-link img { |
||||
width: 22px; |
||||
height: 22px; |
||||
} |
||||
.header__contacts button.btn::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 { |
||||
padding: 10px 20px; |
||||
border-radius: 12px; |
||||
} |
||||
.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 span { |
||||
padding: 12px 16px; |
||||
border-radius: 12px; |
||||
font-size: 16px; |
||||
} |
||||
.hero__price-header span::before { |
||||
width: 19px; |
||||
height: 19px; |
||||
} |
||||
.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) { |
||||
|
||||
} |
||||
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: 1.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 196 KiB |
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 311 B |
|
After Width: | Height: | Size: 862 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 808 B |
|
After Width: | Height: | Size: 831 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,38 @@ |
||||
window.addEventListener('load', function () { |
||||
const preloader = document.querySelector('#preloader') |
||||
preloader.classList.add('hidden') |
||||
setTimeout(function () { |
||||
preloader.remove() |
||||
}, 500) |
||||
}) |
||||
|
||||
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,69 +1,207 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="ru"> |
||||
|
||||
<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>SEO title</title> |
||||
<title>Газобетонные блоки напрямую от производителя в Томске | Вектор</title> |
||||
<meta name="description" content="SEO Description"> |
||||
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0"> |
||||
|
||||
<!-- Базовые стили --> |
||||
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0"> |
||||
<link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0"> |
||||
<!-- Адаптив --> |
||||
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0"> |
||||
<link rel="stylesheet" media="screen and (max-width: 992px)" href="/assets/css/gp-style-tablet.css?v=1.0"> |
||||
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0"> |
||||
|
||||
|
||||
<!-- Яндекс.Вебмастер + Google Search Console --> |
||||
<meta name="yandex-verification" content="XXXXXXXXXXXXXXXXX" /> |
||||
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXX" /> |
||||
<!-- /Яндекс.Вебмастер + Google Search Console --> |
||||
|
||||
<!-- Yandex.Metrika counter --> |
||||
<script type="text/javascript"> |
||||
(function (m, e, t, r, i, k, a) { |
||||
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; |
||||
m[i].l = 1 * new Date(); |
||||
for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } } |
||||
k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a) |
||||
}) |
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); |
||||
|
||||
ym(XXXXXX, "init", { // XXXXXX - счетчик |
||||
clickmap: true, |
||||
trackLinks: true, |
||||
accurateTrackBounce: true, |
||||
webvisor: true, |
||||
ecommerce: "dataLayer" |
||||
}); |
||||
</script> |
||||
<noscript> |
||||
<div><img src="https://mc.yandex.ru/watch/85828806" style="position:absolute; left:-9999px;" alt="" /></div> |
||||
</noscript> |
||||
<!-- /Yandex.Metrika counter --> |
||||
<link rel="shortcut icon" href="assets/img/favicon.ico?v=1.0"> |
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> |
||||
|
||||
<link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0"> |
||||
<link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0"> |
||||
|
||||
<link rel="stylesheet" media="screen and (max-width: 992px)" href="assets/css/gp-style-tablet.css?v=1.0"> |
||||
<link rel="stylesheet" media="screen and (max-width: 576px)" href="assets/css/gp-style-mobile.css?v=1.0"> |
||||
</head> |
||||
<body> |
||||
|
||||
|
||||
<!-- Пример формы для отправки в Телеграмм (обработчик 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> |
||||
<body> |
||||
<div id="preloader" class="preloader"> |
||||
<div class="preloader__icon"> |
||||
</div> |
||||
</div> |
||||
<header class="header"> |
||||
<div class="header__container container flex flex-ac flex-jcsb"> |
||||
<div class="header__logo flex flex-ac gap-24"> |
||||
<img src="assets/img/logo.webp" width="84" height="64" alt="Официальный представитель завода СИБИТ в Томске"> |
||||
<p>Официальный представитель завода СИБИТ в Томске</p> |
||||
</div> |
||||
<div class="header__contacts flex flex-ac gap-42"> |
||||
<div class="header__socials flex flex-ac gap-10"> |
||||
<a href="https://t.me/+79234352557" target="_blank" class="header__socials-link"> |
||||
<img src="assets/img/tg.svg" width="27" height="27" alt="Мы в Telegram" title="Мы в Telegram"> |
||||
</a> |
||||
<a href="https://wa.me/+79234352557" target="_blank" class="header__socials-link"> |
||||
<img src="assets/img/wh.svg" width="27" height="27" alt="Мы в Whatsapp" title="Мы в Whatsapp"> |
||||
</a> |
||||
</div> |
||||
<a href="tel:+79234352557" class="header__tel" title="Позвоните нам">+7 (923) 435 25 57</a> |
||||
<button class="btn btn-small modal__btn" data-modal="request"> |
||||
<p>Обратный звонок</p> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="form__item"> |
||||
<input class="form__input" type="text" name="phone" required> |
||||
<label class="form__label">Номер телефона</label> |
||||
</header> |
||||
<main> |
||||
<section class="section hero"> |
||||
<div class="section__container container"> |
||||
<div class="hero__content"> |
||||
<div class="hero__leftside"> |
||||
<div class="hero__title"> |
||||
<h1><b>Газобетонные блоки</b> напрямую от производителя в Томске.</h1> |
||||
</div> |
||||
<input class="form__input btn" type="submit" value="Отправить"> |
||||
<div class="hero__desc"> |
||||
<p><b>Любой объем</b>, доставка от 1 дня</p> |
||||
</div> |
||||
<div class="hero__price"> |
||||
<div class="hero__price-header"> |
||||
<span>Акция месяца</span> |
||||
<p><b>Только до 30.09</b> розница по оптовым ценам</p> |
||||
</div> |
||||
<div class="hero__price-content"> |
||||
<div class="hero__price-stock"> |
||||
<span>от 5999 руб/м3</span> |
||||
<p>от 4999 руб/м3</p> |
||||
</div> |
||||
<div class="hero__price-unit"> |
||||
<p>за 1 поддон</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="hero__rightside"> |
||||
<div class="hero__form"> |
||||
<div class="hero__form-title"> |
||||
<p><b>Оставьте заявку</b>, чтобы рассчитать и зафиксировать стоимость</p> |
||||
</div> |
||||
<div class="hero__form-action"> |
||||
<form class="generalform" id="generalform" action=""> |
||||
<select name="types" id="types" required> |
||||
<option value disabled selected>Выберите тип блока</option> |
||||
<option value="Стеновые блоки">Стеновые блоки</option> |
||||
<option value="Перемычки">Перемычки</option> |
||||
<option value="Плиты">Плиты</option> |
||||
</select> |
||||
<select name="quantity" id="quantity" required> |
||||
<option value disabled selected>Укажите количество</option> |
||||
<option value="1-5 м3">1-5 м3</option> |
||||
<option value="5-10 м3">5-10 м3</option> |
||||
<option value="10-50 м3">10-50 м3</option> |
||||
<option value="50-100 м3">50-100 м3</option> |
||||
<option value="Более 100 м3">Более 100 м3</option> |
||||
</select> |
||||
<input type="tel" id="tel" name="tel" value="" placeholder="+7 (____) ___-__-__" required> |
||||
<button class="btn btn-big">Забронировать стоимость</button> |
||||
</form> |
||||
|
||||
|
||||
<script src="/assets/js/gp-main.js"></script> |
||||
</div> |
||||
<div class="hero__form-gift"> |
||||
<p>При заказе до 08.09</p> |
||||
<ul> |
||||
<li>пенополистирол в подарок</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="hero__advantages"> |
||||
<div class="hero__advantages-item"> |
||||
<div class="hero__advantages-icon"> |
||||
<img src="assets/img/advantages_icon1.svg" width="40" height="40" alt="Гарантия 50 лет"> |
||||
</div> |
||||
<p>Гарантия 50 лет</p> |
||||
</div> |
||||
<div class="hero__advantages-item"> |
||||
<div class="hero__advantages-icon"> |
||||
<img src="assets/img/advantages_icon2.svg" width="40" height="40" alt="Выгрузка кран/манипулятор"> |
||||
</div> |
||||
<p>Выгрузка с помощью</br>крана/манипулятора</p> |
||||
</div> |
||||
<div class="hero__advantages-item"> |
||||
<div class="hero__advantages-icon"> |
||||
<img src="assets/img/advantages_icon3.svg" width="40" height="40" |
||||
alt="Доставка от 1го дня по Томску и области до вашего объекта"> |
||||
</div> |
||||
<p>Доставка от 1го дня по Томску и области до вашего объекта</p> |
||||
</div> |
||||
<div class="hero__advantages-item"> |
||||
<div class="hero__advantages-icon"> |
||||
<img src="assets/img/advantages_icon4.svg" width="38" height="38" |
||||
alt="Большой ассортимент всегда в наличии"> |
||||
</div> |
||||
<p>Большой ассортимент всегда в наличии</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</main> |
||||
<footer class="footer"> |
||||
<div class="footer__container container"> |
||||
<div class="footer__top"> |
||||
<div class="footer__logo flex flex-ac gap-24"> |
||||
<img src="assets/img/footer-logo.webp" width="84" height="64" |
||||
alt="Официальный представитель завода СИБИТ в Томске"> |
||||
<p>ООО "Вектор"<br />Официальный дистрибьютор бренда Сибит в Томске и области</p> |
||||
</div> |
||||
<div class="footer__address"> |
||||
<p>г. Томск ул. Карла Маркса 63</p> |
||||
</div> |
||||
<div class="footer__contacts"> |
||||
<a href="tel:+79234352557" class="footer__tel" title="Позвоните нам">+7 (923) 435 25 57</a> |
||||
<div class="footer__socials flex flex-ac gap-10"> |
||||
<a href="https://t.me/+79234352557" target="_blank" class="footer__socials-link"> |
||||
<img src="assets/img/tg-white.svg" width="27" height="27" alt="Мы в Telegram" title="Мы в Telegram"> |
||||
</a> |
||||
<a href="https://wa.me/+79234352557" target="_blank" class="footer__socials-link"> |
||||
<img src="assets/img/wh-white.svg" width="27" height="27" alt="Мы в Whatsapp" title="Мы в Whatsapp"> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="footer__bottom"> |
||||
<p>© VEKTOR.RU Все права защищены</p> |
||||
<a href="#" target="_blank">Политика конфиденциальности</a> |
||||
<a href="#" class="modal__btn" data-modal="bank">Реквизиты компании</a> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
<section class="modal" data-id="request"> |
||||
<div class="modal__close"></div> |
||||
<div class="modal__content"> |
||||
<div class="modal__title"> |
||||
<p><b>Оставьте заявку</b>, и мы перезвоним в течение 5ти минут</p> |
||||
</div> |
||||
<div class="modal__form" id="modalform"> |
||||
<form action="" id="request"> |
||||
<input type="text" id="request_name" name="request_name" value="" placeholder="Введите имя" required=""> |
||||
<input type="tel" id="request_tel" name="request_tel" value="" placeholder="+7 (____) ___-__-__" required=""> |
||||
<button class="btn btn-big">Оставить заявку</button> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<section class="modal" data-id="success"> |
||||
<div class="modal__close"></div> |
||||
<div class="modal__content"> |
||||
<div class="modal__title"> |
||||
<p><b>Спасибо за обращение!</p> |
||||
</div> |
||||
<p style="text-align:center;">Наш специалист свяжется с вами в ближайшее рабочее время</p> |
||||
</div> |
||||
</section> |
||||
<section class="modal" data-id="bank"> |
||||
<div class="modal__close"></div> |
||||
<div class="modal__content"> |
||||
<span>Реквизиты компании:</span> |
||||
<p>ИП Созыкина Лариса Александровна</p> |
||||
<p>701404455332</p> |
||||
<p>г. Томск ул. Карла Маркса 63</p> |
||||
</div> |
||||
</section> |
||||
<div id="modal__bg"></div> |
||||
</body> |
||||
<script defer src="assets/js/script.js"></script> |
||||
<script defer src="send/ajax.js"></script> |
||||
|
||||
</html> |
||||
@ -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