Construir una Lista de Tareas Estilizada - Crear una lista de tareas estilizada

Español HTML-CSS
1

Cuéntanos qué está pasando:

Llevo media hora intentando arreglar esto pero me imposible ya que tengo el archivo enlazado con el codigo bien puesto y sigo sin entender :sob: , las pruebas que me fallan son estas:
14 15 16 17 18 19

Tu código hasta el momento

<!-- file: index.html -->
<ul class="todo-list">
  <li>
    <input id="gaming" type="checkbox">
    <label for="gaming">Gaming Keyboards</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
  <li>
    <input id="report" type="checkbox">
    <label for="report">Finish the report</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
  <li>
    <input id="phone" type="checkbox">
    <label for="phone">View Phone Warranty</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
  <li>
    <input id="specs" type="checkbox">
    <label for="specs">View Processor Specs</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
</ul>

/* file: styles.css */
.sub-item-link,
.sub-item-link:link,
.sub-item-link:visited,
.sub-item-link:hover,
.sub-item-link:focus,
.sub-item-link:active {
  text-decoration: none;
}

.sub-item-link:link {
  color: blue;
}

.sub-item-link:visited {
  color: purple;
}

.sub-item-link:hover {
  color: red;
}

.sub-item-link:focus {
  outline: 2px solid orange;
}

.sub-item-link:active {
  color: green;
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Información del Desafío:

Construir una Lista de Tareas Estilizada - Crear una lista de tareas estilizada

2

are you linking the CSS file?

1 Like
3

uppss thank you, i didnt remeber

4

i put it now but still didnt work

<!DOCTYPE html>
<html lang="en">

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

<body>
<ul class="todo-list">
  <li>
    <input id="gaming" type="checkbox">
    <label for="gaming">Gaming Keyboards</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
  <li>
    <input id="report" type="checkbox">
    <label for="report">Finish the report</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
  <li>
    <input id="phone" type="checkbox">
    <label for="phone">View Phone Warranty</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
  <li>
    <input id="specs" type="checkbox">
    <label for="specs">View Processor Specs</label>
    <ul class="sub-item">
      <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">Store Link</a></li>
    </ul>
  </li>
</ul>
</body>

</html>
5

double check how the css file is called

1 Like