Tell us what’s happening:
Number 15 keeps saying “Unvisited links should have a text color set to a color of your choice”. I keep changing it and refreshing the page, and it keeps saying the same thing.
Your code so far
<!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>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background: #0f0f17;
color: #e0e0ff;
min-height: 100vh;
padding: 2rem 1rem;
line-height: 1.5;
}
main {
max-width: 640px;
margin: 0 auto;
}
h1 {
font-size: 2.4rem;
margin-bottom: 2rem;
color: #a5b4fc;
text-align: center;
letter-spacing: -0.025em;
}
.todo-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.todo-list li {
background: #1e1e38;
padding: 1.25rem 1.5rem;
border-radius: 12px;
border: 1px solid #2d2d52;
transition: all 0.15s ease;
}
.todo-list li:hover {
transform: translateY(-2px);
border-color: #6366f1;
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.12);
}
.todo-list label {
display: flex;
align-items: center;
gap: 0.875rem;
font-size: 1.125rem;
cursor: pointer;
user-select: none;
}
input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
accent-color: #6366f1;
cursor: pointer;
}
.sub-item {
list-style: none;
margin-top: 0.75rem;
padding-left: 2.1rem;
}
.sub-item li {
background: none;
border: none;
padding: 0;
}
a {
text-decoration: none;
color: #00ff00;
}
a:visited {
color: purple;
}
a:hover {
color: orange;
}
a:focus {
outline: none;
box-shadow: 0 0 0 3px lime;
border-radius: 4px;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<main>
<h1>Today's Focus</h1>
<ul class="todo-list">
<li>
<input type="checkbox" id="task-1">
<label for="task-1">Morning mobility & stretch routine</label>
<ul class="sub-item">
<li>
<a href="https://www.youtube.com/watch?v=some-mobility-video"
target="_blank"
class="sub-item-link">
15-min hip & shoulder flow
</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="task-2">
<label for="task-2">Complete 3 algorithm problems</label>
<ul class="sub-item">
<li>
<a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/"
target="_blank"
class="sub-item-link">
freeCodeCamp JS section
</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="task-3">
<label for="task-3">Meal prep high-protein lunches</label>
<ul class="sub-item">
<li>
<a href="https://www.eatingwell.com/gallery/meal-prep-recipes/"
target="_blank"
class="sub-item-link">
High-protein meal prep ideas
</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="task-4">
<label for="task-4">Review pull request feedback</label>
<ul class="sub-item">
<li>
<a href="https://github.com/"
target="_blank"
class="sub-item-link">
Check GitHub notifications
</a>
</li>
</ul>
</li>
</ul>
</main>
</body>
</html><!-- file: index.html -->
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background: #0f0f17;
color: #e0e0ff;
min-height: 100vh;
padding: 2rem 1rem;
line-height: 1.5;
}
main {
max-width: 640px;
margin: 0 auto;
}
h1 {
font-size: 2.4rem;
margin-bottom: 2rem;
color: #a5b4fc;
text-align: center;
letter-spacing: -0.025em;
}
.todo-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.todo-list li {
background: #1e1e38;
padding: 1.25rem 1.5rem;
border-radius: 12px;
border: 1px solid #2d2d52;
transition: all 0.15s ease;
}
.todo-list li:hover {
transform: translateY(-2px);
border-color: #6366f1;
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.12);
}
.todo-list label {
display: flex;
align-items: center;
gap: 0.875rem;
font-size: 1.125rem;
cursor: pointer;
user-select: none;
}
input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
accent-color: #6366f1;
cursor: pointer;
}
.sub-item {
list-style: none;
margin-top: 0.75rem;
padding-left: 2.1rem;
}
.sub-item li {
background: none;
border: none;
padding: 0;
}
a { text-decoration: none;
color: #00ff00;
}
a:visited {
color: purple;
}
a:hover {
color: orange;
}
a:focus {
outline: none;
box-shadow: 0 0 0 3px lime;
border-radius: 4px;
}
a:active {
color: yellow;
}/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Challenge Information:
Build a Stylized To-Do List - Build a Stylized To-Do list