From 8eccfb073718cb7fb2013fa2099e8037bb8d957c Mon Sep 17 00:00:00 2001
From: "huynh.h.vy" <huynh.h.vy@gmail.com>
Date: Sun, 12 May 2019 16:46:30 +0700
Subject: [PATCH] edit WHAT section

---
 index.html | 25 ++++++++++++-------------
 style.css  | 30 ++++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index ea9aceb..7e775dd 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,18 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
             </div>
         </div>
     </header>
+    <section style ="background-color: #D86000">
+        <div class="container d-flex justify-content-center pt-5 pb-0">    
+            <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A PLATYPUS?</h1>
+        </div>
+        <div class="container d-flex justify-content-center pt-5 pb-5 ">
+            <img class="m-3" id="animal-icon" src="img/duck.svg">
+            <img class="m-3" id="equation-icon" src="img/plus.svg">
+            <img class="m-3" id="animal-icon" src="img/beaver.svg">
+            <img class="m-3" id="equation-icon" src="img/equal.svg">
+            <img class="m-3" id="animal-icon" src="img/platypus.svg">
+        </div>
+    </section>
     <section class="environment-section">
         <div class="environment container no-stretch py-3">
             <<!--img src="img/medium-bg.png" alt="environment-picture" class="environment-bg" />-->
@@ -196,19 +208,6 @@ <h1 style="color:#F09048; font-family: Arial; text-decoration: underline;">RESCU
             </div>
         </div>
     </section>
-    <section style ="background-color: #D86000">
-        <div class="container d-flex justify-content-center pt-5 pb-0">    
-            <h1 style="color: #2562d4; font-family: Arial; text-decoration: underline;">WHAT IS A PLATYPUS?</h1>
-        </div>
-        <div class="container d-flex justify-content-center pt-5 pb-5">
-            <img class="m-3 equation-icon" src="img/duck.svg">
-            <img class="m-3 equation-icon" src="img/plus.svg">
-            <img class="m-3 equation-icon" src="img/beaver.svg">
-            <img class="m-3 equation-icon" src="img/equal.svg">
-            <img class="m-3 equation-icon" src="img/platypus.svg">
-
-        </div>
-    </section>
     <section class=" " style="background-color: #189090 ">
         <div class="container employees p-5 ">
             <div class="card bg-transparent no-border card-body-flex " style="width: 18rem; ">
diff --git a/style.css b/style.css
index 7a19a02..01913f1 100644
--- a/style.css
+++ b/style.css
@@ -373,10 +373,14 @@ a:hover {
         flex: 100%;
         max-width: 100%;
     }
-    .equation-icon{
+    #animal-icon{
         width: 75px;
         height: 75px;
     }
+    #equation-icon{
+        width: 50px;
+        height: 50px;
+    }
 }
 
 @media (min-width: 768px) and (max-width: 991.98px) {
@@ -387,10 +391,14 @@ a:hover {
         flex: 50%;
         max-width: 100%;
     }
-    .equation-icon{
+    #animal-icon{
         width: 125px;
         height: 125px;
     }
+    #equation-icon{
+        width: 90px;
+        height: 90px;
+    }
 }
 
 @media (min-width: 992px) {
@@ -401,17 +409,31 @@ a:hover {
         flex: 100%;
         max-width: 33.33%;
     }
-    .equation-icon{
+    #animal-icon{
         width: 200px;
         height: 200px;
     }
+    #equation-icon{
+        width: 150px;
+        height: 150px;
+    }
 }
 
 @media (max-width: 576px) {
-    .equation-icon{
+    #animal-icon{
         width: 75px;
         height: 75px;
     }
+    #equation-icon{
+        width: 50px;
+        height: 50px;
+    }
+}
+.m-3{
+    margin: 0rem!important;
+}
+.m-3{
+    margin: 3px!important;
 }
 
 /* footer style */