You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
template-for-verstka/cart.html

517 lines
34 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/font/stylesheet.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="cont">
<div class="header_block">
<a href="#" class="header_logo">
<img src="assets/img/icons/logo.svg" alt="">
</a>
<div class="header_navs">
<a href="#" class="header_nav">Главная</a>
<a href="#" class="header_nav">продукция</a>
<a href="#" class="header_nav">О cosmopet</a>
<a href="#" class="header_nav">Блог</a>
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a>
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a>
</div>
<button class="header_bars"><img src="assets/img/icons/bars2.svg" alt=""></button>
</div>
</div>
<div class="header_mob">
<button class="header_close"><img src="assets/img/icons/i-close.svg" alt=""></button>
<div class="header_navs">
<a href="#" class="header_nav">Главная</a>
<a href="#" class="header_nav">продукция</a>
<a href="#" class="header_nav">О cosmopet</a>
<a href="#" class="header_nav">Блог</a>
<div class="header_links">
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a>
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a>
</div>
</div>
</div>
<div class="header_mob-bg"></div>
</header>
<section class="payment cart">
<form class="cont" method="post">
<h1 class="section_title">Корзина</h1>
<div class="data_block">
<div class="data_block_top">
<div class="data_block_title">Товары</div>
</div>
<div class="data_block_body">
<div class="data_block_wrap">
<div class="order_item">
<div class="product_image">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="product_title">Cosmodog adult ягнёнок 1,5 кг</div>
</div>
<div class="order_item_text product_price">900 ₽</div>
<div class="counter">
<span class="minus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<input type="number" value="1" min="1" max="100">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<a href="#" class="delete_product">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none">
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
</svg>
</a>
</div>
<div class="order_item">
<div class="product_image">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
</div>
<div class="order_item_text product_price">1000 ₽ <span>1800 ₽</span></div>
<div class="counter">
<span class="minus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<input type="number" value="1" min="1" max="100">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<a href="#" class="delete_product">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none">
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
</svg>
</a>
</div>
<div class="order_item">
<div class="product_image">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
</div>
<div class="order_item_text product_price">1000 ₽ <span>1800 ₽</span></div>
<div class="counter">
<span class="minus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<input type="number" value="1" min="1" max="100">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<a href="#" class="delete_product">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none">
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
</svg>
</a>
</div>
<div class="order_item">
<div class="product_image">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
</div>
<div class="order_item_text product_price">1000 ₽ <span>1800 ₽</span></div>
<div class="counter">
<span class="minus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<input type="number" value="1" min="1" max="100">
<span class="plus">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<a href="#" class="delete_product">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 18 25" fill="none">
<path d="M3 7H15V22C15 23.1046 14.1046 24 13 24H5C3.89543 24 3 23.1046 3 22V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M1 7H17V5C17 3.89543 16.1046 3 15 3H3C1.89543 3 1 3.89543 1 5V7Z" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
<path d="M9 1V2.5" stroke="#121212" stroke-width="2" stroke-linecap="square"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="payment_row">
<div class="payment_left">
<div class="data_block">
<div class="data_block_top">
<div class="data_block_title">Попробуйте</div>
</div>
<div class="data_block_body">
<div class="data_block_wrap">
<div class="product_try">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="try_right">
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
<a href="#" class="main_btn">Добавить</a>
<a href="#" class="plus desctop_none">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</a>
</div>
</div>
<div class="product_try">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="try_right">
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
<a href="#" class="main_btn">Добавить</a>
<a href="#" class="plus desctop_none">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</a>
</div>
</div>
<div class="product_try">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="try_right">
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
<a href="#" class="main_btn">Добавить</a>
<a href="#" class="plus desctop_none">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</a>
</div>
</div>
<div class="product_try">
<div class="for_image_border">
<img src="assets/img/product1.png" alt="">
</div>
<div class="try_right">
<div class="product_title">Cosmodog adult ягнёнок 2,5 кг</div>
<a href="#" class="main_btn">Добавить</a>
<a href="#" class="plus desctop_none">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<button class="main_btn pay_btn">Перейти к оформлению</button>
</div>
<div class="payment_right">
<div class="data_block">
<div class="data_block_top">
<div class="data_block_title">Ваш заказ</div>
</div>
<div class="data_block_body">
<div class="order_info">
<div>товары</div>
<p>3900 ₽</p>
</div>
<div class="order_info">
<div>СКИДКА</div>
<p>-2400 ₽</p>
</div>
<div class="order_info">
<div>ИТОГО</div>
<p>1500 ₽</p>
</div>
</div>
</div>
<button class="main_btn pay_btn">Перейти к оформлению</button>
</div>
</div>
</form>
</section>
<footer class="footer footer2">
<div class="cont">
<div class="footer_block">
<div class="footer_menu">
<a href="#" class="footer_logo"><img src="assets/img/icons/logo2.svg" alt=""></a>
<div class="footer_navs">
<a href="#" class="footer_nav">Главная</a>
<a href="#" class="footer_nav">продукция</a>
<a href="#" class="footer_nav">О cosmopet</a>
<a href="#" class="footer_nav">Блог</a>
<a href="#" class="footer_link"><img src="assets/img/icons/i-user2.svg" alt=""></a>
<a href="#" class="footer_link"><img src="assets/img/icons/i-card2.svg" alt=""></a>
</div>
</div>
<div class="footer_box">
<h2 class="footer_box-title">Отзывы и предложения <img src="assets/img/icons/footer_line-mob.svg" alt="" class="footer_line-mob1"></h2>
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line1">
<a href="#" class="footer_box-link">pro@cosmopet.shop</a>
</div>
<div class="footer_box">
<h2 class="footer_box-title">связь с ветеринаром <img src="assets/img/icons/footer_line-mob2.svg" alt="" class="footer_line-mob2"></h2>
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line2">
<a href="#" class="footer_box-link">vetvopros@cosmopet.shop</a>
</div>
<div class="footer_form">
<div class="footer_form-info">
<div class="footer_form-title">
<h2>Обратная связь</h2>
<img src="assets/img/icons/footer_line2.svg" alt="">
</div>
<div class="footer_form-inp">
<input type="text" placeholder="ваше имя">
<input type="email" placeholder="почта">
</div>
</div>
<div class="footer_form-textarea">
<textarea placeholder="обращение"></textarea>
<button class="footer_form-btn btn--black-hover">отправить</button>
</div>
</div>
<div class="footer_social">
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-vk2.svg" alt=""></a>
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg2.svg" alt=""></a>
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex2.svg" alt=""></a>
</div>
<div class="footer_bottom">
<a href="#">123182 г. Москва, 4-й Красногорский пр., д. 2/4, стр. 1, этаж/ком. 3/1</a>
<a href="#">Соглашение о конфиденциальности</a>
</div>
</div>
</div>
</footer>
<div class="modal auth_modal auth1">
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<div class="d-flex flex-column align-items-center gap-15">
<a href="#" class="main_btn login_btn">Вход</a>
<a href="#" class="main_btn register_btn">Регистрация</a>
</div>
</div>
<form class="modal auth_modal auth2">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Регистрация</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="text" class="input" placeholder="Имя">
<p>error</p>
</label>
<label>
<input type="tel" class="input" placeholder="Телефон">
<p>error</p>
</label>
<label>
<input type="email" class="input" placeholder="Email">
<p>error</p>
</label>
<label>
<input type="password" class="input error" placeholder="Пароль">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<label>
<div class="checkmark"></div>
<input type="checkbox">
<p class="opacity_txt">Согласие на получение рекламных предложений</p>
</label>
<button class="main_btn">Регистрация</button>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
</div>
</form>
<form class="modal auth_modal auth3">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Регистрация</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Регистрация</button>
</div>
</form>
<form class="modal auth_modal auth4">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Вход</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="text" class="input" placeholder="Телефон или Email">
<p>error</p>
</label>
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<a href="#" class="conditions">Забыли пароль? </a>
<button class="main_btn">Вход</button>
</div>
</form>
<form class="modal auth_modal auth5">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Вход</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Вход</button>
</div>
</form>
<div class="modal_back"></div>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>