[Tugas Pertemuan ke-3] Website Event
Membuat Website Event
Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)
Link Web: music-event-web.vercel.app
Link GitHub: https://github.com/rukiwatsuyoidesune/Web-Event.git
Hasil:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fourtwnty</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel="stylesheet"> <style> * { font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: white; background-size: cover; background-position: center; } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 100px; background: black; display: flex; justify-content: space-between; align-items: center; z-index: 100; } .logo { width: 30px; height: auto; } .navbar a { position: relative; font-size: 18px; color: #fff; font-weight: 500; text-decoration: none; margin-left: 40px; } .navbar a::before { content: ''; position: absolute; top: 100%; left: 0; width: 0; height: 2px; background: #fff; transition: .3s; } .navbar a:hover::before { width: 100%; } .info-container { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px; margin-left: 200px; margin-right: 200px; } .info-left p { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .info-right { display: flex; gap: 28px; margin-top: 40px; } .info-right p { font-size: 20px; margin: 0; } .section { margin-top: 40px; margin-left: 200px; margin-right: 200px; font-size: 18px; font-weight: bolder; } .line { margin-top: 10px; margin-bottom: 10px; height: 2px; background-color: black; width: 100%; } .album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; justify-items: center; } .album-item { text-align: center; } .album-item img { width: 100%; max-width: 200px; height: auto; border-radius: 8px; } .album-item p { margin-top: 10px; font-size: 16px; font-weight: bold; } .show-card { border: 2px solid #ddd; padding: 20px; margin-bottom: 20px; border-radius: 8px; background-color: #f9f9f9; display: flex; justify-content: space-between; align-items: center; } .show-info { max-width: 70%; } .show-date { font-size: 18px; font-weight: bold; } .show-place, .show-name { margin-top: 5px; font-size: 16px; } .buy-ticket-btn { padding: 10px 20px; background-color: black; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease; } .buy-ticket-btn:hover { background-color: #303030; } .upcoming-shows-container { margin-top: 30px; margin-left: 200px; margin-right: 200px; } </style> </head> <body> <header class="header"> <a href="#"> <img src="assets/img/nalar.png" alt="Logo" class="logo"> </a> <nav class="navbar"> <a href="#">Home</a> <a href="#about">About</a> <a href="#album">Albums and Singles</a> <a href="#upcoming">Upcoming Shows</a> </nav> </header> <div style="margin-top: 150px; text-align: center;"> <img src="assets/img/fourtwnty.jpg" alt="band" style="max-width: 50%; height: auto;"> <img src="assets/img/logo-fourtwnty.jpg" alt="logo" style="margin-top: 20px;"> </div> <div class="info-container"> <div class="info-left"> <p>GENRE: FOLK-POP</p> <p>ORIGIN: JAKARTA, INDONESIA</p> <p>FORMED: 2010</p> </div> <div class="info-right"> <p>Ryan Maulana</p> <p>Nuwi</p> <p>Ari Lesmana</p> <p>Primanda Ridho</p> <p>Andi Armand</p> </div> </div> <div class="section"> <p style="font-size: 25px; font-weight: bolder; text-align: center;" id="about">About</p> <div class="line"></div> <p> Terbentuk sejak 20 April 2010, Fourtwnty adalah band dengan genre musik folk pop yang dipelopori oleh Ari Lesmana, Nuwi dan Roots. Di tahun 2014, mereka merilis karya pertama mereka dalam bentuk mini album berjudul “Setengah Dulu”. Mini album tersebut merupakan pergerakan awal Fourtwnty dalam menyampaikan pesan kepada pendengar dengan nyaman dan tenang. Ari, Nuwi dan Roots memiliki misi untuk menyampaikan pesan toleransi, kecintaan terhadap alam, persahabatan, keluarga dan pluralisme melalui karya-karya mereka. </p> </div> <div class="section"> <p style="font-size: 25px; font-weight: bolder; text-align: center;" id="album">Albums and Singles</p> <div class="line"></div> <div class="album-grid"> <div class="album-item"> <img src="assets/img/album-lelaku.jfif" alt="Album 1"> <p>Lelaku (2015)</p> </div> <div class="album-item"> <img src="assets/img/album-egofungsiotak.jpg" alt="Album 2"> <p>Ego & Fungsi Otak (2018)</p> </div> <div class="album-item"> <img src="assets/img/album-kusut.jfif" alt="Album 3"> <p>Kusut [Lofi Version] (2019)</p> </div> <div class="album-item"> <img src="assets/img/album-kursigoyang.jfif" alt="Album 4"> <p>Kursi Goyang (2021)</p> </div> <div class="album-item"> <img src="assets/img/album-mangu.jfif" alt="Album 5"> <p>Mangu (2022)</p> </div> <div class="album-item"> <img src="assets/img/album-nalar.jfif" alt="Album 6"> <p>Nalar (2023)</p> </div> </div> </div> <div class="section"> <p style="font-size: 25px; font-weight: bolder; text-align: center;" id="upcoming">Upcoming Shows</p> <div class="line"></div> </div> <div class="upcoming-shows-container"> <div class="show-card"> <div class="show-info"> <p class="show-date">21 September 2024</p> <p class="show-name">MLDSPOT Stage Bus Jazz Tour 2024</p> <p class="show-place">Hetero Space, Purwokerto</p> </div> <a href="#" class="buy-ticket-btn">Buy Tickets</a> </div> <div class="show-card"> <div class="show-info"> <p class="show-date">28 September 2024</p> <p class="show-name">Live Arena Festival</p> <p class="show-place">UMM Dome, Malang</p> </div> <a href="#" class="buy-ticket-btn">Buy Tickets</a> </div> <div class="show-card"> <div class="show-info"> <p class="show-date">19 Oktober 2024</p> <p class="show-name">Live Arena Festival</p> <p class="show-place">Parkir Timur Plaza, Surabaya</p> </div> <a href="#" class="buy-ticket-btn">Buy Tickets</a> </div> <div class="show-card"> <div class="show-info"> <p class="show-date">9 November 2024</p> <p class="show-name">MYACASA</p> <p class="show-place">Megastar Arena, Kuala Lumpur</p> </div> <a href="#" class="buy-ticket-btn">Buy Tickets</a> </div> </div> </div> </body> </html>
Komentar
Posting Komentar