Tugas PWEB-D Pertemuan Ke-2 : Warungku

    TUGAS PWEB-D Pertemuan - 2 : Warungku


       Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Web D. Pada pertemuan ketiga kelas PWEB-D, saya diberi tugas untuk membuat website Warung Tegal dengan menggunakan HTML.



Berikut ini hasil dari warung saya :









Link Websitenya :  warungkurendra.netlify.app



Dan untuk hosting domainnya saya menggunakan Netlify dengan cara memasukan file html Biodata
ke dalam website netlify tersebut.





Source Code HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Warungku</title>
    <link rel="stylesheet" href="header,.css" />
    <script>
      var slidePosition = 1;
      SlideShow(slidePosition);

      function plusSlides(n) {
        SlideShow((slidePosition += n));
      }

      function currentSlide(n) {
        SlideShow((slidePosition = n));
      }
      z;
      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>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Warungku</h1>
        <nav>
          <ul>
            <li><a href="" class="current">Beranda</a></li>
            <li><a href="">Daftar Masakan</a></li>
            <li><a href="">tentang</a></li>
            <li><a href="">kontak</a></li>
          </ul>
        </nav>
      </header>
      <section class="courses">
        <div class="slideshow-containers">
          <div class="Containers ContainersImage">
            <img src="Images/Nasi Liwet 2.jpg" style="width: 100%" />
          </div>
          <div class="Containers">
            <img src="Images/Nasi Pecel.jpg" style="width: 100%" />
          </div>
          <div class="Containers">
            <img src="Images/Nasi Campur.jpg" style="width: 100%" />
          </div>
          <a class="Back" onclick="plusSlides(-1)">❮</a>
          <a class="forward" onclick="plusSlides(1)">❯</a>
        </div>
        <article>
          <figure>
            <img src="Images/Nasi Liwet.jpg" alt="nasi liwet" />
            <figcaption>Nasi Liwet Warungku</figcaption>
          </figure>
          <hgroup>
            <h2>Nasi Liwet</h2>
            <h3>Nasi Liwet Khas Warungku</h3>
          </hgroup>
          <p>Nasi Liwet adalah makanan khas Indonesia yang berupa nasi gurih yang dimasak dengan santan, kaldu ayam, daun salam dan serai. Sehingga memberikan rasa yang kaya dan aromatik.</p>
        </article>
        <article>
          <figure>
            <img src="Images/Nasi Pecel.jpg" alt="pecel" />
            <figcaption>Pecel Indonesia</figcaption>
          </figure>
          <hgroup>
            <h2>Nasi Pecel</h2>
            <h3>Nasi Pecel Khas Warungku</h3>
          </hgroup>
          <p>Nasi Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran yang segar dan nikmat.</p>
        </article>
        <article>
          <figure>
            <img src="Images/Nasi Liwet.jpg" alt="nasi Campur" />
            <figcaption>Nasi Campur Warungku</figcaption>
          </figure>
          <hgroup>
            <h2>Nasi Campur</h2>
            <h3>Nasi Campur Khas Warungku</h3>
          </hgroup>
          <p>Nasi Campur adalah makanan khas Indonesia yang berupa nasi dengan aneka lauk pauk yang nikmat seperti Ayam Goreng, Kering Tempe, dan Sayur Buncis Oseng yang nikmat.</p>
        </article> 
      </section>
      <aside>
        <section class="pupolar-recipes">
          <h2>Masakan Favorit</h2>
          <a href="">Nasi Campur</a>
          <a href="">Nasi Liwet</a>
          <a href="">Nasi Pecel</a>
        </section>
        <section class="contact-details">
          <h2>Kontak</h2>
          <p>
            Warungku aneka khas makanan seluruh Indonesia<br />
            
          </p>
        </section>
       
      </aside>
      <footer>&copy; 2021 Warungku</footer>
    </div>
  </body>
</html>



Source Code CSS :

header,
nav,
section,
article,
figure,
figcaption,
aside,
footer {
  display: block;
}

body {
  background-image: url("https://images.unsplash.com/photo-1589498199300-f1534ccd00e2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxMzYwOTV8fGVufDB8fHx8&w=1000&q=80");
  background-position: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.8em;
  margin: 0px;
}

.wrapper {
  width: 940px;
  margin: 20px auto 20px auto;
  border: 2px solid #070606;
  background-color: #ffffff;
}

header {
  height: 155px;
  width: 940px;
  background-image: url("https://cdn.discordapp.com/attachments/760854160194273281/891935977982017556/Warungku.jpg");
}

h1 {
  text-indent: -9999px;
  width: 940px;
  height: 130px;
  margin: 0px;
}

nav,
footer {
  clear: both;
  color: #ffffff;
  background-color: #444444;
  height: 30px;
}

nav ul {
  margin: 0px;
  padding: 5px 0px 5px 30px;
}

nav li {
  display: inline;
  margin-right: 40px;
}

nav li a {
  color: #ffffff;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.Containers {
  margin: 50px;
  display: none;
}

.ContainersImage {
  margin: 50px;
  display: block;
}

.Back,
.forward {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: 5%;
  padding: 15px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.7s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

.forward {
  right: 36%;
  border-radius: 4px 0 0 4px;
}

.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background-color: #acc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable,
.dots:hover {
  background-color: #717161;
}

nav li a:hover,
nav li a.current {
  font-weight: bolder;
  color: #f0efef;
}

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;
  height: 220px;
  padding: 5px;
  margin: 20px;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
}

figure img {
  width: 280px;
  height: 200px;
}

figcaption {
  font-size: 90%;
  text-align: center;
}

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: #000000;
  background-color: #efefef;
}

a {
  color: #0013c2;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-weight: normal;
}

h2 {
  margin: 10px, 0px, 5px, 0px;
  padding: 0px;
}

h3 {
  margin: 0px, 0px, 10px, 0px;
  color: #000000;
}

aside h2 {
  padding: 30px 0px 10px 0px;
  color: #002fff;
}

footer {
  font-size: 80%;
  height: 30px;
  padding: 7px, 0px, 0px, 20px;
}

Sekian penjelasan tugas dari saya mohon maaf jika ada kesalahan, sekian terima kasih.







Komentar

Posting Komentar

Postingan populer dari blog ini

ETS RK - A : Soal Nomor 1 - 4

Gambar
     ETS RK - A : Soal Nomor 1 sampai 4        Nama Anggota Kelompok : Andymas Narendra B - 05111940000192 Refaldyka Galuh P - 05111940000209 Soal Jelaskan macam-macam kebutuhan yang harus digali di dalam membuat perangkat lunak Sesuai gambaran video buatlah BRD GoToko Buatlah video youtube untuk mempresentasikan jawaban anda Jawaban ditulis disertai embedded video youtube di blog masing-masing dan buat koment pada posting berikut  Jawaban : 1.  Jelaskan macam-macam kebutuhan yang harus digali di dalam membuat perangkat lunak Kebutuhan  fungsional (GoToko) Kebutuhan fungsional adalah kebutuhan  layanan yang harus dimiliki oleh perangkat lunak dalam rangka menjalankan proses bisnis nya. Selain itu, kebutuhan fungsional juga harus meliputi informasi-informasi akan dihasilkan oleh sistem. Adapun contoh-contoh dari kebutuhan fungsional, sangat bergantung pada aplikasi yang dirancang. Seperti aplikasi manajemen toko sebaiknya memiliki fu...
Baca selengkapnya

ETS PWEB - D No 1 dan No 2

Gambar
  ETS PWEB - D : Soal Nomor 1 dan Nomor 2 Nama : Andymas Narendra Bagaskara NRP   : 05111940000192 Kelas  : Pemrograman Web - D Soal 1. Jelaskan  istilah-istilah berikut kemudian berikan contohnya html element html tag CSS Selector Ajax Jawaban : * HTML Element  adalah sebuah code dari html yang sudah disediakan dan setiap codenya memiliki fungsi dan kegunaan masing-masing. Contohnya :  Penulisan tag html yang berpasang-pasangan yang dimulai dengan <tag_pembuka> isinya </tag_penutup> lalu ada juga   <nama_tag/>   yang juga merupakan contoh dari elemen HTML yang tidak memiliki tag penutup yang bisa disebut juga dengan Void Element . * HTML Tag  adalah sebuah penanda awalan dan akhiran dari sebuah elemen di dalam HTML Contohnya  :   <p> , <h1> , <head>, <body>  dan pada setiap tag tersebut memiliki fungsinya masing-masing  yang dimana <p> untuk membuat para...
Baca selengkapnya

TUGAS PBKK - A Pertemuan - 2 : Kalkulator Sederhana

Gambar
     TUGAS PBKK - A Pertemuan - 2  Membuat Kalkulator Sederhana        Perkenalkan nama saya Andymas Narendra Bagaskara, NRP 05111940000192, Kelas Pemrograman Berbasis Kerangka Kerja A. Pada pertemuan kedua kelas PBKK - A, saya diberi tugas untuk membuat Kalkulator Sederhana dengan menggunakan bahasa C# dan Framework .NET. Contoh Tampilan Aplikasi : Source Code :     using System ; using System.Collections.Generic ; using System.ComponentModel ; using System.Data ; using System.Drawing ; using System.Linq ; using System.Text ; using System.Threading.Tasks ; using System.Windows.Forms ;   namespace KalkulatorSederhana { public partial class Form1 : Form { public Form1 ( ) { InitializeComponent ( ) ; }   private void button1_Click ( object sender, EventArgs e ) { int nilai1 = int ...
Baca selengkapnya