8

index.html

@@ -10,17 +10,13 @@
       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"
+      href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="slick/slick.css" />
@@ -156,16 +152,38 @@
         </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" />
-          <div class="hover">
-            <img src="./img/gallery6.png" alt="gallery6" />
+          <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>
-          <img src="./img/gallery7.png" alt="gallery7" />
-          <img src="./img/gallery8.png" alt="gallery8" />
         </div>
 
         <div class="four-content">
@@ -292,9 +310,56 @@
 
         <div class="six-content">
           <div class="content">
-            <div class="box-prices"></div>
+            <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="box-bloquotes"></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 class="blockquote-slider">
+                <div class="slide"></div>
+                <div class="slide">
+                  <div class="slide-active"></div>
+                </div>
+                <div class="slide"></div>
+                <div class="slide"></div>
+              </div>
+            </div>
           </div>
         </div>
       </main>
@@ -328,20 +393,13 @@
                     <a class="icon-map" href=""
                       >5419 Joseph Mountains Apt. 716</a
                     >
-                  </li>
-                  <li>
+                    <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
-                    >
-                  </li>
-                </ul>
-
-                <ul class="icon-right">
-                  <li>
-                    <a class="icon-mail" href="">joga.info@example.com</a>
+                      +1 234 678 90
+                    </a>
+                    <a class="icon-planet" href="">www.example.com</a>
                   </li>
-                  <li><a class="icon-planet" href="">www.example.com</a></li>
                 </ul>
               </div>
             </div>

style.css

@@ -36,6 +36,7 @@
 .icon-phone:before {
   content: "\e901";
   font-size: 20px;
+  padding-right: 20px;
 }
 .icon-facebook:before {
   content: "\e902";
@@ -46,6 +47,7 @@
 .icon-planet:before {
   content: "\e906";
   font-size: 20px;
+  padding-right: 20px;
 }
 .icon-instagram:before {
   content: "\ea92";
@@ -56,10 +58,12 @@
 .icon-mail:before {
   content: "\e905";
   font-size: 20px;
+  padding-right: 20px;
 }
 .icon-map:before {
   content: "\e904";
   font-size: 20px;
+  padding-right: 20px;
 }
 .icon-google:before {
   content: "\e903";
@@ -159,10 +163,7 @@ a {
 }
 
 .first-content {
-  background: url("../img/slider-bg.png") no-repeat;
-  background-size: 100%;
-  width: 100%;
-  height: 100vh;
+  background: url("../img/slider-bg.png") center center / cover no-repeat;
   display: flex;
   justify-content: center;
   position: relative;
@@ -186,7 +187,7 @@ a {
   display: flex;
   flex-direction: column;
   align-content: center;
-  min-width: 300px;
+  width: 300px;
 }
 
 .form > p {
@@ -233,6 +234,7 @@ select {
   padding: 13px 0 15px;
   font-weight: bold;
   font-size: 16px;
+  margin-bottom: 20px;
 }
 
 .text-on-fone {
@@ -353,18 +355,48 @@ select {
 /* THREE CONTENT */
 .gallery {
   max-height: 700px;
-  width: 100%;
+  /* width: 100%; */
   display: flex;
   flex-wrap: wrap;
   border: none;
 }
 
-.hover {
-  background: no-repeat;
+.gallery-img {
+  width: 25%;
+}
+
+.gallery-img > img {
+  width: 100%;
+}
+
+.gallery-hover {
+  background: url(./img/hover_6.png) center center / 70px 70px no-repeat
+    rgba(117, 132, 243, 0.8);
+  position: relative;
+  top: -100%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+/* 
+.hover>img{
+  width: 100%;
+}
+
+.hover{
+  width: 25%;
   position: relative;
+} */
+
+.gallery-img:hover,
+.gallery-hover:hover {
+  opacity: 1;
+  cursor: pointer;
 }
 
-.hover::after {
+/* .hover::after {
   content: "";
   background: url(./img/hover_6.png) no-repeat;
   position: absolute;
@@ -372,17 +404,17 @@ select {
   left: 211px;
   right: 0;
   bottom: 0;
+  opacity: 0;
 }
 
 .hover::before {
   content: "";
   background: rgba(117, 132, 243, 0.8);
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}  */
 
 /* FOUR CONTENT */
 .four-content {
@@ -459,9 +491,7 @@ select {
   justify-content: center;
   flex-wrap: wrap;
   align-items: center;
-  background: url("../img/feture-fone.png") no-repeat;
-  background-size: 100%;
-  width: 100%;
+  background: url("../img/feture-fone.png") center center / cover no-repeat;
 }
 
 .features {
@@ -501,25 +531,210 @@ select {
   font-size: 16px;
   padding-bottom: 7px;
 }
+
+/* SIX CONTENT */
+.six-content {
+  min-height: 1150px;
+  margin-top: 100px;
+  background: url(./img/lotos-decoration.png) center center / cover no-repeat;
+}
+
+.boxs-prices {
+  display: flex;
+  justify-content: space-between;
+}
+
+.box-prices {
+  max-width: 100%;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  box-shadow: 2px 2px 15px #c7c7c7;
+}
+
+.box-prices h1 {
+  border-radius: 10px 10px 0 0;
+  background: #5b6ceb;
+  font-weight: bold;
+  font-size: 67px;
+  padding: 41.5px 138px;
+}
+
+.box-prices h1::before {
+  content: "$";
+  font-size: 32px;
+  position: relative;
+  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;
+  color: #6a6a6a;
+  text-transform: uppercase;
+}
+
+.box-prices p::after {
+  content: "";
+  width: 100px;
+  height: 1px;
+  background: #d7d7d7;
+  display: block;
+  position: relative;
+  top: 130%;
+  left: 25%;
+}
+
+.box-prices p + p + p::after {
+  display: none;
+}
+
+.box-prices a {
+  margin: 50px 0;
+  border-radius: 20px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  padding: 16px 48px;
+  background: #5b6ceb;
+}
+
+.boxs-bloquotes {
+  margin-top: 110px;
+  width: 1170px;
+  height: 250px;
+  background: white;
+  box-shadow: 2px 2px 15px #c7c7c7;
+  border-radius: 10px;
+  position: relative;
+}
+
+.bloquotes img {
+  float: left;
+  padding: 40px 90px 65px 60px;
+}
+
+.bloquotes blockquote {
+  color: #777777;
+  font-style: italic;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  max-width: 900px;
+  position: relative;
+}
+
+.bloquotes blockquote::before {
+  content: "\2033";
+  height: 40px;
+  position: absolute;
+  color: #5b6ceb;
+  font-size: 55px;
+  transform: rotate(180deg);
+  top: 36px;
+  left: 250px;
+}
+
+.bloquotes blockquote::after {
+  content: "\2033";
+  height: 40px;
+  position: absolute;
+  color: #5b6ceb;
+  font-size: 55px;
+  top: 100px;
+  right: -50px;
+}
+
+.bloquotes cite{
+  color: #777777;
+}
+
+.bloquotes cite>p{
+  font-size: 20px;
+  color: #5b6ceb;
+  font-weight: bold;
+  padding-top: 5px;
+}
+
+.bloquotes cite::before{
+  content: '';
+  background: #d7d7d7;
+  width: 2px;
+  height: 75px;
+  display: block;
+  position: absolute;
+  top: 100px;
+  left: 255px;
+}
+
+.blockquote-slider{
+  position: absolute;
+  left: 100%;
+  top: 20px;
+}
+
+.slide{
+  border: 2px solid grey;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: 20px;
+  margin-left: 45px;
+}
+
+.slide:nth-child(2){
+  border: 2px solid blue;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: 20px;
+  margin-left: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slide > .slide-active{
+  background: blue;
+  border-radius: 50%;
+  /* margin: 0 auto; */
+  width: 10px;
+  height: 10px;
+  padding: 5px;
+}
+
 /* MAIN */
 
 /* FOOTER */
 .footer-decoration {
   background: #5b6ceb;
   /* height: 225px; */
-  padding: 75px 0;
+  max-height: 450px;
+  padding: 100px 0;
   display: flex;
   align-items: center;
 }
 
 .decoration {
-  padding: 112.5px 0;
+  min-width: 1100px;
+  /* padding: 112.5px 0; */
   display: flex;
   justify-content: space-between;
 }
 
 .about {
-  width: 500px;
+  max-width: 500px;
   /* height: 300px; */
 }
 
@@ -530,8 +745,13 @@ select {
   font-weight: bold;
 }
 
-.about > p{
-  padding: 40px 0 80px;
+/* .decoration>a{
+  font-size: 14px;
+} */
+
+.about > p {
+  padding: 60px 0 70px;
+  line-height: 1.5;
 }
 
 .icon {
@@ -542,9 +762,17 @@ select {
   justify-content: space-between;
 }
 
+.contacts {
+  max-width: 500px;
+}
 
-.connection {
+.icon-left li {
+  min-height: 160px;
+  padding: 60px 0 0;
   display: flex;
+  justify-content: space-between;
+  align-content: space-between;
+  flex-wrap: wrap;
 }
 
 .footer-copyright {
@@ -562,17 +790,16 @@ select {
   font-size: 16px;
 }
 
-/* 
 @media (max-width: 1365px) {
   .form-text {
-    width: 850px;
-    height: 320px;
+    max-width: 850px;
+    height: 360px;
     margin: 30px;
-    margin-left: 250px;
+    padding-left: 150px;
   }
 
   .form {
-    width: 240px;
+    width: 330px;
   }
 
   .form > p {
@@ -590,7 +817,9 @@ select {
     width: 115px;
   }
   .text-on-fone {
+    min-width: 480px;
     margin-top: 40px;
+    margin-right: 70px;
   }
   .text-on-fone > h1 {
     font-size: 43px;
@@ -599,12 +828,40 @@ select {
   .text-on-fone > p {
     font-size: 37px;
   }
+  /* 
+  .block3{
+    margin-top: -150px;
+  } */
 
   .gallery > img {
     width: 25%;
+    height: 25%;
+  }
+  /* 
+  .hover >img{
+    width: 70%;
   }
+  .hover::after {
+    top: 6px;
+    left: 11px;
+    right: 0;
+    bottom: 0;
+  }
+  
+  .hover::before {
+    width: 25%;
+    height: 100%;
+  } */
 
   .about-us {
-    width: 1100px;
+    margin-top: -70px;
+    display: block;
   }
-} */
+  .about-us-text {
+    text-align: center;
+    padding-bottom: 50px;
+  }
+  .yoga-gallery {
+    margin-right: 180px;
+  }
+}