Nama: Geraldo Benjamin Nainggolan
NRP: 5053231014
Latihan pada pertemuan minggu ini adalah membuat website tiruan dengan tema warung.
Link: Warung
Dokumentasi HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<div class="title">
<h1>WARUNG TEGAL</h1>
<h2>Warungnya Indonesia</h2>
</div>
</header>
<nav>
<ul>
<li>beranda</li>
<li class="white-tag">daftar makanan</li>
<li class="white-tag">katering</li>
<li class="white-tag">tentang</li>
<li class="white-tag">kontak</li>
</ul>
</nav>
<section class="main">
<article>
<div class="foods">
<div class="food">
<img src="./assets/soto.jpeg" alt="">
<p>Soto Indonesia</p>
</div>
<div>
<h2>Soto Ayam</h2>
<h4>Makanan Berkuah</h4>
<p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengankuah yang berwarna kekuningan.</p>
</div>
</div>
<div class="foods">
<div class="food">
<img src="./assets/pecel.jpeg" alt="">
<p>Soto Indonesia</p>
</div>
<div>
<h2>Masakan Pecel</h2>
<h4>Makanan dengan Bumbu Kacang</h4>
<p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran</p>
</div>
</div>
</article>
<aside>
<h2>Masakan Populer</h2>
<div class="tag"> <a href=""><h3>Sayur Sop</h3></a></div>
<div class="tag"> <a href=""><h3>Sayur Asem</h3></a></div>
<div class="tag"><a href=""><h3>Sayur Lodeh</h3></a></div>
<div class="tag"><a href=""><h3>Sayur Bayam</h3></a></div>
<h2>Kontak</h2>
<p>Warung Tegal di seluruh Indonesia</p>
</aside>
</section>
<section>
<footer>
<p>@ 2023 Warung Tegal</p>
</footer>
</section>
</body>
</html>
Dokumentasi style:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h4{
color: red;
}
aside h2, h3{
color: red;
}
header {
padding: 10px 20px;
background-color: grey;
}
h1 {
max-width: fit-content;
border-bottom: 2px solid rgb(249, 249, 249);
margin-bottom: 0;
}
header h1, header h2 {
color: aliceblue;
}
.title {
display: flex;
flex-direction: column;
width: 300px;
}
.title h2 {
margin-top: 2px;
align-self: flex-end;
}
nav {
background-color: rgb(111, 103, 103);
}
ul {
margin-top: 0;
display: flex;
flex-direction: row;
gap: 30px;
padding: 10px 20px;
}
ul li {
list-style: none;
}
.white-tag {
color: aliceblue;
}
.main {
display: flex;
gap: 40px;
}
article {
margin-top: 30px;
width: 900px;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.foods {
margin-left: 30px;
display: flex;
gap: 40px;
margin-bottom: 30px;
}
.foods .food {
padding: 20px;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.foods .food p {
margin-top: 1px;
}
.foods img {
width: 400px;
}
aside {
width: 300px;
padding: 20px;
position: relative;
}
aside h2 {
margin-bottom: 10px;
}
aside a{
text-decoration: none;
}
aside .tag {
margin-left: 5px;
text-decoration: none;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
width: 300px;
height: 30px;
display: flex;
align-items: center;
padding: 10px;
}
aside .tag:hover,
aside .tag:focus,
aside .tag:active {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
footer {
background-color: grey;
padding: 3px;
}
footer p {
color: white;
margin-left: 5px;
}
Comments
Post a Comment