Merge pull request #18 from vietanhdtd/vy-branch

edit WHAT section
vietanhdtd · May 12, 2019 · 75663cf · 75663cf
2 parents 8f93e7d + 8eccfb0
commit 75663cf
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git 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
@@ -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 */