API tools faq
paste
Advertisement
mnaufaldillah

HTML tugas 3

mnaufaldillah
Sep 18th, 2021
227
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.80 KB | None | 0 0
raw download clone embed print report
  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: #f9f8f6;
  11.                 background-image: url("images/dark-wood.jpg");
  12.                 background-position: center;
  13.                 font-family: Georgia, Times, serif;
  14.                 line-height: 1.4em;
  15.                 margin: 0px;}
  16.             .wrapper {
  17.                 width: 940px;
  18.                 margin: 20px auto 20px auto;
  19.                 border: 2px solid #000000;
  20.                 background-color: #ffffff;}
  21.             header {
  22.                 height: 160px;
  23.                 background-image: url(images/header.png);
  24.                 background-size: contain;
  25.             }
  26.             h1 {
  27.                 text-indent: -9999px;
  28.                 width: 940px;
  29.                 height: 130px;
  30.                 margin: 0px;}
  31.             nav, footer {
  32.                 clear: both;
  33.                 color: #ffffff;
  34.                 background-color: #aeaca8;
  35.                 height: 30px;}
  36.             nav ul {
  37.                 margin: 0px;
  38.                 padding: 5px 0px 5px 30px;}
  39.             nav li {
  40.                 display: inline;
  41.                 margin-right: 40px;}
  42.             nav li a {
  43.                 color: #ffffff;}
  44.             nav li a:hover, nav li a.current {
  45.                 color: #000000;
  46.             }
  47.             section.courses {
  48.                 float: left;
  49.                 width: 659px;
  50.                 border-right: 1px solid #eeeeee;}
  51.             article {
  52.                 clear: both;
  53.                 overflow: auto;
  54.                 width: 100%;}
  55.             hgroup {
  56.                 margin-top: 40px;}
  57.             figure {
  58.                 float: left;
  59.                 width: 290px;
  60.                 height: 220px;
  61.                 padding: 5px;
  62.                 margin: 20px;
  63.                 border: 1px solid #eeeeee;}
  64.             figcaption {
  65.                 font-size: 90%;
  66.                 text-align: left;}
  67.             aside {
  68.                 width: 230px;
  69.                 float: left;
  70.                 padding: 0px 0px 0px 20px;}
  71.             aside section a {
  72.                 display: block;
  73.                 padding: 10px;
  74.                 border-bottom: 1px solid #eeeeee;}
  75.             aside section a:hover {
  76.                 color: #985d6a;
  77.                 background-color: #efefef;
  78.             }
  79.             a {
  80.                 color: #de6581;
  81.                 text-decoration: none;}
  82.             h1, h2, h3 {
  83.                 font-weight: normal;
  84.             }
  85.             h2 {
  86.                 margin: 10px 0px 5px 0px;
  87.                 padding: 0px;}
  88.             h3 {
  89.                 margin: 0px 0px 10px 0px;
  90.                 color: #de6581;}
  91.             aside h2 {
  92.                 padding: 30px 0px 10px 0px;
  93.                 color: #de6581;}
  94.             footer {
  95.                 font-size: 80%;
  96.                 padding: 7px 0px 0px 20px;}
  97.             .slider {
  98.                 width: 200px;
  99.                 height: 150px;
  100.                 background: url(images/soto.jpg);
  101.                 background-size: contain;
  102.                 margin: 10px auto;
  103.                 animation: slide 20s infinite;}
  104.             @keyframes slide {
  105.                 25%{
  106.                     background: url(images/pecel.jpg);
  107.                     background-size: contain;
  108.                 }
  109.                 50%{
  110.                     background: url(images/martabak.jpg);
  111.                     background-size: contain;
  112.                 }
  113.                 75%{
  114.                     background: url(images/martabak.jpg);
  115.                     background-size: contain;
  116.                 }
  117.                 100%{
  118.                     background: url(images/nasgor.jpeg);
  119.                     background-size: contain;
  120.                 }
  121.             }
  122.         </style>
  123.     </head>
  124.     <body>
  125.         <div class="wrapper">
  126.             <header>
  127.                 <h1>Warung Tegal</h1>
  128.                 <nav>
  129.                     <ul>
  130.                         <li><a href="" class="current">beranda</a></li>
  131.                         <li><a href="">katering</a></li>
  132.                         <li><a href="">tentang</a></li>
  133.                         <li><a href="">kontak</a></li>
  134.                     </ul>
  135.                 </nav>
  136.             </header>
  137.             <section class="courses">
  138.                 <article>
  139.                     <figure>
  140.                         <img src="images/soto.jpg" alt="soto" height="220" width="290" />
  141.                         <figcaption>Soto Indonesia</figcaption>
  142.                     </figure>
  143.                     <hgroup>
  144.                         <h2>Soto Ayam</h2>
  145.                         <h3>Makanan Berkuah</h3>
  146.                     </hgroup>
  147.                     <p>
  148.                         Soto ayam adalah makanan khas Indonesia yang berupa
  149.                         sejenis sup ayam dengan kuah yang berwarna kekuningan
  150.                     </p>
  151.                 </article>
  152.                 <article>
  153.                     <figure>
  154.                         <img src="images/pecel.jpg" alt="pecel" height="220" width="290" />
  155.                         <figcaption>Pecel Indonesia</figcaption>
  156.                     </figure>
  157.                     <hgroup>
  158.                         <h2>Masakan Pecel</h2>
  159.                         <h3>Makanan dengan Bumbu Kacang</h3>
  160.                     </hgroup>
  161.                     <p>
  162.                         Soto ayam adalah makanan khas Indonesia yang berupa
  163.                         sejenis sup ayam dengan kuah yang berwarna kekuningan
  164.                     </p>
  165.                 </article>
  166.             </section>
  167.             <aside>
  168.                 <section class="popular-recipes">
  169.                     <h2>Masakan Populer</h2>
  170.                     <a href="https://cookpad.com/id/resep/1465145-sayur-sop-sederhana">Sayur Sop</a>
  171.                     <a href="https://cookpad.com/id/resep/2497574-sayur-asem-bumbu-uleg">Sayur Asem</a>
  172.                     <a href="https://cookpad.com/id/resep/3148300-sayur-lodeh-komplit">Sayur Lodeh</a>
  173.                     <a href="https://cookpad.com/id/resep/262968-sayur-bayam-bening">Sayur Bayam</a>
  174.                 </section>
  175.                 <section class="contact-details">
  176.                     <h2>Kontak</h2>
  177.                     <p>
  178.                         Warung Tegal<br />
  179.                         di seluruh indonesia
  180.                     </p>
  181.                 </section>
  182.                 <div class="slider">
  183.  
  184.                 </div>
  185.             </aside>
  186.             <footer>
  187.                 &copy; 2015 Warung Tegal
  188.             </footer>
  189.         </div><!-- .wrapper -->
  190.     </body>
  191. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!