API tools faq
paste
farfnd

index.html

farfnd
Sep 18th, 2021 (edited)
206
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.27 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>Home - Warung Tegal</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.                 <div class="title-container">
  19.                     <h1>Warung Tegal</h1>
  20.                     <hr class="solid">
  21.                     <h2>Warungnya Indonesia</h2>
  22.                 </div>
  23.             </div>
  24.             <nav>
  25.                 <ul>
  26.                     <li><a href="https://farfnd.github.io/pweb/03-html5/" class="current">beranda</a></li>
  27.                     <li><a href="daftar-makanan.html">daftar masakan</a></li>
  28.                     <li><a href="katering.html">katering</a></li>
  29.                     <li><a href="tentang.html">tentang</a></li>
  30.                     <li><a href="kontak.html">kontak</a></li>
  31.                 </ul>
  32.             </nav>
  33.         </header>
  34.         <!-- Slideshow container -->
  35.         <div class="slideshow-container">
  36.  
  37.             <!-- Full-width images with number and caption text -->
  38.             <div class="mySlides fade">
  39.                 <div class="numbertext">1 / 4</div>
  40.                 <img src="images/warteg.JPG" style="width:100%">
  41.                 <div class="text">Warung Tegal</div>
  42.             </div>
  43.  
  44.             <div class="mySlides fade">
  45.                 <div class="numbertext">2 / 4</div>
  46.                 <img src="images/soto.jpg" style="width:100%">
  47.                 <div class="text">Soto Ayam</div>
  48.             </div>
  49.  
  50.             <div class="mySlides fade">
  51.                 <div class="numbertext">3 / 4</div>
  52.                 <img src="images/pecel.jpg" style="width:100%">
  53.                 <div class="text">Pecel</div>
  54.             </div>
  55.  
  56.             <div class="mySlides fade">
  57.                 <div class="numbertext">4 / 4</div>
  58.                 <img src="images/lodeh.jpg" style="width:100%">
  59.                 <div class="text">Sayur Lodeh</div>
  60.             </div>
  61.  
  62.             <!-- Next and previous buttons -->
  63.             <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  64.             <a class="next" onclick="plusSlides(1)">&#10095;</a>
  65.         </div>
  66.         <br>
  67.  
  68.         <!-- The dots/circles -->
  69.         <div style="text-align:center">
  70.             <span class="dot" onclick="currentSlide(1)"></span>
  71.             <span class="dot" onclick="currentSlide(2)"></span>
  72.             <span class="dot" onclick="currentSlide(3)"></span>
  73.             <span class="dot" onclick="currentSlide(4)"></span>
  74.         </div>
  75.         <section class="menu">
  76.             <article>
  77.                 <figure>
  78.                     <img src="images/soto.jpg" alt="soto">
  79.                     <figcaption>Soto Indonesia</figcaption>
  80.                 </figure>
  81.                 <hgroup>
  82.                     <h2>Soto Ayam</h2>
  83.                     <h3>Makanan Berkuah</h3>
  84.                 </hgroup>
  85.                 <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna
  86.                     kekuningan.</p>
  87.             </article>
  88.             <article>
  89.                 <figure>
  90.                     <img src="images/pecel.jpg" alt="pecel">
  91.                     <figcaption>Pecel Indonesia</figcaption>
  92.                 </figure>
  93.                 <hgroup>
  94.                     <h2>Pecel</h2>
  95.                     <h3>Makanan dengan Bumbu Kacang</h3>
  96.                 </hgroup>
  97.                 <p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan
  98.                     aneka jenis sayuran.</p>
  99.             </article>
  100.             <article>
  101.                 <figure>
  102.                     <img src="images/lodeh.jpg" alt="lodeh">
  103.                     <figcaption>Sayur Lodeh</figcaption>
  104.                 </figure>
  105.                 <hgroup>
  106.                     <h2>Sayur Lodeh</h2>
  107.                     <h3>Makanan Berkuah</h3>
  108.                 </hgroup>
  109.                 <p>Sayur lodeh adalah masakan sayur yang berkuah santan khas Indonesia, terutama di daerah Jawa tengah,
  110.                     menggunakan bahan utama labu siam yang kerap dicampur bersama dengan kacang panjang, terung, petai,
  111.                     tempe, cabai, dan jagung kecil.</p>
  112.             </article>
  113.         </section>
  114.         <aside>
  115.             <section class="popular-recipes">
  116.                 <h2>Masakan Populer</h2>
  117.                 <a href="https://id.wikipedia.org/wiki/Soto_ayam" target="_blank">Sayur Sop</a>
  118.                 <a href="https://id.wikipedia.org/wiki/Sayur_asam" target="_blank">Sayur Asem</a>
  119.                 <a href="https://id.wikipedia.org/wiki/Sayur_lodeh" target="_blank">Sayur Lodeh</a>
  120.                 <a href="https://en.wikipedia.org/wiki/Sayur_bayam" target="_blank">Sayur Bayam</a>
  121.             </section>
  122.             <section class="contact-details">
  123.                 <h2>Warteg dalam CNN Indonesia</h2>
  124.                 <iframe style="width: 100%;" src="https://www.youtube.com/embed/XLJF0_yEYBg"
  125.                     title="YouTube video player" frameborder="0"
  126.                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  127.                     allowfullscreen></iframe>
  128.             </section>
  129.             <section class="contact-details">
  130.                 <h2>Kontak</h2>
  131.                 <p>Warung Tegal<br>
  132.                     di seluruh indonesia
  133.                 </p>
  134.             </section>
  135.         </aside>
  136.         <footer style="text-align: center;">
  137.             &copy; 2021 Warung Tegal
  138.         </footer>
  139.     </div>
  140. </body>
  141.  
  142. <script>
  143.     var slideIndex = 1;
  144.     showSlides(slideIndex);
  145.  
  146.     // Next/previous controls
  147.     function plusSlides(n) {
  148.         showSlides(slideIndex += n);
  149.     }
  150.  
  151.     // Thumbnail image controls
  152.     function currentSlide(n) {
  153.         showSlides(slideIndex = n);
  154.     }
  155.  
  156.     function showSlides(n) {
  157.         var i;
  158.         var slides = document.getElementsByClassName("mySlides");
  159.         var dots = document.getElementsByClassName("dot");
  160.         if (n > slides.length) { slideIndex = 1 }
  161.         if (n < 1) { slideIndex = slides.length }
  162.         for (i = 0; i < slides.length; i++) {
  163.             slides[i].style.display = "none";
  164.         }
  165.         for (i = 0; i < dots.length; i++) {
  166.             dots[i].className = dots[i].className.replace(" active", "");
  167.         }
  168.         slides[slideIndex - 1].style.display = "block";
  169.         dots[slideIndex - 1].className += " active";
  170.     }
  171. </script>
  172.  
  173. </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!