Implementando estilos

acá les dejo el ccs usado en la clase

/* You can add global styles to this file, and also import other style files */
html,
body {
  margin: 0;
  padding: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Roboto", sans-serif;
  background: #f5f5f5;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

acá esta el html del home

<section class="todoapp">
    <header class="header">
      <div class="container">
        <h1>My Day</h1>
        <p>All my tasks in one place</p>
        <input
          class="new-todo"
          placeholder="Type new todo"
          autofocus
          type="text"
        />
      </div>
    </header>
    <div class="container todoapp-wrapper">
      <!-- This section should be hidden by default and shown when there are todos -->
      <section class="main">
        <ul class="todo-list">
          <li class="completed">
            <div class="view">
              <input class="toggle" type="checkbox" checked />
              <label>Learn JavaScript</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Learn JavaScript" />
          </li>
          <li>
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Buy a unicorn</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Buy a unicorn" />
          </li>
          <li class="editing">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Make dishes</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Make dishes" />
          </li>
        </ul>
      </section>
      <!-- This footer should be hidden by default and shown when there are todos -->
      <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count"><strong>0</strong> item left</span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
          <li>
            <a routerLink="/" class="selected">All</a>
          </li>
          <li>
            <a routerLink="/pending">Pending</a>
          </li>
          <li>
            <a routerLink="/completed">Completed</a>
          </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed">Clear completed</button>
      </footer>
    </div>
  </section>

acá esta el css del home

.container {
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
  }
  
  .header {
    background-image: linear-gradient(
      224deg,
      hsl(240deg 100% 50%) 2%,
      hsl(249deg 100% 59%) 63%,
      hsl(252deg 99% 64%) 78%,
      hsl(253deg 98% 68%) 87%,
      hsl(254deg 96% 73%) 92%,
      hsl(253deg 93% 77%) 96%,
      hsl(251deg 89% 81%) 98%,
      hsl(246deg 81% 85%) 99%,
      hsl(232deg 68% 88%) 100%,
      hsl(200deg 53% 90%) 100%
    );
    padding-bottom: 4rem;
  }
  
  .hidden {
    display: none;
  }
  
  .todoapp-wrapper {
    position: relative;
    top: -40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .todoapp input::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .todoapp input::-moz-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .todoapp input::input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .header h1 {
    width: 100%;
    font-size: 3rem;
    font-weight: 200;
    color: white;
    padding-top: 2rem;
    margin: 0;
  }
  
  .header h1 + p {
    margin: 0;
    color: white;
    padding-bottom: 1.2rem;
  }
  
  .new-todo,
  .edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .new-todo {
    padding: 2rem;
    height: 65px;
    border: none;
    background: white;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
  }
  
  .main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
  }
  
  .toggle-all {
    width: 1px;
    height: 1px;
    border: none;
    /* Mobile Safari */
    opacity: 0;
    position: absolute;
    right: 100%;
    bottom: 100%;
  }
  
  .toggle-all + label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 65px;
    font-size: 0;
    position: absolute;
    top: -65px;
    left: -0;
  }
  
  .toggle-all + label:before {
    content: "❯";
    display: inline-block;
    font-size: 22px;
    color: #949494;
    padding: 10px 27px 10px 27px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .toggle-all:checked + label:before {
    color: #484848;
  }
  
  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
    padding: 0rem 1rem;
  }
  
  .todo-list li:last-child {
    border-bottom: none;
  }
  
  .todo-list li.editing {
    border-bottom: none;
    padding: 0;
  }
  
  .todo-list li.editing .edit {
    display: block;
    width: calc(100% - 4rem);
    padding: 12px 16px;
    margin: 0 0 0 4rem;
  }
  
  .todo-list li.editing .view {
    display: none;
  }
  
  .todo-list li .toggle {
    text-align: center;
    width: 40px;
    /* auto, since non-WebKit browsers doesn't support input styling */
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none;
    /* Mobile Safari */
    -webkit-appearance: none;
    appearance: none;
  }
  
  .todo-list li .toggle {
    opacity: 0;
  }
  
  .todo-list li .toggle + label {
    /*
          Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
          IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
      */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center left;
  }
  
  .todo-list li .toggle:checked + label {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
  }
  
  .todo-list li label {
    word-break: break-all;
    padding: 15px 15px 15px 60px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
    font-weight: 400;
    color: #484848;
  }
  
  .todo-list li.completed label {
    color: #949494;
    text-decoration: line-through;
  }
  
  .todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #949494;
    transition: color 0.2s ease-out;
  }
  
  .todo-list li .destroy:hover,
  .todo-list li .destroy:focus {
    color: #c18585;
  }
  
  .todo-list li .destroy:after {
    content: "×";
    display: block;
    height: 100%;
    line-height: 1.1;
  }
  
  .todo-list li:hover .destroy {
    display: block;
  }
  
  .todo-list li .edit {
    display: none;
  }
  
  .todo-list li.editing:last-child {
    margin-bottom: -1px;
  }
  
  .footer {
    padding: 1rem 1.5rem;
    height: 20px;
    text-align: center;
    font-size: 15px;
    border-top: 1px solid #e6e6e6;
  }
  
  .todo-count {
    float: left;
    text-align: left;
  }
  
  .todo-count strong {
    font-weight: 300;
  }
  
  .filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0;
  }
  
  .filters li {
    display: inline;
  }
  
  .filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
  }
  
  .filters li a:hover {
    border-color: #6e49fe;
  }
  
  .filters li a.selected {
    border-color: #4c33b1;
  }
  
  .clear-completed,
  html .clear-completed:active {
    float: right;
    position: relative;
    line-height: 19px;
    text-decoration: none;
    cursor: pointer;
  }
  
  .clear-completed:hover {
    text-decoration: underline;
  }
  
  .info {
    margin: 65px auto 0;
    color: #4d4d4d;
    font-size: 11px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-align: center;
  }
  
  .info p {
    line-height: 1;
  }
  
  .info a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
  }
  
  .info a:hover {
    text-decoration: underline;
  }
  
  /*
      Hack to remove background from Mobile Safari.
      Can't use it globally since it destroys checkboxes in Firefox
  */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .toggle-all,
    .todo-list li .toggle {
      background: none;
    }
  
    .todo-list li .toggle {
      height: 40px;
    }
  }
  
  @media (max-width: 430px) {
    .footer {
      height: 50px;
    }
  
    .filters {
      bottom: 10px;
    }
  }

✅