index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

    <!-- <link rel="stylesheet" href="css/icon-font.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png">

    <title>Natours | Exciting tours for adventurous people</title>
</head>

<body>

    <div class="navigation">
        <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
        <label for="navi-toggle" class="navigation__button">
            <span class="navigation__icon">&nbsp;</span>
        </label>

        <div class="navigation__background">&nbsp;</div>

        <nav class="navigation__nav">
            <ul class="navigation__list">
                <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>About Natours</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your Benefits</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popullar Tours</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book Now</a></li>
            </ul>
        </nav>
    </div>

    <header class="header">
        <div class="header__logo-box">
            <img src="img/logo-white.png" class="header__logo">
        </div>

        <div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary--main">Outdoors</span>
                <span class="heading-primary--sub">is where life happens</span>
            </h1>
            <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
        </div>
    </header>

    <main>
        <section class="section-about">
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    Exciting tours for advanture people
                </h2>
            </div>

            <div class="row">
                <div class="col-1-of-2">
                    <h3 class="heading-tertiary u-margin-bottom-small">You're going to fall in love with nature</h3>
                    <p class="paragraph">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident quidem magnam praesentium voluptatem maiores labore.
                        Laboriosam, nobis inventore corrupti fuga esse est obcaecati similique beatae perferendis suscipit
                        laborum earum?
                    </p>
                    <h3 class="heading-tertiary u-margin-bottom-small">Live advantures like you never have before</h3>
                    <p class="paragraph">
                        Sed tincidunt purus eu magna luctus, eget tincidunt tellus mattis. In porta ipsum id sollicitudin finibus. Sed fermentum
                        non mauris vitae faucibus.
                    </p>

                    <a href="#" class="btn-text">Learn more &rarr;</a>
                </div>
                <div class="col-1-of-2">
                    <div class="composition">
                        <img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
                            sizes="(max-width: 56.25em) 17.5vw, (max-width: 37.5em) 26.3vw, 300px"
                            alt="photo 1" class="composition__photo composition__photo--p1"
                            src="img/nat-1-large.jpg">

                        <img srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w"
                            sizes="(max-width: 56.25em) 19vw, (max-width: 37.5em) 28.5vw, 300px"
                            alt="photo 2" class="composition__photo composition__photo--p2"
                            src="img/nat-2-large.jpg">

                        <img srcset="img/nat-3.jpg 300w, img/nat-3-large.jpg 1000w"
                            sizes="(max-width: 56.25em) 16vw, (max-width: 37.5em) 24vw, 300px"
                            alt="photo 3" class="composition__photo composition__photo--p3"
                            src="img/nat-3-large.jpg">

                        <!-- <img src="img/nat-1-large.jpg" alt="photo 1" class="composition__photo composition__photo--p1">
                        <img src="img/nat-2-large.jpg" alt="photo 2" class="composition__photo composition__photo--p2">
                        <img src="img/nat-3-large.jpg" alt="photo 3" class="composition__photo composition__photo--p3"> -->
                    </div>
                </div>
            </div>
        </section>

        <section class="section-features">

            <div class="row">
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-world"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                        <p class="feature-box__text">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident quidem magnam praesentium voluptatem maiores labore.
                        </p>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-compass"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Meet nature</h3>
                        <p class="feature-box__text">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident quidem magnam praesentium voluptatem maiores labore.
                        </p>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-map"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Find your way</h3>
                        <p class="feature-box__text">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident quidem magnam praesentium voluptatem maiores labore.
                        </p>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-heart"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Live a healthier life</h3>
                        <p class="feature-box__text">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident quidem magnam praesentium voluptatem maiores labore.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-tours" id="section-tours">
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    Most popular tours
                </h2>
            </div>
            <div class="row">
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--1">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--1">
                                    The Sea Explorer
                                </span>
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>3 day tours</li>
                                    <li>Up to 30 people</li>
                                    <li>2 tour guides</li>
                                    <li>Sleep in cozy hotel</li>
                                    <li>Difficulty: easy</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-1">
                            <div class="card__cta">
                                <div class="card__price-box">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$279</p>
                                </div>
                                <a href="#popup" class="btn btn--white">Book now!</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--2">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--2">
                                    The Forest Hiker
                                </span>
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>7 day tours</li>
                                    <li>Up to 40 people</li>
                                    <li>6 tour guides</li>
                                    <li>Sleep in provided tents</li>
                                    <li>Difficulty: medium</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-2">
                            <div class="card__cta">
                                <div class="card__price-box">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$497</p>
                                </div>
                                <a href="#popup" class="btn btn--white">Book now!</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--3">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--3">
                                    The Snow Advanture
                                </span>
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>5 day tours</li>
                                    <li>Up to 15 people</li>
                                    <li>3 tour guides</li>
                                    <li>Sleep in provided tents</li>
                                    <li>Difficulty: hard</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-3">
                            <div class="card__cta">
                                <div class="card__price-box">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$897</p>
                                </div>
                                <a href="#popup" class="btn btn--white">Book now!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="u-center-text u-margin-top-huge">
                <a href="#" class="btn btn--green">Discover all tours</a>
            </div>

        </section>

        <section class="section-stories">
            <div class="bg-video">
                <video class="bg-video__content" autoplay muted>
                    <source src="img/video.mp4" type="video/mp4">
                    <source src="img/video.webm" type="video/webm"> Your browser is not supported!
                </video>
            </div>
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    We make people genuinely happy
                </h2>
            </div>

            <div class="row">
                <div class="story">
                    <figure class="story__shape">
                        <img src="img/nat-8.jpg" alt="person on a tour" class="story__img">
                        <figcaption class="story__caption">Mary Smith</figcaption>
                    </figure>
                    <div class="story__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident quidem magnam praesentium voluptatem maiores labore.
                            Laboriosam, nobis inventore corrupti fuga esse est obcaecati similique beatae perferendis suscipit
                            laborum earum?
                        </p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="story">
                    <figure class="story__shape">
                        <img src="img/nat-9.jpg" alt="person on a tour" class="story__img">
                        <figcaption class="story__caption">Jack Wilson</figcaption>
                    </figure>
                    <div class="story__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">WOW! My life is completely different now</h3>
                        <p>
                            Sed tincidunt purus eu magna luctus, eget tincidunt tellus mattis. In porta ipsum id sollicitudin finibus. Sed fermentum
                            non mauris vitae faucibus.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero provident
                            quidem magnam praesentium voluptatem maiores labore.
                        </p>
                    </div>
                </div>
            </div>

            <div class="u-center-text u-margin-top-huge">
                <a href="#" class="btn-text">Read all stories &rarr;</a>
            </div>
        </section>

        <section class="section-book">
            <div class="row">
                <div class="book">
                    <div class="book__form">
                        <form action="#" class="form">
                            <div class="u-margin-bottom-medium">
                                <h2 class="heading-secondary">
                                    Start booking now
                                </h2>
                            </div>
                            <div class="form__group">
                                <input type="text" class="form__input" placeholder="Full Name" id="name" required>
                                <label for="name" class="form__label">Full Name</label>
                            </div>

                            <div class="form__group">
                                <input type="email" class="form__input" placeholder="Email Address" id="email" required>
                                <label for="email" class="form__label">Email Address</label>
                            </div>

                            <div class="form__group u-margin-bottom-medium">
                                <div class="form__radio-group">
                                    <input type="radio" class="form__radio-input" id="small" name="size">
                                    <label for="small" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Small tour group</label>
                                </div>
                                <div class="form__radio-group">
                                    <input type="radio" class="form__radio-input" id="large" name="size">
                                    <label for="large" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Large tour group</label>
                                </div>
                            </div>
                            
                            <div class="form__group">
                                <button class="btn btn--green">Next step &rarr;</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <footer class="footer">
        <div class="footer__logo-box">

            <picture class="footer__logo">
                <!-- picture tag has to have 1 source followed by 1 default img,
                if media meets the max-width set in the source then use the image defined in the source, 
                otherwise use the default image defined in the img tag-->
                <source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" 
                        media="(max-width: 37.5em)">
                <img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo"
                    src="img/logo-green-2x.png">
            </picture>
            
        </div>
        <div class="row">
            <div class="col-1-of-2">
                <div class="footer__navigation">
                    <ul class="footer__list">
                        <li class="footer__item"><a href="#" class="footer__link">Company</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Contact us</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Careers</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Privacy policy</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Terms</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-1-of-2">
                <p class="footer__copyright">
                    Built by <a href="#" class="footer__link">Yi Cai</a> for her CSS online training. Designed and Copyright &copy; by JONAS SCHMEDTMANN.
                </p>
            </div>
        </div>
    </footer>

    <div class="popup" id="popup">
        <div class="popup__content">
            <div class="popup__left">
                <img src="img/nat-8.jpg" alt="Tour photo" class="popup__img">
                <img src="img/nat-9.jpg" alt="Tour photo" class="popup__img">
            </div>
            <div class="popup__right">
                <a href="#section-tours" class="popup__close">&times;</a>
                <h2 class="heading-secondary u-margin-bottom-small">Start booking now!</h2>
                <h3 class="heading-tertiary u-margin-bottom-small">Important &ndash; Please read these terms before booking</h3>
                <p class="popup__text u-margin-bottom-medium">
                    Maecenas porta dui dui, a sagittis magna dapibus vitae. Maecenas vestibulum nulla magna, nec porttitor nisl rutrum accumsan. Curabitur ac risus molestie, vehicula magna at, aliquam massa. Nam aliquet volutpat porta. Nulla facilisi. Cras eros urna, vestibulum sed velit ut, efficitur mattis turpis. Sed malesuada venenatis interdum. Nunc libero erat, varius non orci eget, lobortis aliquet urna. Vestibulum at imperdiet dolor. Nulla eleifend mauris sit amet est feugiat, sed sagittis massa pharetra. Aenean pulvinar lorem ut vestibulum vehicula. Maecenas elit dolor, pharetra quis mollis quis, venenatis et ante.
                </p>
                <a href="#" class="btn btn--green">Book now</a>

            </div>
        </div>
    </div>

    <!--
        <section class="grid-test">
            <div class="row">
                <div class="col-1-of-2">
                    Col 1 of 2
                </div>
                <div class="col-1-of-2">
                    Col 1 of 2
                </div>
            </div>
            <div class="row">
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
            </div>
            <div class="row">
                <div class="col-1-of-3">
                    Col 1 of 3
                </div>
                <div class="col-2-of-3">
                    Col 2 of 3
                </div>
            </div>
            <div class="row">
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
            </div>
            <div class="row">
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-2-of-4">
                    Col 2 of 4
                </div>
            </div>
            <div class="row">
                <div class="col-1-of-4">
                    Col 1 of 4
                </div>
                <div class="col-3-of-4">
                    Col 3 of 4
                </div>
            </div>

        </section>
        -->

</body>

</html>