Skip to main content

Tugas (3) Pemgrograman Web D - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan HTML, CSS, dan JavaScript serta VSCode sebagai text editor. Di website ini, saya menggunakan carousel dan ada satu content video pada carousel tersebut menggunakan tag html video. Untuk websitenya sendiri bisa di akses melalui link berikut.

Content website terdiri dari carousel, lalu ada video promosi Warung Tegal. Kemudian menu yang disediakan.

Berikut merupakan preview dari Website Warung Tegal


Source code

  • index.html
    <!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="./carousel.css">
    <title>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 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;
    }
    </style>
    </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">
    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="images/soto.jpg" style="width:100%">
    </div>
    <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="images/pecel.jpg" style="width:100%">
    </div>
    <div class="mySlides fade">
    <video controls
    width="100%">
    <source src="./videos/cinematic.mp4" type="video/mp4"/>
    </video>
    </div>
    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</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>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    <script src="./carousel.js">
    </script>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • carousel.css
    view raw carousel.css hosted with ❤ by GitHub
  • carousel.js
    view raw carousel.js hosted with ❤ by GitHub

Axel Briano Suherik

05111940000137

Pweb - D


Comments

Post a Comment

Popular posts from this blog

Tugas (6) Pemrograman Web D - Form Login & Contact Us dengan Bootstrap

 Tugas kali ini membuat website form login  dan contact us  menggunakan salah satu framework CSS paling populer yaitu Bootstrap . Dalam pengerjaannya digunakan HTML, CSS(Bootstrap) dan custom, serta sedikit JavaScript. JS digunakan untuk menampilkan alert bahwa data telah berhasil di-submit atau dikirim. Laman website dapan diakses pada link berikut . Untuk hosting web digunakan Vercel . Website terdiri dari satu halaman dan 2 bagian: Login form,  berisi halaman yang memuat form untuk login, dan sign in. Email dan password tidak boleh kosong. Newsletter section, berisi informasi mengenai pengguna yang ingin berlangganan berita update dari website ini. Source Code index.html main.css index.js
Post a Comment
Read more

Tugas 5 Rekayasa Kebutuhan (A) - Spesifikasi Kebutuhan Aplikasi Moka

Tugas kali ini adalah membuat spesifikasi kebutuhan dari suatu aplikasi bernama Moka. PoS merupakan sistem untuk memudahkan proses pembayaran para pelanggan di suatu pelaku usaha ketika membeli suatu produk atau jasa. Sistem PoS biasanya digunakan pada smartphone, tablet, komputer atau mesin EDC. Moka perupakan suatu aplikasi yang menerapkan  point-of-sales (PoS), Moka menggabungkan perangkat lunak dan perangkat keras membentuk sistem untuk memudahkan transaksi oleh pelaku usaha dengan pelanggan. Dengan Moka pelaku usaha dapat melakukan beragam hal seputar penjualan, mulai dari membuat entry produk atau jasa baru, mengatur stok, harga, keterangan, serta menampilkan grafik grafik data transaksi yang sudah di akumulasi dengan cepat dan secara real-time . Kebutuhan Fungsional Sistem menyediakan fitur login Sistem menyediakan fitur register Sistem menyediakan sejumlah opsi jenis usaha Sistem menyediakan fitur untuk mengelola menu Sistem menyediakan fitur untuk melakukan pengelolaan sh...
Post a Comment
Read more