Tugas PWeb 4


 Nama : Muhammad Faizul Muttaqin Wahyudi

NRP : 5053231005

Prodi : RPL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events and Shows</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-image: url(https://cdn.wallpapersafari.com/30/71/ljIKw6.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
       
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        th, td {
            border: 1px solid #050505;
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #333;
            color: #fff;
        }

        .date {
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            color: #333;
        }

        .event-details h3 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }

        .event-details p {
            margin: 5px 0;
            color: #777;
        }

        .event-details button {
            background-color: #333;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
        }

        .event-details button:hover {
            background-color: #777;
        }
    </style>
</head>
<body>
    <h1>Barcelona Schedule</h1>
   
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Event Details</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="date">
                    <div>
                        20<br>September
                    </div>
                </td>
                <td class="event-details">
                    <h3>Barcelona vs AS Monaco</h3>
                    <p>Champions League match 1 / 8 match </p>
                   
                    <p>At Stadion Louis II</p>
                    <button>View Details</button>
                </td>
            </tr>
            <tr>
                <td class="date">
                    <div>
                        23<br>September
                    </div>
                </td>
                <td class="event-details">
                    <h3>Barcelona vs Villareal</h3>
                    <p>Laliga matchday 6 / 32 match</p>
                    <p>At Stadion El Madrigal</p>
                    <button>View Details</button>
                </td>
            </tr>
            <tr>
                <td class="date">
                    <div>
                        26<br>September
                    </div>
                </td>
                <td class="event-details">
                    <h3>Barcelona vs Getafe</h3>
                    <p>Laliga matchday 7 / 32 match</p>
                    <p>At stadion olimpiade lluís companys</p>
                   
                    <button>View Details</button>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>



Komentar

Posting Komentar

Postingan Populer