7

index.html

@@ -41,7 +41,6 @@
 
           <div class="logo">
             <img src="img/logo.png" alt="logo" />
-            <h1>YOGA</h1>
           </div>
 
           <nav class="nav-right">
@@ -61,12 +60,6 @@
               <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
@@ -90,70 +83,72 @@
         </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 class="content">
+            <div class="block3">
+              <div class="block3-text">
+                <h1>Yoga FEATURE PROGRAM</h1>
+                <p>Our Classes</p>
               </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 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>
-              <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 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>
-              <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 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>
@@ -166,13 +161,15 @@
           <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" />
+          <div class="hover">
+            <img src="./img/gallery6.png" alt="gallery6" />
+          </div>
           <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 content">
             <div class="about-us-text">
               <h1>about us</h1>
               <p>
@@ -187,18 +184,14 @@
               </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>
+              <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">
+          <div class="features content">
             <div class="features-boxs">
               <img src="./img/feture-1.png" alt="" />
               <h1>
@@ -212,10 +205,10 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-2.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                INCREASED <br />
+                CONCENTRATION
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -224,10 +217,10 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-3.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                BLANCE <br />
+                YOUR MIND
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -236,10 +229,10 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-4.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                SLEEP <br />
+                BETTER
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -248,10 +241,9 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-5.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                WEIGHT LOSS
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -260,10 +252,10 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-6.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                STRENGTHENS <br />
+                YOUR BONES
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -272,10 +264,10 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-7.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                INCREASED <br />
+                FLEXIBILITY
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -284,10 +276,10 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-8.png" alt="" />
               <h1>
-                IMPROVED OVERALL <br />
-                HEALTH
+                LOWER BLOOD <br />
+                PRESSURE
               </h1>
               <p>
                 Enim ad minim veniam, quis <br />
@@ -297,15 +289,72 @@
             </div>
           </div>
         </div>
+
+        <div class="six-content">
+          <div class="content">
+            <div class="box-prices"></div>
+
+            <div class="box-bloquotes"></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 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
+                    >
+                  </li>
+                  <li>
+                    <a class="icon-phone" href=""
+                      >+1 234 567 89 <br />
+                      +1 234 678 90</a
+                    >
+                  </li>
+                </ul>
+
+                <ul class="icon-right">
+                  <li>
+                    <a class="icon-mail" href="">joga.info@example.com</a>
+                  </li>
+                  <li><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>
 

style.css

@@ -4,6 +4,64 @@
   box-sizing: border-box;
 }
 
+/* FONTS ICON */
+@font-face {
+  font-family: "icomoon";
+  src: url("fonts/icomoon.eot?rj8fwo");
+  src: url("fonts/icomoon.eot?rj8fwo#iefix") format("embedded-opentype"),
+    url("fonts/icomoon.ttf?rj8fwo") format("truetype"),
+    url("fonts/icomoon.woff?rj8fwo") format("woff"),
+    url("fonts/icomoon.svg?rj8fwo#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "icomoon" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-phone:before {
+  content: "\e901";
+}
+.icon-facebook:before {
+  content: "\e902";
+}
+.icon-twitter:before {
+  content: "\e900";
+}
+.icon-planet:before {
+  content: "\e906";
+}
+.icon-instagram:before {
+  content: "\ea92";
+}
+.icon-pinterest:before {
+  content: "\ead2";
+}
+.icon-mail:before {
+  content: "\e905";
+}
+.icon-map:before {
+  content: "\e904";
+}
+.icon-google:before {
+  content: "\e903";
+}
+/* FONTS ICON */
+
 * {
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
@@ -31,11 +89,16 @@ a {
   max-width: 1920px; */
   min-height: 100vh;
 }
+
+.content {
+  width: 1170px;
+  margin: 0 auto;
+}
 /* THE ALL SITE */
 
 /* HEADER */
 .header {
-  height: 100px;
+  padding: 15px 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -83,22 +146,6 @@ a {
   left: 32%;
   margin-top: 1px;
 }
-
-.logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4px 0 2px 0;
-}
-
-.logo > h1 {
-  font-family: "Champagne & Limousines", sans-serif;
-  font-weight: bold;
-  font-size: 24px;
-  color: #6a78e0;
-  padding: 5px 0 0 3px;
-  letter-spacing: 2px;
-}
 /* HEADER */
 
 /* MAIN */
@@ -110,25 +157,17 @@ a {
   background: url("../img/slider-bg.png") no-repeat;
   background-size: 100%;
   width: 100%;
-  height: 100vh; 
+  height: 100vh;
   display: flex;
   justify-content: center;
   position: relative;
 }
 
-/* .first-content::after{
-  content: '';
-  background: rgb(83, 99, 219, 0.9);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-} */
-
 .form-text {
   display: flex;
   justify-content: space-between;
   width: 930px;
-  height: 390px;
+  padding-bottom: 35px;
   margin: 100px;
   margin-left: 340px;
   z-index: 1;
@@ -153,7 +192,8 @@ a {
   padding-left: 4px;
 }
 
-.form > input, select {
+.form > input,
+select {
   width: 230px;
   height: 50px;
   background: #f2f2f2;
@@ -172,7 +212,7 @@ a {
   margin-bottom: 17px;
 }
 
-.form>select{ 
+.form > select {
   padding: 0 10px;
   margin-bottom: 15px;
 }
@@ -226,7 +266,6 @@ a {
 }
 
 .block3 {
-  width: 1170px;
   height: 825px;
   margin-bottom: 125px;
   margin-top: 50px;
@@ -238,8 +277,7 @@ a {
 
 .block3-text {
   max-width: 420px;
-  height: 90px;
-  margin-top: 42px;
+  padding-top: 42px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -250,7 +288,7 @@ a {
   font-weight: bold;
   font-size: 30px;
   text-transform: uppercase;
-  padding-top: 2px;
+  padding-top: 3px;
   letter-spacing: 0.4px;
 }
 
@@ -265,7 +303,6 @@ a {
 }
 
 .block3-boxs {
-  /* border: 1px yellow solid; */
   width: 1170px;
   height: 625px;
   margin-top: 67px;
@@ -277,7 +314,6 @@ a {
 
 .box-info {
   width: 570px;
-  height: 300px;
   box-shadow: 3px 3px 15px #e4e4e4;
 }
 
@@ -296,6 +332,7 @@ a {
   text-transform: uppercase;
   padding-top: 47px;
   letter-spacing: 0.3px;
+  color: #777777;
 }
 
 .box-text > blockquote {
@@ -315,32 +352,42 @@ a {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  display: block; 
+}
+
+.hover {
+  background: no-repeat;
   position: relative;
 }
 
-.gallery::after img{
-  content: '';
-  background: rgb(91, 108, 235, 0.5);
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-  opacity: 0;
+.hover::after {
+  content: "";
+  background: url(./img/hover_6.png) no-repeat;
+  position: absolute;
+  top: 146px;
+  left: 211px;
+  right: 0;
+  bottom: 0;
 }
 
-.gallery>img:hover:after img{
-  opacity: 1;
+.hover::before {
+  content: "";
+  background: rgb(124, 137, 239, 0.8);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 /* FOUR CONTENT */
 .four-content {
-  height: 550px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .about-us {
-  width: 1170px;
-  height: 300px;
+  padding: 124px 0;
   display: flex;
   justify-content: space-between;
 }
@@ -351,7 +398,7 @@ a {
   color: #5b6ceb;
   text-transform: uppercase;
   padding-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 19px;
   word-spacing: 1px;
   letter-spacing: 0.1px;
 }
@@ -361,49 +408,42 @@ a {
   color: #555555;
 }
 
-.about-us-img {
-  /* width: 100%;
-  height: 100%; */
-  border-radius: 5px;
-  box-shadow: 3px 3px 15px #c3c3c3;
+.yoga-gallery {
+  width: 570px;
+  position: relative;
 }
 
-.yoga-gallery{
-  width: 570px;
+.yoga-gallery img {
+  border-radius: 8px;
 }
 
-/* div.yoga-gallery img{
-  max-width: 100%;
-} */
+.yoga-gallery::after {
+  content: "";
+  background: rgb(196, 197, 201, 0.3);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 
-.slick-next{
-  right: -5px;
-  
+.slick-next {
+  right: 12px;
+  top: 45%;
+  z-index: 1;
 }
 
-.slick-prev{
-  left: 10px;
+.slick-prev {
+  left: -28px;
+  top: 45%;
   z-index: 1;
 }
 
 .slick-prev::before,
-.slick-next::before{
-  /* color: red; */
-  background: blue;
- border-radius: 50%;
- width: 100px;
- height: 100px;
-}
-/* 
-.about-us-img::before {
-  content: "sdfs";
-  width: 50px;
-  height: 50px;
-  background: #0c0c0c;
-  border: 1px black solid;
-  position: relative;
-  z-index: 1;
-} */
+.slick-next::before {
+  color: #ff4d4d;
+  font-size: 60px;
+}
 
 /* FIVE CONTENT */
 .five-content {
@@ -417,7 +457,6 @@ a {
 }
 
 .features {
-  width: 1170px;
   height: 550px;
   display: flex;
   flex-wrap: wrap;
@@ -434,8 +473,6 @@ a {
 }
 
 .features-boxs > img {
-  width: 70px;
-  height: 70px;
   margin-bottom: 27px;
 }
 
@@ -446,26 +483,71 @@ a {
   line-height: 1.5;
   letter-spacing: 0.3px;
   margin-left: -1px;
-  margin-bottom: 12px;
+  padding-bottom: 12px;
+  flex-grow: 1;
 }
 
 .features-boxs > p {
   line-height: 1.7;
   text-align: center;
   font-size: 16px;
+  padding-bottom: 7px;
 }
-
 /* MAIN */
-.footer {
-  background: black;
-  /* height: 100px; */
+
+/* FOOTER */
+.footer-decoration {
+  background: #5b6ceb;
+  /* height: 225px; */
+  padding: 75px 0;
+  display: flex;
+  align-items: center;
+}
+
+.decoration {
+  padding: 112.5px 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.about {
+  width: 500px;
+  /* height: 300px; */
+}
+
+.about > h1,
+.contacts > h1 {
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.icon {
+  display: flex;
+}
+
+.contacts {
+}
+
+.connection {
+  display: flex;
+}
+
+.footer-copyright {
+  background: #5363d8;
+}
+.copyright {
+  padding: 50px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copyright > p {
+  opacity: 0.7;
+  font-size: 16px;
 }
 
-/* @media(max-width: 1580px){
-  .form-text{
-    width: 50%;
-  }
-} */
 
 @media (max-width: 1365px) {
   /* .first-content{
@@ -486,7 +568,8 @@ a {
     margin: 20px 20px 20px;
   }
 
-  .form > input, select {
+  .form > input,
+  select {
     width: 190px;
     height: 45px;
     margin-left: 20px;