Tugas 2 PWEB D : Warung
Naufal Fabian Wibowo
05111940000223
Pemrograman Web D
Tugas 2
Berikut Warteg yang saya buat:
Link Website:
https://warungnaufal.netlify.app/
Source Code
Warung.html
<!DOCTYPE html>
<html>
<head>
<title>Warung</title>
<link rel="stylesheet" href="style.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>Katalog Warung</h1>
<nav>
<ul>
<li><a href="" class="current">Beranda</a></li>
<li><a href="">Menu Makanan</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="img/1.jpeg" style="width: 100%" />
</div>
<div class="Containers">
<img src="img/2.jpg" style="width: 100%" />
</div>
<div class="Containers">
<img src="img/333.jpg" style="width: 100%" />
</div>
<a class="Back" onclick="plusSlides(-1)">❮</a>
<a class="forward" onclick="plusSlides(1)">❯</a>
</div>
<article>
<figure>
<img src="img/1.jpeg" alt="nasi liwet" />
<figcaption>Ayam Penyet</figcaption>
</figure>
<hgroup>
<h2>Ayam Penyet</h2>
<h3>Ayam penyet wonosobo</h3>
</hgroup>
<p>Ayam Penyet adalah ayam goreng yang di penyet dan diberi sambal.</p>
</article>
<article>
<figure>
<img src="img/2.jpg" alt="pecel" />
<figcaption>Ayam Goreng Krispi</figcaption>
</figure>
<hgroup>
<h2>Ayam Krispi</h2>
<h3>Ayam Krispi KFC</h3>
</hgroup>
<p>Ayam goreng krispi adalah ayam goreng yang digoreng dengan baluran tepung.</p>
</article>
<article>
<figure>
<img src="img/333.jpg" alt="nasi Campur" />
<figcaption>Ayam Bakar</figcaption>
</figure>
<hgroup>
<h2>Ayam Bakar</h2>
<h3>Ayam Bakar khas jawa barat</h3>
</hgroup>
<p>Ayam bakar adalah ayam yang dibakar dan diberi bumbu kecap manis.</p>
</article>
</section>
<aside>
<section class="pupolar-recipes">
<h2>Menu Masakan</h2>
<a href="">Ayam Penyet</a>
<a href="">Ayam Goreng Krispi</a>
<a href="">Ayam Bakar</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>
Warung jual aneka ayam.<br />
</p>
</section>
</aside>
<footer>©Warung</footer>
</div>
</body>
</html>
Style.css
header,
nav,
section,
article,
figure,
figcaption,
aside,
footer {
display: block;
}
body {
background-image: url("1.jpg");
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("2.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: #3e51fd;
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;
}
Comments
Post a Comment