Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Peepcity</title>
    </head>
    <body>
        <header class="header">
            <a href="#" title="Go to Home Page"><img src="img/logo.png" alt="Logo" class="page-logo"></a>
            <nav class="page-nav">
                <ul>
                    <li><a href="#" title="Go to Home Page">Home</a></li>
                    <li><a href="#" title="Peeps Albums">Albums</a></li>
                    <li><a href="#" title="Curiosities about Peep">Curiosities</a></li>
                    <li><a href="#" title="Contact Page Author">Contact</a></li>
                </ul>
                <button type="button" title="Open menu" class="hamburger">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="35" height="12" viewBox="0 0 35 12" class="hamburger-icon">
                    <path d="M-0.000,12.000 L-0.000,8.000 L35.000,8.000 L35.000,12.000 L-0.000,12.000 ZM-0.000,0.000 L35.000,0.000 L35.000,4.000 L-0.000,4.000 L-0.000,0.000 Z"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="28.312" height="27.594" viewBox="0 0 28.312 27.594" class="close-icon">
                    <path d="M28.298,2.831 L16.984,14.145 L27.591,24.751 L24.763,27.580 L14.156,16.973 L3.549,27.580 L0.721,24.751 L11.328,14.145 L0.014,2.831 L2.842,0.003 L14.156,11.316 L25.470,0.003 L28.298,2.831 Z"/>
                    </svg>
                </button>
            </nav>
        </header>
        <main>
            <article class="article">
                <header class="article-header">
                    <img class="header-background" alt="background">
                    <img class="header-cover-photo" alt="Cover photo">
                    <h2>Lil Peep</h2>
                    <p class="cover-photo-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </header>
                <div class="article-content">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
                <aside class="article-sidebar">
                    <figure class="article-picture">
                        <img alt="Peeps concert">
                        <figcaption class="caption">Lil Peeps last concert</figcaption>
                    </figure>
                </aside>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </article>
        </main>
        <footer class="footer">
           <nav class="footer-nav">
                <ul>
                    <li><a href="#" title="Go to Home Page">Home</a></li>
                    <li><a href="#" title="Peeps Albums">Albums</a></li>
                    <li><a href="#" title="Curiosities about Peep">Curiosities</a></li>
                    <li><a href="#" title="Contact Page Author">Contact</a></li>
                </ul>
           </nav>
           <nav class="social-media">
               <ul>
                   <li><a href="#" title="Peeps Fb fanpage"><img alt="facebook"></a></li>
                   <li><a href="#" title="Peeps Instagram"><img alt="Instagram"></a></li>
                   <li><a href="#" title="Peeps Twitter"><img alt="Twitter"></a></li>
               </ul>
           </nav>
           <p>Created by Lorem Ipsum</p>
        </footer>
    </body>
</html>