12

index.html

@@ -28,6 +28,9 @@
     <div class="wrapper">
       <header class="header">
         <div class="content-head">
+          <div class="logo-mobile">
+            <a href="index.html"><img src="img/logo.png" alt="logo"/></a>
+          </div>
           <nav class="nav-left main-nav hamburger-menu">
             <input id="menu__toggle" type="checkbox" />
             <label class="menu__btn" for="menu__toggle">
@@ -37,25 +40,17 @@
               <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>
+              <div class="logo">
+                <a href="index.html"><img src="img/logo.png" alt="logo"/></a>
+              </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>
+                <a class="link-two link-active menu__item" href="#">Blog</a>
               </li>
-              <li><a class="link menu__item2" href="#">Elements</a></li>
+              <li><a class="link menu__item" href="#">Elements</a></li>
               <li>
-                <a class="link-two link-active menu__item2" href="#">Shop</a>
+                <a class="link-two link-active menu__item" href="#">Shop</a>
               </li>
             </ul>
           </nav>
@@ -65,31 +60,34 @@
       <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="form-left">
+              <form class="form">
+                <h2>Trial Class</h2>
+                <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>
 
-            <div class="text-on-fone">
-              <h1>
-                Just Balance <br />
-                your Mind & Body
-              </h1>
-              <p>
-                <br />
-                Create the healthy living <br />
-                for yourself
-              </p>
+            <div class="text-right">
+              <div class="text-on-fone">
+                <h1>
+                  Just Balance <br />
+                  your Mind & Body
+                </h1>
+                <p>
+                  Create the healthy living <br />
+                  for yourself
+                </p>
+              </div>
             </div>
           </div>
         </div>
@@ -105,60 +103,60 @@
                 <div class="box-info">
                   <img src="./img/layer1.png" alt="foto1" />
                   <div class="box-text">
-                    <h1>Yoga For Health</h1>
-                    <blockquote>
+                    <h2>Yoga For Health</h2>
+                    <p>
                       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>
+                    </p>
                     <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>
+                    <h2>Yoga For Lose Weight</h2>
+                    <p>
                       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>
+                    </p>
                     <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>
+                    <h2>Yoga For Children</h2>
+                    <p>
                       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>
+                    </p>
                     <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>
+                    <h2>Yoga For Elderly</h2>
+                    <p>
                       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>
+                    </p>
                     <cite>Ashtanga - Hatha</cite>
                   </div>
                 </div>
@@ -228,10 +226,10 @@
           <div class="features content">
             <div class="features-boxs">
               <img src="./img/feture-1.png" alt="features" />
-              <h1>
+              <h2>
                 IMPROVED OVERALL <br />
                 HEALTH
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -240,10 +238,10 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-2.png" alt="features" />
-              <h1>
+              <h2>
                 INCREASED <br />
                 CONCENTRATION
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -252,10 +250,10 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-3.png" alt="features" />
-              <h1>
+              <h2>
                 BLANCE <br />
                 YOUR MIND
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -264,10 +262,10 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-4.png" alt="features" />
-              <h1>
+              <h2>
                 SLEEP <br />
                 BETTER
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -276,9 +274,9 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-5.png" alt="features" />
-              <h1>
+              <h2>
                 WEIGHT LOSS
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -287,10 +285,10 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-6.png" alt="features" />
-              <h1>
+              <h2>
                 STRENGTHENS <br />
                 YOUR BONES
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -299,10 +297,10 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-7.png" alt="features" />
-              <h1>
+              <h2>
                 INCREASED <br />
                 FLEXIBILITY
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -311,10 +309,10 @@
             </div>
             <div class="features-boxs">
               <img src="./img/feture-8.png" alt="features" />
-              <h1>
+              <h2>
                 LOWER BLOOD <br />
                 PRESSURE
-              </h1>
+              </h2>
               <p>
                 Enim ad minim veniam, quis <br />
                 nostrud exercitation toui ullamcomi <br />
@@ -328,24 +326,27 @@
           <div class="content">
             <div class="boxs-prices">
               <div class="box-prices">
-                <h1>49</h1>
-                <sub>/ MONTH</sub>
+                <div class="title-prices">
+                  49 <sub>/ MONTH</sub>
+                </div>
                 <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>
+                <div class="title-prices">
+                  69 <sub>/ MONTH</sub>
+                </div>
                 <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>
+                <div class="title-prices">
+                  99 <sub>/ MONTH</sub>
+                </div>
                 <p>ENTRY DATE: MON – FRI</p>
                 <p>ENTRY TIME: 8A.M – 8P.M</p>
                 <p>NUTRITION ADVICER: NO</p>
@@ -362,10 +363,8 @@
                   beatae cumque dolores velit soluta possimus dolorum molestiae
                   voluptate fuga saepe eum esse officia accusantium?
                 </blockquote>
-                <cite
-                  >Trainer</cite>
-                  <p>Laura Shepard</p>
-                
+                <cite>Trainer</cite>
+                <p>Laura Shepard</p>
               </div>
             </div>
           </div>

style.css

@@ -109,17 +109,23 @@ a {
   width: 820px;
   margin-right: 71px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
 }
 
-.menu-box > li {
-  display: inline;
+.menu-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-box img{
+  padding: 0 50px;
 }
 
-.menu-box > li > a {
+.menu-box a {
   color: #555555;
-  padding: 0 13px;
+  padding: 0 15px;
   font-weight: bold;
 }
 
@@ -174,8 +180,11 @@ a {
   margin-top: 1px;
 }
 
-#menu__toggle,
-#menu__toggle2 {
+.logo-mobile{
+  display: none;
+}
+
+#menu__toggle {
   display: none;
 }
 
@@ -190,17 +199,6 @@ a {
   cursor: pointer;
   z-index: 3;
 }
-.menu__btn2 {
-  display: flex;
-  align-items: center;
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  width: 26px;
-  height: 26px;
-  cursor: pointer;
-  z-index: 3;
-}
 /* HEADER */
 
 /* MAIN */
@@ -218,12 +216,22 @@ a {
 .form-text {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   min-width: 930px;
-  padding-bottom: 35px;
-  margin: 100px 100px 100px 340px;
+  padding: 50px 0 100px;
   z-index: 1;
 }
 
+.form-left{
+  width: 50%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.text-right{
+  width: 50%;
+}
+
 .form {
   position: relative;
   background: white;
@@ -233,14 +241,14 @@ a {
   flex-direction: column;
   align-content: center;
   width: 300px;
+  padding: 38px 0 20px 30px;
 }
 
-.form > p {
+.form > h2 {
   color: #5363db;
   font-weight: bold;
   font-size: 25.64px;
-  margin: 38px 0 29px 30px;
-  padding-left: 4px;
+  padding: 0 0 29px 4px;
 }
 
 .form > input,
@@ -249,21 +257,7 @@ select {
   height: 50px;
   background: #f2f2f2;
   border-radius: 8px;
-  margin-left: 30px;
   color: black;
-}
-
-.form > input:nth-child(2) {
-  padding: 0 10px 8px;
-  margin-bottom: 15px;
-}
-
-.form > input:nth-child(3) {
-  padding: 0 10px 2px;
-  margin-bottom: 17px;
-}
-
-.form > select {
   padding: 0 10px;
   margin-bottom: 15px;
 }
@@ -285,9 +279,9 @@ select:focus {
   cursor: pointer;
   text-align: center;
   word-spacing: 2px;
-  margin: 17px 0 20px 95px;
-  max-width: 170px;
-  padding: 13px 0 15px;
+  margin: 10px 0 0 80px;
+  max-width: 150px;
+  padding: 13px 0;
   font-weight: bold;
   font-size: 16px;
   transition: all 0.4s;
@@ -303,7 +297,7 @@ select:focus {
 
 .text-on-fone {
   width: 570px;
-  height: 265px;
+  min-height: 265px;
   margin-top: 58px;
   padding-left: 35px;
   display: flex;
@@ -317,6 +311,7 @@ select:focus {
   line-height: 1.46;
   letter-spacing: 0.8px;
   display: inline;
+  padding-bottom: 30px;
 }
 
 .text-on-fone > p {
@@ -333,12 +328,11 @@ select:focus {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 20px 0 100px;
 }
 
 .block3 {
   width: 100%;
-  height: 825px;
-  margin: 50px 0 125px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -383,28 +377,27 @@ select:focus {
   max-width: 570px;
   box-shadow: 3px 3px 15px #e4e4e4;
   margin-bottom: 20px;
+  display: flex;
 }
 
 .box-info > img {
-  float: left;
   width: 50%;
 }
 
 .box-text {
-  margin-left: 300px;
+  padding: 47px 0 30px 20px;
   width: 245px;
 }
 
-.box-text > h1 {
+.box-text > h2 {
   font-size: 20px;
   font-weight: bold;
   text-transform: uppercase;
-  padding-top: 47px;
   letter-spacing: 0.3px;
   color: #777777;
 }
 
-.box-text > blockquote {
+.box-text > p {
   color: #6c6c6c;
   margin: 28px 0 10px;
   line-height: 1.6;
@@ -428,6 +421,7 @@ select:focus {
 
 .gallery-img > img {
   width: 100%;
+  margin-bottom: -4px;
 }
 
 .gallery-hover {
@@ -496,6 +490,7 @@ select:focus {
   left: 0;
   right: 0;
   bottom: 0;
+  height: 300px;
 }
 
 .slick-next {
@@ -512,7 +507,7 @@ select:focus {
 
 .slick-prev::before,
 .slick-next::before {
-  color: #ff4d4d;
+  color: #6474f0;
   font-size: 60px;
 }
 
@@ -546,7 +541,7 @@ select:focus {
   margin-bottom: 27px;
 }
 
-.features-boxs > h1 {
+.features-boxs > h2 {
   font-size: 18px;
   font-weight: bold;
   text-align: center;
@@ -565,8 +560,7 @@ select:focus {
 
 /* SIX CONTENT */
 .six-content {
-  height: 1050px;
-  margin-top: 100px;
+  padding: 100px 0;
   background: url(./img/lotos-decoration.png) center center / cover no-repeat;
 }
 
@@ -584,31 +578,32 @@ select:focus {
   box-shadow: 2px 2px 15px #c7c7c7;
 }
 
-.box-prices h1 {
+.title-prices sub{
+  font-size: 18px;
+  font-weight: bold;
+  padding-top: 47px;
+  text-transform: uppercase;
+}
+
+.title-prices {
   border-radius: 10px 10px 0 0;
   background: #5b6ceb;
   font-weight: bold;
   font-size: 67px;
-  padding: 41.5px 138px;
+  padding: 30px 80px 30px 90px;
+  display: flex;
+  justify-content: center;
 }
 
-.box-prices h1::before {
+.title-prices::before {
   content: "$";
   font-size: 32px;
   position: relative;
+  top: 20px;
   bottom: 10px;
   right: 20px;
 }
 
-.box-prices sub {
-  font-size: 18px;
-  font-weight: bold;
-  position: relative;
-  bottom: 63px;
-  left: 90px;
-  text-transform: uppercase;
-}
-
 .box-prices p {
   padding-top: 50px;
   font-size: 18px;

style/media.css

@@ -262,8 +262,13 @@
 
 @media (max-width: 750px) {
   .logo {
-    padding-left: 60px;
+    display: none;
   }
+
+  .logo-mobile {
+    display: block;
+  }
+  
   .menu__btn > span,
   .menu__btn > span::before,
   .menu__btn > span::after {
@@ -282,7 +287,7 @@
     content: "";
     top: 8px;
   }
-  .menu__box {
+  .menu__box:not([not-menu]) {
     position: fixed;
     visibility: hidden;
     top: 0;
@@ -327,7 +332,7 @@
     left: 0;
   }
 
-  .menu__btn2 > span,
+  /* .menu__btn2 > span,
   .menu__btn2 > span::before,
   .menu__btn2 > span::after {
     display: block;
@@ -389,7 +394,7 @@
   #menu__toggle2:checked ~ .menu__box2 {
     visibility: visible;
     right: 0;
-  }
+  } */
 
   .first-content {
     min-height: 850px;