index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="./bulma/bulma-pageloader-min.css">
<link rel="canonical" href="https://wikiki.github.io/elements/pageloader/">
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/png" href="./image/favicon_nhd.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debate an Democracy</title>
<meta content="NHD Headers Testing Page" property="og:title" />
<meta content="NHD Project by Idris Vohra and Priansh Mittra" property="og:description" />
<meta content="https://nhd.primitt.tk/home" property="og:url" />
<meta content="#43B581" data-react-helmet="true" name="theme-color" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<style>
    /* Add some padding on document's body to prevent the content
        to go underneath the header and footer */

    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .fixed-header,
    .fixed-footer {
        width: 100%;
        position: fixed;
        z-index: 1;
    }

    .fixed-header {
        top: -1;
    }

    .fixed-footer {
        bottom: 0;
    }

    .container {
        width: 80%;
        margin: 0 auto;
        /* Center the DIV horizontally */
    }

    nav a {
        color: #fff;
        text-decoration: none;
        padding: 7px 25px;
        display: inline-block;
    }
</style>
<link href="./css/new-age.css" rel="stylesheet" />
<header class="fixed-header">
    <nav class="navbar has-background-white" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
                <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
            </a>
        </div>
        <div id="navbar" class="navbar-menu">
            <a class="navbar-item" href="/"> <i class="fal fa-house"></i> </i>&nbsp;Home </a> <a class="navbar-item"
                href="./backroundinfo.html"> <i class="fas fa-send-backward"></i>&nbsp;Background Information </a> <a
                class="navbar-item" href="./dad.html"> <i class="fal fa-question-circle"></i>&nbsp;Debate and Diplomacy
            </a> <a class="navbar-item" href="./mainimpact.html"> <i class="fal fa-calendar-day"></i>&nbsp;Short Term
                Impact </a> <a class="navbar-item" href="./lastingimpact.html"> <i
                    class="fas fa-calendar-week"></i>&nbsp;Legacy </a> <a class="navbar-item" href="./credits.html"> <i
                    class="far fa-receipt"></i>&nbsp;Written Work </a> <a class="navbar-item"
                href="./devcredits.html"> <i class="far fa-code"></i>&nbsp;About </a>
        </div>
        <div class="navbar-end buttons has-addons">
            <div class="navbar-item">
                <div class="buttons">
                </div>
            </div>
        </div>
        </div>
    </nav>
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            // Get all "navbar-burger" elements
            const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

            // Check if there are any navbar burgers
            if ($navbarBurgers.length > 0) {

                // Add a click event on each of them
                $navbarBurgers.forEach(el => {
                    el.addEventListener('click', () => {

                        // Get the target from the "data-target" attribute
                        const target = el.dataset.target;
                        const $target = document.getElementById(target);

                        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                        el.classList.toggle('is-active');
                        $target.classList.toggle('is-active');

                    });
                });
            }

        });
    </script>
</header>

<header>
    <section class="level-center background-grey-extralight has-text-centered is-centered">
        <br>
        <hr class="hr5">
        <p class="title">
            <b>US Imposing Sanctions on Iran</b>
        </p>
        <hr class="hr5">
        <br>
    </section>
</header>
<style>
    .background-grey-extralight {
        background-color: #EAEFF0;
    }

    .blackborder {
        color: black;
    }

    hr {
        background-color: grey;
        margin-left: auto;
        margin-right: auto;
    }

    .hr2 {
        width: 20%;
        margin-left: 10px;
        background-color: black;
    }

    .hr4 {
        width: 10%;
        margin-left: auto;
        margin-right: auto;
        background-color: black;
    }

    .hr3 {
        width: 30%;
        height: 5px;
        margin-left: auto;
        margin-right: auto;
        background-color: aqua;
    }

    .margins {
        margin-left: 10px;
        margin-right: 10px;
    }

    .hr3-blackline {
        width: 30%;
        height: 5px;
        margin-left: auto;
        margin-right: auto;
        background-color: black;

        @media screen and (min-width: 1088px) {
            #my-navbar-menu>div {
                flex: 1;
            }

            #my-navbar-menu>div>div {
                flex: 1;
                justify-content: center;
            }
        }
    }

    .hr5 {
        background-color: blue;
        height: 5px;
        width: 40px;
    }
</style>

<body class="is-mobile">
    <section class="padding">
        <div class="columns">
            <div class="column is-one-half is-one-half">
                <div class="content">
                    <blockquote>“This resolution will put in place the toughest sanctions ever faced by the Iranian
                        government
                        ... It sends an unmistakable message about the international community's commitment to
                        <b>stopping the
                            spread of nuclear weapons.</b>” - President Barack Obama
                    </blockquote>
                    <br>
                    <blockquote>
                        “We're <b>not afraid of sanctions</b>. We're not afraid of military invasion. What <b>frightens
                            us is the
                            invasion of western immorality.</b>”
                        ― Ruhollah Khomeini

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

            <div class="column has-text-centered">
                <img src="https://raw.githubusercontent.com/primitt/nhd/gh-pages/images/unnamed%20(7).png"
                    width="560px">
            </div>
        </div>
</body>