olga_pushkar
/
markup


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
							<!DOCTYPE html>
<html lang="zxx">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>module 1</title>
        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/FREESCPT.css" />
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/all.css" />
    </head>
    <body>
        <div id="wrapper">
            <header id="header">
                <div class="container">
                    <div class="big-menu">
                        <div class="logo"><a href="#"><img src="images/logo.png" alt="logo"></a></div>
                        <input id="menu__toggle" type="checkbox" />
                        <label class="menu__btn" for="menu__toggle">
                            <span></span>
                        </label>
                        <nav class="main-nav_hamburger-menu">
                            <ul class="menu__box">
                                <li><a class="menu__item" href="#about">About us</a></li>
                                <li><a class="menu__item" href="#contact">Reservation</a></li>
                                <li><a class="menu__item" href="#gallery">Gallery</a></li>
                                <li><a class="menu__item" href="#blog">Blog</a></li>
                                <li><a class="menu__item" href="#elements">Elements</a></li>
                                <li><a class="menu__item" href="#shop">Shop</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <main id="main">
                <section class="banner" style="background-image: url(images/bg-01.jpg);">
                    <div class="container">
                        <div class="two_columns">
                            <div class="column">
                                <form action="#" class="form">
                                    <p class="form-title">Trial Class</p>
                                    <input type="text" placeholder="Enter your name">
                                    <input type="tel" placeholder="Enter your phone">
                                    <select>
                                        <option>Chose your class</option>
                                        <option value="health">For health</option>
                                        <option value="children">For children</option>
                                        <option value="weight">Lose weight</option>
                                        <option value="elderly">For elderly</option>
                                    </select>
                                    <input class="btn" type="submit" value="Try it">
                                </form>
                            </div>
                            <div class="column">
                                <div class="col-text">
                                    <h1>Just balance <br> your mind &amp; body</h1>
                                    <p class="top-text">Create the healthy living <br> for yourself</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section id="blog" class="program-section">
                    <div class="container">
                        <div class="program_title">
                            <h2>Yoga feature program</h2>
                            <span class="our-classes">Our classes</span>
                        </div>
                        <div class="two_columns">
                            <div class="column">
                                <div class="card-program">
                                    <div class="photo-item" style="background-image: url(images/img-01.jpg);"></div>
                                    <div class="text-card">
                                        <div class="text-card_body">
                                            <h3><a href="#">Yoga for health</a></h3>
                                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas laborum nisi quos debitis eius eum odit porro expedita accusamus, suscipit
                                            </p>
                                            <span class="sign"><a href="#">Ashtanga&ndash;Hatha</a></span>
                                        </div>
                                    </div>    
                                </div>
                                <div class="card-program">
                                    <div class="photo-item" style="background-image: url(images/img-03.jpg);"></div>
                                    <div class="text-card">
                                        <div class="text-card_body">
                                            <h3><a href="#">Yoga for children</a></h3>
                                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas laborum nisi quos debitis eius eum odit porro expedita accusamus, suscipit 
                                            </p>
                                            <span class="sign"><a href="#">Ashtanga&ndash;Hatha</a></span>
                                        </div>
                                    </div>    
                                </div>
                            </div>
                            <div class="column">
                                <div class="card-program">
                                    <div class="photo-item" style="background-image: url(images/img-02.jpg);"></div>
                                    <div class="text-card">
                                        <div class="text-card_body">
                                            <h3><a href="#">Yoga for lose weight</a></h3>
                                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas laborum nisi quos debitis eius eum odit porro expedita accusamus, suscipit
                                            </p>
                                            <span class="sign"><a href="#"> Ashtanga&ndash;Hatha</a></span>
                                        </div>
                                    </div>    
                                </div>
                                <div class="card-program">
                                    <div class="photo-item" style="background-image: url(images/img-04.jpg);"></div>
                                    <div class="text-card">
                                        <div class="text-card_body">
                                            <h3><a href="#">Yoga for elderly</a></h3>
                                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas laborum nisi quos debitis eius eum odit porro expedita accusamus, suscipit 
                                            </p>
                                            <span class="sign"><a href="#"> Ashtanga&ndash;Hatha</a></span>
                                        </div>
                                    </div>    
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <ul id="gallery" class="gallery">
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-05.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-06.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-07.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-08.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-09.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-10.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-11.jpg);"></a></li>
                    <li><a href="#" class="card-gallery" style="background-image: url(images/img-12.jpg);"></a></li>
                </ul>
                <section id="about" class="about_us">
                    <div class="container">
                        <div class="two_columns">
                            <div class="column">
                                <div class="about_text">
                                    <h2>About us</h2>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium nihil totam architecto neque reprehenderit accusamus dolorum vero repellendus officia vel et excepturi, consequatur optio impedit at possimus? Error, iste architecto. excepturi, consequatur optio impedit at possimus? Error, iste architecto.</p>
                                </div>
                            </div>
                            <div class="column">
                                <div class="multiple-items">
                                    <div class="slide-photo" style="background-image: url(images/img-11.jpg);"></div>
                                    <div class="slide-photo" style="background-image: url(images/img-12.jpg);"></div>
                                    <div class="slide-photo" style="background-image: url(images/img-13.jpg);"></div>
                                </div>
                            </div>
                        </div>   
                    </div>
                </section>
                <section id="elements" class="advantages" style="background-image: url(images/bg-02.jpg);">
                    <div class="container">
                        <ul class="benefit">
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-01.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Improved overall <br> health</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-02.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Increased <br> concentration</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-03.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Blance <br> your mind</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-04.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Sleep <br> better</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-05.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>weight loss</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas 
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-06.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Sterngthens <br> your bones</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-07.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Increased <br> flexibility</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box-ico">
                                    <div class="img">
                                        <a href="#"><img src="images/ico-08.png" alt="photo"></a>
                                    </div>
                                    <div class="text-benefit">
                                        <h4>Lower blood <br> pressure</h4>
                                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium reiciendis voluptas  
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div></section>
                <section id="shop" class="price" style="background-image: url(images/bg-03.jpg);">
                    <div class="container">
                        <ul class="card-price">
                            <li>
                                <div class="offer">
                                    <div class="top-offer">
                                        <span class="valuta">$</span>
                                        <span class="number">49</span>
                                        <span class="month"> &frasl; month</span>
                                    </div>
                                    <div class="bottom-offer">
                                        <ul class="schedule">
                                            <li>entry date: mon &#8211; fri</li>
                                            <li>entry time: 8A.M &#8211; 8p.m</li>    
                                            <li>nutrition advicer: no</li>
                                        </ul>
                                        <div class="buy-btn">
                                            <a href="#" class="btn">Buy now</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="offer">
                                    <div class="top-offer">
                                        <span class="valuta">$</span>
                                        <span class="number">69</span>
                                        <span class="month"> &frasl; month</span>
                                    </div>
                                    <div class="bottom-offer">
                                        <ul class="schedule">
                                            <li>entry date: mon &#8211; fri</li>
                                            <li>entry time: 8A.M &#8211; 8p.m</li>    
                                            <li>nutrition advicer: yes</li>
                                        </ul>
                                        <div class="buy-btn">
                                            <a href="#" class="btn">Buy now</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="offer">
                                    <div class="top-offer">
                                        <span class="valuta">$</span>
                                        <span class="number">99</span>
                                        <span class="month"> &frasl; month</span>
                                    </div>
                                    <div class="bottom-offer">
                                        <ul class="schedule">
                                            <li>entry date: mon &#8211; sun</li>
                                            <li>entry time: 8A.M &#8211; 8p.m</li>    
                                            <li>nutrition advicer: yes</li>
                                        </ul>
                                        <div class="buy-btn">
                                            <a href="#" class="btn">Buy now</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
            </main>
            <footer id="footer">
                <div id="contact" class="upper_footer">
                    <div class="container">
                        <div class="two_columns">
                            <div class="column">
                                <div class="col-foot">
                                    <h4>About</h4>
                                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti vitae magnam recusandae quia labore sed culpa quaerat eligendi! Culpa deleniti nostrum velit explicabo ab, esse natus laudantium quis odio quo!esse natus laudantium quis odio quo!</p>
                                </div>
                            </div>
                            <div class="column">
                                <div class="list-program">
                                    <h4>contact us</h4>
                                    <div class="two_columns">
                                        <div class="column">
                                            <address>5419 Joseph Mountains <br> Apt. 716</address>
                                                <ul class="phones">
                                                    <li><a href="tel:123456789">+1 234 567 89</a></li>
                                                    <li><a href="tel:123467890">+1 234 678 90</a></li>
                                                </ul>
                                        </div>
                                        <div class="column">
                                            <a href="mailto:joga.info@example.com" class="email">joga.info@example.com</a>
                                            <a href="www.example.com" class="site">www.example.com</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="social-network">
                            <li>
                                <a href="http://pinterest.com" target="_blank"><span class="icon-pinterest1"></span></a>
                            </li>
                            <li>
                                <a href="http://twitter.com" target="_blank"><span class="icon-twitter"></span></a>
                            </li>
                            <li>
                                <a href="http://facebook.com" target="_blank"><span class="icon-facebook"></span></a>
                            </li>
                            <li>
                                <a href="http://google.com" target="_blank"><span class="icon-google-plus"></span></a>
                            </li>
                            <li>
                                <a href="http://instagram.com" target="_blank"><span class="icon-instagram"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="container">
                    <span class="copy">Copyright &copy; 2016-2017 <a href="#">Yoga classes</a></span>
                </div>
            </footer>
        </div>
        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="slick/slick.min.js"></script>
        <script src="slick/slick.js"></script>
        <script>
            $(document).ready(function(){
            $('.multiple-items').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        });
        </script>  
    </body>
</html>