IP_3sem/2_laba_IP_project/page4.html

115 lines
4.9 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.

<!DOCTYPE html>
<html lang="en">
<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="css/style.css">
</head>
<body class="h-100 d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md navbar-white fixed-top">
<div class="btn_open_sidebar">
<button class="btn_open btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling"></button>
</div>
<div class="container-fluid top_pannel">
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
<div class="navbar-nav text_containter">
<div class="arrow_and_cities">
<img class="icon_top" src="src/arrow_icon.png" alt="arrow_icon">
<a class="nav-link " href="index.html" style=" color: black;">Ульяновск</a>
</div>
<a class="nav-link adress" href="page-edit.html" style="margin-left: 40px; color: black;">Адреса
магазинов</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end " id="navbarNav1">
<div class="navbar-nav icon-container">
<a href="page2.html">
<img class="icon_top" src="src/acc_icon.png" alt="acc_icon">
</a>
<a href="page5.html">
<img class="icon_top" src="src/shop_icon.png" alt="shop_icon">
</a>
<a href="page2.html">
<img class="icon_top" src="src/search_icon.png" alt="search_icon">
</a>
</div>
</div>
</div>
</nav>
</header>
<div class="offcanvas offcanvas-start show" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<a href="index.html">
<img class="logo_sidebar" src="src/logo.png" alt="shop_icon">
</a>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="list_sidebar">
<div class="list_font">
<ul>
<li>Клубника в шоколаде</li>
<li>Бананы в шоколаде</li>
<li>Конфеты</li>
<li>Шоколад</li>
<li>Медианты</li>
</ul>
</div>
</div>
<div class="bottom_sidebar">
<h0>8 800 700 34 21
<div class="take_order" style="color: #25e000;">Сделать заказ</div>
</h0>
<div class="social_network">
<a href="page3.html" style="text-decoration: none;">
<img class="vk" src="src/whatsapp_icon.png" alt="vk">
</a>
<img class="whatsapp" src="src/vk_icon.png" alt="whatsapp">
</div>
</div>
</div>
</div>
<script>
function checkMediaQuery() {
var sidebar = document.querySelector('.offcanvas');
var button = document.querySelector('.btn-primary');
if (window.matchMedia('(max-width: 1300px)').matches) {
sidebar.classList.remove('show');
button.setAttribute('aria-expanded', 'false');
} else {
sidebar.classList.add('show');
button.setAttribute('aria-expanded', 'true');
}
}
window.addEventListener('load', checkMediaQuery);
window.addEventListener('resize', checkMediaQuery);
</script>
<main class="container main_pannel2">
<div class="container view_object d-flex flex-column flex-md-row">
<div class="left-cell">
<img class="objects" src="src/object_3.png" alt="object">
</div>
<div class="right-cell">
<h3>Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</h3>
<div>
<h3 style="font-size: 24px; color: #a2a2a2; ">Итого:</h3>
<h3 class="price_object">3000₽</h3>
<a href="page5.html">
<button type="button" class="btn btn-success btn-lg ">Добавить в корзину</button>
</a>
</div>
</div>
</div>
</main>
</body>
</html>