<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf8"/>

    <style>
      body {
        display: grid;
        grid-template: 
          "summary detail" 1fr
          "controls controls" 40px
          /1fr      1fr
        ;

      }

      task-list {
        grid-area: summary;

        display: grid;
      }

      task-summary:hover {
        background-color: #eee;
        cursor: pointer;
      }

      task-summary:active {
        background-color: #ddd;
      }

      task-detail {
        grid-area: detail;

        background-color: #eee;
      }
    </style>
  </head>
  <body>

    <task-list>
    </task-list>

    <task-detail>
      <input type="checkbox" name="done"/>
      <input type="text" name="description"/>
    
      <input type="date" name="due_date"/>
    
      <button>Delete</button>
    </task-detail>

    <button>Add Task</button>
    <script src="main.js"></script>

  </body>
</html>