working more on the cards

vietanhdtd · May 9, 2019 · 0013f6c · 0013f6c
1 parent 4de9e6f
commit 0013f6c
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 30 deletions.
diff --git a/img/20190509_155243.jpg b/img/20190509_155243.jpg
diff --git a/img/20190509_155259.jpg b/img/20190509_155259.jpg
diff --git a/img/20190509_155312.jpg b/img/20190509_155312.jpg
diff --git a/img/Anh.png b/img/Anh.png
diff --git a/img/Loc.png b/img/Loc.png
diff --git a/img/Phil.png b/img/Phil.png
diff --git a/img/platypus-environment.jpg b/img/platypus-environment.jpg
diff --git a/img/platypus-food.webp b/img/platypus-food.webp
diff --git a/img/platypus-tips.jpg b/img/platypus-tips.jpg
diff --git a/index.html b/index.html
@@ -51,55 +51,55 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
         </div>
     </header>
     <section class="" style="background-color: #D86000">
-        <div class="environment container py-3">
+        <div class="environment container py-5">
             <div class="card" style="width: 18rem">
-                <img src="..." class="card-img-top" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title">Special title treatment</h5>
-                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                <img src="img/platypus-food.webp" class="card-img-top" alt="Platypus and Food">
+                <div class="card-body card-body-flex">
+                    <h5 class="card-title">FOOD</h5>
+                    <p class="card-text">- platypus are carnivores<br/> - they feed on annelid worms, insect larvae, freshwater shrimp, and freshwater yabby (crayfish)<br/> - platypus eats 20% of its body weight (equivalent to a 150lb human eating 30lbs of food)</p>
+                    <a href="#" class="btn btn-primary">More Info</a>
                 </div>
             </div>
             <div class="card" style="width: 18rem">
-                <div class="card-header">
-                    Featured
-                </div>
-                <div class="card-body">
-                    <h5 class="card-title">Special title treatment</h5>
-                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                <img src="img/platypus-environment.jpg" class="card-img-top" alt="Platypus Environment">
+                <div class="card-body card-body-flex">
+                    <h5 class="card-title">ENVIRONMENT</h5>
+                    <p class="card-text">-platypus needs a constant source of water (i.e. freshwater lakes, rivers, lagoons, farm dams, and streams)<br/> - they are considered nocturnal and are non-sociable. They tend to only gather during mating season.</p>
+                    <a href="#" class="btn btn-primary">More Info</a>
                 </div>
             </div>
             <div class="card " style="width: 18rem">
-                <div class="card-header">
-                    Featured
-                </div>
-                <div class="card-body">
-                    <h5 class="card-title">Special title treatment</h5>
-                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                <img src="img/platypus-tips.jpg" class="card-img-top" alt="Some Tips">
+                <div class="card-body card-body-flex">
+                    <h5 class="card-title">EXTRA TIPS</h5>
+                    <p class="card-text">- platypus have venomous barb. Be careful when handling them<br/> - it’s actually ILLEGAL to own a platypus, bylaw according to Australian wildlife<br/> - Those with a license to handle platypus can rescue them. After rehab platypus
+                        are released back into the wild.</p>
+                    <a href="#" class="btn btn-primary">More Info</a>
                 </div>
             </div>
         </div>
     </section>
     <section class="" style="background-color: #189090">
-        <div class="container employees py-3">
-            <div class="card" style="width: 18rem;">
-                <img src="..." class="card-img-top" alt="...">
+        <div class="container employees py-5">
+            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+                <img src="img/Phil.png" class="avatar" alt="Phil's Avatar">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <h5 class="card-title employee-name text-danger">PHIL</h5>
+                    <p class="card-text text-warning">Product Owner</p>
                 </div>
             </div>
-            <div class="card" style="width: 18rem;">
-                <img src="..." class="card-img-top" alt="...">
+            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+                <img src="img/Loc.png" class="avatar" alt="Loc's Avatar">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <h5 class="card-title employee-name text-danger">LOC</h5>
+                    <p class="card-text text-warning">Developer</p>
                 </div>
             </div>
-            <div class="card" style="width: 18rem;">
-                <img src="..." class="card-img-top" alt="...">
+            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+                <img src="img/Anh.png" class="avatar" alt="Anh' Avatar">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <h5 class="card-title employee-name text-danger">ANH</h5>
+                    <p class="card-text text-warning">Scrum Master</p>
                 </div>
             </div>
         </div>

diff --git a/style.css b/style.css
@@ -111,4 +111,31 @@ footer {
     font-family: 'Sanomat Grab Web Regular', sans-serif;
     letter-spacing: 1px;
     padding-bottom: 20px;
+}
+
+
+/* environment-style */
+
+.card-body-flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+/* employees-style */
+
+.employee-name {
+    font-size: 2em;
+    font-weight: 600;
+}
+
+.no-border {
+    border: none;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 200px;
 }