task2.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>TODO LIST</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="task2.css">
</head>
<body>
    <header>
        <nav class="Navigation">
            <a href="#">Home</a>
            <a href="#">Signin</a>
            <a href="#">Services</a>
        </nav>
    </header>
</body>
<body>
  <div class="container">
    <h1>Todo List</h1>
    <div class="input-container">
      <input class="todo-input" placeholder="Add a new task...">
      <button class="add-button">
        <i class="fa fa-plus-circle"></i>
      </button>
    </div>
    <div class="filters">
      <div class="filter" data-filter="completed">Complete</div>
      <div class="filter" data-filter="pending">Incomplete</div>
      <div class="delete-all">Delete All</div>
    </div>
    <div class="todos-container">
      <ul class="todos"></ul>
      <img class="empty-image" src="empty.svg">
    </div>
  </div>
  <script src="task2.js"></script>
</body>
</html>