BERLIANA PANCA DEWI NURHIDAYAH
5053231028
Deskripsi : Membuat HMTL 5, dengan detail membuat layout, header, dll. disini aku buat tampian restoran.
Link Website:
<!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>TOMBO LUWE</title>
<style>
header, section, footer, aside, nav, article, figure , figcaption {
display: block;
}
body {
color: #ffffff;
background-color: #7a6740;
background-image: url("background_kayu.jpeg");
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: #e7b594;
}
header {
height: 160px;
background-image: url("header1.jpg");
}
h1 {
text-indent: 350px;
width: 940px;
height: 130px;
margin: 0px;
font-weight: bold;
}
nav, footer {
clear: both;
color: #ffffff;
background-color: #eed7aa;
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: 60px;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #e7b594;
}
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 #070000;
}
aside section a:hover {
color: #985d6a;
background-color: #000000;
}
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>
<img src="background.jpeg" alt="">
<h1>TOMBO LUWE</h1>
<nav>
<ul>
<li><a href="#" class="current">Daftar Makanan</a></li>
<li><a href="#">Daftar Minuman</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="soto.jpeg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<article>
<figure>
<img src="soto.jpeg" alt="soto" class="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>
<p>Harga : 40.000</p>
</article>
<article>
<figure>
<img src="bakso.jpeg" alt="bakso" class="bakso">
<figcaption>
Bakso kuah
</figcaption>
</figure>
<hgroup>
<h2>BAKSO SAPI</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Masakan enak berbahan daging sapi dengan kuah lezat. Dengan Topping tambahan bihun atau sayur dan bawang goreng yang disajikan hangat.</p>
<p>Harga : 45.000</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="#">Seblak</a>
<a href="#">Opor Ayam</a>
<a href="#">Tongseng</a>
<a href="#">Pecel Lele BME</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>085159035050<br>
Jl. Bumi Marina Emas</p>
<p>Instagram @tombo.luwe</p>
</section>
</aside>
<section>
<p>© 2024 Warung Panca</p>
</section>
</div>
</body>
</html>
