kuchuz

Tugas 3 PWEB-D index.html

Oct 27th, 2021
663
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
  8.     <link rel="stylesheet" href="style.css"/>
  9.     <title>Warung Tegal</title>
  10. </head>
  11. <body>
  12.     <div class="wrapper">
  13.         <header>
  14.             <h1>Warung Tegal</h1>
  15.             <nav>
  16.                 <ul>
  17.                     <li><a href="" class="current">Beranda</a></li>
  18.                     <li><a href="">Daftar Masakan</a></li>
  19.                     <li><a href="">Katering</a></li>
  20.                     <li><a href="">Tentang</a></li>
  21.                     <li><a href="">Kontak</a></li>
  22.                 </ul>
  23.             </nav>
  24.         </header>
  25.         <section class="slideshow">
  26.             <div class="slideshow-container">
  27.                 <div class="mySlides fade">
  28.                     <img src="img1.jpg" alt="Ayam Bakar" class="slideshow-img">
  29.                 </div>
  30.                 <div class="mySlides fade">
  31.                     <img src="img2.jpg" alt="Nasi Goreng" class="slideshow-img">
  32.                 </div>
  33.                 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  34.                 <a class="next" onclick="plusSlides(1)">&#10095;</a>
  35.             </div>
  36.             <br>
  37.             <div style="text-align:center">
  38.                 <span class="dot" onclick="currentSlide(1)"></span>
  39.                 <span class="dot" onclick="currentSlide(2)"></span>
  40.             </div>
  41.         </section>
  42.         <div class="container">
  43.             <section class="video">
  44.                 <article>
  45.                     <iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/KC32Q0l82N8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  46.                 </article>
  47.             </section>
  48.             <section class="courses">
  49.                 <article>
  50.                     <figure>
  51.                         <img src="img1.jpg" alt="ayam bakar" class="fig-img">
  52.                         <figcaption>Ayam Bakar</figcaption>
  53.                     </figure>
  54.                     <hgroup>
  55.                         <h2>Ayam Bakar</h2>
  56.                         <h3>Makanan</h3>
  57.                     </hgroup>
  58.                     <p>Dengan bumbu spesial yang menyerap hingga kedalam daging membuat tekstur ayam yang menjadi lembut dengan rasa khas yang penuh dengan cita rasa.</p>
  59.                 </article>
  60.                 <article>
  61.                     <figure>
  62.                         <img src="img2.jpg" alt="Nasi Goreng" class="fig-img">
  63.                         <figcaption>Nasi Goreng</figcaption>
  64.                     </figure>
  65.                     <hgroup>
  66.                         <h2>Nasi Goreng</h2>
  67.                         <h3>Makanan</h3>
  68.                     </hgroup>
  69.                     <p>Disajikan dengan bumbu khas nusantara membuat nasi goreng ini memiliki rasa yang khas dengan nuansa nusantara.</p>
  70.                 </article>
  71.             </section>
  72.         </div>
  73.         <aside>
  74.             <section class="popular-recipes">
  75.                 <h2>Masakan Populer</h2>
  76.                 <a href="">Nasi Goreng</a>
  77.                 <a href="">Ayam Bakar</a>
  78.                 <a href="">Ayam Penyet</a>
  79.                 <a href="">Ayam Lalapan</a>
  80.                 <a href="">Soto Ayam</a>
  81.                 <a href="">Pecel Lele</a>
  82.             </section>
  83.             <section class="contact-details">
  84.                 <h2>Kontak</h2>
  85.                 <p>Warung Tegal<br>
  86.                     di seluruh Indonesia</p>
  87.             </section>
  88.         </aside>
  89.         <footer>
  90.             &copy; 2021 Warung Tegal
  91.         </footer>
  92.     </div>
  93.     <script type="text/javascript" src="main.js"></script>
  94. </body>
  95. </html>
RAW Paste Data