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

HTML-CSS
1

Tell us what’s happening:

I don’t know what to do and why it bugs out for the 15 steps. The console says Unvisited links should have a text color set to a color of your choice. No idea what they mean. Anyway gonna take a bit of break from my computer in general. :smiley:

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<ul class="todo-list">
      <li><input id="grocery" type="checkbox">
      <label for="grocery">Buy some groceries</label>
      <ul class="sub-item">
          <li><a class="sub-item-link" href="https://www.google.ca" target="_blank">Grocery shop link</a></li></ul>
      </li>

      <li><input id="make_schedule" type="checkbox">
      <label for="make_schedule">Make a schedule</label><ul class="sub-item">
          <li><a class="sub-item-link" href="https://www.google.ca" target="_blank">page for schedule</a></li></ul></li>

      <li><input id="spapets" type="checkbox">
      <label for="spapets">Do the spa to my pets</label><ul class="sub-item">
          <li><a class="sub-item-link" href="https://www.google.ca" target="_blank">other random link</a></li></ul></li>

     <li> <input id="clothes" type="checkbox">
      <label for="clothes">Go clothes shooping</label><ul class="sub-item">
          <li><a class="sub-item-link" href="https://www.google.ca" target="_blank">Mall link</a></li></ul></li>
          
</body>

</html>

/* file: styles.css */
body {background-color: rgba(85, 107, 0.178) no repeat;
font-family: Arial, sans-serif;}

#main {background-color: beige;
max-width: 500px;
margin-left: auto;
maring-right: auto;
border: solid 3px orange;
border-radius: 10px;}

.todo-list {list-style-type: none;}

h1 {text-align: center;
color: black;
margin: 20px;
padding: 5px;}

a {text-decoration: none;
color: blue}

.sub-item-link:visited {color:red}

.sub-item-link:hover {color:purple}

.sub-item-link:focus {outline:olive}

.sub-item-link:active {color:darkgreen;}

.todo-list > li {
  margin-bottom: 20px;
  margin-right: 40px;
  padding: 5px;
  border: dotted 3px ivory;
  background-color: rgb(237, 243, 238);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0

Challenge Information:

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

2

Hi @christinewho2,

You have a typo in your CSS.

Please look up “what is the pseudo class for an unvisited link”. Then code a selector for that.

Happy coding!