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

HTML-CSS
1

Tell us what’s happening:

On the “Build a Stylized To-Do List” assignment, the website is NOT recognising any of my CSS code and for that reason it tells me I’ve failed the tests. I’ve checked my code with Visual Studio Code and everything runs smoothly. Does anyone know if this is just a bug on the website or something else? I’m using Google Chrome btw.

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>

<div id="main">
    <h1>My To-Do List</h1>
    <ul class="todo-list">
            <li>
                <input id="gaming" type="checkbox"/>
                <label for="gaming">Explore gaming keyboards</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.google.com" target="_blank">Store link</a></li>
                </ul>
            </li>

            <li>
                <input id="report" type="checkbox"/>
                <label for="report">Finish the report</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.google.com" target="_blank">Request Access</a></li>
                </ul>
            </li>

            <li>
                <input id="warranty" type="checkbox"/>
                <label for="warranty">View Phone's Warranty</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.google.com" target="_blank">View Receipts</a></li>
                </ul>
            </li>

            <li>
                <input id="specs" type="checkbox"/>
                <label for="specs">Check Processor Specs</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="https://www.google.com" target="_blank">View Model Number</a></li>
                </ul>

            </li>
        </ul>
        </div>

    </div>

</body>

</html>

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

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

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

h1 {
    text-align: center;
    color: rgb(251, 255, 243);
    margin: 20px;
    padding: 5px;
}

a {
    text-decoration: none;
    color: rgb(51, 108, 155);
}


.sub-item-link:visited {
    color: rgb(114, 170, 216);
}

.sub-item-link:hover {
    color: saddlebrown;
}

.sub-item-link:focus {
    outline: darkolivegreen;
}

.sub-item-link:active {
    color: rgb(214, 104, 25);
}


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

how are you linking the css file to the html file?

2 Likes
3

Oh nvm, I had linked the stylesheet to the html doc on VSC but for some reason it didnt get pasted onto the browser xD

1 Like
4

Missed picking the type selector on my end. Thanks for sharing your solution.

5

I spent 3 days on this one. Your version looks so much more legible than whatever I tried to do. Thank you for sharing!

6

pleases i don’t understand something you closed div twice and you open one div or am mistaken.