Pertemuan 3.1
Aisyahra Alhanni Satria
5053231010
Membuat web mengenai event dan acara
https://github.com/imabutterghost/Webbb
untuk kodingannya:
<!DOCTYPE html>
<html lang="id">
<head>
<style>
/* General Styling */
body {
margin: 0;
padding: 0;
font-family: 'Times New Roman', Courier, monospace;
background-image: url('https://static.vecteezy.com/system/resources/previews/035/410/274/large_2x/ai-generated-retro-asian-city-street-at-night-illustration-old-traditional-town-with-anime-style-concept-free-photo.jpeg'); /* Ganti dengan URL gambar Anda */
background-size: cover;
background-position: center;
color: #ffffff;
}
/* Transparent, Blurry Header */
header {
position: fixed;
top: 0;
width: 100%;
padding: 20px;
background: rgba(255, 255, 255, 0.3); /* Semi-transparent */
backdrop-filter: blur(10px); /* Blurred background */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
}
header h1 {
font-size: 32px;
color: #ffffff;
text-align: center;
margin: 0;
}
/* Full Section Styling */
section {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 80px; /* Space for header */
}
/* Styling for Left Box */
.leftBox {
width: 90%;
max-width: 600px;
margin-bottom: 30px;
padding: 30px;
background: rgba(23, 34, 65, 0.9); /* Slightly transparent background */
border-radius: 20px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.leftBox h1 {
font-size: 40px;
color: #ffffff;
text-transform: uppercase;
margin-bottom: 10px;
}
.leftBox p {
font-size: 18px;
line-height: 1.6;
}
/* Events Section Styling */
.events {
width: 90%;
max-width: 600px;
}
.events ul {
list-style: none;
padding: 0;
}
.events ul li {
background: rgba(253, 221, 230, 0.9); /* Slightly transparent background */
margin: 15px 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.events ul li:hover {
transform: scale(1.05);
}
.time {
background: #1e2a47;
padding: 20px;
width: 100%;
text-align: center;
color: #ffffff;
}
.time h2 {
font-size: 40px;
margin: 0;
}
.time h2 span {
font-size: 24px;
}
.details {
padding: 20px;
background: #0e1028;
color: #ffffff;
}
.details h3 {
margin: 0 0 10px;
font-size: 24px;
color: #ffffff;
}
.details p {
font-size: 16px;
line-height: 1.5;
}
.details a {
display: inline-block;
margin-top: 10px;
text-decoration: none;
color: #ffffff;
background: #1e2a47;
padding: 10px 15px;
border-radius: 5px;
transition: background 0.3s;
}
.details a:hover {
background: #225ea9;
}
</style>
</head>
<body>
<header>
<h1>Acara Pasar Malam Modern</h1>
</header>
<section>
<div class="leftBox">
<div class="content">
<h1>
Selamat Datang di Pasar Malam Modern
</h1>
<p>
Ayo bergabung dengan keseruan di pasar malam modern! Kami menghadirkan berbagai wahana, kuliner unik, dan pertunjukan menarik untuk seluruh keluarga. Jangan lewatkan kesempatan untuk menikmati suasana malam yang penuh warna!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div class="time">
<h2>
15 <br><span>Maret</span>
</h2>
</div>
<div class="details">
<h3>Pasar Malam & Kuliner</h3>
<p>
Nikmati berbagai sajian kuliner tradisional hingga modern sambil menikmati suasana malam yang penuh lampu-lampu cantik.
</p>
<a href="#">Lihat Detail</a>
</div>
</li>
<li>
<div class="time">
<h2>
27 <br><span>Mei</span>
</h2>
</div>
<div class="details">
<h3>Pertunjukan Musik & Hiburan</h3>
<p>
Saksikan pertunjukan musik dari artis-artis lokal dan berbagai hiburan seru yang akan menghidupkan suasana malam Anda!
</p>
<a href="#">Lihat Detail</a>
</div>
</li>
<li>
<div class="time">
<h2>
12 <br><span>Agustus</span>
</h2>
</div>
<div class="details">
<h3>Wahana Permainan & Lampion</h3>
<p>
Ayo coba berbagai wahana permainan yang menegangkan dan nikmati parade lampion indah di malam hari!
</p>
<a href="#">Lihat Detail</a>
</div>
</li>
</ul>
</div>
</section>
</body>
</html>
Dan berikut adalah tampilan web nya:
Comments
Post a Comment