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

HTML-CSS
1

Tell us what’s happening:

can’t pass step 7, it’s becoming frustrating…can someone help me?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

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

<body>
    <h1>TODO LIST</h1>
    <div class="list-container">
        <ul class="todo-list">
            <li>
                <input type="checkbox" id="list-1">
                <label for="list-1">Lavare la macchina</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="#" target="_blank">Apri calendario</a></li>
                    <li><a class="sub-item-link" href="#" target="_blank">Compra panni</a></li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="list-2">
                <label for="list-2">Annullare assicurazione</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="#" target="_blank">Chiama concessionario</a></li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="list-3">
                <label for="list-3">Studia JS</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="#" target="_blank">Apri freeCodeCamp</a></li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="list-4">
                <label for="list-4">Fai la spesa</label>
                <ul class="sub-item">
                    <li><a class="sub-item-link" href="#" target="_blank">Apri calendario</a></li>
                    <li><a class="sub-item-link" href="#" target="_blank">Controlla offerte</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>


/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkorange;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px;
}

.list-container {
  background-color: lightblue;
  margin: 60px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.todo-list {
  list-style-type: none; /* Rimuove i pallini */
  padding: 0;
  margin: 0;
}

.todo-list li {
  font-family: Arial, sans-serif;
  font-size: 22px;
  margin-top: 20px;
  color: #000;
}

.sub-item {
  list-style-type: none; /* Rimuove i pallini della sottolista */
  padding-left: 20px;
}

.sub-item-link {
  text-decoration: none; /* Rimuove la sottolineatura di default */
  color: blue;
}

.sub-item-link:hover {
  color: red;
  text-decoration: line-through; /* Sottolineatura durante hover */
}

.sub-item-link:visited {
  color: purple; /* Colore per i link visitati */
}

.sub-item-link:focus {
  outline: 3px solid red; /* Contorno rosso per focus */
}

.sub-item-link:active {
  color: green; /* Cambia colore quando cliccato */
}

Your browser information:

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

Challenge Information:

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

2

Hi! I ran your code. I removed the second list element with an anchor in Lavare la macchina(Compra panni) and Fai la spesa(Controlla offerte). I think the evaluator expects only one list element with anchor . Try this, it worked for me.

1 Like