diff --git a/.gitignore b/.gitignore deleted file mode 100644 index eabfe7e..0000000 --- a/.gitignore +++ /dev/null @@ -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 \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index cc36099..0000000 --- a/README.md +++ /dev/null @@ -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) - - - -## С точки зрения SEO: -* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2. -* на странице должен быть только один заголовок первого уровня (h1) -* должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8 -* для кнопок, нажатие на которые не требует редиректа используем тег \, а не \ -* для \ самостоятельно проставляем атрибут 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-свойсв. \ No newline at end of file diff --git a/account.html b/account.html new file mode 100644 index 0000000..3d85025 --- /dev/null +++ b/account.html @@ -0,0 +1,306 @@ + + + + + + + + Document + + +
+
+ + +
+
+ + + + + + + + +
+ + + \ No newline at end of file diff --git a/adress.html b/adress.html new file mode 100644 index 0000000..3455f3b --- /dev/null +++ b/adress.html @@ -0,0 +1,283 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +

+ ПУНКТ ВЫДАЧи + + + + + + +

+
+
+ +
ПОСТАМАТ
Москва, Матвеевская улица, 36к1
+
+
+ +

Доставка завтра, бесплатно

+
+
+
+ +
+
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/adress2.html b/adress2.html new file mode 100644 index 0000000..d87f2ec --- /dev/null +++ b/adress2.html @@ -0,0 +1,283 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +

+ Адрес доставки + + + + + + +

+
+
+ +
Москва, Матвеевская улица, 36к2, квартира 98
+
+
+ +

Доставка завтра, бесплатно

+
+
+
+ +
+
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css deleted file mode 100644 index 17b7034..0000000 --- a/assets/css/gp-style-core.css +++ /dev/null @@ -1,11 +0,0 @@ -/* - -ШАБЛОН использования глобальных переменных: - -:root { - --main-text: #e1667c; - --main-color: #8da6cb; - --font-family: "Craftwork Grotesk", sans-serif; -} - -*/ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css deleted file mode 100644 index ac7de8a..0000000 --- a/assets/css/gp-style-desktop.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Стили для лептопов */ -@media only screen and (min-width: 992px) and (max-width: 1400px) { - -} \ No newline at end of file diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css deleted file mode 100644 index 0cf51d3..0000000 --- a/assets/css/gp-style-mobile.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Стили для мобильных устройств */ -@media only screen and (max-width: 576px) { - - -} \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css deleted file mode 100644 index 32a3ef6..0000000 --- a/assets/css/gp-style-tablet.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Стили для планшетов */ -@media only screen and (max-width: 992px) { - - -} \ No newline at end of file diff --git a/assets/css/gp-style-ultra.css b/assets/css/gp-style-ultra.css deleted file mode 100644 index c149baa..0000000 --- a/assets/css/gp-style-ultra.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Стили для ультрашироких экранов */ -@media only screen and (min-width: 1400px) { - -} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..1946293 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,2964 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; +} +:root{ + --grey-black: #121212; + --creme-white: #F4F1F0; + --transition: .3s all ease; + --GR1: linear-gradient(22deg, #F44242 23.69%, #569EF0 66.57%); + --new-blue: #569EFF; +} +html{ + scroll-behavior: smooth; +} +body { + font-family: 'Craftwork Grotesk', sans-serif; + font-weight: 400; + font-size: 24px; + line-height: normal; + font-style: normal; + color: var(--grey-black); + background-color: var(--creme-white); +} +.wrapper { + overflow: hidden; +} +input, button{ + border: none; + outline: none; + background: none; + cursor: pointer; +} +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; +} +h1, h2, h3, h4, h5, h6{ + margin: 0; + padding: 0; + font-family: 'Craftwork Grotesk', sans-serif; +} +a, img, button, input, label, svg, path{ + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; +} +a:hover { + text-decoration: none; +} +.cont { + max-width: 1060px; + padding: 0px 30px; + margin: 0 auto; +} + +/* */ + +.back_link{ + display: inline-flex; + align-items: center; + gap: 9px; + font-size: 16px; + font-style: normal; + font-weight: 500; + color: var(--grey-black); + border-radius: 65px; + border: 1px solid var(--grey-black); + padding: 1px 10px; + transition: var(--transition); +} +.back_link svg path{ + transition: var(--transition); +} +.back_link:hover{ + background-color: var(--grey-black); + color: var(--creme-white); +} +.back_link:hover svg path{ + stroke: var(--creme-white); +} +.section_title{ + font-size: 82px; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + color: var(--grey-black); +} +.section_title .back_link{ + display: none; +} +.section_desc{ + font-size: 24px; + font-weight: 400; +} +.main_btn{ + flex: 0 0 auto; + font-size: 24px; + font-style: normal; + font-weight: 500; + border-radius: 48px; + border: 2px solid var(--grey-black); + transition: var(--transition); + padding: 9px 23px; + display: inline-flex; + justify-content: center; + cursor: pointer; + color: var(--grey-black); + transition: var(--transition); +} +.main_btn:not(.main_btn[disabled]):hover, +.main_btn:not(.main_btn:disabled):hover{ + border-color: var(--grey-black); + color: var(--creme-white); + background-color: var(--grey-black); +} +.main_btn.main_btn_white{ + border-color: var(--creme-white); + color: var(--creme-white); +} +.main_btn.main_btn_white:hover{ + border-color: var(--creme-white); + background-color: var(--creme-white); + color: var(--grey-black); +} +.main_btn[disabled], +.main_btn:disabled{ + opacity: .3; + cursor: not-allowed; +} +.btn--black-hover:hover{ + background: var(--grey-black) !important; + color: var(--creme-white) !important; +} +.section_subtitle{ + font-weight: 700; + text-transform: uppercase; + color: var(--grey-black); +} +.d-flex{ + display: flex; +} +.flex-column{ + flex-direction: column; +} +.justify-content-end{ + justify-content: end; +} +.justify-content-between{ + justify-content: space-between; +} +.w-100{ + width: 100%; +} +.w-max-100{ + max-width: 100% !important; +} +.gap-20{ + gap: 20px; +} +.gap-15{ + gap: 15px; +} +.flex-row{ + flex-direction: row !important; +} +.flex-nowrap{ + flex-wrap: nowrap !important; +} +.align-items-center{ + align-items: center; +} +.align-items-start{ + align-items: flex-start; +} +.section_top{ + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 20px; +} +.plus_black g{ + opacity: 1; +} +.plus_black circle, +.plus_black path, +.back_btn path{ + transition: var(--transition); +} +.plus_black:hover circle{ + fill: var(--grey-black); +} +.plus_black:hover path{ + stroke: var(--creme-white); +} +.back_btn:hover path{ + stroke: var(--creme-white); +} +.back_btn{ + display: flex; + transition: var(--transition); + border-radius: 50%; +} +.back_btn:hover{ + background-color: var(--grey-black); +} +/* PETS SECTION */ +.pets{ + padding: 0 0 300px 0; + position: relative; + z-index: 1; +} +.pets_before{ + position: absolute; + width: 100%; + left: 0; + top: 111px; + z-index: -1; +} +.pets_before_mob{ + display: none; +} +.pets_form .pets_before{ + top: 270px; +} +.pets_form:has(.pets_form_end) .pets_before{ + top: 0; +} +.pets_row{ + display: flex; + align-items: flex-start; + position: relative; +} +.pets_left{ + max-width: 511px; + position: relative; + z-index: 1; +} +.pets .section_desc{ + margin: 20px 0 0 0; +} +.pets .pets_left .main_btn{ + margin: 20px 0 0 0; + justify-content: flex-start; + width: 100%; + max-width: 429px; +} +.pets .change_block:not(.change_block.active){ + overflow: hidden; + height: 0; + /* transition: var(--transition); */ +} +.pets .change_block .section_subtitle{ + margin: 32px 0 0 0; +} +.pets_left .pets_hero_image{ + display: none; +} +.pets_hero_image{ + position: absolute; + right: -100px; + top: -36px; + z-index: 0; +} +.pets_stars{ + position: absolute; + right: -100px; + top: 5px; + z-index: -1; +} + +/* PETS FORM */ +.pets.pets_form{ + padding: 0 0 60px 0; +} +.data_block{ + margin: 40px 0 0 0; +} +.data_block .data_block_top{ + border-radius: 60px 60px 0 0; + background-color: var(--grey-black); +} +.data_block .data_block_body{ + background-color: var(--creme-white); + border-radius: 60px; + border: 2px solid var(--grey-black); +} +.pets_form .data_block_top{ + padding: 15px 36px 95px 36px; +} +.pets_form .data_animal{ + display: flex; + align-items: center; + gap: 15px; +} +.pet_photo{ + position: relative; + cursor: pointer; +} +.pet_photo img{ + max-width: 121px; + height: auto; + object-fit: cover; +} +.pet_photo img:last-child{ + position: absolute; + max-width: 71%; + max-height: 71%; + width: 100%; + height: auto; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + border-radius: 50%; +} +.pet_photo input{ + position: absolute; + z-index: -1; + opacity: 0; + visibility: hidden; +} +.data_block_title{ + font-size: 24px; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + color: var(--grey-black); +} +.data_block_top .data_block_title{ + font-size: 36px; + color: var(--creme-white); +} +.pets_form_end .data_block_title{ + color: var(--grey-black); + font-size: 24px; +} +.date_block_desc{ + font-weight: 400; + color: var(--creme-white); +} +.pets_form_end .date_block_desc{ + color: var(--grey-black); + text-transform: capitalize; + margin: 0 0 5px 0; +} +.pets_form_end .date_block_desc:last-child{ + margin: 0; +} +.data_animal .data_block_title{ + margin: 0 0 10px 0; +} +.data_block_top + .data_block_body{ + margin: -80px 0 0 0; +} +.pet_inputs .form_group{ + display: flex; +} +.pet_inputs .input_name{ + font-weight: 700; + text-transform: uppercase; + padding: 31px 36px; + border-right: 2px solid var(--grey-black); + border-bottom: 2px solid var(--grey-black); + max-width: 43%; + width: 100%; + display: flex; + align-items: center; +} +.pet_inputs .input_name:has(.data_animal){ + padding-bottom: 5px; +} +.pet_inputs .input_wrap{ + padding: 31px 36px; + width: 100%; + color: var(--grey-black); + border-bottom: 2px solid var(--grey-black); +} +.pet_inputs .input_name:has(.data_animal) + .input_wrap{ + display: flex; + align-items: center; + padding-right: 10%; +} +.pet_inputs .collapse_input{ + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 15px; +} +.pet_inputs .w-100 .collapse_input{ + gap: 20px 43px; +} +.pet_inputs input{ + width: 100%; + font-size: 24px; + font-weight: 400; + color: var(--grey-black); +} +.pet_inputs input::placeholder{ + color: var(--grey-black); + opacity: .3; +} +.collapse_input label.align-items-start{ + align-items: flex-start; +} +.collapse_input label{ + display: flex; + gap: 15px; + align-items: center; +} +.collapse_input label:has(input.active){ + width: 100%; +} +.collapse_input p{ + font-weight: 500; + color: var(--grey-black); + text-transform: none; +} +.pets_form_end .collapse_input p{ + font-weight: 400; +} +.collapse_input label input{ + position: absolute; + width: 0; + visibility: hidden; +} +.collapse_input label input.active{ + position: relative; + width: 100%; + opacity: 1; + visibility: visible; +} +.plus, +.minus{ + cursor: pointer; +} +.plus g, +.plus path, +.minus g, +.minus path{ + transition: var(--transition); +} +.plus:hover g, +.minus:hover g{ + opacity: 1; +} +/* .collapse_input .plus.active path:last-child{ + opacity: 0; +} */ +label:has(input[type='radio']), +label:has(input[type='checkbox']){ + width: 35%; + cursor: pointer; + position: relative; +} +label:has(input[type='radio']) input, +label:has(input[type='checkbox']) input{ + position: absolute; + width: 0; + visibility: hidden; +} +.w-100 label:has(input[type='radio']), +.w-100 label:has(input[type='checkbox']){ + width: auto; +} +label:has(input[type='radio']) .checkmark, +label:has(input[type='checkbox']) .checkmark{ + flex: 0 0 auto; + position: relative; + width: 44px; + height: 44px; + border-radius: 50%; + border: 2px solid var(--grey-black); + transition: var(--transition); + opacity: .3; +} +label:has(input[type='radio']) .checkmark:hover, +label:has(input[type='checkbox']) .checkmark:hover{ + opacity: 1; +} +label:has(input[type='radio']) .checkmark::before, +label:has(input[type='checkbox']) .checkmark::before{ + position: absolute; + content: ''; + width: 15px; + height: 23px; + top: 50%; + left: 50%; + border-right: 2px solid var(--grey-black); + border-bottom: 2px solid var(--grey-black); + transform: rotate(45deg) translate(-89%, -15%); + opacity: 0; +} +label:has(input[type='checkbox']:checked) .checkmark, +label:has(input[type='radio']:checked) .checkmark{ + opacity: 1; +} +label:has(input[type='radio']:checked) .checkmark::before, +label:has(input[type='checkbox']:checked) .checkmark::before{ + opacity: 1; +} +.counter{ + display: flex; + align-items: center; + gap: 15px; +} +.counter input{ + width: 30px; + text-align: center; +} +.pet_inputs .form_group:last-child .input_name, +.pet_inputs .form_group:last-child .input_wrap{ + border-bottom: none; +} +.pets_form .data_block{ + margin: 40px 0 20px 0; +} +.pets_form_end .form_group:last-child .input_name{ + border-right: none; +} +.pets_form:has(.pets_form_end){ + padding: 0 0 100px 0; +} +.pets_form:has(.pets_form_end)::before{ + bottom: -355px; +} +/* PROFILE */ +.profile{ + position: relative; + padding: 0 0 90px 0; +} +.profile_before{ + position: absolute; + width: 100%; + top: 290px; + left: 0; + z-index: -1; +} +.pets_form_actions{ + gap: 15px; + margin: 35px 0 0 0; +} +.profile .pets_form_actions .main_btn{ + max-width: 429px; + width: 100%; + justify-content: flex-start; +} +.pets_form_actions p{ + font-size: 12px; + line-height: normal; + color: var(--creme-white); +} +/* ORDER */ +.order{ + padding: 0 0 110px 0; +} +.order_single{ + padding: 0 0 45px 0; +} +.data_block_table .data_block_top{ + padding: 28px 36px 100px 36px; + display: flex; + gap: 20px ; + justify-content: flex-start; +} +.data_block_table .data_block_body{ + margin: -80px 0 0 0; +} +.data_block_table .data_block_title{ + font-size: 24px; + text-align: left; +} +.data_block_table .data_block_title:first-child{ + width: 35%; +} +.data_block_table .data_block_title:nth-child(2){ + width: 17%; +} +.data_block_table .data_block_title:nth-child(3){ + width: 22%; +} +.data_block_table2 .data_block_title:first-child{ + width: 58%; +} +.data_block_table2 .data_block_title:nth-child(2){ + width: 17%; +} +.data_block_table2 .data_block_title:last-child{ + width: 19%; +} +.data_block_table3 .data_block_title:first-child{ + width: 62%; +} +.data_block_table3 .data_block_title:nth-child(2){ + width: 18%; +} +.data_block_table3 .data_block_title:last-child{ + width: auto; +} +.order_item{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 29px 36px 29px 36px; + border-bottom: 2px solid var(--grey-black); +} +.cart .order_item{ + padding: 22px 36px; +} +.order_item:last-child{ + border-bottom: none; + padding: 33px 36px 23px 36px; +} +.order_item .order_id, +.order_item .product_title{ + font-size: 24px; + font-weight: 700; + text-transform: uppercase; + color: var(--grey-black); + text-wrap: nowrap; +} +.order_id{ + width: 30%; +} +.order_item_text{ + font-size: 24px; + font-weight: 500; + color: var(--grey-black); + text-align: center; + width: 20%; +} +.order_item .counter input{ + font-size: 24px; + font-weight: 500; + color: var(--grey-black); + text-align: center; +} +.order_item.done .order_item_text, +.order_item.done .product_image{ + opacity: .3; +} +.order_item .product_image{ + display: flex; + gap: 10px; + align-items: center; + width: 50%; +} +.order .product_image img{ + width: 49px; + height: 64px; + object-fit: cover; +} +.cart .product_image .for_image_border{ + width: 64px; + height: 64px; + border: 2px solid var(--grey-black); + border-radius: 50%; + padding: 7px; + flex: 0 0 auto; +} +.cart .product_image img{ + width: 100%; + max-height: 100%; + height: auto; + object-fit: cover; +} +.order .pets_form_actions .d-flex{ + gap: 15px; +} +/* RETURN */ +.return{ + padding: 0 0 90px 0; +} +.data_block_table3 .order_item label{ + width: auto; + margin: 0 20px 0 0; +} +.data_block_table3 .product_image{ + width: 60%; +} +/* MODALS */ +.modal{ + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + border-radius: 60px; + border: 2px solid var(--grey-black); + background: var(--creme-white); + overflow: hidden; + opacity: 0; + z-index: -1; + transition: var(--transition); +} +.modal.modal_open{ + opacity: 1; + z-index: 3; +} +body:has(.modal_open){ + overflow: hidden; + padding-right: 17px; +} +.modal_back{ + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, .5); + opacity: 0; + z-index: -1; + transition: var(--transition); +} +body:has(.modal_open) .modal_back{ + opacity: 1; + z-index: 1; +} +.modal_big{ + max-width: 754px; + width: 100%; +} +.modal_big::-webkit-scrollbar { + display: none; +} +.modal_content{ + padding: 45px 50px 30px 50px; + max-height: 585px; + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + position: relative; +} +.return_modal2 .modal_content::before{ + position: fixed; + content: ''; + left: 0; + bottom: 0; + width: 100%; + height: 165px; + background: linear-gradient(0deg, #F4F1F0 0%, rgba(244, 241, 240, 0.00) 100%); + z-index: 1; +} +.return_modal1{ + padding: 90px 35px; +} +.modal_title{ + font-size: 24px; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + color: var(--grey-black); +} +.return_modal1 .modal_title{ + max-width: 385px; +} +.return_modal1 .return_modal_image{ + position: absolute; + right: 88px; + bottom: -84px; + bottom: 0; + z-index: -1; +} +.modal .plus:not(.modal_top .plus){ + position: fixed; + z-index: 1; + right: 30px; + top: 25px; +} +.modal .plus{ + transform: rotate(45deg); +} +.modal .products{ + display: flex; + align-items: flex-start; + gap: 15px; + margin: 0 0 30px 0; + width: 100%; + overflow-x: scroll; + scrollbar-width: none; + -ms-overflow-style: none; +} +.modal .products::-webkit-scrollbar { + display: none; +} +.modal .product_item{ + border-radius: 25px; + border: 2px solid var(--grey-black); + background: var(--creme-white); + padding: 14px 25px 22px 25px; + display: flex; + flex-direction: column; + gap: 5px; + max-width: 185px; +} +.modal .product_item.deactive{ + opacity: .3; +} +.modal .product_item img{ + max-width: 100%; + height: auto; +} +.modal .product_title{ + font-size: 20px; + font-weight: 500; + color: var(--grey-black); + line-height: normal; +} +.return_modal2 .modal_title{ + margin: 0 0 10px 0; +} +.checkbox_card{ + border-radius: 25px; + border: 2px solid var(--grey-black); + background: var(--creme-white); + backdrop-filter: blur(99px); + margin: 0 0 30px 0; +} +.checkbox_card .input_wrap{ + display: flex; + padding: 28px 38px 20px 38px; + border-bottom: 2px solid var(--grey-black); +} +.checkbox_card .input_wrap:last-child{ + border: none; +} +.checkbox_card label:has(input[type='checkbox']){ + width: max-content; + display: flex; + gap: 17px; + align-items: center; +} +.return_modal2 form{ + margin: 0 0 30px 0; +} +.return_modal2 .main_btn{ + position: fixed; + bottom: 18px; + background-color: var(--creme-white); + left: 50px; + right: 50px; + z-index: 2; +} +.return_modal2 textarea{ + width: 100%; + height: 182px; + border-radius: 25px; + background-color: var(--creme-white); + border: 2px solid var(--grey-black); + margin: 0 0 30px 0; + resize: none; +} +.caption_text{ + font-size: 20px; + font-weight: 500; + color: var(--grey-black); +} +.remined_text{ + border-radius: 25px; + background: rgba(18, 18, 18, .3); + font-size: 20px; + font-weight: 500; + color: var(--creme-white); + gap: 10px; + padding: 20px; + margin: 15px 0 20px 0; +} +.remined_text svg{ + flex: 0 0 auto; +} +.photo_image{ + display: flex; + align-items: center; + gap: 23px; + position: relative; + margin: 23px 0 0 0; + cursor: pointer; +} +.photo_image:last-child{ + margin: 0; +} +.photo_image input{ + position: absolute; + visibility: hidden; + opacity: 0; +} +.photo_image img{ + width: 124px; + height: 124px; + object-fit: contain; + border-radius: 25px; + border: 2px solid var(--grey-black); + background-color: transparent; +} +.photo_image .image_title{ + font-size: 24px; + font-weight: 700; + text-transform: uppercase; + color: var(--grey-black); +} +.photo_image p{ + font-size: 20px; + font-weight: 500; + color: var(--grey-black); + opacity: .3; +} +.auth_modal{ + width: 480px; +} +.auth_modal{ + padding: 30px 35px; +} +.auth .auth_modal{ + padding: 0; + width: 100%; +} +.auth1{ + padding: 25px 0 30px 0; +} +.auth1 .main_btn{ + max-width: 220px; + width: 100%; +} +.modal_top{ + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 0 0 12px 0; +} +.auth_modal label{ + display: flex; + align-items: flex-start; + width: auto !important; + gap: 15px; +} +.auth_modal .input{ + width: 100%; +} +.auth_modal .conditions{ + margin: 0; +} +.modal_inputs{ + display: flex; + flex-direction: column; + gap: 15px; + padding: 0 5px; +} +.modal_inputs .main_btn{ + max-width: 220px; +} +.auth_modal label:has(.input){ + display: flex; + flex-direction: column; + gap: 15px; +} +.auth_modal label:has(.input) p{ + color: #FF4242; + font-size: 12px; + font-weight: 500; + line-height: normal; + display: none; +} +.auth_modal label:has(.input.error) p{ + display: block; +} +.input.error{ + color: #FF4242; + border-color: #FF4242; +} +.input.error::placeholder{ + color: #FF4242; +} +/* FAQ */ +.faq{ + position: relative; + padding: 0 0 100px 0; +} +.faq .section_desc{ + margin: 15px 0 0 0; +} +.faq .data_block{ + margin: 50px 0 0 0; +} +.faq .data_block_top{ + padding: 30px 50px 100px 50px; +} +.faq .data_block_body { + margin: -80px 0 0 0; +} +.faq .data_block_title{ + font-size: 24px; +} +.faq_item{ + padding: 0 72px 0 49px; + font-size: 24px; + font-weight: 500; + color: var(--grey-black); + border-bottom: 2px solid var(--grey-black); +} +.faq_item:last-child{ + border: none; +} +.faq_top{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 44px 0 52px 0; +} +.faq_title, +.faq_top .faq_arr_down{ + cursor: pointer; +} +.faq_top .faq_arr_down{ + padding: 5px; + transition: var(--transition); +} +.faq_top .faq_arr_down.rotate{ + transform: rotateX(180deg); +} +.faq_body{ + overflow: hidden; + margin: 0; + height: 0; + transition: var(--transition); +} +.faq_body.open{ + margin: 0 0 30px 0; + height: auto; +} +/* ACCOUNT */ +.account{ + padding: 0 0 100px 0; +} +.account .section_desc{ + margin: 15px 0 0 0; +} +.account_row{ + margin: 40px 0 0 0; + display: flex; + flex-wrap: wrap; + gap: 20px; + align-items: flex-start; +} +.for_border{ + background-image: var(--GR1); + border-radius: 60px; + padding: 2px; + width: calc(50% - 10px); +} +.account_item{ + display: flex; + border-radius: 58px; + background: radial-gradient(340% 256% at 134% -31%, #0F5881 0%, #1EA49C 36%, #76CE75 66%, #ECF39F 91%); + align-items: center; + gap: 30px; + overflow: hidden; + padding: 8px 20px; +} +.account_item:nth-last-child(2){ + width: calc(50% - 10px); +} +.account_item.bg_black{ + background: var(--grey-black); +} +.for_border .account_item{ + background: var(--creme-white); + gap: 10px; +} +.for_border:has(.account_item_big){ + max-width: 34.4%; +} +.account_item_big{ + padding: 20px 52px; +} +.account_right{ + width: calc(100% - (34.4% + 20px)); + display: flex; + flex-wrap: wrap; + gap: 20px; +} +.account_right .account_item{ + width: 100%; +} +.account_item .account_item_title{ + font-size: 24px; + font-weight: 700; + color: var(--creme-white); + line-height: normal; + text-transform: uppercase; +} +.account_item img{ + max-width: 216px; +} +.account_item .account_item_title:not(.account_item_big .account_item_title){ + margin: 0 0 10px 0; +} +.account_item_big .account_item_title{ + text-align: center; +} +.for_border .account_item_title{ + color: var(--grey-black); + margin: 0 0 10px 0; +} +.account_item .animal_image{ + position: relative; + bottom: -40px; + max-height: 159px; +} +.account_item p{ + font-size: 20px; + font-weight: 500; + color: var(--creme-white); +} +.account_item_big p{ + text-align: center; +} +.for_border p{ + color: var(--grey-black); +} +/* PAYMENT */ +.payment{ + padding: 0 0 60px 0; +} +.payment_row{ + display: flex; + align-items: stretch; + gap: 40px; +} +.payment_left, +.payment_right{ + width: calc(50% - 20px); +} +.payment_right{ + height: auto; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.payment_left .pay_btn, +.payment_left .conditions{ + display: none; +} +.bank_cards{ + display: flex; + align-items: center; + gap: 15px; + padding: 15px 35px; + width: 100%; + overflow-x: auto; +} +.bank_cards label{ + width: max-content !important; + min-width: 117px; + position: relative; + transition: var(--transition); + border-radius: 9px; + border: 2px solid transparent; + padding: 3px; + display: flex; + align-items: center; + gap: 15px; +} +.bank_cards label img{ + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 9px; +} +.bank_cards label:has(input:checked){ + border-color: #000; +} +.bank_cards .collapse_input input{ + font-size: 24px; + font-weight: 400; + color: var(--grey-black); +} +.payment .data_block_top{ + padding: 20px 46px 75px 46px; +} +.payment .data_block_body{ + margin: -60px 0 0 0; +} +.data_block_body .adress{ + padding: 30px 50px; + display: flex; + flex-direction: column; + gap: 15px; + border-bottom: 2px solid var(--grey-black); +} +.data_block_body .adress:last-child{ + border: none; +} +.data_block_body .adress div{ + font-size: 24px; + font-weight: 700; + line-height: normal; +} +.input{ + border-radius: 48px; + border: 2px solid #B0AEAD; + background: var(--creme-white); + color: var(--grey-black); + font-size: 24px; + font-style: normal; + line-height: normal; + font-weight: 500; + transition: var(--transition); + padding: 9px 18px; +} +.input:focus, +.input:hover{ + border-color: var(--grey-black); +} +.order_info{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 42px 46px; + border-bottom: 2px solid var(--grey-black); +} +.order_info:last-child{ + border: none; +} +.order_info div, +.order_info:last-child p{ + font-size: 24px; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + color: var(--grey-black); +} +.order_info p{ + font-size: 20px; + font-weight: 500; + color: var(--grey-black); +} +.pay_btn{ + width: 100%; + font-weight: 700; + text-transform: uppercase; + padding: 25px 23px; + margin: 35px 0 0 0; +} +.conditions{ + font-size: 12px; + font-weight: 500; + line-height: 130%; + color: var(--new-blue); + margin: 20px 0 0 0; +} +.conditions a{ + color: var(--new-blue); + text-decoration: underline; +} +.change_radio{ + display: flex; + border-radius: 60px; + border: 2px solid var(--grey-black); + background: var(--creme-white); + backdrop-filter: blur(99px); + margin: 30px 0 0 0; + position: relative; + z-index: 1; +} +.change_radio label{ + width: 50% !important; + text-align: center; + font-size: 20px; + font-weight: 500; + padding: 28px 0; + color: var(--grey-black); + transition: .5s color ease; +} +.change_radio label:has(input:checked){ + color: var(--creme-white); +} +.change_radio::before{ + position: absolute; + content: ''; + border-radius: 60px; + width: 55%; + height: 100%; + top: 0; + background-color: var(--grey-black); + z-index: -1; + transition: .5s all ease; +} +.change_radio:has(label:last-child input:checked)::before{ + left: 45.3%; +} +.change_radio:has(label:first-child input:checked)::before{ + left: 0; +} +.dilever_date{ + font-size: 24px; + font-weight: 700; + color: var(--grey-black); + text-transform: uppercase; + line-height: 120%; + margin: 20px 0 0 0; +} +/* ADRESS */ +.adress{ + padding: 0 0 100px 0; +} +.adress_row{ + display: flex; + gap: 50px; + align-items: flex-start; + margin: 55px 0 30px 0; +} +.adress_left{ + width: calc(55% - 25px); +} +.adress_right{ + width: calc(45% - 25px); +} +.adress_left, +.adress_right{ + display: flex; + flex-direction: column; + gap: 25px; +} +.adress_row .input{ + padding: 26px 32px; +} +.adress_row .main_btn{ + padding: 26px 32px; +} +.adress_row .place_title{ + font-size: 24px; + font-weight: 500; + line-height: normal; + color: var(--grey-black); +} +.map_wrap{ + width: 100%; + max-height: 572px; + height: 100%; + border-radius: 60px; + border: 2px solid var(--grey-black); + backdrop-filter: blur(99px); + overflow: hidden; +} +/* CART */ +.cart{ + padding: 0 0 130px 0; +} +.cart .product_title{ + font-size: 20px; + font-weight: 500; + text-transform: none; +} +.cart .product_image{ + gap: 20px; +} +.data_block_body:has(.data_block_wrap){ + max-height: 508px; + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; +} +.data_block_body:has(.data_block_wrap)::-webkit-scrollbar { + display: none; +} +.data_block_wrap{ + height: max-content; +} +.delete_product{ + width: 44px; + height: 44px; + border-radius: 50%; + border: 2px solid var(--grey-black); + transition: .3s all ease; + display: flex; + justify-content: center; + align-items: center; +} +.delete_product path{ + transition: .3s all ease; +} +.delete_product:hover{ + background-color: var(--grey-black); +} +.delete_product:hover path{ + stroke: var(--creme-white); +} +.cart .order_item_text{ + font-size: 20px; +} +.product_price{ + display: flex; + gap: 14px; + align-items: center; +} +.order_item_text.product_price{ + width: 18%; +} +.product_price span{ + font-size: 16px; + font-weight: 500; + text-decoration: line-through; + text-transform: uppercase; + color: #999; +} +.product_try{ + padding: 23px 34px; + display: flex; + gap: 25px; + border-bottom: 2px solid var(--grey-black); +} +.product_try .for_image_border{ + flex: 0 0 auto; + width: 120px; + height: 120px; + padding: 14px; + border-radius: 50%; + border: 2px solid var(--grey-black); +} +.product_try img{ + width: 100%; + max-height: 100%; + height: auto; + object-fit: cover; + object-position: center; +} +.product_try:last-child{ + border: none; +} +.product_try .product_title{ + font-size: 24px; + line-height: 120%; + margin: 0 0 12px 0; +} +.product_try .main_btn{ + max-width: 220px; + width: 100%; +} + +/* HEADER */ +.header{ + padding: 24px 0 38px 0; +} +.header .header_block{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; +} +.header .header_navs{ + display: flex; + align-items: center; + gap: 25px; +} +.header_navs .header_nav{ + font-size: 18px; + text-transform: uppercase; + opacity: 0.6; + background: var(--GR1); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.header_navs .header_nav:hover{ + opacity: 1; +} + +.header_bars{ + display: none; +} +.header_mob { + position: fixed; + top: 0; + right: -150%; + z-index: 15; + padding: 20px 20px 40px; + display: flex; + flex-direction: column; + gap: 40px; + background: var(--creme-white); + width: 100%; + transition: .3s ease all; + height: 100vh; +} +.header_mob.active{ + right: 0; +} +.header_mob.active + .header_mob-bg{ + position: fixed; + top: 0; + left: 0; + z-index: 14; + width: 100%; + height: 100vh; + background: #1212126c; +} +.header_mob .header_close{ + max-width: fit-content; + margin-left: auto; +} +.header_mob .header_navs{ + flex-direction: column; + gap: 20px; +} +.header_mob .header_navs .header_nav{ + color: #121212; +} +.header_mob .header_links{ + display: flex; + align-items: center; + gap: 20px; +} +/* Footer start */ +.footer{ + background: var(--creme-white, #F4F1F0); + border-radius: 60px 60px 0 0; + padding-bottom: 45px; + z-index: 2; + position: relative; +} +.footer .footer_block{ + display: flex; + flex-direction: column; + gap: 46px; +} +.footer_block .footer_menu{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 24px 0px; +} +.footer_menu .footer_navs{ + display: flex; + align-items: center; + gap: 25px; +} +.footer_navs .footer_nav{ + font-size: 20px; + line-height: 24px; + background: linear-gradient(53.83deg, rgb(244, 66, 66),rgb(86, 158, 240)); + -webkit-text-fill-color: transparent; + background-clip: text; + text-transform: uppercase; + opacity: .7; + transition: .1s ease all; +} +.footer_navs .footer_nav:hover{ + opacity: 1; +} +.footer_block .footer_box{ + display: flex; + align-items: center; + gap: 15px; +} +.footer_box .footer_box-title{ + display: flex; + align-items: end; + font-size: 36px; + font-weight: 400; + white-space: nowrap; + line-height: 40px; + text-transform: uppercase; + color: var(--grey-black, #121212); +} +.footer_box .footer_box-title img{ + display: none; +} +.footer_box-title .footer_line-mob2{ + width: 93px; +} +.footer_box .footer_box-link{ + font-size: 24px; + line-height: 40px; + color: var(--grey-black, #121212); +} +.footer_box .footer_box-line2{ + width: 182px; +} +.footer_block .footer_form{ + display: flex; + align-items: start; + gap: 18px; +} +.footer_form .footer_form-info{ + display: flex; + flex-direction: column; + gap: 21px; +} +.footer_form .footer_form-title{ + display: flex; + align-items: center; + gap: 7.5px; +} +.footer_form .footer_form-title h2{ + font-size: 36px; + font-weight: 400; + line-height: 40px; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.footer_form .footer_form-title img{ + width: 195px; +} +.footer_form .footer_form-inp{ + display: flex; + align-items: center; + gap: 9.54px; +} +.footer_form-inp input{ + width: 280px; + height: 50px; + border: 2px solid var(--grey-black, #121212); + padding: 10px 18px; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--grey-black, #121212); + border-radius: 28px; + opacity: .5; +} +.footer_form-inp input::placeholder{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--grey-black, #121212); +} + +.footer_form .footer_form-textarea{ + position: relative; + width: 100%; +} +.footer_form-textarea textarea{ + width: 100%; + height: 123px; + resize: none; + background: transparent; + border: 2px solid var(--grey-black, #121212); + padding: 10px 18px; + font-size: 24px; + line-height: 28.8px; + color: var(--grey-black, #121212); + border-radius: 28px; + opacity: .5; + outline: none; +} +.footer_form-textarea .footer_form-btn{ + position: absolute; + bottom: 17px; + right: 12px; + width: 140px; + height: 32px; + border: 1px solid var(--grey-black, #121212); + display: flex; + align-items: center; + justify-content: center; + color: var(--grey-black, #121212); + border-radius: 48px; + background: var(--creme-white, #F4F1F0); + transition: .3s ease all; +} +.footer_block .footer_social{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 72px; +} +.footer_block .footer_social img{ + width: 100%; +} +.footer_block .footer_bottom{ + display: flex; + align-items: end; + justify-content: space-between; + gap: 20px; +} +.footer_block .footer_bottom a{ + max-width: 475px; + font-size: 24px; + line-height: 28.8px; + color: var(--grey-black, #121212); + opacity: .5; +} +.footer_block .footer_bottom a:nth-child(2){ + text-align: end; + max-width: 285px; +} +.footer2{ + position: relative; + background-image: radial-gradient(340.42% 256.77% at 134.37% -31.49%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); +} +.footer2 *{ + color: #F4F1F0 !important; +} +.footer2 *{ + border-color: #F4F1F0 !important; +} +.footer2 *::placeholder{ + color: #F4F1F0 !important; +} +.footer2 .footer_navs .footer_nav{ + -webkit-text-fill-color: #F4F1F0; +} +.footer2 .footer_form-textarea .footer_form-btn{ + background-color: rgba(244, 241, 240, .6); + color: #26a899 !important; +} +.footer2 .footer_form-textarea .footer_form-btn:hover{ + background-color: rgba(244, 241, 240, 1) !important; +} +.faq .profile_before{ + top: unset; + bottom: -80px; +} +/* Footer end */ + +.auth{ + display: flex; + justify-content: center; + align-items: center; + padding: 78px 0 146px 0; +} +.auth.register{ + padding: 18px 0 48px 0; +} +.auth.login{ + padding: 78px 0 166px 0; +} +.auth .cont{ + width: 100%; +} +.auth .modal_inputs{ + width: 100%; +} +.auth_block{ + display: flex; + align-items: center; + flex-direction: column; +} +.auth_image{ + margin: 0 0 30px 0; +} +.auth_title{ + text-align: left; + font-size: 12px; + font-weight: 600; + color: var(--grey-black); + margin: 0 0 30px 0; + width: 100%; + text-transform: uppercase; +} +.opacity_txt{ + opacity: .3; +} +.auth_block .main_btn{ + max-width: 90%; + width: 100%; + text-align: left; + justify-content: left; +} +/* MEDIA */ +@media only screen and (max-width: 1170px) { + .footer_form .footer_form-title h2, + .footer_box .footer_box-title{ + font-size: 30px; + line-height: 34px; + } + .footer_box .footer_box-link { + font-size: 20px; + line-height: 24px; + } + .pet_inputs .input_name{ + font-size: 22px; + padding: 31px 22px; + } +} + +@media only screen and (max-width: 950px){ + body:has(.modal_open){ + padding-right: 0; + } + .header_block .header_navs { + gap: 20px; + } + .header_block .header_nav { + font-size: 16px; + line-height: 16px; + } + .header_navs .header_link img{ + width: 35px; + height: 35px; + } + + .footer_block .footer_menu{ + display: none; + } + .footer { + border-radius: 25px 25px 0 0; + padding: 36px 0 26px; + } + .footer .footer_block{ + gap: 25px; + } + .footer_block .footer_box { + align-items: start; + gap: 11px; + flex-direction: column; + } + .footer_form .footer_form-title img, + .footer_box .footer_box-line1, + .footer_box .footer_box-line2, + .footer_box .footer_box-line3{ + display: none; + } + .footer_box .footer_box-title img{ + display: flex; + } + .footer_box .footer_box-title img { + display: flex; + } + .footer_box-title .footer_line-mob1{ + margin-bottom: -25px; + margin-left: -58px; + } + .footer_box-title .footer_line-mob2 { + margin-left: 5px; + margin-bottom: -27px; + } + .footer_block .footer_form { + flex-direction: column; + gap: 10px; + } + .footer_form .footer_form-info{ + gap: 10px; + } + .footer_form .footer_form-info, + .footer_form .footer_form-inp input, + .footer_form .footer_form-inp{ + width: 100%; + } + /* */ + .pets{ + padding: 0 0 200px 0; + } + .pets_left .pets_hero_image{ + right: auto; + display: block; + top: 5px; + position: relative; + margin: 0 auto; + width: 100%; + } + .pets_hero_image{ + display: none; + } + .pets_left{ + max-width: 100%; + } + .pets .pets_left .main_btn{ + margin: 0; + max-width: 100%; + background-color: var(--creme-white); + color: var(--grey-black); + } + .pets .pets_left .main_btn + .main_btn{ + margin: 15px 0 0 0; + } + .section_title{ + font-size: 48px; + } + .section_desc { + font-size: 22px; + } + .pets_stars{ + width: 100%; + right: 0; + z-index: 0; + } + .main_btn{ + font-size: 20px; + } + /* */ + .date_block_desc { + font-size: 22px; + } + .data_block_top .data_block_title { + font-size: 32px; + } + .pet_photo img { + max-width: 100px; + } + .pets_form_end .pet_photo img{ + max-width: 104px !important; + } + .pet_inputs .input_wrap{ + padding: 25px; + } + .pet_inputs .input_name{ + padding: 25px 22px; + } + label:has(input[type='radio']), label:has(input[type='checkbox']){ + width: auto; + } + .pet_inputs .collapse_input:not(.pets_form_end .collapse_input){ + flex-direction: column; + align-items: flex-start; + } + .pets_form .pets_form_end .data_animal{ + flex-direction: column; + align-items: center; + width: 100%; + } + .pets_form_end .data_block_title, + .pets_form_end .date_block_desc{ + text-align: center; + } + .pets_form_end .pet_inputs .input_name:has(.data_animal){ + padding-bottom: 15px; + } + /* */ + .order .data_block_title:nth-child(2), + .order .data_block_title:nth-child(3), + .order .order_item_text:nth-child(4){ + display: none; + } + .data_block_table .data_block_top{ + justify-content: space-between; + } + .data_block_top .data_block_title{ + width: auto !important; + } + .order_item{ + position: relative; + flex-wrap: wrap; + gap: 5px; + } + .order_item_text{ + width: auto; + } + .order .see_order{ + position: absolute; + right: 40px; + bottom: 25px; + } + .order .order_id{ + width: auto; + } + .order_item_text:nth-child(2):not(.return .order_item_text){ + width: 100%; + order: 1; + text-align: left; + } + .order { + padding: 0 0 70px 0; + } + .order_item .product_image{ + flex-wrap: wrap; + align-items: flex-start; + width: 30%; + } + .data_block_table3 .order_item label{ + margin: 0; + } + .return .order_item .product_image{ + align-items: center; + } + .order_item .product_title{ + text-wrap: wrap; + } + .product_count{ + position: absolute; + background-color: var(--grey-black); + color: var(--creme-white); + border-radius: 50%; + width: auto !important; + display: flex; + align-items: center; + justify-content: center; + padding: 3px 5px; + top: 29px; + left: 30%; + } + .order .product_image img{ + width: 61px; + height: 79px; + } + .order_item .status{ + display: block !important; + } + .order_single .data_block_title:nth-child(3){ + display: block; + } + .faq_top{ + padding: 30px 0; + } + + + .payment_row{ + flex-direction: column-reverse; + } + .cart .payment_row{ + flex-direction: column; + margin: 15px 0 0 0 ; + } + .cart .payment_row .data_block{ + margin: 0; + } + .payment_left, .payment_right{ + width: 100%; + } + .payment_right .pay_btn:not(.cart .pay_btn), + .payment_right .conditions{ + display: none; + } + .payment_left .pay_btn:not(.cart .pay_btn), + .payment_left .conditions{ + display: block; + } + .payment_left .data_block{ + margin: 0; + } + .cart .product_image{ + flex-wrap: nowrap; + align-items: center; + width: 40%; + } + .order_item_text.product_price{ + display: none; + } + .account_item_big{ + padding: 20px; + } + .account_item .account_item_title { + font-size: 22px; + } + .account_item p { + font-size: 16px; + } + .account { + padding: 0 0 80px 0; + } +} + +@media only screen and (max-width: 776px){ + .header_block .header_navs{ + display: none; + } + .header_bars{ + display: flex; + } + .section_top{ + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + .section_top .section_title{ + width: 100%; + } + .back_link:not(.section_title .back_link){ + display: none; + } + .section_title{ + width: 100%; + } + .section_title .back_link{ + display: flex; + padding: 0; + border: none; + } + .back_link:hover svg path{ + stroke: var(--grey-black); + } + .pets { + padding: 0 0 150px 0; + } + .section_title { + font-size: 40px; + } + .section_desc { + font-size: 18px; + } + .main_btn { + font-size: 18px; + } + .section_subtitle{ + font-size: 16px; + } + .pets .change_block .section_subtitle { + margin: 20px 0 0 0; + } + .pet_inputs .input_name{ + font-size: 15px; + padding: 18px 22px; + } + .pet_inputs .input_wrap{ + font-size: 18px; + } + .collapse_input p{ + font-size: 18px; + } + .pet_inputs input{ + font-size: 18px; + } + .data_block_top .data_block_title { + font-size: 26px; + } + .date_block_desc { + font-size: 18px; + } + .pet_photo img { + max-width: 85px; + } + .pets_form .data_block_top { + padding: 15px 25px 85px 25px; + } + .plus, .minus{ + display: flex; + } + .plus svg, .minus svg{ + width: 30px; + height: 30px; + } + label:has(input[type='radio']) .checkmark, label:has(input[type='checkbox']) .checkmark{ + width: 30px; + height: 30px; + } + label:has(input[type='radio']) .checkmark::before, label:has(input[type='checkbox']) .checkmark::before{ + width: 9px; + height: 14px; + } + .data_block .data_block_top{ + border-radius: 45px 45px 0 0; + } + .data_block .data_block_body{ + border-radius: 45px; + } + .counter{ + gap: 10px; + font-size: 18px; + } + .pet_inputs .input_wrap { + padding: 18px 22px; + } + .pets.pets_form { + padding: 0 0 50px 0; + } + /* */ + .order_item .order_id, .order_item .product_title{ + font-size: 18px; + } + .order_item_text{ + font-size: 18px; + } + .order_item, + .order_item:last-child{ + padding: 20px 36px; + } + .order .see_order{ + bottom: 15px; + } + .order { + padding: 0 0 50px 0; + } + .counter input, + .order_item .counter input{ + font-size: 18px; + } + /* MODAL */ + .modal_big{ + max-width: calc(100% - 56px); + } + .return_modal1 .return_modal_image{ + right: 30px; + height: 90%; + width: auto; + bottom: 50%; + transform: translate(0, 50%); + } + .modal_title { + font-size: 18px; + } + .modal .product_title{ + font-size: 18px; + } + /* FAQ */ + .faq_item{ + padding: 0 40px 0 30px; + font-size: 18px; + } + .faq{ + padding: 0 0 80px 0; + } + .order_info p { + font-size: 18px; + } + .order_info div, .order_info:last-child p{ + font-size: 18px; + } + .order_info{ + padding: 30px 46px; + } + .dilever_date{ + font-size: 18px; + } + .bank_cards label{ + min-width: 80px; + } + .bank_cards label img{ + border-radius: 6px; + } + .data_block_body .adress div, + .data_block_body .adress p{ + font-size: 18px; + } + .change_radio label{ + font-size: 18px; + } + .input{ + font-size: 18px; + } + .pay_btn{ + margin: 20px 0 0 0; + } + .change_radio{ + margin: 20px 0 0 0; + } + .cart .product_image{ + width: 60%; + gap: 15px; + } + .data_block_body:has(.data_block_wrap) { + max-height: 386px; + } + .delete_product{ + width: 30px; + height: 30px; + padding: 3px; + border-width: 1px; + } + .delete_product svg{ + width: 100%; + height: 100%; + } + .delete_product svg path{ + stroke-width: 1px; + } + .cart .product_image .for_image_border{ + width: 45px; + height: 45px; + } + .product_try .for_image_border{ + width: 80px; + height: 80px; + } + .product_try .product_title{ + font-size: 18px; + } + .for_border:has(.account_item_big) { + max-width: 100%; + } + .for_border, + .account_right, + .account_item:nth-last-child(2){ + width: 100%; + } + .account_right + .bg_black{ + order: 4; + } + .account_item_big{ + flex-direction: row; + padding: 8px 20px; + } + .account_item_big .account_item_title{ + text-align: left; + } + .account_item img{ + max-height: 150px; + max-width: 150px; + width: 100%; + object-fit: contain; + } + .for_border .account_item{ + gap: 20px; + } + .account_item{ + gap: 20px; + border-radius: 24px; + } + .for_border{ + border-radius: 25px; + padding: 1px; + } + .account_item_big p{ + text-align: left; + } + .account_item .account_item_title{ + font-size: 16px; + } + .account_item p { + font-size: 14px; + } + .account { + padding: 0 0 60px 0; + } + .account_row{ + margin: 30px 0 0 0; + } + .pet_inputs .w-100 .collapse_input { + gap: 20px; + } +} + +@media only screen and (max-width: 576px){ + .mobile_none{ + display: none !important; + } + .desctop_none{ + display: block !important; + } + .header_logo{ + display: flex; + } + .header_logo img{ + width: 140px; + + } + .pets_before{ + display: none; + min-height: 100%; + } + .pets_before_mob{ + display: block; + position: absolute; + top: 0; + width: 100%; + z-index: -1; + } + .faq .pets_before_mob{ + top: unset; + bottom: -80px; + } + .pets_form .pets_before{ + top: 0; + } + .header { + padding: 16px 0; + } + .footer_form .footer_form-title h2, + .footer_box .footer_box-title{ + font-size: 12px; + line-height: 16.2px; + font-weight: 700; + } + .footer_box .footer_box-link{ + font-size: 12px; + line-height: 16.2px; + } + .footer_form-textarea textarea, + .footer_form-inp input { + height: 28px; + border: 1px solid var(--grey-black, #121212); + padding: 5px 18px; + font-size: 12px; + line-height: 14.4px; + opacity: .5; + } + .footer_block .footer_bottom a, + .footer_form-inp input::placeholder{ + font-size: 12px; + line-height: 14.4px; + } + .footer_form-textarea textarea{ + height: 123px; + padding: 7px 18px; + border-radius: 17px; + } + .footer_form .footer_form-textarea{ + display: flex; + flex-direction: column; + gap: 13px; + } + .footer_form-textarea .footer_form-btn{ + position: static; + width: 100%; + } + .footer_block .footer_social{ + gap: 14px; + } + .footer_block .footer_bottom a:nth-child(2){ + display: none; + } + .footer_form .footer_form-inp{ + flex-direction: column; + } + .pets { + padding: 0 0 29px 0; + } + .pets:has(.change_block.active) { + padding: 0 0 73px 0; + } + .section_title { + font-size: 26px; + } + .section_desc { + font-size: 12px; + } + .pets .section_desc{ + margin: 12px 0 0 0; + } + .main_btn { + font-size: 12px; + border-width: 1px; + padding: 6px 23px; + } + .btn_return_modal1{ + width: 100%; + justify-content: flex-start; + } + .btn_return_modal1 + .main_btn{ + padding: 6px 34px; + } + .pets_form .main_btn{ + padding: 6px 35px; + } + .section_subtitle{ + font-size: 12px; + } + .pets .change_block .section_subtitle { + margin: 12px 0 0 0; + } + .pets_stars{ + top: 80px; + } + .pets_stars2{ + position: absolute; + top: unset; + bottom: -55px; + width: 100%; + left: 15px; + } + .data_block { + margin: 20px 0 0 0; + } + .pets_form .data_block { + margin: 15px 0; + } + .data_block .data_block_top { + border-radius: 25px 25px 0 0; + } + .data_block .data_block_body { + border-radius: 25px; + } + .pets_form .data_block_top { + padding: 15px 16px 60px 16px; + } + .data_block_top + .data_block_body { + margin: -50px 0 0 0; + } + .pet_photo img { + max-width: 52px; + } + .data_block_top .data_block_title { + font-size: 12px; + margin: 0 0 1px 0; + } + .date_block_desc { + font-size: 12px; + } + .pets_form .data_animal{ + gap: 6px; + } + .pet_inputs .input_wrap { + padding: 15px 20px; + } + .pet_inputs .input_name { + font-size: 12px; + padding: 15px 20px; + border-width: 1px; + max-width: 48%; + flex: 0 0 auto; + } + .pet_inputs input { + font-size: 12px; + } + .pet_inputs .input_wrap{ + font-size: 12px; + border-width: 1px; + } + .pets_form .pet_inputs .input_wrap{ + display: flex; + align-items: center; + } + .collapse_input p { + font-size: 12px; + } + .counter { + gap: 5px; + font-size: 12px; + } + .plus svg, .minus svg { + width: 20px; + height: 20px; + } + .plus svg circle, .minus svg circle{ + stroke-width: 1px; + } + label:has(input[type='radio']) .checkmark, label:has(input[type='checkbox']) .checkmark { + width: 20px; + height: 20px; + border-width: 1px; + } + label:has(input[type='radio']) .checkmark::before, label:has(input[type='checkbox']) .checkmark::before { + width: 6px; + height: 9px; + border-width: 1px; + } + .collapse_input label{ + gap: 10px; + } + .pets.pets_form { + padding: 0 0 24px 0; + } + .pet_inputs .collapse_input{ + gap: 10px; + } + .pets_form_end .data_block_title{ + font-size: 12px; + margin: 0 0 3px 0; + } + .pets_form_end .date_block_desc{ + margin: 0 0 3px 0; + } + .pets_form_end .pet_inputs .input_name{ + max-width: 50%; + } + .pets_form_end .form_group:last-child .input_name{ + padding: 14px 17px; + } + .data_block_table .data_block_top{ + padding: 15px 20px 40px 20px; + } + .data_block_table .data_block_body{ + margin: -25px 0 0 0; + } + .order_item { + padding: 10px 15px; + gap: 3px; + border-width: 1px; + } + .order_item .order_id, .order_item .product_title { + font-size: 12px; + } + .order_item_text { + font-size: 12px; + } + .order_item, .order_item:last-child { + padding: 10px 20px; + } + .order .see_order{ + bottom: 8px; + right: 22px; + } + .order .see_order svg{ + width: 6px; + height: 8px; + } + .order { + padding: 0 0 24px 0; + } + .product_count{ + padding: 4px 5px; + top: 16px; + } + .order_single .order_item{ + flex-wrap: nowrap; + } + .order .pets_form_actions{ + align-items: flex-start; + gap: 4px; + } + .order .pets_form_actions .d-flex{ + flex-direction: column; + width: calc(50% - 2px); + gap: 8px; + } + .order .pets_form_actions button.main_btn{ + width: calc(50% - 2px); + } + .delivered_date{ + font-size: 12px; + } + .section_top{ + gap: 4px; + } + .pets_form_actions{ + flex-wrap: wrap; + } + .counter input, + .order_item .counter input{ + font-size: 12px; + } + .return{ + padding: 0 0 20px 0; + } + /* */ + .modal{ + border-radius: 25px; + } + .modal_big{ + padding: 24px 17px; + } + .return_modal2{ + padding: 0; + } + .return_modal2 .modal_content{ + padding: 40px 17px 17px 17px; + } + .modal_title { + font-size: 12px; + } + .return_modal1 .modal_title { + max-width: 80%; + } + .modal .plus:not(.modal_top .plus){ + right: 16px; + top: 14px; + } + .modal .product_title { + font-size: 12px; + } + .faq .section_desc{ + margin: 12px 0 0 0; + } + .faq .data_block{ + margin: 15px 0 0 0; + } + .faq_item{ + font-size: 12px; + padding: 0 14px; + } + .faq_top { + padding: 25px 0; + } + .faq_body.open{ + margin: 0 0 14px 0; + } + .faq{ + padding: 0 0 45px 0; + } + .bank_cards label{ + min-width: 65px; + } + .payment .data_block_body{ + margin: -45px 0 0 0; + } + .payment .data_block_top { + padding: 20px 21px 60px 21px; + } + .bank_cards{ + padding: 15px 21px; + gap: 9px; + } + .order_info p { + font-size: 12px; + } + .order_info div, .order_info:last-child p { + font-size: 12px; + } + .order_info { + padding: 15px 20px; + } + .payment_row{ + gap: 15px; + } + .data_block_body .adress{ + padding: 13px 20px; + gap: 10px; + } + .change_radio label{ + padding: 14px 0; + font-size: 12px; + } + .pay_btn{ + padding: 14px 23px; + } + .pay_btn { + margin: 15px 0 0 0; + } + .data_block .data_block_body{ + border-width: 1px; + } + .data_block_body .adress{ + border-width: 1px; + } + .change_radio{ + border-width: 1px; + } + .change_radio{ + margin: 15px 0 0 0; + } + .dilever_date { + font-size: 12px; + } + .data_block_body .adress div, .data_block_body .adress p { + font-size: 12px; + } + .payment { + padding: 0 0 34px 0; + } + .conditions{ + margin: 15px 0 0 0; + } + .input{ + font-size: 12px; + border-width: 1px; + padding: 6px 18px; + } + .data_block_body:has(.data_block_wrap) { + max-height: 134px; + } + .cart .order_item { + padding: 8px 14px; + } + .cart .product_image .for_image_border{ + width: 35px; + height: 35px; + border: none; + border-radius: 0; + padding: 0; + } + .cart .product_image{ + gap: 5px; + } + .delete_product { + width: 20px; + height: 20px; + padding: 4px; + } + .product_try{ + padding: 8px 16px; + gap: 10px; + align-items: center; + border-width: 1px; + } + .order_info{ + border-width: 1px; + } + .try_right{ + display: flex; + align-items: center; + justify-content: space-between; + width: -webkit-fill-available; + gap: 10px; + } + .try_right a{ + display: flex; + } + .product_try .for_image_border { + width: 35px; + height: 35px; + border: none; + border-radius: 0; + padding: 0; + } + .try_right .main_btn{ + display: none; + } + .cart .counter{ + margin: 0 -20px 0 0; + } + .product_try .product_title { + font-size: 12px; + margin: 0; + width: 80%; + } + .account_item img{ + max-height: 74px; + max-width: 74px; + } + .account_item .animal_image{ + bottom: unset; + } + .account_item, + .account_item_big{ + padding: 8px; + } + .for_border .account_item { + gap: 5px; + } + .account_item { + gap: 5px; + } + .account_item .account_item_title:not(.account_item_big .account_item_title), + .for_border .account_item_title { + margin: 0 0 8px 0; + } + .account_item .account_item_title { + font-size: 12px; + } + .account_item p { + font-size: 12px; + } + .account { + padding: 0 0 45px 0; + } + .account_row, + .account_right{ + gap: 15px; + } + .account_row { + margin: 15px 0 0 0; + } + .pet_inputs .w-100 .collapse_input { + gap: 12px; + } + .pets_form_actions{ + margin: 20px 0 0 0; + } + .pets_form_actions { + gap: 10px; + } + .profile{ + padding: 0 0 40px 0; + } + .auth_modal label{ + gap: 10px; + } + .modal .product_item{ + padding: 10px; + } + .modal .product_item img{ + max-width: 61px; + margin: 0 auto; + } + .modal .products{ + gap: 7px; + margin: 0 0 25px 0; + } + .checkbox_card .input_wrap{ + padding: 16px 16px 18px 20px; + } + .checkbox_card label:has(input[type='checkbox']){ + gap: 6px; + } + .checkbox_card label:has(input[type='checkbox']) p{ + font-size: 12px; + } + .checkbox_card, + .modal .product_item, + .return_modal2 textarea, + .checkbox_card .input_wrap, + .modal{ + border-width: 1px; + } + .modal .product_title{ + text-align: center; + } + .return_modal2 textarea{ + margin: 0 0 26px 0; + height: 85px; + } + .return_modal2 .main_btn{ + left: 66px; + right: 66px; + } + .return_modal2 .modal_content{ + max-height: 415px; + } + .caption_text, + .remined_text{ + font-size: 12px; + } + .remined_text{ + padding: 13px; + margin: 13px 0 26px 0; + } + .photo_image img{ + width: 72px; + height: 72px; + } + .photo_image{ + margin: 12px 0 0 0; + gap: 12px; + } + .photo_image .image_title, + .photo_image p{ + font-size: 12px; + } +} + +@media only screen and (min-width: 576px){ + .mobile_none{ + display: block !important; + } + .data_block_title .mobile_none{ + display: inline !important; + } + .desctop_none{ + display: none !important; + } +} +@media only screen and (max-width: 450px){ + .plus svg, .minus svg { + width: 13px; + height: 13px; + } + label:has(input[type='radio']) .checkmark, label:has(input[type='checkbox']) .checkmark { + width: 13px; + height: 13px; + } + label:has(input[type='radio']) .checkmark::before, label:has(input[type='checkbox']) .checkmark::before { + width: 3px; + height: 5px; + } + .collapse_input label { + gap: 5px; + align-items: flex-start; + } + .counter input { + width: 15px; + } + .pet_inputs .input_name{ + padding: 15.5px 17px; + } + .pet_inputs .input_wrap { + padding: 7px 17px; + } + .order_single .order_item{ + align-items: flex-end; + } + .order_item .price, + .order_item .status{ + transform: rotate(-90deg); + text-wrap: nowrap; + text-orientation: upright; + display: inline !important; + width: 17%; + text-align: left; + margin: 0 0 14px 0; + } + .order_item .product_image{ + width: 47%; + } + .cart .product_image{ + width: 60%; + } + .delete_product { + width: 13px; + height: 13px; + padding: 2px; + } + .return .counter{ + transform: rotate(-90deg); + transform-origin: left; + text-wrap: nowrap; + position: absolute; + left: 59%; + bottom: 0; + } + .return .order_item, .return .order_item:last-child{ + align-items: flex-end; + } + .cart .counter { + margin: 0 -22px 0 0; + gap: 1px; + } +} \ No newline at end of file diff --git a/assets/font/CraftworkGrotesk-Bold.woff b/assets/font/CraftworkGrotesk-Bold.woff new file mode 100644 index 0000000..ea74ee5 Binary files /dev/null and b/assets/font/CraftworkGrotesk-Bold.woff differ diff --git a/assets/font/CraftworkGrotesk-Bold.woff2 b/assets/font/CraftworkGrotesk-Bold.woff2 new file mode 100644 index 0000000..134340b Binary files /dev/null and b/assets/font/CraftworkGrotesk-Bold.woff2 differ diff --git a/assets/font/CraftworkGrotesk-Heavy.woff b/assets/font/CraftworkGrotesk-Heavy.woff new file mode 100644 index 0000000..e392903 Binary files /dev/null and b/assets/font/CraftworkGrotesk-Heavy.woff differ diff --git a/assets/font/CraftworkGrotesk-Heavy.woff2 b/assets/font/CraftworkGrotesk-Heavy.woff2 new file mode 100644 index 0000000..bd26914 Binary files /dev/null and b/assets/font/CraftworkGrotesk-Heavy.woff2 differ diff --git a/assets/font/CraftworkGrotesk-Medium.woff b/assets/font/CraftworkGrotesk-Medium.woff new file mode 100644 index 0000000..39342a8 Binary files /dev/null and b/assets/font/CraftworkGrotesk-Medium.woff differ diff --git a/assets/font/CraftworkGrotesk-Medium.woff2 b/assets/font/CraftworkGrotesk-Medium.woff2 new file mode 100644 index 0000000..98c3516 Binary files /dev/null and b/assets/font/CraftworkGrotesk-Medium.woff2 differ diff --git a/assets/font/CraftworkGrotesk-Regular.woff b/assets/font/CraftworkGrotesk-Regular.woff new file mode 100644 index 0000000..e7c0388 Binary files /dev/null and b/assets/font/CraftworkGrotesk-Regular.woff differ diff --git a/assets/font/CraftworkGrotesk-Regular.woff2 b/assets/font/CraftworkGrotesk-Regular.woff2 new file mode 100644 index 0000000..592524c Binary files /dev/null and b/assets/font/CraftworkGrotesk-Regular.woff2 differ diff --git a/assets/font/CraftworkGrotesk-SemiBold.woff b/assets/font/CraftworkGrotesk-SemiBold.woff new file mode 100644 index 0000000..fa7a0b1 Binary files /dev/null and b/assets/font/CraftworkGrotesk-SemiBold.woff differ diff --git a/assets/font/CraftworkGrotesk-SemiBold.woff2 b/assets/font/CraftworkGrotesk-SemiBold.woff2 new file mode 100644 index 0000000..b3742de Binary files /dev/null and b/assets/font/CraftworkGrotesk-SemiBold.woff2 differ diff --git a/assets/font/CraftworkGrotesk.woff b/assets/font/CraftworkGrotesk.woff new file mode 100644 index 0000000..c951c40 Binary files /dev/null and b/assets/font/CraftworkGrotesk.woff differ diff --git a/assets/font/CraftworkGrotesk.woff2 b/assets/font/CraftworkGrotesk.woff2 new file mode 100644 index 0000000..0d187b1 Binary files /dev/null and b/assets/font/CraftworkGrotesk.woff2 differ diff --git a/assets/font/stylesheet.css b/assets/font/stylesheet.css new file mode 100644 index 0000000..e1e4985 --- /dev/null +++ b/assets/font/stylesheet.css @@ -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; +} + diff --git a/assets/img/account1.png b/assets/img/account1.png new file mode 100644 index 0000000..9a91cda Binary files /dev/null and b/assets/img/account1.png differ diff --git a/assets/img/account2.png b/assets/img/account2.png new file mode 100644 index 0000000..3af00ce Binary files /dev/null and b/assets/img/account2.png differ diff --git a/assets/img/account3.png b/assets/img/account3.png new file mode 100644 index 0000000..831292a Binary files /dev/null and b/assets/img/account3.png differ diff --git a/assets/img/account4.png b/assets/img/account4.png new file mode 100644 index 0000000..f306bf4 Binary files /dev/null and b/assets/img/account4.png differ diff --git a/assets/img/account5.png b/assets/img/account5.png new file mode 100644 index 0000000..0f6885b Binary files /dev/null and b/assets/img/account5.png differ diff --git a/assets/img/animal_image.png b/assets/img/animal_image.png new file mode 100644 index 0000000..3767478 Binary files /dev/null and b/assets/img/animal_image.png differ diff --git a/assets/img/animal_image2.png b/assets/img/animal_image2.png new file mode 100644 index 0000000..844b67a Binary files /dev/null and b/assets/img/animal_image2.png differ diff --git a/assets/img/animal_image3.png b/assets/img/animal_image3.png new file mode 100644 index 0000000..c093ace Binary files /dev/null and b/assets/img/animal_image3.png differ diff --git a/assets/img/bank_card1.png b/assets/img/bank_card1.png new file mode 100644 index 0000000..1d91c8b Binary files /dev/null and b/assets/img/bank_card1.png differ diff --git a/assets/img/bank_card2.png b/assets/img/bank_card2.png new file mode 100644 index 0000000..5479dfc Binary files /dev/null and b/assets/img/bank_card2.png differ diff --git a/assets/img/bank_card3.png b/assets/img/bank_card3.png new file mode 100644 index 0000000..9f52e0c Binary files /dev/null and b/assets/img/bank_card3.png differ diff --git a/assets/img/bank_card4.png b/assets/img/bank_card4.png new file mode 100644 index 0000000..85afba4 Binary files /dev/null and b/assets/img/bank_card4.png differ diff --git a/assets/img/cart_product.png b/assets/img/cart_product.png new file mode 100644 index 0000000..2910ace Binary files /dev/null and b/assets/img/cart_product.png differ diff --git a/assets/img/cart_product2.png b/assets/img/cart_product2.png new file mode 100644 index 0000000..ddb0175 Binary files /dev/null and b/assets/img/cart_product2.png differ diff --git a/assets/img/cosmo_plane.png b/assets/img/cosmo_plane.png new file mode 100644 index 0000000..596926c Binary files /dev/null and b/assets/img/cosmo_plane.png differ diff --git a/assets/img/empty.png b/assets/img/empty.png new file mode 100644 index 0000000..86b7f83 Binary files /dev/null and b/assets/img/empty.png differ diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico deleted file mode 100644 index 5517fde..0000000 Binary files a/assets/img/favicon.ico and /dev/null differ diff --git a/assets/img/hero_image.png b/assets/img/hero_image.png new file mode 100644 index 0000000..13b8e1c Binary files /dev/null and b/assets/img/hero_image.png differ diff --git a/assets/img/icons/bars.svg b/assets/img/icons/bars.svg new file mode 100644 index 0000000..c5f23ad --- /dev/null +++ b/assets/img/icons/bars.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/bars2.svg b/assets/img/icons/bars2.svg new file mode 100644 index 0000000..32025c8 --- /dev/null +++ b/assets/img/icons/bars2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/footer_line-mob.svg b/assets/img/icons/footer_line-mob.svg new file mode 100644 index 0000000..94cc8ea --- /dev/null +++ b/assets/img/icons/footer_line-mob.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/footer_line-mob2.svg b/assets/img/icons/footer_line-mob2.svg new file mode 100644 index 0000000..795f8b1 --- /dev/null +++ b/assets/img/icons/footer_line-mob2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/footer_line.svg b/assets/img/icons/footer_line.svg new file mode 100644 index 0000000..102ee12 --- /dev/null +++ b/assets/img/icons/footer_line.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/footer_line2.svg b/assets/img/icons/footer_line2.svg new file mode 100644 index 0000000..069c991 --- /dev/null +++ b/assets/img/icons/footer_line2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/i-card.svg b/assets/img/icons/i-card.svg new file mode 100644 index 0000000..a9ececd --- /dev/null +++ b/assets/img/icons/i-card.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/i-card2.svg b/assets/img/icons/i-card2.svg new file mode 100644 index 0000000..58cdab3 --- /dev/null +++ b/assets/img/icons/i-card2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/i-close.svg b/assets/img/icons/i-close.svg new file mode 100644 index 0000000..682c4f3 --- /dev/null +++ b/assets/img/icons/i-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/i-tg.svg b/assets/img/icons/i-tg.svg new file mode 100644 index 0000000..87d305f --- /dev/null +++ b/assets/img/icons/i-tg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icons/i-tg2.svg b/assets/img/icons/i-tg2.svg new file mode 100644 index 0000000..ebc2305 --- /dev/null +++ b/assets/img/icons/i-tg2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icons/i-user.svg b/assets/img/icons/i-user.svg new file mode 100644 index 0000000..8e71d33 --- /dev/null +++ b/assets/img/icons/i-user.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/i-user2.svg b/assets/img/icons/i-user2.svg new file mode 100644 index 0000000..3ac452e --- /dev/null +++ b/assets/img/icons/i-user2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/i-user_photo.svg b/assets/img/icons/i-user_photo.svg new file mode 100644 index 0000000..7f638e0 --- /dev/null +++ b/assets/img/icons/i-user_photo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/img/icons/i-user_photo2.svg b/assets/img/icons/i-user_photo2.svg new file mode 100644 index 0000000..ed61a3f --- /dev/null +++ b/assets/img/icons/i-user_photo2.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/img/icons/i-vk.svg b/assets/img/icons/i-vk.svg new file mode 100644 index 0000000..d7ef12b --- /dev/null +++ b/assets/img/icons/i-vk.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icons/i-vk2.svg b/assets/img/icons/i-vk2.svg new file mode 100644 index 0000000..1ab96fe --- /dev/null +++ b/assets/img/icons/i-vk2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icons/i-yandex.svg b/assets/img/icons/i-yandex.svg new file mode 100644 index 0000000..7441a46 --- /dev/null +++ b/assets/img/icons/i-yandex.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/img/icons/i-yandex2.svg b/assets/img/icons/i-yandex2.svg new file mode 100644 index 0000000..f07c652 --- /dev/null +++ b/assets/img/icons/i-yandex2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/icons/logo.svg b/assets/img/icons/logo.svg new file mode 100644 index 0000000..702e879 --- /dev/null +++ b/assets/img/icons/logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/icons/logo2.svg b/assets/img/icons/logo2.svg new file mode 100644 index 0000000..b2b8087 --- /dev/null +++ b/assets/img/icons/logo2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/pets_before.png b/assets/img/pets_before.png new file mode 100644 index 0000000..e2710c1 Binary files /dev/null and b/assets/img/pets_before.png differ diff --git a/assets/img/pets_before_mob.png b/assets/img/pets_before_mob.png new file mode 100644 index 0000000..2fd0137 Binary files /dev/null and b/assets/img/pets_before_mob.png differ diff --git a/assets/img/pets_stars.svg b/assets/img/pets_stars.svg new file mode 100644 index 0000000..f5d6176 --- /dev/null +++ b/assets/img/pets_stars.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/pets_stars2.svg b/assets/img/pets_stars2.svg new file mode 100644 index 0000000..2cec8c1 --- /dev/null +++ b/assets/img/pets_stars2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/product1.png b/assets/img/product1.png new file mode 100644 index 0000000..89fec72 Binary files /dev/null and b/assets/img/product1.png differ diff --git a/assets/img/profile_bfore.svg b/assets/img/profile_bfore.svg new file mode 100644 index 0000000..ed1f9ba --- /dev/null +++ b/assets/img/profile_bfore.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..0f70121 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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); + } + }); + }); + } +}) \ No newline at end of file diff --git a/auth.html b/auth.html new file mode 100644 index 0000000..e20dc0b --- /dev/null +++ b/auth.html @@ -0,0 +1,114 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+
+ +
зарегайтесь сейчас и получите гайд
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/cart.html b/cart.html new file mode 100644 index 0000000..006459b --- /dev/null +++ b/cart.html @@ -0,0 +1,517 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+

Корзина

+
+
+
Товары
+
+
+
+
+
+
+ +
+
Cosmodog adult ягнёнок 1,5 кг
+
+
900 ₽
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+
+
+ +
+
Cosmodog adult ягнёнок 2,5 кг
+
+
1000 ₽ 1800 ₽
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+
+
+ +
+
Cosmodog adult ягнёнок 2,5 кг
+
+
1000 ₽ 1800 ₽
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+
+
+ +
+
Cosmodog adult ягнёнок 2,5 кг
+
+
1000 ₽ 1800 ₽
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+
+
+
+
+
+
+
+
Попробуйте
+
+
+
+
+
+ +
+
+
Cosmodog adult ягнёнок 2,5 кг
+ Добавить + + + + + + + + + +
+
+
+
+ +
+
+
Cosmodog adult ягнёнок 2,5 кг
+ Добавить + + + + + + + + + +
+
+
+
+ +
+
+
Cosmodog adult ягнёнок 2,5 кг
+ Добавить + + + + + + + + + +
+
+
+
+ +
+
+
Cosmodog adult ягнёнок 2,5 кг
+ Добавить + + + + + + + + + +
+
+
+
+
+ +
+
+
+
+
Ваш заказ
+
+
+
+
товары
+

3900 ₽

+
+
+
СКИДКА
+

-2400 ₽

+
+
+
ИТОГО
+

1500 ₽

+
+
+
+ +
+
+
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..d042696 --- /dev/null +++ b/faq.html @@ -0,0 +1,426 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +

+ faq + + + + + + +

+

У вас есть вопросы? Возможно, здесь уже есть ответ

+
+
+
Общая тема
+
+
+
+
+
Какое насекомое используется в рецептах?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Откуда мы берём насекомых?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Где можно приобрести нашу продукцию?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Где производится Cosmopet?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
+
+
Общая тема
+
+
+
+
+
Какое насекомое используется в рецептах?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Откуда мы берём насекомых?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Где можно приобрести нашу продукцию?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Где производится Cosmopet?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
+
+
Общая тема
+
+
+
+
+
Какое насекомое используется в рецептах?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Откуда мы берём насекомых?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Где можно приобрести нашу продукцию?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
Где производится Cosmopet?
+ + + + + +
+

Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.

+
+
+
+
+ + +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index bb94408..0000000 --- a/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - SEO title - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..45bd221 --- /dev/null +++ b/login.html @@ -0,0 +1,120 @@ + + + + + + + + Document + + +
+
+ + +
+
+ + +
+ + + \ No newline at end of file diff --git a/order.html b/order.html new file mode 100644 index 0000000..abeb1b4 --- /dev/null +++ b/order.html @@ -0,0 +1,313 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+ +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/order_item.html b/order_item.html new file mode 100644 index 0000000..e2ebb71 --- /dev/null +++ b/order_item.html @@ -0,0 +1,317 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+ +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/payment.html b/payment.html new file mode 100644 index 0000000..ec55db5 --- /dev/null +++ b/payment.html @@ -0,0 +1,372 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+

+ ОФормление заказа +

+
+
+
способ оплаты
+
+
+
+ + + + +
+ +
+
+
+
+
+
+
+
+
Получение
+
+
+
+
Адрес доставки
+

Москва, Аминьевское шоссе, д.1, кв 116

+
+ +
+
+
+ + +
+
+
+
+ + +
+
Ожидаемая дата доставки: завтра, 1 июня
+ +

Нажимая на кнопку, вы соглашаетесь с  Условиями обработки персональных данных, а также с Условиями продажи

+
+
+
+
+
Ваш заказ
+
+
+
+
товары
+

3900 ₽

+
+
+
СКИДКА
+

-2400 ₽

+
+
+
доставка
+

Бесплатно

+
+
+
ИТОГО
+

1500 ₽

+
+
+
+ +

Нажимая на кнопку, вы соглашаетесь с  Условиями обработки персональных данных, а также с Условиями продажи

+
+
+
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/pets.html b/pets.html new file mode 100644 index 0000000..5884fcc --- /dev/null +++ b/pets.html @@ -0,0 +1,291 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+
+
+ + + + + вернуться + +

+ питомцы + + + + + + +

+
+

Создайте профиль своего питомца! Заполните информацию и выберите наиболее подходящий рацион

+ +
Добавить питомца
+
+
+

Кто ваш питомец?

+ + Кошка + Собака +
+
+ + + +
+
+ + +
+ + + + + + + + +
+ + + \ No newline at end of file diff --git a/pets_end.html b/pets_end.html new file mode 100644 index 0000000..9ca88b3 --- /dev/null +++ b/pets_end.html @@ -0,0 +1,314 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +

+ питомцы + + + + + + +

+

Обновляйте информацию в профиле своего питомца, чтобы мы смогли подобрать для него питание, учитывающее его уникальные потребности

+
+
+
+
+
+
+ +
+
Кличка
+

Порода

+

Дата рождения

+
+
+
+ + Редактировать информацию о питомце + +
+
+
+
+ + + + + + + + + +

Добавить питомца

+
+
+
+
+
+
+
+ + +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/pets_form.html b/pets_form.html new file mode 100644 index 0000000..8e36f3c --- /dev/null +++ b/pets_form.html @@ -0,0 +1,624 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +

+ питомцы + + + + + + +

+
+
+
+ +
+
Данные питомца
+

Загрузить изображение

+
+
+
+
+
+
+
кличка
+
+ +
+
+
+
Дата рождения
+
+ +
+
+
+
Особые потребности
+
+
+ +
+
+
+
+
Активность
+
+
+ + +
+
+
+
+
Стери­лизация
+
+
+ + +
+
+
+
+
Пол
+
+
+ + +
+
+
+
+
Порода собаки
+
+
+ +
+
+
+
+
Вес
+
+
+ + + + + + + + + + + + + + + + + + + кг +
+
+
+
+
+
+
+ +
+ +
+ + +
+ + + + + + + + +
+ + + \ No newline at end of file diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..6407baf --- /dev/null +++ b/profile.html @@ -0,0 +1,440 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +

+ Профиль + + + + + + +

+
+
+
Персональные данные
+
+
+
+
+
e-mail
+
+ +
+
+
+
Имя
+
+ +
+
+
+
Номер телефонателефон
+
+ +
+
+ +
+
+
+
+
+
мои адреса
+
+
+
+
+
доставка курьером
+
+
+ +
+
+
+
+
СамовыВОЗ
+
+
+ +
+
+
+
+
+
+
+
+
Способы связи
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ Навсегда удалить аккаунт +

В этом случае Вы не сможете пользоваться сервисом COSMOPET. Доступ к клубной программе и подписке на ветеринарные диеты будет закрыт, а история покупок будет удалена

+
+
+ + +
+ + + + + + + + +
+ + + \ No newline at end of file diff --git a/register.html b/register.html new file mode 100644 index 0000000..e43c718 --- /dev/null +++ b/register.html @@ -0,0 +1,134 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+
+ + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/return.html b/return.html new file mode 100644 index 0000000..e2827f7 --- /dev/null +++ b/return.html @@ -0,0 +1,418 @@ + + + + + + + + Document + + +
+
+ + +
+
+
+
+ + + + + вернуться + +
+

+ Возврат + + + + + + +

+

Заказ №Ru7485-2347 от dd.mm.yy

+
+
+
+
позиция
+
Кол-во
+
цена
+
+
+
+
+ + +
cosmodog индейка 2 кг
+
+
1 шт
+
2000 ₽
+
+
+
+ + +
cosmodog индейка 2 кг
+
+
+ + + + + + + + + + + + + + + + + + + шт +
+
1600 ₽
+
+
+
+ +
+
+ + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/ui_kit.html b/ui_kit.html deleted file mode 100644 index 4196742..0000000 --- a/ui_kit.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - UI kit - - - - -
-
-
-
- -
-
- - \ No newline at end of file