Langsung ke konten utama

Tugas 3 Pemrograman Web A

Warung Tegal HTML 5

Nama   : Jonathan Leonardo Hasiholan Simanjuntak
NRP     : 05111940000150
Kelas    : Pemrograman Web A 2021

Pada pertemuan ketiga kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website rumah makan "Warung Tegal" dengan memanfaatkan HTML5. Kami juga diminta untuk menambahkan image carousel dan video player pada website yang akan kami kembangkan. Adapun hasilnya dapat di akses lewat Warung Tegal Website.

Berikut adalah tampilan dari hasilnya :
  1. Tampilan Beranda



  2. Tampilan Daftar Masakan


  3. Tampilan Katering


  4. Tampilan Tentang


  5. Tampilan Kontak

Source Code

Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Di dalam setiap file HTML, terdapat masing - masing styling yang digunakan untuk halaman tersebut. Berikut source code dari kelima tampilan diatas :
  1. Halaman Beranda
    <!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">
    <title>Web Warung Tegal</title>
    <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, serif;
    line-height: 1.4em;
    margin: 0px;
    }
    .wrapper {
    width: 940px;
    margin: 20px auto 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 0px 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: 0px 0px 0px 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 0px 5px 0px;
    padding: 0px;
    }
    h3 {
    margin: 0px 0px 10px 0px;
    color: #de6581;
    }
    aside h2 {
    padding: 30px 0px 10px 0px;
    color: #de6581;
    }
    footer {
    font-size: 80%;
    padding: 7px 0px 0px 20px;
    }
    .needshadow{
    text-shadow:
    -1px -1px black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    }
    .unset{
    all: unset;
    }
    .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    overflow: hidden;
    }
    /* Caption text */
    .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }
    /* Number text (1/3 etc) */
    .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }
    /* The dots/bullets/indicators */
    .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }
    .active {
    background-color: #717171;
    }
    /* Fading animation */
    .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    }
    @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }
    @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <header>
    <h1>Warung Tegal</h1>
    <nav>
    <ul>
    <li><a href="index.html" class="current">Beranda</a></li>
    <li><a href="content/food-list.html">Daftar Masakan</a></li>
    <li><a href="content/catering.html">Katering</a></li>
    <li><a href="content/about.html">Tentang</a></li>
    <li><a href="content/contact.html">Kontak</a></li>
    </ul>
    </nav>
    </header>
    <section class="courses">
    <article>
    <figure>
    <img src="images/soto.jpg" alt="soto" style="width: 278px; height:198px">
    <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" style="width:278px; height:198px">
    <figcaption>Pecel Indonesia</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Pecel</h2>
    <h3>Makanan 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>
    <article>
    <br><br>
    <h2 style="text-align: center;">Masakan Lainnya</h2>
    <br>
    <!-- <div id = "myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" style="background-color: #f9f8f6;">
    <div class="item active">
    <img src="images\ayambakar.jpg" alt="Ayam Bakar" style="width:450px; height:200px; display: block; margin-left: auto; margin-right: auto;" >
    <div class="carousel-caption">
    <h3 class="needshadow" style="color: #ffffff;">Ayam Bakar</h3>
    </div>
    </div>
    <div class="item">
    <img src="images\cumiasin.jpg" alt="Cumi Pedas Asin" style="width:450px; height:200px; display: block; margin-left: auto; margin-right: auto;">
    <div class="carousel-caption">
    <h3 class="needshadow" style="color: #ffffff;">Cumi Pedas Asin</h3>
    </div>
    </div>
    <div class="item">
    <img src="images\ikanbalado.jpg" alt="Ikan Tongkol Balado" style="width:450px; height: 200px; display: block; margin-left: auto; margin-right: auto;">
    <div class="carousel-caption">
    <h3 class="needshadow" style="color: #ffffff;">Ikan Tongkol Balado</h3>
    </div>
    </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
    </a>
    </div> -->
    <!-- <div class="w3-content" style="max-width:400px">
    <div class="mySlides w3-container w3-red">
    <h1><b>Did You Know?</b></h1>
    <h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
    </div>
    <img class="mySlides" src="img_monterosso.jpg" style="width:100%">
    <div class="mySlides w3-container w3-xlarge w3-white w3-card-4">
    <p><span class="w3-tag w3-yellow">New!</span>
    <p>6 Crystal Glasses</p>
    <p>Only $99 !!!</p>
    </div>
    <img class="mySlides" src="img_manarola.jpg" style="width:100%">
    </div> -->
    <div class="slideshow-container">
    <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="images\cumiasin.jpg" alt="Cumi Pedas Asin" style="width:450px; height:200px; display: block; margin-left: auto; margin-right: auto;" >
    <div class="text"><p class="needshadow">Cumi Pedas Asin</p></div>
    </div>
    <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="images\ayambakar.jpg" alt="Ayam Bakar" style="width:450px; height:200px; display: block; margin-left: auto; margin-right: auto;" >
    <div class="text"><p class="needshadow">Ayam Bakar</p></div>
    </div>
    <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="images\ikanbalado.jpg" alt="Ikan Tongkol Balado" style="width:450px; height: 200px; display: block; margin-left: auto; margin-right: auto;">
    <div class="text"><p class="needshadow">Ikan Tongkol Balado</p></div>
    </div>
    </div>
    <br>
    <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>
    <br>
    <br>
    </article>
    </section>
    <aside>
    <section class="popular-recipes">
    <h2>Masakan Populer</h2>
    <iframe width="240" height="auto" src="https://www.youtube.com/embed/EAtZyJ-q3bg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
    <section class="contact-details">
    <h2>Kontak</h2>
    <p>Warung Tegal <br/>
    di seluruh Indonesia.
    </section>
    <section class="about-us">
    <h2>Visit Us</h2>
    <video width="240" height="auto" style="margin-top:auto" poster="images/thumbnail.png" controls>
    <source src="media/about.mp4" type="video/mp4">
    </video>
    <p>Credit to : <a class="unset" href="https://www.youtube.com/channel/UCdOovgmIPfj9a-o3VP5i2_g" style="cursor: pointer;">MerdekaDotCom</a></p>
    </section>
    </aside>
    <footer>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    <script>
    var slideIndex = 0;
    showSlides();
    function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
    </script>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  2. Halaman Daftar Masakan
    <!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">
    <title>Web Warung Tegal</title>
    <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, serif;
    line-height: 1.4em;
    margin: 0px;
    }
    .wrapper {
    width: 940px;
    margin: 20px auto 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 0px 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: 0px 0px 0px 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 0px 5px 0px;
    padding: 0px;
    }
    h3 {
    margin: 0px 0px 10px 0px;
    color: #de6581;
    }
    aside h2 {
    padding: 30px 0px 10px 0px;
    color: #de6581;
    }
    footer {
    font-size: 80%;
    padding: 7px 0px 0px 20px;
    }
    .needshadow{
    text-shadow:
    -1px -1px black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    }
    .unset{
    all: unset;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <header>
    <h1>Warung Tegal</h1>
    <nav>
    <ul>
    <li><a href="../index.html">Beranda</a></li>
    <li><a href="food-list.html" class="current">Daftar Masakan</a></li>
    <li><a href="catering.html">Katering</a></li>
    <li><a href="about.html">Tentang</a></li>
    <li><a href="contact.html">Kontak</a></li>
    </ul>
    </nav>
    </header>
    <section class="courses">
    <article>
    <h2 style="margin-left: 25px; color: #de6581; margin-top: 30px; margin-bottom: 20px;">Makanan Terfavorit</h2>
    <br>
    </article>
    <article>
    <figure>
    <img src="../images/soto.jpg" alt="soto" style="width: 278px; height:198px">
    <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" style="width:278px; height:198px">
    <figcaption>Pecel Indonesia</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Pecel</h2>
    <h3>Makanan 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>
    <article>
    <figure>
    <img src="../images/cumiasin.jpg" alt="pecel" style="width:278px; height:198px">
    <figcaption>Cumi Pedas Asin</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Cumi Pedas Asin</h2>
    <h3>Makanan Pedas</h3>
    </hgroup>
    <p>Cumi pedas asin adalah makanan hasil olahan cumi yang dimasak dengan cara ditumis menggunakan bawang, tomat, serta cabai sehingga menghasilkan rasa pedas asin yang menggugah selera.</p>
    </article>
    <article>
    <figure>
    <img src="../images/ayambakar.jpg" alt="pecel" style="width:278px; height:198px">
    <figcaption>Ayam Bakar</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Ayam Bakar</h2>
    <h3>Makanan Bakaran</h3>
    </hgroup>
    <p>Ayam bakar adalah makanan hasil olahan daging ayam yang dimasak dengan cara dibakar setelah dilapisi oleh bumbu khusus (campuran kecap, bawang, dsb) sehingga memiliki rasa gurih dan aroma yang membuat anda lapar.</p>
    </article>
    <article>
    <figure>
    <img src="../images/ikanbalado.jpg" alt="pecel" style="width:278px; height:198px">
    <figcaption>Ikan Tongkol Balado</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Ikan Tongkol Balado</h2>
    <h3>Makanan Pedas</h3>
    </hgroup>
    <p>Ikan Tongkol Balado adalah makanan hasil olahan ikan tongkol yang dimasak dengan cara digoreng kemudian ditumis bersama dengan bumbu balado sehingga memiliki rasa pedas, manis, dan gurih yang nikmat.</p>
    </article>
    </section>
    <aside>
    <section class="popular-recipes">
    <h2>Masakan Populer</h2>
    <iframe width="240" height="auto" src="https://www.youtube.com/embed/EAtZyJ-q3bg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
    <section class="contact-details">
    <h2>Kontak</h2>
    <p>Warung Tegal <br/>
    di seluruh Indonesia.
    </section>
    <section class="about-us">
    <h2>Visit Us</h2>
    <video width="240" height="auto" style="margin-top:auto" poster="../images/thumbnail.png" controls>
    <source src="../media/about.mp4" type="video/mp4">
    </video>
    <p>Credit to : <a class="unset" href="https://www.youtube.com/channel/UCdOovgmIPfj9a-o3VP5i2_g" style="cursor: pointer;">MerdekaDotCom</a></p>
    </section>
    </aside>
    <footer>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    </body>
    </html>
    view raw food-list.html hosted with ❤ by GitHub
  3. Halaman Katering
    <!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">
    <title>Web Warung Tegal</title>
    <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, serif;
    line-height: 1.4em;
    margin: 0px;
    }
    .wrapper {
    width: 940px;
    margin: 20px auto 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 0px 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: 0px 0px 0px 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 0px 5px 0px;
    padding: 0px;
    }
    h3 {
    margin: 0px 0px 10px 0px;
    color: #de6581;
    }
    aside h2 {
    padding: 30px 0px 10px 0px;
    color: #de6581;
    }
    footer {
    font-size: 80%;
    padding: 7px 0px 0px 20px;
    }
    .needshadow{
    text-shadow:
    -1px -1px black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    }
    .unset{
    all: unset;
    }
    .review{
    float: left;
    width: 290px;
    height: 220px;
    padding: 5px;
    margin: 20px;
    border: 1px solid #eeeeee;
    }
    table{
    width: 75%;
    border: 1px solid #aeaca8;;
    padding: 2px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    }
    td{
    border: 1px solid #aeaca8;;
    text-align: left;
    padding: 5px;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <header>
    <h1>Warung Tegal</h1>
    <nav>
    <ul>
    <li><a href="../index.html">Beranda</a></li>
    <li><a href="food-list.html">Daftar Masakan</a></li>
    <li><a href="catering.html" class="current">Katering</a></li>
    <li><a href="about.html">Tentang</a></li>
    <li><a href="contact.html">Kontak</a></li>
    </ul>
    </nav>
    </header>
    <section class="courses">
    <article>
    <h2 style="margin-left: 25px; color: #de6581; margin-top: 30px; margin-bottom: 30px;">Pemesanan Katering</h2>
    <p style="text-align: justify; margin-left: 30px; margin-right: 30px; font-size: large; line-height: 1.5;">
    Untuk pemesanan katering, informasi seputar pemesanan katering, atau pilihan paket katering lainnya, Anda bisa langsung menghubungi kami lewat informasi kontak yang kami sediakan di halaman : <a href="contact.html">Kontak</a>.
    </p>
    <table>
    <tr>
    <td style="text-align: center;"><strong>Nama Paket</strong></td>
    <td style="text-align: center;"><strong>Komponen</strong></td>
    <td style="text-align: center;"><strong>Harga per Paket</strong></td>
    </tr>
    <tr style="font-size: medium;">
    <td>Paket 1</td>
    <td>
    <ul>
    <li>Nasi Putih</li>
    <li>Pecel Sayur</li>
    <li>Ikan Tongkol Balado</li>
    <li>Air Mineral Gelas</li>
    </ul>
    </td>
    <td>Rp. 20.000,00</td>
    </tr>
    <tr style="font-size: medium;">
    <td>Paket 2</td>
    <td>
    <ul>
    <li>Nasi Putih</li>
    <li>Pecel Sayur</li>
    <li>Cumi Pedas Asin</li>
    <li>Air Mineral Gelas</li>
    </ul>
    </td>
    <td>Rp. 20.000,00</td>
    </tr>
    <tr style="font-size: medium;">
    <td>Paket 3</td>
    <td>
    <ul>
    <li>Nasi Putih</li>
    <li>Soto</li>
    <li>Ayam Bakar</li>
    <li>Air Mineral Gelas</li>
    </ul>
    </td>
    <td>Rp. 25.000,00</td>
    </tr>
    </table>
    </article>
    </section>
    <aside>
    <section class="popular-recipes">
    <h2>Masakan Populer</h2>
    <iframe width="240" height="auto" src="https://www.youtube.com/embed/EAtZyJ-q3bg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
    <section class="contact-details">
    <h2>Kontak</h2>
    <p>Warung Tegal <br/>
    di seluruh Indonesia.
    </section>
    <section class="about-us">
    <h2>Visit Us</h2>
    <video width="240" height="auto" style="margin-top:auto" poster="../images/thumbnail.png" controls>
    <source src="../media/about.mp4" type="video/mp4">
    </video>
    <p>Credit to : <a class="unset" href="https://www.youtube.com/channel/UCdOovgmIPfj9a-o3VP5i2_g" style="cursor: pointer;">MerdekaDotCom</a></p>
    </section>
    </aside>
    <footer>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    </body>
    </html>
    view raw catering.html hosted with ❤ by GitHub
  4. Halaman Tentang
    <!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">
    <title>Web Warung Tegal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <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, serif;
    line-height: 1.4em;
    margin: 0px;
    }
    .wrapper {
    width: 940px;
    margin: 20px auto 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 0px 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: 0px 0px 0px 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 0px 5px 0px;
    padding: 0px;
    }
    h3 {
    margin: 0px 0px 10px 0px;
    color: #de6581;
    }
    aside h2 {
    padding: 30px 0px 10px 0px;
    color: #de6581;
    }
    footer {
    font-size: 80%;
    padding: 7px 0px 0px 20px;
    }
    .needshadow{
    text-shadow:
    -1px -1px black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    }
    .unset{
    all: unset;
    }
    .review{
    float: left;
    width: 290px;
    height: 220px;
    padding: 5px;
    margin: 20px;
    border: 1px solid #eeeeee;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <header>
    <h1>Warung Tegal</h1>
    <nav>
    <ul>
    <li><a href="../index.html">Beranda</a></li>
    <li><a href="food-list.html">Daftar Masakan</a></li>
    <li><a href="catering.html">Katering</a></li>
    <li><a href="about.html" class="current">Tentang</a></li>
    <li><a href="contact.html">Kontak</a></li>
    </ul>
    </nav>
    </header>
    <section class="courses">
    <article>
    <h2 style="margin-left: 25px; color: #de6581; margin-top: 30px; margin-bottom: 20px;">Tentang Kami</h2>
    <br>
    <p style="text-align: justify; margin-left: 30px; margin-right: 30px; font-size: large; line-height: 1.25;">
    Website ini adalah sebuah percobaan dari saya, Jonathan Leonardo H. S., dalam upaya untuk membuat website sederhana. Website yang saya buat kali ini adalah sebuah website untuk usaha rumah makan "warung tegal". <br><br>
    Ceritanya, ini adalah usaha rumah makan yang sudah berdiri sejak lama. Pada mulanya, pilihan makanan yang tersedia masih sangat terbatas. Namun, seiring berkembangnya jangkauan pasar dan semakin meningkatnya permintaan pelanggan, kini tempat makan ini telah menyediakan berbagai macam pilihan makanan yang cocok untuk lidah para pelanggan.</p>
    </article>
    <div>
    <h3 style="margin-left: 25px; margin-top: 30px;">Kata Mereka</h3>
    <br><br>
    <article>
    <section style="overflow: hidden;">
    <div class="card">
    <div class="card-body">
    <div class="row">
    <div class="col-md-2">
    <img src="https://image.ibb.co/jw55Ex/def_face.jpg" class="img img-rounded img-fluid" style="display: block; width: 80px; margin-left: 20px;"/>
    </div>
    <div class="col-md-10">
    <p>
    <strong>Jonathan Leonardo</strong>
    </p>
    <div class="clearfix"></div>
    <p>Tempatnya enak. Makanannya murah - murah. <i>Reccomend</i> banget deh pokoknya.</p>
    </div>
    </div>
    </div>
    </div>
    <br><br>
    <div class="card">
    <div class="card-body">
    <div class="row">
    <div class="col-md-2">
    <img src="https://image.ibb.co/jw55Ex/def_face.jpg" class="img img-rounded img-fluid" style="display: block; width: 80px; margin-left: 20px;"/>
    </div>
    <div class="col-md-10">
    <p>
    <strong>Geraldino</strong>
    </p>
    <div class="clearfix"></div>
    <p>Ada banyak pilihan masakan, jadi gk pernah bosen makan disini.</p>
    </div>
    </div>
    </div>
    </div>
    <br><br>
    <div class="card" style="margin-bottom: 40px;">
    <div class="card-body">
    <div class="row">
    <div class="col-md-2">
    <img src="https://image.ibb.co/jw55Ex/def_face.jpg" class="img img-rounded img-fluid" style="display: block; width: 80px; margin-left: 20px;"/>
    </div>
    <div class="col-md-10">
    <p>
    <strong>Kevin</strong>
    </p>
    <div class="clearfix"></div>
    <p>Tempat makan paling favorit. Bersih, murah, dan udah pasti enak.</p>
    </div>
    </div>
    </div>
    </div>
    </section>
    </article>
    </div>
    </section>
    <aside>
    <section class="popular-recipes">
    <h2>Masakan Populer</h2>
    <iframe width="240" height="auto" src="https://www.youtube.com/embed/EAtZyJ-q3bg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
    <section class="contact-details">
    <h2>Kontak</h2>
    <p>Warung Tegal <br/>
    di seluruh Indonesia.
    </section>
    <section class="about-us">
    <h2>Visit Us</h2>
    <video width="240" height="auto" style="margin-top:auto" poster="../images/thumbnail.png" controls>
    <source src="../media/about.mp4" type="video/mp4">
    </video>
    <p>Credit to : <a class="unset" href="https://www.youtube.com/channel/UCdOovgmIPfj9a-o3VP5i2_g" style="cursor: pointer;">MerdekaDotCom</a></p>
    </section>
    </aside>
    <footer>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    </body>
    </html>
    view raw about.html hosted with ❤ by GitHub
  5. Halaman Kontak
    <!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">
    <title>Web Warung Tegal</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <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, serif;
    line-height: 1.4em;
    margin: 0px;
    }
    .wrapper {
    width: 940px;
    margin: 20px auto 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 0px 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: 0px 0px 0px 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 0px 5px 0px;
    padding: 0px;
    }
    h3 {
    margin: 0px 0px 10px 0px;
    color: #de6581;
    }
    aside h2 {
    padding: 30px 0px 10px 0px;
    color: #de6581;
    }
    footer {
    font-size: 80%;
    padding: 7px 0px 0px 20px;
    }
    .needshadow{
    text-shadow:
    -1px -1px black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
    }
    .unset{
    all: unset;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <header>
    <h1>Warung Tegal</h1>
    <nav>
    <ul>
    <li><a href="../index.html">Beranda</a></li>
    <li><a href="food-list.html">Daftar Masakan</a></li>
    <li><a href="catering.html">Katering</a></li>
    <li><a href="about.html">Tentang</a></li>
    <li><a href="contact.html" class="current">Kontak</a></li>
    </ul>
    </nav>
    </header>
    <section class="courses">
    <article>
    <h2 style="margin-left: 25px; color: #de6581; margin-top: 30px; margin-bottom: 20px;">Contact Me</h2>
    <br>
    <table>
    <tr class="phone" style="line-height: 2;">
    <td><i class="fa fa-mobile-phone fa-3x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 20px;"><p style="font-size: 18px;">Phone</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px;">:</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px;">+6281917677313</p></td>
    </tr>
    <tr class="whatsapp" style="line-height: 2;">
    <td><i class="fa fa-whatsapp fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 20px;"><p style="font-size: 18px;">Whatsapp</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px;">:</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px;"><a href="https://wa.me/&#43;6281917677313">+6281917677313</a></p></td>
    </tr>
    <tr class="email" style="line-height: 2;">
    <td><i class="fa fa-envelope-square fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 20px;"><p style="font-size: 18px;">Email</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px;">:</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px; cursor: pointer;"><a href="mailto:jonathanleonardo123@gmail.com?subject=Say hi!">jonathanleonardo123@gmail.com</a></p></td>
    </tr>
    <tr class="facebook" style="line-height: 2;">
    <td><i class="fa fa-facebook fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 20px;"><p style="font-size: 18px;">Facebook</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px;">:</p></td>
    <td style="padding-left: 10px;"><p style="font-size: 18px; cursor: pointer;"><a href="https://www.facebook.com/jonathan.leonardo.3990" >Jonathan Leonardo</a></p></td>
    </tr>
    </table>
    </article>
    </section>
    <aside>
    <section class="popular-recipes">
    <h2>Masakan Populer</h2>
    <iframe width="240" height="auto" src="https://www.youtube.com/embed/EAtZyJ-q3bg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
    <section class="contact-details">
    <h2>Kontak</h2>
    <p>Warung Tegal <br/>
    di seluruh Indonesia.
    </section>
    <section class="about-us">
    <h2>Visit Us</h2>
    <video width="240" height="auto" style="margin-top:auto" poster="../images/thumbnail.png" controls>
    <source src="../media/about.mp4" type="video/mp4">
    </video>
    <p>Credit to : <a class="unset" href="https://www.youtube.com/channel/UCdOovgmIPfj9a-o3VP5i2_g" style="cursor: pointer;">MerdekaDotCom</a></p>
    </section>
    </aside>
    <footer>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    </body>
    </html>
    view raw contact.html hosted with ❤ by GitHub
Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Sekian dari saya, terima kasih atas perhatiannya.

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi Nama    : Jonathan Leonardo Hasiholan Simanjuntak NRP      : 05111940000150 Kelas     : Pemrograman Web A 2021 Link Profil : Ardo Profile Link Repo : Profile Repository Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3 . Kemudian, saya hosting -kan resource yang berhasil di generate lewat Github Pages. Berikut ini adalah tampilan hasilnya,   Tahapan Pembuatan Profile Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya,  Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo . Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah : hugo version Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil. Gambar 2.1 Hugo be...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Web A

News Website Using Bootstrap Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di  hosting -kan. Pada tugas ini,  hosting  website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link  ini . Berikut adalah tampilan dari hasil websitenya : Tampilan Halaman Utama Website Tampilan Halaman Contact Us Tampilan Pop Up Login Form   Source Code Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image...
Posting Komentar
Baca selengkapnya