101 lines
4.8 KiB
Plaintext
101 lines
4.8 KiB
Plaintext
@{
|
||
ViewData["Title"] = "Каталог";
|
||
}
|
||
|
||
@* заголовок страницы *@
|
||
<h1 class="mb-4">Каталог товаров</h1>
|
||
|
||
@* описание — по заданию: 4 карточки-заглушки *@
|
||
<p class="text-muted mb-4">
|
||
Выберите товар для подробной информации. Пока что это заглушки —
|
||
позже карточки будут заполняться данными из базы.
|
||
</p>
|
||
|
||
@* строка с четырьмя карточками *@
|
||
@* g-4 — отступы между колонками 1.5rem *@
|
||
<div class="row g-4">
|
||
|
||
@* === КАРТОЧКА 1: НОУТБУК === *@
|
||
@* col-lg-3 — на больших экранах 4 карточки в ряд (3/12 = 25%) *@
|
||
@* col-md-6 — на средних — 2 в ряд *@
|
||
@* col-12 — на маленьких — 1 в ряд *@
|
||
<div class="col-lg-3 col-md-6 col-12">
|
||
<div class="card h-100 shadow-sm product-card">
|
||
@* заглушка для картинки — вместо реального фото просто серый блок *@
|
||
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
|
||
<span class="fs-1">💻</span>
|
||
</div>
|
||
<div class="card-body d-flex flex-column">
|
||
<h5 class="card-title fw-bold">Ноутбук ProBook 15</h5>
|
||
<p class="card-text text-muted small flex-grow-1">
|
||
15.6", Intel Core i5, 8 ГБ RAM, 512 ГБ SSD
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center mt-2">
|
||
@* цена *@
|
||
<span class="fw-bold fs-5 text-primary">45 990 ₽</span>
|
||
@* кнопка "Подробнее" — заглушка *@
|
||
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@* === КАРТОЧКА 2: СМАРТФОН === *@
|
||
<div class="col-lg-3 col-md-6 col-12">
|
||
<div class="card h-100 shadow-sm product-card">
|
||
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
|
||
<span class="fs-1">📱</span>
|
||
</div>
|
||
<div class="card-body d-flex flex-column">
|
||
<h5 class="card-title fw-bold">Смартфон Nova X</h5>
|
||
<p class="card-text text-muted small flex-grow-1">
|
||
6.5", AMOLED, 128 ГБ, 48 Мп камера
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center mt-2">
|
||
<span class="fw-bold fs-5 text-primary">29 990 ₽</span>
|
||
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@* === КАРТОЧКА 3: ПЛАНШЕТ === *@
|
||
<div class="col-lg-3 col-md-6 col-12">
|
||
<div class="card h-100 shadow-sm product-card">
|
||
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
|
||
<span class="fs-1">📶</span>
|
||
</div>
|
||
<div class="card-body d-flex flex-column">
|
||
<h5 class="card-title fw-bold">Планшет Tab Lite</h5>
|
||
<p class="card-text text-muted small flex-grow-1">
|
||
10.1", 64 ГБ, Wi-Fi, идеален для учёбы
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center mt-2">
|
||
<span class="fw-bold fs-5 text-primary">18 490 ₽</span>
|
||
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@* === КАРТОЧКА 4: НАУШНИКИ === *@
|
||
<div class="col-lg-3 col-md-6 col-12">
|
||
<div class="card h-100 shadow-sm product-card">
|
||
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center">
|
||
<span class="fs-1">🎧</span>
|
||
</div>
|
||
<div class="card-body d-flex flex-column">
|
||
<h5 class="card-title fw-bold">Наушники SoundMax</h5>
|
||
<p class="card-text text-muted small flex-grow-1">
|
||
Накладные, Bluetooth 5.0, шумоподавление, 40 ч
|
||
</p>
|
||
<div class="d-flex justify-content-between align-items-center mt-2">
|
||
<span class="fw-bold fs-5 text-primary">3 990 ₽</span>
|
||
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|