document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Web Warung Tegal</title>
  5.         <style type="text/css">
  6.             header, section, footer, aside, nav, article, figure, figcaption {
  7.                 display: block;}
  8.             body {
  9.                 color: #666666;
  10.                 background-color: #ede2dc;
  11.                 background-image: url("https://images.pexels.com/photos/235994/pexels-photo-235994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  12.                 background-position: center;
  13.                 background-size: auto;
  14.                 font-family: Georgia, Times, serif;
  15.                 line-height: 1.4em;
  16.                 margin: 0px;}
  17.             .wrapper {
  18.                 width: 940px;
  19.                 margin: 20px auto 20px auto;
  20.                 border: 2px solid #000000;
  21.                 background-color: #ffffff;}
  22.             header {
  23.                 height: 160px;
  24.                 background-image: url(warteg.png);}
  25.             h1 {
  26.                 text-indent: -9999px;
  27.                 width: 940px;
  28.                 height: 130px;
  29.                 margin: 0px;}
  30.             nav, footer {
  31.                 clear: both;
  32.                 color: #ffffff;
  33.                 background-color: #aeaca8;
  34.                 height: 30px;}
  35.             nav ul {
  36.                 margin: 0px;
  37.                 padding: 5px 0px 5px 30px;}
  38.             nav li {
  39.                 display: inline;
  40.                 margin-right: 40px;}
  41.             nav li a {
  42.                 color: #ffffff;}
  43.             nav li a:hover, nav li a.current {
  44.                 color: #000000;}
  45.             section.courses {
  46.                 float: left;
  47.                 width: 659px;
  48.                 border-right: 1px solid #eeeeee;}
  49.             article {
  50.                 clear: both;
  51.                 overflow: auto;
  52.                 width: 100%;}
  53.             hgroup {
  54.                 margin-top: 40px;}
  55.             figure {
  56.                 float: left;
  57.                 width: 290px;
  58.                 height: 220px;
  59.                 padding: 5px;
  60.                 margin: 20px;
  61.                 border: 1px solid #eeeeee;}
  62.             figcaption {
  63.                 font-size: 90%;
  64.                 text-align: left;}
  65.             aside {
  66.                 width: 230px;
  67.                 float: left;
  68.                 padding: 0px 0px 0px 20px;}
  69.             aside section a {
  70.                 display: block;
  71.                 padding: 10px;
  72.                 border-bottom: 1px solid #eeeeee;}
  73.             aside section a:hover {
  74.                 color: #985d6a;
  75.                 background-color: #efefef;}
  76.             a {
  77.                 color: #de6581;
  78.                 text-decoration: none;}
  79.             h1, h2, h3 {
  80.                 font-weight: normal;}
  81.             h2 {
  82.                 margin: 10px 0px 5px 0px;
  83.                 padding: 0px;}
  84.             h3 {
  85.                 margin: 0px 0px 10px 0px;
  86.                 color: #de6581;}
  87.             aside h2 {
  88.                 padding: 30px 0px 10px 0px;
  89.                 color: #de6581;}
  90.             footer {
  91.                 font-size: 80%;
  92.                 padding: 7px 0px 0px 20px;}
  93.         </style>
  94.     </head>
  95.     <body>
  96.         <div class="wrapper">
  97.             <header>
  98.                 <h1>Warung Tegal</h1>
  99.                 <nav>
  100.                     <ul>
  101.                         <li><a href="" class="current">Beranda</a></li>
  102.                         <li><a href="">Daftar Masakan</a></li>
  103.                         <li><a href="">Katering</a></li>
  104.                         <li><a href="">Tentang</a></li>
  105.                         <li><a href="">Kontak</a></li>
  106.                     </ul>
  107.                 </nav>
  108.             </header>
  109.             <section class="courses">
  110.                 <article>
  111.                     <figure>
  112.                         <img width=290 height=190 src="https://piknikdong.com/wp-content/uploads/2020/05/Resep-Soto-Ayam-Enak-dan-Mudah.jpg" alt="soto" />
  113.                         <figcaption>Soto Indonesia</figcaption>
  114.                     </figure>
  115.                     <hgroup>
  116.                         <h2>Soto Ayam</h2>
  117.                         <h3>Makanan Berkuah</h3>
  118.                     </hgroup>
  119.                     <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
  120.                 </article>    
  121.                 <article>
  122.                     <figure>
  123.                         <img width=290 height=190 src="https://asset.kompas.com/crops/etxkCgz_0N5ZbdP6YGJScpobPVk=/60x23:959x622/750x500/data/photo/2020/11/05/5fa3f16d9c1cf.jpg" alt="pecel" />
  124.                         <figcaption>Pecel Indonesia</figcaption>
  125.                     </figure>
  126.                     <hgroup>
  127.                         <h2>Masakan Pecel</h2>
  128.                         <h3>Makanan dengan Bumbu Kacang</h3>
  129.                     </hgroup>
  130.                     <p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
  131.                 </article>    
  132.             </section>
  133.             <aside>
  134.                 <section class="popular-recipes">
  135.                     <h2>Masakan Populer</h2>
  136.                     <a href="">Sayur Sop</a>
  137.                     <a href="">Sayur Asem</a>
  138.                     <a href="">Sayur Lodeh</a>
  139.                     <a href="">Sayur Bayam</a>
  140.                 </section>
  141.                 <section class="contact-details">
  142.                     <h2>Kontak</h2>
  143.                     <p>Warung Tegal<br />
  144.                         di seluruh indonesia
  145.                 </section>
  146.             </aside>
  147.             <footer>
  148.                 &copy; 2015 Warung Tegal
  149.             </footer>
  150.         </div>
  151.     </body>
  152. </html>
');