Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

faq block and arrows

Browse Source
This commit is contained in:
shahboz
2024-09-08 14:19:37 +05:00
parent cc7b5c4091
commit 804d1c68ad
16 changed files with 115 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
adress.html
View File

@@ -49,15 +49,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
ПУНКТ ВЫДАЧи <h1>ПУНКТ ВЫДАЧи</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<form class="adress_row"> <form class="adress_row">
<div class="adress_left"> <div class="adress_left">
<input type="text" class="input" placeholder="Найти по адресу"> <input type="text" class="input" placeholder="Найти по адресу">

6
adress2.html
View File

@@ -49,15 +49,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
Адрес доставки <h1>Адрес доставки</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<form class="adress_row"> <form class="adress_row">
<div class="adress_left"> <div class="adress_left">
<input type="text" class="input" placeholder="Введите адрес"> <input type="text" class="input" placeholder="Введите адрес">

32
assets/css/style.css
View File

@@ -11,6 +11,7 @@
--transition: .3s all ease; --transition: .3s all ease;
--GR1: linear-gradient(22deg, #F44242 23.69%, #569EF0 66.57%); --GR1: linear-gradient(22deg, #F44242 23.69%, #569EF0 66.57%);
--new-blue: #569EFF; --new-blue: #569EFF;
--border: 60px;
} }
html{ html{
scroll-behavior: smooth; scroll-behavior: smooth;
@@ -86,6 +87,13 @@ a:hover {
text-transform: uppercase; text-transform: uppercase;
color: var(--grey-black); color: var(--grey-black);
} }
.section_title h1{
font-size: 82px;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
color: var(--grey-black);
}
.section_title .back_link{ .section_title .back_link{
display: none; display: none;
} }
@@ -688,12 +696,13 @@ label:has(input[type='checkbox']:checked) .checkmark::before{
background: var(--creme-white); background: var(--creme-white);
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
z-index: -1; visibility: hidden;
z-index: 3;
transition: var(--transition); transition: var(--transition);
} }
.modal.modal_open{ .modal.modal_open{
opacity: 1; opacity: 1;
z-index: 3; visibility: visible;
} }
body:has(.modal_open){ body:has(.modal_open){
overflow: hidden; overflow: hidden;
@@ -704,12 +713,13 @@ body:has(.modal_open){
inset: 0; inset: 0;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
opacity: 0; opacity: 0;
z-index: -1; visibility: hidden;
z-index: 2;
transition: var(--transition); transition: var(--transition);
} }
body:has(.modal_open) .modal_back{ body:has(.modal_open) .modal_back{
opacity: 1; opacity: 1;
z-index: 1; visibility: visible;
} }
.modal_big{ .modal_big{
max-width: 754px; max-width: 754px;
@@ -1036,7 +1046,6 @@ body:has(.modal_open) .modal_back{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
align-items: flex-start;
} }
.for_border{ .for_border{
background-image: var(--GR1); background-image: var(--GR1);
@@ -1062,6 +1071,7 @@ body:has(.modal_open) .modal_back{
.for_border .account_item{ .for_border .account_item{
background: var(--creme-white); background: var(--creme-white);
gap: 10px; gap: 10px;
height: 100%;
} }
.for_border:has(.account_item_big){ .for_border:has(.account_item_big){
max-width: 34.4%; max-width: 34.4%;
@@ -1865,6 +1875,9 @@ body:has(.modal_open) .modal_back{
.section_title{ .section_title{
font-size: 48px; font-size: 48px;
} }
.section_title h1{
font-size: 48px;
}
.section_desc { .section_desc {
font-size: 22px; font-size: 22px;
} }
@@ -2073,6 +2086,9 @@ body:has(.modal_open) .modal_back{
.section_title { .section_title {
font-size: 40px; font-size: 40px;
} }
.section_title h1{
font-size: 40px;
}
.section_desc { .section_desc {
font-size: 18px; font-size: 18px;
} }
@@ -2398,6 +2414,9 @@ body:has(.modal_open) .modal_back{
.section_title { .section_title {
font-size: 26px; font-size: 26px;
} }
.section_title h1{
font-size: 26px;
}
.section_desc { .section_desc {
font-size: 12px; font-size: 12px;
} }
@@ -2557,7 +2576,7 @@ body:has(.modal_open) .modal_back{
bottom: 8px; bottom: 8px;
right: 22px; right: 22px;
} }
.order .see_order svg{ .order .see_order img{
width: 6px; width: 6px;
height: 8px; height: 8px;
} }
@@ -2634,6 +2653,7 @@ body:has(.modal_open) .modal_back{
.faq_item{ .faq_item{
font-size: 12px; font-size: 12px;
padding: 0 14px; padding: 0 14px;
border-width: 1px;
} }
.faq_top { .faq_top {
padding: 25px 0; padding: 25px 0;

3
assets/img/icons/arrdown.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 214 B

BIN
assets/img/icons/arrright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 B

58
assets/js/main.js
View File

@@ -166,42 +166,42 @@ window.addEventListener('DOMContentLoaded', function(){
closeModalOnClick('.modal .plus', '.modal'); closeModalOnClick('.modal .plus', '.modal');
closeModalOnClick('.modal_back', '.modal'); closeModalOnClick('.modal_back', '.modal');
// if (document.querySelector('.faq')) { if (document.querySelector('.faq')) {
// let faqToggles = document.querySelectorAll('.faq_title, .faq_arr_down'); let faqToggles = document.querySelectorAll('.faq_title, .faq_arr_down');
// faqToggles.forEach(function(toggle) { faqToggles.forEach(function(toggle) {
// toggle.addEventListener('click', function() { toggle.addEventListener('click', function() {
// const faqTop = this.closest('.faq_top'); const faqTop = this.closest('.faq_top');
// const faqBody = faqTop.nextElementSibling; const faqBody = faqTop.nextElementSibling;
// document.querySelectorAll('.faq_body').forEach(function(body) { document.querySelectorAll('.faq_body').forEach(function(body) {
// if (body !== faqBody) { if (body !== faqBody) {
// body.style.height = '0px'; body.style.height = '0px';
// body.classList.remove('open'); body.classList.remove('open');
// const otherArrow = body.previousElementSibling.querySelector('.faq_arr_down'); const otherArrow = body.previousElementSibling.querySelector('.faq_arr_down');
// if (otherArrow) { if (otherArrow) {
// otherArrow.classList.remove('rotate'); otherArrow.classList.remove('rotate');
// } }
// } }
// }); });
// if (faqBody.classList.contains('open')) { if (faqBody.classList.contains('open')) {
// faqBody.style.height = '0px'; faqBody.style.height = '0px';
// } else { } else {
// faqBody.style.height = `${faqBody.scrollHeight}px`; faqBody.style.height = `${faqBody.scrollHeight}px`;
// } }
// faqBody.classList.toggle('open'); faqBody.classList.toggle('open');
// const faqArrow = faqTop.querySelector('.faq_arr_down'); const faqArrow = faqTop.querySelector('.faq_arr_down');
// if (faqArrow) { if (faqArrow) {
// faqArrow.classList.toggle('rotate'); faqArrow.classList.toggle('rotate');
// } }
// }); });
// }); });
// } }
if (document.querySelector('.photo_image')) { if (document.querySelector('.photo_image')) {
document.querySelectorAll('.photo_image input[type="file"]').forEach(input => { document.querySelectorAll('.photo_image input[type="file"]').forEach(input => {

54
faq.html
View File

@@ -49,15 +49,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
faq <h1>faq</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<p class="section_desc">У вас есть вопросы? Возможно, здесь уже есть ответ</p> <p class="section_desc">У вас есть вопросы? Возможно, здесь уже есть ответ</p>
<div class="data_block pets_form"> <div class="data_block pets_form">
<div class="data_block_top"> <div class="data_block_top">
@@ -68,9 +68,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Какое насекомое используется в рецептах?</div> <div class="faq_title">Какое насекомое используется в рецептах?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -79,9 +77,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Откуда мы берём насекомых?</div> <div class="faq_title">Откуда мы берём насекомых?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -90,9 +86,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Где можно приобрести нашу продукцию?</div> <div class="faq_title">Где можно приобрести нашу продукцию?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -101,9 +95,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Где производится Cosmopet?</div> <div class="faq_title">Где производится Cosmopet?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -119,9 +111,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Какое насекомое используется в рецептах?</div> <div class="faq_title">Какое насекомое используется в рецептах?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -130,9 +120,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Откуда мы берём насекомых?</div> <div class="faq_title">Откуда мы берём насекомых?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -141,9 +129,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Где можно приобрести нашу продукцию?</div> <div class="faq_title">Где можно приобрести нашу продукцию?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -152,9 +138,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Где производится Cosmopet?</div> <div class="faq_title">Где производится Cosmopet?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -170,9 +154,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Какое насекомое используется в рецептах?</div> <div class="faq_title">Какое насекомое используется в рецептах?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -181,9 +163,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Откуда мы берём насекомых?</div> <div class="faq_title">Откуда мы берём насекомых?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -192,9 +172,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Где можно приобрести нашу продукцию?</div> <div class="faq_title">Где можно приобрести нашу продукцию?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>
@@ -203,9 +181,7 @@
<div class="faq_top"> <div class="faq_top">
<div class="faq_title">Где производится Cosmopet?</div> <div class="faq_title">Где производится Cosmopet?</div>
<span class="faq_arr_down"> <span class="faq_arr_down">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="none"> <img src="assets/img/icons/arrdown.svg" alt="">
<path d="M19.9922 2L10.3964 11.5958L1.0011 1.80365" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</span> </span>
</div> </div>
<p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p> <p class="faq_body">Ученые уже сейчас создают альтернативу мясу, которого через 50-100 лет перестанет хватать на все население планеты, а на домашних животных — тем более. Люди научились заменять животный белок в продуктах питания белком насекомых.</p>

4
login.html
View File

@@ -43,7 +43,7 @@
</header> </header>
<section class="auth login"> <section class="auth login">
<div class="cont"> <div class="cont">
<div class="auth_block auth_modal"> <form class="auth_block auth_modal">
<img src="assets/img/cosmo_plane.png" alt="" class="auth_image"> <img src="assets/img/cosmo_plane.png" alt="" class="auth_image">
<div class="modal_inputs"> <div class="modal_inputs">
<label> <label>
@@ -56,7 +56,7 @@
</label> </label>
<button class="main_btn">Вход</button> <button class="main_btn">Вход</button>
</div> </div>
</div> </form>
</div> </div>
</section> </section>
<footer class="footer footer2"> <footer class="footer footer2">

18
order.html
View File

@@ -49,15 +49,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
Заказы <h1>Заказы</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<div class="data_block data_block_table"> <div class="data_block data_block_table">
<div class="data_block_top"> <div class="data_block_top">
<div class="data_block_title">Номер <span class="mobile_none">заказа</span></div> <div class="data_block_title">Номер <span class="mobile_none">заказа</span></div>
@@ -72,9 +72,7 @@
<div class="order_item_text">10 000 ₽</div> <div class="order_item_text">10 000 ₽</div>
<div class="order_item_text">в пути</div> <div class="order_item_text">в пути</div>
<div class="see_order"> <div class="see_order">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"> <img src="assets/img/icons/arrright.png" alt="">
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</div> </div>
</a> </a>
<a href="#" class="order_item done"> <a href="#" class="order_item done">
@@ -83,9 +81,7 @@
<div class="order_item_text">10 000 ₽</div> <div class="order_item_text">10 000 ₽</div>
<div class="order_item_text">завешён</div> <div class="order_item_text">завешён</div>
<div class="see_order"> <div class="see_order">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"> <img src="assets/img/icons/arrright.png" alt="">
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</div> </div>
</a> </a>
<a href="#" class="order_item done"> <a href="#" class="order_item done">
@@ -94,9 +90,7 @@
<div class="order_item_text">10 000 ₽</div> <div class="order_item_text">10 000 ₽</div>
<div class="order_item_text">завешён</div> <div class="order_item_text">завешён</div>
<div class="see_order"> <div class="see_order">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"> <img src="assets/img/icons/arrright.png" alt="">
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</div> </div>
</a> </a>
</div> </div>

6
order_item.html
View File

@@ -50,15 +50,15 @@
вернуться вернуться
</a> </a>
<div class="section_top"> <div class="section_top">
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
№Ru7485-2347 <h1>№Ru7485-2347</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<p class="delivered_date">Доставлен dd.mm.yy</p> <p class="delivered_date">Доставлен dd.mm.yy</p>
</div> </div>
<div class="data_block data_block_table data_block_table2"> <div class="data_block data_block_table data_block_table2">

6
pets.html
View File

@@ -51,15 +51,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
питомцы <h1>питомцы</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<div class="change_block active"> <div class="change_block active">
<p class="section_desc">Создайте профиль своего питомца! Заполните информацию и выберите наиболее подходящий рацион</p> <p class="section_desc">Создайте профиль своего питомца! Заполните информацию и выберите наиболее подходящий рацион</p>
<img src="assets/img/hero_image.png" alt="" class="pets_hero_image"> <img src="assets/img/hero_image.png" alt="" class="pets_hero_image">

6
pets_end.html
View File

@@ -49,15 +49,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
питомцы <h1>питомцы</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<p class="section_desc">Обновляйте информацию в профиле своего питомца, чтобы мы смогли подобрать для него питание, учитывающее его уникальные потребности</p> <p class="section_desc">Обновляйте информацию в профиле своего питомца, чтобы мы смогли подобрать для него питание, учитывающее его уникальные потребности</p>
<div class="data_block pets_form_end"> <div class="data_block pets_form_end">
<div class="data_block_body"> <div class="data_block_body">

6
pets_form.html
View File

@@ -49,15 +49,15 @@
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
питомцы <h1>питомцы</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<div class="data_block"> <div class="data_block">
<div class="data_block_top"> <div class="data_block_top">
<div class="data_animal"> <div class="data_animal">

22
profile.html
View File

@@ -42,23 +42,23 @@
<div class="header_mob-bg"></div> <div class="header_mob-bg"></div>
</header> </header>
<section class="profile"> <section class="profile">
<div class="cont"> <form class="cont">
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none">
<path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/> <path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/>
</svg> </svg>
вернуться вернуться
</a> </a>
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
Профиль <h1>Профиль</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<form class="data_block pets_form" method="post"> <div class="data_block pets_form">
<div class="data_block_top"> <div class="data_block_top">
<div class="data_block_title">Персональные данные</div> <div class="data_block_title">Персональные данные</div>
</div> </div>
@@ -85,8 +85,8 @@
</div> </div>
</div> </div>
</form> </div>
<form class="data_block pets_form" method="post"> <div class="data_block pets_form">
<div class="data_block_top"> <div class="data_block_top">
<div class="data_block_title">мои адреса</div> <div class="data_block_title">мои адреса</div>
</div> </div>
@@ -134,8 +134,8 @@
</div> </div>
</div> </div>
</div> </div>
</form> </div>
<form class="data_block pets_form" method="post"> <div class="data_block pets_form">
<div class="data_block_top"> <div class="data_block_top">
<div class="data_block_title">Способы связи</div> <div class="data_block_title">Способы связи</div>
</div> </div>
@@ -220,12 +220,12 @@
</div> </div>
</div> </div>
</div> </div>
</form> </div>
<div class="d-flex align-items-center pets_form_actions"> <div class="d-flex align-items-center pets_form_actions">
<a href="#" class="main_btn main_btn_white">Навсегда удалить аккаунт</a> <a href="#" class="main_btn main_btn_white">Навсегда удалить аккаунт</a>
<p>В этом случае Вы не сможете пользоваться сервисом COSMOPET. Доступ к клубной программе и подписке на ветеринарные диеты будет закрыт, а история покупок будет удалена</p> <p>В этом случае Вы не сможете пользоваться сервисом COSMOPET. Доступ к клубной программе и подписке на ветеринарные диеты будет закрыт, а история покупок будет удалена</p>
</div> </div>
</div> </form>
<img src="assets/img/profile_bfore.svg" alt="" class="profile_before"> <img src="assets/img/profile_bfore.svg" alt="" class="profile_before">
<img src="assets/img/pets_before_mob.png" alt="" class="pets_before pets_before_mob"> <img src="assets/img/pets_before_mob.png" alt="" class="pets_before pets_before_mob">
</section> </section>

4
register.html
View File

@@ -43,7 +43,7 @@
</header> </header>
<section class="auth register"> <section class="auth register">
<div class="cont"> <div class="cont">
<div class="auth_block auth_modal"> <form class="auth_block auth_modal">
<img src="assets/img/cosmo_plane.png" alt="" class="auth_image"> <img src="assets/img/cosmo_plane.png" alt="" class="auth_image">
<div class="modal_inputs"> <div class="modal_inputs">
<label> <label>
@@ -70,7 +70,7 @@
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p> <p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Регистрация</button> <button class="main_btn">Регистрация</button>
</div> </div>
</div> </form>
</div> </div>
</section> </section>
<footer class="footer footer2"> <footer class="footer footer2">

6
return.html
View File

@@ -50,15 +50,15 @@
вернуться вернуться
</a> </a>
<div class="section_top"> <div class="section_top">
<h1 class="section_title d-flex align-items-center justify-content-between"> <div class="section_title d-flex align-items-center justify-content-between">
Возврат <h1>Возврат</h1>
<a href="#" class="back_link"> <a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/> <circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/> <path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg> </svg>
</a> </a>
</h1> </div>
<p class="delivered_date">Заказ №Ru7485-2347 от dd.mm.yy</p> <p class="delivered_date">Заказ №Ru7485-2347 от dd.mm.yy</p>
</div> </div>
<div class="data_block data_block_table data_block_table3"> <div class="data_block data_block_table data_block_table3">