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

HTML-CSS
1

Tell us what’s happening:

I have tried all the methods but it’s still showing ‘Unvisited links should have a text color set to a color of your choice.’ Please tell me what to do in this

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>
<body>
    <h1 class="heading">TO DO LIST</h1>
    
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="Coding"/><label for="Coding">Coding</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Visit Free Code Camp.</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="youtube"/><label for="youtube">Watch Youtube</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.youtube.com/" target="_blank">Youtube</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="laptop"/><label for="laptop">Check Laptop</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.amazon.in" target="_blank">Visit Amazon</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="leetcode"/><label for="leetcode">Solve LeetCode Problems</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://leetcode.com/" target="_blank">Visit Leetcode</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

/* file: styles.css */
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0 auto;
}

.heading {
  text-align: center;
}

.todo-list {
  width: 100%;
  background-color: lavender;
  
  list-style-type: none;
}

.item {
  background-color: lavender;
  width: 100%;
  max-width: 100%;
  text-align: justify;
}

a {
  text-decoration: none;}

  a{     color: IndianRed;
}

a:visited {
  color: Black;
}

a:hover {
  color: Magenta;
}

a:focus {
  outline: 1px solid Black;
  color: limegreen;
}

a:active {
  color: green;
}

Your browser information:

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

Challenge Information:

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

2

Tell us what’s happening:

It’s showing "Unvisited links should have a text color set to a color of your choice."Please tell me what to do.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>
<body>
    <h1 class="heading">TO DO LIST</h1>
    
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="Coding"/><label for="Coding">Coding</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Visit Free Code Camp.</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="youtube"/><label for="youtube">Watch Youtube</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.youtube.com/" target="_blank">Youtube</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="laptop"/><label for="laptop">Check Laptop</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.amazon.in" target="_blank">Visit Amazon</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="leetcode"/><label for="leetcode">Solve LeetCode Problems</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://leetcode.com/" target="_blank">Visit Leetcode</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

/* file: styles.css */
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0 auto;
}

.heading {
  text-align: center;
}

.todo-list {
  width: 100%;
  background-color: lavender;
padding:20px;  
  list-style-type: none;
}

.item {
  background-color: lavender;
  width: 100%;
  max-width: 100%;
  text-align: justify;
}

a {
  text-decoration: none;

       color:IndianRed;
}

a:visited {
  color: Black;
}

a:hover {
  color: Magenta;
}

a:focus {
  outline: 1px solid Black;
  color: limegreen;
}

a:active {
  color: green;
}

Your browser information:

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

Challenge Information:

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

3

do you remember what’s the specific way to select only unvisited links?

4

Hi buddy, Here when you will select the unvisited link then here you need to select the the link which comes under anchor tag