<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selector Challenge</title>
    <link rel="stylesheet" href="default.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="app">
        <header>
            <div>Logo</div>
            <nav>
                <ul>
                    <li class="active"><a href="">Home</a></li>
                    <li><a href="">Categories</a>
                        <ul>
                            <li><a href="">Caterory 1</a></li>
                            <li><a href="">Caterory 2</a></li>
                            <li><a href="">Caterory 3</a>
                                <ul>
                                    <li><a href="">Subcategory 1</a></li>
                                    <li><a href="">Subcategory 2</a></li>
                                    <li><a href="">Subcategory 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="">About</a></li>
                </ul>
            </nav>

            <nav>
                <ul>
                    <li><a href="">Github</a></li>
                    <li><a href="">Codepen</a></li>
                </ul>
            </nav>
        </header>

        <div class="hero">
            <div>CSS Selector Challenge</div>
            <div><a href="">Test your CSS Selector skills</a></div>
            <div>
                <a href="">button 1</a>
                <a href="">button 2</a>
            </div>
        </div>




        <div class="content-wrapper">

            <div class="inner-wrapper">

                <div class="cards">
                    <div class="card" data-challenge="HTML">Card 1</div>
                    <div class="card" data-challenge="CSS">Card 2</div>
                    <div class="card" data-challenge="JavaScript">Card 3</div>
                    <div class="card" data-challenge="PHP">Card 4</div>
                    <div class="card" data-challenge="JSON">Card 5</div>
                    <div class="card" data-challenge="Node">Card 6</div>
                </div>

                <div class="columns">
                    <aside>
                        <h2>Topics</h2>
                        <ul>
                            <li><a href="">HTML</a></li>
                            <li class="active"><a href="">CSS</a></li>
                            <li><a href="">JavaScript</a></li>
                            <li><a href="">PHP</a></li>
                            <li><a href="">JSON</a></li>
                            <li><a href="">TypeScript</a></li>
                            <li><a href="">Node</a></li>
                        </ul>
                    </aside>
                    <main>


                        <h1>Web Development Introduction</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ullam voluptas nihil,
                            delectus
                            eius culpa. Laborum optio magnam dignissimos deleniti nemo! Doloribus sit, voluptates
                            sapiente
                            ducimus adipisci explicabo omnis quasi, assumenda consequatur debitis atque voluptate
                            distinctio,
                            autem inventore tempora vel fuga facere. Pariatur rerum, neque aut quisquam quia molestiae
                            autem.
                        </p>

                        <h2>HTML & CSS</h2>

                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda pariatur cupiditate
                            deserunt
                            quisquam nihil, ut recusandae ipsam? Nihil, ducimus maiores!</p>

                        <ul>
                            <li><a href="">Download PDF Tutorial 1</a></li>
                            <li><a href="">Download PDF Tutorial 2</a></li>
                        </ul>

                        <h2>Need-to-know</h2>

                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis odio neque aperiam dolores
                            cupiditate corrupti hic magni illum officiis aliquam rerum, maxime molestias impedit labore
                            ducimus
                            animi. Voluptate, est laboriosam!</p>

                        <h2>WebDev Guides</h2>

                        <ul>
                            <li><a href="">Download WebDev Guide 1</a></li>
                            <li><a href="">Download WebDev Guide 2</a></li>
                            <li><a href="">Download WebDev Guide 3</a></li>
                            <li><a href="">Download WebDev Guide 4</a></li>
                        </ul>

                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, architecto expedita.
                            Repellat
                            quos
                            illum esse, officiis laudantium quidem voluptatum, maiores voluptatibus enim quaerat
                            blanditiis!
                            Facere fuga nam earum ullam veritatis?</p>

                        <h2>Best price</h2>

                        <table>
                            <tr>
                                <td>Course 1</td>
                                <td>Course 2</td>
                                <td>Course 3</td>
                                <td>Course 4</td>
                            </tr>
                            <tr>
                                <td>HTML & CSS</td>
                                <td>JavaScript</td>
                                <td>PHP</td>
                                <td>Node</td>
                            </tr>
                            <tr>
                                <td>Beginner</td>
                                <td>Intermediate</td>
                                <td>Intermediate</td>
                                <td>Advanced</td>
                            </tr>
                            <tr>
                                <td>5 hours</td>
                                <td>8 hours</td>
                                <td>7 hours</td>
                                <td>10 hours</td>
                            </tr>
                            <tr>
                                <td>$149.00</td>
                                <td>$219.00</td>
                                <td>$179.00</td>
                                <td>$289.00</td>
                            </tr>
                        </table>

                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic id similique, consequatur
                            molestiae
                            nisi porro obcaecati, impedit doloribus accusamus cumque unde commodi vero illo amet, sunt
                            exercitationem sint! Deleniti, vitae?</p>
                    </main>
                    <aside>
                        <h2>Articles</h2>
                        <ul>
                            <li><a href="https://www.w3schools.com" target="_blank">W3schools</a></li>
                            <li><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development"
                                    target="_blank">MDN Web
                                    Docs</a></li>
                            <li><a href="https://javascript.info" target="_blank">Javascript.info</a></li>
                        </ul>

                        <h2>Youtube channels</h2>
                        <ul>
                            <li><a href="https://www.youtube.com/@KevinPowell" target="_blank">Kevin Powell</a></li>
                            <li><a href="https://www.youtube.com/@WebDevSimplified" target="_blank">Web Dev
                                    Simplified</a></li>
                            <li><a href="https://www.youtube.com/@syntaxfm" target="_blank">Syntax</a></li>
                        </ul>


                        <h2>Newsletter</h2>
                        <form action="">
                            <input type="text" placeholder="Your name">
                            <input type="text" placeholder="Your email">
                            <input type="submit" value="Subscribe">
                        </form>
                    </aside>
                </div>
            </div>
        </div>
        <footer class="footer">
            <!-- <div class="inner-wrapper"> -->
            <div class="columns inner-width">
                <div class="col">
                    <h2>Address</h2>
                    <ul>
                        <li>742 Innovation Drive</li>
                        <li>Palo Alto</li>
                        <li>CA 94301</li>
                        <li>USA</li>
                    </ul>
                </div>
                <div class="col">
                    <h2>Contact</h2>
                    <ul>
                        <li>www.webedu.com</li>
                        <li>office@webedu.com</li>
                        <li>sales@webedu.com</li>
                    </ul>
                </div>
                <div class="col">
                    <h2>About</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum maxime magnam laudantium eveniet
                        magni ipsum in fuga est suscipit ut?</p>
                </div>
            </div>
            <!-- </div> -->
        </footer>
    </div>

</body>

</html>