API tools faq
paste
farfnd

index.html

farfnd
Oct 19th, 2021 (edited)
118
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   <meta charset="utf-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <title>Ini Toko Baju</title>
  9.  
  10.   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  11.   <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
  12.  
  13.   <style>
  14.     body {
  15.       padding-top: 3rem;
  16.       padding-bottom: 3rem;
  17.       color: #5a5a5a;
  18.     }
  19.  
  20.     .carousel-item {
  21.       height: 32rem;
  22.     }
  23.  
  24.     .carousel-item img {
  25.       position: absolute;
  26.       top: 0;
  27.       left: 0;
  28.       min-width: 100%;
  29.       height: 32rem;
  30.       object-fit: cover;
  31.     }
  32.  
  33.     .card img {
  34.       object-fit: cover;
  35.       max-width: 100%;
  36.     }
  37.   </style>
  38. </head>
  39.  
  40. <body class="pb-0">
  41.   <header>
  42.     <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  43.       <div class="container-fluid">
  44.         <a class="navbar-brand" href="#">
  45.           <img src="https://farfnd.github.io/assets/images/FAnewgrey.png" alt="" width="30" class="d-inline-block align-text-top">
  46.           Ini Toko Baju
  47.         </a>
  48.         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  49.           <span class="navbar-toggler-icon"></span>
  50.         </button>
  51.         <div class="collapse navbar-collapse" id="navbarCollapse">
  52.           <ul class="navbar-nav me-auto mb-2 mb-md-0">
  53.             <li class="nav-item">
  54.               <a class="nav-link active" aria-current="page" href="/">Home</a>
  55.             </li>
  56.             <li class="nav-item dropdown">
  57.               <a class="nav-link dropdown-toggle" href="/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  58.                 Categories
  59.               </a>
  60.               <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  61.                 <li><a class="dropdown-item" href="#">Men</a></li>
  62.                 <li><a class="dropdown-item" href="#">Women</a></li>
  63.                 <li><a class="dropdown-item" href="#">Kids</a></li>
  64.               </ul>
  65.             </li>
  66.             <li class="nav-item">
  67.               <a class="nav-link" href="/contact.html">Contact</a>
  68.             </li>
  69.           </ul>
  70.           <div class="col-md-6 text-end">
  71.               <button class="btn btn-outline-light" type="button">
  72.                   <i class="bi-cart-fill me-1 text-white"></i>
  73.                   Cart
  74.                   <span class="badge bg-light text-dark ms-1 rounded-pill" id="jumlah_barang">0</span>
  75.               </button>
  76.               <a class="btn btn-outline-primary me-2 btn-light" href="/login.html">Log in</a>
  77.               <a class="btn btn-primary" href="/signup.html">Sign up</a>
  78.           </div>
  79.         </div>
  80.       </div>
  81.     </nav>
  82.   </header>
  83.  
  84.   <main>
  85.     <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  86.       <div class="carousel-indicators">
  87.         <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-label="Slide 1" aria-current="true"></button>
  88.         <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2" class=""></button>
  89.         <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3" class=""></button>
  90.       </div>
  91.       <div class="carousel-inner">
  92.         <div class="carousel-item active">
  93.           <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/08/S__13385748.jpg" class="d-block w-100" alt="placeholder">
  94.         </div>
  95.         <div class="carousel-item">
  96.           <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/08/S__13287430.jpg" class="d-block w-100" alt="placeholder">
  97.         </div>
  98.         <div class="carousel-item">
  99.           <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/07/12289494020432.jpg" class="d-block w-100" alt="placeholder">
  100.         </div>
  101.       </div>
  102.       <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
  103.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  104.         <span class="visually-hidden">Previous</span>
  105.       </button>
  106.       <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
  107.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  108.         <span class="visually-hidden">Next</span>
  109.       </button>
  110.     </div>
  111.  
  112.     <div class="album py-5 bg-light">
  113.       <div class="container">
  114.         <h2 class="display-5 fw-bold mb-3">Most popular</h2>
  115.         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
  116.           <div class="col d-flex">
  117.             <div class="card mb-3" style="max-width: 540px;">
  118.               <div class="row g-0 h-100">
  119.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/06/katalog-square-2-1-300x300.jpg" class="img-fluid rounded-start col-md-6" alt="Tee 1">
  120.                 <div class="col-md-6">
  121.                   <div class="card-body">
  122.                     <h5 class="card-title">Quotes Tee</h5>
  123.                     <p class="card-text">A comfortable tee with inspirational quotes for your daily activities.</p>
  124.                     <p>Rp150.000</p>
  125.                     <button type="button" class="btn btn-outline-primary me-2 btn-light" onclick="addToCart()">Add to Cart</button>
  126.                   </div>
  127.                 </div>
  128.               </div>
  129.             </div>
  130.           </div>
  131.           <div class="col d-flex">
  132.             <div class="card mb-3" style="max-width: 540px;">
  133.               <div class="row g-0 h-100">
  134.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/05/leno-square-1-300x300.jpg" class="img-fluid rounded-start col-md-6" alt="Tee 2">
  135.                 <div class="col-md-6">
  136.                   <div class="card-body">
  137.                     <h5 class="card-title">Leno Army Tee</h5>
  138.                     <p class="card-text">A comfortable army-colored tee with collars.</p>
  139.                     <p>Rp200.000</p>
  140.                     <button type="button" class="btn btn-outline-primary me-2 btn-light" onclick="addToCart()">Add to Cart</button>
  141.                   </div>
  142.                 </div>
  143.               </div>
  144.             </div>
  145.           </div>
  146.           <div class="col d-flex">
  147.             <div class="card mb-3" style="max-width: 540px;">
  148.               <div class="row g-0 h-100">
  149.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/10/131-300x300.jpg" class="img-fluid rounded-start col-md-6" alt="Tee 1">
  150.                 <div class="col-md-6">
  151.                   <div class="card-body">
  152.                     <h5 class="card-title">Corduroy Jacket</h5>
  153.                     <p class="card-text">A brown corduroy jacket, suitable for any kind of fashion style.</p>
  154.                     <p>Rp450.000</p>
  155.                     <button type="button" class="btn btn-outline-primary me-2 btn-light" onclick="addToCart()">Add to Cart</button>
  156.                   </div>
  157.                 </div>
  158.               </div>
  159.             </div>
  160.           </div>
  161.           <div class="col d-flex">
  162.             <div class="card mb-3" style="max-width: 540px;">
  163.               <div class="row g-0 h-100">
  164.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/03/LP-square-8-300x300.jpg" class="img-fluid rounded-start col-md-6" alt="Tee 1">
  165.                 <div class="col-md-6">
  166.                   <div class="card-body">
  167.                     <h5 class="card-title">Baggy Pants Black</h5>
  168.                     <p class="card-text">A fit straight cut baggy pants, designed for comfort with the best material.</p>
  169.                     <p>Rp250.000</p>
  170.                     <button type="button" class="btn btn-outline-primary me-2 btn-light" onclick="addToCart()">Add to Cart</button>
  171.                   </div>
  172.                 </div>
  173.               </div>
  174.             </div>
  175.           </div>
  176.           <div class="col d-flex">
  177.             <div class="card mb-3" style="max-width: 540px;">
  178.               <div class="row g-0 h-100">
  179.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/06/5-300x300.jpg" class="img-fluid rounded-start col-md-6" alt="Tee 2">
  180.                 <div class="col-md-6">
  181.                   <div class="card-body">
  182.                     <h5 class="card-title">Red Flower Shirt</h5>
  183.                     <p class="card-text">A beautiful shot shirt with red flower motifs.</p>
  184.                     <p>Rp300.000</p>
  185.                     <button type="button" class="btn btn-outline-primary me-2 btn-light" onclick="addToCart()">Add to Cart</button>
  186.                   </div>
  187.                 </div>
  188.               </div>
  189.             </div>
  190.           </div>
  191.           <div class="col d-flex">
  192.             <div class="card mb-3" style="max-width: 540px;">
  193.               <div class="row g-0 h-100">
  194.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/05/tb-sq-6-300x300.jpg" class="img-fluid rounded-start col-md-6" alt="Tee 1">
  195.                 <div class="col-md-6">
  196.                   <div class="card-body">
  197.                     <h5 class="card-title">Confidence Totebag</h5>
  198.                     <p class="card-text">A cool totebag for your daily needs.</p>
  199.                     <p>Rp150.000</p>
  200.                     <button type="button" class="btn btn-outline-primary me-2 btn-light" onclick="addToCart()">Add to Cart</button>
  201.                   </div>
  202.                 </div>
  203.               </div>
  204.             </div>
  205.           </div>
  206.         </div>
  207.       </div>
  208.     </div>
  209.  
  210.     <footer class="text-muted py-5">
  211.       <div class="container">
  212.         <p class="float-end mb-1">
  213.           <a href="#">Back to top</a>
  214.         </p>
  215.        
  216.         <p class="text-dark">
  217.           Ini Toko Baju &copy; <a href="https://farfnd.github.io" style="text-decoration: none;">FA</a> 2021.
  218.         </p>
  219.        
  220.       </div>
  221.     </footer>
  222.   </main>
  223.  
  224.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  225.   <script>
  226.     function addToCart() {
  227.       document.getElementById('jumlah_barang').innerHTML = parseInt(document.getElementById('jumlah_barang').innerHTML) + 1;
  228.     }
  229.   </script>
  230. </body>
  231. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!