Tugas 3 PWEB B

Tampilan





Source Code

<!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">
<title>Warung Tegal</title>
</head>
<body>
<div class="wrapper">
<header>
<h1>Warung Tegal</h1>
<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="daftar.html" style="color: black;">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" style="width: 100%;">
<article>
<figure>
<img src="img/SotoAyam.jpeg" alt="soto ayam">
<figcaption>Soto Ayam</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. Warna kuning ini dikarenakan oleh kunyit yang digunakan sebagai bumbu. Soto ayam banyak
ditemukan di daerah-daerah di Indonesia dan Singapura. Selain ayam bahan yang digunakan juga
meliputi telur rebus, irisan kentang, daun seledri, serta bawang goreng. Terkadang soto juga
disajikan dengan lontong atau nasi putih. Selain itu soto ayam juga sering dihidangkan dengan
sambal, kerupuk dan koya</p>
</article>
<article>
<figure>
<img src="img/Pecel.jpeg" alt="Pecel">
<figcaption>Pecel</figcaption>
</figure>
<hgroup>
<h2>Masakan Pecel</h2>
<h3>Makanan dengan bumbu kacang</h3>
</hgroup>
<p>Pecel atau pecal merupakan makanan berasal dari pulau Jawa, makanan ini biasanya dihidangkan dengan
bumbu sambal kacang sebagai bahan utamanya dan dicampur dengan aneka jenis sayuran. Makanan ini
populer terutama di wilayah DI Yogyakarta, Jawa Tengah, dan Jawa Timur. Ada angapan Pecel itu
berasal dari Ponorogo, Jawa Timur, karena sambal kacang yang digunakan dalam campuran pecel juga
digunakan dalam bumbu sate Ponorogo. Makanan ini juga mirip dengan gado-gado yang membedakannya
adalah campuran bahan dan tekstur bumbunya.</p>
</article>
<article>
<figure>
<img src="img/Rawon.jpg" alt="Rawon">
<figcaption>Rawon</figcaption>
</figure>
<hgroup>
<h2>Rawon Daging</h2>
<h3>Makanan dengan kuah hitam</h3>
</hgroup>
<p>Rawon adalah masakan Indonesia berupa sup daging berkuah hitam dengan campuran bumbu khas yang
menggunakan kluwek. Rawon, meskipun dikenal sebagai masakan khas Jawa Timur (daerah Arekan), dikenal
pula oleh masyarakat Jawa Tengah sebelah timur (daerah Surakarta).
Daging untuk rawon umumnya adalah daging sapi yang dipotong kecil-kecil, utamanya adalah bagian
sandung lamur. Bumbu supnya sangat khas Indonesia, yaitu campuran bawang merah, bawang putih,
lengkuas (laos), ketumbar, kemiri, serai, kunir, cabai, kluwek, garam, serta minyak nabati. Semua
bahan ini dihaluskan, lalu ditumis sampai harum. Campuran bumbu ini kemudian dimasukkan dalam kaldu
rebusan daging bersama-sama dengan daging. Warna gelap khas rawon berasal dari kluwek.</p>
</article>
<article>
<figure>
<img src="img/Perkedel.jpg" alt="Perkedel">
<figcaption>Perkedel Kentang</figcaption>
</figure>
<hgroup>
<h2>Perkedel Kentang</h2>
<h3>Perkedel yang terbuat dari kentang</h3>
</hgroup>
<p>Perkedel are vegetable fritters from Indonesian cuisine.Most common perkedel are made from mashed
potatoes,yet there are other popular variants which includes perkedel jagung (peeled maize perkedel)
and perkedel tahu (tofu perkedel) and perkedel ikan (minced fish). Throughout most of Indonesia it
is called perkedel; however, it is called begedil in Javanese, and also called that way in Malaysia
and Singapore, which could suggest that this fried food was
introduced by Javanese immigrants to Malaysia and Singapore. </p>
</article>
<article>
<figure>
<img src="img/TelurBalado.jpg" alt="Telur Balado">
<figcaption>Telur Balado</figcaption>
</figure>
<hgroup>
<h2>Telur Balado</h2>
<h3>Telur dengan bumbu balado</h3>
</hgroup>
<p>Balado adalah teknik memasak khas Minangkabau dengan cara menumis cabe giling dengan berbagai rempah,
biasanya bawang merah, bawang putih, jeruk nipis. Berbeda dengan sambal lain yang hanya menggunakan
cabe giling sebagai pendamping makanan dengan cara dicelup, balado dihidangkan dengan cara dimasak
kembali dengan berbagai jenis masakan seperti dendeng, teri, ikan goreng, ayam goreng, bebek goreng,
telur rebus, dan tempe goreng. Tindakan menambahkan cabe dan rempah dipercaya membuat makanan
bertambah awet. </p>
</article>
</section>
<footer>
&copy; 2021 Warung Tegal
</footer>
</div>
</body>
</html>
view raw daftar.html hosted with ❤ by GitHub
<!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">
<title>Warung Tegal</title>
</head>
<body>
<div class="wrapper">
<header>
<h1>Warung Tegal</h1>
<nav>
<ul>
<li><a href="index.html" style="color: black;">Beranda</a></li>
<li><a href="daftar.html">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">
<article>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/carouselSoto.jpg" style="width:100%" width="658" height="320">
<div class="text">Soto Ayam</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/carouselPecel1.jpg" style="width:100%" width="658" height="320">
<div class="text">Pecel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div>
<iframe width="658" height="320" src="https://www.youtube.com/embed/sgP1o92nbts"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</article>
<!-- Slideshow container -->
<article>
<figure>
<img src="img/SotoAyam.jpeg" alt="soto ayam">
<figcaption>Soto Ayam</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. Warna kuning ini dikarenakan oleh kunyit yang digunakan sebagai bumbu. Soto ayam banyak
ditemukan di daerah-daerah di Indonesia dan Singapura. Selain ayam bahan yang digunakan juga
meliputi telur rebus, irisan kentang, daun seledri, serta bawang goreng. Terkadang soto juga
disajikan dengan lontong atau nasi putih. Selain itu soto ayam juga sering dihidangkan dengan
sambal, kerupuk dan koya</p>
</article>
<article>
<figure>
<img src="img/Pecel.jpeg" alt="Pecel">
<figcaption>Pecel</figcaption>
</figure>
<hgroup>
<h2>Masakan Pecel</h2>
<h3>Makanan dengan bumbu kacang</h3>
</hgroup>
<p>Pecel atau pecal merupakan makanan berasal dari pulau Jawa, makanan ini biasanya dihidangkan dengan
bumbu sambal kacang sebagai bahan utamanya dan dicampur dengan aneka jenis sayuran. Makanan ini
populer terutama di wilayah DI Yogyakarta, Jawa Tengah, dan Jawa Timur. Ada angapan Pecel itu
berasal dari Ponorogo, Jawa Timur, karena sambal kacang yang digunakan dalam campuran pecel juga
digunakan dalam bumbu sate Ponorogo. Makanan ini juga mirip dengan gado-gado yang membedakannya
adalah campuran bahan dan tekstur bumbunya.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="">Soto Ayam</a>
<a href="">Pecel</a>
<a href="">Rawon</a>
<a href="">Perkedel Kentang</a>
<a href="">Telur Balado</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Warung Tegal<br />
di seluruh indonesia
</section>
</aside>
<footer>
&copy; 2021 Warung Tegal
</footer>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
header,
section,
footer,
aside,
nav,
article,
figure,
figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("img/bg.png");
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(img/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%;
}
article p {
padding-left: 25px;
}
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;
}
figure img {
max-width: 100%;
}
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;
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* 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 {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
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}
}
view raw style.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 MPPL A 2021

Gambar
Nama : Andika Nugrahanto NRP : 05111940000031 Kelas : MPPL A 2021 1. Bergabung ke Situs Freelance Berdasarkan rekomendasi yang saya dapat dari kelas, saya memutuskan untuk mendaftar di salah satu web freelance yaitu  https://projects.co.id/ . Pada web tersebut saya terdaftar dengan username Anran31. 2. Memilih Project Dalam Situs Tersebut Karena saya tertarik pada bidang web development, maka saya menyari project yang berhubungan dengan web development. Setelah mencari, saya menemukan satu project yang sesuai dengan minat saya.  Berdasarkan Skill Requirement diatas, kurang lebih hal yang saya bisa dan tidak bisa adalah sebagai berikut: HTML, CSS, JS (Sedang belajar) PHP & Laravel (Sedang belajar) Codeigniter (Belum bisa) MySQL (Bisa) Github (Bisa) Sekian pemaparan saya untuk tugas kali ini. Terima kasih.
Baca selengkapnya

Tugas 3 Rekayasa Kebutuhan D

MCAS(Maneuvering Characteristics Augmentation System) Posisi dan ukuran mesin yang lebih besar pada Boeing 737 MAX dibanding Boeing 737 NG maka peletakan mesin ini terletak lebih maju dan sedikit naik daripada seri sebelumnya, sehingga menyebabkan cenderungnya mendorong hidung pesawat ke atas pada manuver tertentu. Keputusan desain ini mengakibatkan munculnya kemungkinan stalling pada pesawat ini. MCAS ini membuat sistem otomatis yang mengkompensasi gerakan pitch (dongakan hidung pesawat), agar dapat membantu pilot menurunkan hidung pesawat, apabila angle of attack terlalu besar saat terbang manual. Angle of attack yang terlalu besar inilah yang berisiko membuat pesawat stall. Fitur otomatis ini (MCAS), tetap aktif meski pesawat terbang dalam kondisi manual (Autopilot Off). Sistem MCAS akan menurunkan hidung pesawat dengan cara mengatur roda penyesuaian (trim) agar horizontal stabilizer (sayap kecil di ekor pesawat) berputar, membuat hidung pesawat turun. MCAS akan menggerakkan horizon...
Baca selengkapnya

Tugas 2 Rekayasa Kebutuhan D

Gambar
 Nama   : Andika Nugrahanto NRP         : 05111940000031 Kelas      : RK - D SKPL yang akan saya analisis untuk tugas ini adalah SKPL pembuatan perangkat lunak untuk Mizan Store. Perangkat lunak tersebut dibuat dengan tujuan untuk mempermudah melakukan pencarian dan pembelian buku secara online. Berikut adalah SKPL yang akan saya analisis untuk tugas kali ini: Berdasarakan gambar di atas, input yang dibutuhkan untuk proses rekayasa kebutuhan ada 5, yaitu sebagai berikut: 1. Existing Systems Information Mizan store merupakan salah satu toko buku dan perangkat lunak yang dikembangkan bertujuan untuk mempermudah pembeli dalam melakukan pencarian dan pembelian buku secara online. Pembeli sekarang tidak perlu pergi ke Mizan store dan mencari buku yang diinginkan secara manual, tetapi hanya perlu pergi ke web Mizan Store, lalu memilih buku yang ingin dibeli, kemudian pembeli dapat melakukan pembayaran melalui berbagai macam cara seperti o...
Baca selengkapnya