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

HTML-CSS
1

Tell us what’s happening:

Good day dont get 2 tests for my solution anchor element and outline focus< im using focus but maybe I doing something wrong

Your code so far

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

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <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 class="main-item">
                    <input type="checkbox" id="store">                  
                    <label for="store">Go to the walmart</label>
                    <ul class="sub-item">
                    <a href="https://www.walmart.com.mx" id="store" target="_blank"><li class="#sub-item-link">Walmart</li></a>
                    </ul>
                </li>
                <li class="main-item">
                    <input type="checkbox" id="gym">
                    <label for="gym">Go to the gym</label> 
                    <ul class="sub-item">                  
                    <a href="https://www.planetfitness.mx/gyms/galerias-cuernavaca-mor" id="gym" target="_blank"><li class="sub-item-link">Gym planet</li></a>
                    </ul>
                </li>
                <li class="main-item">
                    <input type="checkbox" id="keyboard">                  
                    <label for="keyboard">Go to keyboard store</label>
                    <ul class="sub-item"> 
                    <a class="sub item link" href="https://www.alibaba.com" id="keyboard" target="_blank"><li class="#sub-item-link">Keyboard store</li></a>
                    </ul>
                </li>
                <li class="main-item">
                    <input type="checkbox" id="piscina">                  
                    <label for="piscina">Go for the piscina</label>
                    <ul class="sub-item"> 
                    <a class="sub item link" href="https://www.coppel.com/alberca" id="piscina" target="_blank"><li class="#sub-item-link">Piscina store</li></a>
                    </ul>
                </li>               
            </ul>
    </body>
</html>

/* file: styles.css */
body {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.main-item {
    background-color: aqua;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 25%;
    margin-right: 25%;
    padding: 20px; 
    text-decoration: none;  
}
.todo-list {
    list-style: none;
}
h1 {
    margin-top: 30px;
    text-align: center;
}
p {
    margin-bottom: 15px;
}
a {
    text-decoration: none;
}
.sub-item-link:active {
    color: brown;
}
.sub-item-link:hover{
    color: blue;
}
.sub-item-link:visited{
    color: black;
}
.sub-item-link:focus {
    color: rgb(37, 3, 27);
}

li {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
}

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

Screenshot_3
Screenshot_31343×466 139 KB

Screen of my tests

3

Hi @hiretdinovrinat

  1. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link .
  1. The first two anchor elements do not have that class, it looks like it was placed in the li element.
  2. The class attribute value is missing the hyphens in the other anchor elements.
  3. Why are there several closing ul tags?

Happy coding

4

The have ul todo-list, then going li main item(block where info) then ul sub-item and then li sub item link
and I counted ul there was ok as I can see.

5

I have not done this lab - so there are .sub-items in each ul list items .main-item element.

Just to help other coders and yourself, maybe indent the code so it is easier to read.
Should the ul .sub-item element have direct child li elements?

6

If read task there wrote like this li have to be inside ul.sub-items have to be inside

7
  1. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link .

The structure of ordered or unordered lists, using pseudo code:

<list>
  <listitem><span class="bold">Apple</span></listitem>
  <listitem><span class="italic">Banana</span></listitem>
  <listitem>Cherry</listitem>
</list>

Your code placed the li items for the sub ul element inside the anchor element, which is not valid syntax.