Merge branch 'master' of https://github.com/vietanhdtd/adopt-platypus

get the latest version to edit
vietanhdtd · May 12, 2019 · 75974b9 · 75974b9
2 parents a28848a + d75e324
commit 75974b9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 62 deletions.
diff --git a/about-us.html b/about-us.html
@@ -54,7 +54,7 @@
             <div class="aboutus-header-style">
                 <h1 class="header-title">WHO ARE WE ?</h1>
                 <div class="container employees p-5 row">
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem; ">
                         <img src="img/Phil.png " class="avatar-aboutus" alt="Phil 's Avatar">
                         <div class="card-body">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
@@ -63,7 +63,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
                             <p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
                         </div>
                     </div>
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem; ">
                         <img src="img/Anh.png " class="avatar-aboutus" alt="Anh ' Avatar">
                         <div class="card-body">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
@@ -74,7 +74,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
                     </div>
                 </div>
                 <div class="container employees p-5 row">
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem;">
                         <img src="img/Loc.png" class="avatar-aboutus" alt="Loc's Avatar ">
                         <div class="card-body ">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
@@ -83,7 +83,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
                             <p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
                         </div>
                     </div>
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem;">
                         <img src="img/Vy.png" class="avatar-aboutus" alt="Vy's Avatar ">
                         <div class="card-body ">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">Vy</h5>

diff --git a/index.html b/index.html
@@ -5,53 +5,6 @@
 <!--[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">
@@ -121,8 +74,8 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
     </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" />-->
-            <div class="card environment-card " style="width: 18rem ">
+            <!--img src="img/medium-bg.png" alt="environment-picture" class="environment-bg" />-->
+            <div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
                 <img src="img/platypus-food.webp " class="card-img-top " alt="Platypus and Food ">
                 <div class="card-body card-body-flex ">
                     <p>
@@ -140,7 +93,7 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
                     </div>
                 </div>
             </div>
-            <div class="card environment-card " style="width: 18rem ">
+            <div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
                 <img src="img/platypus-environment.jpg " class="card-img-top " alt="Platypus Environment ">
                 <div class="card-body card-body-flex ">
                     <p>
@@ -158,7 +111,7 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
                 </div>
             </div>
 
-            <div class="card environment-card " style="width: 18rem ">
+            <div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
                 <img src="img/platypus-tips.jpg " class="card-img-top " alt="Some Tips ">
                 <div class="card-body card-body-flex ">
                     <p>
@@ -210,28 +163,28 @@ <h1 style="color:#F09048; font-family: Arial; text-decoration: underline;">RESCU
     </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; ">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem; ">
                 <img src="img/Phil.png " class="avatar " alt="Phil 's Avatar">
                 <div class="card-body">
                     <h5 class="card-title employee-name text-danger px-4">PHIL</h5>
                     <p class="card-text text-warning">Product Owner</p>
                 </div>
             </div>
-            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem;">
                 <img src="img/Loc.png" class="avatar" alt="Loc's Avatar ">
                 <div class="card-body ">
                     <h5 class="card-title employee-name text-danger px-4">LOC</h5>
                     <p class="card-text text-warning ">Developer</p>
                 </div>
             </div>
-            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem;">
                 <img src="img/Vy.png" class="avatar" alt="Vy's Avatar ">
                 <div class="card-body ">
                     <h5 class="card-title employee-name text-danger px-4">Vy</h5>
                     <p class="card-text text-warning ">Developer</p>
                 </div>
             </div>
-            <div class="card bg-transparent no-border card-body-flex " style="width: 18rem; ">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem; ">
                 <img src="img/Anh.png " class="avatar " alt="Anh ' Avatar">
                 <div class="card-body">
                     <h5 class="card-title employee-name text-danger px-4">ANH</h5>

diff --git a/style.css b/style.css
@@ -46,6 +46,7 @@ header {
     min-height: 300px;
     display: flex;
     justify-content: space-around;
+    flex-wrap: wrap;
     text-align: center;
     position: relative;
     overflow: hidden;
@@ -56,6 +57,7 @@ header {
     display: flex;
     justify-content: space-around;
     text-align: center;
+    flex-wrap: wrap;
 }
 
 footer {
@@ -255,6 +257,7 @@ a:hover {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
+    background-color: rgba(0, 0, 0, .7);
 }
 
 .environment-text {
@@ -263,7 +266,7 @@ a:hover {
 }
 
 .environment-card {
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0);
     border: none;
     z-index: 2;
 }
@@ -328,8 +331,8 @@ a:hover {
 
 .avatar {
     border-radius: 50%;
-    width: 200px;
-    height: 200px;
+    width: 75%;
+    height: auto;
     border: 8px solid #D86000;
 }
 
@@ -509,6 +512,10 @@ s
 }
 
 .aboutus-card {
+    min-width: 25%;
+}
+
+.aboutus-page-card {
     min-width: 50%;
 }