250 lines
15 KiB
HTML
250 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="">
|
||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||
<meta name="generator" content="Hugo 0.84.0">
|
||
<title>Pricing example · Bootstrap v5.0</title>
|
||
|
||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/pricing/">
|
||
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
.bd-placeholder-img {
|
||
font-size: 1.125rem;
|
||
text-anchor: middle;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.bd-placeholder-img-lg {
|
||
font-size: 3.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
<!-- Custom styles for this template -->
|
||
<link href="pricing.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||
<symbol id="check" viewBox="0 0 16 16">
|
||
<title>Check</title>
|
||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<div class="container py-3">
|
||
<header>
|
||
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
|
||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
||
<svg width="40" height="40" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M10.3147 30.9442C11.9424 30.9442 13.2618 29.6247 13.2618 27.9971C13.2618 26.3695 11.9424 25.05 10.3147 25.05C8.68712 25.05 7.36768 26.3695 7.36768 27.9971C7.36768 29.6247 8.68712 30.9442 10.3147 30.9442Z"
|
||
fill="#FF4D00"/>
|
||
<path d="M26.5232 30.9442C28.1509 30.9442 29.4703 29.6247 29.4703 27.9971C29.4703 26.3695 28.1509 25.05 26.5232 25.05C24.8956 25.05 23.5762 26.3695 23.5762 27.9971C23.5762 29.6247 24.8956 30.9442 26.5232 30.9442Z"
|
||
fill="#FF4D00"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M30.526 5.89412H7.44717L6.60911 2.28116C6.45421 1.61335 6.1084 1.0662 5.57167 0.63972C5.03494 0.21324 4.42381 0 3.73827 0H1.47353C0.659722 0 0 0.659722 0 1.47353C0 2.28733 0.659722 2.94706 1.47353 2.94706H3.73827L4.42186 5.89412H4.42059L8.21564 22.4326C8.29244 22.7673 8.46515 23.0416 8.73378 23.2556C9.0024 23.4695 9.30842 23.5765 9.65183 23.5765H26.8066C27.1441 23.5765 27.4459 23.4728 27.7121 23.2654C27.9783 23.0581 28.1527 22.7908 28.2354 22.4635L31.9547 7.72829C32.0103 7.50802 32.0147 7.28674 31.968 7.06443C31.9212 6.84212 31.828 6.64136 31.6884 6.46214C31.5488 6.28293 31.377 6.14345 31.1728 6.04372C30.9688 5.94399 30.7532 5.89412 30.526 5.89412Z"
|
||
fill="url(#paint0_linear_103_1445)"/>
|
||
<g style="mix-blend-mode:hard-light">
|
||
<g style="mix-blend-mode:hard-light">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M8.95667 10.7179C8.94284 10.661 8.93245 10.6034 8.91504 10.5453C8.91504 10.4871 8.91504 10.4287 8.91504 10.3701C8.91504 9.96323 9.0589 9.61592 9.34663 9.32819C9.63435 9.04047 9.98167 8.89661 10.3886 8.89661C10.7285 8.89661 11.0321 9.00165 11.2993 9.21174C11.5665 9.42183 11.7402 9.69203 11.8205 10.0224L13.9565 18.817L13.9567 18.8175C13.9705 18.8744 13.9809 18.932 13.9878 18.9901C13.9948 19.0483 13.9983 19.1067 13.9983 19.1653C13.9983 19.5722 13.8544 19.9195 13.5667 20.2072C13.279 20.4949 12.9317 20.6388 12.5248 20.6388C12.1848 20.6388 11.8813 20.5338 11.614 20.3237C11.3468 20.1136 11.1731 19.8434 11.0929 19.5131L8.95667 10.7179ZM17.6405 10.059C17.5603 9.72864 17.3865 9.45844 17.1193 9.24835C16.8521 9.03826 16.5485 8.93321 16.2086 8.93321C15.8017 8.93321 15.4544 9.07707 15.1666 9.3648C14.8789 9.65252 14.7351 9.99984 14.7351 10.4067C14.7351 10.4653 14.7385 10.5237 14.7455 10.5819C14.7525 10.64 14.7629 10.6976 14.7767 10.7545L16.9129 19.5497C16.9931 19.88 17.1668 20.1502 17.4341 20.3603C17.7013 20.5704 18.0049 20.6754 18.3448 20.6754C18.7517 20.6754 19.099 20.5315 19.3867 20.2438C19.6744 19.9561 19.8183 19.6088 19.8183 19.2019C19.8183 19.1433 19.8148 19.0849 19.8079 19.0267C19.8009 18.9686 19.7905 18.911 19.7767 18.8541L19.7766 18.8536L17.6405 10.059Z"
|
||
fill="white" fill-opacity="0.6"/>
|
||
</g>
|
||
</g>
|
||
<defs>
|
||
<linearGradient id="paint0_linear_103_1445" x1="0" y1="0" x2="19.7144" y2="29.6608"
|
||
gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#FFB300"/>
|
||
<stop offset="1" stop-color="#FF4900"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
||
<h1 class="display-4 fw-normal">Цены</h1>
|
||
<p class="fs-5 text-muted">Здесь вы можете выбрать подходящий именно вам вариант покупки.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||
<div class="col">
|
||
<div class="card mb-4 rounded-3 shadow-sm">
|
||
<div class="card-header py-3">
|
||
<h4 class="my-0 fw-normal">Тариф: Обед</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<h1 class="card-title pricing-card-title">500р<small class="text-muted fw-light">/день</small></h1>
|
||
<ul class="list-unstyled mt-3 mb-4">
|
||
<li>Салат</li>
|
||
<li>Суп</li>
|
||
</ul>
|
||
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Купить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card mb-4 rounded-3 shadow-sm">
|
||
<div class="card-header py-3">
|
||
<h4 class="my-0 fw-normal">Тариф: Неделька</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<h1 class="card-title pricing-card-title">2300р<small class="text-muted fw-light">/неделя</small></h1>
|
||
<ul class="list-unstyled mt-3 mb-4">
|
||
<li>Салат</li>
|
||
<li>Суп</li>
|
||
<li>Выбор времени привоза</li>
|
||
</ul>
|
||
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Купить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card mb-4 rounded-3 shadow-sm">
|
||
<div class="card-header py-3">
|
||
<h4 class="my-0 fw-normal">Тариф: Месяц</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<h1 class="card-title pricing-card-title">9000р<small class="text-muted fw-light">/месяц</small></h1>
|
||
<ul class="list-unstyled mt-3 mb-4">
|
||
<li>Салат</li>
|
||
<li>Суп</li>
|
||
<li>Выбор времени привоза</li>
|
||
<li>Выбор блюд</li>
|
||
</ul>
|
||
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Купить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 class="display-6 text-center mb-4">Тарифы</h2>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table text-center">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 34%;"></th>
|
||
<th style="width: 22%;">Обед</th>
|
||
<th style="width: 22%;">Неделька</th>
|
||
<th style="width: 22%;">Месяц</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" class="text-start">Салат</th>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" class="text-start">Суп</th>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row" class="text-start">Выбор времени привоза</th>
|
||
<td></td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row" class="text-start">Выбор блюд</th>
|
||
<td></td>
|
||
<td></td>
|
||
<td>
|
||
<svg class="bi" width="24" height="24">
|
||
<use xlink:href="#check"/>
|
||
</svg>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
||
<div class="row">
|
||
<div class="col-12 col-md">
|
||
<svg width="40" height="40" viewBox="0 -0.5 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M10.3147 30.9442C11.9424 30.9442 13.2618 29.6247 13.2618 27.9971C13.2618 26.3695 11.9424 25.05 10.3147 25.05C8.68712 25.05 7.36768 26.3695 7.36768 27.9971C7.36768 29.6247 8.68712 30.9442 10.3147 30.9442Z"
|
||
fill="#FF4D00"/>
|
||
<path d="M26.5232 30.9442C28.1509 30.9442 29.4703 29.6247 29.4703 27.9971C29.4703 26.3695 28.1509 25.05 26.5232 25.05C24.8956 25.05 23.5762 26.3695 23.5762 27.9971C23.5762 29.6247 24.8956 30.9442 26.5232 30.9442Z"
|
||
fill="#FF4D00"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M30.526 5.89412H7.44717L6.60911 2.28116C6.45421 1.61335 6.1084 1.0662 5.57167 0.63972C5.03494 0.21324 4.42381 0 3.73827 0H1.47353C0.659722 0 0 0.659722 0 1.47353C0 2.28733 0.659722 2.94706 1.47353 2.94706H3.73827L4.42186 5.89412H4.42059L8.21564 22.4326C8.29244 22.7673 8.46515 23.0416 8.73378 23.2556C9.0024 23.4695 9.30842 23.5765 9.65183 23.5765H26.8066C27.1441 23.5765 27.4459 23.4728 27.7121 23.2654C27.9783 23.0581 28.1527 22.7908 28.2354 22.4635L31.9547 7.72829C32.0103 7.50802 32.0147 7.28674 31.968 7.06443C31.9212 6.84212 31.828 6.64136 31.6884 6.46214C31.5488 6.28293 31.377 6.14345 31.1728 6.04372C30.9688 5.94399 30.7532 5.89412 30.526 5.89412Z"
|
||
fill="url(#paint0_linear_103_1445)"/>
|
||
<g style="mix-blend-mode:hard-light">
|
||
<g style="mix-blend-mode:hard-light">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M8.95667 10.7179C8.94284 10.661 8.93245 10.6034 8.91504 10.5453C8.91504 10.4871 8.91504 10.4287 8.91504 10.3701C8.91504 9.96323 9.0589 9.61592 9.34663 9.32819C9.63435 9.04047 9.98167 8.89661 10.3886 8.89661C10.7285 8.89661 11.0321 9.00165 11.2993 9.21174C11.5665 9.42183 11.7402 9.69203 11.8205 10.0224L13.9565 18.817L13.9567 18.8175C13.9705 18.8744 13.9809 18.932 13.9878 18.9901C13.9948 19.0483 13.9983 19.1067 13.9983 19.1653C13.9983 19.5722 13.8544 19.9195 13.5667 20.2072C13.279 20.4949 12.9317 20.6388 12.5248 20.6388C12.1848 20.6388 11.8813 20.5338 11.614 20.3237C11.3468 20.1136 11.1731 19.8434 11.0929 19.5131L8.95667 10.7179ZM17.6405 10.059C17.5603 9.72864 17.3865 9.45844 17.1193 9.24835C16.8521 9.03826 16.5485 8.93321 16.2086 8.93321C15.8017 8.93321 15.4544 9.07707 15.1666 9.3648C14.8789 9.65252 14.7351 9.99984 14.7351 10.4067C14.7351 10.4653 14.7385 10.5237 14.7455 10.5819C14.7525 10.64 14.7629 10.6976 14.7767 10.7545L16.9129 19.5497C16.9931 19.88 17.1668 20.1502 17.4341 20.3603C17.7013 20.5704 18.0049 20.6754 18.3448 20.6754C18.7517 20.6754 19.099 20.5315 19.3867 20.2438C19.6744 19.9561 19.8183 19.6088 19.8183 19.2019C19.8183 19.1433 19.8148 19.0849 19.8079 19.0267C19.8009 18.9686 19.7905 18.911 19.7767 18.8541L19.7766 18.8536L17.6405 10.059Z"
|
||
fill="white" fill-opacity="0.6"/>
|
||
</g>
|
||
</g>
|
||
<defs>
|
||
<linearGradient id="paint0_linear_103_1445" x1="0" y1="0" x2="19.7144" y2="29.6608"
|
||
gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#FFB300"/>
|
||
<stop offset="1" stop-color="#FF4900"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
<small class="d-block mb-3 text-muted">©2023</small>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
</body>
|
||
</html>
|