API tools faq
paste
Advertisement
deyanivanov966

2Упражнение 3 Решение на задача от упражнение 3 Банков

deyanivanov966
Dec 14th, 2021
1,350
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.   <tittle></tittle>
  7.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  8.  
  9. </head>
  10. <body>
  11.    <div class="container-fluid bg-light"> <!-- Първи основен контейнер(fluid-100% широк) с background(bg) светло(light) -->
  12.       <div class="container"> <!-- Контейнер в първият-->
  13.          <div class="navbar navbar-expand-lg navbar-light"> <!-- Навигационна лента, която се свива-->
  14.             <a href="" class="navbar-brand fw-bold text-primary">Shop site</a> <!-- text-primary оцветява текста в синьо-->
  15.            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <!-- Добавяне на бутон-->
  16.              <span class="navbar-toggler-icon"></span>
  17.            </button>
  18.            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  19.               <div class="w-100">
  20.                  <div class="row">
  21.                     <div class="col-12 col-lg">
  22.                        <ul class="navbar-nav">
  23.                           <li class="nav-item"><a href="" class="nav-link text-primary">Home</a></li>
  24.                           <li class="nav-item"><a href="" class="nav-link text-primary">About</a></li>
  25.                           <li class="nav-item"><a href="" class="nav-link text-primary">Catalog</a></li>
  26.                           <li class="nav-item"><a href="" class="nav-link text-primary">Orders</a></li>
  27.                        </ul>
  28.                     </div>
  29.                     <div class="col-12 col-lg text-lg-end">
  30.                        <button class="btn btn-outline-dark" > <!-- btn-outline-dark бутон с тъмно очертание-->
  31.                           Cart
  32.                           <span class="badge bg-dark rounded-pill">0</span> <!-- форма на бадж(badge) тъмен background(bg-dark) заоблена форма на хапче(rounded-pill)-->
  33.                        </button>
  34.                     </div>
  35.                  </div>
  36.               </div>
  37.            </div>
  38.          </div>
  39.  
  40.       </div>
  41.    </div>
  42.  
  43.    <div class="container-fluid bg-info bg-gradient py-5"> <!-- "py" падинг =5 // 2-ри контейнер-->
  44.       <div class="row my-4">
  45.          <div class="text-center">
  46.             <h1 class="display-4 fw-bold">Shop in style</h1>
  47.             <p class="lead fw-normal">With this shop homepage template</p>
  48.          </div>
  49.       </div>
  50.    </div>
  51.  
  52.    <div class="container mt-5"> <!-- 3-ти контейнер-->
  53.       <div class="row justify-content-center">
  54.          <div class="col-lg-5 col-12">
  55.             <input type="text" class="form-control" placeholder="Look for products by tittle">
  56.          </div>
  57.          <div class="col-lg-5 col-12">
  58.            <select name="" id="" class="form-select">
  59.              <option value="">All categories</option>
  60.            </select>
  61.          </div>
  62.       </div>
  63.  
  64.       <div class="row"> <!-- Начало на редове с картички-->
  65.          <div class="col"> <!-- Начало на картичка-->
  66.             <div class="card border-info">
  67.                <img src="http://placehold.it/450x300" alt="" class="card-img-top"> <!-- Снимка на картичка-->
  68.                <div class="card-body"> <!-- Тяло на картичката-->
  69.                   <div class="text-center"> <!-- Описателен текст на картичката-->
  70.                      <h5>Fancy Products</h5>
  71.                      <span>$40.00 - $80.00</span>
  72.                      <div>
  73.                         <a href="#" class="btn btn-outline-dark">View Options</a> <!-- Бутон-->
  74.                      </div>
  75.                   </div>
  76.                </div>
  77.             </div>
  78.          </div>
  79.       </div>
  80.    </div>
  81.  
  82.    <!-- Вмъкване на JavaScript библиотека, за да ми работи бутона с менюто в дясно-->
  83.    <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>
  84.  
  85. </body>
  86. </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!