Compare commits
9 Commits
project_co
...
master
| Author | SHA1 | Date |
|---|---|---|
GP
|
e67ea16299 | 7 months ago |
 Максим Максимов
|
d8f89ad9a9 | 7 months ago |
|
Максим Максимов
|
043a617c87 | 8 months ago |
|
Максим Максимов
|
b1afb0f09c | 1 year ago |
Max
|
4961f2b1c9 | 1 year ago |
|
Max
|
bf464fa933 | 1 year ago |
|
Max
|
326b1ce96c | 1 year ago |
|
Максим Максимов
|
8d05e0c8f7 | 1 year ago |
 kirill
|
543e43b9ba | 1 year ago |
@ -0,0 +1,133 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
|
||||||
|
# Runtime data |
||||||
|
pids |
||||||
|
*.pid |
||||||
|
*.seed |
||||||
|
*.pid.lock |
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover |
||||||
|
lib-cov |
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul |
||||||
|
coverage |
||||||
|
|
||||||
|
# nyc test coverage |
||||||
|
.nyc_output |
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) |
||||||
|
.grunt |
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/) |
||||||
|
bower_components |
||||||
|
|
||||||
|
# node-waf configuration |
||||||
|
.lock-wscript |
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html) |
||||||
|
build/Release |
||||||
|
|
||||||
|
# Dependency directories |
||||||
|
node_modules/ |
||||||
|
jspm_packages/ |
||||||
|
|
||||||
|
# TypeScript v1 declaration files |
||||||
|
typings/ |
||||||
|
|
||||||
|
# Optional npm cache directory |
||||||
|
.npm |
||||||
|
|
||||||
|
# Optional eslint cache |
||||||
|
.eslintcache |
||||||
|
|
||||||
|
# Optional REPL history |
||||||
|
.node_repl_history |
||||||
|
|
||||||
|
# Output of 'npm pack' |
||||||
|
*.tgz |
||||||
|
|
||||||
|
# Yarn Integrity file |
||||||
|
.yarn-integrity |
||||||
|
|
||||||
|
# dotenv environment variables file |
||||||
|
.env |
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/) |
||||||
|
.cache |
||||||
|
|
||||||
|
# next.js build output |
||||||
|
.next |
||||||
|
|
||||||
|
# nuxt.js build output |
||||||
|
.nuxt |
||||||
|
|
||||||
|
# Nuxt generate |
||||||
|
dist |
||||||
|
|
||||||
|
# vuepress build output |
||||||
|
.vuepress/dist |
||||||
|
|
||||||
|
# Serverless directories |
||||||
|
.serverless |
||||||
|
|
||||||
|
# IDE |
||||||
|
.idea |
||||||
|
.vscode |
||||||
|
config.js |
||||||
|
/yarn-error.log |
||||||
|
package-lock.json |
||||||
|
jsconfig.json |
||||||
|
|
||||||
|
|
||||||
|
# GP | Files ext |
||||||
|
*.sql |
||||||
|
*.tgz |
||||||
|
*.tar.gz |
||||||
|
*.tar |
||||||
|
*.rar |
||||||
|
*.zip |
||||||
|
*.wav |
||||||
|
*.flv |
||||||
|
*.db |
||||||
|
*.psd |
||||||
|
*.pdf |
||||||
|
*.doc |
||||||
|
*.docx |
||||||
|
*.txt |
||||||
|
*.text |
||||||
|
*.log |
||||||
|
*.config |
||||||
|
*.xml |
||||||
|
*.tbk |
||||||
|
*.csv |
||||||
|
*.json |
||||||
|
|
||||||
|
# GP | Dirs & files |
||||||
|
/bower_components/ |
||||||
|
/node_modules/ |
||||||
|
/nbproject/ |
||||||
|
/cache/ |
||||||
|
.cache/ |
||||||
|
/phpMyAdmin-* |
||||||
|
/timthumb_cache/ |
||||||
|
/webstat/ |
||||||
|
/.idea/ |
||||||
|
/.csscomb.json |
||||||
|
/.htaccess |
||||||
|
/sitemap*.xml |
||||||
|
/sftp-config.json |
||||||
|
/robots.txt |
||||||
|
/bower.json |
||||||
|
/.bowerrc |
||||||
|
/backup_rsync/ |
||||||
|
.bash_history |
||||||
|
.idea/ |
||||||
|
.fleet/ |
||||||
|
.DS_Store |
||||||
|
.config/ |
||||||
|
.bash* |
||||||
|
.vim* |
||||||
|
test*.php |
||||||
|
gp-test*.php |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
<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> |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
## **Требования к верстке** |
||||||
|
|
||||||
|
### **С точки зрения веб-разработки:** |
||||||
|
* верстаем на чистом 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,264 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<link rel="stylesheet" href="assets/font/stylesheet.css"> |
|
||||||
<link rel="stylesheet" href="assets/css/style.css"> |
|
||||||
<title>Document</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div class="wrapper"> |
|
||||||
<header class="header"> |
|
||||||
<div class="cont"> |
|
||||||
<div class="header_block"> |
|
||||||
<a href="#" class="header_logo"> |
|
||||||
<img src="assets/img/icons/logo.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="header_navs"> |
|
||||||
<a href="#" class="header_nav">Главная</a> |
|
||||||
<a href="#" class="header_nav">продукция</a> |
|
||||||
<a href="#" class="header_nav">О cosmopet</a> |
|
||||||
<a href="#" class="header_nav">Блог</a> |
|
||||||
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a> |
|
||||||
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
<button class="header_bars"><img src="assets/img/icons/bars2.svg" alt=""></button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="header_mob"> |
|
||||||
<button class="header_close"><img src="assets/img/icons/i-close.svg" alt=""></button> |
|
||||||
<div class="header_navs"> |
|
||||||
<a href="#" class="header_nav">Главная</a> |
|
||||||
<a href="#" class="header_nav">продукция</a> |
|
||||||
<a href="#" class="header_nav">О cosmopet</a> |
|
||||||
<a href="#" class="header_nav">Блог</a> |
|
||||||
<div class="header_links"> |
|
||||||
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a> |
|
||||||
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="header_mob-bg"></div> |
|
||||||
</header> |
|
||||||
<section class="account"> |
|
||||||
<div class="cont"> |
|
||||||
<a href="#" class="back_link"> |
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"> |
|
||||||
<path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/> |
|
||||||
</svg> |
|
||||||
вернуться |
|
||||||
</a> |
|
||||||
<h1 class="section_title">личный кабинет</h1> |
|
||||||
<p class="section_desc">Добро пожаловать, Сироб, здесь вы можете управлять своим профилем, редактировать информацию о питомцах, проверять статус по заказам и подписке</p> |
|
||||||
<div class="account_row"> |
|
||||||
<div class="for_border"> |
|
||||||
<a href="#" class="account_item account_item_big flex-column"> |
|
||||||
<img src="assets/img/account1.png" alt=""> |
|
||||||
<div> |
|
||||||
<div class="account_item_title">Профиль</div> |
|
||||||
<p>Посмотреть или изменить ваш профиль</p> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<div class="account_right"> |
|
||||||
<a href="#" class="account_item bg_black"> |
|
||||||
<img src="assets/img/animal_image3.png" alt="" class="animal_image"> |
|
||||||
<div class="account_texts"> |
|
||||||
<div class="account_item_title">Питомцы</div> |
|
||||||
<p>Создать профили ваших питомцев</p> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
<a href="#" class="account_item"> |
|
||||||
<img src="assets/img/account2.png" alt=""> |
|
||||||
<div class="account_texts"> |
|
||||||
<div class="account_item_title">Заказы</div> |
|
||||||
<p>Проверить дату заказа или просмотреть их историю</p> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<a href="#" class="account_item bg_black"> |
|
||||||
<img src="assets/img/account3.png" alt=""> |
|
||||||
<div class="account_texts"> |
|
||||||
<div class="account_item_title">Подписка на корм</div> |
|
||||||
<p>скоро</p> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
<div class="for_border"> |
|
||||||
<a href="#" class="account_item"> |
|
||||||
<img src="assets/img/account4.png" alt=""> |
|
||||||
<div class="account_texts"> |
|
||||||
<div class="account_item_title">FAQ</div> |
|
||||||
<p>У вас есть вопросы? Возможно, здесь уже есть ответ</p> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<footer class="footer footer2"> |
|
||||||
<div class="cont"> |
|
||||||
<div class="footer_block"> |
|
||||||
<div class="footer_menu"> |
|
||||||
<a href="#" class="footer_logo"><img src="assets/img/icons/logo2.svg" alt=""></a> |
|
||||||
<div class="footer_navs"> |
|
||||||
<a href="#" class="footer_nav">Главная</a> |
|
||||||
<a href="#" class="footer_nav">продукция</a> |
|
||||||
<a href="#" class="footer_nav">О cosmopet</a> |
|
||||||
<a href="#" class="footer_nav">Блог</a> |
|
||||||
<a href="#" class="footer_link"><img src="assets/img/icons/i-user2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_link"><img src="assets/img/icons/i-card2.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_box"> |
|
||||||
<h2 class="footer_box-title">Отзывы и предложения <img src="assets/img/icons/footer_line-mob.svg" alt="" class="footer_line-mob1"></h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line1"> |
|
||||||
<a href="#" class="footer_box-link">pro@cosmopet.shop</a> |
|
||||||
</div> |
|
||||||
<div class="footer_box"> |
|
||||||
<h2 class="footer_box-title">связь с ветеринаром <img src="assets/img/icons/footer_line-mob2.svg" alt="" class="footer_line-mob2"></h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line2"> |
|
||||||
<a href="#" class="footer_box-link">vetvopros@cosmopet.shop</a> |
|
||||||
</div> |
|
||||||
<div class="footer_form"> |
|
||||||
<div class="footer_form-info"> |
|
||||||
<div class="footer_form-title"> |
|
||||||
<h2>Обратная связь</h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt=""> |
|
||||||
</div> |
|
||||||
<div class="footer_form-inp"> |
|
||||||
<input type="text" placeholder="ваше имя"> |
|
||||||
<input type="email" placeholder="почта"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="footer_form-textarea"> |
|
||||||
<textarea placeholder="обращение"></textarea> |
|
||||||
<button class="footer_form-btn btn--black-hover">отправить</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_social"> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-vk2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex2.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_bottom"> |
|
||||||
<a href="#">123182 г. Москва, 4-й Красногорский пр., д. 2/4, стр. 1, этаж/ком. 3/1</a> |
|
||||||
<a href="#">Соглашение о конфиденциальности</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</footer> |
|
||||||
<div class="modal auth_modal auth1"> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
<div class="d-flex flex-column align-items-center gap-15"> |
|
||||||
<a href="#" class="main_btn login_btn">Вход</a> |
|
||||||
<a href="#" class="main_btn register_btn">Регистрация</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<form class="modal auth_modal auth2"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Регистрация</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="text" class="input" placeholder="Имя"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="tel" class="input" placeholder="Телефон"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="email" class="input" placeholder="Email"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="password" class="input error" placeholder="Пароль"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<div class="checkmark"></div> |
|
||||||
<input type="checkbox"> |
|
||||||
<p class="opacity_txt">Согласие на получение рекламных предложений</p> |
|
||||||
</label> |
|
||||||
<button class="main_btn">Регистрация</button> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth3"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Регистрация</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
<button class="main_btn">Регистрация</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth4"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Вход</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="text" class="input" placeholder="Телефон или Email"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<a href="#" class="conditions">Забыли пароль? </a> |
|
||||||
<button class="main_btn">Вход</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth5"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Вход</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
<button class="main_btn">Вход</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<div class="modal_back"></div> |
|
||||||
</div> |
|
||||||
<script src="assets/js/main.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,241 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<link rel="stylesheet" href="assets/font/stylesheet.css"> |
|
||||||
<link rel="stylesheet" href="assets/css/style.css"> |
|
||||||
<title>Document</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div class="wrapper"> |
|
||||||
<header class="header"> |
|
||||||
<div class="cont"> |
|
||||||
<div class="header_block"> |
|
||||||
<a href="#" class="header_logo"> |
|
||||||
<img src="assets/img/icons/logo.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="header_navs"> |
|
||||||
<a href="#" class="header_nav">Главная</a> |
|
||||||
<a href="#" class="header_nav">продукция</a> |
|
||||||
<a href="#" class="header_nav">О cosmopet</a> |
|
||||||
<a href="#" class="header_nav">Блог</a> |
|
||||||
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a> |
|
||||||
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
<button class="header_bars"><img src="assets/img/icons/bars2.svg" alt=""></button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="header_mob"> |
|
||||||
<button class="header_close"><img src="assets/img/icons/i-close.svg" alt=""></button> |
|
||||||
<div class="header_navs"> |
|
||||||
<a href="#" class="header_nav">Главная</a> |
|
||||||
<a href="#" class="header_nav">продукция</a> |
|
||||||
<a href="#" class="header_nav">О cosmopet</a> |
|
||||||
<a href="#" class="header_nav">Блог</a> |
|
||||||
<div class="header_links"> |
|
||||||
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a> |
|
||||||
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="header_mob-bg"></div> |
|
||||||
</header> |
|
||||||
<section class="adress"> |
|
||||||
<div class="cont" method="post"> |
|
||||||
<a href="#" class="back_link"> |
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"> |
|
||||||
<path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/> |
|
||||||
</svg> |
|
||||||
вернуться |
|
||||||
</a> |
|
||||||
<div class="section_title d-flex align-items-center justify-content-between"> |
|
||||||
<h1>ПУНКТ ВЫДАЧи</h1> |
|
||||||
<a href="#" class="back_link"> |
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> |
|
||||||
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> |
|
||||||
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> |
|
||||||
</svg> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<form class="adress_row"> |
|
||||||
<div class="adress_left"> |
|
||||||
<input type="text" class="input" placeholder="Найти по адресу"> |
|
||||||
<div class="place_title">ПОСТАМАТ <br> Москва, Матвеевская улица, 36к1</div> |
|
||||||
</div> |
|
||||||
<div class="adress_right"> |
|
||||||
<button class="main_btn">ПРИВЕЗТИ СЮДА</button> |
|
||||||
<p>Доставка завтра, бесплатно</p> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<div class="map_wrap"> |
|
||||||
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A4cb895299bc13a65693266ba045d74f4b2c4c50badfabae1f023be32128bbd1e&source=constructor" width="1000" height="572" frameborder="0"></iframe> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<footer class="footer footer2"> |
|
||||||
<div class="cont"> |
|
||||||
<div class="footer_block"> |
|
||||||
<div class="footer_menu"> |
|
||||||
<a href="#" class="footer_logo"><img src="assets/img/icons/logo2.svg" alt=""></a> |
|
||||||
<div class="footer_navs"> |
|
||||||
<a href="#" class="footer_nav">Главная</a> |
|
||||||
<a href="#" class="footer_nav">продукция</a> |
|
||||||
<a href="#" class="footer_nav">О cosmopet</a> |
|
||||||
<a href="#" class="footer_nav">Блог</a> |
|
||||||
<a href="#" class="footer_link"><img src="assets/img/icons/i-user2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_link"><img src="assets/img/icons/i-card2.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_box"> |
|
||||||
<h2 class="footer_box-title">Отзывы и предложения <img src="assets/img/icons/footer_line-mob.svg" alt="" class="footer_line-mob1"></h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line1"> |
|
||||||
<a href="#" class="footer_box-link">pro@cosmopet.shop</a> |
|
||||||
</div> |
|
||||||
<div class="footer_box"> |
|
||||||
<h2 class="footer_box-title">связь с ветеринаром <img src="assets/img/icons/footer_line-mob2.svg" alt="" class="footer_line-mob2"></h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line2"> |
|
||||||
<a href="#" class="footer_box-link">vetvopros@cosmopet.shop</a> |
|
||||||
</div> |
|
||||||
<div class="footer_form"> |
|
||||||
<div class="footer_form-info"> |
|
||||||
<div class="footer_form-title"> |
|
||||||
<h2>Обратная связь</h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt=""> |
|
||||||
</div> |
|
||||||
<div class="footer_form-inp"> |
|
||||||
<input type="text" placeholder="ваше имя"> |
|
||||||
<input type="email" placeholder="почта"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="footer_form-textarea"> |
|
||||||
<textarea placeholder="обращение"></textarea> |
|
||||||
<button class="footer_form-btn btn--black-hover">отправить</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_social"> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-vk2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex2.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_bottom"> |
|
||||||
<a href="#">123182 г. Москва, 4-й Красногорский пр., д. 2/4, стр. 1, этаж/ком. 3/1</a> |
|
||||||
<a href="#">Соглашение о конфиденциальности</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</footer> |
|
||||||
<div class="modal auth_modal auth1"> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
<div class="d-flex flex-column align-items-center gap-15"> |
|
||||||
<a href="#" class="main_btn login_btn">Вход</a> |
|
||||||
<a href="#" class="main_btn register_btn">Регистрация</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<form class="modal auth_modal auth2"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Регистрация</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="text" class="input" placeholder="Имя"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="tel" class="input" placeholder="Телефон"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="email" class="input" placeholder="Email"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="password" class="input error" placeholder="Пароль"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<div class="checkmark"></div> |
|
||||||
<input type="checkbox"> |
|
||||||
<p class="opacity_txt">Согласие на получение рекламных предложений</p> |
|
||||||
</label> |
|
||||||
<button class="main_btn">Регистрация</button> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth3"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Регистрация</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
<button class="main_btn">Регистрация</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth4"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Вход</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="text" class="input" placeholder="Телефон или Email"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<a href="#" class="conditions">Забыли пароль? </a> |
|
||||||
<button class="main_btn">Вход</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth5"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Вход</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
<button class="main_btn">Вход</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<div class="modal_back"></div> |
|
||||||
</div> |
|
||||||
<script src="assets/js/main.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,241 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<link rel="stylesheet" href="assets/font/stylesheet.css"> |
|
||||||
<link rel="stylesheet" href="assets/css/style.css"> |
|
||||||
<title>Document</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div class="wrapper"> |
|
||||||
<header class="header"> |
|
||||||
<div class="cont"> |
|
||||||
<div class="header_block"> |
|
||||||
<a href="#" class="header_logo"> |
|
||||||
<img src="assets/img/icons/logo.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="header_navs"> |
|
||||||
<a href="#" class="header_nav">Главная</a> |
|
||||||
<a href="#" class="header_nav">продукция</a> |
|
||||||
<a href="#" class="header_nav">О cosmopet</a> |
|
||||||
<a href="#" class="header_nav">Блог</a> |
|
||||||
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a> |
|
||||||
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
<button class="header_bars"><img src="assets/img/icons/bars2.svg" alt=""></button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="header_mob"> |
|
||||||
<button class="header_close"><img src="assets/img/icons/i-close.svg" alt=""></button> |
|
||||||
<div class="header_navs"> |
|
||||||
<a href="#" class="header_nav">Главная</a> |
|
||||||
<a href="#" class="header_nav">продукция</a> |
|
||||||
<a href="#" class="header_nav">О cosmopet</a> |
|
||||||
<a href="#" class="header_nav">Блог</a> |
|
||||||
<div class="header_links"> |
|
||||||
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a> |
|
||||||
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="header_mob-bg"></div> |
|
||||||
</header> |
|
||||||
<section class="adress"> |
|
||||||
<div class="cont" method="post"> |
|
||||||
<a href="#" class="back_link"> |
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"> |
|
||||||
<path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/> |
|
||||||
</svg> |
|
||||||
вернуться |
|
||||||
</a> |
|
||||||
<div class="section_title d-flex align-items-center justify-content-between"> |
|
||||||
<h1>Адрес доставки</h1> |
|
||||||
<a href="#" class="back_link"> |
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> |
|
||||||
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> |
|
||||||
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> |
|
||||||
</svg> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<form class="adress_row"> |
|
||||||
<div class="adress_left"> |
|
||||||
<input type="text" class="input" placeholder="Введите адрес"> |
|
||||||
<div class="place_title">Москва, Матвеевская улица, 36к2, квартира 98</div> |
|
||||||
</div> |
|
||||||
<div class="adress_right"> |
|
||||||
<button class="main_btn">ПРИВЕЗТИ СЮДА</button> |
|
||||||
<p>Доставка завтра, бесплатно</p> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<div class="map_wrap"> |
|
||||||
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A4cb895299bc13a65693266ba045d74f4b2c4c50badfabae1f023be32128bbd1e&source=constructor" width="1000" height="572" frameborder="0"></iframe> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<footer class="footer footer2"> |
|
||||||
<div class="cont"> |
|
||||||
<div class="footer_block"> |
|
||||||
<div class="footer_menu"> |
|
||||||
<a href="#" class="footer_logo"><img src="assets/img/icons/logo2.svg" alt=""></a> |
|
||||||
<div class="footer_navs"> |
|
||||||
<a href="#" class="footer_nav">Главная</a> |
|
||||||
<a href="#" class="footer_nav">продукция</a> |
|
||||||
<a href="#" class="footer_nav">О cosmopet</a> |
|
||||||
<a href="#" class="footer_nav">Блог</a> |
|
||||||
<a href="#" class="footer_link"><img src="assets/img/icons/i-user2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_link"><img src="assets/img/icons/i-card2.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_box"> |
|
||||||
<h2 class="footer_box-title">Отзывы и предложения <img src="assets/img/icons/footer_line-mob.svg" alt="" class="footer_line-mob1"></h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line1"> |
|
||||||
<a href="#" class="footer_box-link">pro@cosmopet.shop</a> |
|
||||||
</div> |
|
||||||
<div class="footer_box"> |
|
||||||
<h2 class="footer_box-title">связь с ветеринаром <img src="assets/img/icons/footer_line-mob2.svg" alt="" class="footer_line-mob2"></h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line2"> |
|
||||||
<a href="#" class="footer_box-link">vetvopros@cosmopet.shop</a> |
|
||||||
</div> |
|
||||||
<div class="footer_form"> |
|
||||||
<div class="footer_form-info"> |
|
||||||
<div class="footer_form-title"> |
|
||||||
<h2>Обратная связь</h2> |
|
||||||
<img src="assets/img/icons/footer_line2.svg" alt=""> |
|
||||||
</div> |
|
||||||
<div class="footer_form-inp"> |
|
||||||
<input type="text" placeholder="ваше имя"> |
|
||||||
<input type="email" placeholder="почта"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="footer_form-textarea"> |
|
||||||
<textarea placeholder="обращение"></textarea> |
|
||||||
<button class="footer_form-btn btn--black-hover">отправить</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_social"> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-vk2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg2.svg" alt=""></a> |
|
||||||
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex2.svg" alt=""></a> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="footer_bottom"> |
|
||||||
<a href="#">123182 г. Москва, 4-й Красногорский пр., д. 2/4, стр. 1, этаж/ком. 3/1</a> |
|
||||||
<a href="#">Соглашение о конфиденциальности</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</footer> |
|
||||||
<div class="modal auth_modal auth1"> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
<div class="d-flex flex-column align-items-center gap-15"> |
|
||||||
<a href="#" class="main_btn login_btn">Вход</a> |
|
||||||
<a href="#" class="main_btn register_btn">Регистрация</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<form class="modal auth_modal auth2"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Регистрация</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="text" class="input" placeholder="Имя"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="tel" class="input" placeholder="Телефон"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="email" class="input" placeholder="Email"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="password" class="input error" placeholder="Пароль"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<div class="checkmark"></div> |
|
||||||
<input type="checkbox"> |
|
||||||
<p class="opacity_txt">Согласие на получение рекламных предложений</p> |
|
||||||
</label> |
|
||||||
<button class="main_btn">Регистрация</button> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth3"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Регистрация</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
<button class="main_btn">Регистрация</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth4"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Вход</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="text" class="input" placeholder="Телефон или Email"> |
|
||||||
<p>error</p> |
|
||||||
</label> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<a href="#" class="conditions">Забыли пароль? </a> |
|
||||||
<button class="main_btn">Вход</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<form class="modal auth_modal auth5"> |
|
||||||
<div class="modal_top"> |
|
||||||
<a href="#" class="back_btn"> |
|
||||||
<img src="assets/img/icons/i-back.svg" alt=""> |
|
||||||
</a> |
|
||||||
<div class="modal_title">Вход</div> |
|
||||||
<span class="plus plus_black"> |
|
||||||
<img src="assets/img/icons/i-plus.svg" alt=""> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="modal_inputs"> |
|
||||||
<label> |
|
||||||
<input type="password" class="input" placeholder="Код"> |
|
||||||
<p>Пароль не должен содержать знаков !”№@#-</p> |
|
||||||
</label> |
|
||||||
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
|
||||||
<button class="main_btn">Вход</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
<div class="modal_back"></div> |
|
||||||
</div> |
|
||||||
<script src="assets/js/main.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/* Переменные, шрифты, UI kit */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
ШАБЛОН использования глобальных переменных: |
||||||
|
|
||||||
|
:root { |
||||||
|
--main-text: #e1667c; |
||||||
|
--main-color: #8da6cb; |
||||||
|
--font-family: "Craftwork Grotesk", sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
*/ |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
/* Основные стили для компьютера */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* писать сюда... */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Стили для лептопов */ |
||||||
|
/* @media only screen and (min-width: 992px) and (max-width: 1400px) { |
||||||
|
|
||||||
|
} */ |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
/* Стили для мобильных устройств */ |
||||||
|
@media only screen and (max-width: 576px) { |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
/* Стили для планшетов */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
/* Стили для ультрашироких экранов */ |
||||||
|
@media only screen and (min-width: 1400px) { |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
/*! 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 */ |
||||||
@ -0,0 +1 @@ |
|||||||
|
*{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} |
||||||
@ -1,54 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: 'Craftwork Grotesk'; |
|
||||||
src: url('CraftworkGrotesk-Heavy.woff2') format('woff2'), |
|
||||||
url('CraftworkGrotesk-Heavy.woff') format('woff'); |
|
||||||
font-weight: 900; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Craftwork Grotesk'; |
|
||||||
src: url('CraftworkGrotesk-Bold.woff2') format('woff2'), |
|
||||||
url('CraftworkGrotesk-Bold.woff') format('woff'); |
|
||||||
font-weight: bold; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Craftwork Grotesk Semi'; |
|
||||||
src: url('CraftworkGrotesk-SemiBold.woff2') format('woff2'), |
|
||||||
url('CraftworkGrotesk-SemiBold.woff') format('woff'); |
|
||||||
font-weight: 600; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Craftwork Grotesk'; |
|
||||||
src: url('CraftworkGrotesk.woff2') format('woff2'), |
|
||||||
url('CraftworkGrotesk.woff') format('woff'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Craftwork Grotesk'; |
|
||||||
src: url('CraftworkGrotesk-Regular.woff2') format('woff2'), |
|
||||||
url('CraftworkGrotesk-Regular.woff') format('woff'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Craftwork Grotesk'; |
|
||||||
src: url('CraftworkGrotesk-Medium.woff2') format('woff2'), |
|
||||||
url('CraftworkGrotesk-Medium.woff') format('woff'); |
|
||||||
font-weight: 500; |
|
||||||
font-style: normal; |
|
||||||
font-display: swap; |
|
||||||
} |
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 598 B |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 976 B |
|
Before Width: | Height: | Size: 1003 B |
|
Before Width: | Height: | Size: 476 B |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 232 KiB |
|
Before Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 170 B |
|
Before Width: | Height: | Size: 170 B |
|
Before Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 424 B |
|
Before Width: | Height: | Size: 598 B |
|
Before Width: | Height: | Size: 850 B |
|
Before Width: | Height: | Size: 976 B |
|
Before Width: | Height: | Size: 1003 B |
|
Before Width: | Height: | Size: 476 B |
|
Before Width: | Height: | Size: 240 B |
|
Before Width: | Height: | Size: 319 B |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 598 B |
|
Before Width: | Height: | Size: 257 B |
|
Before Width: | Height: | Size: 339 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 997 KiB |
|
Before Width: | Height: | Size: 201 KiB |