Responsive Example

"Wide" screen:
responsive wireframe

"Small" screen:
responsive wireframe

<!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>