<head>
    <title>9 team</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
          crossorigin="anonymous">

    <!-- <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Raleway" rel="stylesheet"> -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Rubik" rel="stylesheet">

    <link rel="stylesheet" type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style type="text/css">
        .jumbotron {
            background-image: url('./img/girly.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            /* background-attachment: scroll; */
            min-height: 100vh;
        }

        section {
            padding-top: 4rem;
        }

        #description, #trailer, #showcase, {
            font-family: 'Open Sans', sans-serif;
            font-family: 'Rubik', serif;
        }

        #section-newsletter {
            padding-top: 0;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            /* font-family: 'Rubik', serif; */
        }

        /* h1, h2, h3, h4, h5, h5 {
          font-family: 'Rubik', serif;
        } */
    </style>

</head>

<body data-spy="scroll" data-target="#navScrollspy">
<nav class="navbar bg-primary navbar-dark navbar-expand-md fixed-top">
    <a href="#" class="navbar-brand">Лучший обменник</a>
    <button
            type="button"
            class="navbar-toggler navbar-toggler-right"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
    >
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- collapsible menu -->
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav" id="navScrollspy">

            <li class="nav-item">
                <a href="#section-description" class="nav-link">О нас</a>
            </li>
            <li class="nav-item">
                <a href="#section-trailer" class="nav-link">Познавательный ролик</a>
            </li>
            <li class="nav-item">
                <a href="#section-showcase" class="nav-link">Навигатор</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Регистрация</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Вход</a>
            </li>
        </ul>

    </div>
</nav>

<!-- section top -->
<section id="section-top" class="jumbotron jumbotron-fluid text-white d-flex justify-content-center align-items-center">
    <div class="container text-center">
        <h1 class="display-1 text-primary text-uppercase">awlex</h1>
        <!-- to make text disappear use d-none  -->
        <p class="display-4 d-none d-sm-block">На нашем сайте вы сможете найти любые плюшки для обмена</p>

    </div>
</section>
<div class="container">
    <!-- description -->
    <section id="section-description">
        <h2 class="display-4 text-center">О нас</h2>

        <p>Наш сайт создан для обмена товарами среди всего населения.</p>
        <p>Все мы прекрасно знаем,что не всегда люди хотят что-либо продать, иногда им просто хочеться обменять это на
            другую интересующую их вещь. Вот для этих целей и был разработан наш обменник Awlex.</p>
        <p>Благодаря широкому ассортименту товаров в нашей базе, вы сможете подобрать себе для обмена, абсолютно любую
            вещь.</p>
    </section>

    <!-- Trailer section -->
    <section id="section-trailer">
        <h2 class="display-4  text-center">Топ-10 товаров для обмена и продаж в 2017 году</h2>
        <p>В данном видео, мы сможете ознакомиться с самыми ходовыми товарами за прошлый год.</p>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/vdBMFIVrVvg" frameborder="0"
                    allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </section>

    <!-- Showcase section -->
    <section id="section-showcase">
        <h2 class="display-4  text-center">Навигатор по сайту</h2>
        <p>Эти 4 простых шага, помогут вам правильно обменять свою плюшку</p>

        <!-- start as page loads -->
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
                <li data-target="#carousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <!-- each individual slide -->
                <div class="carousel-item active">
                    <img src="img/item1.png" alt="item1" class="d-block img-fluid">
                    <!-- <img src="lorempixel.com/1080/460/" alt="item1" class="d-block img-fluid"> -->
                    <div class="carousel-caption">
                        <h3 class="display-4">Шаг 1: Регистрация</h3>
                        <p>Пройдите нашу простую регистрацию, для того чтобы полноценно пользоваться всеми услугами
                            сайта.</p>
                    </div>
                </div>

                <div class="carousel-item">
                    <img src="img/item2.png" alt="item2" class="d-block img-fluid">
                    <div class="carousel-caption">
                        <h3 class="display-4">Шаг 2: Авторизация</h3>
                        <p>После того, как вы были успешно зарегистрированы, введите свой логин и пароль.</p>
                    </div>
                </div>

                <div class="carousel-item">
                    <img src="img/item3.png" alt="item3" class="d-block img-fluid">
                    <div class="carousel-caption">
                        <h3 class="display-4">Шаг 3: Добавление товара</h3>
                        <p>В разделе нашего меню - Предложить товар, вы сможете зарегистрировать свою плюшку, добавив ее
                            в общий список нашей базы, после чего она будет видна остальным пользователям.</p>
                    </div>
                </div>

                <div class="carousel-item">
                    <img src="img/item4.png" alt="item4" class="d-block img-fluid">
                    <div class="carousel-caption">
                        <h3 class="display-4">Шаг 4: Поиск товара для обмена</h3>
                        <p>После выполнения первых 3-х шагов, вы успешно можете выбрать себе товар для обмена.
                            Пользователю, товар которого вы выбрали, прийдет уведомление, после чего он сможет
                            ознакомиться со списком товаров, предложенный вами. И если его что-либо также заинтересует,
                            вы сможете успешно обменяться.</p>
                    </div>
                </div>

            </div> <!-- end of carousel inner -->

            <!-- links to control directions  -->
            <a href="#carousel" class="carousel-control-prev" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a href="#carousel" class="carousel-control-next" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

    <!-- Reviews section -->
    <section id="section-reviews">
        <h2 class="display-4 text-center">Отзывы</h2>
        <div class="row">


            <div class="col-12 col-md-6 col-xl-3">
                <blockquote class="blockquote p-3">
                    <p><i class="fa fa-fw fa-quote-left text-secondary" aria-hidden="true"></i> Довольно таки удобный
                        обменник, нашел много полезного для себя<i class="fa fa-fw fa-quote-right text-secondary"
                                                                   aria-hidden="true"></i></p>
                    <footer class="blockquote-footer">
                        Flarex_12
                        <time datetime="2018-02-27T13:35">(Февраль 27 2018 13:35)</time>
                    </footer>
                </blockquote>
            </div>

            <div class="col-12 col-md-6 col-xl-3">
                <blockquote class="blockquote p-3">
                    <p><i class="fa fa-fw fa-quote-left text-secondary" aria-hidden="true"></i> Отличный сайт,
                        неоднократно находил нужные плюшки <i class="fa fa-fw fa-quote-right text-secondary"
                                                              aria-hidden="true"></i></p>
                    <footer class="blockquote-footer">
                        GoodDay
                        <time datetime="2018-03-04T17:17">(Март 04 2018 17:17)</time>
                    </footer>
                </blockquote>
            </div>

            <div class="col-12 col-md-6 col-xl-3">
                <blockquote class="blockquote p-3">
                    <p><i class="fa fa-fw fa-quote-left text-secondary" aria-hidden="true"></i>Спасибо Awlex за
                        возможность такого обмена, очень круто <i class="fa fa-fw fa-quote-right text-secondary"
                                                                  aria-hidden="true"></i></p>
                    <footer class="blockquote-footer">
                        Lorelly
                        <time datetime="2018-03-05T18:21">(Март 05 2018 18:21)</time>
                    </footer>
                </blockquote>
            </div>

            <div class="col-12 col-md-6 col-xl-3">
                <blockquote class="blockquote p-3">
                    <p><i class="fa fa-fw fa-quote-left text-secondary" aria-hidden="true"></i>Рад что нашел вас, уже
                        успешно совершил несколько обменов<i class="fa fa-fw fa-quote-right text-secondary"
                                                             aria-hidden="true"></i></p>
                    <footer class="blockquote-footer">
                        Anthony-321
                        <time datetime="2018-03-15T15:17">(Март 15 2018 15:17)</time>
                    </footer>
                </blockquote>
            </div>
        </div> <!-- end row -->
    </section>

</div> <!-- end container -->


<!-- Footer section -->
<footer class="bg-light">
    <div class="container py-3 py-sm-5">

        <div class="row">

            <div class="col-12 col-sm-6 col-xl-3">
                <h6><b>Наше место нахождение</b></h6>
                <address>
                    <strong>Имя бренда</strong><br/>
                    Харьков, пл.Павловская 6, 61000 <br/>
                    Awlex <br/>
                    <i class="fa fa-fw fa-phone" aria-hidden="true"></i> <a href="tel:0677851122">(067)
                        785-11-22</a><br/>
                    <i class="fa fa-fw fa-inbox" aria-hidden="true"></i> <a
                            href="mailto:info@brand.com">awlex@gmail.com</a>
                </address>
                </ul>
            </div>

        </div> <!-- end row -->

        <div class="row">
            <div class="col-12 col-sm-6 col-sm-3">
                <ul class="list-inline">
                    <li class="list-inline-item">&copy; 2018 A-level inc.</li>
                    <li class="list-inline-item">9-team</li>
                </ul>
            </div>
        </div> <!-- end row -->
    </div>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>

<!-- sm scroll support here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.polyfills.min.js"
        integrity="sha256-+Dm1njwBSVm4pvYvs4IgJ+RTCwX51sCGZNy3ZO0XZI4="
        crossorigin="anonymous"></script>

<script type="text/javascript">
    $(function () {
        var scroll = new SmoothScroll('a[href*="#section-"]');
    });
</script>

</body>
