[ Telerik CSS] LAYOUT 05-LaptopSite

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Notebook Details</title>
    <link href="CSS/StyleSheet.css" rel="stylesheet" />
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">Toshiba</a></li>
            <li><a href="#">Lenovo</a></li>
            <li><a href="#">Dell</a></li>
            <li><a href="#">Asus</a></li>
            <li><a href="#">Acer</a></li>
            <li><a href="#">HP</a></li>
        </ul>
    </nav>

    <hr />

    <article>
        <section>
            <h2>Apple MacBook Air</h2>
            <img src="images/macbook.jpg" width="173" height="101" alt="Apple MacBook Air" />
            <ul>
                <li>64GB SSD</li>
                <li>2GB DDR</li>
                <li>Intel Core i5</li>
                <li>1300 USD</li>
            </ul>
        </section>

        <section>
            <h2>Apple MacBook Air</h2>
            <img src="images/macbook.jpg" width="173" height="101" alt="Apple MacBook Air" />
            <ul>
                <li>64GB SSD</li>
                <li>2GB DDR</li>
                <li>Intel Core i5</li>
                <li>1300 USD</li>
            </ul>
        </section>

        <section>
            <h2>Apple MacBook Air</h2>
            <img src="images/macbook.jpg" width="173" height="101" alt="Apple MacBook Air" />
            <ul>
                <li>64GB SSD</li>
                <li>2GB DDR</li>
                <li>Intel Core i5</li>
                <li>1300 USD</li>
            </ul>
        </section>

        <section>
            <h2>Apple MacBook Air</h2>
            <img src="images/macbook.jpg" width="173" height="101" alt="Apple MacBook Air" />
            <ul>
                <li>64GB SSD</li>
                <li>2GB DDR</li>
                <li>Intel Core i5</li>
                <li>1300 USD</li>
            </ul>
        </section>

        <section>
            <h2>Apple MacBook Air</h2>
            <img src="images/macbook.jpg" width="173" height="101" alt="Apple MacBook Air" />
            <ul>
                <li>64GB SSD</li>
                <li>2GB DDR</li>
                <li>Intel Core i5</li>
                <li>1300 USD</li>
            </ul>
        </section>

        <section>
            <h2>Apple MacBook Air</h2>
            <img src="images/macbook.jpg" width="173" height="101" alt="Apple MacBook Air" />
            <ul>
                <li>64GB SSD</li>
                <li>2GB DDR</li>
                <li>Intel Core i5</li>
                <li>1300 USD</li>
            </ul>
        </section>

        <aside>
            <form>
                <dl>
                    <dt><label for="min-price">Min price: 500 USD</label></dt>
                    <dd><input type="range" name="min-price" id="min-price" /></dd>

                    <dt><label for="max-price">Max price: 1500 USD</label></dt>
                    <dd><input type="range" name="max-price" id="max-price" /></dd>
                </dl>

                <dl>
                    <dt><label for="min-ram">Min RAM: 4 GB</label></dt>
                    <dd><input type="range" name="min-ram" id="min-ram" /></dd>

                    <dt><label for="max-ram">Max RAM: 16 GB</label></dt>
                    <dd><input type="range" name="max-ram" id="max-ram" /></dd>
                </dl>
            </form>
        </aside>
    </article>
</body>
</html>