done adding WHAT IS A PLATYPUS section

vietanhdtd · May 12, 2019 · ba6049e · ba6049e
1 parent 00746db
commit ba6049e
Show file tree

Hide file tree

Showing 7 changed files with 317 additions and 3 deletions.
diff --git a/img/beaver.svg b/img/beaver.svg
diff --git a/img/duck.svg b/img/duck.svg
diff --git a/img/equal.svg b/img/equal.svg
diff --git a/img/platypus.svg b/img/platypus.svg
diff --git a/img/plus.svg b/img/plus.svg
diff --git a/index.html b/index.html
@@ -150,8 +150,16 @@ <h1 style="color:#F09048; font-family: Arial; text-decoration: underline;">RESCU
         </div>
     </section>
     <section style ="background-color: #D86000">
-        <div class="container d-flex justify-content-center pt-5 pb-4">    
-            <h1 style="color:#189090; font-family: Arial; text-decoration: underline;">WHAT IS A PLATYPUS?</h1>
+        <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 ">

diff --git a/style.css b/style.css
@@ -346,7 +346,7 @@ a:hover {
     background-color: #189090;
 }
 
-/* Rescued section style*/
+/* Rescued section style and What is a platypus*/
 
 .row {
     display: flex;
@@ -373,6 +373,10 @@ a:hover {
         flex: 100%;
         max-width: 100%;
     }
+    .equation-icon{
+        width: 75px;
+        height: 75px;
+    }
 }
 
 @media (min-width: 768px) and (max-width: 991.98px) {
@@ -383,6 +387,10 @@ a:hover {
         flex: 50%;
         max-width: 100%;
     }
+    .equation-icon{
+        width: 125px;
+        height: 125px;
+    }
 }
 
 @media (min-width: 992px) {
@@ -393,6 +401,17 @@ a:hover {
         flex: 100%;
         max-width: 33.33%;
     }
+    .equation-icon{
+        width: 200px;
+        height: 200px;
+    }
+}
+
+@media (max-width: 576px) {
+    .equation-icon{
+        width: 75px;
+        height: 75px;
+    }
 }
 
 /* footer style */