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

HTML-CSS
1

Tell us what’s happening:

tests 4,8,9,10, and 14 through 18 cant pass them, i do not know what i am missing or doing wrong and cant correct it, i need help from different eyes and mind. please help.

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" 
        src="style.css">Stylesheet</link>

</head>

<body>

    <h1>To-Do List</h1>

    <ul class="todo-list">

        <li>
            <input id="exercising" type="checkbox"></input>
            <label for="exercising">Exercise</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="www.google.com" target="_blank">Link to exercises</a>
                </li>
            </ul>
        </li>

        <li>
            <input id="reading" type="checkbox"></input>
            <laber for="reading">Read</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="www.google.com" target="_blank">Books to read</a>
                </li>
            </ul>
        </li>

        <li>
            <input id="studying" type="checkbox"></input>
            <label for="studying">Study</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="www.google.com" target="_blank">Study  materials</a>
                </li>
            </ul>
        </li>

        <li>
            <input id="praying" type="checkbox"></input>
            <label for="praying">Pray</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="www.google.com" target="_blank">What to pray for</a>
                </li>
            </ul>
        </li>

    </ul>

</body>

</html>

/* file: styles.css */
a {
  text-decoration: none;
  color: green;
}
a:visited {
  color: orange;
}
a:hover {
  color: purple;
}
a:focus {
  color: yellow;
  outline: 2px;
}
a:active {
  color: red;
}

Your browser information:

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

Challenge Information:

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

2

Welcome to the forum @Klare

One of the elements has a typo.

Check the stylesheet is correctly linked in the html.

Happy coding

3

thank you for your help. i appreciate it.

1 Like