Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

My code passes all but test 10. All my elements have the correct class assigned, unless I am missing something.

  1. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link .

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Styled To-Do List</title>
      <link rel="stylesheet" href="styles.css">
  </head>

  <body>
      <h1>To Do This Week</h1>
      <ul class="todo-list">
          <li>
              <input type="checkbox" id="task-group-1">
              <label for="task-group-1">Housekeeping items</label>
              <ul class="sub-item">
                  <li><a class="sub-item-link" href="https://youtu.be/b1xV9KNcaHU?feature=shared" target="_blank">make the bed</a></li>
                  <li><a class="sub-item-link" href="https://youtu.be/WbZ7QcamCdc?feature=shared" target="_blank">wash the dishes</a></li>
                  <li><a class="sub-item-link" href="https://youtu.be/pzVspJzpwQ0?feature=shared" target="_blank">vacuum</a></li>
              </ul>
          </li>
          <li>
              <input type="checkbox" id="task-group-2">
              <label for="task-group-2">Physical well-being</label>
              <ul class="sub-item">
                  <li><a class="sub-item-link" href="https://maps.app.goo.gl/AtxyX4veyAk7HsV98" target="_blank">go for a walk</a></li>
                  <li><a class="sub-item-link" href="https://maps.app.goo.gl/vQusFSzpW7c7kb7PA" target="_blank">buy groceries</a></li>
                  <li><a class="sub-item-link" href="https://www.amazon.com/STEAMBASE-Scalp-Water-Scaler-Miniature/dp/B0BVFR2D5S?th=1" target="_blank">scalp treatment</a></li>
              </ul>
          </li>
          <li>
              <input type="checkbox" id="task-group-3">
              <label for="task-group-3">Financial well-being</label>
              <ul class="sub-item">
                  <li><a class="sub-item-link" href="https://app.ynab.com/users/sign_in" target="_blank">review/update accounts</a></li>
              </ul>
          </li>
          <li>
              <input type="checkbox" id="task-group-4">
              <label for="task-group-4">Take care of the cat</label>
              <ul class="sub-item">
                  <li><a class="sub-item-link" href="https://youtu.be/to7dSD-tWGs?feature=shared" target="_blank">refresh litter box</a></li>
              </ul>
          </li>
      </ul>

  </body>

</html>

/* file: styles.css */

body {
  margin: auto;
  padding: 20px;
  max-width: 500px;
  font-family: sans-serif;
  background: #f0a87dc9;
}

a {
  text-decoration: none;
}

a:link {
  color: darkgreen;
}

a:visited {
  color: darkgrey;
}

a:hover {
  color: orange;
}

a:focus {
  border: solid 1px red;
}

a:active {
  color: purple;
}

ul {
  margin-bottom: 15px;
}

li {
  list-style-type: none;
}

ul.sub-item li {
  list-style-type: circle;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15 Ddg/18.4

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

What element has the class sub-item-link applied to it? Does that match the instructions?

UPDATE: No. That’s not it. I misread the instruction! Need more coffee. :slight_smile: I’ll keep looking. It looks ok, but there must be something we’re overlooking.

GOT IT! Tests are failing because you added more than the instructions asked for. :roll_eyes: