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

HTML-CSS
1

Tell us what’s happening:

My code will not be accepted past question .14

Any ideas? I have tried various solutions including AI assistance.

Any help would be greatly appreciated!

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">
    <link ref="stylesheet" href="stylesheet.css"
    <title>Stylized To-Do List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <ul class="todo-list">
        <!-- Item 1 -->
        <li>
            <input type="checkbox" id="task-1">
            <label for="task-1">Design system overhaul</label>
            <ul class="sub-item">
                <li><a href="https://figma.com" class="sub-item-link" target="_blank">View Figma File</a></li>
            </ul>
        </li>

        <!-- Item 2 -->
        <li>
            <input type="checkbox" id="task-2">
            <label for="task-2">Weekly sprint planning</label>
            <ul class="sub-item">
                <li><a href="https://trello.com" class="sub-item-link" target="_blank">Check Trello Board</a></li>
            </ul>
        </li>

        <!-- Item 3 -->
        <li>
            <input type="checkbox" id="task-3">
            <label for="task-3">Code review: Auth module</label>
            <ul class="sub-item">
                <li><a href="https://github.com" class="sub-item-link" target="_blank">Open Pull Request</a></li>
            </ul>
        </li>

        <!-- Item 4 -->
        <li>
            <input type="checkbox" id="task-4">
            <label for="task-4">Customer feedback sync</label>
            <ul class="sub-item">
                <li><a href="https://zoom.us" class="sub-item-link" target="_blank">Join Meeting</a></li>
            </ul>
        </li>
    </ul>

</body>
</html>

/* file: styles.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.todo-list {
    list-style: none;
    padding: 0;
    width: 300px;
}

.todo-list > li {
    background: white;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

label {
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
}

.sub-item {
    list-style: none;
    padding-left: 25px;
    margin-top: 8px;
}

/* Link State Styling */

.sub-item-link {
    text-decoration: none; /* No text decoration */
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

/* 1. Unvisited Links */
.sub-item-link:link {
    color: #2a9d8f;
}

/* 2. Visited Links */
.sub-item-link:visited {
    color: #9b59b6;
}

/* 3. Hover State */
.sub-item-link:hover {
    color: #e76f51;
}

/* 4. Focus State */
.sub-item-link:focus {
    outline: 2px dashed #f4a261;
    outline-offset: 4px;
}

/* 5. Active (Clicked) State */
.sub-item-link:active {
    color: #e63946;
}

Your browser information:

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

Challenge Information:

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

2

Welcome to the forum @keron891 !

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

Happy coding!

3

Have you link your styles.css right?
Take a close look!