Web Warung Tegal (PWEB-B)
Nama : Stefanus Albert Kosim
NRP : 05111940000096
Kelas : PWEB-B
Pada kesempatan ini, saya akan menuliskan hasil dari tugas yang saya kerjakan. Dalam membuat web warung tegal ini, saya mengikuti kode yang ada di slide, kemudian menambahkan carousel serta video dari youtube di dalam carousel tersebut.
Preview:
HTML :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| header, section, footer, aside, nav, article, figure , figcaption { | |
| display: block; | |
| } | |
| body { | |
| color: #666666; | |
| background-color: #f9f8f6; | |
| background-image: url("images/dark-wood.jpg"); | |
| background-position: center; | |
| font-family: Georgia, 'Times New Roman', Times, serif; | |
| line-height: 1.4em; | |
| margin: 0px; | |
| } | |
| .wrapper { | |
| width: 940px; | |
| margin: 20px auto; | |
| border: 2px solid #000000; | |
| background-color: #ffffff; | |
| } | |
| header { | |
| height: 160px; | |
| background-image: url("images/header.png"); | |
| } | |
| h1 { | |
| text-indent: -9999px; | |
| width: 940px; | |
| height: 130px; | |
| margin: 0px; | |
| } | |
| nav, footer { | |
| clear: both; | |
| color: #ffffff; | |
| background-color: #aeaca8; | |
| height: 30px; | |
| } | |
| nav ul { | |
| margin: 0px; | |
| padding: 5px 0 5px 30px; | |
| } | |
| nav li { | |
| display: inline; | |
| margin-right: 40px; | |
| } | |
| nav li a { | |
| color: #ffffff; | |
| } | |
| nav li a:hover, nav li a.current { | |
| color: #000000; | |
| } | |
| section.courses { | |
| float: left; | |
| width: 659px; | |
| border-right: 1px solid #eeeeee; | |
| } | |
| article { | |
| clear: both; | |
| overflow: auto; | |
| width: 100%; | |
| } | |
| hgroup { | |
| margin-top: 40px; | |
| } | |
| figure { | |
| float: left; | |
| width: 290px; | |
| height: 220px; | |
| padding: 5px; | |
| margin: 20px; | |
| border: 1px solid #eeeeee; | |
| } | |
| figcaption { | |
| font-size: 90%; | |
| text-align: left; | |
| } | |
| aside { | |
| width: 230px; | |
| float: left; | |
| padding: 0 0 0 20px; | |
| } | |
| aside section a { | |
| display: block; | |
| padding: 10px; | |
| border-bottom: 1px solid #eeeeee; | |
| } | |
| aside section a:hover { | |
| color: #985d6a; | |
| background-color: #efefef; | |
| } | |
| a { | |
| color: #de6581; | |
| text-decoration: none; | |
| } | |
| h1, h2, h3 { | |
| font-weight: normal; | |
| } | |
| h2 { | |
| margin: 10px 0 5px 0; | |
| padding: 0px; | |
| } | |
| h3 { | |
| margin: 0 0 10px 0; | |
| color: #de6581; | |
| } | |
| aside h2 { | |
| padding: 30px 0 10px 0; | |
| color: #de6581; | |
| } | |
| footer { | |
| font-size: 80%; | |
| padding: 7px 0 0 20px; | |
| } | |
| /* carousel */ | |
| .slideshow-container { | |
| width: 100%; | |
| position: relative; | |
| margin: auto; | |
| } | |
| .containers { | |
| display: none; | |
| } | |
| .back, .forward { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 48%; | |
| width: auto; | |
| margin-top: -23px; | |
| padding: 17px; | |
| color: grey; | |
| font-weight: bold; | |
| font-size: 19px; | |
| transition: 0.4s ease; | |
| border-radius: 0 5px 5px 0; | |
| user-select: none; | |
| } | |
| .forward { | |
| right: 0; | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .back:hover, .forward:hover { | |
| background-color: rgba(0,0,0,0.8); | |
| } | |
| .MessageInfo { | |
| color: #f2f2f3; | |
| font-size: 14px; | |
| padding: 10px 14px; | |
| position: absolute; | |
| top: 0; | |
| } | |
| .fade { | |
| -webkit-animation-name: fade; | |
| -webkit-animation-duration: 1.4s; | |
| animation-name: fade; | |
| animation-duration: 1.4s; | |
| } | |
| @-webkit-keyframes fade { | |
| from {opacity: .5} | |
| to {opacity: 2} | |
| } | |
| @keyframes fade { | |
| from {opacity: .5} | |
| to {opacity: 2} | |
| } | |
| </style> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <header> | |
| <h1>Warung Tegal</h1> | |
| <nav> | |
| <ul> | |
| <li><a href="#" class="current">beranda</a></li> | |
| <li><a href="#">daftar masakan</a></li> | |
| <li><a href="#">katering</a></li> | |
| <li><a href="#">tentang</a></li> | |
| <li><a href="#">kontak</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="courses"> | |
| <div class="slideshow-container fade"> | |
| <div class="containers"> | |
| <div class="MessageInfo">1 / 3</div> | |
| <img src="images/soto.jpg" style="width: 100%;"> | |
| </div> | |
| <div class="containers"> | |
| <div class="MessageInfo">2 / 3</div> | |
| <img src="images/pecel.jpg" style="width: 100%;"> | |
| </div> | |
| <div class="containers"> | |
| <div class="MessageInfo">3 / 3</div> | |
| <iframe width="100%" height="428px" src="https://www.youtube.com/embed/fJfGNOvJbV0"></iframe> | |
| </div> | |
| <a class="back" onclick="pushSlides(-1)">❮</a> | |
| <a class="forward" onclick="pushSlides(1)">❯</a> | |
| </div> | |
| <article> | |
| <figure> | |
| <img src="images/soto.jpg" alt="soto"> | |
| <figcaption> | |
| Soto Indonesia | |
| </figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Soto Ayam</h2> | |
| <h3>Makanan Berkuah</h3> | |
| </hgroup> | |
| <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis | |
| sup ayam dengan kuah yang berwarna kekuningan.</p> | |
| </article> | |
| <article> | |
| <figure> | |
| <img src="images/pecel.jpg" alt="pecel"> | |
| <figcaption> | |
| Pecel Indonesia | |
| </figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Masakan Pecel</h2> | |
| <h3>Masakan dengan Bumbu Kacang</h3> | |
| </hgroup> | |
| <p>Pecel adalah makanan yang menggunakan bumbu sambal kacang | |
| sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p> | |
| </article> | |
| </section> | |
| <aside> | |
| <section class="popular-recipes"> | |
| <h2>Masakan Populer</h2> | |
| <a href="#">Sayur Sop</a> | |
| <a href="#">Sayur Asem</a> | |
| <a href="#">Sayur Lodeh</a> | |
| <a href="#">Sayur Bayam</a> | |
| </section> | |
| <section class="contact-details"> | |
| <h2>Kontak</h2> | |
| <p>Warung Tegal<br>di seluruh Indonesia</p> | |
| </section> | |
| </aside> | |
| <footer> | |
| © 2015 Warung Tegal | |
| </footer> | |
| </div> | |
| <script> | |
| var slidePosition = 1; | |
| SlideShow(slidePosition); | |
| // forward and back controller | |
| function pushSlides(n) { | |
| SlideShow(slidePosition += n); | |
| } | |
| // images controller | |
| function currentSlide(n) { | |
| SlideShow(slidePosition = n); | |
| } | |
| function SlideShow(n) { | |
| var i; | |
| var slides = document.getElementsByClassName("containers"); | |
| if(n > slides.length) { | |
| slidePosition = 1; | |
| } | |
| if(n < 1) { | |
| slidePosition = slides.length; | |
| } | |
| for(i=0; i<slides.length; i++) { | |
| slides[i].style.display = "none"; | |
| } | |
| slides[slidePosition-1].style.display = "block"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Komentar
Posting Komentar