index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List 2023</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>
        <h1>Task List 2023</h1>
        <form id="new-task-form">
            <input 
                type="text" 
                id="new-task-input" 
                placeholder="What do you have planed?" />
            <input
                type="submit"
                id="new-task-submit"
                value="Add task" />
        </form>
    </header>

    <main>

        <section class="task-list">
            <h2>Tasks</h2>

            <div id="tasks">

                <!-- <div class="task">
                    <div class="content">
                        <input 
                            type="text"
                            class="text"
                            value="My shiny task"
                            readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>
        </section>

    </main>

    <script src="index.js"></script>
</body>
</html>