4

index.html

@@ -166,6 +166,51 @@
             <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">

style/style.css

@@ -5,11 +5,13 @@
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
   border: none;
+  color: #ffffff;
 }
 
 body{
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
+  color: #ffffff;
 }
 
 a {
@@ -168,7 +170,6 @@ a {
   background: #475bf1;
   border-radius: 8px;
   cursor: pointer;
-  color: white;
   text-align: center;
   word-spacing: 2px;
   margin: 17px 0 0 95px;
@@ -194,7 +195,6 @@ a {
   padding-left: 35px;
   display: flex;
   flex-direction: column;
-  color: white;
 }
 
 .text-on-fone > h1 {
@@ -346,6 +346,7 @@ a {
 
 .about-us-text>p{
   line-height: 1.7;
+  color: #555555;
 }
 
 .about-us-img{
@@ -363,10 +364,62 @@ a {
   z-index: 1;
 }
 
+
+/* FIVE CONTENT */
+.five-content{
+  height: 800px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url('../img/feture-fone.png') no-repeat;
+  background-size: 100%;
+  width: 100%;
+  
+}
+
+.features{
+  width: 1170px;
+  height: 550px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: space-between;
+}
+
+.features-boxs{
+  width: 270px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.features-boxs>img{
+  width: 70px;
+  height: 70px;
+  margin-bottom: 27px;
+  
+}
+
+.features-boxs>h1{
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.5;
+  letter-spacing: 0.3px;
+  margin-left: -1px;
+  margin-bottom: 12px;
+}
+
+.features-boxs>p{
+  line-height: 1.7;
+  text-align: center;
+  font-size: 16px;
+}
+
 /* MAIN */
 .footer {
   background: black;
-  color: white;
   /* height: 100px; */
 }