<!DOCTYPE html>
<html>
    <head>
        <title>HTML & CSS Fundamentals | Challenges</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
            
            <header class="inverse">
                <div class="container">
                    <h1>Hello, my name is <span class="accent-text">Sophie</span></h1>
                    <img src="img/sophie.png" alt="portrait of Sophie">
                </div>
            </header>
            
            
            <section class="about-me">
                <div class="container">
                    <h2>I am a <span class="accent-text">graphic designer</span></h2>
                    <p>Ultricies morbi urna lectus magna quisque ultricies velit enim nisi mi volutpat amet id id porta auctor at viverra consequat turpis quam enim amet vulputate.</p>
                    <a href="#" class="btn">See my work</a>
                </div>
            </section>
            
            
            <section class="articles inverse">
                <div class="container">
                    <h2>My most recent <span class="accent-text">article</span></h2>
                    <article>
                        <h3>Design systems that scale</h3>
                        <p class="small-text">Writen by <span class="name">Sophie</span> on <time datetime="2020-06-19">June 19, 2020</time></p>
                        <p>Ultricies morbi urna lectus magna quisque ultricies velit enim nisi mi volutpat amet id id porta auctor at viverra consequat turpis quam enim... <a href="#">continue reading</a></p>
                        <a href="#" class="btn">See all my work</a>      
                    </article>
                </div>
            </section>
            
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML & CSS Fundamentals | Challenges</title>

rel="stylesheet">

</head>

<body>

<h1>Hello, my name is <span class="accent-text">Sophie</span></h1>

</div>

</header>

<h2>I am a <span class="accent-text">graphic designer</span></h2>

<p>Ultricies morbi urna lectus magna quisque ultricies velit enim nisi mi

volutpat amet id id porta auctor at viverra consequat turpis quam enim amet

vulputate.</p>

</div>

</section>

<h2>My most recent <span class="accent-text">article</span></h2>

<h3>Design systems that scale</h3>

<p class="small-text">Writen by <span class="name">Sophie</span> on <time

datetime="2020-06-19">June 19, 2020</time></p>

<p>Ultricies morbi urna lectus magna quisque ultricies velit enim nisi mi

volutpat amet id id porta auctor at viverra consequat turpis quam enim...

<a href="#">continue reading</a></p>

</article>

-2:28