rescued section

vietanhdtd · May 10, 2019 · 4c05c26 · 4c05c26
1 parent ce488a5
commit 4c05c26
Show file tree

Hide file tree

Showing 18 changed files with 112 additions and 3 deletions.
diff --git a/img/1.jpg b/img/1.jpg
diff --git a/img/10.jpg b/img/10.jpg
diff --git a/img/11.jpg b/img/11.jpg
diff --git a/img/12.jpg b/img/12.jpg
diff --git a/img/13.jpg b/img/13.jpg
diff --git a/img/14.jpg b/img/14.jpg
diff --git a/img/15.jpg b/img/15.jpg
diff --git a/img/16.jpg b/img/16.jpg
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/3.jpg b/img/3.jpg
diff --git a/img/4.jpg b/img/4.jpg
diff --git a/img/5.jpg b/img/5.jpg
diff --git a/img/6.jpg b/img/6.jpg
diff --git a/img/7.jpg b/img/7.jpg
diff --git a/img/8.jpg b/img/8.jpg
diff --git a/img/9.jpg b/img/9.jpg
diff --git a/index.html b/index.html
@@ -5,7 +5,60 @@
 <!--[if gt IE 8]><!-->
 <html class="no-js">
 <!--<![endif]-->
+<style>
+* {
+    box-sizing: border-box;
+}
 
+body {
+    margin: 0;
+    font-family: Arial;
+}
+
+.header {
+    text-align: center;
+    padding: 32px;
+}
+
+.row {
+    display: -ms-flexbox; /* IE10 */
+    display: flex;
+    -ms-flex-wrap: wrap; /* IE10 */
+    flex-wrap: wrap;
+    padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+    -ms-flex: 25%; /* IE10 */
+    flex: 25%;
+    max-width: 25%;
+    padding: 0 4px;
+}
+
+.column img {
+    margin-top: 8px;
+    vertical-align: middle;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media screen and (max-width: 992px) {
+    .column {
+    -ms-flex: 100%;
+    flex: 100%;
+    max-width: 50%;
+    }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 768px) {
+    .column {
+    -ms-flex: 100%;
+    flex: 100%;
+    max-width: 100%;
+    }
+}
+</style>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -85,6 +138,37 @@ <h5 class="card-title environment-title">EXTRA TIPS</h5>
             </div>
         </div>
     </section>
+    <section style="background-color: #189090;">
+        <div class="container d-flex justify-content-center pt-5 pb-4">    
+
+            <h1 style="color:#F09048; font-family: Arial; text-decoration: underline;">RESCUED PLATYPUS</h1>
+        </div>
+        <div class="container d-flex pb-5 pt-2">                
+            <div class="row" style="justify-content: center;"> 
+                <div class="column" id="div-mobile">                
+                    <img src="img/3.jpg" style="width:100%">
+                    <img src="img/8.jpg" style="width:100%">
+                    <img src="img/11.jpg" style="width:100%">
+                    <img src="img/4.jpg" style="width:100%">
+                    <img src="img/12.jpg" style="width:100%">
+                </div>
+                <div class="column" id="div-tablet">
+                    <img src="img/2.jpg" style="width:100%">
+                    <img src="img/6.jpg" style="width:100%">
+                    <img src="img/15.jpg" style="width:100%">
+                    <img src="img/7.jpg" style="width:100%">
+                    <img src="img/10.jpg" style="width:100%">                
+                </div>  
+                <div class="column" id="div-desktop">
+                    <img src="img/1.jpg" style="width:100%">
+                    <img src="img/5.jpg" style="width:100%">
+                    <img src="img/9.jpg" style="width:100%">
+                    <img src="img/13.jpg" style="width:100%">                
+                    <img src="img/15.jpg" style="width:100%">
+                </div>
+            </div>
+        </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
@@ -221,6 +221,31 @@
         border-color: #D86000;
     }
 
-    #header-button:hover {
-        background-color: black
-    }
+#header-button:hover {
+    background-color: black
+}
+/* @media screen and (min-width: 0px) and (max-width: 700px) 
+{
+    #div-mobile {    display: block;  }
+    #div-desktop {    display: none;  }
+}
+@media screen and (min-width: 701px) and (max-width: 3000px) 
+{
+    #div-mobile {    display: none;  }
+    #div-desktop {    display: block;  }
+} */
+@media (max-width: 767.98px) {
+    #div-mobile {   display: block; }
+    #div-tablet {   display: none; }
+    #div-desktop {  display: none; }
+}
+@media (min-width: 768px) and (max-width: 991.98px) {
+    #div-mobile {   display: block; }
+    #div-tablet {   display: block; }
+    #div-desktop {  display: none; }
+}
+@media (min-width: 992px) and (max-width: 1199.98px) {
+    #div-mobile {   display: block; }
+    #div-tablet {   display: block; }
+    #div-desktop {  display: block; }
+}