Emmanuil
/
Vartanian_project-modul


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>yoga-mainpage</title>
    <link rel="stylesheet" href="style/reset.css" />
    <link rel="stylesheet" href="font/font.css" />
    <link
      rel="stylesheet"
      href="//db.onlinewebfonts.com/c/07ef86ba149481f615d8d45e00537b84?family=Champagne+&+Limousines"
    />
    <link
      href="//db.onlinewebfonts.com/c/f5bd594fdf1873d09eff1f4718ff2141?family=Freestyle+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="slick/slick.css" />
    <link rel="stylesheet" href="slick/slick-theme.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="style/media.css" />
  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <div class="content-head">
          <nav class="nav-left main-nav hamburger-menu">
            <input id="menu__toggle" type="checkbox" />
            <label class="menu__btn" for="menu__toggle">
              <span></span>
            </label>
            <ul class="menu-box menu__box">
              <li><a class="link active menu__item" href="#">About us</a></li>
              <li><a class="link menu__item" href="#">Reservation</a></li>
              <li><a class="link menu__item" href="#">Gallery</a></li>
            </ul>
          </nav>

          <div class="logo">
            <img src="img/logo.png" alt="logo" />
          </div>

          <nav class="nav-right main-nav2 hamburger-menu2">
            <input id="menu__toggle2" type="checkbox" />
            <label class="menu__btn2" for="menu__toggle2">
              <span></span>
            </label>
            <ul class="menu-box menu__box2">
              <li>
                <a class="link-two link-active menu__item2" href="#">Blog</a>
              </li>
              <li><a class="link menu__item2" href="#">Elements</a></li>
              <li>
                <a class="link-two link-active menu__item2" href="#">Shop</a>
              </li>
            </ul>
          </nav>
        </div>
      </header>

      <main class="main">
        <div class="first-content">
          <div class="form-text">
            <form class="form">
              <p>Trial Class</p>
              <input placeholder="Enter your name" type="text" />
              <input placeholder="Enter your phone" type="tel" />
              <select>
                <option value="Chose your class">
                  Chose your class
                </option>
                <option value="Chose your class">
                  Chose your class
                </option>
              </select>
              <button class="form-button">Try it</button>
            </form>

            <div class="text-on-fone">
              <h1>
                Just Balance <br />
                your Mind & Body
              </h1>
              <p>
                <br />
                Create the healthy living <br />
                for yourself
              </p>
            </div>
          </div>
        </div>

        <div class="two-content">
          <div class="content">
            <div class="block3">
              <div class="block3-text">
                <h1>Yoga FEATURE PROGRAM</h1>
                <p>Our Classes</p>
              </div>
              <div class="block3-boxs">
                <div class="box-info">
                  <img src="./img/layer1.png" alt="foto1" />
                  <div class="box-text">
                    <h1>Yoga For Health</h1>
                    <blockquote>
                      Minim veniam, quis nostrud <br />
                      exercitation ullamco laboris nisi <br />
                      ut aliquip ex ea commodo <br />
                      consequat consectetur adipisicing <br />
                      elit, sed do eiusmod tempor <br />
                      incididunt.
                    </blockquote>
                    <cite>Ashtanga - Hatha</cite>
                  </div>
                </div>
                <div class="box-info">
                  <img src="./img/layer2.png" alt="foto1" />
                  <div class="box-text">
                    <h1>Yoga For Lose Weight</h1>
                    <blockquote>
                      Minim veniam, quis nostrud <br />
                      exercitation ullamco laboris nisi <br />
                      ut aliquip ex ea commodo <br />
                      consequat consectetur adipisicing <br />
                      elit, sed do eiusmod tempor <br />
                      incididunt.
                    </blockquote>
                    <cite>Ashtanga - Hatha</cite>
                  </div>
                </div>
                <div class="box-info">
                  <img src="./img/layer3.png" alt="foto1" />
                  <div class="box-text">
                    <h1>Yoga For Children</h1>
                    <blockquote>
                      Minim veniam, quis nostrud <br />
                      exercitation ullamco laboris nisi <br />
                      ut aliquip ex ea commodo <br />
                      consequat consectetur adipisicing <br />
                      elit, sed do eiusmod tempor <br />
                      incididunt.
                    </blockquote>
                    <cite>Ashtanga - Hatha</cite>
                  </div>
                </div>
                <div class="box-info">
                  <img src="./img/layer4.png" alt="foto1" />
                  <div class="box-text">
                    <h1>Yoga For Elderly</h1>
                    <blockquote>
                      Minim veniam, quis nostrud <br />
                      exercitation ullamco laboris nisi <br />
                      ut aliquip ex ea commodo <br />
                      consequat consectetur adipisicing <br />
                      elit, sed do eiusmod tempor <br />
                      incididunt.
                    </blockquote>
                    <cite>Ashtanga - Hatha</cite>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="three-content gallery">
          <div class="gallery-img">
            <img src="./img/gallery1.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery2.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery3.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery4.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery5.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery6.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery7.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
          <div class="gallery-img">
            <img src="./img/gallery8.png" alt="gallery1" />
            <div class="gallery-hover"></div>
          </div>
        </div>

        <div class="four-content">
          <div class="about-us content">
            <div class="about-us-text">
              <h1>about us</h1>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
                Accusamus, repudiandae fuga expedita esse et debitis <br />
                deserunt quisquam, repellat eius facilis qui blanditiis sint,
                <br />
                veniam iusto unde officiis voluptas a tempore, repellat eius
                <br />
                facilis qui blanditiis sint, veniam iusto unde officiis voluptas
                a tempore.
              </p>
            </div>
            <div class="yoga-gallery">
              <img src="./img/about-us.png" alt="about-us" />
              <img src="./img/about-us.png" alt="about-us" />
            </div>
          </div>
        </div>

        <div class="five-content">
          <div class="features content">
            <div class="features-boxs">
              <img src="./img/feture-1.png" alt="features" />
              <h1>
                IMPROVED OVERALL <br />
                HEALTH
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-2.png" alt="features" />
              <h1>
                INCREASED <br />
                CONCENTRATION
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-3.png" alt="features" />
              <h1>
                BLANCE <br />
                YOUR MIND
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-4.png" alt="features" />
              <h1>
                SLEEP <br />
                BETTER
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-5.png" alt="features" />
              <h1>
                WEIGHT LOSS
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-6.png" alt="features" />
              <h1>
                STRENGTHENS <br />
                YOUR BONES
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-7.png" alt="features" />
              <h1>
                INCREASED <br />
                FLEXIBILITY
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
            <div class="features-boxs">
              <img src="./img/feture-8.png" alt="features" />
              <h1>
                LOWER BLOOD <br />
                PRESSURE
              </h1>
              <p>
                Enim ad minim veniam, quis <br />
                nostrud exercitation toui ullamcomi <br />
                laboris nisi ut aliquip ex ea com.
              </p>
            </div>
          </div>
        </div>

        <div class="six-content">
          <div class="content">
            <div class="boxs-prices">
              <div class="box-prices">
                <h1>49</h1>
                <sub>/ MONTH</sub>
                <p>ENTRY DATE: MON – FRI</p>
                <p>ENTRY TIME: 8A.M – 8P.M</p>
                <p>NUTRITION ADVICER: NO</p>
                <a href="#">Buy now</a>
              </div>
              <div class="box-prices">
                <h1>69</h1>
                <sub>/ MONTH</sub>
                <p>ENTRY DATE: MON – FRI</p>
                <p>ENTRY TIME: 8A.M – 8P.M</p>
                <p>NUTRITION ADVICER: NO</p>
                <a href="#">Buy now</a>
              </div>
              <div class="box-prices">
                <h1>99</h1>
                <sub>/ MONTH</sub>
                <p>ENTRY DATE: MON – FRI</p>
                <p>ENTRY TIME: 8A.M – 8P.M</p>
                <p>NUTRITION ADVICER: NO</p>
                <a href="#">Buy now</a>
              </div>
            </div>

            <div class="boxs-bloquotes">
              <div class="bloquotes">
                <img src="./img/photo.png" alt="photo" />
                <blockquote>
                  Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                  Vitae blanditiis impedit id, voluptatum inventore, facere
                  beatae cumque dolores velit soluta possimus dolorum molestiae
                  voluptate fuga saepe eum esse officia accusantium?
                </blockquote>
                <cite
                  >Trainer
                  <p>Laura Shepard</p>
                </cite>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer class="footer-decoration">
        <div class="content">
          <div class="decoration">
            <div class="about">
              <h1>about</h1>

              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe
                in atque adipisci iusto error officia sapiente ab placeat vel
                esse odio quisquam, temporibus neque sunt quis, perspiciatis
                explicabo. Tenetur, doloribus?
              </p>

              <ul class="icon">
                <li><a class="icon-pinterest" href="#"></a></li>
                <li><a class="icon-twitter" href="#"></a></li>
                <li><a class="icon-facebook" href="#"></a></li>
                <li><a class="icon-google" href="#"></a></li>
                <li><a class="icon-instagram" href="#"></a></li>
              </ul>
            </div>
            <div class="contacts">
              <h1>CONTACT US</h1>
              <div class="connection">
                <ul class="icon-left">
                  <li>
                    <a class="icon-map" href="#"
                      >5419 Joseph Mountains Apt. 716</a
                    >
                    <a class="icon-mail" href="#">joga.info@example.com</a>
                    <a class="icon-phone" href="#"
                      >+1 234 567 89 <br />
                      +1 234 678 90
                    </a>
                    <a class="icon-planet" href="#">www.example.com</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </footer>

      <footer class="footer-copyright">
        <div class="content">
          <div class="copyright">
            <p>Copyright © 2016-2017 Yoga classes</p>
          </div>
        </div>
      </footer>
    </div>

    <script
      src="https://code.jquery.com/jquery-2.2.0.min.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript" src="slick/slick.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $(".yoga-gallery").slick({
          // setting-name: setting-value
        });
      });
    </script>
  </body>
</html>