CSS Playground/cssUnits.html

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

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

<body>
    <h1>CSS Units <button>Click Me</button></h1>

    <article id="ems">
        <h2>I am h2</h2>
        <h3>I am h3</h3>
        <button>Click Me</button>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis minima libero nemo voluptatem impedit
            consectetur fugiat explicabo magnam similique iste, ipsum labore et reprehenderit, laudantium sequi eaque.
            Commodi, cumque nam.Ipsam numquam quaerat maxime ipsum perferendis ab quam ut corrupti iusto eligendi libero
            aperiam maiores, sit nulla repellendus, repellat quasi quae. Repudiandae tempora accusamus enim porro quas
            reiciendis repellendus perferendis.</p>
        <ul>
            <li>
                Pasta
                <ul>
                    <li>
                        Ravioli
                        <ul>
                            <li>Spinach Ricotta</li>
                        </ul>
                    </li>
                    <li>Penne</li>
                </ul>
            </li>
            <li>Salad</li>
            <li>Gelato</li>
        </ul>
    </article>

    <article id="rems">
        <h2>Using rems instead of ems!</h2>
        <h3>I am h3</h3>
        <button>Click Me</button>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis minima libero nemo voluptatem impedit
            consectetur fugiat explicabo magnam similique iste, ipsum labore et reprehenderit, laudantium sequi eaque.
            Commodi, cumque nam.Ipsam numquam quaerat maxime ipsum perferendis ab quam ut corrupti iusto eligendi libero
            aperiam maiores, sit nulla repellendus, repellat quasi quae. Repudiandae tempora accusamus enim porro quas
            reiciendis repellendus perferendis.</p>
        <ul>
            <li>
                Pasta
                <ul>
                    <li>
                        Ravioli
                        <ul>
                            <li>Spinach Ricotta</li>
                        </ul>
                    </li>
                    <li>Penne</li>
                </ul>
            </li>
            <li>Salad</li>
            <li>Gelato</li>
        </ul>
    </article>

    <button>Click Me</button>
    <section id="percentages">
        <div></div>
    </section>


</body>

</html>