index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Poppins:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <title>Library</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>
    <header class="header">
        <div class="library"> My Library </div>

    </header>
    <main>

        <div class="shelf" id="shelf">
            <button id="modalOpen" class="modalOpen"> + </button>

        </div>


        <div id="modal" class="modal">
            <div id="modalWrapper" class="modalWrapper">
                <div class="modal-content">
                    <div class="modalTitle"> Add a new Book </div>
                    <input class="input" type="text" id="title" name="title" placeholder="title">
                    <input class="input" type="text" id="author" name="author" placeholder="author">
                    <input class="input" type="number" id="pages" name="pages" placeholder="pages">
                    <label for="readSts" class="checkLable"> Have you read it? <input type="checkbox" id="readSts"
                            name="status" class="checkBox"></label>
                    <button id="add" type="submit" class="modalAdd"> ADD </button>
                </div>
            </div>
        </div>

    </main>
    <footer> </footer>

</body>

</html>