Emmanuil
/
Vartanian_project-modul


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
							<!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="https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap"
      rel="stylesheet"
    />
    <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&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" />
  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <div class="content-head">
          <nav class="nav-left">
            <ul class="menu-box">
              <li><a class="link active" href="#">About us</a></li>
              <li><a href="#">Reservation</a></li>
              <li><a href="#">Gallery</a></li>
            </ul>
          </nav>

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

          <nav class="nav-right">
            <ul class="menu-box">
              <li><a href="#">Blog</a></li>
              <li><a href="#">Elements</a></li>
              <li><a 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" />
              <!-- <input
                id="s"
                maxlength="25"
                placeholder="Chose your class"
                type="text"
              /> -->
              <select name="" id="">
                <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="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 class="three-content gallery">
          <img src="./img/gallery1.png" alt="gallery1" />
          <img src="./img/gallery2.png" alt="gallery2" />
          <img src="./img/gallery3.png" alt="gallery3" />
          <img src="./img/gallery4.png" alt="gallery4" />
          <img src="./img/gallery5.png" alt="gallery5" />
          <img class="img" src="./img/gallery6.png" alt="gallery6" />
          <img src="./img/gallery7.png" alt="gallery7" />
          <img src="./img/gallery8.png" alt="gallery8" />
        </div>

        <div class="four-content">
          <div class="about-us">
            <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">
              <div>
                <img src="./img/about-us.png" alt="about-us" />
              </div>
              <div>
                <img src="./img/about-us.png" alt="about-us" />
              </div>
            </div>
          </div>
        </div>

        <div class="five-content">
          <div class="features">
            <div class="features-boxs">
              <img src="./img/feture-1.png" alt="" />
              <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-1.png" alt="" />
              <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-1.png" alt="" />
              <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-1.png" alt="" />
              <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-1.png" alt="" />
              <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-1.png" alt="" />
              <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-1.png" alt="" />
              <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-1.png" alt="" />
              <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>
        </div>
      </main>

      <footer class="footer">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi ut
          soluta nam repellat, libero, repellendus exercitationem expedita amet
          nesciunt blanditiis adipisci voluptatem ea natus. Eveniet aliquam
          repudiandae nihil dolorem dolor.
        </p>
      </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>