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

HTML-CSS
1

Tell us what’s happening:

Need help checkink my code.
I don’t understand whats wrong.
10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

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>To-Do List</h1>
    
    <ul class="todo-list">
        <li class="achats">
            <input type="checkbox"      id="achats">
            <label for="achats">Achats</label>
        
            <ul class="sub-item">

                <li><a class="sub-item-link" href="https://www.coursesu.com/c/boissons-sans-alcool/eaux?utm_medium=cpc&utm_source=bing&utm_campaign=BSRCAllMagHMEXTCategorieboissons&utm_adgroup=AcheterEau&msclkid=00dbaecede2e10d78e2dc78ca3d531c5" target="_blank">Eau</a></li>
                <li><a class="sub-item-link" href="https://lafourche.fr/products/la-fourche-huile-dolive-vierge-extra-origine-espagne-bio-1l?msclkid=1530639b458714e6a7e60ad93ab635eb&utm_source=bing&utm_medium=cpc&utm_campaign=%5BShopping%5D%5BACQ%5D%5BFR%5D%20-%20Other&utm_term=2336118612263874&utm_content=%5BSHOPPING%5D%5BACQ%5D%5BFR%5D" target="_blank">Huile</a></li>
                   
            </ul>
        </li>

        <li class="entretien">
            <input type="checkbox" id="entretien">
            <label for="entretien">Entretien</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.gites.fr/d/62050129?searchId=94a3ff0e-197d-4ec1-80b3-ea3d466536b7&searchTerm=France%2C+Europe&pageSize=30&asyncSubscriptions=true&hasGConfig=false&st=bing&searchMultiUnits=false&locale=fr-FR&currency=EUR&adults=2#article" target="_blank">Gîte A</a></li>
                <li><a class="sub-item-link" href="https://www.gites.fr/d/62050129?searchId=94a3ff0e-197d-4ec1-80b3-ea3d466536b7&searchTerm=France%2C+Europe&pageSize=30&asyncSubscriptions=true&hasGConfig=false&st=bing&searchMultiUnits=false&locale=fr-FR&currency=EUR&adults=2#article" target="_blank">Gîte B</a></li>
            </ul>
        </li>

        <li class="appels">
            <input type="checkbox" id="appels">
            <label for="appels">Appels</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://fr.hotels.com/helpcenter/?articleId=40104&pwaDialog=article-dialog" target="_blank">Appel A</a></li>
        
                <li><a class="sub-item-link" href="https://fr.hotels.com/helpcenter/?articleId=40104&pwaDialog=article-dialog" target="_blank">Appel B</a></li> 
            </ul>
        </li> 



        <li class="mails">
            <input type="checkbox" id="mails">
            <label for="mails">Mails</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="mailto:example@mail.com" target="_blank">Mail A</a></li>
                <li><a class="sub-item-link" href="mailto:example@mail.com" target="_blank">Mail B</a></li>
                
            </ul>
        </li>
       

    </ul>

</body>

</html>


/* file: styles.css */
ul{
  list-style:none;
  padding:0;
  margin:0;
}

a{
text-decoration:none;
}

.sub-item-link:link{
color:green;
text-decoration:none;
}

.sub-item-link:visited{
  color:red;
}
.sub-item-link:hover{
  color:pink;
}
.sub-item-link:focus{
  outline:2px solid orange;
}
.sub-item-link:active{
  color:blue;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

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

2

How did you get stuck in your debugging?

3

Hi buddy can you tell me in which section of your code are you feeling stuck ?

And what is the problem are you facing too ?

Hope You must describe the problem in your own words !!