Build a stylized to-do list

HTML-CSS
1

I have completed 1 to 13 which is good but when I get to 14 to 19 its not correcting . I have tried google to see what the issue is but it seems ok when I ask in google. I can’t seem to brush the problem off.

<meta charset="utf-8">

<title>Styled To-Do List</title>

  • <input type="checkbox" id="task-1">

<label for="task-1">Task one</label>

<ul class="sub-item">

  <li><a href="https://example.com/buy-groceries" class="sub-item-link" target="\_blank">Buy Groceries</a></li>

</ul>

  • <input type="checkbox" id="task-2">

<label for="task-2">Task two</label>

<ul class="sub-item">

  <li><a href="https://example.com/breakfast-menu" class="sub-item-link" target="\_blank">Breakfast Menu</a></li>

</ul>

  • <input type="checkbox" id="task-3">

<label for="task-3">Task three</label>

<ul class="sub-item">

  <li><a href="https://example.com/take-dog-for-walk" class="sub-item-link" target="\_blank">Take dog for walk</a></li>

</ul>

  • <input type="checkbox" id="task-4">

<label for="task-4">Task four</label>

<ul class="sub-item">

  <li><a href="https://example.com/read-a-book" class="sub-item-link" target="\_blank">Read a book</a></li>

</ul>

    • .sub-item-link {

    text-decoration: none;

    color: #2ecc71;

    outline: none;

    }

    .sub-item-link:visited {

    color: #9b59b6;

    }

    .sub-item-link:hover {

    color: #e74c3c;

    }

    .sub-item-link:focus {

    outline: 2px solid #3498db;

    }

    .sub-item-link:active {

    color: #f39c12;

    }

2

can you please post the link to the project?

can you also format your code so that it is readable? I will add the guide below

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3 
<meta charset="utf-8">

<title>Styled To-Do List</title>
<input type="checkbox" id="task-1">

<label for="task-1">Task one</label>

<ul class="sub-item">

  <li><a href="https://example.com/buy-groceries" class="sub-item-link" target="\_blank">Buy Groceries</a></li>

</ul>

<input type="checkbox" id="task-2">

<label for="task-2">Task two</label>

<ul class="sub-item">

  <li><a href="https://example.com/breakfast-menu" class="sub-item-link" target="\_blank">Breakfast Menu</a></li>

</ul>

<input type="checkbox" id="task-3">

<label for="task-3">Task three</label>

<ul class="sub-item">

  <li><a href="https://example.com/take-dog-for-walk" class="sub-item-link" target="\_blank">Take dog for walk</a></li>

</ul>

<input type="checkbox" id="task-4">

<label for="task-4">Task four</label>

<ul class="sub-item">

  <li><a href="https://example.com/read-a-book" class="sub-item-link" target="\_blank">Read a book</a></li>

</ul>

.sub-item-link {
text-decoration: none;
color: #2ecc71;
outline: none;
}

.sub-item-link:visited {
color: #9b59b6;
}

.sub-item-link:hover {
color: #e74c3c;
}

.sub-item-link:focus {
outline: 2px solid #3498db; 
}

.sub-item-link:active {
color: #f39c12;
}
4

thank you for having shared your code

would you mind also posting the link to the challenge?

1 Like
5

https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-stylized-to-do-list/build-a-stylized-to-do-list

6

I have fixed the rest of the todo-list

7

you do not need anymore help?

8

Yeah I fixed the issue by me over looking what I was doing. Thank you for your support.