Task 1 | init cosmopet

This commit is contained in:
Andrei-10 committed 2024-09-08 08:29:27 +03:00
1 parent b9f0ea69f4
commit cc7b5c4091
85 files changed
+8714 -258

No files matched your search

-133
View File
@@ -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
-35
View File
@@ -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-свойсв.
+306
View File
@@ -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>
+283
View File
@@ -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&amp;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>
+283
View File
@@ -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&amp;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>
-11
View File
@@ -1,11 +0,0 @@
/*
ШАБЛОН использования глобальных переменных:
:root {
--main-text: #e1667c;
--main-color: #8da6cb;
--font-family: "Craftwork Grotesk", sans-serif;
}
*/
-4
View File
@@ -1,4 +0,0 @@
/* Стили для лептопов */
@media only screen and (min-width: 992px) and (max-width: 1400px) {
}
-5
View File
@@ -1,5 +0,0 @@
/* Стили для мобильных устройств */
@media only screen and (max-width: 576px) {
}
-5
View File
@@ -1,5 +0,0 @@
/* Стили для планшетов */
@media only screen and (max-width: 992px) {
}
-4
View File
@@ -1,4 +0,0 @@
/* Стили для ультрашироких экранов */
@media only screen and (min-width: 1400px) {
}
+2964
View File
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.
+54
View File
@@ -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;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 0.500002C21 0.776144 20.7761 1 20.5 1L0.5 1C0.223858 1 0 0.776142 0 0.5C0 0.223858 0.223858 0 0.5 0H20.5C20.7761 0 21 0.223859 21 0.500002ZM21 10.5C21 10.7761 20.7761 11 20.5 11L0.5 11C0.223858 11 0 10.7761 0 10.5C0 10.2239 0.223858 10 0.5 10L20.5 10C20.7761 10 21 10.2239 21 10.5ZM20.5 21C20.7761 21 21 20.7761 21 20.5C21 20.2239 20.7761 20 20.5 20L0.5 20C0.223858 20 0 20.2239 0 20.5C0 20.7761 0.223858 21 0.5 21L20.5 21Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 598 B

+9
View File
@@ -0,0 +1,9 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 0.500002C21 0.776144 20.7761 1 20.5 1L0.5 1C0.223858 1 0 0.776142 0 0.5C0 0.223858 0.223858 0 0.5 0H20.5C20.7761 0 21 0.223859 21 0.500002ZM21 10.5C21 10.7761 20.7761 11 20.5 11L0.5 11C0.223858 11 0 10.7761 0 10.5C0 10.2239 0.223858 10 0.5 10L20.5 10C20.7761 10 21 10.2239 21 10.5ZM20.5 21C20.7761 21 21 20.7761 21 20.5C21 20.2239 20.7761 20 20.5 20L0.5 20C0.223858 20 0 20.2239 0 20.5C0 20.7761 0.223858 21 0.5 21L20.5 21Z" fill="url(#paint0_linear_1778_11616)"/>
<defs>
<linearGradient id="paint0_linear_1778_11616" x1="0.807941" y1="14.3679" x2="5.13158" y2="3.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 850 B

+9
View File
@@ -0,0 +1,9 @@
<svg width="137" height="34" viewBox="0 0 137 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.1832 0.5C61.9071 0.5 61.6832 0.723858 61.6832 1C61.6832 1.27614 61.9071 1.5 62.1832 1.5V0.5ZM0.556603 29.6464C0.361341 29.8417 0.361341 30.1583 0.556603 30.3536L3.73858 33.5355C3.93385 33.7308 4.25043 33.7308 4.44569 33.5355C4.64095 33.3403 4.64095 33.0237 4.44569 32.8284L1.61726 30L4.44569 27.1716C4.64095 26.9763 4.64095 26.6597 4.44569 26.4645C4.25043 26.2692 3.93385 26.2692 3.73858 26.4645L0.556603 29.6464ZM62.1832 1.5H135.91V0.5H62.1832V1.5ZM106.91 29.5H0.910156V30.5H106.91V29.5ZM135.41 1C135.41 16.7401 122.65 29.5 106.91 29.5V30.5C123.203 30.5 136.41 17.2924 136.41 1H135.41Z" fill="url(#paint0_linear_4973_4353)"/>
<defs>
<linearGradient id="paint0_linear_4973_4353" x1="6.10406" y1="20.8414" x2="7.57889" y2="3.58401" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 976 B

+9
View File
@@ -0,0 +1,9 @@
<svg width="95" height="34" viewBox="0 0 95 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.41016 0.5C2.13401 0.5 1.91016 0.723858 1.91016 1C1.91016 1.27614 2.13401 1.5 2.41016 1.5V0.5ZM0.556603 29.6464C0.361341 29.8417 0.361341 30.1583 0.556603 30.3536L3.73858 33.5355C3.93385 33.7308 4.25043 33.7308 4.44569 33.5355C4.64095 33.3403 4.64095 33.0237 4.44569 32.8284L1.61726 30L4.44569 27.1716C4.64095 26.9763 4.64095 26.6597 4.44569 26.4645C4.25043 26.2692 3.93385 26.2692 3.73858 26.4645L0.556603 29.6464ZM2.41016 1.5H93.9102V0.5H2.41016V1.5ZM64.9102 29.5L0.910156 29.5L0.910156 30.5L64.9102 30.5V29.5ZM93.4102 1C93.4102 16.7401 80.6503 29.5 64.9102 29.5V30.5C81.2026 30.5 94.4102 17.2924 94.4102 1H93.4102Z" fill="url(#paint0_linear_4973_4357)"/>
<defs>
<linearGradient id="paint0_linear_4973_4357" x1="4.48818" y1="20.8414" x2="6.61202" y2="3.72144" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1003 B

+9
View File
@@ -0,0 +1,9 @@
<svg width="224" height="23" viewBox="0 0 224 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M213.16 1L221.922 11.5M221.922 11.5L213.16 22M221.922 11.5L0.92188 11.5" stroke="url(#paint0_linear_4922_1089)" stroke-width="2"/>
<defs>
<linearGradient id="paint0_linear_4922_1089" x1="70.7166" y1="1.80793" x2="77.8662" y2="31.7416" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 476 B

+3
View File
@@ -0,0 +1,3 @@
<svg width="223" height="23" viewBox="0 0 223 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.6" d="M212.699 1L221.461 11.5M221.461 11.5L212.699 22M221.461 11.5L0.460942 11.5" stroke="#F4F1F0" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 240 B

+9
View File
@@ -0,0 +1,9 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 21C1.5 10.2304 10.2304 1.5 21 1.5C31.7696 1.5 40.5 10.2304 40.5 21C40.5 31.7696 31.7696 40.5 21 40.5C10.2304 40.5 1.5 31.7696 1.5 21ZM21 0.5C9.67816 0.5 0.5 9.67816 0.5 21C0.5 32.3218 9.67816 41.5 21 41.5C32.3218 41.5 41.5 32.3218 41.5 21C41.5 9.67816 32.3218 0.5 21 0.5ZM31.5937 15.5683C31.9711 15.7922 32.2839 16.1101 32.5018 16.4909C32.7162 16.8511 32.8379 17.2587 32.8562 17.6774C32.8746 18.0961 32.789 18.5128 32.6072 18.8904L28.4125 27.2017C28.3063 27.4106 28.1442 27.5861 27.9444 27.7085C27.7445 27.831 27.5146 27.8958 27.2802 27.8956L15.8562 27.8528C15.5695 27.8616 15.2884 27.773 15.0586 27.6016C14.8287 27.4302 14.6637 27.186 14.5903 26.9088L11.1357 13.8722L9.56171 13.8663C9.22506 13.8651 8.9027 13.7302 8.66555 13.4912C8.42839 13.2523 8.29586 12.9289 8.29712 12.5923C8.29838 12.2556 8.43332 11.9332 8.67227 11.6961C8.9112 11.4589 9.23456 11.3264 9.57121 11.3277L12.1099 11.3372C12.3965 11.3284 12.6776 11.417 12.9075 11.5884C13.1373 11.7598 13.3024 12.004 13.3757 12.2812L14.1012 15.1527L30.3488 15.2135C30.7874 15.2222 31.2164 15.3445 31.5937 15.5683ZM17.0408 30.823C17.0309 31.8745 16.1704 32.7189 15.1189 32.709C14.0674 32.6991 13.223 31.8386 13.2329 30.7871C13.2428 29.7356 14.1033 28.8912 15.1548 28.9011C16.2063 28.911 17.0507 29.7714 17.0408 30.823ZM27.8095 32.8282C28.861 32.8381 29.7214 31.9937 29.7314 30.9422C29.7413 29.8906 28.8969 29.0302 27.8453 29.0203C26.7938 29.0104 25.9334 29.8548 25.9235 30.9063C25.9136 31.9578 26.758 32.8183 27.8095 32.8282Z" fill="url(#paint0_linear_1672_8290)"/>
<defs>
<linearGradient id="paint0_linear_1672_8290" x1="2.07741" y1="28.5517" x2="10.5188" y2="7.33333" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.88281 21C1.88281 10.2304 10.6133 1.5 21.3828 1.5C32.1524 1.5 40.8828 10.2304 40.8828 21C40.8828 31.7696 32.1524 40.5 21.3828 40.5C10.6133 40.5 1.88281 31.7696 1.88281 21ZM21.3828 0.5C10.061 0.5 0.882812 9.67816 0.882812 21C0.882812 32.3218 10.061 41.5 21.3828 41.5C32.7046 41.5 41.8828 32.3218 41.8828 21C41.8828 9.67816 32.7046 0.5 21.3828 0.5ZM31.9765 15.5683C32.3539 15.7922 32.6667 16.1101 32.8846 16.4909C33.099 16.8511 33.2207 17.2587 33.239 17.6774C33.2574 18.0961 33.1718 18.5128 32.99 18.8904L28.7953 27.2017C28.6891 27.4106 28.527 27.5861 28.3272 27.7085C28.1273 27.831 27.8974 27.8958 27.663 27.8956L16.239 27.8528C15.9524 27.8616 15.6712 27.773 15.4414 27.6016C15.2115 27.4302 15.0465 27.186 14.9731 26.9088L11.5185 13.8722L9.94452 13.8663C9.60787 13.8651 9.28551 13.7302 9.04836 13.4912C8.8112 13.2523 8.67868 12.9289 8.67993 12.5923C8.6812 12.2556 8.81614 11.9332 9.05508 11.6961C9.29401 11.4589 9.61738 11.3264 9.95403 11.3277L12.4927 11.3372C12.7793 11.3284 13.0604 11.417 13.2903 11.5884C13.5201 11.7598 13.6852 12.004 13.7585 12.2812L14.484 15.1527L30.7316 15.2135C31.1702 15.2222 31.5992 15.3445 31.9765 15.5683ZM17.4236 30.823C17.4137 31.8745 16.5532 32.7189 15.5017 32.709C14.4502 32.6991 13.6058 31.8386 13.6157 30.7871C13.6256 29.7356 14.4861 28.8912 15.5376 28.9011C16.5891 28.911 17.4335 29.7714 17.4236 30.823ZM28.1923 32.8282C29.2438 32.8381 30.1043 31.9937 30.1142 30.9422C30.1241 29.8906 29.2797 29.0302 28.2281 29.0203C27.1766 29.0104 26.3162 29.8548 26.3063 30.9063C26.2964 31.9578 27.1408 32.8183 28.1923 32.8282Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7509 15.5482C16.8299 15.6272 16.8925 15.721 16.9353 15.8241C16.978 15.9273 17 16.0379 17 16.1496C17 16.2613 16.978 16.3718 16.9353 16.475C16.8925 16.5782 16.8299 16.6719 16.7509 16.7509C16.6719 16.8299 16.5782 16.8925 16.475 16.9353C16.3718 16.978 16.2613 17 16.1496 17C16.0379 17 15.9273 16.978 15.8241 16.9353C15.721 16.8925 15.6272 16.8299 15.5482 16.7509L8.5 9.70162L1.45177 16.7509C1.29228 16.9104 1.07597 17 0.850425 17C0.624878 17 0.408569 16.9104 0.249084 16.7509C0.0895981 16.5914 4.44607e-09 16.3751 0 16.1496C-4.44607e-09 15.924 0.0895981 15.7077 0.249084 15.5482L7.29838 8.5L0.249084 1.45177C0.0895981 1.29228 0 1.07597 0 0.850425C0 0.624878 0.0895981 0.408569 0.249084 0.249084C0.408569 0.0895981 0.624878 0 0.850425 0C1.07597 0 1.29228 0.0895981 1.45177 0.249084L8.5 7.29838L15.5482 0.249084C15.7077 0.0895981 15.924 -4.44607e-09 16.1496 0C16.3751 4.44607e-09 16.5914 0.0895981 16.7509 0.249084C16.9104 0.408569 17 0.624878 17 0.850425C17 1.07597 16.9104 1.29228 16.7509 1.45177L9.70162 8.5L16.7509 15.5482Z" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="257" height="40" viewBox="0 0 257 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.4531 2.5C8.78861 2.5 0.953125 10.3355 0.953125 20C0.953125 29.6645 8.78861 37.5 18.4531 37.5C28.1176 37.5 35.9531 29.6645 35.9531 20C35.9531 10.3355 28.1176 2.5 18.4531 2.5ZM27.0451 14.4903L24.1773 28.0274C23.9628 28.9871 23.3983 29.2242 22.5967 28.7726L18.216 25.5435L16.1047 27.5758C15.8676 27.8129 15.6757 28.0048 15.2241 28.0048L15.5289 23.5565L23.6354 16.229C23.9854 15.9242 23.5564 15.7435 23.0934 16.0484L13.0676 22.3597L8.75474 21.0161C7.81764 20.7226 7.79506 20.079 8.95796 19.6274L25.837 13.1129C26.616 12.8306 27.3047 13.3048 27.0451 14.4903Z" fill="#121212"/>
<path d="M68.5971 5.2V8.26H59.7051V34H56.6451V8.26H47.7531V5.2H68.5971ZM92.8867 8.26H75.2467V18.088L90.5467 18.052V21.112H75.2467V30.976L92.8867 30.94V34H72.1867V5.2H75.2467V5.236L92.8867 5.2V8.26ZM117.9 34H114.84V8.224H103.86V24.352C103.86 27.328 103.572 29.512 102.996 30.904C102.444 32.272 101.676 33.136 100.692 33.496C99.7317 33.832 98.3277 34 96.4797 34V30.94C97.7517 30.94 98.6637 30.82 99.2157 30.58C99.7677 30.34 100.164 29.764 100.404 28.852C100.668 27.94 100.8 26.44 100.8 24.352V5.2H117.9V34ZM142.914 8.26H125.274V18.088L140.574 18.052V21.112H125.274V30.976L142.914 30.94V34H122.214V5.2H125.274V5.236L142.914 5.2V8.26ZM149.603 8.296V34H146.507V5.2H165.371V8.296H149.603ZM172.068 34H168.972V5.2H179.7C183.132 5.2 185.976 5.896 188.232 7.288C190.512 8.68 191.652 11.044 191.652 14.38C191.652 16.468 191.088 18.172 189.96 19.492C188.832 20.812 187.368 21.76 185.568 22.336C183.768 22.912 181.812 23.2 179.7 23.2H172.068V34ZM179.7 20.176C185.484 20.176 188.376 18.22 188.376 14.308C188.376 12.268 187.572 10.744 185.964 9.736C184.356 8.728 182.268 8.224 179.7 8.224H172.068V20.176H179.7ZM216.559 34L212.887 25.504H198.559L194.923 34H191.683L204.067 5.2H207.343L219.799 34H216.559ZM199.891 22.444L211.555 22.408L205.723 8.908L199.891 22.444ZM251.582 5.2V34H248.414V12.364L239.306 34H236.03L226.562 12.184V34H223.394V5.2H226.67L237.65 30.22L248.306 5.2H251.582Z" fill="#121212"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="257" height="40" viewBox="0 0 257 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.6" d="M18.4531 2.5C8.78861 2.5 0.953125 10.3355 0.953125 20C0.953125 29.6645 8.78861 37.5 18.4531 37.5C28.1176 37.5 35.9531 29.6645 35.9531 20C35.9531 10.3355 28.1176 2.5 18.4531 2.5ZM27.0451 14.4903L24.1773 28.0274C23.9628 28.9871 23.3983 29.2242 22.5967 28.7726L18.216 25.5435L16.1047 27.5758C15.8676 27.8129 15.6757 28.0048 15.2241 28.0048L15.5289 23.5565L23.6354 16.229C23.9854 15.9242 23.5564 15.7435 23.0934 16.0484L13.0676 22.3597L8.75474 21.0161C7.81764 20.7226 7.79506 20.079 8.95796 19.6274L25.837 13.1129C26.616 12.8306 27.3047 13.3048 27.0451 14.4903Z" fill="#F4F1F0"/>
<path opacity="0.6" d="M68.5971 5.2V8.26H59.7051V34H56.6451V8.26H47.7531V5.2H68.5971ZM92.8867 8.26H75.2467V18.088L90.5467 18.052V21.112H75.2467V30.976L92.8867 30.94V34H72.1867V5.2H75.2467V5.236L92.8867 5.2V8.26ZM117.9 34H114.84V8.224H103.86V24.352C103.86 27.328 103.572 29.512 102.996 30.904C102.444 32.272 101.676 33.136 100.692 33.496C99.7317 33.832 98.3277 34 96.4797 34V30.94C97.7517 30.94 98.6637 30.82 99.2157 30.58C99.7677 30.34 100.164 29.764 100.404 28.852C100.668 27.94 100.8 26.44 100.8 24.352V5.2H117.9V34ZM142.914 8.26H125.274V18.088L140.574 18.052V21.112H125.274V30.976L142.914 30.94V34H122.214V5.2H125.274V5.236L142.914 5.2V8.26ZM149.603 8.296V34H146.507V5.2H165.371V8.296H149.603ZM172.068 34H168.972V5.2H179.7C183.132 5.2 185.976 5.896 188.232 7.288C190.512 8.68 191.652 11.044 191.652 14.38C191.652 16.468 191.088 18.172 189.96 19.492C188.832 20.812 187.368 21.76 185.568 22.336C183.768 22.912 181.812 23.2 179.7 23.2H172.068V34ZM179.7 20.176C185.484 20.176 188.376 18.22 188.376 14.308C188.376 12.268 187.572 10.744 185.964 9.736C184.356 8.728 182.268 8.224 179.7 8.224H172.068V20.176H179.7ZM216.559 34L212.887 25.504H198.559L194.923 34H191.683L204.067 5.2H207.343L219.799 34H216.559ZM199.891 22.444L211.555 22.408L205.723 8.908L199.891 22.444ZM251.582 5.2V34H248.414V12.364L239.306 34H236.03L226.562 12.184V34H223.394V5.2H226.67L237.65 30.22L248.306 5.2H251.582Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

+9
View File
@@ -0,0 +1,9 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 21C1.5 10.2304 10.2304 1.5 21 1.5C31.7696 1.5 40.5 10.2304 40.5 21C40.5 31.7696 31.7696 40.5 21 40.5C10.2304 40.5 1.5 31.7696 1.5 21ZM21 0.5C9.67816 0.5 0.5 9.67816 0.5 21C0.5 32.3218 9.67816 41.5 21 41.5C32.3218 41.5 41.5 32.3218 41.5 21C41.5 9.67816 32.3218 0.5 21 0.5ZM17.5716 8.62718C16.5298 9.66905 15.9444 11.0821 15.9444 12.5556C15.9444 14.029 16.5298 15.4421 17.5716 16.4839C18.6135 17.5258 20.0266 18.1111 21.5 18.1111C22.9734 18.1111 24.3865 17.5258 25.4284 16.4839C26.4702 15.4421 27.0556 14.029 27.0556 12.5556C27.0556 11.0821 26.4702 9.66905 25.4284 8.62718C24.3865 7.58532 22.9734 7 21.5 7C20.0266 7 18.6135 7.58532 17.5716 8.62718ZM11.034 22.9229C12.3363 21.6205 14.1027 20.8889 15.9444 20.8889H27.0556C28.8973 20.8889 30.6637 21.6205 31.966 22.9229C33.2684 24.2252 34 25.9916 34 27.8333C34 28.9384 33.561 29.9982 32.7796 30.7796C31.9982 31.561 30.9384 32 29.8333 32H13.1667C12.0616 32 11.0018 31.561 10.2204 30.7796C9.43899 29.9982 9 28.9384 9 27.8333C9 25.9916 9.73164 24.2252 11.034 22.9229Z" fill="url(#paint0_linear_1672_8286)"/>
<defs>
<linearGradient id="paint0_linear_1672_8286" x1="2.07741" y1="28.5517" x2="10.5188" y2="7.33333" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

+3
View File
@@ -0,0 +1,3 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.88281 21C1.88281 10.2304 10.6133 1.5 21.3828 1.5C32.1524 1.5 40.8828 10.2304 40.8828 21C40.8828 31.7696 32.1524 40.5 21.3828 40.5C10.6133 40.5 1.88281 31.7696 1.88281 21ZM21.3828 0.5C10.061 0.5 0.882812 9.67816 0.882812 21C0.882812 32.3218 10.061 41.5 21.3828 41.5C32.7046 41.5 41.8828 32.3218 41.8828 21C41.8828 9.67816 32.7046 0.5 21.3828 0.5ZM17.9544 8.62718C16.9126 9.66905 16.3273 11.0821 16.3273 12.5556C16.3273 14.029 16.9126 15.4421 17.9544 16.4839C18.9963 17.5258 20.4094 18.1111 21.8828 18.1111C23.3562 18.1111 24.7693 17.5258 25.8112 16.4839C26.8531 15.4421 27.4384 14.029 27.4384 12.5556C27.4384 11.0821 26.8531 9.66905 25.8112 8.62718C24.7693 7.58532 23.3562 7 21.8828 7C20.4094 7 18.9963 7.58532 17.9544 8.62718ZM11.4168 22.9229C12.7191 21.6205 14.4855 20.8889 16.3273 20.8889H27.4384C29.2801 20.8889 31.0465 21.6205 32.3488 22.9229C33.6512 24.2252 34.3828 25.9916 34.3828 27.8333C34.3828 28.9384 33.9438 29.9982 33.1624 30.7796C32.381 31.561 31.3212 32 30.2161 32H13.5495C12.4444 32 11.3846 31.561 10.6032 30.7796C9.8218 29.9982 9.38281 28.9384 9.38281 27.8333C9.38281 25.9916 10.1145 24.2252 11.4168 22.9229Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+12
View File
@@ -0,0 +1,12 @@
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M56.9165 7.74087C58.5585 5.06909 62.4415 5.06909 64.0835 7.74087C66.0775 10.9855 70.4964 11.6853 73.3954 9.21573C75.7826 7.18212 79.4756 8.38203 80.2116 11.4304C81.1053 15.1324 85.0917 17.1635 88.6119 15.7107C91.5108 14.5143 94.6522 16.7966 94.4101 19.9233C94.1162 23.7202 97.2798 26.8838 101.077 26.5899C104.203 26.3478 106.486 29.4892 105.289 32.388C103.836 35.9083 105.868 39.8947 109.57 40.7885C112.618 41.5244 113.818 45.2174 111.784 47.6046C109.315 50.5036 110.015 54.9225 113.259 56.9165C115.931 58.5585 115.931 62.4415 113.259 64.0835C110.015 66.0775 109.315 70.4964 111.784 73.3954C113.818 75.7826 112.618 79.4756 109.57 80.2116C105.868 81.1053 103.836 85.0917 105.289 88.6119C106.486 91.5108 104.203 94.6522 101.077 94.4101C97.2798 94.1162 94.1162 97.2798 94.4101 101.077C94.6522 104.203 91.5108 106.486 88.6119 105.289C85.0917 103.836 81.1053 105.868 80.2116 109.57C79.4756 112.618 75.7826 113.818 73.3954 111.784C70.4964 109.315 66.0775 110.015 64.0835 113.259C62.4415 115.931 58.5585 115.931 56.9165 113.259C54.9225 110.015 50.5036 109.315 47.6046 111.784C45.2174 113.818 41.5244 112.618 40.7885 109.57C39.8947 105.868 35.9083 103.836 32.388 105.289C29.4892 106.486 26.3478 104.203 26.5899 101.077C26.8838 97.2798 23.7202 94.1162 19.9233 94.4101C16.7966 94.6522 14.5143 91.5108 15.7107 88.6119C17.1635 85.0917 15.1324 81.1053 11.4304 80.2116C8.38203 79.4756 7.18211 75.7826 9.21573 73.3954C11.6853 70.4964 10.9855 66.0775 7.74087 64.0835C5.06909 62.4415 5.06909 58.5585 7.74087 56.9165C10.9855 54.9225 11.6853 50.5036 9.21573 47.6046C7.18211 45.2174 8.38203 41.5244 11.4304 40.7885C15.1324 39.8947 17.1635 35.9083 15.7107 32.388C14.5143 29.4892 16.7966 26.3478 19.9233 26.5899C23.7202 26.8838 26.8838 23.7202 26.5899 19.9233C26.3478 16.7966 29.4892 14.5143 32.388 15.7107C35.9083 17.1635 39.8947 15.1324 40.7885 11.4304C41.5244 8.38203 45.2174 7.18211 47.6046 9.21573C50.5036 11.6853 54.9225 10.9855 56.9165 7.74087Z" stroke="#F4F1F0" stroke-width="2"/>
<path d="M53.3402 18.8653C57.2904 14.901 63.7099 14.901 67.6601 18.8653C70.0971 21.3111 73.6139 22.3437 76.9863 21.6037C82.4527 20.4043 87.8532 23.875 89.033 29.3457C89.7608 32.7207 92.1611 35.4907 95.3982 36.6915C100.645 38.6379 103.312 44.4773 101.347 49.7174C100.135 52.9501 100.656 56.5781 102.73 59.3383C106.092 63.8125 105.178 70.1667 100.692 73.5125C97.9246 75.5766 96.402 78.9107 96.6544 82.354C97.0637 87.9355 92.8597 92.787 87.2769 93.1763C83.8326 93.4164 80.7492 95.398 79.1 98.4313C76.4267 103.348 70.2672 105.157 65.3601 102.466C62.3328 100.806 58.6675 100.806 55.6402 102.466C50.7331 105.157 44.5736 103.348 41.9003 98.4313C40.2511 95.398 37.1677 93.4164 33.7234 93.1763C28.1406 92.787 23.9366 87.9355 24.3459 82.354C24.5983 78.9107 23.0757 75.5766 20.3081 73.5125C15.8219 70.1667 14.9083 63.8125 18.2701 59.3383C20.3442 56.5781 20.8658 52.9501 19.6534 49.7174C17.6883 44.4773 20.3551 38.6379 25.6021 36.6915C28.8392 35.4907 31.2395 32.7207 31.9673 29.3457C33.1471 23.875 38.5476 20.4043 44.014 21.6037C47.3864 22.3437 50.9032 21.3111 53.3402 18.8653Z" fill="url(#paint0_radial_1649_6215)"/>
<defs>
<radialGradient id="paint0_radial_1649_6215" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.314 -15.6365) rotate(130.81) scale(256.951 336.302)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

+12
View File
@@ -0,0 +1,12 @@
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M56.9165 7.74087C58.5585 5.06909 62.4415 5.06909 64.0835 7.74087C66.0775 10.9855 70.4964 11.6853 73.3954 9.21573C75.7826 7.18212 79.4756 8.38203 80.2116 11.4304C81.1053 15.1324 85.0917 17.1635 88.6119 15.7107C91.5108 14.5143 94.6522 16.7966 94.4101 19.9233C94.1162 23.7202 97.2798 26.8838 101.077 26.5899C104.203 26.3478 106.486 29.4892 105.289 32.388C103.836 35.9083 105.868 39.8947 109.57 40.7885C112.618 41.5244 113.818 45.2174 111.784 47.6046C109.315 50.5036 110.015 54.9225 113.259 56.9165C115.931 58.5585 115.931 62.4415 113.259 64.0835C110.015 66.0775 109.315 70.4964 111.784 73.3954C113.818 75.7826 112.618 79.4756 109.57 80.2116C105.868 81.1053 103.836 85.0917 105.289 88.6119C106.486 91.5108 104.203 94.6522 101.077 94.4101C97.2798 94.1162 94.1162 97.2798 94.4101 101.077C94.6522 104.203 91.5108 106.486 88.6119 105.289C85.0917 103.836 81.1053 105.868 80.2116 109.57C79.4756 112.618 75.7826 113.818 73.3954 111.784C70.4964 109.315 66.0775 110.015 64.0835 113.259C62.4415 115.931 58.5585 115.931 56.9165 113.259C54.9225 110.015 50.5036 109.315 47.6046 111.784C45.2174 113.818 41.5244 112.618 40.7885 109.57C39.8947 105.868 35.9083 103.836 32.388 105.289C29.4892 106.486 26.3478 104.203 26.5899 101.077C26.8838 97.2798 23.7202 94.1162 19.9233 94.4101C16.7966 94.6522 14.5143 91.5108 15.7107 88.6119C17.1635 85.0917 15.1324 81.1053 11.4304 80.2116C8.38203 79.4756 7.18211 75.7826 9.21573 73.3954C11.6853 70.4964 10.9855 66.0775 7.74087 64.0835C5.06909 62.4415 5.06909 58.5585 7.74087 56.9165C10.9855 54.9225 11.6853 50.5036 9.21573 47.6046C7.18211 45.2174 8.38203 41.5244 11.4304 40.7885C15.1324 39.8947 17.1635 35.9083 15.7107 32.388C14.5143 29.4892 16.7966 26.3478 19.9233 26.5899C23.7202 26.8838 26.8838 23.7202 26.5899 19.9233C26.3478 16.7966 29.4892 14.5143 32.388 15.7107C35.9083 17.1635 39.8947 15.1324 40.7885 11.4304C41.5244 8.38203 45.2174 7.18211 47.6046 9.21573C50.5036 11.6853 54.9225 10.9855 56.9165 7.74087Z" stroke="#121212" stroke-width="2"/>
<path d="M53.3402 18.8653C57.2904 14.901 63.7099 14.901 67.6601 18.8653C70.0971 21.3111 73.6139 22.3437 76.9863 21.6037C82.4527 20.4043 87.8532 23.875 89.033 29.3457C89.7608 32.7207 92.1611 35.4907 95.3982 36.6915C100.645 38.6379 103.312 44.4773 101.347 49.7174C100.135 52.9501 100.656 56.5781 102.73 59.3383C106.092 63.8125 105.178 70.1667 100.692 73.5125C97.9246 75.5766 96.402 78.9107 96.6544 82.354C97.0637 87.9355 92.8597 92.787 87.2769 93.1763C83.8326 93.4164 80.7492 95.398 79.1 98.4313C76.4267 103.348 70.2672 105.157 65.3601 102.466C62.3328 100.806 58.6675 100.806 55.6402 102.466C50.7331 105.157 44.5736 103.348 41.9003 98.4313C40.2511 95.398 37.1677 93.4164 33.7234 93.1763C28.1406 92.787 23.9366 87.9355 24.3459 82.354C24.5983 78.9107 23.0757 75.5766 20.3081 73.5125C15.8219 70.1667 14.9083 63.8125 18.2701 59.3383C20.3442 56.5781 20.8658 52.9501 19.6534 49.7174C17.6883 44.4773 20.3551 38.6379 25.6021 36.6915C28.8392 35.4907 31.2395 32.7207 31.9673 29.3457C33.1471 23.875 38.5476 20.4043 44.014 21.6037C47.3864 22.3437 50.9032 21.3111 53.3402 18.8653Z" fill="url(#paint0_radial_1649_6366)"/>
<defs>
<radialGradient id="paint0_radial_1649_6366" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.314 -15.6365) rotate(130.81) scale(256.951 336.302)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="277" height="40" viewBox="0 0 277 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.92213 4.96152C0.460938 7.42304 0.460938 11.38 0.460938 19.2987V20.6967C0.460938 28.6153 0.460938 32.577 2.92213 35.0385C5.38332 37.5 9.3398 37.5 17.2621 37.5H18.6598C26.5774 37.5 30.5386 37.5 32.9997 35.0385C35.4609 32.577 35.4609 28.62 35.4609 20.6967V19.2987C35.4609 11.38 35.4609 7.41839 32.9997 4.95687C30.5386 2.5 26.5774 2.5 18.6598 2.5H17.2621C9.3398 2.5 5.38332 2.5 2.92213 4.96152ZM6.3678 13.1495C6.55819 22.2479 11.1091 27.7189 19.0824 27.7189H19.5328V22.5126C22.4631 22.8052 24.6781 24.9463 25.5697 27.7189H29.712C28.5742 23.5762 25.5837 21.2865 23.7169 20.4133C25.5837 19.3359 28.2074 16.7071 28.8343 13.1495H25.0729C24.2556 16.0383 21.8362 18.6624 19.5328 18.9086V13.1495H15.7714V23.2418C13.4402 22.6566 10.4915 19.8282 10.3614 13.1495H6.3678Z" fill="#121212"/>
<path d="M58.1689 5.2C61.0009 5.176 63.1249 5.764 64.5409 6.964C65.9569 8.164 66.6649 9.772 66.6649 11.788C66.6649 13.228 66.2089 14.476 65.2969 15.532C64.3849 16.564 63.2329 17.176 61.8409 17.368C64.3129 17.584 66.3049 18.352 67.8169 19.672C69.3289 20.968 70.0849 22.744 70.0849 25C70.0849 28.024 68.9809 30.28 66.7729 31.768C64.5889 33.256 61.7209 34 58.1689 34H47.2609V5.2H58.1689ZM58.1689 15.964C59.9689 15.964 61.3129 15.616 62.2009 14.92C63.1129 14.2 63.5689 13.24 63.5689 12.04C63.5689 10.888 63.1129 9.976 62.2009 9.304C61.3129 8.632 59.9689 8.296 58.1689 8.296H50.3569V15.964H58.1689ZM58.1689 30.904C61.2409 30.904 63.4489 30.34 64.7929 29.212C66.1369 28.06 66.8089 26.608 66.8089 24.856C66.8089 23.176 66.1129 21.784 64.7209 20.68C63.3289 19.576 61.1449 19.024 58.1689 19.024H50.3569V30.904H58.1689ZM94.6864 5.2L81.9784 19.6L94.6864 34H90.7624L79.5304 21.112H76.7584V34H73.6984V5.2H76.7584V18.088L79.5304 18.052L90.7624 5.2H94.6864ZM95.3898 19.456C95.3898 16.672 95.8818 14.212 96.8658 12.076C97.8738 9.916 99.3498 8.236 101.294 7.036C103.262 5.812 105.626 5.2 108.386 5.2C111.146 5.2 113.498 5.812 115.442 7.036C117.386 8.236 118.85 9.916 119.834 12.076C120.842 14.212 121.346 16.672 121.346 19.456C121.346 22.264 120.842 24.772 119.834 26.98C118.85 29.164 117.374 30.88 115.406 32.128C113.462 33.376 111.122 34 108.386 34C105.626 34 103.262 33.376 101.294 32.128C99.3498 30.88 97.8738 29.164 96.8658 26.98C95.8818 24.772 95.3898 22.264 95.3898 19.456ZM98.5578 19.456C98.5578 21.64 98.9418 23.596 99.7098 25.324C100.478 27.052 101.594 28.408 103.058 29.392C104.546 30.352 106.322 30.832 108.386 30.832C110.426 30.832 112.178 30.34 113.642 29.356C115.13 28.372 116.258 27.028 117.026 25.324C117.794 23.596 118.178 21.64 118.178 19.456C118.178 17.272 117.794 15.352 117.026 13.696C116.258 12.016 115.142 10.708 113.678 9.772C112.214 8.836 110.45 8.368 108.386 8.368C106.322 8.368 104.546 8.836 103.058 9.772C101.594 10.708 100.478 12.016 99.7098 13.696C98.9418 15.352 98.5578 17.272 98.5578 19.456ZM143.316 5.2H146.376V34H143.316V21.112H128.016V34H124.956V5.2H128.016V18.088L143.316 18.052V5.2ZM170.832 5.2V8.26H161.94V34H158.88V8.26H149.988V5.2H170.832ZM196.414 34L192.742 25.504H178.414L174.778 34H171.538L183.922 5.2H187.198L199.654 34H196.414ZM179.746 22.444L191.41 22.408L185.578 8.908L179.746 22.444ZM224.237 5.2L211.529 19.6L224.237 34H220.313L209.081 21.112H206.309V34H203.249V5.2H206.309V18.088L209.081 18.052L220.313 5.2H224.237ZM248.667 5.2V8.26H239.775V34H236.715V8.26H227.823V5.2H248.667ZM272.957 8.26H255.317V18.088L270.617 18.052V21.112H255.317V30.976L272.957 30.94V34H252.257V5.2H255.317V5.236L272.957 5.2V8.26Z" fill="#121212"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="277" height="40" viewBox="0 0 277 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M2.92213 4.96152C0.460938 7.42304 0.460938 11.38 0.460938 19.2987V20.6967C0.460938 28.6153 0.460938 32.577 2.92213 35.0385C5.38332 37.5 9.3398 37.5 17.2621 37.5H18.6598C26.5774 37.5 30.5386 37.5 32.9997 35.0385C35.4609 32.577 35.4609 28.62 35.4609 20.6967V19.2987C35.4609 11.38 35.4609 7.41839 32.9997 4.95687C30.5386 2.5 26.5774 2.5 18.6598 2.5H17.2621C9.3398 2.5 5.38332 2.5 2.92213 4.96152ZM6.3678 13.1495C6.55819 22.2479 11.1091 27.7189 19.0824 27.7189H19.5328V22.5126C22.4631 22.8052 24.6781 24.9463 25.5697 27.7189H29.712C28.5742 23.5762 25.5837 21.2865 23.7169 20.4133C25.5837 19.3359 28.2074 16.7071 28.8343 13.1495H25.0729C24.2556 16.0383 21.8362 18.6624 19.5328 18.9086V13.1495H15.7714V23.2418C13.4402 22.6566 10.4915 19.8282 10.3614 13.1495H6.3678Z" fill="#F4F1F0"/>
<path opacity="0.6" d="M58.1689 5.2C61.0009 5.176 63.1249 5.764 64.5409 6.964C65.9569 8.164 66.6649 9.772 66.6649 11.788C66.6649 13.228 66.2089 14.476 65.2969 15.532C64.3849 16.564 63.2329 17.176 61.8409 17.368C64.3129 17.584 66.3049 18.352 67.8169 19.672C69.3289 20.968 70.0849 22.744 70.0849 25C70.0849 28.024 68.9809 30.28 66.7729 31.768C64.5889 33.256 61.7209 34 58.1689 34H47.2609V5.2H58.1689ZM58.1689 15.964C59.9689 15.964 61.3129 15.616 62.2009 14.92C63.1129 14.2 63.5689 13.24 63.5689 12.04C63.5689 10.888 63.1129 9.976 62.2009 9.304C61.3129 8.632 59.9689 8.296 58.1689 8.296H50.3569V15.964H58.1689ZM58.1689 30.904C61.2409 30.904 63.4489 30.34 64.7929 29.212C66.1369 28.06 66.8089 26.608 66.8089 24.856C66.8089 23.176 66.1129 21.784 64.7209 20.68C63.3289 19.576 61.1449 19.024 58.1689 19.024H50.3569V30.904H58.1689ZM94.6864 5.2L81.9784 19.6L94.6864 34H90.7624L79.5304 21.112H76.7584V34H73.6984V5.2H76.7584V18.088L79.5304 18.052L90.7624 5.2H94.6864ZM95.3898 19.456C95.3898 16.672 95.8818 14.212 96.8658 12.076C97.8738 9.916 99.3498 8.236 101.294 7.036C103.262 5.812 105.626 5.2 108.386 5.2C111.146 5.2 113.498 5.812 115.442 7.036C117.386 8.236 118.85 9.916 119.834 12.076C120.842 14.212 121.346 16.672 121.346 19.456C121.346 22.264 120.842 24.772 119.834 26.98C118.85 29.164 117.374 30.88 115.406 32.128C113.462 33.376 111.122 34 108.386 34C105.626 34 103.262 33.376 101.294 32.128C99.3498 30.88 97.8738 29.164 96.8658 26.98C95.8818 24.772 95.3898 22.264 95.3898 19.456ZM98.5578 19.456C98.5578 21.64 98.9418 23.596 99.7098 25.324C100.478 27.052 101.594 28.408 103.058 29.392C104.546 30.352 106.322 30.832 108.386 30.832C110.426 30.832 112.178 30.34 113.642 29.356C115.13 28.372 116.258 27.028 117.026 25.324C117.794 23.596 118.178 21.64 118.178 19.456C118.178 17.272 117.794 15.352 117.026 13.696C116.258 12.016 115.142 10.708 113.678 9.772C112.214 8.836 110.45 8.368 108.386 8.368C106.322 8.368 104.546 8.836 103.058 9.772C101.594 10.708 100.478 12.016 99.7098 13.696C98.9418 15.352 98.5578 17.272 98.5578 19.456ZM143.316 5.2H146.376V34H143.316V21.112H128.016V34H124.956V5.2H128.016V18.088L143.316 18.052V5.2ZM170.832 5.2V8.26H161.94V34H158.88V8.26H149.988V5.2H170.832ZM196.414 34L192.742 25.504H178.414L174.778 34H171.538L183.922 5.2H187.198L199.654 34H196.414ZM179.746 22.444L191.41 22.408L185.578 8.908L179.746 22.444ZM224.237 5.2L211.529 19.6L224.237 34H220.313L209.081 21.112H206.309V34H203.249V5.2H206.309V18.088L209.081 18.052L220.313 5.2H224.237ZM248.667 5.2V8.26H239.775V34H236.715V8.26H227.823V5.2H248.667ZM272.957 8.26H255.317V18.088L270.617 18.052V21.112H255.317V30.976L272.957 30.94V34H252.257V5.2H255.317V5.236L272.957 5.2V8.26Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

+7
View File
@@ -0,0 +1,7 @@
<svg width="325" height="42" viewBox="0 0 325 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4728 2.5C17.27 5.24125 17.2824 8.01985 16.8174 10.7157C15.9334 15.8298 13.0567 18.4341 7.87884 19.0405C5.41589 19.3291 2.92364 19.3723 0.445312 19.5268C0.445312 18.99 0.621081 17.5816 0.65184 17.4037C1.7416 11.1258 5.17787 6.6203 10.9702 4.00135C12.5118 3.3056 16.936 2.5 17.4728 2.5Z" fill="#121212"/>
<path d="M0.445312 20.4473C2.61825 20.5989 4.8007 20.6706 6.96045 20.9299C8.39223 21.1013 9.84304 21.4015 11.1965 21.8893C14.0791 22.9285 15.9385 25.0831 16.5164 28.0397C17.114 31.0988 17.33 34.2333 17.7321 37.4924C14.9718 37.5751 12.7022 36.9724 10.5725 35.9273C5.03652 33.2117 1.69912 28.8058 0.654037 22.6993C0.616686 22.4803 0.445312 20.9848 0.445312 20.4473Z" fill="#121212"/>
<path d="M21.9992 2.95944C29.3105 4.57797 35.1328 11.3817 35.4594 18.6936C35.4697 18.9199 35.4609 19.1469 35.4609 19.5248C31.5632 19.3872 27.6722 19.5673 24.055 17.8873C21.0332 16.4833 19.6029 13.8571 19.1328 10.7181C18.7937 8.45292 18.7409 6.14524 18.5535 3.85659C18.5161 3.40325 18.4487 2.95285 18.3945 2.50098C18.9314 2.50025 21.3335 2.8115 21.9992 2.95944Z" fill="#121212"/>
<path d="M18.375 37.4309C18.6218 34.675 18.7126 31.993 19.1315 29.3631C19.8815 24.6532 22.5099 21.9801 27.1905 21.2038C29.8541 20.7622 32.5778 20.6802 35.2729 20.4355C35.9914 28.1166 28.3513 37.6513 18.375 37.4309Z" fill="#121212"/>
<path d="M69.9409 5.2V34H66.8449V23.2H60.4009L51.1489 34H47.3329L56.7289 23.056C53.9689 22.744 51.7009 21.892 49.9249 20.5C48.1489 19.084 47.2609 17.044 47.2609 14.38C47.2609 11.044 48.3889 8.68 50.6449 7.288C52.9249 5.896 55.7809 5.2 59.2129 5.2H69.9409ZM66.8449 8.224H59.2129C56.6449 8.224 54.5569 8.728 52.9489 9.736C51.3409 10.744 50.5369 12.268 50.5369 14.308C50.5369 16.42 51.3169 17.932 52.8769 18.844C54.4609 19.732 56.5729 20.176 59.2129 20.176H66.8449V8.224ZM92.9022 5.2H95.9622V34H92.9022V21.112H77.6022V34H74.5422V5.2H77.6022V18.088L92.9022 18.052V5.2ZM130.353 41.2H127.293V34L105.225 33.964C104.865 33.988 104.301 34 103.533 34H102.633V41.2H99.5734V30.94H103.533C104.805 30.94 105.717 30.82 106.269 30.58C106.821 30.34 107.217 29.764 107.457 28.852C107.721 27.94 107.853 26.44 107.853 24.352V5.2H124.953V30.94H130.353V41.2ZM121.893 8.224H110.913V24.352C110.913 27.304 110.625 29.5 110.049 30.94H121.893V8.224ZM154.656 8.26H137.016V18.088L152.316 18.052V21.112H137.016V30.976L154.656 30.94V34H133.956V5.2H137.016V5.236L154.656 5.2V8.26ZM179.237 5.2L166.529 19.6L179.237 34H175.313L164.081 21.112H161.309V34H158.249V5.2H161.309V18.088L164.081 18.052L175.313 5.2H179.237ZM204.565 27.016C203.533 29.248 202.033 30.976 200.065 32.2C198.097 33.4 195.697 34 192.865 34C190.105 34 187.753 33.376 185.809 32.128C183.865 30.88 182.401 29.164 181.417 26.98C180.433 24.772 179.941 22.264 179.941 19.456C179.941 16.672 180.433 14.212 181.417 12.076C182.401 9.916 183.865 8.236 185.809 7.036C187.753 5.812 190.105 5.2 192.865 5.2C195.745 5.2 198.169 5.812 200.137 7.036C202.105 8.236 203.617 10 204.673 12.328L201.973 14.236C200.365 10.276 197.329 8.296 192.865 8.296C190.921 8.296 189.205 8.752 187.717 9.664C186.253 10.576 185.113 11.872 184.297 13.552C183.481 15.232 183.073 17.2 183.073 19.456C183.073 21.808 183.481 23.848 184.297 25.576C185.113 27.28 186.253 28.6 187.717 29.536C189.205 30.448 190.921 30.904 192.865 30.904C197.209 30.928 200.221 28.996 201.901 25.108L204.565 27.016ZM247.705 41.2H244.645V34L222.577 33.964C222.217 33.988 221.653 34 220.885 34H219.985V41.2H216.925V30.94H220.885C222.157 30.94 223.069 30.82 223.621 30.58C224.173 30.34 224.569 29.764 224.809 28.852C225.073 27.94 225.205 26.44 225.205 24.352V5.2H242.305V30.94H247.705V41.2ZM239.245 8.224H228.265V24.352C228.265 27.304 227.977 29.5 227.401 30.94H239.245V8.224ZM264.131 18.376C266.147 18.544 267.743 19.192 268.919 20.32C270.119 21.424 270.719 23.08 270.719 25.288C270.719 28.24 269.723 30.436 267.731 31.876C265.739 33.292 263.219 34 260.171 34C256.955 34 254.375 33.136 252.431 31.408C250.487 29.68 249.515 27.052 249.515 23.524H252.611C252.611 25.732 253.235 27.52 254.483 28.888C255.731 30.232 257.627 30.904 260.171 30.904C262.547 30.904 264.347 30.376 265.571 29.32C266.819 28.264 267.443 26.896 267.443 25.216C267.443 23.56 266.891 22.288 265.787 21.4C264.683 20.488 263.027 20.032 260.819 20.032H258.191V16.972H260.819C262.619 16.972 263.999 16.6 264.959 15.856C265.943 15.088 266.435 14.032 266.435 12.688C266.435 11.176 265.931 10.072 264.923 9.376C263.939 8.656 262.355 8.296 260.171 8.296C257.939 8.296 256.259 8.74 255.131 9.628C254.027 10.516 253.475 11.824 253.475 13.552H250.379C250.379 10.816 251.171 8.74 252.755 7.324C254.339 5.884 256.811 5.176 260.171 5.2C263.435 5.176 265.811 5.776 267.299 7C268.787 8.2 269.531 9.988 269.531 12.364C269.531 13.42 269.267 14.392 268.739 15.28C268.235 16.144 267.563 16.852 266.723 17.404C265.883 17.932 265.019 18.256 264.131 18.376ZM295.07 8.26H277.43V18.088L292.73 18.052V21.112H277.43V30.976L295.07 30.94V34H274.37V5.2H277.43V5.236L295.07 5.2V8.26ZM317.023 5.2H320.083V34H317.023V21.112H301.723V34H298.663V5.2H301.723V18.088L317.023 18.052V5.2Z" fill="#121212"/>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

+9
View File
@@ -0,0 +1,9 @@
<svg width="325" height="42" viewBox="0 0 325 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6">
<path d="M17.4728 2.5C17.27 5.24125 17.2824 8.01985 16.8174 10.7157C15.9334 15.8298 13.0567 18.4341 7.87884 19.0405C5.41589 19.3291 2.92364 19.3723 0.445312 19.5268C0.445312 18.99 0.621081 17.5816 0.65184 17.4037C1.7416 11.1258 5.17787 6.6203 10.9702 4.00135C12.5118 3.3056 16.936 2.5 17.4728 2.5Z" fill="#F2F2F2"/>
<path d="M0.445312 20.4473C2.61825 20.5989 4.8007 20.6706 6.96045 20.9299C8.39223 21.1013 9.84304 21.4015 11.1965 21.8893C14.0791 22.9285 15.9385 25.0831 16.5164 28.0397C17.114 31.0988 17.33 34.2333 17.7321 37.4924C14.9718 37.5751 12.7022 36.9724 10.5725 35.9273C5.03652 33.2117 1.69912 28.8058 0.654037 22.6993C0.616686 22.4803 0.445312 20.9848 0.445312 20.4473Z" fill="#F2F2F2"/>
<path d="M21.9992 2.95944C29.3105 4.57797 35.1328 11.3817 35.4594 18.6936C35.4697 18.9199 35.4609 19.1469 35.4609 19.5248C31.5632 19.3872 27.6722 19.5673 24.055 17.8873C21.0332 16.4833 19.6029 13.8571 19.1328 10.7181C18.7937 8.45292 18.7409 6.14524 18.5535 3.85659C18.5161 3.40325 18.4487 2.95285 18.3945 2.50098C18.9314 2.50025 21.3335 2.8115 21.9992 2.95944Z" fill="#F2F2F2"/>
<path d="M18.375 37.4309C18.6218 34.675 18.7126 31.993 19.1315 29.3631C19.8815 24.6532 22.5099 21.9801 27.1905 21.2038C29.8541 20.7622 32.5778 20.6802 35.2729 20.4355C35.9914 28.1166 28.3513 37.6513 18.375 37.4309Z" fill="#F2F2F2"/>
</g>
<path opacity="0.6" d="M69.9409 5.2V34H66.8449V23.2H60.4009L51.1489 34H47.3329L56.7289 23.056C53.9689 22.744 51.7009 21.892 49.9249 20.5C48.1489 19.084 47.2609 17.044 47.2609 14.38C47.2609 11.044 48.3889 8.68 50.6449 7.288C52.9249 5.896 55.7809 5.2 59.2129 5.2H69.9409ZM66.8449 8.224H59.2129C56.6449 8.224 54.5569 8.728 52.9489 9.736C51.3409 10.744 50.5369 12.268 50.5369 14.308C50.5369 16.42 51.3169 17.932 52.8769 18.844C54.4609 19.732 56.5729 20.176 59.2129 20.176H66.8449V8.224ZM92.9022 5.2H95.9622V34H92.9022V21.112H77.6022V34H74.5422V5.2H77.6022V18.088L92.9022 18.052V5.2ZM130.353 41.2H127.293V34L105.225 33.964C104.865 33.988 104.301 34 103.533 34H102.633V41.2H99.5734V30.94H103.533C104.805 30.94 105.717 30.82 106.269 30.58C106.821 30.34 107.217 29.764 107.457 28.852C107.721 27.94 107.853 26.44 107.853 24.352V5.2H124.953V30.94H130.353V41.2ZM121.893 8.224H110.913V24.352C110.913 27.304 110.625 29.5 110.049 30.94H121.893V8.224ZM154.656 8.26H137.016V18.088L152.316 18.052V21.112H137.016V30.976L154.656 30.94V34H133.956V5.2H137.016V5.236L154.656 5.2V8.26ZM179.237 5.2L166.529 19.6L179.237 34H175.313L164.081 21.112H161.309V34H158.249V5.2H161.309V18.088L164.081 18.052L175.313 5.2H179.237ZM204.565 27.016C203.533 29.248 202.033 30.976 200.065 32.2C198.097 33.4 195.697 34 192.865 34C190.105 34 187.753 33.376 185.809 32.128C183.865 30.88 182.401 29.164 181.417 26.98C180.433 24.772 179.941 22.264 179.941 19.456C179.941 16.672 180.433 14.212 181.417 12.076C182.401 9.916 183.865 8.236 185.809 7.036C187.753 5.812 190.105 5.2 192.865 5.2C195.745 5.2 198.169 5.812 200.137 7.036C202.105 8.236 203.617 10 204.673 12.328L201.973 14.236C200.365 10.276 197.329 8.296 192.865 8.296C190.921 8.296 189.205 8.752 187.717 9.664C186.253 10.576 185.113 11.872 184.297 13.552C183.481 15.232 183.073 17.2 183.073 19.456C183.073 21.808 183.481 23.848 184.297 25.576C185.113 27.28 186.253 28.6 187.717 29.536C189.205 30.448 190.921 30.904 192.865 30.904C197.209 30.928 200.221 28.996 201.901 25.108L204.565 27.016ZM247.705 41.2H244.645V34L222.577 33.964C222.217 33.988 221.653 34 220.885 34H219.985V41.2H216.925V30.94H220.885C222.157 30.94 223.069 30.82 223.621 30.58C224.173 30.34 224.569 29.764 224.809 28.852C225.073 27.94 225.205 26.44 225.205 24.352V5.2H242.305V30.94H247.705V41.2ZM239.245 8.224H228.265V24.352C228.265 27.304 227.977 29.5 227.401 30.94H239.245V8.224ZM264.131 18.376C266.147 18.544 267.743 19.192 268.919 20.32C270.119 21.424 270.719 23.08 270.719 25.288C270.719 28.24 269.723 30.436 267.731 31.876C265.739 33.292 263.219 34 260.171 34C256.955 34 254.375 33.136 252.431 31.408C250.487 29.68 249.515 27.052 249.515 23.524H252.611C252.611 25.732 253.235 27.52 254.483 28.888C255.731 30.232 257.627 30.904 260.171 30.904C262.547 30.904 264.347 30.376 265.571 29.32C266.819 28.264 267.443 26.896 267.443 25.216C267.443 23.56 266.891 22.288 265.787 21.4C264.683 20.488 263.027 20.032 260.819 20.032H258.191V16.972H260.819C262.619 16.972 263.999 16.6 264.959 15.856C265.943 15.088 266.435 14.032 266.435 12.688C266.435 11.176 265.931 10.072 264.923 9.376C263.939 8.656 262.355 8.296 260.171 8.296C257.939 8.296 256.259 8.74 255.131 9.628C254.027 10.516 253.475 11.824 253.475 13.552H250.379C250.379 10.816 251.171 8.74 252.755 7.324C254.339 5.884 256.811 5.176 260.171 5.2C263.435 5.176 265.811 5.776 267.299 7C268.787 8.2 269.531 9.988 269.531 12.364C269.531 13.42 269.267 14.392 268.739 15.28C268.235 16.144 267.563 16.852 266.723 17.404C265.883 17.932 265.019 18.256 264.131 18.376ZM295.07 8.26H277.43V18.088L292.73 18.052V21.112H277.43V30.976L295.07 30.94V34H274.37V5.2H277.43V5.236L295.07 5.2V8.26ZM317.023 5.2H320.083V34H317.023V21.112H301.723V34H298.663V5.2H301.723V18.088L317.023 18.052V5.2Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

+14
View File
@@ -0,0 +1,14 @@
<svg width="188" height="43" viewBox="0 0 188 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.4456 6.22581C52.8502 3.51803 48.1445 2.99892 41.1703 4.75267C37.7503 2.03802 33.5793 0.404558 29.203 0.0659073C24.8266 -0.272744 20.4485 0.699174 16.6411 2.85456C12.8338 5.00995 9.77451 8.24848 7.8633 12.1466C5.9521 16.0448 5.27795 20.4211 5.92903 24.7033C0.860701 29.7751 -1.05 34.0566 0.552524 36.7737C1.53158 38.4363 3.63429 39.2781 6.71606 39.2781C8.68733 39.243 10.649 38.9977 12.5667 38.5462C12.9792 38.455 13.4011 38.3544 13.8278 38.2469C17.0317 40.7901 20.8992 42.388 24.9842 42.8562C29.0692 43.3244 33.2052 42.6438 36.9149 40.8929C40.6245 39.1421 43.7568 36.3923 45.9501 32.9609C48.1434 29.5295 49.3085 25.5563 49.3109 21.4998C49.3125 20.4253 49.2333 19.3522 49.0738 18.2892C52.1011 15.2494 54.1255 12.378 54.7632 9.9952C55.1639 8.5314 55.0548 7.26403 54.4456 6.22581ZM27.5014 1.85782C32.1048 1.86333 36.5646 3.43949 40.1241 6.31892C43.6836 9.19835 46.1237 13.2037 47.0304 17.6556C43.1971 21.3244 37.8325 25.2504 31.7424 28.7018C25.2683 32.3707 19.2233 34.8399 14.2925 36.1845C11.2741 33.5397 9.14206 30.0524 8.17904 26.185C7.21602 22.3176 7.46753 18.2528 8.90022 14.5296C10.3329 10.8064 12.8791 7.60074 16.2011 5.33765C19.5232 3.07456 23.4641 1.86098 27.5014 1.85782ZM2.19534 35.8337C1.18784 34.1267 2.78799 30.7829 6.40315 26.934C7.38336 30.6371 9.34736 34.0153 12.0926 36.7199C6.84408 37.8681 3.19573 37.536 2.19534 35.8337ZM27.5014 41.1417C23.4308 41.1457 19.4578 39.9128 16.1226 37.6108C21.2383 36.0722 26.987 33.5492 32.6812 30.3246C38.4299 27.065 43.4934 23.4359 47.3385 19.9331C47.3812 20.4499 47.4097 20.9713 47.4097 21.4998C47.4034 26.7064 45.3041 31.6981 41.572 35.3802C37.84 39.0623 32.7799 41.1343 27.5014 41.1417ZM52.9331 9.51116C52.4282 11.3818 50.8992 13.6383 48.6068 16.0725C47.6205 12.3609 45.6464 8.97668 42.8889 6.27024C48.0687 5.14317 51.8 5.46118 52.8051 7.16582C53.1512 7.75741 53.1963 8.54543 52.9331 9.51116Z" fill="url(#paint0_linear_1672_8272)"/>
<path d="M80.2191 24.5292C79.6457 25.7692 78.8124 26.7292 77.7191 27.4092C76.6257 28.0758 75.2924 28.4092 73.7191 28.4092C72.1857 28.4092 70.8791 28.0625 69.7991 27.3692C68.7191 26.6758 67.9057 25.7225 67.3591 24.5092C66.8124 23.2825 66.5391 21.8892 66.5391 20.3292C66.5391 18.7825 66.8124 17.4158 67.3591 16.2292C67.9057 15.0292 68.7191 14.0958 69.7991 13.4292C70.8791 12.7492 72.1857 12.4092 73.7191 12.4092C75.3191 12.4092 76.6657 12.7492 77.7591 13.4292C78.8524 14.0958 79.6924 15.0758 80.2791 16.3692L78.7791 17.4292C77.8857 15.2292 76.1991 14.1292 73.7191 14.1292C72.6391 14.1292 71.6857 14.3825 70.8591 14.8892C70.0457 15.3958 69.4124 16.1158 68.9591 17.0492C68.5057 17.9825 68.2791 19.0758 68.2791 20.3292C68.2791 21.6358 68.5057 22.7692 68.9591 23.7292C69.4124 24.6758 70.0457 25.4092 70.8591 25.9292C71.6857 26.4358 72.6391 26.6892 73.7191 26.6892C76.1324 26.7025 77.8057 25.6292 78.7391 23.4692L80.2191 24.5292ZM82.2813 20.3292C82.2813 18.7825 82.5546 17.4158 83.1013 16.2292C83.6613 15.0292 84.4813 14.0958 85.5613 13.4292C86.6546 12.7492 87.9679 12.4092 89.5013 12.4092C91.0346 12.4092 92.3413 12.7492 93.4213 13.4292C94.5013 14.0958 95.3146 15.0292 95.8613 16.2292C96.4213 17.4158 96.7013 18.7825 96.7013 20.3292C96.7013 21.8892 96.4213 23.2825 95.8613 24.5092C95.3146 25.7225 94.4946 26.6758 93.4013 27.3692C92.3213 28.0625 91.0213 28.4092 89.5013 28.4092C87.9679 28.4092 86.6546 28.0625 85.5613 27.3692C84.4813 26.6758 83.6613 25.7225 83.1013 24.5092C82.5546 23.2825 82.2813 21.8892 82.2813 20.3292ZM84.0413 20.3292C84.0413 21.5425 84.2546 22.6292 84.6813 23.5892C85.1079 24.5492 85.7279 25.3025 86.5413 25.8492C87.3679 26.3825 88.3546 26.6492 89.5013 26.6492C90.6346 26.6492 91.6079 26.3758 92.4213 25.8292C93.2479 25.2825 93.8746 24.5358 94.3013 23.5892C94.7279 22.6292 94.9413 21.5425 94.9413 20.3292C94.9413 19.1158 94.7279 18.0492 94.3013 17.1292C93.8746 16.1958 93.2546 15.4692 92.4413 14.9492C91.6279 14.4292 90.6479 14.1692 89.5013 14.1692C88.3546 14.1692 87.3679 14.4292 86.5413 14.9492C85.7279 15.4692 85.1079 16.1958 84.6813 17.1292C84.2546 18.0492 84.0413 19.1158 84.0413 20.3292ZM100.207 23.3492C100.74 24.5358 101.38 25.3892 102.127 25.9092C102.887 26.4292 103.814 26.6892 104.907 26.6892C106.08 26.6892 106.994 26.4825 107.647 26.0692C108.314 25.6558 108.647 25.0025 108.647 24.1092C108.647 22.4958 107.367 21.4292 104.807 20.9092L103.807 20.6892C102.22 20.3692 101.014 19.8625 100.187 19.1692C99.3604 18.4758 98.947 17.5092 98.947 16.2692C98.947 15.4825 99.1804 14.7958 99.647 14.2092C100.114 13.6225 100.734 13.1758 101.507 12.8692C102.294 12.5625 103.147 12.4092 104.067 12.4092C105.574 12.4092 106.774 12.7492 107.667 13.4292C108.574 14.1092 109.327 15.1358 109.927 16.5092L108.527 17.3692C108.02 16.2358 107.4 15.4092 106.667 14.8892C105.947 14.3692 105.067 14.1092 104.027 14.1092C103.014 14.1092 102.194 14.3025 101.567 14.6892C100.954 15.0758 100.647 15.6425 100.647 16.3892C100.647 17.0825 100.934 17.6358 101.507 18.0492C102.08 18.4625 102.94 18.8025 104.087 19.0692L105.047 19.2892C106.967 19.7292 108.334 20.3358 109.147 21.1092C109.96 21.8825 110.36 22.9092 110.347 24.1892C110.334 25.5758 109.827 26.6292 108.827 27.3492C107.827 28.0558 106.507 28.4092 104.867 28.4092C103.28 28.4092 102.007 28.0625 101.047 27.3692C100.1 26.6625 99.3204 25.6292 98.707 24.2692L100.207 23.3492ZM128 12.4092V28.4092H126.24V16.3892L121.18 28.4092H119.36L114.1 16.2892V28.4092H112.34V12.4092H114.16L120.26 26.3092L126.18 12.4092H128ZM129.996 20.3292C129.996 18.7825 130.269 17.4158 130.816 16.2292C131.376 15.0292 132.196 14.0958 133.276 13.4292C134.369 12.7492 135.683 12.4092 137.216 12.4092C138.749 12.4092 140.056 12.7492 141.136 13.4292C142.216 14.0958 143.029 15.0292 143.576 16.2292C144.136 17.4158 144.416 18.7825 144.416 20.3292C144.416 21.8892 144.136 23.2825 143.576 24.5092C143.029 25.7225 142.209 26.6758 141.116 27.3692C140.036 28.0625 138.736 28.4092 137.216 28.4092C135.683 28.4092 134.369 28.0625 133.276 27.3692C132.196 26.6758 131.376 25.7225 130.816 24.5092C130.269 23.2825 129.996 21.8892 129.996 20.3292ZM131.756 20.3292C131.756 21.5425 131.969 22.6292 132.396 23.5892C132.823 24.5492 133.443 25.3025 134.256 25.8492C135.083 26.3825 136.069 26.6492 137.216 26.6492C138.349 26.6492 139.323 26.3758 140.136 25.8292C140.963 25.2825 141.589 24.5358 142.016 23.5892C142.443 22.6292 142.656 21.5425 142.656 20.3292C142.656 19.1158 142.443 18.0492 142.016 17.1292C141.589 16.1958 140.969 15.4692 140.156 14.9492C139.343 14.4292 138.363 14.1692 137.216 14.1692C136.069 14.1692 135.083 14.4292 134.256 14.9492C133.443 15.4692 132.823 16.1958 132.396 17.1292C131.969 18.0492 131.756 19.1158 131.756 20.3292ZM148.142 28.4092H146.422V12.4092H152.382C154.289 12.4092 155.869 12.7958 157.122 13.5692C158.389 14.3425 159.022 15.6558 159.022 17.5092C159.022 18.6692 158.709 19.6158 158.082 20.3492C157.455 21.0825 156.642 21.6092 155.642 21.9292C154.642 22.2492 153.555 22.4092 152.382 22.4092H148.142V28.4092ZM152.382 20.7292C155.595 20.7292 157.202 19.6425 157.202 1Line truncated
<defs>
<linearGradient id="paint0_linear_1672_8272" x1="2.11604" y1="29.42" x2="9.42592" y2="5.9182" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
<linearGradient id="paint1_linear_1672_8272" x1="70.2328" y1="24.8297" x2="71.3519" y2="10.5309" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 7.7 KiB

+4
View File
@@ -0,0 +1,4 @@
<svg width="188" height="47" viewBox="0 0 188 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.8284 7.04366C53.233 4.173 48.5274 3.62266 41.5531 5.4819C38.1331 2.60396 33.9622 0.872252 29.5858 0.513231C25.2094 0.15421 20.8313 1.18459 17.024 3.46962C13.2166 5.75466 10.1573 9.18798 8.24612 13.3206C6.33491 17.4532 5.66076 22.0928 6.31184 26.6325C1.24351 32.0094 -0.667184 36.5485 0.935336 39.429C1.91439 41.1916 4.01711 42.084 7.09888 42.084C9.07014 42.0469 11.0318 41.7867 12.9495 41.3081C13.362 41.2114 13.7839 41.1048 14.2107 40.9908C17.4145 43.687 21.282 45.381 25.367 45.8774C29.452 46.3737 33.588 45.6522 37.2977 43.796C41.0074 41.9398 44.1396 39.0246 46.3329 35.3868C48.5262 31.749 49.6913 27.5368 49.6937 23.2363C49.6953 22.0972 49.6161 20.9596 49.4566 19.8327C52.4839 16.61 54.5084 13.5658 55.146 11.0398C55.5467 9.48793 55.4376 8.14432 54.8284 7.04366ZM27.8842 2.41292C32.4877 2.41876 36.9474 4.08973 40.5069 7.14236C44.0664 10.195 46.5065 14.4413 47.4132 19.1609C43.5799 23.0504 38.2153 27.2126 32.1252 30.8716C25.6511 34.7611 19.6061 37.3789 14.6753 38.8043C11.6569 36.0005 9.52487 32.3034 8.56185 28.2034C7.59884 24.1033 7.85034 19.794 9.28303 15.8469C10.7157 11.8998 13.2619 8.50128 16.5839 6.10207C19.906 3.70286 23.8469 2.41628 27.8842 2.41292ZM2.57816 38.4325C1.57066 36.6228 3.17081 33.0779 6.78596 28.9975C7.76617 32.9233 9.73017 36.5046 12.4754 39.372C7.22689 40.5892 3.57855 40.2372 2.57816 38.4325ZM27.8842 44.0598C23.8136 44.064 19.8406 42.7569 16.5054 40.3165C21.6211 38.6853 27.3698 36.0105 33.064 32.592C38.8127 29.1363 43.8762 25.2889 47.7213 21.5754C47.764 22.1233 47.7925 22.6761 47.7925 23.2363C47.7862 28.7562 45.6869 34.0481 41.9548 37.9517C38.2228 41.8553 33.1627 44.0519 27.8842 44.0598ZM53.3159 10.5266C52.811 12.5098 51.282 14.902 48.9896 17.4826C48.0033 13.5477 46.0292 9.95999 43.2717 7.09076C48.4515 5.89589 52.1828 6.23303 53.1879 8.0402C53.534 8.66739 53.5791 9.5028 53.3159 10.5266Z" fill="#F4F1F0"/>
<path d="M80.6019 23.5292C80.0285 24.7692 79.1952 25.7292 78.1019 26.4092C77.0085 27.0758 75.6752 27.4092 74.1019 27.4092C72.5685 27.4092 71.2619 27.0625 70.1819 26.3692C69.1019 25.6758 68.2885 24.7225 67.7419 23.5092C67.1952 22.2825 66.9219 20.8892 66.9219 19.3292C66.9219 17.7825 67.1952 16.4158 67.7419 15.2292C68.2885 14.0292 69.1019 13.0958 70.1819 12.4292C71.2619 11.7492 72.5685 11.4092 74.1019 11.4092C75.7019 11.4092 77.0485 11.7492 78.1419 12.4292C79.2352 13.0958 80.0752 14.0758 80.6619 15.3692L79.1619 16.4292C78.2685 14.2292 76.5819 13.1292 74.1019 13.1292C73.0219 13.1292 72.0685 13.3825 71.2419 13.8892C70.4285 14.3958 69.7952 15.1158 69.3419 16.0492C68.8885 16.9825 68.6619 18.0758 68.6619 19.3292C68.6619 20.6358 68.8885 21.7692 69.3419 22.7292C69.7952 23.6758 70.4285 24.4092 71.2419 24.9292C72.0685 25.4358 73.0219 25.6892 74.1019 25.6892C76.5152 25.7025 78.1885 24.6292 79.1219 22.4692L80.6019 23.5292ZM82.6641 19.3292C82.6641 17.7825 82.9374 16.4158 83.4841 15.2292C84.0441 14.0292 84.8641 13.0958 85.9441 12.4292C87.0374 11.7492 88.3507 11.4092 89.8841 11.4092C91.4174 11.4092 92.7241 11.7492 93.8041 12.4292C94.8841 13.0958 95.6974 14.0292 96.2441 15.2292C96.8041 16.4158 97.0841 17.7825 97.0841 19.3292C97.0841 20.8892 96.8041 22.2825 96.2441 23.5092C95.6974 24.7225 94.8774 25.6758 93.7841 26.3692C92.7041 27.0625 91.4041 27.4092 89.8841 27.4092C88.3507 27.4092 87.0374 27.0625 85.9441 26.3692C84.8641 25.6758 84.0441 24.7225 83.4841 23.5092C82.9374 22.2825 82.6641 20.8892 82.6641 19.3292ZM84.4241 19.3292C84.4241 20.5425 84.6374 21.6292 85.0641 22.5892C85.4907 23.5492 86.1107 24.3025 86.9241 24.8492C87.7507 25.3825 88.7374 25.6492 89.8841 25.6492C91.0174 25.6492 91.9907 25.3758 92.8041 24.8292C93.6307 24.2825 94.2574 23.5358 94.6841 22.5892C95.1107 21.6292 95.3241 20.5425 95.3241 19.3292C95.3241 18.1158 95.1107 17.0492 94.6841 16.1292C94.2574 15.1958 93.6374 14.4692 92.8241 13.9492C92.0107 13.4292 91.0307 13.1692 89.8841 13.1692C88.7374 13.1692 87.7507 13.4292 86.9241 13.9492C86.1107 14.4692 85.4907 15.1958 85.0641 16.1292C84.6374 17.0492 84.4241 18.1158 84.4241 19.3292ZM100.59 22.3492C101.123 23.5358 101.763 24.3892 102.51 24.9092C103.27 25.4292 104.197 25.6892 105.29 25.6892C106.463 25.6892 107.377 25.4825 108.03 25.0692C108.697 24.6558 109.03 24.0025 109.03 23.1092C109.03 21.4958 107.75 20.4292 105.19 19.9092L104.19 19.6892C102.603 19.3692 101.397 18.8625 100.57 18.1692C99.7432 17.4758 99.3298 16.5092 99.3298 15.2692C99.3298 14.4825 99.5632 13.7958 100.03 13.2092C100.497 12.6225 101.117 12.1758 101.89 11.8692C102.677 11.5625 103.53 11.4092 104.45 11.4092C105.957 11.4092 107.157 11.7492 108.05 12.4292C108.957 13.1092 109.71 14.1358 110.31 15.5092L108.91 16.3692C108.403 15.2358 107.783 14.4092 107.05 13.8892C106.33 13.3692 105.45 13.1092 104.41 13.1092C103.397 13.1092 102.577 13.3025 101.95 13.6892C101.337 14.0758 101.03 14.6425 101.03 15.3892C101.03 16.0825 101.317 16.6358 101.89 17.0492C102.463 17.4625 103.323 17.8025 104.47 18.0692L105.43 18.2892C107.35 18.7292 108.717 19.3358 109.53 20.1092C110.343 20.8825 110.743 21.9092 110.73 23.1892C110.717 24.5758 110.21 25.6292 109.21 26.3492C108.21 27.0558 106.89 27.4092 105.25 27.4092C103.663 27.4092 102.39 27.0625 101.43 26.3692C100.483 25.6625 99.7032 24.6292 99.0898 23.2692L100.59 22.3492ZM128.383 11.4092V27.4092H126.623V15.3892L121.563 27.4092H119.743L114.483 15.2892V27.4092H112.723V11.4092H114.543L120.643 25.3092L126.563 11.4092H128.383ZM130.379 19.3292C130.379 17.7825 130.652 16.4158 131.199 15.2292C131.759 14.0292 132.579 13.0958 133.659 12.4292C134.752 11.7492 136.066 11.4092 137.599 11.4092C139.132 11.4092 140.439 11.7492 141.519 12.4292C142.599 13.0958 143.412 14.0292 143.959 15.2292C144.519 16.4158 144.799 17.7825 144.799 19.3292C144.799 20.8892 144.519 22.2825 143.959 23.5092C143.412 24.7225 142.592 25.6758 141.499 26.3692C140.419 27.0625 139.119 27.4092 137.599 27.4092C136.066 27.4092 134.752 27.0625 133.659 26.3692C132.579 25.6758 131.759 24.7225 131.199 23.5092C130.652 22.2825 130.379 20.8892 130.379 19.3292ZM132.139 19.3292C132.139 20.5425 132.352 21.6292 132.779 22.5892C133.206 23.5492 133.826 24.3025 134.639 24.8492C135.466 25.3825 136.452 25.6492 137.599 25.6492C138.732 25.6492 139.706 25.3758 140.519 24.8292C141.346 24.2825 141.972 23.5358 142.399 22.5892C142.826 21.6292 143.039 20.5425 143.039 19.3292C143.039 18.1158 142.826 17.0492 142.399 16.1292C141.972 15.1958 141.352 14.4692 140.539 13.9492C139.726 13.4292 138.746 13.1692 137.599 13.1692C136.452 13.1692 135.466 13.4292 134.639 13.9492C133.826 14.4692 133.206 15.1958 132.779 16.1292C132.352 17.0492 132.139 18.1158 132.139 19.3292ZM148.525 27.4092H146.805V11.4092H152.765C154.671 11.4092 156.251 11.7958 157.505 12.5692C158.771 13.3425 159.405 14.6558 159.405 16.5092C159.405 17.6692 159.091 18.6158 158.465 19.3492C157.838 20.0825 157.025 20.6092 156.025 20.9292C155.025 21.2492 153.938 21.4092 152.765 21.4092H148.525V27.4092ZM152.765 19.7292C155.978 19.7292 157.585 18.6425 157.585 16.4692Line truncated
</svg>

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 997 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

+41
View File
@@ -0,0 +1,41 @@
<svg width="878" height="400" viewBox="0 0 878 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-1.7266e-06 342.5L12.697 341.565C26.5393 340.546 37.5456 329.539 38.565 315.697L39.5 303L40.435 315.697C41.4544 329.539 52.4607 340.546 66.303 341.565L79 342.5L66.303 343.435C52.4607 344.454 41.4544 355.461 40.435 369.303L39.5 382L38.565 369.303C37.5456 355.461 26.5393 344.454 12.697 343.435L-1.7266e-06 342.5Z" fill="url(#paint0_radial_1649_6128)"/>
<path d="M803 344.5L813.834 343.702C827.676 342.683 838.683 331.676 839.702 317.834L840.5 307L841.298 317.834C842.317 331.676 853.324 342.683 867.166 343.702L878 344.5L867.166 345.298C853.324 346.317 842.317 357.324 841.298 371.166L840.5 382L839.702 371.166C838.683 357.324 827.676 346.317 813.834 345.298L803 344.5Z" fill="#F4F1F0"/>
<path d="M303 236L303.461 235.967C310.955 235.434 316.929 229.492 317.5 222C318.071 229.492 324.045 235.434 331.539 235.967L332 236L331.539 236.033C324.045 236.566 318.071 242.508 317.5 250C316.929 242.508 310.955 236.566 303.461 236.033L303 236Z" fill="url(#paint1_radial_1649_6128)"/>
<path d="M230 186.5L241.298 185.679C255.142 184.673 266.159 173.677 267.191 159.836L268 149L268.809 159.836C269.841 173.677 280.858 184.673 294.702 185.679L306 186.5L294.702 187.321C280.858 188.327 269.841 199.323 268.809 213.164L268 224L267.191 213.164C266.159 199.323 255.142 188.327 241.298 187.321L230 186.5Z" fill="url(#paint2_radial_1649_6128)"/>
<path d="M736 27L748.241 26.0986C755.656 25.5525 761.553 19.6563 762.099 12.2407L763 -1.18021e-06L763.901 12.2407C764.447 19.6563 770.344 25.5525 777.759 26.0986L790 27L777.759 27.9014C770.344 28.4475 764.447 34.3437 763.901 41.7593L763 54L762.099 41.7593C761.553 34.3437 755.656 28.4475 748.241 27.9014L736 27Z" fill="url(#paint3_radial_1649_6128)"/>
<path d="M76 381.5L80.3237 381.182C87.7393 380.636 93.6355 374.739 94.1816 367.324L94.5 363L94.8184 367.324C95.3645 374.739 101.261 380.636 108.676 381.182L113 381.5L108.676 381.818C101.261 382.364 95.3645 388.261 94.8184 395.676L94.5 400L94.1816 395.676C93.6355 388.261 87.7393 382.364 80.3237 381.818L76 381.5Z" fill="url(#paint4_radial_1649_6128)"/>
<path d="M763 295L775.241 294.099C782.656 293.553 788.553 287.656 789.099 280.241L790 268L790.901 280.241C791.447 287.656 797.344 293.553 804.759 294.099L817 295L804.759 295.901C797.344 296.447 791.447 302.344 790.901 309.759L790 322L789.099 309.759C788.553 302.344 782.656 296.447 775.241 295.901L763 295Z" fill="#F4F1F0"/>
<defs>
<radialGradient id="paint0_radial_1649_6128" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-22.1012 284.396) rotate(40.8095) scale(207.896 272.098)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
<radialGradient id="paint1_radial_1649_6128" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(294.887 215.406) rotate(39.8177) scale(75.2034 97.8666)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
<radialGradient id="paint2_radial_1649_6128" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(208.738 131.338) rotate(40.4345) scale(198.881 259.775)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
<radialGradient id="paint3_radial_1649_6128" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(720.893 -12.7165) rotate(40.8095) scale(142.106 185.991)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
<radialGradient id="paint4_radial_1649_6128" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(65.6488 354.287) rotate(40.8095) scale(97.3688 127.438)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

+6
View File
@@ -0,0 +1,6 @@
<svg width="260" height="146" viewBox="0 0 260 146" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M225 122C231.421 121.527 236.527 116.421 237 110C237.473 116.421 242.579 121.527 249 122C242.579 122.473 237.473 127.579 237 134C236.527 127.579 231.421 122.473 225 122Z" fill="#F4F1F0"/>
<path d="M193 113.5C197.548 113.165 201.165 109.548 201.5 105C201.835 109.548 205.452 113.165 210 113.5C205.452 113.835 201.835 117.452 201.5 122C201.165 117.452 197.548 113.835 193 113.5Z" fill="#F4F1F0"/>
<path d="M243 8.5C247.548 8.16505 251.165 4.54847 251.5 -3.71547e-07C251.835 4.54847 255.452 8.16505 260 8.5C255.452 8.83495 251.835 12.4515 251.5 17C251.165 12.4515 247.548 8.83495 243 8.5Z" fill="#F4F1F0"/>
<path d="M-7.64949e-07 128.5L3.39231 128.25C10.8078 127.704 16.7041 121.808 17.2502 114.392L17.5 111L17.7498 114.392C18.2959 121.808 24.1921 127.704 31.6077 128.25L35 128.5L31.6077 128.75C24.1922 129.296 18.2959 135.192 17.7498 142.608L17.5 146L17.2502 142.608C16.7041 135.192 10.8078 129.296 3.39231 128.75L-7.64949e-07 128.5Z" fill="#F4F1F0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

+11
View File
@@ -0,0 +1,11 @@
<svg width="1280" height="1672" viewBox="0 0 1280 1672" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1280 0C1280 0 1049 584.5 0 263.5V2565.5H1280V0Z" fill="url(#paint0_radial_1649_6041)"/>
<defs>
<radialGradient id="paint0_radial_1649_6041" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1581.43 -717.729) rotate(113.307) scale(5564.03 5349.44)">
<stop stop-color="#0F5881"/>
<stop offset="0.369792" stop-color="#1EA49C"/>
<stop offset="0.666667" stop-color="#76CE75"/>
<stop offset="0.911458" stop-color="#ECF39F"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 596 B

+223
View File
@@ -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);
}
});
});
}
})
+114
View 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>
+517
View File
@@ -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>
+426
View File
@@ -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>
-22
View File
@@ -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>
+120
View File
@@ -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>
+313
View File
@@ -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>
+317
View File
@@ -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>
+372
View File
@@ -0,0 +1,372 @@
<!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">
<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="bank_cards">
<label>
<input type="radio" name="payment1" checked>
<img src="assets/img/bank_card1.png" alt="">
</label>
<label>
<input type="radio" name="payment1">
<img src="assets/img/bank_card2.png" alt="">
</label>
<label>
<input type="radio" name="payment1">
<img src="assets/img/bank_card3.png" alt="">
</label>
<label>
<input type="radio" name="payment1">
<img src="assets/img/bank_card4.png" alt="">
</label>
<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>Новой картой</p>
</label>
</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="adress">
<div class="">Адрес доставки</div>
<p>Москва, Аминьевское шоссе, д.1, кв 116</p>
<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>Добавить</p>
</label>
</div>
</div>
<div class="adress">
<input type="text" class="input" placeholder="Получатель">
<input type="tel" class="input" placeholder="Телефон">
</div>
</div>
</div>
<div class="change_radio">
<label>
<input type="radio" name="deliver_method">
Самовывоз
</label>
<label>
<input type="radio" name="deliver_method" checked>
Доставка
</label>
</div>
<div class="dilever_date">Ожидаемая дата доставки: завтра, 1 июня</div>
<button class="main_btn pay_btn">Оплатить</button>
<p class="conditions">Нажимая на кнопку, вы соглашаетесь с  <a href="#">Условиями обработки персональных данных</a>, а также с <a href="#">Условиями продажи</a></p>
</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>Бесплатно</p>
</div>
<div class="order_info">
<div>ИТОГО</div>
<p>1500 ₽</p>
</div>
</div>
</div>
<button class="main_btn pay_btn">Оплатить</button>
<p class="conditions">Нажимая на кнопку, вы соглашаетесь с  <a href="#">Условиями обработки персональных данных</a>, а также с <a href="#">Условиями продажи</a></p>
</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>
+291
View File
@@ -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>
+314
View File
@@ -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>
+624
View File
@@ -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">Стери&shyлизация</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>
+440
View File
@@ -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>
+134
View File
@@ -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>
+418
View File
@@ -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>
-39
View File
@@ -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>