index.html

<header class="header">
    <div class="container">
        <p class="header__logo">
            <a href="/">
                <img src="http://placehold.it/300x200" alt="Site Logo">
            </a>
        </p>

        <nav class="main-nav">
            <a href="/about">About</a>
            <a href="/">Trips</a>
            <a href="/blog">Blog</a>
        </nav>
    </div>
</header>

<main>
    <section class="trips">
        <header>
            <h1 class="trips__header">Trips</h1>
        </header>
        <article class="trips__teaser trip-teaser">
            <p class="trip-teaser__image">
                <img src="http://placehold.it/600x400" alt="Teaser Image">
            </p>
            <h2 class="trip-teaser__location">Location</h2>
            <h3 class="trip-teaser__country">Country</h3>
            <p class="trip-teaser__date">12<sup>th</sup> Dec 2014 — 26<sup>th</sup> Dec 2014</p>
        </article>
    </section>
</main>

<main>
    <article class="trip">
        <section class="trip__intro-header">
            <header class="trip__header">
                <h1 class="trip__destination">Destination</h1>
                <h2 class="trip__country">Country</h2>
            </header>
            <aside class="trip__main-image">
                <img src="http://placehold.it/600x900" alt="Main Image">
            </aside>
            <div class="trip__intro-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ullam inventore est dicta repellendus fugit similique! Tempora dolorem vel provident, quisquam iste eveniet, perferendis excepturi. Dicta labore, facere fuga vero.</p>
                <p>Quis dignissimos iusto laudantium aliquam sequi repudiandae harum expedita maiores quae tempora quas quia odit, veritatis eum, iste ea, repellat eos vero magnam delectus aperiam. Repellat sit optio dolore nemo.</p>
                <p>Sed quaerat blanditiis aliquid fugiat at repellendus laborum placeat voluptatibus quos repellat, nisi sit quidem voluptate accusantium, sunt exercitationem, quis reprehenderit amet pariatur ratione quasi voluptatem commodi consectetur. Magnam, a!</p>
                <p>Nam nostrum culpa ut tempore ad, animi qui rerum architecto explicabo quasi in assumenda voluptas dolores maxime laudantium quisquam ea labore nulla, aspernatur reiciendis. Nisi sunt nobis sit, dolore id!</p>
                <p>Quis accusamus quo possimus obcaecati deserunt, eligendi quos facilis est aliquid. Aperiam doloremque temporibus recusandae illum quis sit iure illo quo rerum maxime hic nemo, animi ducimus tenetur amet labore!</p>
            </div>
        </section>
        <section class="trip__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel labore similique sint. Dicta culpa ea provident dolorum placeat a quibusdam commodi id, optio, rem magni ipsa dolorem iure officia illo.</p>
            <p>Culpa ab repudiandae esse deleniti cupiditate asperiores recusandae minima necessitatibus. Dolores cum odit quod dicta pariatur, sint debitis maiores perspiciatis ipsum iusto est! Harum deserunt adipisci quos placeat iure, vel.</p>
            <p>Itaque illum nihil sed! Ipsum eaque ratione aut deserunt, vero iste ab non voluptate voluptates, temporibus veniam culpa voluptatum provident quod quam debitis neque ut. Deserunt molestias doloremque nesciunt neque.</p>
            <p>Accusamus optio, rerum aut, voluptate est itaque fuga repellat nobis amet, illo quia. Nulla nostrum quibusdam obcaecati cum quos maxime ex, distinctio! Eos qui sapiente obcaecati in ipsa velit alias!</p>
            <p>Voluptas magnam blanditiis qui nisi saepe, quos, perferendis nesciunt, rem obcaecati iusto nihil! Quod vero modi itaque, reiciendis reprehenderit harum, qui? Velit beatae aliquid perferendis iusto commodi aperiam, nobis repudiandae!</p>
        </section>
    </article>
</main>

<footer class="footer">

    <section class="footer__section">
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum inventore error neque! Voluptas numquam debitis dicta dolores iste, quae eius placeat. Facere tempora nam veritatis doloremque sunt, incidunt voluptatem recusandae.</p>
        <p><a href="/about" class="btn">Find out more</a></p>
    </section>

    <section class="footer__section">
        <h3>Explore</h3>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/">Trips</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/blog">Blog</a></li>
        </ul>
    </section>

    <section class="footer__section">
        <h3>Countries</h3>
        <ul>
            <li><a href="/in/england">England</a></li>
            <li><a href="/in/japan">Japan</a></li>
            <li><a href="/in/philippines">Philippines</a></li>
            <li><a href="/in/america">America</a></li>
            <li><a href="/in/hungary">Hungary</a></li>
            <li><a href="/in/iceland">Iceland</a></li>
            <li><a href="/in/germany">Germany</a></li>
        </ul>

        <p>
            <a href="/countries" class="btn">View All</a>
        </p>
    </section>

    <section class="footer__legal">
        <p>
            <img src="http://placehold.it/200x50" alt="Small Logo">
        </p>
        <p>&copy; 2015.</p>
    </section>
</footer>