Tell us what’s happening:
- You should have four list items inside the unordered list.
Can’t find where the code is wrong… i have four list items inside the unordered list. I’ve checked for missing closing tags or other syntax errors but if I have any, can’t find them.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Styled To-Do List</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<h1>My To-Do List</h1>
<ul class="todo-list">
<li>
<input type="checkbox" id="task">
<label for="task">Explore gaming keyboards</label>
<ul class="sub-item">
<li><a href="https://www.google.com/" class="sub-item-link" target="_blank">Store Link</a></li>
<ul>
</li>
<li>
<input type="checkbox" id="task">
<label for="task">Finish the report</label>
<ul class="sub-item">
<li><a href="https://www.google.com/" class="sub-item-link" target="_blank">Request Access</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="task">
<label for="task">View Phone's Warranty</label>
<ul class="sub-item">
<li><a href="https://www.google.com/" class="sub-item-link" target="_blank">View Receipts</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="task">
<label for="task">Check Processor Specs</label>
<ul class="sub-item">
<li><a href="https://www.google.com/" class="sub-item-link" target="_blank">View Model Number</a></li>
</ul>
</li>
</ul>
</body>
</html>
/* file: styles.css */
body {
background-color: mintcream;
font-family: arial;
}
h1 {
text-align: center;
}
ul {
background-color: white;
padding: 20px;
max-width: 400px;
}
.sub-item-link {
padding-left: 25px;
}
a {
color: mediumseagreen;
text-decoration: none;
}
a:visited {
color: black;
}
a:hover {
color: teal;
}
a:active {
color: darkgreen;
}
a:focus {
outline: 2px solid teal;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Challenge Information:
Build a Stylized To-Do List - Build a Stylized To-Do list
