Примерочная
This commit is contained in:
Konstantin
@@ -358,6 +358,147 @@ header .menu>li:last-child {
|
||||
}
|
||||
}
|
||||
|
||||
.fitting-room {
|
||||
background: linear-gradient(180deg, #f8f6f5 0, #fff 360px);
|
||||
}
|
||||
|
||||
.fitting-room__hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 56px;
|
||||
align-items: center;
|
||||
padding: 34px 0 48px;
|
||||
}
|
||||
|
||||
.fitting-room__eyebrow {
|
||||
margin-bottom: 12px;
|
||||
color: #8f817d;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fitting-room__hero h1 {
|
||||
max-width: 700px;
|
||||
margin-bottom: 16px;
|
||||
font-size: clamp(42px, 6vw, 76px);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.fitting-room__hero p {
|
||||
max-width: 680px;
|
||||
margin: 0;
|
||||
color: #5c5950;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.fitting-room__summary {
|
||||
padding: 26px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(216, 206, 203, 0.82);
|
||||
box-shadow: 0 18px 45px rgba(52, 43, 40, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fitting-room__count {
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fitting-room__note {
|
||||
margin-top: 12px;
|
||||
color: #8f817d;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.fitting-room__toolbar {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
color: #5c5950;
|
||||
}
|
||||
|
||||
.fitting-room__clear,
|
||||
.fitting-room__remove {
|
||||
color: #8f817d;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fitting-room__item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fitting-room__remove {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
z-index: 2;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.fitting-room__empty {
|
||||
max-width: 620px;
|
||||
padding: 54px 0 86px;
|
||||
}
|
||||
|
||||
.fitting-room__empty-icon {
|
||||
margin-bottom: 12px;
|
||||
color: #d8cecb;
|
||||
font-size: 76px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fitting-room__empty h2 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.fitting-room__empty p {
|
||||
color: #5c5950;
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.fitting-room__hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
padding: 20px 0 34px;
|
||||
}
|
||||
|
||||
.fitting-room__hero h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.fitting-room__hero p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fitting-room__toolbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fitting-room__clear {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fitting-room__remove {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-dominik{
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,52 @@
|
||||
{{ header }}
|
||||
{{ content_top }}
|
||||
<section class="section-wishlist py-5">
|
||||
<section class="section-wishlist fitting-room py-5">
|
||||
<div class="container-fluid" id="section-wishlist">
|
||||
<ul class="breadcrumb">
|
||||
{% for key,breadcrumb in breadcrumbs %}
|
||||
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h1 class="mb-5">{{ heading_title }}</h1>
|
||||
|
||||
|
||||
<div class="fitting-room__hero">
|
||||
<div>
|
||||
<div class="fitting-room__eyebrow">{{ text_eyebrow }}</div>
|
||||
<h1>{{ heading_title }}</h1>
|
||||
<p>{{ text_intro }}</p>
|
||||
</div>
|
||||
{% if products %}
|
||||
<div class="fitting-room__summary">
|
||||
<div class="fitting-room__count">{{ fitting_room_count }}</div>
|
||||
<div>{{ text_selected }}</div>
|
||||
<button type="button" class="btn btn-dark w-100 mt-3" onclick="SendRequest(0, 'fitting_room')">{{ button_request }}</button>
|
||||
<div class="fitting-room__note">{{ text_request_note }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if products %}
|
||||
<div class="row g-3 product-items">
|
||||
<div class="fitting-room__toolbar">
|
||||
<div>{{ text_hint }}</div>
|
||||
<a href="{{ clear }}" class="fitting-room__clear" onclick="return confirm('{{ text_clear_confirm|e('js') }}');">{{ button_clear }}</a>
|
||||
</div>
|
||||
<div class="row g-3 product-items">
|
||||
{% for product in products %}
|
||||
<div class="col-6 col-lg-4">
|
||||
{% include 'dominik/template/common/product.twig' %}
|
||||
<div class="fitting-room__item">
|
||||
{% include 'dominik/template/common/product.twig' %}
|
||||
<a href="{{ product.remove }}" class="fitting-room__remove" aria-label="{{ button_remove }}: {{ product.name }}">{{ button_remove }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<p>{{ text_empty }}</p>
|
||||
<a href="{{ continue }}" class="btn btn-dark">{{ button_continue }}</a>
|
||||
<div class="fitting-room__empty">
|
||||
<div class="fitting-room__empty-icon">♡</div>
|
||||
<h2>{{ text_empty }}</h2>
|
||||
<p>{{ text_empty_description }}</p>
|
||||
<a href="{{ continue }}" class="btn btn-dark mt-3">{{ button_continue }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user