Emmanuil
/
Vartanian_project-modul


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!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="style/style.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"
    />
  </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 maxlength="25" placeholder="Enter your name" type="text" />
              <input
                maxlength="13"
                placeholder="Enter your phone"
                type="text"
              />
              <input
                id="s"
                maxlength="25"
                placeholder="Chose your class"
                type="text"
              />
              <!-- <select form="s"></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 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>
            <img class="about-us-img" src="./img/about-us.png" alt="about-us">
          </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>
  </body>
</html>