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

HTML-CSS
1

Tell us what’s happening:

i’m trying to keep on the right track!!! any advice as to why my elements don’t register??? I’ve changed this and rethought the answers!!! I’ve looked and gone through alot of reading to find this answer. will work on it later!!! bed time!!!

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>My To-Do List:</h1>
   <div>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="learn" name="learn">
            <label>Learn CSS</label>
            <ul class="sub-item" style="list-style-type:square">
                    <li><a class="sub-item-link"
                href="https://www.w3schools.com/Css/" target="_blank">Free CSS tutorial</a></li>
                </ul>
        </li>
    </div>
    <div>
        <li>
            <input type="checkbox" id="python" name="python">
            <label>Learn Python</label>

            <ul class="sub-item" style="list-style-type:square">
                    <li><a class="sub-item-link"
                href="https://www.learnpython.org/" target="_blank">Python Link</a></li>
                </ul>
        </li>
    </div>
    <div>
        <li>
            <input type="checkbox" id="ruby" name="ruby">
            <label>Learn other languages</label>
            <ul class="sub-item" style="list-style-type:square">
                    <li><a class="sub-item-link"
                href="https://www.ruby-lang.org/en/" target="_blank">Ruby Link</a></li>
                </ul>
        </li>
    </div>
    <div>
        <li>
            <input type="checkbox" id="break" name="break">
            <label>Have a break</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.tripadvisor.co.uk/">Tripadvisor</a></li>
      </li>
    </ul>
   </div>


</body>

</html>

/* file: styles.css */
body {
  background-color: teal;
}
h1 {
  background-color: white; 
  border-radius: 5px; 
  border: 5px solid blue; 
  padding 15px 15px 15px 15px; 
  margin: 25px; 
  text-align: center;
}
 div {
  background-color: white; 
  border-radius: 5px; 
  border: 5px solid blue; 
  padding: 20px; 
  margin: 25px;  
  text-align: center; 
 }
 a {
  text-decoration: none;
 }
 a:link { 
  color: blue; 
 }
 a:visited {
  color: green; 
 }
 a:hover {
  color: red;
 }
 a:active {
  color: orange;
 }
 a:focus {
  color: purple; 
  outline: 2px solid pink; 
 }

Your browser information:

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

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-stylized-to-do-list/66c051d13a6a20255a963695.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @bunnyprog

Try removing the div tags between the list item elements.

Happy coding