janedev
/
homework-html


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A-level</title>
    <link rel="shorttut icon" href="img/favicon.png" type="image/png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap">
    <link rel="stylesheet" href="css/stylesheet.css">
    <link rel="stylesheet" href="css/icomoon.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="wrapper">
        <header id="header">
            <div class="container">
                <div class="header_content">
                    <div class="logo">
                        <a href="https://logo.png"><img src="img/logo.png" alt="logo-a-level"></a>
                    </div>
                    <nav id="nav">
                        <input id="menu_btn" type="checkbox">
                        <label class="burger" for="menu_btn">
                            <span>opener</span>
                        </label>
                        <ul class="menu">
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Reservaion</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Elements</a></li>
                            <li><a href="#">Shop</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <main id="main">
            <section class="section_one">
                <div class="container">
                    <div class="columns">
                        <div class="col1">
                            <form action="#" class="form">
                                <h3>Trial Class</h3>
                                <input type="text" placeholder="Enter your name">
                                <input type="tel" placeholder="Enter your phone">
                                <select>
                                    <option>Chose your class</option>
                                    <option>Chose your class</option>
                                    <option>Chose your class</option>
                                </select>
                                <button class="btn">Try it</button>
                            </form>
                        </div>
                        <div class="col2">
                            <h1>
                                Just Balance<br>
                                Your Mind & Body
                            </h1>
                            <h3>
                                Create the healthy living<br>
                                for yourself
                            </h3>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section_two">
                <div class="container">
                    <div class="cards">
                        <div class="cards1">
                            <h2>
                                Yoga feature program
                            </h2>
                            <h3>
                                Our Classes
                            </h3>
                        </div>
                        <ul class="cards2">
                            <li>
                                <div class="list_1">
                                    <div class="list_img">
                                        <img src="img/img-01.jpg" alt="photo1" >
                                    </div>
                                    <div class="list_text">
                                        <h4>
                                            <a href="#">Yoga For Health</a>
                                        </h4>
                                        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                                        <span>
                                            <a href="#">Ashtanga - Hatha</a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list_2">
                                    <div class="list_img">
                                        <img src="img/img-02.jpg" alt="photo2" >
                                    </div>
                                    <div class="list_text">
                                        <h4>
                                            <a href="#">Yoga For Lose Weight</a>
                                        </h4>
                                        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                                        <span>
                                            <a href="#">Ashtanga - Hatha</a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list_3">
                                    <div class="list_img">
                                        <img src="img/img-03.jpg" alt="photo3" >
                                    </div>
                                    <div class="list_text">
                                        <h4>
                                            <a href="#">Yoga For Children</a>
                                        </h4>
                                        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                                        <span>
                                            <a href="#">Ashtanga - Hatha</a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list_4">
                                    <div class="list_img">
                                        <img src="img/img-04.jpg" alt="photo4" >
                                    </div>
                                    <div class="list_text">
                                        <h4>
                                            <a href="#">Yoga For Elderly</a>
                                        </h4>
                                        <p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                                        <span>
                                            <a href="#">Ashtanga - Hatha</a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <section class="section_three">
                <ul class="photos">
                    <li> <img src="img/img-05.jpg" alt="img5"></li>
                    <li> <img src="img/img-06.jpg" alt="img6"></li>
                    <li> <img src="img/img-07.jpg" alt="img7"></li>
                    <li> <img src="img/img-08.jpg" alt="img8"></li>
                    <li> <img src="img/img-09.jpg" alt="img9"></li>
                    <li> <img src="img/img-10.jpg" alt="img10"></li>
                    <li> <img src="img/img-11.jpg" alt="img11"></li>
                    <li> <img src="img/img-12.jpg" alt="img12"></li>
                </ul>
            </section>
            <section class="section_four">
                <div class="container">
                    <div class="about_container">
                        <div class="about_body">
                            <div class="text_part">
                                <h2>about us</h2>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore
                                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation toui
                                    ullamcomi laboris
                                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor it in lorei voluptate
                                    velit esse
                                    cillum dolore eu fugiat nulla pariatur lorem ispum loting sokui.
                                </p>
                            </div>
                        </div>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide swiper-img1"></div>
                                <div class="swiper-slide swiper-img2"></div>
                                <div class="swiper-slide swiper-img3"></div>
                            </div>
                        </div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                </div>
            </section>
            <section class="section_five">
                <div class="container">
                    <ul class="info_icons">
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-01.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>improved overall<br>heals</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-02.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>increased<br>concentration</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-03.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>balance<br>your mind</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-04.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>sleep<br>better</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-05.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>weight<br>loss</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-06.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>strengthens<br>your bones</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-07.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>increased<br>flexibility</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info_body">
                                <div class="info_ico">
                                    <span>
                                        <img src="img/ico-08.png" alt="ico1">
                                    </span>
                                </div>
                                <h3>lower blood<br>pressure</h3>
                                <p>Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex
                                    ea com.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="section_six">
                <div class="container">
                    <ul class="content_box">
                        <li>
                            <div class="box">
                                <div class="box_text">
                                    <p>
                                        <span class="symbol">$</span>
                                        <span class="number">49</span>
                                        /month
                                    </p>
                                </div>
                                <div class="box_body">
                                    <ul class="box_list">
                                        <li>entry date: mon - fri</li>
                                        <li>entry time: 8a.m - 8p.m</li>
                                        <li>nutrition advicer:no</li>
                                    </ul>
                                </div>
                                <div class="button-wrap">
                                    <a href="#" class="btn2">Buy now</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="box">
                                <div class="box_text">
                                    <p>
                                        <span class="symbol">$</span>
                                        <span class="number">69</span>
                                        /month
                                    </p>
                                </div>
                                <div class="box_body">
                                    <ul class="box_list">
                                        <li>entry date: mon - fri</li>
                                        <li>entry time: 8a.m - 8p.m</li>
                                        <li>nutrition advicer:yes</li>
                                    </ul>
                                </div>
                                <div class="button-wrap">
                                    <a href="#" class="btn2">Buy now</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="box">
                                <div class="box_text">
                                    <p>
                                        <span class="symbol">$</span>
                                        <span class="number">99</span>
                                        /month
                                    </p>
                                </div>
                                <div class="box_body">
                                    <ul class="box_list">
                                        <li>entry date: mon - sun</li>
                                        <li>entry time: 8a.m - 8p.m</li>
                                        <li>nutrition advicer:yes</li>
                                    </ul>
                                </div>
                                <div class="button-wrap">
                                    <a href="#" class="btn2">Buy now</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
        <footer id="footer">
            <div class="footer_content">
                <div class="container">
                    <div class="upper_section">
                        <div class="about">
                            <h4>ABOUT</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m inim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <div class="menu_icon">
                                <ul>
                                    <li><a href="#" target="_blank" class="icon-linkedin"></a></li>
                                    <li><a href="#" target="_blank" class="icon-twitter"></a></li>
                                    <li><a href="#" target="_blank" class="icon-facebook"></a></li>
                                    <li><a href="#" target="_blank" class="icon-google-plus3"></a></li>
                                    <li><a href="#" target="_blank" class="icon-pinterest"></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="contact">
                            <h4>CONTACT US</h4>
                            <div class="blocks">
                                <div class="first_block">
                                    <div class="list_address">
                                        <a href="#" target="_blank" class="icon-location2"></a>
                                        <address>
                                            5419 Joseph Mountains<br>
                                            Apt. 716
                                        </address>
                                    </div>
                                    <div class="list_numbers">
                                        <div class="list_icon">
                                            <a href="#" target="_blank" class="icon-phone"></a>
                                        </div>
                                        <ul class="list_tel">
                                            <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>
                                <div class="second_block">
                                    <div class="mail_one">
                                        <a href="mailto:joga.info@example.com" class="icon-envelop">joga.info@example.com</a>
                                    </div>
                                    <div class="mail_two">
                                        <a href="http://www.example.com" class="icon-dribbble">www.example.com</a>
                                    </div>
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom_section">
                    <span class="copyright">Copyright  ©  2016-2017 <a href="http://workts.com.ua/sites/yoga/#">Yoga classes</a></span>
                </div>
            </div>
        </footer>
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>