3

index.html

@@ -93,38 +93,51 @@
               <h1>Yoga FEATURE PROGRAM</h1>
               <p>Our Classes</p>
             </div>
-            <div class="blocl3-boxs">
+            <div class="block3-boxs">
               <div class="box-info">
-                <img src="../img/layer1.png" alt="foto1" />
+                <img src="./img/layer1.png" alt="foto1" />
                 <div class="box-text">
                   <h1>Yoga For Health</h1>
                   <blockquote>
-                    Minim veniam, quis nostrud exercitation ullamco laboris nisi
-                    ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                    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 Health</h1>
+                  <h1>Yoga For Lose Weight</h1>
                   <blockquote>
-                    Minim veniam, quis nostrud exercitation ullamco laboris nisi
-                    ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                    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 Health</h1>
+                  <h1>Yoga For Children</h1>
                   <blockquote>
-                    Minim veniam, quis nostrud exercitation ullamco laboris nisi
-                    ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                    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 Health</h1>
+                  <h1>Yoga For Elderly</h1>
                   <blockquote>
-                    Minim veniam, quis nostrud exercitation ullamco laboris nisi
-                    ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                    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>
@@ -132,6 +145,27 @@
             </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>
       </main>
 
       <footer class="footer">

style/style.css

@@ -2,6 +2,14 @@
 *::before,
 *::after {
   box-sizing: border-box;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  border: none;
+}
+
+body{
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
 }
 
 a {
@@ -46,9 +54,7 @@ a {
 .menu-box > li > a {
   color: #555555;
   padding: 0 13px;
-  font-family: "Open Sans", sans-serif;
   font-weight: bold;
-  font-size: 14px;
 }
 
 .link {
@@ -115,7 +121,7 @@ a {
   position: relative;
   background: white;
   border-radius: 20px;
-  box-shadow: 2px 2px 15px rgb(41, 41, 41);
+  box-shadow: 2px 2px 15px #4553c0;
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -124,7 +130,6 @@ a {
 
 .form > p {
   color: #5363db;
-  font-family: "Open Sans", sans-serif;
   font-weight: bold;
   font-size: 25.64px;
   margin: 38px 0 29px 30px;
@@ -134,11 +139,8 @@ a {
 .form > input {
   width: 230px;
   height: 50px;
-  font-size: 14px;
-  font-family: "Open Sans", sans-serif;
   background: #f2f2f2;
   border-radius: 8px;
-  border: none;
   margin-left: 30px;
 }
 
@@ -165,7 +167,6 @@ a {
 .form-button {
   background: #475bf1;
   border-radius: 8px;
-  border: none;
   cursor: pointer;
   color: white;
   text-align: center;
@@ -173,7 +174,6 @@ a {
   margin: 17px 0 0 95px;
   width: 170px;
   padding: 13px 0 15px;
-  font-family: "Open Sans", sans-serif;
   font-weight: bold;
   font-size: 16px;
 }
@@ -200,7 +200,6 @@ a {
 .text-on-fone > h1 {
   font-size: 48px;
   text-transform: uppercase;
-  font-family: "Open Sans", sans-serif;
   font-weight: bold;
   line-height: 1.46;
   letter-spacing: 0.8px;
@@ -219,7 +218,6 @@ a {
 
 /* TWO CONENT */
 .two-content{
-  border: 1px red solid;
   height: 1000px;
   display: flex;
   align-items: center;
@@ -227,7 +225,6 @@ a {
 }
 
 .block3{
-  /* border: 1px green solid; */
   width: 1170px;
   height: 825px;
   margin-bottom: 125px;
@@ -239,8 +236,7 @@ a {
 }
 
 .block3-text{
-  /* border: 1px blue solid; */
-  width: 420px;
+  max-width: 420px;
   height: 90px;
   margin-top: 42px;
   display: flex;
@@ -255,7 +251,6 @@ a {
   text-transform: uppercase;
   padding-top: 2px;
   letter-spacing: 0.4px;
-  font-family: "Open Sans", sans-serif;
 }
 
 .block3-text>p{
@@ -268,18 +263,21 @@ a {
   font-family: "Freestyle Script";
 }
 
-.blocl3-boxs{
+.block3-boxs{
   /* border: 1px yellow solid; */
   width: 1170px;
   height: 625px;
   margin-top: 67px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: space-between;
 }
 
 .box-info{
-  /* border: 1px black solid; */
   width: 570px;
   height: 300px;
-  box-shadow: 3px 3px 10px #9e9e9e;
+  box-shadow: 3px 3px 15px #e4e4e4;
 }
 
 .box-info>img{
@@ -288,13 +286,11 @@ a {
 
 .box-text{
   margin-left: 300px;
-  width: 222px;
-  
+  width: 245px;
 }
 
 .box-text>h1{
   font-size: 20px;
-  font-family: "Open Sans", sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   padding-top: 47px;
@@ -303,8 +299,6 @@ a {
 
 .box-text>blockquote{
   color: #6c6c6c;
-  font-size: 14px;
-  font-family: "Open Sans", sans-serif;
   margin-top: 28px;
   line-height: 1.6;
   margin-top: 28px;
@@ -312,11 +306,63 @@ a {
 }
 
 .box-text>cite{
-  font-size: 14px;
-  font-family: "Open Sans", sans-serif;
   color: #999999;
 }
 
+
+/* THREE CONTENT */
+.gallery{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+/* FOUR CONTENT */
+.four-content{
+  height: 550px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-us{
+  width: 1170px;
+  height: 300px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.about-us-text>h1{
+  font-size: 30px;
+  font-weight: bold;
+  color: #5b6ceb;
+  text-transform: uppercase;
+  padding-top: 20px;
+  margin-bottom: 20px;
+  word-spacing: 1px;
+  letter-spacing: 0.1px;
+}
+
+.about-us-text>p{
+  line-height: 1.7;
+}
+
+.about-us-img{
+  border-radius: 5px;
+  box-shadow: 3px 3px 15px #c3c3c3;
+}
+
+.about-us-img::before{
+  content: "sdfs";
+  width: 50px;
+  height: 50px;
+  background: #0c0c0c;
+  border: 1px black solid;
+  position: relative;
+  z-index: 1;
+}
+
 /* MAIN */
 .footer {
   background: black;
@@ -365,4 +411,20 @@ a {
   .text-on-fone > p {
     font-size: 37px;
   }
+
+  .block3{
+    margin-top: -350px;
+  }
+
+  .gallery{
+    margin-top: -230px;
+  }
+
+  .gallery>img{
+    width: 25%;
+  }
+
+  .about-us{
+    width: 1100px;
+  }
 }