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

HTML-CSS
1

Tell us what’s happening:

Hi, I’ve been stuck on step 10: The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

I tried to copy the text and check for typo, nothing worked

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>
<div class="list-box">
    <h1>My To-Do lists</h1>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="checkbox-one">
            <label for="checkbox-one">Do grocery</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.tops.co.th" target="_blank">Tops market</a></li>
                <li><a class="sub-item-link" href="https://www.lotuss.com" target="_blank">Lotus</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="checkbox-two">
            <label for="checkbox-two">Full-stack Dev study</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.freecodecamp.org" target="_blank">FCC link</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="checkbox-three">
            <label for="checkbox-three">Check new phone spec</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.samsung.com" target="_blank">Samsung website</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="checkbox-four">
            <label for="checkbox-four">Bangkok travel plan</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.agoda.com" target="_blank">Agoda (for hotel)</a></li>
                <li><a class="sub-item-link" href="https://dticket.railway.co.th" target="_blank">Train ticket</a></li>
                <li><a class="sub-item-link" href="https://www.nakhonchaiair.com" target="_blank">Bus ticket</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>

</html>

/* file: styles.css */
body {
  background-color: #ccd5ae;
  font-family: arial, sans-serif;
}

.list-box {
  width: 500px;
  background-color: #fefae0;
  padding: 20px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #d4a373;
  border-radius: 15px;
}

h1 {
  text-align: center;
  color: #d4a373;
  margin-bottom: 40px;
}

.todo-list>li {
  list-style-type: none;
  margin-bottom: 40px;
  font-size: 20px;
  color: #565a49;
}

.sub-item {
  margin-top:20px;
  list-style-type: none;
}

.sub-item li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #d4a373;
}

a:hover {
  color: #faedcd; 
}

a:visited {
  color: #a5ac8e;
}

a:focus {
  outline: 2px solid #d4a373;
  border-radius: 4px;
  outline-offset: 4px;
}

a:active {
  color: #fefae0;
}

Your browser information:

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

Challenge Information:

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

2

Welcome to the forum @jjmiejj

A list item with an anchor element in it. The anchor should have the class sub-item-link, a valid href value, and a target value that makes the link open in a new tab.

Try reducing the anchor list item elements to one for each unordered list.

Happy coding

1 Like
3

That’s it! Thank you so much!!!

1 Like