Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="header">
        <nav>
            <ul class="row">
                <li class="logo"><img src="img/logo.png" alt="Kind Heart"></li>
                <li><a href="#header" class="active">Главная</a></li>
                <li><a href="#events">Мероприятия</a></li>
                <li><a href="#captains">Капитаны</a></li>
                <li><a href="#gallery">Галерея</a></li>
                <li><a href="#register">Регистрация</a></li>
            </ul>
        </nav>
    </header>
    <section class="slider" id="slider">
        <div class="slide" id="slide-1">
            <img src="img/slider/1.jpg" alt="Альтернативный заголовок">
            <h3>Присоединяйся</h3>
            <h2>Нам нужна твоя помощь</h2>
            <p>Волонтерство способствует улучшению качества жизни,
                а также развитию солидарности между людьми.</p>
            <a href="#register" class="btn">Регистрация</a></div>
        <div class="slide hidden" id="slide-2">
            <img src="img/slider/2.jpg" alt="Альтернативный заголовок">
            <h3>Приводи с собой друзей</h3>
            <h2>Работа найдется всем</h2>
            <p>Волонтёрство дает возможность создавать новые профессии и открывать новые рабочие места.</p>
            <a href="#register" class="btn">Регистрация</a></div>
        <div class="slide hidden" id="slide-3">
            <img src="img/slider/3.jpg" alt="Альтернативный заголовок">
            <h3>Быть волонтером</h3>
            <h2>Это круто</h2>
            <p>Волонтерство способствует более уравновешенному экономическому и социальному развитию.</p>
            <a href="#register" class="btn">Регистрация</a></div>
        <div class="controls row">
            <div class="control active-bar" id="control-1"></div>
            <div class="control" id="control-2"></div>
            <div class="control" id="control-3"></div>
        </div>
    </section>
    <section class="events column" id="events">
        <h2 class="title">Наши <span>мероприятия</span></h2>
        <div class="current"><img src="img/events/1.jpg" alt="Альтернативный заголовок">
            <h4>Встреча с ветеранами</h4>
            <p>30.10.2017 запланирована встреча с ветеранами ВОВ. Хотите помочь? Скорее записывайтесь!</p>
            <a href="#register" class="inv-btn">Хочу помочь</a>
        </div>
        <div class="row">
            <div class="preview">
                <img src="img/events/2.jpg" alt="Альтернативный заголовок">
                <h4>Встреча с ветеранами</h4>
                <p>30.10.2017 запланирована встреча с ветеранами ВОВ. Хотите помочь? Скорее записывайтесь!</p>
                <a href="#register" class="inv-btn">Хочу помочь</a>
            </div>
            <div class="preview">
                <h4>Концерт для детей</h4>
                <p>14.11.2017 помогаем организовать концерт для детей из детских домов. Будут выступать известные группы, людей очень много. Нам нужна Ваша помощь!</p>
                <img src="img/events/2.jpg" alt="Альтернативный заголовок">
                <a href="#register" class="inv-btn">Хочу помочь</a>
            </div>
            <div class="preview">
                <h4>Разговор с президентом</h4>
                <p>25.11.2017 нашим командам доверено организовать порядок в зале при общении президента РФ с желающими. Очень важно!</p>
                <img src="img/events/3.jpg" alt="Альтернативный заголовок">
                <a href="#register" class="inv-btn">Хочу помочь</a>
            </div>
            <div class="preview">
                <h4>Покраска заборов</h4>
                <p>На весну 2018 запланировано массовая покраска заборов во дворах всех городов России. Наши команды не остаются в стороне и тоже участвуют!</p>
                <img src="img/events/4.jpg" alt="Альтернативный заголовок">
                <a href="#register" class="inv-btn">Хочу помочь</a>
            </div>
        </div>
    </section>
    <section class="captains column" id="captains">
        <h2 class="inv-title">Капитаны <span>команд</span></h2>
        <div class="row">
            <div class="volunteer"><img src="img/volunteers/1.jpg" alt="Альтернативный заголовок">
                <div class="overlay"></div>
                <h4>Света Павлова</h4>
                <p>г. Самара</p>
                <a href="https://vk.com" class="vk">VK</a>
            </div>
            <div class="volunteer"><img src="img/volunteers/2.jpg" alt="Альтернативный заголовок">
                <div class="overlay"></div>
                <h4>Оля Петрова</h4>
                <p>г. Москва</p>
                <a href="https://vk.com" class="vk">VK</a>
            </div>
            <div class="volunteer"><img src="img/volunteers/3.jpg" alt="Альтернативный заголовок">
                <div class="overlay"></div>
                <h4>Катя Смирнова</h4>
                <p>г. Краснодар</p>
                <a href="https://vk.com" class="vk">VK</a>
            </div>
        </div>
    </section>
    <section class="gallery column" id="gallery">
        <h2 class="title">Галерея <span>событий</span></h2>
        <div class="row">
            <div class="gallery-item"><img src="img/gallery/1.jpg" alt="Альтернативный заголовок">
                <div class="item-overlay">

                </div>
                <h4>День России</h4>
                <p>12.06.2017</p>
            </div>
            <div class="gallery-item"><img src="img/gallery/2.jpg" alt="Альтернативный заголовок">
                <div class="item-overlay">

                </div>
                <h4>День победы</h4>
                <p>09.05.2017</p>
            </div>
            <div class="gallery-item"><img src="img/gallery/3.jpg" alt="Альтернативный заголовок">
                <div class="item-overlay">

                </div>
                <h4>Собрание</h4>
                <p>01.07.2017</p>
            </div>
        </div>
        <div class="row">
            <div class="gallery-item"><img src="img/gallery/4.jpg" alt="Альтернативный заголовок">
                <div class="item-overlay">

                </div>
                    <h4>Эко-акция</h4>
                    <p>14.08.2017</p>
            </div>
            <div class="gallery-item"><img src="img/gallery/5.jpg" alt="Альтернативный заголовок">
                <div class="item-overlay">

                </div>
                    <h4>День знаний</h4>
                    <p>01.09.2017</p>
            </div>
            <div class="gallery-item"><img src="img/gallery/6.jpg" alt="Альтернативный заголовок">
                <div class="item-overlay">

                </div>
                    <h4>День учителя</h4>
                    <p>05.10.2017</p>
            </div>
        </div>
    </section>
    <section class="join column" id="register">
        <h2 class="inv-title">Присоединяйся <span>к нам</span></h2>
        <div class="row">
            <img src="img/map.jpg" alt="Альтернативный заголовок">
            <form class="column">
                <h4>Регистрация</h4>
                <input type="text" placeholder="Ваше имя">
                <input type="email" placeholder="Email">
                <input type="tel" placeholder="Телефон">
                <label><input type="checkbox" name="subscribe" id="check">Подписаться на новости</label>
                <a href="" class="inv-btn">Зарегистрироваться</a>
            </form>
        </div>
    </section>
    <footer class="row">
        <a href="https://twitter.com" class="btn">twitter</a>
        <a href="https://twitter.com" class="btn">facebook</a>
        <a href="https://twitter.com" class="btn">instagram</a>
        <a href="https://twitter.com" class="btn">vk</a>
    </footer>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        jQuery(function($) {
            $(window).scroll(function(){
                if($(this).scrollTop()>860){
                    $('header').addClass('fixed');
                }
                else if ($(this).scrollTop()<860){
                    $('header').removeClass('fixed');
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(function(){
            $("a[href^='#']").click(function(){
                var _href = $(this).attr("href");
                $("html, body").animate({scrollTop: $(_href).offset().top - 60 + "px"});
                return false;
            });
        });
    </script>
    <script>
        $("#control-1").click(function(){
            $("#slide-3").animate({width: 'hide', height: 'hide'}, 3000).addClass('hidden');
            $("#slide-2").animate({width: 'hide', height: 'hide'}, 3000).addClass('hidden');
            $("#slide-1").animate({width: 'show', height: 'show'}, 3000).removeClass('hidden').fadeIn();
            $("#control-1").addClass('active-bar');
            $("#control-2").removeClass('active-bar');
            $("#control-3").removeClass('active-bar');
        });
        $("#control-2").click(function(){
            $("#slide-3").animate({width: 'hide', height: 'hide'}, 3000).addClass('hidden');
            $("#slide-2").animate({width: 'show', height: 'show'}, 3000).removeClass('hidden').fadeIn();
            $("#slide-1").animate({width: 'hide', height: 'hide'}, 3000).addClass('hidden');
            $("#control-1").removeClass('active-bar');
            $("#control-2").addClass('active-bar');
            $("#control-3").removeClass('active-bar');
        });
        $("#control-3").click(function(){
            $("#slide-3").animate({width: 'show', height: 'show'}, 3000).removeClass('hidden').fadeIn();
            $("#slide-2").animate({width: 'hide', height: 'hide'}, 3000).addClass('hidden');
            $("#slide-1").animate({width: 'hide', height: 'hide'}, 3000).addClass('hidden');
            $("#control-1").removeClass('active-bar');
            $("#control-2").removeClass('active-bar');
            $("#control-3").addClass('active-bar');
        });
    </script>
    <script>

        var mainContent = $(".item");
        var current = $(".current");
        var currentImg = $(".current img").attr("src", mainContent.eq(0).find("img").attr("src"));
        var currentHeader = $(".current h4").text (mainContent.eq(0).find("h2").text() );
        var currentP = $(".current p").text (mainContent.eq(0).find("p").text() );
        var i =1;
        var id;

        current.mouseover( function () {
            var timeout = 3500;
            var action = function () {
                var newImg = mainContent.eq(i).find("img").attr("src");
                var newHeader = mainContent.eq(i).find("h4").text();
                var newP = mainContent.eq(i).find("p").text();

                setTimeout(function () {
                    currentImg.attr("src", newImg);
                    currentHeader.text(newHeader);
                    currentP.text(newP);

                    currentImg.removeClass("out");
                    currentImg.addClass("change-img");

                    currentHeader.removeClass("out");
                    currentHeader.addClass("change-h2");

                    currentP.removeClass("out");
                    currentP.addClass("change-p");
                }, 800);


                if (i === 3)
                    i =0;
                else
                    i++;

            };
            id = setInterval(action, timeout);
        });

        current.mouseout(function () {
            clearInterval(id);
        });

    </script>
</body>
</html>