index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Captured</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&family=Roboto&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="./styles/style.css">
    <link rel="icon" type="image/svg" href="./assets/camera-favicon.svg">
    <script src="https://kit.fontawesome.com/a9bc7af8fb.js" crossorigin="anonymous"></script>
</head>
<body class="home">
    <header class="header">
        <div class="header__wrapper wrapper">
            <nav class="header__nav">
                <label for="hamburger" class="header__nav__hamburger"><i class="fas fa-bars"></i></label>
                <input type="checkbox" name="hamburger" id="hamburger" class="sr-only">
                <ul>
                    <li><a href="index.html"><p class= "header__nav--current" >Home</p></a></li>
                    <li><a href="#about"><p>About</p></a></li>
                    <li><a href="blog.html"><p>Blog</p></a></li>
                    <li><a href="contact.html"><p>Contact</p></a></li>
                </ul>
            </nav>
            <h1 class="header__title">Captured</h1>
        </div>
        <div class="header__image-container header__image-container--big-border">
            <img src="./assets/header-box-image.jpg" alt="side view of camera lens on blank background">
        </div>
    </header>
    <main>
        <section class="about" id="about">
            <div class="wrapper about__container">
                <div class="about__text-container">
                    <h3>What is captured?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus omnis quos fugiat hic maxime totam enim vero facilis. Tenetur temporibus nisi saepe ipsum iste in, consequatur facilis ut deserunt minus repudiandae, totam molestiae, illum voluptatem magni dolorum? Vero, in! Pariatur nisi sed, numquam obcaecati aut saepe dolorum beatae suscipit deleniti!</p>
                    <a href="#" class="button">Find out more</a>
                </div>
            </div>
        </section>
        <section class="articles articles--highlight">
            <div class="articles__container">
                <div class="articles__image-container">
                    <img src="./assets/left-image.jpg" alt="camera with long lens appears to be floating as sun sets behind a mountain" class="articles__image-container--shadow-right">
                </div>
                <div class="articles__text-container articles__text-container--right">
                    <h4>Unlock your skills</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt autem reiciendis aliquam quia perferendis voluptatibus ratione earum pariatur, esse quibusdam. Voluptate, nam eos, consequatur porro assumenda commodi ex aliquid tempore fuga temporibus, asperiores ratione obcaecati inventore ut necessitatibus veniam.</p>
                    <a href="#" class="button">Read more</a>
                </div>
            </div>
            <div class="articles__container">  
                <div class="articles__image-container">
                    <img src="./assets/right-image.jpg" alt="Close up of a person's hands holding a Cannon camera at waist level, with the display facing towards their face" class="articles__image-container--shadow-left">
                </div>
                <div class="articles__text-container articles__text-container--left">
                    <h4>Getting new gear</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit asperiores perferendis nostrum eveniet vel magni exercitationem. Itaque aperiam earum libero facilis nobis sunt impedit eligendi, quibusdam culpa inventore, ut possimus quod nam pariatur quidem architecto repellendus provident cum. Quo, commodi.</p>
                    <a href="#" class="button">Read more</a>
                </div>
            </div>
        </section>
        <section class="links">
            <div class="wrapper links__container">
                <div class="links__text-container">
                    <h4>Top picks</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quas quis vitae dolorem distinctio quos impedit cupiditate aliquid officiis! Dolores dolor architecto voluptatibus quos qui!</p>
                </div>
                <div class="links__text-container">
                    <h4>Community</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates nisi rem, culpa non tempora ullam velit, qui veritatis fugiat natus aspernatur! Ullam et facilis culpa!</p>
                </div>
                <div class="links__text-container">
                    <h4>Blog</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, repellat eos esse obcaecati inventore impedit blanditiis culpa ullam nobis fugiat soluta excepturi qui laboriosam. Maxime?</p>
                </div>
                <div class="links__text-container">
                    <h4>Get in touch</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, optio. Repudiandae minima id ipsam impedit fuga delectus sint quae, iure sunt, aperiam nam architecto hic?</p>
                </div>
            </div>
        </section>
        <section class="big-picture">
            <div class="big-picture__image-container">
                <img src="./assets/banner.jpg" alt="A camera and other items needed for travel scattered on a map">
            </div>
        </section>
        <section class="profile">
            <div class="wrapper profile__container">
                <div class="profile__image-container">
                    <img src="./assets/small-box.jpg" alt="Profile photo of a contributor, sitting among rocks, facing a mountain range at sunset, with a camera in hand" class="profile__image-container--shadow-right">
                </div>
                <div class="profile__text-container">
                    <h3>This month profile</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum provident illum suscipit amet quod obcaecati dolores officiis distinctio a nisi, excepturi rem, nihil ratione corporis itaque delectus expedita, non odio harum modi corrupti? Illum quod ipsum sit obcaecati, sunt et officiis magni reprehenderit, neque esse blanditiis rerum odit voluptatem impedit.</p>
                    <a href="#" class="button">Find out more</a>
                </div>
            </div>
        </section>
        <section class="gallery">
            <div class="wrapper gallery__container gallery__container--highlight">
                <div class="gallery__image-container">
                    <img src="./assets/gallery-image-1.jpg" alt="back of a DSLR camera with a veversible display on a tripod">
                </div>
                <div class="gallery__image-container">
                    <img src="./assets/gallery-image-2.jpg" alt="A vintage film camera nestled in foliage">
                </div>
                <div class="gallery__image-container">
                    <img src="./assets/gallery-image-3.jpg" alt="three cameras sitting diagonally, with only the center, a Nikon, in focus">
                </div>
            </div>
        </section>
    </main>
    <footer>
        <p>Copyright &copy; 2018 HackerYou</p>
    </footer>
</body>
</html>