Nama  : Moh. Izzatul Haqi

NRP    : 5053231032

Prodi   : Rekayasa Perangkat Lunak

Kelas   : Pemrograman Web (M)

Github : GitHub


UI :



Kode :

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ngawi Musical Event</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="content">
<h1>Ngawi Musical</h1>
<p>
Acara musik tahunan terbesar di Ngawi adalah Ngawi Musical, yang menghadirkan berbagai musisi lokal dan nasional untuk tampil di atas panggung megah yang dikelilingi oleh pemandangan alam Ngawi yang memukau. Ngawi Musical adalah tempat yang tepat untuk menikmati musik dangdut dan koplo. Saksikan mulai tanggal 15 Maret - 12 Agustus.
</p>
</div>
<div class="events">
<table>
<tr>
<td class="time">
<h2>15 <br /><span>Maret</span></h2>
</td>
<td class="detail">
<h3>Opening Ceremony</h3>
<p>
Pembukaan resmi Ngawi Musical dengan penampilan spesial dari artis-artis ternama dan penampilan budaya lokal yang akan memberikan pengalaman unik bagi para pengunjung.
</p>
<a href="#">View Details</a>
</td>
</tr>
<tr>
<td class="time">
<h2>27 <br /><span>Mei</span></h2>
</td>
<td class="detail">
<h3>Indie Music Night</h3>
<p>
Malam khusus untuk para musisi indie berbakat yang akan menampilkan lagu-lagu orisinal dan karya kreatif mereka. Ayo datang dan dukung musisi lokal!
</p>
<a href="#">View Details</a>
</td>
</tr>
<tr>
<td class="time">
<h2>12 <br /><span>Agustus</span></h2>
</td>
<td class="detail">
<h3>Dangut and Koplo Music Day</h3>
<p>
Hari spesial untuk musik dangdut dan koplo, dengan penampilan dari musisi yang memainkan alat musik tradisional Indonesia.
</p>
<a href="#">View Details</a>
</td>
</tr>
</table>
</div>
</body>
</html>


CSS :

body {
margin: 0;
padding: 0;
display: flex;
box-sizing: border-box;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAJLKAlVB5AW1WArXTqQE23237ORpVJptT-8PANhmPTDjtpWdF3FCMcV08Z7vsGy_uHM3tqY9oBhpRCJhH94hCsNsEhJigKiaYBwm8gyszlrcLEkS0lIxIXxmFrlh1H9RF9eqkdCNO3PG2GeST1wiUUfUOuvtv-sWsWXAhWjRyuEjMMevVmUoTg34bRmG/s1000/Desain%20tanpa%20judul-16.png');
font-family: Arial, sans-serif;
}

h1,
h2,
h3 {
margin: 0;
}

.content {
color: #fff;
background: rgba(0, 0, 0, 0.5);
padding: 3rem;
transition: 0.5s;
width: 50%;
height: fit-content;
margin: 4rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.content:hover {
background: linear-gradient(45deg, #f4f4f4, #1f1f1f);
}

.content h1 {
font-size: 3rem;
text-transform: uppercase;
}

.content p {
margin: 10px 0 0;
padding: 0;
}

.events {
padding: 3.5rem 2rem;
width: 50%;
background: rgba(47, 50, 62, 0.85);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.time {
background: black;
color: white;
font-size: 1.3rem;
text-align: center;
padding: 1.5rem;
}

.detail {
background: white;
padding: 1rem;
}

td > a {
text-decoration: none;
color: white;
background-color: #535151;
border-radius: 5px;
padding: 0.5rem 1rem;
display: inline-block;
transition: 0.3s;
}

td > a:hover {
background-color: #928d8d;
color: black;
}