Merge pull request #15 from vietanhdtd/vy-branch

Add new Section: "Rescued Platypus"
vietanhdtd · May 12, 2019 · eac8312 · eac8312
2 parents 15c0c27 + 80c5d1d
commit eac8312
Show file tree

Hide file tree

Showing 18 changed files with 153 additions and 1 deletion.
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">
@@ -120,6 +173,41 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
             </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 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>
+    </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
@@ -346,6 +346,54 @@ a:hover {
     background-color: #189090;
 }
 
+/* Rescued section style*/
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 4px;
+}
+
+.column {
+    flex: 25%;
+    max-width: 25%;
+    padding: 0 4px;
+}
+
+.column img {
+    margin-top: 8px;
+    vertical-align: middle;
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+    #div-mobile {   display: block; }
+    #div-tablet {   display: none; }
+    #div-desktop {  display: none; }
+    .column {
+        flex: 100%;
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+    #div-mobile {   display: block; }
+    #div-tablet {   display: block; }
+    #div-desktop {  display: none; }
+    .column {
+        flex: 50%;
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 992px) {
+    #div-mobile {   display: block; }
+    #div-tablet {   display: block; }
+    #div-desktop {  display: block; }
+    .column {
+        flex: 100%;
+        max-width: 33.33%;
+    }
+}
 
 /* footer style */
 
@@ -422,4 +470,20 @@ s
     font-weight: 400;
     color: #D86000;
     border-color: #D86000;
-} */
+} */
+
+@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; }
+}