Tugas 3 PWEB-B Bayu Adjie Sidharta 05111940000172



Page terdiri HTML dan CSS biasa, link website saya adalah : Web Warung Tegal (tugaspweb3-bayuas.vercel.app)

Dibawah tertulis source code saya.


<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Warung Tegal</title>
<script>
var slidePosition = 1;
SlideShow(slidePosition);
function plusSlides(n) {
SlideShow(slidePosition += n);
}
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>
</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>
<div class="slideshow-container">
<div class="Containers ContainersImage">
<img src="https://asset.kompas.com/crops/ZxkpF8bAqYKIXbsr_abBGyY2hyw=/0x0:780x520/750x500/data/photo/2021/02/25/6037b6fb51bdd.jpg"
style="height:500px;">
<div class="Info" style=" color: white;">Pecel</div>
</div>
<div class="Containers">
<img src="https://www.goodnewsfromindonesia.id/uploads/post/large-543defb8b5718-86712ff11c99c09cb60453869a030596.jpg"
style="height:500px;">
<div class="Info" style=" color: white;">Sate</div>
</div>
<div class="Containers">
<img src="https://statik.tempo.co/data/2018/06/03/id_709908/709908_720.jpg" style="height:500px;">
<div class="Info" style=" color: white;">Bakso</div>
</div>
<a class="Back" onclick="plusSlides(-1)">&#10094;</a>
<a class="forward" onclick="plusSlides(1)">&#10095;</a>
</div>
<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>
<section class="courses">
<article>
<h2>Soto Ayam</h2>
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjtg_Qhho_EU3vFp8LYZ0cV2eiCXB7pQC2Uw&usqp=CAU"
alt="soto">
<figcaption>Soto Indonesia</figcaption>
</figure>
<hgroup>
<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.</p>
</article>
<article>
<h2>Masakan Pecel</h2>
<figure>
<img src="https://awsimages.detik.net.id/community/media/visual/2021/05/21/cara-membuat-sambal-pecel-madiun-1.jpeg?w=700&q=90"
alt="pecel">
<figcaption>Pecel Indonesia</figcaption>
</figure>
<hgroup>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Pecel merupakan makanan yang terdiri dari sayur yang direbus dan lauk yang dihidangkan dengan alas
yang berbeda-beda sesuai kota asal pecel, misalnya piring lidi yang disebut ingke, pincuk, atau
tampah bambu.</p>
</article>
</section>
<footer>
&copy; Bayu Adjie Sidharta
</footer>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
header,
section,
footer,
aside,
nav,
article,
figure,
figcaption {
display: block;
}
body {
color: #ffffff;
background-color: black;
background-image: url(https://res.cloudinary.com/grohealth/image/upload/f_auto,fl_lossy,q_auto/v1583749915/DCUK/Content/iStock-879690980.jpg);
background-position: center;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4em;
margin: 0px;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #bd7e4a;
}
header {
background-image: url(https://biaya.info/wp-content/uploads/2020/09/warteg-gratis-20200405-051906.jpg);
height: 160px;
}
h1 {
text-indent: -9999px;
font-weight: bold;
width: 940px;
height: 130px;
margin: 0px;
}
nav,
footer {
clear: both;
color: #ffffff;
background-color: #83502e;
height: 30px;
}
nav ul {
display: flex;
justify-content: center;
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;
}
nav li a:hover {
color: #b1b1b1;
}
section.courses {
float: right;
width: 660px;
}
article {
clear: both;
width: 100%;
}
h2 {
text-align: center;
}
hgroup {
margin-top: 20px;
}
figure {
float: left;
width: 290px;
height: 260px;
padding: 5px;
}
figcaption {
font-size: 90%;
text-align: left;
padding-bottom: -500px;
}
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 {
background-color: #3b3b3b;
}
a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
h1,
h2,
h3 {
font-weight: bold;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;
}
h3 {
margin: 0px 0px 10px 0px;
color: #ffffff;
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #ffffff;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
}
img {
width: 100%;
}
* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Make the images invisible by default */
.Containers {
display: none;
}
.ContainersImage {
display: block;
}
/* forward & Back buttons */
.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);
}
/* Caption Info */
.Info {
color: #5d534a;
font-size: 16px;
padding: 10px 14px;
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
/* The circles or bullets and indicators */
.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;
}
view raw style.css hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Tugas 5 RK B

Image
 Uber Ride Deskripsi Uber Uber Technologies Inc. adalah perusahaan jaringan transportasi asal San Francisco, California, yang menciptakan aplikasi penyedia transportasi yang menghubungkan penumpang dengan sopir kendaraan sewaan serta layanan tumpangan langsung. Perusahaan ini juga mengatur layanan penjemputan di berbagai kota di seluruh dunia. Mobil dapat dipesan dengan mengirim pesan teks atau memakai aplikasi bergerak khusus—pilihan terakhir juga bisa digunakan untuk melacak lokasi mobil pesanan pengguna. Tujuan utama Uber Tujuan dari dibuatnya uber adalah untuk menjangkau semua daerah dan menghubungkan melalui transportasi. Dari sini visi dan misi Uber dapat dijabarkan sebagai: Meningkatkan kualitas hidup  Dengan adanya Uber, diharapkan pengguna mendapatkan kemudahan dalam berbagai sektor hidupnya. Selalu Tersedia bagi setiap pelanggannya Uber selalu berusaha menciptakan environment yang konsisten dan selalu tersedia kapanpun dan dimanapun. Menciptakan peluang baru Uber ber...
Read more