Untitled

<!DOCTYPE html>
<html>

<head>
    <title>Ours Indonesia</title>
    <style>
        body {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
        }

        header {
            height: 100px;
            width: 100%;
            background: linear-gradient(red, white);
            float: left;
        }

        #globe {
            height: 50px;
            width: 50px;
            background: white;
            margin-left: 10px;
            margin-top: 25px;
            border-radius: 25px;
        }

        #title {
            font-size: 30px;
            margin-left: 70px;
            margin-top: -40px;
            font-weight: bold;
        }

        .navbar {
            text-align: center;
            width: 100%;
            background: blue;
        }

        .navbar ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

        .navbar ul li {
            display: block;
            padding: 10px;
            color: white;
            text-decoration: none;
            width: 100px;
        }

        .navbar ul li:hover {
            background: skyblue;
            color: white;
        }

        .navbar ul:after {
            content: "";
            clear: both;
            display: block;
        }

        .navbar ul li {
            float: left;
            list-style: none;
        }

        .navbar ul li a {
            text-decoration: none;
            color: white;
        }

        .mid {
            border: 1px solid grey;
        }

        table {
            border-collapse: collapse;
            width: 95%;
            margin-left: 20px;
            margin-top: 10px;
        }

        td {
            border: 1px solid black;
            text-align: left;
            padding: 8px;
            width: 33%;
        }

        td audio {
            width: 100%;
        }

        th {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        footer {
            height: 50px;
            background: black;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }

        span {
            color: grey;
        }
    </style>
</head>

<body>
    <header>
        <div id="globe"></div>
        <div id="title">Ours Indonesia</div>
    </header>

    <div class="navbar">
        <ul>
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#geo">Geography</a>
            </li>
            <li>
                <a href="#song">Nation Song</a>
            </li>
            <li>
                <a href="#culture">Culture</a>
            </li>
        </ul>
    </div>

    <div class="mid">
        <table>
            <tr>
                <th>Nation Song</th>
                <th>Song Writer</th>
                <th>Play</th>
            </tr>
            <tr>
                <td>Bangun Pemudi Pemuda</td>
                <td>Alfred Simanjuntak</td>
                <td>
                    <audio controls>
                        <source src="audio_BangunPemudiPemuda.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Berkibarlah Benderaku</td>
                <td>Ibu Soed</td>
                <td>
                    <audio controls>
                        <source src="audio_berkibarlahbenderaku.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Garuda Pancasila</td>
                <td>Sudharnoto</td>
                <td>
                    <audio controls>
                        <source src="audio_GarudaPancasila.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Halo-Halo Bandung</td>
                <td>Ismail Marzuki</td>
                <td>
                    <audio controls>
                        <source src="audio_HaloHaloBandung.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Hari Merdeka</td>
                <td>Husein Mutahar</td>
                <td>
                    <audio controls>
                        <source src="audio_harimerdeka.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Indonesia Raya</td>
                <td>Wage Rudolf Soepratman</td>
                <td>
                    <audio controls>
                        <source src="audio_Indonesia_Raya.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Mengheningkan Cipta</td>
                <td>Truno Prawit</td>
                <td>
                    <audio controls>
                        <source src="audio_mengheningkancipta.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Syukur</td>
                <td>Husein Mutahar</td>
                <td>
                    <audio controls>
                        <source src="audio_Syukur.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
            <tr>
                <td>Tanah Airku</td>
                <td>Ibu Soed</td>
                <td>
                    <audio controls>
                        <source src="audio_Tanah_Airku.ogg" type="audio/ogg">
                    </audio>
                </td>
            </tr>
        </table>
    </div>

    <footer>
        <span>Copyright &copy; 2018 </span> &nbsp;Ours Indonesia&nbsp;
        <span>All rights reserved.</span>
    </footer>
</body>

</html>