vdiachenko / mockups Goto Github PK

    <div class="top">
        <header class="header">

            <h1 class="header__line">
                <img src="img/logo.png" alt="my journey | simple way to do it today" class="header__logo">
            </h1>

            <div class="header__social social">
                <a href=""><i class="social__facebook social__item"></i></a>
                <a href=""><i class="social__twitter social__item"></i></a>
                <a href=""><i class="social__google social__item"></i></a>
            </div>

        </header>

        <h1 class="top__title">
            Hello! You are looking at MyJourney HTML theme.
            <br>
            Express your thought and emotions about Journey of your life.
        </h1>
    </div>


    <div class="slider">
        <ul class="slider__list fix">
            <li><img src="img/picture1.png" alt="slide 1" class="slider__pic"></li>
            <li><img src="img/picture2.png" alt="slide 2" class="slider__pic"></li>
        </ul>   
    </div>



    <div class="features">
        <div class="features__item features__item-1">
            <img src="img/counter1.png" alt="light and fast">
            <h3 class="features__title">light and fast</h3>
            <div class="features__border border"></div>
            <p class="features__text">Clean & Beautiful Design, HTML5 & CSS3
            <br>
            valid code provide good readability 
            <br>
            and smooth performance.</p>
        </div>

        <div class="features__item features__item-2">
            <img src="img/counter2.png" alt="responsive design">
            <h3 class="features__title">responsive design</h3>
            <div class="features__border border"></div>
            <p class="features__text">Responsive designed and Retina Ready. 
            <br>MyJourney will look perfect on any 
            <br>device you can imagine.</p>
        </div>

        <div class="features__item features__item-3">
            <img src="img/counter1.png" alt="easy to customize">
            <h3 class="features__title">easy to customize</h3>
            <div class="features__border border"></div>
            <p class="features__text">Optimized and valid code using the latest  technologies allows to make changes in the page structure of the template.</p>
        </div>
    </div>



    <div class="content">
        <div class="content__slider">
            <ul class="slider__list">
                <li><img src="img/text-pic.png" alt="slide 1" class="slider__pic"></li>
                <li><img src="img/s2-pic1.jpg" alt="slide 2" class="slider__pic"></li>
            </ul>
        </div>

        <div class="content__text">
            <h2 class="content__title">So simple, so beautiful</h2>
            <p class="content__article article-1">MyJourney HTML template is a landing page with clean structure and 
            beautiful minimalistic design. It can be useful in so many ways, 
            including the most obvious, whis is to Tell a story.</p>
            <p class="content__article article-2">Optimized and valid code using the latest HTML5 and CSS3 technologies 
            allows to make changes in the page structure of the template as it is
            requared by your needs.</p>
        </div>
    </div>



    <div class="info">
        <div class="info_r">
            <div class="info__slider">
                <ul class="slider__list">
                    <li><img src="img/s2-pic1.jpg" alt="slide 1" class="slider__pic"></li>
                    <li><img src="img/s2-pic2.jpg" alt="slide 2" class="slider__pic"></li>
                </ul>
            </div>              
        </div>  

        <div class="info_l">
            <h2 class="info__title_l">Right here, right now</h2>
            <p class="info__text_l">MyJourney is all about being useful when you need nice and simple way to tell the people about what you've seen and felt about something important. Something that really means a lot.</p>
            <button class="info__btn_l">More information</button> 
            <p class="info__get_l">or<span class="info__get_span"> get it right now!</span></p>
        </div>      


    </div>



    <div class="follow-slider">
        <div class="follow-slider__i">
            <ul class="slider__list">
                <li class="follow-slider__item"><img src="img/bird.jpg" alt="bird" class="follow-slider__img"><p class="follow-slider__text">First of many freebies from #PixelBuddha on @dribbble <br>
                <a href="https://dribbble.com/shots/plates" class="follow-slider__link">https://dribbble.com/shots/plates</a> Follow us to be in touch!</p>
                <p class="follow-slider__signature"><span>@PixelBuddha</span> long ago</p></li>

                <li class="follow-slider__item"><img src="img/google.png" alt="google" class="follow-slider__img"><p class="follow-slider__text">We have comunity on google+<br>
                <a href="https://plus.google.com" class="follow-slider__link">https://plus.google.com</a> follow us</p>
                <p class="follow-slider__signature"><span>@apaxicko</span></p></li>

                <li class="follow-slider__item"><img src="img/fb.png" alt="fb" class="follow-slider__img"><p class="follow-slider__text">Latest news only on our facebook account<br>
                <a href="https://www.facebook.com" class="follow-slider__link">https://www.facebook.com</a> Subscribe on facebook</p>
                <p class="follow-slider__signature"><span>designer</span></p></li>
            </ul>
        </div>
    </div>



    <footer class="footer">
        <h2 class="footer__title">Subscribe to our newsletter</h2>
        <input type="text" class="footer__field" placeholder="Your email adress">
        <button class="footer__btn"></button>
        <p class="footer__text">Subscribe now if you want to recieve updates and news via email.
            <br>Don’t worry, it won’t happen often.
        </p>
        <div class="footer__border border"></div>
        <div class="footer__social social">
            <a href=""><i class="social__facebook social__item"></i></a>
            <a href=""><i class="social__twitter social__item"></i></a>
            <a href=""><i class="social__google social__item"></i></a>
        </div>
        <img src="img/footer.jpg" alt="footer" class="footer__background">
    </footer>