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

Curriculum Help
,
1

Tell us what’s happening:

Greetings guys, my code is not working, it says “your unvisited links should have a text color of your choice”, I set the color to black but its not proceeding,

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div id="main">
    <h1>My To Do List</h1>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="grocery"><label for="grocery">Do Grocery</label>
        <ul class="sub-item">
            <li><a class="sub-item-link" href="www.google.com" target="_blank">Grocery list</a></li></ul>

            <li>
                <input type="checkbox" id="study"><label for="study">Study Biology</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="www.google.com" target="_blank">Chapter 10</a></li></ul>
        <li>
                <input type="checkbox" id="meal-prep"><label for="meal-prep">Cook 4 dishes</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="www.google.com"target="_blank">5 One pot Recipes</a></li></ul>

         <li>
                <input type="checkbox" id="cleaning"><label for="cleaning">Clean your room</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="www.google.com" target="_blank">Best Cleaning Hacks</a></li></ul>  
                    </ul>
                    </div>                     



</body>

</html>

/* file: styles.css */
body {
background-color:pink;
font-family:montserrat,sans-serif;
}
#main{
  background-color:white;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  border: solid 10px cream;
  border-radius:10px;
}
h1{
  text-align:center;
  margin:20px;
  padding:40px;
}
.todo-list>li {
  margin:20px;
  padding:30px;
  margin-top:30px;
  margin-bottom:30px;
  background-color:pink;
  border-radius:10px;
}
.sub-item-link {
  text-decoration:none;
  color:black;
}
.sub-item-link:focus{
  outline:white;
}
.sub-item-link:hover{
  color:brown;
}
sub-item-link:active{
  color:white;
}
.sub-item-link:visited{
  color:blue;
}

Your browser information:

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

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-stylized-to-do-list/66c051d13a6a20255a963695.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Try to target an anchor selector, not a class, and give it an RGB color code instead of black.

3

From the screenshots, it looks like the layout is very close to the target design. One thing that might help is inspecting the spacing and alignment rules on the list items individually, as small differences in margins, padding, or flex settings can sometimes create unexpected results. It would also be useful to compare the rendered elements with the project requirements step by step to identify exactly where the output starts to differ.

4

Hi @mehwishrafique78698,

You have a syntax error here related to accessing a class.

And please refer to this reference for the pseudo class to use to access an unvisited link:

CSS :link Pseudo-class

Happy coding

5

it worked, thankyou so much bro!