ex 01 positioning content/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ex 01 | positioning content</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <header class="header">
            <div class="container">
                <a class="brand" href="#">
                    <img src="puma.png" alt="brand logo" />
                </a>
                <nav class="nav">
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Contact</a>
                </nav>
            </div>
        </header>
        <main>
            <article class="article">
                <div class="container">
                    <div class="col article-col">
                       <h1 class="article-heading">This is the heading of the article</h1>
                       <P class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum minus assumenda at necessitatibus impedit tempore repellendus eius? Ipsum vel reiciendis sunt voluptate distinctio ipsam dolores voluptatum quisquam quas nesciunt. Natus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum velit suscipit cupiditate animi aut eos facilis! Beatae commodi molestiae omnis, molestias distinctio est facere illum optio at sint atque cumque?</P>
                    </div>
                    <div class="col">
                        <img class="article-img" src="pic01.png" alt="bulb" />
                    </div>
                </div> 
            </article>
        </main>
        <footer class="footer">
            <div class="container">
                <nav>
                    <a href="#">Facebook</a>
                    <a href="#">Twitter</a>
                    <a href="#">Instagram</a>
                </nav>
            </div>
        </footer>
    </body>
</html>