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

HTML-CSS
1

Tell us what’s happening:

Why can’t I complete the no. 2 objective which is four list items inside an unordered list, my list already is 4 so what’s the problem with this??

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">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="styled-list">
        <h1>My To-Do List</h1>

    <ul class="todo-list" style="list-style-type: none;">
        <div class="todo-item">
        <li>
            <input type="checkbox" id="keyboards">
            <label for="keyboards">Explore Gaming Keyboard</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.razer.com/ap-en/pc/gaming-keyboards-and-keypads?srsltid=AfmBOooX9IyOv-6B6V9jiH6xeat20Jkw3mSWkjduBDbzODk68Jn6AI_Q" target="_blank">Store link</a></li>
            </ul>
        </li>
        </div>

        <div class="todo-item">
        <li> 
            <input type="checkbox" id="va">
            <label for="va">Learn VA skills</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://katambray.brayarn.com/" target="_blank">Virtual Assistant Website</a></li>
            </ul>
        </li>
        </div>

        <div class="todo-item">
        <li>
            <input type="checkbox" id="email">
            <label for="email">Check Emails</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox" target="_blank">Gmail</a></li>
            </ul>
        </li>
        </div>
        
        <div class="todo-item">
        <li>
             <input type="checkbox" id="facebook">
            <label for="facebook">Check Facebook</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.facebook.com/" target="_blank">Facebook page</a></li>
            </ul>
        </li>
        </div>
    </ul>
    </div>
</body>
</html>

/* file: styles.css */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #39375B;
    list-style: none;
}

.styled-list {
    width: 500px;
    background-color: #C9ADA7;
    padding: 20px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.todo-item {
    width: 400px;
    background-color: #E0D0CC;
    border-radius: 15px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 45px;
    min-height: 70px;
}

ul {
    list-style-type: square;
    font-size: 15px;
}

.sub-item {
    margin-top: 15px;
}

h1 {
    text-align: center;
    font-size: 40px;
    color: black;
}

a {
    text-decoration: none;
}

a:link {
    color: purple;
}

a:visited {
    color: blue;
}

a:hover {
    color: red;
}

a:focus {
    outline: solid 2px green;
}

a:active {
    color: gray;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.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 @mikylapelaez03!

Try checking your code with this HTML Validator until you are more comfortable with HTML.

And, to pass the tests, it’s always best to implement the user stories exactly as asked without adding any “extras.”

Happy coding!