API tools faq
paste
Advertisement
deyanivanov966

Store.html

deyanivanov966
Dec 24th, 2021
963
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.72 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="bg">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Store</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  10.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
  11.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  12.     <script>
  13.     document.addEventListener('DOMContentLoaded', function(event) {
  14.         task1();
  15.     });
  16.     const task1 = () => {
  17.         let btns = document.querySelectorAll(".order");
  18.         let br = document.querySelectorAll("#broqch")[0];
  19.         let p = document.querySelectorAll("#pole")[0];
  20.         btns.forEach(item => {
  21.             item.addEventListener('click', (e) => {
  22.                 br.innerText = parseInt(br.innerText) + 1;
  23.                 p.innerText = parseInt(p.innerText) + parseInt(item.dataset.cena);
  24.             });
  25.         });
  26.     }
  27.     </script>
  28. </head>
  29.  
  30. <body>
  31.     <div class="container-fluid bg-light">
  32.         <div class="container">
  33.             <nav class="navbar navbar-expand-lg navbar-light bg-light">
  34.                 <div class="container-fluid">
  35.                     <a class="navbar-brand" href="index.html"> <img src="images/Picture1.png" alt="лого" width="80" height="54"> </a>
  36.                     <button class="navbar-toggler" 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>
  37.                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
  38.                         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  39.                             <li class="nav-item"> <a class="nav-link" href="index.html">Начало</a> </li>
  40.                             <li class="nav-item"> <a class="nav-link active" aria-current="page" href="Store.html">Магазин</a> </li>
  41.                             <li class="nav-item"> <a class="nav-link" href="events.html">Събития</a> </li>
  42.                             <li class="nav-item"> <a class="nav-link" href="contacts.html">Контакти</a> </li>
  43.                         </ul>
  44.                         <div>
  45.                             <form class="d-flex">
  46.                                 <input class="form-control me-2" type="search" aria-label="Search">
  47.                                 <button class="btn btn-outline-success" type="submit">Търси</button>
  48.                             </form>
  49.                         </div>
  50.                         <div class="col-12 col-lg text-lg-end">
  51.                             <button class="btn btn-outline-success"> Количка <i class="bi bi-basket"></i> <span class="badge bg-danger rounded-pill" id="broqch"> 0 </span> </button>
  52.                         </div>
  53.                         <div>
  54.                             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  55.                                 <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Профил </a>
  56.                                     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  57.                                         <li> <a class="dropdown-item" href="login.html">Вход</a> </li>
  58.                                         <li> <a class="dropdown-item" href="edit.html">Редактиране</a> </li>
  59.                                         <li>
  60.                                             <hr class="dropdown-divider"> </li>
  61.                                         <li> <a class="dropdown-item" href="#">Изход</a> </li>
  62.                                     </ul>
  63.                                 </li>
  64.                             </ul>
  65.                         </div>
  66.                     </div>
  67.                 </div>
  68.             </nav>
  69.         </div>
  70.     </div>
  71.     <div style="background-image:url(images/lights2.png); background-repeat:repeat-x; width:100%; height:35px;">
  72.     </div>
  73.     <div class="container">
  74.         <div class="row mt-4">
  75.             <h2 class="text-center">Ръчно изработени коледни подаръци и декорации</h2> </div>
  76.         <div class="row">
  77.             <div class="col-lg-6 col-12 mx-auto my-4">
  78.                 <select class="form-select">
  79.                     <option value="">Категории</option>
  80.                     <option value="">Подаръци</option>
  81.                     <option value="">Украса</option>
  82.                     <option value="">Вкуснотийки</option>
  83.                 </select>
  84.             </div>
  85.             <div class="col-lg-6 col-12 my-4 d-flex justify-content-end">
  86.                 <h4>Обща сума: <span id="pole">0</span> лв.</h4> </div>
  87.         </div>
  88.         <div class="row mb-4">
  89.             <div class="col-md-4">
  90.                 <div class="card border-success"> <span class="badge bg-success text-white position-absolute">Ново</span> <img src="images/gift1.jpg" alt="" class="card-img-top">
  91.                     <div class="card-body p-4">
  92.                         <div class="text-center">
  93.                             <h5>Чаено коледно дърво</h5>
  94.                             <h5>18 лв.</h5>
  95.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="18">Поръчай</a> </div>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.             <div class="col-md-4">
  101.                 <div class="card border-success"> <span class="badge bg-danger text-white position-absolute">Ограничен брой</span> <img src="images/gift2.jpeg" alt="" class="card-img-top">
  102.                     <div class="card-body p-4">
  103.                         <div class="text-center">
  104.                             <h5>Свещ в ръчно изрисувана чаша</h5>
  105.                             <h5>13 лв.</h5>
  106.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="13">Поръчай</a> </div>
  107.                         </div>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.             <div class="col-md-4">
  112.                 <div class="card border-success"> <span class="badge bg-info text-white position-absolute">Най-продаван</span> <img src="images/gift7.jpg" alt="" class="card-img-top">
  113.                     <div class="card-body p-4">
  114.                         <div class="text-center">
  115.                             <h5>Коледно преспапие</h5>
  116.                             <h5>12 лв.</h5>
  117.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="12">Поръчай</a> </div>
  118.                         </div>
  119.                     </div>
  120.                 </div>
  121.             </div>
  122.         </div>
  123.         <div class="row mb-4">
  124.             <div class="col-md-4">
  125.                 <div class="card border-success"> <span class="badge bg-success text-white position-absolute">Ново</span> <img src="images/gift4.jpg" alt="" class="card-img-top">
  126.                     <div class="card-body p-4">
  127.                         <div class="text-center">
  128.                             <h5>Празнична солница</h5>
  129.                             <h5>8 лв.</h5>
  130.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="8">Поръчай</a> </div>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.             <div class="col-md-4">
  136.                 <div class="card border-success"> <img src="images/gift5.jpg" alt="" class="card-img-top">
  137.                     <div class="card-body p-4">
  138.                         <div class="text-center">
  139.                             <h5>Комплект за кафе</h5>
  140.                             <h5>9 лв.</h5>
  141.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="9">Поръчай</a> </div>
  142.                         </div>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.             <div class="col-md-4">
  147.                 <div class="card border-success"> <img src="images/gift6.jpg" alt="" class="card-img-top">
  148.                     <div class="card-body p-4">
  149.                         <div class="text-center">
  150.                             <h5>Сет със сукуленти</h5>
  151.                             <h5>21 лв.</h5>
  152.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="21">Поръчай</a> </div>
  153.                         </div>
  154.                     </div>
  155.                 </div>
  156.             </div>
  157.         </div>
  158.         <div class="row mb-4">
  159.             <div class="col-md-4">
  160.                 <div class="card border-success"> <span class="badge bg-danger text-white position-absolute">Ограничен брой</span> <img src="images/gift3.jpeg" alt="" class="card-img-top">
  161.                     <div class="card-body p-4">
  162.                         <div class="text-center">
  163.                             <h5>Бродирани играчки за елха</h5>
  164.                             <h5>4 лв.</h5>
  165.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="4">Поръчай</a> </div>
  166.                         </div>
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.             <div class="col-md-4">
  171.                 <div class="card border-success"> <img src="images/gift8.jpg" alt="" class="card-img-top">
  172.                     <div class="card-body p-4">
  173.                         <div class="text-center">
  174.                             <h5>Смес за коледни бисквити</h5>
  175.                             <h5>14 лв.</h5>
  176.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="14">Поръчай</a> </div>
  177.                         </div>
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.             <div class="col-md-4">
  182.                 <div class="card border-success"> <img src="images/gift9.jpg" alt="" class="card-img-top">
  183.                     <div class="card-body p-4">
  184.                         <div class="text-center">
  185.                             <h5>Овкусена сол</h5>
  186.                             <h5>19 лв.</h5>
  187.                             <div class="mt-4"> <a href="#" class="btn btn-outline-success order" data-cena="19">Поръчай</a> </div>
  188.                         </div>
  189.                     </div>
  190.                 </div>
  191.             </div>
  192.         </div>
  193.     </div>
  194.     <footer class="text-center text-lg-start bg-light text-muted ">
  195.         <div class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom border border-success">
  196.             <div class="me-5 d-none d-lg-block"> <span>Намери ни в социалните мрежи:</span> </div>
  197.             <div>
  198.                 <a href="https://www.facebook.com/" target="_blank" class="me-4 text-reset text-decoration-none"> <i class="bi bi-facebook"></i> </a>
  199.                 <a href="https://twitter.com/" target="_blank" class="me-4 text-reset text-decoration-none"> <i class="bi bi-twitter"></i> </a>
  200.                 <a href="https://www.instagram.com/" target="_blank" class="me-4 text-reset text-decoration-none"> <i class="bi bi-instagram"></i> </a>
  201.             </div>
  202.         </div>
  203.         <div class="container text-center text-md-start mt-5 ">
  204.             <div class="row mt-3">
  205.                 <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4"> <img src="images/Picture1.png" alt="лого" class="img-fluid"> </div>
  206.                 <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
  207.                     <h6 class="text-uppercase fw-bold mb-4">Полезни линкове</h6>
  208.                     <p> <a href="Store.html" class="text-reset">Магазин</a> </p>
  209.                     <p> <a href="events.html" class="text-reset">Събития</a> </p>
  210.                     <p> <a href="#" class="text-reset">Често задавани въпроси</a> </p>
  211.                 </div>
  212.                 <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
  213.                     <h6 class="text-uppercase fw-bold mb-4">Контакти</h6>
  214.                     <p><i class="bi bi-envelope"></i> <a href="mailto:chmarketVarna@gmail.com" class="text-decoration-none text-reset" target="_blank"> chmarketVarna@gmail.com</a></p>
  215.                     <p><i class="bi bi-house-door"></i><a href="https://goo.gl/maps/CiYA1LYWesbKgfdW7" target="_blank" class="text-reset text-decoration-none"> ул. Преслав 30, Варна, България</a></p>
  216.                     <p><i class="bi bi-phone me-3"></i>+359 876555948</p>
  217.                 </div>
  218.             </div>
  219.         </div>
  220.         <div class="text-center p-4 border border-success" style="background-color: rgba(0, 0, 0, 0.05);"><img src="images/tree.png" alt="tree" style="height: 36px; width: 36px">Christmas Market © 2021 </div>
  221.     </footer>
  222. </body>
  223.  
  224. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!