Azimkin
d522489e7f
- Добавлены страницы "Услуги", "Доставка", "Гарантия", "Контакты" с view и URL - Вынесены hero, advantages, и о нас в отдельные фрагменты - Обновлены header и footer для активных ссылок и адаптивности - Добавлен normalize.css для унификации стилей
194 lines
9.6 KiB
HTML
194 lines
9.6 KiB
HTML
{% load static %}
|
||
|
||
<section class="products-section container">
|
||
<h2 class="products-title">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
|
||
<div class="products-grid">
|
||
<article class="product product-1">
|
||
<div class="product-actions">
|
||
<button title="В избранное">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||
class="bi bi-heart" viewBox="0 0 16 16">
|
||
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"></path>
|
||
</svg>
|
||
</button>
|
||
<button title="В корзину">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||
class="bi bi-cart2" viewBox="0 0 16 16">
|
||
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="product product-2">
|
||
|
||
</article>
|
||
|
||
<article class="product product-3">
|
||
|
||
</article>
|
||
|
||
<article class="product product-4">
|
||
|
||
</article>
|
||
|
||
<article class="product product-5">
|
||
|
||
</article>
|
||
|
||
<article class="product product-6">
|
||
|
||
</article>
|
||
</div>
|
||
{% comment %}
|
||
<!-- Card 1 — tall -->
|
||
<div class="product-card tall">
|
||
<img class="product-card-img" src="{% static 'img/kitchen-sink.jpg' %}" alt="Кухонная мойка">
|
||
|
||
<div class="product-info">
|
||
<div class="p-name">Кухонная мойка</div>
|
||
<div class="p-sub">Искусственный камень, врезная на столешницу</div>
|
||
<div class="p-price">1600 руб</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="product-card">
|
||
<img class="product-card-img" src="{% static 'img/chopping-board.jpg' %}" alt="Разделочная доска"
|
||
style="aspect-ratio:4/3;">
|
||
<div class="product-actions">
|
||
<button title="В избранное">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</button>
|
||
<button title="В корзину">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="product-info">
|
||
<div class="p-name">Разделочная доска</div>
|
||
<div class="p-sub">Нержавеющая сталь</div>
|
||
<div class="p-price">50 руб</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3 — tall -->
|
||
<div class="product-card tall">
|
||
<img class="product-card-img" src="{% static 'img/terra-mirror.jpg' %}" alt="Зеркало Terra">
|
||
<div class="product-actions">
|
||
<button title="В избранное">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</button>
|
||
<button title="В корзину">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="product-info">
|
||
<div class="p-name">Зеркало Terra</div>
|
||
<div class="p-sub">Холодная подсветка, фронтальная</div>
|
||
<div class="p-price">200 руб</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4 -->
|
||
<div class="product-card">
|
||
<img class="product-card-img" src="{% static 'img/toilet.jpg' %}" alt="Унитаз"
|
||
style="aspect-ratio:4/3;">
|
||
<div class="product-actions">
|
||
<button title="В избранное">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</button>
|
||
<button title="В корзину">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="product-info">
|
||
<div class="p-name">Унитаз</div>
|
||
<div class="p-sub">Напольный с бачком, безободковый</div>
|
||
<div class="p-price">1600 руб</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 5 (коврик) -->
|
||
<div class="product-card">
|
||
<img class="product-card-img" src="{% static 'img/rubber-mat.jpg' %}" alt="Коврик"
|
||
style="aspect-ratio:4/3;">
|
||
<div class="product-actions">
|
||
<button title="В избранное">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</button>
|
||
<button title="В корзину">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="product-info">
|
||
<div class="p-name">Коврик для посуды</div>
|
||
<div class="p-sub">Мгновенно впитывает воду</div>
|
||
<div class="p-price">20 руб</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 6 (смеситель) -->
|
||
<div class="product-card">
|
||
<img class="product-card-img" src="{% static 'img/mixer.jpg' %}" alt="Смеситель"
|
||
style="aspect-ratio:4/3;">
|
||
<div class="product-actions">
|
||
<button title="В избранное">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</button>
|
||
<button title="В корзину">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2">
|
||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="product-info">
|
||
<div class="p-name">Смеситель</div>
|
||
<div class="p-sub">Однорычажный смеситель</div>
|
||
<div class="p-price">340 руб</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>{% endcomment %}
|
||
|
||
<div class="products-footer">
|
||
<a href="#" class="btn-primary">ПЕРЕЙТИ В КАТАЛОГ</a>
|
||
</div>
|
||
</section> |