[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:






Source Code:
<!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

Postingan populer dari blog ini

[Tugas Study Case] Simple Landing Page

Gambar
Simple Landing Page Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link GitHub:  https://github.com/rukiwatsuyoidesune/Web-LandingPage Link Website:  https://topupin-landing-page.vercel.app Source Code: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> TopUpin! </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> * { margin : 0px ; padding : 0px ; ...
Baca selengkapnya

[Tugas Pertemuan ke-1] Portofolio

Gambar
 Membuat Web Portofolio Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Link Website Portofolio:  https://luckyvdw.vercel.app/ Link Repo GitHub:  https://github.com/rukiwatsuyoidesune/Web-Portfolio Link CV:  https://drive.google.com/file/d/1Hrije4sIHTRPKH9X0Nuk83PHi4sjhRvr/view?usp=sharing Link Blogspot:  https://luckyvdw.blogspot.com Pertemuan pertama minggu lalu, kami diajarkan pengantar web programming. Lalu sebelum kelas berakhir, kami diberi tugas untuk membuat website portofolio/pribadi dengan memuat CV. Berikut adalah yang saya lakukan untuk mengerjakan tugas ini: 1. Memahami konsep penggunaan elemen HTML. 2. Memahami perbedaan antara header, body, main, div, section, dan article. 3. Mengatur layout website dan menggunakan CSS. 4. Membuat dan mengupload repository ke github. 5. Menggunakan vercel untuk men-deploy website.
Baca selengkapnya

[Tugas Pertemuan ke-3] Tabel

Gambar
Membuat Tabel Nama: Lucky Virgiawan Dwi Widodo NRP: 5053231007 Kelas: Pemrograman Web (M) Tabel Nilai Siswa Source Code (HTML): <!DOCTYPE html> <html lang= "id" > <head> <title> HTML Table </title> <style> table , th , td { border : 2px solid black; border-collapse : collapse ; } th , td { padding : 10px ; } </style> </head> <body> <table style= "width:75%" > <thead style= "background-color: #305bb1;" > <tr> <th rowspan= "2" style= "color: white;" > Nama </th> <th colspan= "3" style= "color: white;" > Nilai </th> </tr> <tr> <th style= "color: white;" > Kimia </th>...
Baca selengkapnya