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

HTML-CSS
1

Tell us what’s happening:

Not sure why I can’t achieve step 7. It looks to me like I have the proper class identification for the sub list.

Your code so far

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

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

<body>
    <ul class="todo-list">
        <li>
            <input id="one" type="checkbox">
            <label for="one">one</label>
            <ul class="sub-item">
                <li class="sub-item-link"><a href="https://i0.wp.com/www.blog.catandturtle.net/wp-content/uploads/2013/04/201304129_copyrightJessYarnell.jpg" target="_blank">link 1</a></li></ul>
        </li>


        <li>
            <input id="two" type="checkbox">
            <label for="two">two</label>
            <ul class="sub-item">
                <li class="sub-item-link"><a href="https://kids.mongabay.com/wp-content/uploads/2022/07/8-Mrs._Goulds_Sunbird-e1652738328925-768x512-1.jpg" target="_blank">link 2</a></li></ul>
        </li>

        <li>
            <input id="three" type="checkbox">
            <label for="three">three</label>
            <ul class="sub-item">
                <li class="sub-item-link"><a href="https://kids.mongabay.com/wp-content/uploads/2022/07/8-Mrs._Goulds_Sunbird-e1652738328925-768x512-1.jpg" target="_blank">link 3</a></li></ul>
        </li>

        <li>
            <input id="four" type="checkbox">
            <label for="four">three</label>
            <ul class="sub-item">
                <li class="sub-item-link"><a href="https://kids.mongabay.com/wp-content/uploads/2022/07/8-Mrs._Goulds_Sunbird-e1652738328925-768x512-1.jpg" target="_blank">link 4</a></li></ul>
        </li>
        </ul>

</body>

</html>

/* file: styles.css */
.todo-list {
  list-style: none;
}
a {
  text-decoration: none;
}

a:hover {
  color:yellow
}

a:active {
  color: red;
}
a:visited {
  color: purple;
}

a:focus {
  outline: solid 2px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

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

2

Hi @trevor20011972
I would try working on the other steps. When I can’t get a step to pass, I like to work on the others and come back to the problem with a fresh mind. Keep coding!

3

Hi @trevor20011972

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

The class appears in the li element. Is that where it goes?

Happy coding