parent
b9f0ea69f4
commit
cc7b5c4091
@ -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,35 +0,0 @@ |
|||||||
# Требования к верстке |
|
||||||
|
|
||||||
|
|
||||||
## С точки зрения веб-разработки: |
|
||||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.) |
|
||||||
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**: |
|
||||||
`block-name__elem-name--mod-name--mod-val` |
|
||||||
+ имена записываются латиницей в нижнем регистре |
|
||||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-) |
|
||||||
+ имя элемента отделяется от имени блока двумя подчеркиваниями (__) |
|
||||||
+ модификаторы отделяются от имения блока или элемента двумя дефисами (--) |
|
||||||
+ значение модификатора отделяется от его имени двумя дефисами (--) |
|
||||||
* из конечного HTML-файла убрать все комментарии, если такие имеются |
|
||||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4) |
|
||||||
<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить 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. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css |
|
||||||
2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css |
|
||||||
3. Далее начинать стоит с верстки 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,306 @@ |
|||||||
|
<!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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,283 @@ |
|||||||
|
<!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> |
||||||
|
<h1 class="section_title d-flex align-items-center justify-content-between"> |
||||||
|
ПУНКТ ВЫДАЧи |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,283 @@ |
|||||||
|
<!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> |
||||||
|
<h1 class="section_title d-flex align-items-center justify-content-between"> |
||||||
|
Адрес доставки |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,11 +0,0 @@ |
|||||||
/* |
|
||||||
|
|
||||||
ШАБЛОН использования глобальных переменных: |
|
||||||
|
|
||||||
:root { |
|
||||||
--main-text: #e1667c; |
|
||||||
--main-color: #8da6cb; |
|
||||||
--font-family: "Craftwork Grotesk", sans-serif; |
|
||||||
} |
|
||||||
|
|
||||||
*/ |
|
||||||
@ -1,4 +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) { |
|
||||||
|
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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: 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: 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: 4.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
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: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 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: 997 KiB |
|
After Width: | Height: | Size: 201 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 596 B |
@ -0,0 +1,223 @@ |
|||||||
|
window.addEventListener('DOMContentLoaded', function(){ |
||||||
|
let headerBars = document.querySelector('.header_bars'); |
||||||
|
let headerMob = document.querySelector('.header_mob'); |
||||||
|
let headerClose = document.querySelector('.header_close'); |
||||||
|
let headerMobBg = document.querySelector('.header_mob-bg'); |
||||||
|
let body = document.querySelector('body'); |
||||||
|
|
||||||
|
headerBars.addEventListener('click', function () { |
||||||
|
headerMob.classList.add('active'); |
||||||
|
body.classList.add('no-scroll'); |
||||||
|
}); |
||||||
|
|
||||||
|
function removeActiveClass() { |
||||||
|
headerMob.classList.remove('active'); |
||||||
|
body.classList.remove('no-scroll'); |
||||||
|
} |
||||||
|
|
||||||
|
headerClose.addEventListener('click', removeActiveClass); |
||||||
|
headerMobBg.addEventListener('click', removeActiveClass); |
||||||
|
|
||||||
|
if (document.querySelector('.change_block')) { |
||||||
|
// document.querySelector('.change_block.active').style.height = document.querySelector('.change_block.active').scrollHeight+'px'
|
||||||
|
|
||||||
|
document.getElementById('select_pets').addEventListener('click', function() { |
||||||
|
document.querySelector('.change_block:has(#select_pets)').classList.remove('active') |
||||||
|
this.parentElement.style.height = '0px'; |
||||||
|
var nextChangeBlock = this.parentElement.nextElementSibling; |
||||||
|
nextChangeBlock.style.height = `${nextChangeBlock.scrollHeight}px`; |
||||||
|
})
|
||||||
|
} |
||||||
|
|
||||||
|
if (document.querySelector('.pet_photo')) { |
||||||
|
let fileInput = document.querySelector('.pet_photo input[type="file"]'); |
||||||
|
|
||||||
|
fileInput.addEventListener('change', function() { |
||||||
|
let file = fileInput.files[0]; |
||||||
|
if (file) { |
||||||
|
let fileURL = URL.createObjectURL(file); |
||||||
|
let previewImage = document.querySelector('.pet_photo .preview'); |
||||||
|
|
||||||
|
previewImage.src = fileURL; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (document.querySelector('.collapse_input .plus')) { |
||||||
|
document.querySelectorAll('.collapse_input .plus').forEach(function(plusBtn) { |
||||||
|
plusBtn.addEventListener('click', function() { |
||||||
|
let prevInput = this.previousElementSibling; |
||||||
|
let nextInput = this.nextElementSibling; |
||||||
|
prevInput.classList.add('active'); |
||||||
|
this.classList.add('active'); |
||||||
|
nextInput.remove() |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (document.querySelectorAll('.counter .minus')) { |
||||||
|
document.querySelectorAll('.counter .minus').forEach(function(minusBtn) { |
||||||
|
minusBtn.addEventListener('click', function() { |
||||||
|
let input = this.parentElement.querySelector('input'); |
||||||
|
let num = parseInt(input.value, 10); |
||||||
|
|
||||||
|
if (num > 0) { |
||||||
|
num--; |
||||||
|
input.value = num; |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
document.querySelectorAll('.counter .plus').forEach(function(plusBtn) { |
||||||
|
plusBtn.addEventListener('click', function() { |
||||||
|
let input = this.parentElement.querySelector('input'); |
||||||
|
let num = parseInt(input.value, 10); |
||||||
|
let max = parseInt(input.getAttribute('max'), 10); |
||||||
|
|
||||||
|
if (num < max) { |
||||||
|
num++; |
||||||
|
input.value = num; |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
function openModalOnClick(element1, element2) { |
||||||
|
let triggerElements = document.querySelectorAll(element1); |
||||||
|
let targetElement = document.querySelector(element2); |
||||||
|
|
||||||
|
triggerElements.forEach(function(triggerElement) { |
||||||
|
triggerElement.addEventListener('click', function() { |
||||||
|
document.querySelectorAll('.modal').forEach(function(modal_item) { |
||||||
|
modal_item.classList.remove('modal_open'); |
||||||
|
}); |
||||||
|
targetElement.classList.add('modal_open'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
function closeModalOnClick(element1, element2) { |
||||||
|
let triggerElements = document.querySelectorAll(element1); |
||||||
|
|
||||||
|
triggerElements.forEach(function(triggerElement) { |
||||||
|
triggerElement.addEventListener('click', function() { |
||||||
|
if (document.querySelector('.modal.modal_open')) { |
||||||
|
document.querySelector('.modal.modal_open').classList.remove('modal_open'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if(document.querySelector('.return')){ |
||||||
|
let checkboxes = document.querySelectorAll('.return input[type="checkbox"]'); |
||||||
|
let returnButton = document.getElementById('return_button'); |
||||||
|
|
||||||
|
function toggleButtonState() { |
||||||
|
let isChecked = false; |
||||||
|
checkboxes.forEach(function(checkbox) { |
||||||
|
if (checkbox.checked) { |
||||||
|
isChecked = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
if (isChecked) { |
||||||
|
returnButton.removeAttribute('disabled'); |
||||||
|
} else { |
||||||
|
returnButton.setAttribute('disabled', 'disabled'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
checkboxes.forEach(function(checkbox) { |
||||||
|
checkbox.addEventListener('change', toggleButtonState); |
||||||
|
}); |
||||||
|
|
||||||
|
toggleButtonState(); |
||||||
|
|
||||||
|
let return_form = returnButton.closest('form'); |
||||||
|
let plusButton = document.querySelector('.return_modal1 .plus'); |
||||||
|
|
||||||
|
returnButton.addEventListener('click', function(event) { |
||||||
|
event.preventDefault(); |
||||||
|
document.querySelector('.return_modal1').classList.add('modal_open'); |
||||||
|
setTimeout(function() { |
||||||
|
return_form.submit(); |
||||||
|
}, 5000);
|
||||||
|
}); |
||||||
|
|
||||||
|
// plusButton.addEventListener('click', function() {
|
||||||
|
// document.querySelector('.return_modal1').classList.remove('modal_open');
|
||||||
|
// document.querySelector('.return_modal2').classList.add('modal_open');
|
||||||
|
// });
|
||||||
|
// document.querySelector('.modal_back').addEventListener('click', function() {
|
||||||
|
// document.querySelector('.return_modal1').classList.remove('modal_open');
|
||||||
|
// document.querySelector('.return_modal2').classList.add('modal_open');
|
||||||
|
// });
|
||||||
|
// document.querySelector('.return_modal2 .plus').addEventListener('click', function() {
|
||||||
|
// document.querySelector('.return_modal2').classList.remove('modal_open');
|
||||||
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
openModalOnClick('#auth', '.auth1'); |
||||||
|
openModalOnClick('.register_btn', '.auth2'); |
||||||
|
openModalOnClick('.login_btn', '.auth4'); |
||||||
|
openModalOnClick('.auth2 button', '.auth3'); |
||||||
|
openModalOnClick('.auth4 button', '.auth5'); |
||||||
|
openModalOnClick('.btn_return_modal1', '.return_modal2'); |
||||||
|
closeModalOnClick('.modal .plus', '.modal'); |
||||||
|
closeModalOnClick('.modal_back', '.modal'); |
||||||
|
|
||||||
|
// if (document.querySelector('.faq')) {
|
||||||
|
|
||||||
|
// let faqToggles = document.querySelectorAll('.faq_title, .faq_arr_down');
|
||||||
|
|
||||||
|
// faqToggles.forEach(function(toggle) {
|
||||||
|
// toggle.addEventListener('click', function() {
|
||||||
|
// const faqTop = this.closest('.faq_top');
|
||||||
|
// const faqBody = faqTop.nextElementSibling;
|
||||||
|
|
||||||
|
// document.querySelectorAll('.faq_body').forEach(function(body) {
|
||||||
|
// if (body !== faqBody) {
|
||||||
|
// body.style.height = '0px';
|
||||||
|
// body.classList.remove('open');
|
||||||
|
|
||||||
|
// const otherArrow = body.previousElementSibling.querySelector('.faq_arr_down');
|
||||||
|
// if (otherArrow) {
|
||||||
|
// otherArrow.classList.remove('rotate');
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// if (faqBody.classList.contains('open')) {
|
||||||
|
// faqBody.style.height = '0px';
|
||||||
|
// } else {
|
||||||
|
// faqBody.style.height = `${faqBody.scrollHeight}px`;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// faqBody.classList.toggle('open');
|
||||||
|
|
||||||
|
// const faqArrow = faqTop.querySelector('.faq_arr_down');
|
||||||
|
// if (faqArrow) {
|
||||||
|
// faqArrow.classList.toggle('rotate');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (document.querySelector('.photo_image')) { |
||||||
|
document.querySelectorAll('.photo_image input[type="file"]').forEach(input => { |
||||||
|
input.addEventListener('change', function() { |
||||||
|
const file = this.files[0]; |
||||||
|
const reader = new FileReader(); |
||||||
|
const img = this.previousElementSibling; |
||||||
|
|
||||||
|
reader.onload = function() { |
||||||
|
img.src = reader.result; |
||||||
|
}; |
||||||
|
|
||||||
|
if (file) { |
||||||
|
reader.readAsDataURL(file); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
<!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="auth"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="auth_block"> |
||||||
|
<img src="assets/img/cosmo_plane.png" alt="" class="auth_image"> |
||||||
|
<div class="auth_title">зарегайтесь сейчас и получите гайд</div> |
||||||
|
<div class="d-flex flex-column align-items-center gap-15 w-100"> |
||||||
|
<a href="#" class="main_btn login_btn">Вход</a> |
||||||
|
<a href="#" class="main_btn register_btn">Регистрация</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> |
||||||
|
<script src="assets/js/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,517 @@ |
|||||||
|
<!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="payment cart"> |
||||||
|
<form class="cont" method="post"> |
||||||
|
<h1 class="section_title">Корзина</h1> |
||||||
|
<div class="data_block"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Товары</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="data_block_wrap"> |
||||||
|
<div class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 1,5 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_price">900 ₽</div> |
||||||
|
<div class="counter"> |
||||||
|
<span class="minus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<input type="number" value="1" min="1" max="100"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<a href="#" class="delete_product"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none"> |
||||||
|
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_price">1000 ₽ <span>1800 ₽</span></div> |
||||||
|
<div class="counter"> |
||||||
|
<span class="minus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<input type="number" value="1" min="1" max="100"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<a href="#" class="delete_product"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none"> |
||||||
|
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_price">1000 ₽ <span>1800 ₽</span></div> |
||||||
|
<div class="counter"> |
||||||
|
<span class="minus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<input type="number" value="1" min="1" max="100"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<a href="#" class="delete_product"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none"> |
||||||
|
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_price">1000 ₽ <span>1800 ₽</span></div> |
||||||
|
<div class="counter"> |
||||||
|
<span class="minus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<input type="number" value="1" min="1" max="100"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<a href="#" class="delete_product"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none"> |
||||||
|
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="payment_row"> |
||||||
|
<div class="payment_left"> |
||||||
|
<div class="data_block"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Попробуйте</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="data_block_wrap"> |
||||||
|
<div class="product_try"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="try_right"> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
<a href="#" class="main_btn">Добавить</a> |
||||||
|
<a href="#" class="plus desctop_none"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="product_try"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="try_right"> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
<a href="#" class="main_btn">Добавить</a> |
||||||
|
<a href="#" class="plus desctop_none"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="product_try"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="try_right"> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
<a href="#" class="main_btn">Добавить</a> |
||||||
|
<a href="#" class="plus desctop_none"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="product_try"> |
||||||
|
<div class="for_image_border"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="try_right"> |
||||||
|
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div> |
||||||
|
<a href="#" class="main_btn">Добавить</a> |
||||||
|
<a href="#" class="plus desctop_none"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button class="main_btn pay_btn">Перейти к оформлению</button> |
||||||
|
</div> |
||||||
|
<div class="payment_right"> |
||||||
|
<div class="data_block"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Ваш заказ</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="order_info"> |
||||||
|
<div>товары</div> |
||||||
|
<p>3900 ₽</p> |
||||||
|
</div> |
||||||
|
<div class="order_info"> |
||||||
|
<div>СКИДКА</div> |
||||||
|
<p>-2400 ₽</p> |
||||||
|
</div> |
||||||
|
<div class="order_info"> |
||||||
|
<div>ИТОГО</div> |
||||||
|
<p>1500 ₽</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button class="main_btn pay_btn">Перейти к оформлению</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,426 @@ |
|||||||
|
<!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="faq"> |
||||||
|
<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 d-flex align-items-center justify-content-between"> |
||||||
|
faq |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<p class="section_desc">У вас есть вопросы? Возможно, здесь уже есть ответ</p> |
||||||
|
<div class="data_block pets_form"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Общая тема</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Какое насекомое используется в рецептах?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Откуда мы берём насекомых?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Где можно приобрести нашу продукцию?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Где производится Cosmopet?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data_block pets_form"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Общая тема</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Какое насекомое используется в рецептах?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Откуда мы берём насекомых?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Где можно приобрести нашу продукцию?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Где производится Cosmopet?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data_block pets_form"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Общая тема</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Какое насекомое используется в рецептах?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Откуда мы берём насекомых?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Где можно приобрести нашу продукцию?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
<div class="faq_item"> |
||||||
|
<div class="faq_top"> |
||||||
|
<div class="faq_title">Где производится Cosmopet?</div> |
||||||
|
<span class="faq_arr_down"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> |
||||||
|
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src="assets/img/profile_bfore.svg" alt="" class="profile_before desc"> |
||||||
|
<img src="assets/img/pets_before_mob.png" alt="" class="pets_before_mob"> |
||||||
|
</section> |
||||||
|
<footer class="footer"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="footer_block"> |
||||||
|
<div class="footer_menu"> |
||||||
|
<a href="#" class="footer_logo"><img src="assets/img/icons/logo.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-user.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_link"><img src="assets/img/icons/i-card.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_line.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_line.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_line.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-vk.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex.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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,22 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="ru"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<title>SEO title</title> |
|
||||||
<meta name="description" content="SEO Description"> |
|
||||||
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0"> |
|
||||||
|
|
||||||
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0"> |
|
||||||
<link rel="stylesheet" media="screen and (min-width: 1720px)" href="/assets/css/gp-style-ultra.css?v=1.0"> |
|
||||||
<link rel="stylesheet" media="screen and (max-width: 1720px)" href="/assets/css/gp-style-desktop.css?v=1.0"> |
|
||||||
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="/assets/css/gp-style-tablet.css?v=1.0"> |
|
||||||
<link rel="stylesheet" media="screen and (max-width: 480px)" href="/assets/css/gp-style-mobile.css?v=1.0"> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
|
|
||||||
|
|
||||||
<script src="/assets/js/gp-main.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -0,0 +1,120 @@ |
|||||||
|
<!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="auth login"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="auth_block auth_modal"> |
||||||
|
<img src="assets/img/cosmo_plane.png" alt="" class="auth_image"> |
||||||
|
<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> |
||||||
|
<button class="main_btn">Вход</button> |
||||||
|
</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> |
||||||
|
<script src="assets/js/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,313 @@ |
|||||||
|
<!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="order"> |
||||||
|
<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 d-flex align-items-center justify-content-between"> |
||||||
|
Заказы |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<div class="data_block data_block_table"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Номер <span class="mobile_none">заказа</span></div> |
||||||
|
<div class="data_block_title">Дата</div> |
||||||
|
<div class="data_block_title">СТОИМОСТЬ</div> |
||||||
|
<div class="data_block_title"><span class="mobile_none">СТАТУС</span><span class="desctop_none">К ОПЛАТЕ</span></div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<a href="#" class="order_item"> |
||||||
|
<div class="order_id">№Ru7485-2347</div> |
||||||
|
<div class="order_item_text">dd.mm.yy</div> |
||||||
|
<div class="order_item_text">10 000 ₽</div> |
||||||
|
<div class="order_item_text">в пути</div> |
||||||
|
<div class="see_order"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"> |
||||||
|
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
<a href="#" class="order_item done"> |
||||||
|
<div class="order_id">№Ru7485-2346</div> |
||||||
|
<div class="order_item_text">dd.mm.yy</div> |
||||||
|
<div class="order_item_text">10 000 ₽</div> |
||||||
|
<div class="order_item_text">завешён</div> |
||||||
|
<div class="see_order"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"> |
||||||
|
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
<a href="#" class="order_item done"> |
||||||
|
<div class="order_id">№Ru7485-2345</div> |
||||||
|
<div class="order_item_text">dd.mm.yy</div> |
||||||
|
<div class="order_item_text">10 000 ₽</div> |
||||||
|
<div class="order_item_text">завешён</div> |
||||||
|
<div class="see_order"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"> |
||||||
|
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,317 @@ |
|||||||
|
<!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="order order_single"> |
||||||
|
<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> |
||||||
|
<div class="section_top"> |
||||||
|
<h1 class="section_title d-flex align-items-center justify-content-between"> |
||||||
|
№Ru7485-2347 |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<p class="delivered_date">Доставлен dd.mm.yy</p> |
||||||
|
</div> |
||||||
|
<div class="data_block data_block_table data_block_table2"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">позиция</div> |
||||||
|
<div class="data_block_title">Кол-во</div> |
||||||
|
<div class="data_block_title">цена</div> |
||||||
|
<div class="data_block_title">статус</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<a href="#" class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">cosmodog индейка 2 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_count">1x</div> |
||||||
|
<div class="order_item_text price">2000 ₽</div> |
||||||
|
<div class="order_item_text status">Выкуплен</div> |
||||||
|
</a> |
||||||
|
<a href="#" class="order_item done"> |
||||||
|
<div class="product_image"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">cosmodog рыба 5 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_count">1x</div> |
||||||
|
<div class="order_item_text price">4000 ₽</div> |
||||||
|
<div class="order_item_text status">Не выкуплен</div> |
||||||
|
</a> |
||||||
|
<a href="#" class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">cosmodog рыба 5 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text product_count">1x</div> |
||||||
|
<div class="order_item_text price">2000 ₽</div> |
||||||
|
<div class="order_item_text status">Выкуплен</div> |
||||||
|
</a > |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pets_form_actions d-flex justify-content-between"> |
||||||
|
<div class="d-flex"> |
||||||
|
<a href="#" class="main_btn">Повторить</a> |
||||||
|
<a href="#" class="main_btn">Чек</a> |
||||||
|
</div> |
||||||
|
<button href="#" class="main_btn main_btn_disbale" disabled>Возврат</button> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,291 @@ |
|||||||
|
<!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="pets"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="pets_row"> |
||||||
|
<div class="pets_left"> |
||||||
|
<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 d-flex align-items-center justify-content-between"> |
||||||
|
питомцы |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<div class="change_block active"> |
||||||
|
<p class="section_desc">Создайте профиль своего питомца! Заполните информацию и выберите наиболее подходящий рацион</p> |
||||||
|
<img src="assets/img/hero_image.png" alt="" class="pets_hero_image"> |
||||||
|
<div class="main_btn" id="select_pets">Добавить питомца</div> |
||||||
|
</div> |
||||||
|
<div class="change_block"> |
||||||
|
<p class="section_subtitle">Кто ваш питомец?</p> |
||||||
|
<img src="assets/img/animal_image3.png" alt="" class="pets_hero_image"> |
||||||
|
<a href="#" class="main_btn">Кошка</a> |
||||||
|
<a href="#" class="main_btn">Собака</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src="assets/img/hero_image.png" alt="" class="pets_hero_image"> |
||||||
|
<img src="assets/img/pets_stars.svg" alt="" class="pets_stars"> |
||||||
|
<img src="assets/img/pets_stars2.svg" alt="" class="pets_stars pets_stars2 desctop_none"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src="assets/img/pets_before.png" alt="" class="pets_before"> |
||||||
|
<img src="assets/img/pets_before_mob.png" alt="" class="pets_before pets_before_mob"> |
||||||
|
</section> |
||||||
|
<footer class="footer"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="footer_block"> |
||||||
|
<div class="footer_menu"> |
||||||
|
<a href="#" class="footer_logo"><img src="assets/img/icons/logo.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-user.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_link"><img src="assets/img/icons/i-card.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_line.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_line.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_line.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-vk.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex.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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,314 @@ |
|||||||
|
<!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="pets pets_form"> |
||||||
|
<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 d-flex align-items-center justify-content-between"> |
||||||
|
питомцы |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<p class="section_desc">Обновляйте информацию в профиле своего питомца, чтобы мы смогли подобрать для него питание, учитывающее его уникальные потребности</p> |
||||||
|
<div class="data_block pets_form_end"> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="pet_inputs"> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name"> |
||||||
|
<div class="data_animal"> |
||||||
|
<label class="pet_photo"> |
||||||
|
<input type="file"> |
||||||
|
<img src="assets/img/icons/i-user_photo2.svg" alt=""> |
||||||
|
<img src="assets/img/animal_image.png" alt="" class="preview"> |
||||||
|
</label> |
||||||
|
<div> |
||||||
|
<div class="data_block_title">Кличка</div> |
||||||
|
<p class="date_block_desc">Порода</p> |
||||||
|
<p class="date_block_desc">Дата рождения</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a href="#" class="input_wrap"> |
||||||
|
Редактировать информацию о питомце |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name w-max-100"> |
||||||
|
<div class="collapse_input flex-nowrap flex-row w-100"> |
||||||
|
<a href="#" class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<p>Добавить питомца</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src="assets/img/pets_before.png" alt="" class="pets_before"> |
||||||
|
<img src="assets/img/pets_before_mob.png" alt="" class="pets_before pets_before_mob"> |
||||||
|
</section> |
||||||
|
<footer class="footer"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="footer_block"> |
||||||
|
<div class="footer_menu"> |
||||||
|
<a href="#" class="footer_logo"><img src="assets/img/icons/logo.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-user.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_link"><img src="assets/img/icons/i-card.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_line.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_line.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_line.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-vk.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex.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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,624 @@ |
|||||||
|
<!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="pets pets_form"> |
||||||
|
<form 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> |
||||||
|
<h1 class="section_title d-flex align-items-center justify-content-between"> |
||||||
|
питомцы |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<div class="data_block"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_animal"> |
||||||
|
<label class="pet_photo"> |
||||||
|
<input type="file"> |
||||||
|
<img src="assets/img/icons/i-user_photo.svg" alt=""> |
||||||
|
<img src="assets/img/animal_image.png" alt="" class="preview"> |
||||||
|
</label> |
||||||
|
<div> |
||||||
|
<div class="data_block_title">Данные питомца</div> |
||||||
|
<p class="date_block_desc">Загрузить изображение</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="pet_inputs"> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">кличка</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<input type="text" placeholder="Кличка"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Дата рождения</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<input type="date" placeholder="DD.MM.YY"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Особые потребности</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<input type="text"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"/> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"/> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"/> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p>Добавить</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Активность</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio" name="radio1"> |
||||||
|
<p>Низкая</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio" name="radio1"> |
||||||
|
<p>Высокая</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Стери­лизация</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio" name="radio2"> |
||||||
|
<p>Да</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio" name="radio2"> |
||||||
|
<p>Нет</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Пол</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio" name="radio3"> |
||||||
|
<p>Самка</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio" name="radio3"> |
||||||
|
<p>Самец</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Порода собаки</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<datalist id="suggestion-list"> |
||||||
|
<option value="Американский булли"> |
||||||
|
<option value="Акита-ину"> |
||||||
|
<option value="Американская акита"> |
||||||
|
<option value="Аляскинский маламут"> |
||||||
|
<option value="Алабай"> |
||||||
|
<option value="Аргентинский дог"> |
||||||
|
<option value="Арьежская гончая"> |
||||||
|
<option value="Алапахский бульдог"> |
||||||
|
<option value="Австралийский келпи"> |
||||||
|
<option value="Австралийская пастушья собака"> |
||||||
|
<option value="Американский мастиф"> |
||||||
|
<option value="Австрийский пинчер"> |
||||||
|
<option value="Американская эскимосская собака"> |
||||||
|
<option value="Алано"> |
||||||
|
<option value="Альпийская таксообразная гончая"> |
||||||
|
<option value="Английский той-терьер"> |
||||||
|
<option value="Аппенцеллер зенненхунд"> |
||||||
|
<option value="Английский сеттер"> |
||||||
|
<option value="Аффенпинчер"> |
||||||
|
<option value="Англо-французская малая гончая"> |
||||||
|
<option value="Аиди"> |
||||||
|
<option value="Английский пойнтер"> |
||||||
|
<option value="Австралийский терьер"> |
||||||
|
<option value="Австрийская гончая"> |
||||||
|
<option value="Австралийский шелковистый терьер"> |
||||||
|
<option value="Афганская борзая"> |
||||||
|
<option value="Азавак"> |
||||||
|
<option value="Артуазская гончая"> |
||||||
|
<option value="Английский спрингер-спаниель"> |
||||||
|
<option value="Американский питбультерьер"> |
||||||
|
<option value="Английская овчарка"> |
||||||
|
<option value="Американский бандог"> |
||||||
|
<option value="Английский мастиф"> |
||||||
|
<option value="Артезиано-нормандский бассет"> |
||||||
|
<option value="Американский бульдог"> |
||||||
|
<option value="Австралийская овчарка (Аусси)"> |
||||||
|
<option value="Американский голый терьер"> |
||||||
|
<option value="Английская енотовая гончая"> |
||||||
|
<option value="Американский фоксхаунд"> |
||||||
|
<option value="Африканис"> |
||||||
|
<option value="Английский фоксхаунд"> |
||||||
|
<option value="Аляскинский кли-кай"> |
||||||
|
<option value="Американский водяной спаниель"> |
||||||
|
<option value="Английский кокер-спаниель"> |
||||||
|
<option value="Английский бульдог"> |
||||||
|
<option value="Американский кокер-спаниель"> |
||||||
|
<option value="Американский стаффордширский терьер"> |
||||||
|
<option value="Бультерьер"> |
||||||
|
<option value="Бернский зенненхунд"> |
||||||
|
<option value="Бордер-терьер"> |
||||||
|
<option value="Бульмастиф"> |
||||||
|
<option value="Бурбуль"> |
||||||
|
<option value="Басенджи"> |
||||||
|
<option value="Бобтейл"> |
||||||
|
<option value="Бордер-колли"> |
||||||
|
<option value="Боксер"> |
||||||
|
<option value="Бигль"> |
||||||
|
<option value="Босерон"> |
||||||
|
<option value="Бордоский дог"> |
||||||
|
<option value="Бостон-терьер"> |
||||||
|
<option value="Бриар"> |
||||||
|
<option value="Брюссельский гриффон"> |
||||||
|
<option value="Бладхаунд"> |
||||||
|
<option value="Буковинская овчарка"> |
||||||
|
<option value="Бишон фризе"> |
||||||
|
<option value="Бурбонский бракк"> |
||||||
|
<option value="Бернская гончая"> |
||||||
|
<option value="Бразильский терьер"> |
||||||
|
<option value="Баскская овчарка"> |
||||||
|
<option value="Бульдог кампейро"> |
||||||
|
<option value="Большой мюнстерлендер"> |
||||||
|
<option value="Болгарский барак"> |
||||||
|
<option value="Бразильский фила"> |
||||||
|
<option value="Бакхмуль"> |
||||||
|
<option value="Бурят-монгольский волкодав"> |
||||||
|
<option value="Большой швейцарский зенненхунд"> |
||||||
|
<option value="Бергамская овчарка"> |
||||||
|
<option value="Брохольмер"> |
||||||
|
<option value="Бульдог Катахулы"> |
||||||
|
<option value="Бородатый колли"> |
||||||
|
<option value="Бедлингтон-терьер"> |
||||||
|
<option value="Бельгийская овчарка"> |
||||||
|
<option value="Бретонский эпаньоль"> |
||||||
|
<option value="Баварская горная гончая"> |
||||||
|
<option value="Белая швейцарская овчарка"> |
||||||
|
<option value="Бассет-хаунд"> |
||||||
|
<option value="Барбет"> |
||||||
|
<option value="Восточносибирская лайка"> |
||||||
|
<option value="Веймаранер"> |
||||||
|
<option value="Восточноевропейская овчарка"> |
||||||
|
<option value="Вельш-корги кардиган"> |
||||||
|
<option value="Вельштерьер"> |
||||||
|
<option value="Вест-хайленд-уайт-терьер"> |
||||||
|
<option value="Венгерская жесткошёрстная выжла"> |
||||||
|
<option value="Волчья собака Сарлоса"> |
||||||
|
<option value="Вольпино итальяно"> |
||||||
|
<option value="Вельш-спрингер-спаниель"> |
||||||
|
<option value="Валенсийский ратер"> |
||||||
|
<option value="Венгерская борзая"> |
||||||
|
<option value="Вельш-корги пемброк"> |
||||||
|
<option value="Веттерхун"> |
||||||
|
<option value="Вандейский бассет-гриффон"> |
||||||
|
<option value="Венгерская выжла"> |
||||||
|
<option value="Гампр"> |
||||||
|
<option value="Грейхаунд"> |
||||||
|
<option value="Гончая Гамильтона"> |
||||||
|
<option value="Грюнендаль"> |
||||||
|
<option value="Голландская овчарка"> |
||||||
|
<option value="Гаванский бишон"> |
||||||
|
<option value="Гладкошерстный фокстерьер"> |
||||||
|
<option value="Гренландская собака"> |
||||||
|
<option value="Гончая Шиллера"> |
||||||
|
<option value="Глен оф Имаал терьер"> |
||||||
|
<option value="Голубой гасконский бассет"> |
||||||
|
<option value="Греческая овчарка"> |
||||||
|
<option value="Денди-динмонт-терьер"> |
||||||
|
<option value="Далматинец"> |
||||||
|
<option value="Доберман"> |
||||||
|
<option value="Древер"> |
||||||
|
<option value="Дратхаар"> |
||||||
|
<option value="Дземон-сиба"> |
||||||
|
<option value="Дункер"> |
||||||
|
<option value="Дирхаунд"> |
||||||
|
<option value="Джек-рассел-терьер"> |
||||||
|
<option value="Длинношерстный колли"> |
||||||
|
<option value="Евразиер"> |
||||||
|
<option value="Жесткошёрстный фокстерьер"> |
||||||
|
<option value="Золотистый ретривер (Лабрадор)"> |
||||||
|
<option value="Западно-сибирская лайка"> |
||||||
|
<option value="Ирландский водяной спаниель"> |
||||||
|
<option value="Испанская водяная собака"> |
||||||
|
<option value="Испанский мастиф"> |
||||||
|
<option value="Ирландский сеттер"> |
||||||
|
<option value="Итальянский спиноне"> |
||||||
|
<option value="Ирландский волкодав"> |
||||||
|
<option value="Ирландский мягкошёрстный пшеничный терьер"> |
||||||
|
<option value="Итальянский бракк"> |
||||||
|
<option value="Исландская собака"> |
||||||
|
<option value="Ирландский терьер"> |
||||||
|
<option value="Испанская гончая"> |
||||||
|
<option value="Испанский гальго"> |
||||||
|
<option value="Йоркширский терьер"> |
||||||
|
<option value="Курцхаар"> |
||||||
|
<option value="Кане-корсо"> |
||||||
|
<option value="Китайская хохлатая собака"> |
||||||
|
<option value="Кавказская овчарка"> |
||||||
|
<option value="Ка-де-бо"> |
||||||
|
<option value="Короткошёрстный колли"> |
||||||
|
<option value="Карликовый пинчер"> |
||||||
|
<option value="Кавалер-кинг-чарльз-спаниель"> |
||||||
|
<option value="Каи"> |
||||||
|
<option value="Ксолоитцкуинтли"> |
||||||
|
<option value="Канарский дог"> |
||||||
|
<option value="Карело-финская лайка"> |
||||||
|
<option value="Крашская овчарка"> |
||||||
|
<option value="Керн-терьер"> |
||||||
|
<option value="Куньминская овчарка"> |
||||||
|
<option value="Котон-де-тулеар"> |
||||||
|
<option value="Континентальный той-спаниель"> |
||||||
|
<option value="Корейский чиндо"> |
||||||
|
<option value="Комондор"> |
||||||
|
<option value="Кангал (анатолийская овчарка)"> |
||||||
|
<option value="Курчавошёрстный ретривер"> |
||||||
|
<option value="Кромфорлендер"> |
||||||
|
<option value="Керри-блю-терьер"> |
||||||
|
<option value="Кеесхонд"> |
||||||
|
<option value="Лабрадор-ретривер"> |
||||||
|
<option value="Левретка"> |
||||||
|
<option value="Лабрадудль"> |
||||||
|
<option value="Леонбергер"> |
||||||
|
<option value="Леопардовая собака Катахулы"> |
||||||
|
<option value="Ланкаширский хилер"> |
||||||
|
<option value="Лангхаар"> |
||||||
|
<option value="Лаготто-романьоло"> |
||||||
|
<option value="Ландсир"> |
||||||
|
<option value="Лейкленд-терьер"> |
||||||
|
<option value="Лхаса апсо"> |
||||||
|
<option value="Мальтийская болонка"> |
||||||
|
<option value="Мальтипу"> |
||||||
|
<option value="Малая бельгийская собака"> |
||||||
|
<option value="Муди"> |
||||||
|
<option value="Манчестер-терьер"> |
||||||
|
<option value="Метис"> |
||||||
|
<option value="Московская сторожевая собака"> |
||||||
|
<option value="Миттельшнауцер"> |
||||||
|
<option value="Майоркская овчарка"> |
||||||
|
<option value="Малая швейцарская гончая"> |
||||||
|
<option value="Малая львиная собака"> |
||||||
|
<option value="Мягкошёрстный уиппет"> |
||||||
|
<option value="Московская сторожевая"> |
||||||
|
<option value="Московский водолаз"> |
||||||
|
<option value="Мелитезе"> |
||||||
|
<option value="Немецкая овчарка"> |
||||||
|
<option value="Ньюфаундленд"> |
||||||
|
<option value="Немецкий шпиц"> |
||||||
|
<option value="Немецкий дратхаар"> |
||||||
|
<option value="Норфолк-терьер"> |
||||||
|
</datalist> |
||||||
|
<input type="text" list="suggestion-list"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"/> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"/> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"/> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p>Добавить</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Вес</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="counter"> |
||||||
|
<span class="minus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<input type="number" value="1" min="1" max="100"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
кг |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="d-flex justify-content-end"> |
||||||
|
<button class="main_btn main_btn_white">Сохранить</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
<img src="assets/img/pets_before.png" alt="" class="pets_before"> |
||||||
|
<img src="assets/img/pets_before_mob.png" alt="" class="pets_before pets_before_mob"> |
||||||
|
</section> |
||||||
|
<footer class="footer"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="footer_block"> |
||||||
|
<div class="footer_menu"> |
||||||
|
<a href="#" class="footer_logo"><img src="assets/img/icons/logo.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-user.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_link"><img src="assets/img/icons/i-card.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_line.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_line.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_line.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-vk.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex.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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,440 @@ |
|||||||
|
<!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="profile"> |
||||||
|
<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 d-flex align-items-center justify-content-between"> |
||||||
|
Профиль |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<form class="data_block pets_form" method="post"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Персональные данные</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="pet_inputs"> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">e-mail</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<input type="email" placeholder="E-mail"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">Имя</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<input type="text" placeholder="имя"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name"><span class="mobile_none">Номер телефона</span><span class="desctop_none">телефон</span></div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<input type="tel" placeholder="Номер телефона"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
<form class="data_block pets_form" method="post"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">мои адреса</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="pet_inputs"> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">доставка <span class="mobile_none">курьером</span></div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<input type="text"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p>Добавить <span class="mobile_none">адрес</span></p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_name">СамовыВОЗ</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<input type="text"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p>Добавить <span class="mobile_none">пункт выдачи</span></p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
<form class="data_block pets_form" method="post"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">Способы связи</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="pet_inputs"> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_wrap w-100"> |
||||||
|
<div class="collapse_input flex-nowrap flex-row"> |
||||||
|
<label> |
||||||
|
<input type="tel"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p class="opacity_txt">Sms</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<input type="email"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p class="opacity_txt">E-mail</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<input type="text"> |
||||||
|
<div class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
<p class="opacity_txt">Месседжеры</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_wrap w-100"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio"> |
||||||
|
<p>Спецпредложения и акции</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio"> |
||||||
|
<p>Анонсы новых продуктов</p> |
||||||
|
</label> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio"> |
||||||
|
<p>Полезная информация про питомцев</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="form_group"> |
||||||
|
<div class="input_wrap w-100"> |
||||||
|
<div class="collapse_input"> |
||||||
|
<label class="align-items-start"> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="radio"> |
||||||
|
<p>Я даю согласие на получение рекламных сообщений по SMS, телефону, электронной почте, в мессенджерах: WhatsApp, Viber, Telegram</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
<div class="d-flex align-items-center pets_form_actions"> |
||||||
|
<a href="#" class="main_btn main_btn_white">Навсегда удалить аккаунт</a> |
||||||
|
<p>В этом случае Вы не сможете пользоваться сервисом COSMOPET. Доступ к клубной программе и подписке на ветеринарные диеты будет закрыт, а история покупок будет удалена</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src="assets/img/profile_bfore.svg" alt="" class="profile_before"> |
||||||
|
<img src="assets/img/pets_before_mob.png" alt="" class="pets_before pets_before_mob"> |
||||||
|
</section> |
||||||
|
<footer class="footer"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="footer_block"> |
||||||
|
<div class="footer_menu"> |
||||||
|
<a href="#" class="footer_logo"><img src="assets/img/icons/logo.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-user.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_link"><img src="assets/img/icons/i-card.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_line.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_line.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_line.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-vk.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg.svg" alt=""></a> |
||||||
|
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex.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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,134 @@ |
|||||||
|
<!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="auth register"> |
||||||
|
<div class="cont"> |
||||||
|
<div class="auth_block auth_modal"> |
||||||
|
<img src="assets/img/cosmo_plane.png" alt="" class="auth_image"> |
||||||
|
<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 class="collapse_input"> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="checkbox"> |
||||||
|
<p class="opacity_txt">Согласие на получение рекламных предложений</p> |
||||||
|
</label> |
||||||
|
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> |
||||||
|
<button class="main_btn">Регистрация</button> |
||||||
|
</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> |
||||||
|
<script src="assets/js/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,418 @@ |
|||||||
|
<!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="return"> |
||||||
|
<form 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> |
||||||
|
<div class="section_top"> |
||||||
|
<h1 class="section_title d-flex align-items-center justify-content-between"> |
||||||
|
Возврат |
||||||
|
<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> |
||||||
|
</h1> |
||||||
|
<p class="delivered_date">Заказ №Ru7485-2347 от dd.mm.yy</p> |
||||||
|
</div> |
||||||
|
<div class="data_block data_block_table data_block_table3"> |
||||||
|
<div class="data_block_top"> |
||||||
|
<div class="data_block_title">позиция</div> |
||||||
|
<div class="data_block_title">Кол-во</div> |
||||||
|
<div class="data_block_title">цена</div> |
||||||
|
</div> |
||||||
|
<div class="data_block_body"> |
||||||
|
<div class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="checkbox" name="radio1"> |
||||||
|
</label> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">cosmodog индейка 2 кг</div> |
||||||
|
</div> |
||||||
|
<div class="order_item_text counter">1 шт</div> |
||||||
|
<div class="order_item_text price">2000 ₽</div> |
||||||
|
</div> |
||||||
|
<div class="order_item"> |
||||||
|
<div class="product_image"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="checkbox" name="radio1"> |
||||||
|
</label> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">cosmodog индейка 2 кг</div> |
||||||
|
</div> |
||||||
|
<div class="counter"> |
||||||
|
<span class="minus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<input type="number" value="1" min="1" max="100"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
шт |
||||||
|
</div> |
||||||
|
<div class="order_item_text price">1600 ₽</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pets_form_actions d-flex justify-content-between"> |
||||||
|
<a href="#" class="main_btn btn_return_modal1">Указать причину возврата</a> |
||||||
|
<button class="main_btn" disabled id="return_button">Оформить</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</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 modal_big return_modal1"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<div class="modal_title">Завка на возврат заказаоформлена, спасибо за обращение</div> |
||||||
|
<img src="assets/img/animal_image2.png" alt="" class="return_modal_image"> |
||||||
|
</div> |
||||||
|
<div class="modal modal_big return_modal2"> |
||||||
|
<div class="modal_content"> |
||||||
|
<span class="plus"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g opacity="0.3"> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</span> |
||||||
|
<div class="products"> |
||||||
|
<div class="product_item"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">COSMODOG индейка 2 кг</div> |
||||||
|
</div> |
||||||
|
<div class="product_item deactive"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">COSMODOG индейка 2 кг</div> |
||||||
|
</div> |
||||||
|
<div class="product_item deactive"> |
||||||
|
<img src="assets/img/product1.png" alt=""> |
||||||
|
<div class="product_title">COSMODOG индейка 2 кг</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal_title">Укажите причину возврата</div> |
||||||
|
<form method="post"> |
||||||
|
<div class="checkbox_card"> |
||||||
|
<div class="input_wrap"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="checkbox"> |
||||||
|
<p>Товар не подошёл</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
<div class="input_wrap"> |
||||||
|
<label> |
||||||
|
<div class="checkmark"></div> |
||||||
|
<input type="checkbox"> |
||||||
|
<p>Проблемы с товаром</p> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="modal_title">Комментарий</div> |
||||||
|
<textarea></textarea> |
||||||
|
<div class="modal_title">Фото доказательства</div> |
||||||
|
<p class="caption_text">В формате PNG, JPEG</p> |
||||||
|
<div class="remined_text d-flex align-items-start"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> |
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 29C22.5081 29 29 22.5081 29 14.5C29 6.49187 22.5081 0 14.5 0C6.49187 0 0 6.49187 0 14.5C0 22.5081 6.49187 29 14.5 29ZM15.1 7C11.7 7 10 9 10 13H11.66C11.66 11.4 11.94 10.28 12.5 9.64C13.0733 9 13.94 8.68 15.1 8.68C16.0733 8.68 16.8133 8.9 17.32 9.34C17.84 9.76667 18.1 10.3067 18.1 10.96C18.1 11.3867 18.0333 11.7533 17.9 12.06C17.78 12.3533 17.5733 12.64 17.28 12.92C17 13.2 16.58 13.5533 16.02 13.98C15.1667 14.62 14.5467 15.3133 14.16 16.06C13.7867 16.7933 13.5933 17.6133 13.58 18.52H15.14C15.1533 17.72 15.3267 17.0467 15.66 16.5C15.9933 15.9533 16.4533 15.4533 17.04 15C18.08 14.1867 18.8 13.4867 19.2 12.9C19.6 12.3133 19.8 11.6 19.8 10.76C19.8 10.0933 19.6 9.47333 19.2 8.9C18.8133 8.32667 18.26 7.86667 17.54 7.52C16.82 7.17333 16.0067 7 15.1 7ZM13.34 22.6C13.62 22.8667 13.96 23 14.36 23C14.7467 23 15.0733 22.8667 15.34 22.6C15.6067 22.32 15.74 21.98 15.74 21.58C15.74 21.1933 15.6067 20.8667 15.34 20.6C15.0733 20.32 14.7467 20.18 14.36 20.18C13.96 20.18 13.62 20.32 13.34 20.6C13.0733 20.8667 12.94 21.1933 12.94 21.58C12.94 21.98 13.0733 22.32 13.34 22.6Z" fill="#F4F1F0"/> |
||||||
|
</svg> |
||||||
|
Чтобы заявку одобрили, добавьте все требуемые фото. На них должно быть видно, что товар не использовался и сохранил свой товарный вид |
||||||
|
</div> |
||||||
|
<label class="photo_image"> |
||||||
|
<img src="assets/img/empty.png" alt="empty"> |
||||||
|
<input type="file" accept="image/png, image/jpeg" required> |
||||||
|
<div> |
||||||
|
<div class="image_title">Товар</div> |
||||||
|
<p>Обязательно</p> |
||||||
|
</div> |
||||||
|
</label> |
||||||
|
<label class="photo_image"> |
||||||
|
<img src="assets/img/empty.png" alt="empty"> |
||||||
|
<input type="file" accept="image/png, image/jpeg" required> |
||||||
|
<div> |
||||||
|
<div class="image_title">Коробка/пакет</div> |
||||||
|
<p>Обязательно</p> |
||||||
|
</div> |
||||||
|
</label> |
||||||
|
<button class="main_btn"><span class="desctop_none">Оформить</span><span class="mobile_none">Подтвердить</span></button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modal auth_modal auth1"> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Регистрация</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/> |
||||||
|
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
<div class="modal_title">Вход</div> |
||||||
|
<span class="plus plus_black"> |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none"> |
||||||
|
<g> |
||||||
|
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle> |
||||||
|
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path> |
||||||
|
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</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,39 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<title>UI kit</title> |
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/style-core.css"> |
|
||||||
</head> |
|
||||||
<style> |
|
||||||
/* Стили для выравнивания UI-элеметнов для данной страницы */ |
|
||||||
.ui__ui-wrapper{ |
|
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(4, 1fr); |
|
||||||
grid-column-gap: 30px; |
|
||||||
grid-row-gap: 30px; |
|
||||||
width: 100vw; |
|
||||||
min-height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
.ui, |
|
||||||
.ui__item{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
/* ВСЕ ОСТАЛЬНЫЕ СТИЛИ ПИШЕМ В style-core.css!!! */ |
|
||||||
</style> |
|
||||||
<body class="ui"> |
|
||||||
<div class="ui__ui-wrapper"> |
|
||||||
<div class="ui__item"></div> |
|
||||||
<div class="ui__item"></div> |
|
||||||
<div class="ui__item"></div> |
|
||||||
<!-- ... --> |
|
||||||
<div class="ui__item"></div> |
|
||||||
</div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue