Compare commits
5 Commits
master
...
project_co
| Author | SHA1 | Date |
|---|---|---|
 Андрей Гнитецкий
|
8af2afc108 | 11 months ago |
|
freelancer
|
8c51488478 | 11 months ago |
shahboz
|
804d1c68ad | 11 months ago |
|
Андрей Гнитецкий
|
cc7b5c4091 | 11 months ago |
 Антон
|
b9f0ea69f4 | 1 year ago |
@ -1,133 +0,0 @@ |
||||
# 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 |
||||
@ -1,14 +0,0 @@ |
||||
<IfModule mod_rewrite.c> |
||||
# Редирект: ...// -> .../ |
||||
RewriteCond %{REQUEST_URI} (.*)\/\/$ |
||||
RewriteRule ^(.*)$ https://%{HTTP_HOST}/%1/ [R=301,L] |
||||
|
||||
# Редирект: с www -> без www |
||||
RewriteCond %{HTTP_HOST} ^www\.(.*)$ |
||||
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] |
||||
|
||||
# Редирект: HTTP -> HTTPS |
||||
RewriteCond %{HTTP:X-Forwarded-Proto} !https |
||||
RewriteCond %{HTTPS} off |
||||
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] |
||||
</IfModule> |
||||
@ -1,84 +0,0 @@ |
||||
## **Требования к верстке** |
||||
|
||||
### **С точки зрения веб-разработки:** |
||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
||||
* соблюдаем Scope-ориентированный подход: |
||||
- каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта. |
||||
|
||||
- пример: <br> |
||||
|
||||
HTML: |
||||
``` |
||||
<section class="my-namespace"> |
||||
<h1>Новый заголовок</h1> |
||||
<button class="my-button">Кнопка</button> |
||||
</section> |
||||
``` |
||||
|
||||
CSS: |
||||
|
||||
``` |
||||
.my-namespace h1 { |
||||
font-size: 24px; |
||||
color: #333; |
||||
} |
||||
|
||||
.my-namespace .my-button { |
||||
background-color: #007BFF; |
||||
color: #fff; |
||||
} |
||||
``` |
||||
|
||||
|
||||
* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
||||
`block-name__elem-name--mod-name--mod-val` |
||||
+ имена записываются латиницей в нижнем регистре |
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) |
||||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. |
||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы |
||||
* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил. |
||||
* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*) |
||||
|
||||
### **С точки зрения SEO:** |
||||
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. |
||||
* на странице должен быть только один заголовок первого уровня (h1) |
||||
* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 |
||||
* для кнопок, нажатие на которые не требует редиректа используем тег \<button\>, а не \<a\> |
||||
* для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке |
||||
|
||||
|
||||
## **Порядок работы** |
||||
|
||||
### **Подготовка окружения для локальной разработки** |
||||
1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git` |
||||
|
||||
заменить переменную: |
||||
`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS) |
||||
|
||||
2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}` |
||||
3. Приступить к локальной разработке в созданной ветке |
||||
4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}` |
||||
- во время push для авторизации понадобиться логин/пароль: `freelancer/freelancerfreelancer00` |
||||
5. Отписать в чат, чтоб руководитель проектом посмотрел результат и выкачал его на тестовый стенд |
||||
|
||||
в командах заменить переменные: |
||||
`${project_name}` -- условное названия проекта (как варинат использовать домен сайта) |
||||
`${name}` -- имя/ник исполнителя |
||||
|
||||
|
||||
## **Оптимальный порядок непосредственно в процессе верстки** |
||||
1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css` |
||||
2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css` |
||||
3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. |
||||
Саму HTML-верстку для UI kit делать в файле `ui_kit.html` |
||||
3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css` |
||||
|
||||
|
||||
### **Примечания** |
||||
|
||||
Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв. |
||||
@ -0,0 +1,264 @@ |
||||
<!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> |
||||
@ -0,0 +1,241 @@ |
||||
<!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> |
||||
@ -0,0 +1,241 @@ |
||||
<!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> |
||||
@ -1,16 +0,0 @@ |
||||
/* Переменные, шрифты, UI kit */ |
||||
|
||||
|
||||
|
||||
|
||||
/* |
||||
|
||||
ШАБЛОН использования глобальных переменных: |
||||
|
||||
:root { |
||||
--main-text: #e1667c; |
||||
--main-color: #8da6cb; |
||||
--font-family: "Craftwork Grotesk", sans-serif; |
||||
} |
||||
|
||||
*/ |
||||
@ -1,18 +0,0 @@ |
||||
/* Основные стили для компьютера */ |
||||
|
||||
|
||||
|
||||
/* писать сюда... */ |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Стили для лептопов */ |
||||
/* @media only screen and (min-width: 992px) and (max-width: 1400px) { |
||||
|
||||
} */ |
||||
@ -1,5 +0,0 @@ |
||||
/* Стили для мобильных устройств */ |
||||
@media only screen and (max-width: 576px) { |
||||
|
||||
|
||||
} |
||||
@ -1,5 +0,0 @@ |
||||
/* Стили для планшетов */ |
||||
@media only screen and (max-width: 992px) { |
||||
|
||||
|
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
/* Стили для ультрашироких экранов */ |
||||
@media only screen and (min-width: 1400px) { |
||||
|
||||
} |
||||
@ -1,2 +0,0 @@ |
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
||||
/*# sourceMappingURL=normalize.min.css.map */ |
||||
@ -1 +0,0 @@ |
||||
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
||||
@ -0,0 +1,54 @@ |
||||
@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; |
||||
} |
||||
|
||||
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 598 B |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 976 B |
|
After Width: | Height: | Size: 1003 B |
|
After Width: | Height: | Size: 476 B |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 312 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 170 B |
|
After Width: | Height: | Size: 170 B |
|
After Width: | Height: | Size: 214 B |
|
After Width: | Height: | Size: 424 B |
|
After Width: | Height: | Size: 598 B |
|
After Width: | Height: | Size: 850 B |
|
After Width: | Height: | Size: 976 B |
|
After Width: | Height: | Size: 1003 B |
|
After Width: | Height: | Size: 476 B |
|
After Width: | Height: | Size: 240 B |
|
After Width: | Height: | Size: 319 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 598 B |
|
After Width: | Height: | Size: 257 B |
|
After Width: | Height: | Size: 339 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 997 KiB |
|
After Width: | Height: | Size: 201 KiB |