nav.html

<!-- https://bulma.io/documentation/layout/hero/ -->
<section class="hero is-primary is-bold" style="background:url('covid.jpg') center">
    <div class="hero-body">
        <div class="container">
            <!-- TODO: Change title -->
            <h1 class="title">Are we winning the war against COVID-19?</h1>
            <!-- TODO: Change subtitle -->
            <h2 class="subtitle">A d3.js visualization by Zhenzhen Wang</h2>
        </div>
    </div>
</section>

<!-- Page navigation -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
    <div class="container">
        <div class="navbar-brand">
            <!-- TODO: Change link to repository homepage if needed -->
            <!-- TODO: Change which navbar-item is-active if needed -->
            <a class="navbar-item" href="index.html">
                <span class="icon"><i class="fas fa-home"></i></span>
                <span>Home</span>
            </a>

            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
                data-target="main-menu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="main-menu" class="navbar-menu has-text-weight-medium">
            <!-- Left navbar items -->
            <div class="navbar-start">
                <a class="navbar-item" href="data.html" title="Data">
                    <span class="icon"><i class="fas fa-table"></i></span>
                    <span>Data</span>
                </a>

                <!-- TODO: Modify or remove dropdown -->
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        <span class="icon"><img src="https://img.icons8.com/android/24/000000/scatter-plot.png"
                                style="width: 15px;"></span>
                        <span>Visualization</span>
                    </a>

                    <div class="navbar-dropdown">
                        <a class="navbar-item" href="alpha.html">
                            <span class="icon"><i class="fas fa-chart-bar"></i></span>
                            <span>Alpha Release</span>

                            <a class="navbar-item" href="beta.html">
                                <span class="icon"><i class="fas fa-chart-pie"></i></span>
                                <span>Beta Release</span>
                            </a>

                        </a>
                        <a class="navbar-item" href="final.html">
                            <span class="icon"><i class="fas fa-chart-area"></i></span>
                            <span>Final Release</span>
                        </a>

                    </div>
                </div>
            </div>

            <!-- Right navbar items -->
            <div class="navbar-end">
                <!-- TODO: Update as needed -->

                <a class="navbar-item" href="acknowledgement.html" title="About">
                    <span class="icon"><i class="fas fa-info-circle"></i></span>
                    <span>Acknowledgement</span>
                </a>

                <a class="navbar-item" href="about.html" title="About">
                    <span class="icon"><i class="fas fa-info-circle"></i></span>
                    <span>About</span>
                </a>
            </div>
        </div>
    </div>
</nav>
<!-- End page navigation -->