Create a stylized to-do list

HTML-CSS
1

I need help, they don’t accept steps 14 through 19.

indice.html

<meta charset="utf-8">

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

  • <label for="task-1">Buy milk</label>

<ul class="sub-item">

  <li>

    <a href="https://donaleche.com/collections/leches" class="sub-item-link" target="\_blank">Milk</a></li>

  • <label for="task-2">Study CSS</label>

<ul class="sub-item">

  <li>

    <a href="https://www.freecodecamp.org/espanol/learn/responsive-web-design-v9/#workshop-cat-photo-app" class="sub-item-link" target="\_blank">CSS</a></li>

  • <label for="task-3">Go to the gym</label>

<ul class="sub-item">

  <li>

    <a href="https://www.smartfit.com.co/gimnasios/bulevar-de-la-avenida" class="sub-item-link" target="\_blank">Gym</a></li>

  • <label for="task-4">Practice Sudoku</label>

<ul class="sub-item">

  <li>

    <a href="https://www.sudokuonline.io/?gad_source=1&gad_campaignid=9785998205&gbraid=0AAAAADrEBIpNhHIRsPsMR36qPlGu47_mf&gclid=Cj0KCQiAtfXMBhDzARIsAJ0jp3ALU2-jDTjglLAoX5Hm5J-xsggPw0L1Kxw1G1KuWA30Q06R230JNKQaApThEALw_wcB" class="sub-item-link" target="\_blank">Sudoku</a></li>

    • CSS.styles

    /* file: styles.css */

    body {

    background-color:white;

    }

    .todo-list {

    background-color:lightgreen;

text-align: center; 

margin-left: auto; 

margin-right: auto;

    }

    a {

    text-decoration: none;

    }

    a:link {

    color:blue;

    }

    a:visited {

    color:rgb(220, 8, 43);

    }

    a:hover {

    color:rgb(147, 8, 206);

    }

    a:focus {

    color:rgba(135, 92, 13, 0.865);

    outline:auto;

    }

    a:active{

    color:rgb(136, 15, 15);

    }

    2

    Please repost your code, formatted as follows:

    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

    Tell us what’s happening:

    I need help with the CSS code. No matter how much I change it and follow the instructions exactly as requested in the lab, it still won’t be accepted. I need help with steps 14 through 19, please.

    Your code so far

    <!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>

<body>
<ul class="todo-list">
<li><input type="checkbox" id="task-1">
    <label for="task-1">Buy milk</label>
    <ul class="sub-item">
      <li>
        <a href="https://donaleche.com/collections/leches" class="sub-item-link" target="_blank">Milk</a></li>
</ul>
</li>
<li><input type="checkbox" id="task-2">
    <label for="task-2">Study CSS</label>
    <ul class="sub-item">
      <li>
        <a href="https://www.freecodecamp.org/espanol/learn/responsive-web-design-v9/#workshop-cat-photo-app" class="sub-item-link" target="_blank">CSS</a></li>
</ul>
</li>
 <li><input type="checkbox" id="task-3">
    <label for="task-3">Go to the gym</label>
    <ul class="sub-item">
      <li>
        <a href="https://www.smartfit.com.co/gimnasios/bulevar-de-la-avenida" class="sub-item-link" target="_blank">Gym</a></li>
</ul>
</li>
<li><input type="checkbox" id="task-4">
    <label for="task-4">Practice Sudoku</label>
    <ul class="sub-item">
      <li>
        <a href="https://www.sudokuonline.io/?gad_source=1&gad_campaignid=9785998205&gbraid=0AAAAADrEBIpNhHIRsPsMR36qPlGu47_mf&gclid=Cj0KCQiAtfXMBhDzARIsAJ0jp3ALU2-jDTjglLAoX5Hm5J-xsggPw0L1Kxw1G1KuWA30Q06R230JNKQaApThEALw_wcB" class="sub-item-link" target="_blank">Sudoku</a></li>
</ul>
</li>
</body>

</html>

    /* file: styles.css */
/* file: styles.css */
body {
 background-color:white;
}

.todo-list {
    background-color:lightgreen;
    text-align: center; 
    margin-left: auto; 
    margin-right: auto;
 }

a {
 text-decoration: none; 
} 

a:link {
 color:blue;
}

a:visited {
    color:pink;
}

a:hover {
 color:purple;
 }

a:focus {
 color:orange;
 outline:auto;
 }

a:active{
color:brown;
}

    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

    4

    Where does CSS normally get connected to an HTML page?