very-basic-todo-app/index.html at main · TLTechbender/very-basic-todo-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" type="text/css" href="./reset.css"/>
    <link rel="stylesheet" type="text/css" href="./style.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo App</title>
    <script src="https://kit.fontawesome.com/5b26c2cd27.js" crossorigin="anonymous"></script>
  </head>
  <body class="font-poppins">
     <div id="root">
      <picture class="mx-auto my-10px">
        <img class="mx-auto" src="/img/To-Do-Logo.png" alt="To-Do-Logo">
      </picture>

      <div id="app">
  <!-- This is where the magic happens -->
    </div>


    <div class="welcome flex-column gap-15 my-10px min-w-250 max-w-400 bg-another-shade-of-gray mx-auto border-round-50 padding-16px">
      <h1 class="my-10px">Welcome to my project, Start a todo</h1>
      <ul class="flex flex-column gap-15 info">
        <li>Click on the Add button to start a todo</li>
        <li>You can double click on each a todo to mark it as completed</li>
        <li>Thank you for checking out this lil project be sure to give me a star on github
          <a class="text-orange" href="https://github.com/TLTechbender"><i class="fa-brands fa-github"></i></a>
        </li>
      </ul>
    </div>

  </div>
    <script type="module" src="/App.js"></script>
  </body>
</html>