## Responsive Example

"Wide" screen:

"Small" screen:

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

    <head>
        <title>Birds</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/site.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>

    <body>
        <header>
            <h1>Birds, Birds, Birds!</h1>
        </header>

        <main>
            <article class="primary">
                <h2>Hummingbirds</h2>
                <img src="images/animal-avian-beak-349758.jpg" alt="bird" />
                <p>Lorem ipsum dolor sit amet, ...</p>
            </article>

            <div class="secondaryarticles">

                <article class="secondary">
                    <h2>Integer magna</h2>
                    <img src="images/animal-avian-beak-905248.jpg" alt="bird" />
                    <p>Integer magna tortor, aliquam eget lacus sit amet,...</p>
                </article>

                <article class="secondary">
                    <h2>Quisque amet</h2><img src="images/animal-avian-bird-162141.jpg" alt="bird" />
                    <p>Pellentesque aliquam ultricies. ...</p>
                </article>

                <article class="secondary">
                    <h2>Aliquam blandit </h2><img src="images/animal-avian-bird-117139.jpg" alt="birds" />
                    <p>Aliquam blandit luctus...</p>
                </article>
            </div>

        </main>
        <footer>Demo page for responsive layout for CSCI E-12, Spring 2021</footer>
    </body>
    </html>