API tools faq
paste
farfnd

index.html

farfnd
Sep 28th, 2021 (edited)
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  6.     <title>Ini Toko Baju</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <link rel="stylesheet" href="slider.css">
  9.     <!--[if lt IE 9]>
  10.     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11.     <![endif]-->
  12. </head>
  13.  
  14. <body>
  15.     <div class="wrapper">
  16.         <header>
  17.             <div class="title">
  18.                 <a href="https://farfnd.github.io/pweb/04-css/">
  19.                     <h1>Ini Toko Baju</h1>
  20.                 </a>
  21.             </div>
  22.             <nav>
  23.                 <ul>
  24.                     <li><a href="https://farfnd.github.io/pweb/04-css/" class="current">Home</a></li>
  25.                     <li><a href="#">Products</a></li>
  26.                     <li><a href="#">About</a></li>
  27.                     <li><a href="#">Contact</a></li>
  28.                 </ul>
  29.             </nav>
  30.         </header>
  31.         <!-- Slideshow container -->
  32.         <div class="slideshow-container">
  33.  
  34.             <!-- Full-width images with number and caption text -->
  35.             <div class="mySlides fade">
  36.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/08/S__13287430.jpg">
  37.             </div>
  38.  
  39.             <div class="mySlides fade">
  40.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/08/S__13385748.jpg">
  41.             </div>
  42.  
  43.             <div class="mySlides fade">
  44.                 <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/07/12289494020432.jpg"
  45.                     style="width:100%">
  46.             </div>
  47.  
  48.             <!-- Next and previous buttons -->
  49.             <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  50.             <a class="next" onclick="plusSlides(1)">&#10095;</a>
  51.         </div>
  52.         <br>
  53.  
  54.         <!-- The dots/circles -->
  55.         <div style="text-align:center">
  56.             <span class="dot" onclick="currentSlide(1)"></span>
  57.             <span class="dot" onclick="currentSlide(2)"></span>
  58.             <span class="dot" onclick="currentSlide(3)"></span>
  59.         </div>
  60.  
  61.         <div class="main">
  62.             <section class="menu">
  63.                 <h2>Most Popular</h2>
  64.                 <article>
  65.                     <table>
  66.                         <tbody>
  67.                             <tr>
  68.                                 <td class="image">
  69.                                     <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/06/katalog-square-2-1-300x300.jpg"
  70.                                         alt="">
  71.                                 </td>
  72.                                 <td class="description">
  73.                                     <a href="#">
  74.                                         <h2>Quotes Tee</h2>
  75.                                     </a>
  76.                                     <p>A comfortable tee with inspirational quotes for your daily activities.</p>
  77.                                     <h4>Rp150.000</h4>
  78.                                     <a href="#" class="btn">Checkout</a>
  79.                                 </td>
  80.                             </tr>
  81.                         </tbody>
  82.                     </table>
  83.                 </article>
  84.                 <article>
  85.                     <table>
  86.                         <tbody>
  87.                             <tr>
  88.                                 <td class="image">
  89.                                     <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/05/leno-square-1-300x300.jpg"
  90.                                         alt="">
  91.                                 </td>
  92.                                 <td class="description">
  93.                                     <a href="#">
  94.                                         <h2>Leno Army Tee</h2>
  95.                                     </a>
  96.                                     <p>A comfortable army-colored tee with collars.</p>
  97.                                     <h4>Rp200.000</h4>
  98.                                     <a href="#" class="btn">Checkout</a>
  99.                                 </td>
  100.                             </tr>
  101.                         </tbody>
  102.                     </table>
  103.                 </article>
  104.                 <article>
  105.                     <table>
  106.                         <tbody>
  107.                             <tr>
  108.                                 <td class="image">
  109.                                     <img src="https://www.hanakaclassic.com/wp-content/uploads/2020/10/131-300x300.jpg"
  110.                                         alt="">
  111.                                 </td>
  112.                                 <td class="description">
  113.                                     <a href="#">
  114.                                         <h2>Corduroy Jacket</h2>
  115.                                     </a>
  116.                                     <p>A brown corduroy jacket, suitable for any kind of fashion style.</p>
  117.                                     <h4>Rp450.000</h4>
  118.                                     <a href="#" class="btn">Checkout</a>
  119.                                 </td>
  120.                             </tr>
  121.                         </tbody>
  122.                     </table>
  123.                 </article>
  124.                 <article>
  125.                     <table>
  126.                         <tbody>
  127.                             <tr>
  128.                                 <td class="image">
  129.                                     <img src="https://www.hanakaclassic.com/wp-content/uploads/2021/03/LP-square-8-300x300.jpg"
  130.                                         alt="">
  131.                                 </td>
  132.                                 <td class="description">
  133.                                     <a href="#">
  134.                                         <h2>Baggy Pants Black</h2>
  135.                                     </a>
  136.                                     <p>A fit straight cut baggy pants, designed for comfort with the best material.</p>
  137.                                     <h4>Rp250.000</h4>
  138.                                     <a href="#" class="btn">Checkout</a>
  139.                                 </td>
  140.                             </tr>
  141.                         </tbody>
  142.                     </table>
  143.                 </article>
  144.             </section>
  145.             <aside>
  146.                 <section>
  147.                     <h2>Categories</h2>
  148.                     <a href="#">T-Shirt</a>
  149.                     <a href="#">Shirt</a>
  150.                     <a href="#">Jacket</a>
  151.                     <a href="#">Hoodie</a>
  152.                     <a href="#">Trousers</a>
  153.                 </section>
  154.             </aside>
  155.         </div>
  156.         <footer>
  157.             &copy; 2021 Ini Toko Baju by <a href="https://farfnd.github.io">FA</a>
  158.         </footer>
  159.     </div>
  160. </body>
  161.  
  162. <script>
  163.     var slideIndex = 1;
  164.     showSlides(slideIndex);
  165.  
  166.     // Next/previous controls
  167.     function plusSlides(n) {
  168.         showSlides(slideIndex += n);
  169.     }
  170.  
  171.     // Thumbnail image controls
  172.     function currentSlide(n) {
  173.         showSlides(slideIndex = n);
  174.     }
  175.  
  176.     function showSlides(n) {
  177.         var i;
  178.         var slides = document.getElementsByClassName("mySlides");
  179.         var dots = document.getElementsByClassName("dot");
  180.         if (n > slides.length) { slideIndex = 1 }
  181.         if (n < 1) { slideIndex = slides.length }
  182.         for (i = 0; i < slides.length; i++) {
  183.             slides[i].style.display = "none";
  184.         }
  185.         for (i = 0; i < dots.length; i++) {
  186.             dots[i].className = dots[i].className.replace(" active", "");
  187.         }
  188.         slides[slideIndex - 1].style.display = "block";
  189.         dots[slideIndex - 1].className += " active";
  190.     }
  191. </script>
  192.  
  193. </html>
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!