Contoh Program >>>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu Makanan</title>
<style>
body {
background: url('up.jpg') no-repeat center center fixed;
background-size: cover;
font-family: "Poppins", Arial, sans-serif;
color: #fff;
margin: 0;
padding: 30px;
}
h1 {
text-align: center;
margin-bottom: 10px;
font-size: 40px;
font-weight: 700;
letter-spacing: 2px;
text-shadow: 3px 3px 8px #000;
}
.marquee {
width: 400px;
margin: 8px auto;
font-size: 22px;
font-weight: bold;
color: #ffeb3b;
text-shadow: 2px 2px 5px #000;
}
table {
width: 85%;
margin: auto;
border-collapse: collapse;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 25px rgba(0,0,0,0.7);
}
table th, table td {
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 16px;
}
table th {
background: linear-gradient(45deg, #333, #555);
font-size: 18px;
letter-spacing: 1px;
}
tr img {
border-radius: 10px;
box-shadow: 0 0 10px rgba(255,255,255,0.4);
}
tr {
transition: 0.3s ease;
}
tr:hover {
background-color: rgba(255,255,255,0.15) !important;
transform: scale(1.02);
}
</style>
</head>
<body>
<h1>Menu Makanan</h1>
<div class="marquee"><marquee behavior="alternate">Bagycb</marquee></div>
<div class="marquee"><marquee behavior="alternate">2019</marquee></div>
<table>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Nama Makanan</th>
<th rowspan="2">Nama Daerah</th>
<th rowspan="2">Foto</th>
<th colspan="3">Harga</th>
</tr>
<tr>
<th>Paket 1</th>
<th>Paket 2</th>
<th>Paket 3</th>
</tr>
<tr style="background-color: #b44ac0; text-align: center;">
<td>1</td>
<td>Gudeg Jogja</td>
<td>Yogyakarta</td>
<td><img src="gudeg1.jpg" width="100" height="100"></td>
<td>Rp.25.000 <br>isi 1 bungkus</td>
<td>Rp.48.000 <br>isi 2 bungkus</td>
<td>Rp.120.000 <br>isi 5 bungkus</td>
</tr>
<tr style="background-color: #d14a4a; text-align: center;">
<td>2</td>
<td>Sate Madura</td>
<td>Madura</td>
<td><img src="madura.jpg" width="100" height="100"></td>
<td>Rp.15.000 <br>isi 1 bungkus</td>
<td>Rp.28.000 <br>isi 2 bungkus</td>
<td>Rp.75.000 <br>isi 6 bungkus</td>
</tr>
<tr style="background-color: #4a66d1; text-align: center;">
<td>3</td>
<td>Dodol Garut</td>
<td>Garut</td>
<td><img src="dodol.jpg" width="100" height="100"></td>
<td>Rp.27.000 <br>isi 20 pcs</td>
<td>Rp.79.000 <br>isi 60 pcs</td>
<td>Rp.155.000 <br>isi 120 pcs</td>
</tr>
<tr style="background-color: #e3d01b; color:black; text-align:center;">
<td>4</td>
<td>Sosis Solo</td>
<td>Solo</td>
<td><img src="sosis.jpg" width="100" height="100"></td>
<td>Rp.30.000 <br>isi 6 pcs</td>
<td>Rp.80.000 <br>isi 18 pcs</td>
<td>Rp.200.000 <br>isi 48 pcs</td>
</tr>
<tr style="background-color: #7a33a8; text-align: center;">
<td>5</td>
<td>Bakpia Pathok</td>
<td>Yogyakarta</td>
<td><img src="bakpia.jpeg" width="100" height="100"></td>
<td>Rp.30.000 <br>isi 1 pack</td>
<td>Rp.120.000 <br>isi 4 pack</td>
<td>Rp.210.000 <br>isi 8 pack</td>
</tr>
<tr style="background-color: #2ea043; text-align: center;">
<td>6</td>
<td>Telur Bebek</td>
<td>Boyolali</td>
<td><img src="telurb.jpg" width="100" height="100"></td>
<td>Rp.28.000 <br>isi 6 pcs</td>
<td>Rp.50.000 <br>isi 12 pcs</td>
<td>Rp.90.000 <br>isi 24 pcs</td>
</tr>
</table>
</body>
</html>
0 Response to "Membuat Menu Makanan Menggunakan HTML"
Post a Comment