index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Jade's babysitting</title>
</head>

<body>

    <main class="mb-6">

        <nav class="navbar is-transparent p-2">
            <div class="navbar-brand">
                <a class="navbar-item">
                    <img src="img/logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112"
                        height="28">
                </a>
                <div class="navbar-burger" data-target="navbarExampleTransparentExample">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

            <div id="navbarExampleTransparentExample" class="navbar-menu">

                <div class="navbar-start">
                    <a class="navbar-item" href="#over-mij">
                        Over mij
                    </a>
                </div>

                <div class="navbar-end">
                    <a class="navbar-item" href="#">
                        Maak afspraak
                    </a>
                    <a class="navbar-item" href="#">
                        Contact
                    </a>
                </div>
            </div>
        </nav>

        <section class="columns">

            <div class="column is-two-thirds mt-6">

                <div class="purple-bg  p-6 mt-6">
                    <h1 class="title" id="over-mij">Over mij</h1>
                    <h2 class="subtitle">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente porro quas tenetur illum,
                        beatae pariatur ad omnis asperiores voluptatum maxime fuga itaque aut ullam laudantium
                        recusandae unde. Architecto, error quia!
                    </h2>

                    <a class="button">Contact</a>
                </div>
            </div>

            <div class="column">
                <figure class="image is-1x1">
                    <img src="img/profile-pic.png" id="me" class="picture">
                </figure>
            </div>

        </section>

        <div class="is-flex is-justify-content-space-around">
            <section>
                <a class="button">Maak afspraak</a>
            </section>

        </div>

    </main>




    <footer class="footer">
        <div class="content has-text-centered">
            <p>
                <strong>Jade's babysitting</strong> <a href="#over-mij">Over mij</a> Maak snel een afspraak met
                mij via <a href="">Maak afspraak</a>!
            </p>
        </div>
    </footer>
</body>

</html>