index.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <title>Home | WeAffirm</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="icon" href="./walogo.png" type="image/x-icon" />
    <script type="module" src="./main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

    <header>
        <div class="container navbar">
            <div class="logobox">
                <img id="logo" src="./walogo.png" alt="Logo of WeAffirm">
            </div>
            <div class="navbox">
                <ul>
                    <li id="current"><a href="./index.html">Home</a></li>
                    <li><a href="./aboutus.html">About us</a></li>
                    <li><a href="./contacts.html">Contacts</a></li>
                </ul>
            </div>
        </div>
        </heaader>

        <main>
            <div class="container">
                <div class="introtext">
                    <h1>Welcome to <spam id="appName">WeAffirm</spam>!</h1>
                </div>

                <p>To continue your healing journey with affirmations, please select your affirmation settings below.
                </p>
                <p>What category of affirmations would you like to view?</p>

                <div class="categorybox">
                    <div class="options">
                        <button class="select">Love</button>
                        <button class="select">Health</button>
                        <button class="select">Beauty</button>
                        <button class="select">Gratitude</button>
                        <button class="select">Sleep</button>
                        <button class="select">Spiritual</button>
                        <button class="select">Happiness</button>
                        <button class="select">Money</button>
                        <button class="select">Blessing</button>
                        </ul>
                    </div>

                    <div class="buttonbox">
                        <button id="nextButton">Done</button>
                    </div>
                </div>
        </main>

</body>

</html>