Int_Prog/лаб2/lab2/cart.html
2024-01-19 01:24:45 +04:00

87 lines
3.3 KiB
HTML
Raw Permalink 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="ru">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap -->
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Normalize -->
<link rel="stylesheet" href="./node_modules/normalize.css/normalize.css" />
<!-- Styles -->
<link href="css/style.css" rel="stylesheet" />
</head>
<body class="pb-5">
<header class="header">
<nav class="navbar navbar-expand-md">
<div class="container align-items-baseline">
<a class="gold-color fs-4" href="index.html">Хмели-Сунели</a>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto p-2 p-md-0 mt-2 navbar-my-border d-md-flex gap-3">
<li class="nav-item">
<a class="gold-color" href="index.html">Меню</a>
</li>
<li class="nav-item">
<a class="gold-color" href="about.html">О нас</a>
</li>
<li class="nav-item">
<a class="gold-color" href="cart.html">Корзина</a>
</li>
<li class="nav-item">
<a class="gold-color" href="admin.html">Админка</a>
</li>
<li class="nav-item">
<a class="gold-color" href="login.html">Войти</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="container">
<p class="title">Корзина</p>
<div class="row mx-auto g-3 g-xl-0" style="max-width: 100%">
<div class="col-12 col-xl-8 d-flex flex-column ps-xl-0">
<!-- Карточка товара в корзине -->
<div class="row rounded-4 bg-gold-color border border-2 p-2 mb-3 mx-0">
<img src="./img/item.jpg" alt="" class="col-6 col-sm-4 col-md-3 ps-xl-0 rounded-4" />
<div class="col-5 col-sm-7 col-md-8">
<p class="text-light fs-4 m-0">Хачапури</p>
<p class="text-light fs-6 mt-3">100.00&#8381;</p>
</div>
<div class="col-1 p-0">
<button class="btn btn-light btn_delete ms-auto"></button>
</div>
</div>
</div>
<!-- CTRL + / -->
<!-- Инфа о корзине -->
<div class="col-12 col-xl-3 bg-gold-color p-3 rounded-4 pe-xl-0 ms-auto" style="height: fit-content">
<p class="gold-color fs-3 m-0 mb-3">Итого: 100&#8381;</p>
<div class="d-flex flex-column gap-3 w-100">
<button class="btn btn-primary">Оформить заказ</button>
<button class="btn btn-danger">Очистить корзину</button>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>