Pada Minggu Ke-3 kami mendapatkan Tugas Untuk Membuat Web HTML sederhana, yaitu website Warung Tegal, Disini saya menggunakan styling dari CSS untuk merubah penampilan dari web tersebut. Berikut adalah tampilannya.
Disini
saya melakukan penambahan folder images untuk menyimpan gambar-gambar
yang diperlukan untuk mendekorasi web ini. Selain itu, saya menggunakan
media Vercel untuk melakukan Deployment web ini.
Berikut adalah Source Code saya :
<!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">
<style type="text/css">
header,
section,
footer,
aside,
nav,
article,
figure,
figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/megamendung-batik-gold-sketch-pattern.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(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{
color: indianred;
}
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 {
background-color: #de6581;
font-size: 100%;
text-align: center;
padding: 10px 10px 10px 0px;
}
</style>
<title>Warung Tegal</title>
</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>
<section class="courses">
<article>
<figure>
<img src="images/soto.jpg" alt="soto" />
<figcaption>Soto</figcaption>
</figure>
<hgroup>
<h2>Soto Ayam</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Soto ayam adalah makanan khas Indonesia yang menggunakan berbagai macam jenis sayuran dan daging.</p>
</article>
<article>
<figure>
<img src="images/pecel.jpg" alt="pecel" />
<figcaption>Pecel</figcaption>
</figure>
<hgroup>
<h2>Masakan Pecel</h2>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Pecel adalah makanan terkenal di Indonesia yang menggunakan bumbu sambal kacang sebagai bahan utamanya</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="">Sayur Sop</a>
<a href="">Tahu Bulat</a>
<a href="">Tempe Mendoan</a>
</section>
<section class="contact-details">
<h2>Kontak Kami</h2>
<p>Warung Tegal terdekat anda</p>
</section>
</aside>
<footer>
© 2021 Warung Tegal Indonesia
</footer>
</div>
</body>
</html>
Comments
Post a Comment