index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <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>Popular 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" alt="Logo" class="header__logo">
    </div>

    <div class="header__text-box">
        <h1 class="heading-primary">
            <span class="heading-primary--main">Outdoor</span>
            <span class="heading-primary--sub">is where life happens</span>
        </h1>

        <a href="#" class="btn btn--white btn--animated">Check it now</a>
    </div>

</header>

<main>

    <section class="section-about">

        <div class="u-center-text u-margin-bottom-big">
            <h2 class="heading-secondary">
                Exciting tours for adventurous 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. Aut consectetur exercitationem hic mollitia numquam officiis praesentium provident quisquam ratione.
                </p>
                <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
                <p class="paragraph">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias obcaecati voluptates! Aspernatur eius illum nemo nisi nobis odit rerum temporibus unde ut.
                </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) 20vw, (max-width: 37.5em) 30vw, 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) 20vw, (max-width: 37.5em) 30vw, 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) 20vw, (max-width: 37.5em) 30vw, 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&#45;&#45;p1">-->
                    <!--<img src="img/nat-2-large.jpg" alt="Photo 2" class="composition__photo composition__photo&#45;&#45;p2">-->
                    <!--<img src="img/nat-3-large.jpg" alt="Photo 3" class="composition__photo composition__photo&#45;&#45;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. Aspernatur eius illum nemo nisi nobis
                    </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. Aspernatur eius illum nemo nisi nobis
                    </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. Aspernatur eius illum nemo nisi nobis
                    </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. Aspernatur eius illum nemo nisi nobis
                    </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 card__side--front-1">
                        <div class="card__picture card__picture--1">
                            &nbsp;
                        </div>
                        <div class="card__heading">
                            <span class="card__heading-span card__heading-span--1">
                                The Sea Explorer
                            </span>
                        </div>
                        <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 hotels</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">$297</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 card__side--front-2">
                        <div class="card__picture card__picture--2">
                            &nbsp;
                        </div>
                        <div class="card__heading">
                            <span class="card__heading-span card__heading-span--2">
                                The Forest Hiker
                            </span>
                        </div>
                        <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 card__side--front-3">
                        <div class="card__picture card__picture--3">
                            &nbsp;
                        </div>
                        <div class="card__heading">
                            <span class="card__heading-span card__heading-span--3">
                                The Snow Adventurer
                            </span>
                        </div>
                        <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-big">
            <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 loop>
                <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. Consectetur distinctio dolorum mollitia non quisquam reprehenderit repudiandae voluptas. Deleniti omnis rem repellendus. Itaque magni, sint! Fugit harum in nisi optio quidem. Itaque magni, sint! Fugit harum in nisi optio quidem.
                    </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>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum mollitia non quisquam reprehenderit repudiandae voluptas. Deleniti omnis rem repellendus. Itaque magni, sint! Fugit harum in nisi optio quidem. Itaque magni, sint! Fugit harum in nisi optio quidem.
                    </p>
                </div>
            </div>
        </div>

        <div class="u-center-text u-margin-top-big">
            <a href="#" class="btn 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">E-mail 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">
            <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" class="footer__logo" src="img/logo-green-small-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">
            <div class="footer__copyright">
                Built by <a href="#" class="footer__link">Wojciech Cywinski</a> for <a href="#" class="footer__link">Advanced CSS and Sass 2018</a>. Copyright &copy; by Jonas Schmedtmann.
            </div>
        </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">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem mollis aliquam ut porttitor. Vulputate enim nulla aliquet porttitor lacus luctus. Imperdiet proin fermentum leo vel orci. Odio ut enim blandit volutpat maecenas volutpat. Enim facilisis gravida neque convallis a cras semper auctor neque. Cursus in hac habitasse platea dictumst quisque sagittis. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Tristique sollicitudin nibh sit amet commodo nulla.
            </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>