Files
template-for-verstka/order.html

313 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/font/stylesheet.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="cont">
<div class="header_block">
<a href="#" class="header_logo">
<img src="assets/img/icons/logo.svg" alt="">
</a>
<div class="header_navs">
<a href="#" class="header_nav">Главная</a>
<a href="#" class="header_nav">продукция</a>
<a href="#" class="header_nav">О cosmopet</a>
<a href="#" class="header_nav">Блог</a>
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a>
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a>
</div>
<button class="header_bars"><img src="assets/img/icons/bars2.svg" alt=""></button>
</div>
</div>
<div class="header_mob">
<button class="header_close"><img src="assets/img/icons/i-close.svg" alt=""></button>
<div class="header_navs">
<a href="#" class="header_nav">Главная</a>
<a href="#" class="header_nav">продукция</a>
<a href="#" class="header_nav">О cosmopet</a>
<a href="#" class="header_nav">Блог</a>
<div class="header_links">
<a href="#" class="header_link" id="auth"><img src="assets/img/icons/i-user.svg" alt=""></a>
<a href="#" class="header_link"><img src="assets/img/icons/i-card.svg" alt=""></a>
</div>
</div>
</div>
<div class="header_mob-bg"></div>
</header>
<section class="order">
<div class="cont">
<a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none">
<path d="M9 1L2 7.5L9 14" stroke="#121212" stroke-width="2"/>
</svg>
вернуться
</a>
<h1 class="section_title d-flex align-items-center justify-content-between">
Заказы
<a href="#" class="back_link">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<circle cx="14.5" cy="14.5" r="14" transform="rotate(-180 14.5 14.5)" stroke="#121212"/>
<path d="M17.1133 22.8965L8.78499 14.7387L17.1133 6.58082" stroke="#121212"/>
</svg>
</a>
</h1>
<div class="data_block data_block_table">
<div class="data_block_top">
<div class="data_block_title">Номер <span class="mobile_none">заказа</span></div>
<div class="data_block_title">Дата</div>
<div class="data_block_title">СТОИМОСТЬ</div>
<div class="data_block_title"><span class="mobile_none">СТАТУС</span><span class="desctop_none">К ОПЛАТЕ</span></div>
</div>
<div class="data_block_body">
<a href="#" class="order_item">
<div class="order_id">№Ru7485-2347</div>
<div class="order_item_text">dd.mm.yy</div>
<div class="order_item_text">10 000 ₽</div>
<div class="order_item_text">в пути</div>
<div class="see_order">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none">
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</a>
<a href="#" class="order_item done">
<div class="order_id">№Ru7485-2346</div>
<div class="order_item_text">dd.mm.yy</div>
<div class="order_item_text">10 000 ₽</div>
<div class="order_item_text">завешён</div>
<div class="see_order">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none">
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</a>
<a href="#" class="order_item done">
<div class="order_id">№Ru7485-2345</div>
<div class="order_item_text">dd.mm.yy</div>
<div class="order_item_text">10 000 ₽</div>
<div class="order_item_text">завешён</div>
<div class="see_order">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none">
<path opacity="0.3" d="M1 1L10 10.5L1 20" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</a>
</div>
</div>
</div>
</section>
<footer class="footer footer2">
<div class="cont">
<div class="footer_block">
<div class="footer_menu">
<a href="#" class="footer_logo"><img src="assets/img/icons/logo2.svg" alt=""></a>
<div class="footer_navs">
<a href="#" class="footer_nav">Главная</a>
<a href="#" class="footer_nav">продукция</a>
<a href="#" class="footer_nav">О cosmopet</a>
<a href="#" class="footer_nav">Блог</a>
<a href="#" class="footer_link"><img src="assets/img/icons/i-user2.svg" alt=""></a>
<a href="#" class="footer_link"><img src="assets/img/icons/i-card2.svg" alt=""></a>
</div>
</div>
<div class="footer_box">
<h2 class="footer_box-title">Отзывы и предложения <img src="assets/img/icons/footer_line-mob.svg" alt="" class="footer_line-mob1"></h2>
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line1">
<a href="#" class="footer_box-link">pro@cosmopet.shop</a>
</div>
<div class="footer_box">
<h2 class="footer_box-title">связь с ветеринаром <img src="assets/img/icons/footer_line-mob2.svg" alt="" class="footer_line-mob2"></h2>
<img src="assets/img/icons/footer_line2.svg" alt="" class="footer_box-line2">
<a href="#" class="footer_box-link">vetvopros@cosmopet.shop</a>
</div>
<div class="footer_form">
<div class="footer_form-info">
<div class="footer_form-title">
<h2>Обратная связь</h2>
<img src="assets/img/icons/footer_line2.svg" alt="">
</div>
<div class="footer_form-inp">
<input type="text" placeholder="ваше имя">
<input type="email" placeholder="почта">
</div>
</div>
<div class="footer_form-textarea">
<textarea placeholder="обращение"></textarea>
<button class="footer_form-btn btn--black-hover">отправить</button>
</div>
</div>
<div class="footer_social">
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-vk2.svg" alt=""></a>
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-tg2.svg" alt=""></a>
<a href="#" class="footer_social-link"><img src="assets/img/icons/i-yandex2.svg" alt=""></a>
</div>
<div class="footer_bottom">
<a href="#">123182 г. Москва, 4-й Красногорский пр., д. 2/4, стр. 1, этаж/ком. 3/1</a>
<a href="#">Соглашение о конфиденциальности</a>
</div>
</div>
</div>
</footer>
<div class="modal auth_modal auth1">
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
<div class="d-flex flex-column align-items-center gap-15">
<a href="#" class="main_btn login_btn">Вход</a>
<a href="#" class="main_btn register_btn">Регистрация</a>
</div>
</div>
<form class="modal auth_modal auth2">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Регистрация</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="text" class="input" placeholder="Имя">
<p>error</p>
</label>
<label>
<input type="tel" class="input" placeholder="Телефон">
<p>error</p>
</label>
<label>
<input type="email" class="input" placeholder="Email">
<p>error</p>
</label>
<label>
<input type="password" class="input error" placeholder="Пароль">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<label>
<div class="checkmark"></div>
<input type="checkbox">
<p class="opacity_txt">Согласие на получение рекламных предложений</p>
</label>
<button class="main_btn">Регистрация</button>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
</div>
</form>
<form class="modal auth_modal auth3">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Регистрация</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Регистрация</button>
</div>
</form>
<form class="modal auth_modal auth4">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Вход</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="text" class="input" placeholder="Телефон или Email">
<p>error</p>
</label>
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<a href="#" class="conditions">Забыли пароль? </a>
<button class="main_btn">Вход</button>
</div>
</form>
<form class="modal auth_modal auth5">
<div class="modal_top">
<a href="#" class="back_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<path d="M26.1484 34.127L14.2969 22.4015L26.1484 10.676" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
<circle cx="22" cy="22" r="21" transform="rotate(-180 22 22)" stroke="#121212" stroke-width="2"/>
</svg>
</a>
<div class="modal_title">Вход</div>
<span class="plus plus_black">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<g>
<circle cx="22" cy="22" r="21" transform="matrix(1 -2.3597e-08 -2.3597e-08 -1 0 44)" stroke="#121212" stroke-width="2"></circle>
<path d="M15 22H29" stroke="#121212" stroke-width="2"></path>
<path d="M22 15L22 29" stroke="#121212" stroke-width="2"></path>
</g>
</svg>
</span>
</div>
<div class="modal_inputs">
<label>
<input type="password" class="input" placeholder="Код">
<p>Пароль не должен содержать знаков !”№@#-</p>
</label>
<p class="conditions">Нажимая на кнопку регистрации вы даёте согласие на обработку персональных данных</p>
<button class="main_btn">Вход</button>
</div>
</form>
<div class="modal_back"></div>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>