internet-programming/lab2/basket.html

196 lines
9.1 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.

<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Корзина</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/logo.png" alt="logo" width="128">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="stock.html">Акции</a>
<a class="nav-link" href="contacts.html">Контакты</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="btn custom-btn" href="personalAccountLogin.html">Войти</a>
<a class="btn btn-warning" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text-warning font-weight-bold">Корзина</h1>
</div>
<div class="row">
<div class="col-10">
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/pizza.png" class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название пиццы</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/pizza.png" class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название пиццы</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/pizza.png" class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название пиццы</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/pizza.png" class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название пиццы</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-start align-items-center">
<div class="text-dark font-weight-bold" style="font-size: 24px;">
Сумма заказа:
</div>
<div class="text-end" style="color: #F7D22D; font-size: 24px;">
Сумма ₽
</div>
</div>
<a class="btn btn-warning" style="margin-left: 25px; margin-bottom: 10px;" href="makingAnOrder.html">К оплате</a>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Все права защищены © 2023-2024
</footer>
</body>
</html>