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

HTML-CSS
1

Tell us what’s happening:

i donot understand what is the problem . why code is not working

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>

<body>
    <ul class="todo-list">

        <li><input type="checkbox" id="id1"><label for="id1">get up </label>
            <ul class="sub-item"> 
               <li> <a class="sub-item-link" href="#link1" alt="" target="_blank"> link 1</a></li>
            </ul>
        </li>

        <li><input type="checkbox" id="id2"><label for="id2">breakfast</label>
            <ul class="sub-item">
                 <li><a class="sub-item-link" href="#link2" alt="" target="_blank"> link 2</a></li>
            </ul>
        </li>

        <li><input type="checkbox" id="id3"><label for="id3">study</label>
            <ul class="sub-item">
                <li> <a class="sub-item-link" href="#link3" alt="" target="_blank"> link 3</a></li>
            </ul>
        </li>

        <li><input type="checkbox" id="id4"><label for="id4">school</label>
            <ul class="sub-item">
                 <li><a class="sub-item-link" href="#link4" alt="" target="_blank"> link 4</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

/* file: styles.css */
.sub-item-link {
  text-decoration: none;
}

.sub-item-link:hover{
  color: rgb(255, 251, 0);

}

.sub-item-link:active{
  color: rgb(0, 255, 234);
}
.sub-item-link:focus{
  color: rgb(16, 243, 0);
}

.sub-item-link:visited{
  color: hotpink;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

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

2

i got it . it’s so simple i was not added the stylesheet . i am so dumb