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">
    <title>To Do List</title>

    <script src="https://kit.fontawesome.com/85c1b76742.js" crossorigin="anonymous"></script>
    <script defer src="script.js"></script>
    <link rel="stylesheet" href="styles.css">


</head>
<body>
    <div class="container">
        <header class="header">
            <div class="title">
                <h1>To Do List</h1>
            </div>
            <div class="sub-title">
                <h2>Tasks: <span class="task-counter">1</span></h2>
                <p>Clear Tasks</p>
            </div>
            <form class="input-title" action="">
                <input class="input-field" type="text" placeholder="Add a task">
                <button><i class="fa-solid fa-plus"></i></button>
            </form>
        </header>
        <main class="body">
            <ul class="list-container">
                
            </ul>
        </main>
    </div>
</body>
</html>


<!--
                    
                <li class="list">
                    <span class="input-checkbox"><input type="checkbox" name="" id=""></span>
                    <span class="paragraph"><p>Car Wash</p></span>
                    <span class="delete"><i class="fa-solid fa-trash"></i></span>
                </li>
                <li class="list">
                    <span class="input-checkbox"><input type="checkbox" name="" id=""></span>
                    <span class="paragraph"><p>Car Wash bla bla bla</p></span>
                    <span class="delete"><i class="fa-solid fa-trash"></i></span>
                </li>
                
-->