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

HTML-CSS
1

Tell us what’s happening:

.todo-list {
list-style-type: none;
font-family: Arial, sans-serif;
}

.sub-item {
margin-left: 20px;
}

/* 14. No underline by default */
a {
text-decoration: none;
color: #1a73e8;
}

/* 18. Visited */
a:visited {
color: #9c27b0;
}

/* 17. Focus */
a:focus {
outline: 2px solid green;
}

/* 15. Hover */
a:hover {
color: blue;
}

/* 16. Active (click) */
a:active {
color: red;
}

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

    <ul class="todo-list">
        <li>
            <input type="checkbox" id="item-1">
            <label for="item-1">Design Phase</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://figma.com" target="_blank">
                        View Style Guide
                    </a>
                </li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="item-2">
            <label for="item-2">Development Phase</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://github.com" target="_blank">
                        Access Repository
                    </a>
                </li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="item-3">
            <label for="item-3">Testing Phase</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://browserstack.com" target="_blank">
                        Run Cross-Browser Tests
                    </a>
                </li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="item-4">
            <label for="item-4">Deployment Phase</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://vercel.com" target="_blank">
                        Check Deployment Status
                    </a>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>


/* file: styles.css */
 .todo-list {
  list-style-type: none;
  font-family: Arial, sans-serif;
}

.sub-item {
  margin-left: 20px;
}

/* 14. No underline by default */
a {
  text-decoration: none;
  color: #1a73e8;
}

/* 18. Visited */
a:visited {
  color: #9c27b0;
}

/* 17. Focus */
a:focus {
  outline: 2px solid green;
}

/* 15. Hover */
a:hover {
  color: blue;
}

/* 16. Active (click) */
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/143.0.0.0 Safari/537.36

Challenge Information:

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

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Is that the correct stylesheet file name?