API tools faq
paste
Advertisement
lemansky

Untitled

lemansky
Dec 1st, 2021
1,040
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.45 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.     <title>Document</title>
  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">
  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>
  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">
  31.                                     Cart
  32.                                     <span class="badge bg-dark rounded-pill"> 0 </span>
  33.                                 </button>
  34.                             </div>
  35.                         </div>
  36.                     </div>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </div>
  41.  
  42.     <div class="container-fluid bg-info bg-gradient py-5">
  43.         <div class="row my-4">
  44.             <div class="text-center">
  45.                 <h1 class="display-4 fw-bold">Shop in style</h1>
  46.                 <p class="lead fw-normal">With this shop homepage template</p>
  47.             </div>
  48.         </div>
  49.     </div>
  50.  
  51.     <div class="container mt-5">
  52.         <div class="row justify-content-center">
  53.             <div class="col-lg-5 col-12 mx-3">
  54.                 <input type="text" class="form-control" placeholder="Look for products by title">
  55.             </div>
  56.             <div class="col-lg-5 col-12 mx-3">
  57.                 <select name="" id="" class="form-select">
  58.                     <option value="">All Categories</option>
  59.                 </select>
  60.             </div>
  61.         </div>
  62.  
  63.         <div class="row row-cols-2 row-cols-md-3 row-cols-xl-4 mt-5 justify-content-center pb-5">
  64.             <div class="col mt-5">
  65.                 <div class="card border-info">
  66.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  67.                     <div class="card-body p-4">
  68.                         <div class="text-center">
  69.                             <h5>Fancy Product</h5>
  70.                             <span class="text-decoration-line-through">$40.00 - $80.00</span> $25.00
  71.                             <div class="mt-4">
  72.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.             </div>
  78.             <div class="col mt-5">
  79.                 <div class="card border-info">
  80.                     <span class="badge bg-dark text-white position-absolute">Sale</span>   
  81.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  82.                     <div class="card-body p-4">
  83.                         <div class="text-center">
  84.                             <h5>Fancy Product</h5>
  85.                             <span>$40.00 - $80.00</span>
  86.                             <div class="mt-4">
  87.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  88.                             </div>
  89.                         </div>
  90.                     </div>
  91.                 </div>
  92.             </div>
  93.             <div class="col mt-5">
  94.                 <div class="card border-info">
  95.                     <span class="badge bg-primary text-white position-absolute">New</span>
  96.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  97.                     <div class="card-body p-4">
  98.                         <div class="text-center">
  99.                             <h5>Fancy Product</h5>
  100.                             <span>$40.00 - $80.00</span>
  101.                             <div class="mt-4">
  102.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  103.                             </div>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.             <div class="col mt-5">
  109.                 <div class="card border-info">
  110.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  111.                     <div class="card-body p-4">
  112.                         <div class="text-center">
  113.                             <h5>Fancy Product</h5>
  114.                             <span>$40.00 - $80.00</span>
  115.                             <div class="mt-4">
  116.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  117.                             </div>
  118.                         </div>
  119.                     </div>
  120.                 </div>
  121.             </div>
  122.             <div class="col mt-5">
  123.                 <div class="card border-info">
  124.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  125.                     <div class="card-body p-4">
  126.                         <div class="text-center">
  127.                             <h5>Fancy Product</h5>
  128.                             <span>$40.00 - $80.00</span>
  129.                             <div class="mt-4">
  130.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  131.                             </div>
  132.                         </div>
  133.                     </div>
  134.                 </div>
  135.             </div>
  136.             <div class="col mt-5">
  137.                 <div class="card border-info">
  138.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  139.                     <div class="card-body p-4">
  140.                         <div class="text-center">
  141.                             <h5>Fancy Product</h5>
  142.                             <span>$40.00 - $80.00</span>
  143.                             <div class="mt-4">
  144.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  145.                             </div>
  146.                         </div>
  147.                     </div>
  148.                 </div>
  149.             </div>
  150.             <div class="col mt-5">
  151.                 <div class="card border-info">
  152.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  153.                     <div class="card-body p-4">
  154.                         <div class="text-center">
  155.                             <h5>Fancy Product</h5>
  156.                             <span>$40.00 - $80.00</span>
  157.                             <div class="mt-4">
  158.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  159.                             </div>
  160.                         </div>
  161.                     </div>
  162.                 </div>
  163.             </div>
  164.             <div class="col mt-5">
  165.                 <div class="card border-info">
  166.                     <img src="http://placehold.it/450x300" alt="" class="card-img-top">
  167.                     <div class="card-body p-4">
  168.                         <div class="text-center">
  169.                             <h5>Fancy Product</h5>
  170.                             <span>$40.00 - $80.00</span>
  171.                             <div class="mt-4">
  172.                                 <a href="#" class="btn btn-outline-dark">View Options</a>
  173.                             </div>
  174.                         </div>
  175.                     </div>
  176.                 </div>
  177.             </div>
  178.         </div>
  179.     </div>
  180.  
  181.     <div class="container-fluid bg-dark text-white p-5 mt-5 text-center">
  182.         <div>
  183.             Copyright &copy; Your Website 2021
  184.         </div>
  185.     </div>
  186.  
  187.     <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>
  188.  
  189. </body>
  190. </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!