Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Duurzame Wereld</title>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
        function toggle() {
            var x = document.getElementById("nav");
            var t = document.getElementById("hamburger");
            if (x.className === "nav") {
                x.className += " responsive";
                t.className = "icon open";

            } else {
                x.className = "nav";
                t.className = "icon close";
            }
        }
    </script>
</head>
<body>
    <header>
        <div id="header">
            <img src="img/favicon.ico" id="logo" />
            <div id="titel">Duurzame wereld</div>
        </div>
    </header>
    <nav>
        <div class="nav">
            <ul id="nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="#">Economie</a></li>
                <li><a href="#">Milieu</a></li>
                <li><a href="#">Mens</a></li>
                <li><a href="#">Conclusie</a></li>
            </ul>
        </div>
        <div class="icon" id="hamburger">
            <a href="#" onclick="toggle()">&#9776;</a>
        </div>
    </nav>
    <article>
        <div class="flex">
            <div class="artikel" id="artikel1">
                <p>
                    Hoi
                </p>
                <br /><br />
                <p>
                    Hoi
                </p>
                <br /><br />
                <p>
                    Hoi
                </p>
            </div>
            <div class="artikel">
                <img class="artikel" src="img/favicon.ico" /><br />
                <button class="artikel" type="button">Button</button>
            </div>
        </div>
        <div class="flex">
            <div class="artikel">
                <img class="artikel" src="img/favicon.ico" /><br />
                <button class="artikel" type="button">Button</button>
            </div>
            <div class="artikel">
                <p>
                    Hoi
                </p>
                <br /><br />
                <p>
                    Hoi
                </p>
                <br /><br />
                <p>
                    Hoi
                </p>
            </div>
        </div>
    </article>
    <footer>
        <div class="flex">
            <div id="overons">
                <p>Over Ons</p>
                Ons doel is om te zorgen dat mensen
                <br />
                die graag duurzaam willen leven een
                <br />
                goede manier kunnen vinden op deze
                <br />
                website
            </div>
            <div id="contact">
                <p>Contact</p>
                <ul class="contact">
                    <li class="contact"><i class="fas fa-phone"></i> 06-19375732</li>
                    <li class="contact"><i class="far fa-envelope"></i> <a href="mailto:technova@duurzaam.nl">technova@duurzaam.nl</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>