https://github.com/ishaqadhel/pweb-homework-3
Pada Minggu Ke-3, Saya mendapatkan tugas untuk membuat Landing Page Warung Tegal dengan tujuan untuk mengiklankan makanan yang mereka jual. Pada tugas ini saya menggunakan HTML dan CSS.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tegal Food Stall</title>
<link rel="stylesheet" href="style/global.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>Warung Tegal</h1>
<nav>
<ul>
<li><a href="" class="current">beranda</a></li>
<li><a href="">menu masakan</a></li>
<li><a href="">paket katering</a></li>
<li><a href="">tentang</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="images/soto.jpg" alt="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>
</article>
<article>
<figure>
<img src="images/pecel.jpg" alt="pecel" />
<figcaption>Pecel Indonesia</figcaption>
</figure>
<hgroup>
<h2>Pecel</h2>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="">Soto Ayam</a>
<a href="">Soto Daging</a>
<a href="">Sop Ayam</a>
<a href="">Telor Balado</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>+62 81-5688-9090 (Whatsapp)</p>
</section>
</aside>
<footer style="text-align: center;">
© 2021 Warung Tegal Indonesia
</footer>
</div><!-- .wrapper -->
</body>
</html>
global.css
header,
section,
footer,
aside,
nav,
article,
figure,
figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("../images/warteg.jpeg");
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
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("../images/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%;
}
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;
}
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;
}