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

HTML-CSS
1

Tell us what’s happening:

I have finished the project but when i try to test the codes it jst keeps loading continuously

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Stylized TO-DO List</title>
        
        <link href="styles.css" rel="stylesheet"/>
    </head>
    <body>
        <h1>My TO-DO List</h1>
        <div>
            <ul class="to-do-list">
                <div class="item">
                    <li>
                        <input type="checkbox" id="first">
                        <label for="first">Explore Gaming Keyboards</label>
                        <ul class="sub-item">
                            <li>
                                <a href="" target="_blank" class="sub-item-link">Store Link</a>
                            </li>
                        </ul>
                    </li>
                </div> 
                <div class="item">
                    <li>
                        <input type="checkbox" id="second">
                        <label for="second">Finish the report</label>
                        <ul class="sub-item">
                            <li>
                                <a href="" target="_blank" class="sub-item-link">Request Access</a>
                            </li>
                        </ul>
                    </li>
                </div>   
                <div class="item">
                    <li>
                        <input type="checkbox" id="third">
                        <label for="third">View Phone's Warranty</label>
                        <ul class="sub-item">
                            <li>
                                <a href="" target="_blank" class="sub-item-link">View Receipt</a>
                            </li>
                        </ul>
                    </li>
                </div>    
                <div class="item">
                    <li>
                        <input type="checkbox" id="fourth">
                        <label for="fourth">Check Processor Specs</label>
                        <ul class="sub-item">
                            <li>
                                <a href="" target="_blank" class="sub-item-link">View Model Number</a>
                            </li>
                        </ul>
                    </li>
                </div>        
            </ul>
        </div>
    </body>
</html>

/* file: styles.css */
h1 {
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 35px;
    margin-top:0%;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}
.to-do-list {
    margin: 0, auto;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    list-style-type:none;
}
.item {
    margin-bottom: 20px;
    background-color:darkgrey;
    padding: 20px,0;
}
.sub-item {
    font-size: 15px;
    margin: 0, auto;
}
.sub-item-link {
    text-decoration: none;
    color: aqua;
}
.sub-item-link:visited {
    color: red;
}
.sub-item-link:active {
    color: burlywood;
}
.sub-item-link:hover {
    color: green;
}
.sub-item-link:focus {
    outline: chocolate;
}

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

Welcome to the forum. :wave:

Make sure to copy your code and store it locally just in case.

I’m not able to replicate that behaviour by testing your code. I do get this in the console

// running tests
1. You should have one unordered list with the class todo-list.
2. You should have four list items inside the unordered list.
3. The li inside the ul with the class todo-list should contain an input element with the type of checkbox.
4. The li inside the ul with the class todo-list should contain a label element.
9. After the label elements, there should be an unordered list with the class sub-item.
10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.
// tests completed
3

Please try one of the following steps to move forward.

Make sure to copy your code and store it locally just in case.

Click on the “Reset” step button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.

4

thanks, it has passed