diff --git a/index.html b/index.html
index fcad75e..3c1b860 100644
--- a/index.html
+++ b/index.html
@@ -13,17 +13,15 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel='icon' href='img/platypus-favicon.png' type='image/x-icon'>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <nav class="bg-black fixed-top row">
-        <div class="container navbar-nav navbar-light navbar-expand-lg py-2">
+    <nav class="bg-black fixed-top">
+        <div class="container navbar-nav navbar-light navbar-expand-lg py-2 nav-flex">
             <a href="#" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -65,6 +63,7 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
             </div>
         </div>
     </header>
+<<<<<<< HEAD
     <section class="" style="background-color: #D86000">
         <div class="environment container py-5">
             <div class="card" style="width: 18rem">
@@ -96,30 +95,61 @@ <h5 class="card-title">EXTRA TIPS</h5>
                         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>
+=======
+    <section class="">
+        <div class="environment container py-5 ">
+            <div class="card environment-card " style="width: 18rem ">
+                <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 environment-title">FOOD</h5>
+                    <p class="card-text environment-text">platypus are carnivores</p>
+                    <p class="card-text environment-text border-top pt-3">they feed on annelid worms, insect larvae, freshwater shrimp, and freshwater yabby (crayfish)</p>
+                    <p class="card-text environment-text border-top pt-3">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 environment-card " style="width: 18rem ">
+                <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-title">ENVIRONMENT</h5>
+                    <p class="card-text environment-text">platypus needs a constant source of water (i.e. freshwater lakes, rivers, lagoons, farm dams, and streams)</p>
+                    <p class="card-text environment-text border-top pt-3">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 environment-card " style="width: 18rem ">
+                <img src="img/platypus-tips.jpg " class="card-img-top " alt="Some Tips ">
+                <div class="card-body card-body-flex ">
+                    <h5 class="card-title environment-title">EXTRA TIPS</h5>
+                    <p class="card-text environment-text">platypus have venomous barb. Be careful when handling them</p>
+                    <p class="card-text environment-text border-top pt-3">it’s actually ILLEGAL to own a platypus, bylaw according to Australian wildlife</p>
+                    <p class="card-text environment-text border-top pt-3">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>
+>>>>>>> 2e6c39ea0b37a723919f4fc34e2581b7599f9e7c
                 </div>
             </div>
         </div>
     </section>
-    <section class="" style="background-color: #189090">
-        <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">
+    <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; ">
+                <img src="img/Phil.png " class="avatar " alt="Phil 's Avatar">
                 <div class="card-body">
-                    <h5 class="card-title employee-name text-danger">PHIL</h5>
+                    <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;">
-                <img src="img/Loc.png" class="avatar" alt="Loc's Avatar">
-                <div class="card-body">
-                    <h5 class="card-title employee-name text-danger">LOC</h5>
-                    <p class="card-text text-warning">Developer</p>
+                <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;">
-                <img src="img/Anh.png" class="avatar" alt="Anh' Avatar">
+            <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">
-                    <h5 class="card-title employee-name text-danger">ANH</h5>
+                    <h5 class="card-title employee-name text-danger px-4">ANH</h5>
                     <p class="card-text text-warning">Scrum Master</p>
                 </div>
             </div>
@@ -127,9 +157,15 @@ <h5 class="card-title employee-name text-danger">ANH</h5>
     </section>
     <footer class="">
         <div class="container row">
+<<<<<<< HEAD
             <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png"
                     alt="Startup-logo" height="85px"></a>
             <div class="footer-links d-flex col-6">
+=======
+            <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png" alt="Startup-logo"
+                    height="85px"></a>
+            <div class="footer-links d-flex col-7">
+>>>>>>> 2e6c39ea0b37a723919f4fc34e2581b7599f9e7c
                 <div class="list-header"><a class="font-weight-bold">Company</a>
                     <ul class="footer-list text-muted">
                         <li><a>About</a></li>
@@ -153,6 +189,7 @@ <h5 class="card-title employee-name text-danger">ANH</h5>
                     </ul>
                 </div>
             </div>
+<<<<<<< HEAD
             <div class="social-media-btn col-4">
                 <ul class="row">
                     <li><a href="#" class="fa fa-instagram"></a></li>
@@ -160,19 +197,26 @@ <h5 class="card-title employee-name text-danger">ANH</h5>
                     <li><a href="#" class="fa fa-facebook"></a></li>
                 </ul>
             </div>
+=======
+                <div class="social-media-btn col-3">
+                    <ul class="row">
+                        <li><a href="#" class="fa fa-instagram"></a></li>
+                        <li><a href="#" class="fa fa-twitter"></a></li>
+                        <li><a href="#" class="fa fa-facebook"></a></li>
+                    </ul>
+                </div>
+            
+>>>>>>> 2e6c39ea0b37a723919f4fc34e2581b7599f9e7c
 
         </div>
     </footer>
 
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
-        </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
-        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
-        </script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
-        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
-        </script>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
+    </script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
+    </script>
     <script src="" async defer></script>
 </body>
 
diff --git a/readme.md b/readme.md
index 452a115..ca231cc 100644
--- a/readme.md
+++ b/readme.md
@@ -1,17 +1,19 @@
 ## Adopt Platypus ##
 
-Create landing page and about us page
-Landing page: A website that will help people to adopt a platypus. It has info on how to care for platypus. It also has about us section. 
+
+A website that will help people to adopt a platypus. It has info on how to care for platypus. It also has about us section. 
 
 
 ## Team Members ##
 
-Phil (Product Owner)
-Anh (Scrum Master)
-Austin (DEV)
+* Phil (*Product Owner*)
+* Anh (*Scrum Master*)
+* Austin (*DEV*)
+* Vy (*DEV*)
 
 ## View At ##
 
+
 https://github.com/vietanhdtd/adopt-platypus
 
 
diff --git a/style.css b/style.css
index 378f77b..0b24333 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,5 @@
-/*page-structure*/
+
+/* page-structure */
 
 * {
     margin: 0;
@@ -42,7 +43,7 @@ header {
 }
 
 footer {
-    background-color: black;
+    background-color: #301818;
     min-height: 100px;
     color: white;
 }
@@ -147,33 +148,59 @@ nav ul {
 }
 
 /* footer style */
-.container {
+
+
+footer .container  {
     display: flex;
     justify-content: space-between;
     margin: auto;
-    
+    padding-top: 30px;
 }
 
-li {
+footer li {
     list-style: none;
     color: #F09048;
 }
-li:hover{
-    color: #D86000;
-    cursor: pointer;
-}
 
-.footer-links {
- 
+footer li:hover{
+    color: #189090;
+    cursor: pointer;
 }
 
 .list-header {
-    width: 100%;
+    width: 150px;
     color: #D86000;
     line-height: 50px;
     margin-top: 50px;
+    padding-bottom: 70px;
+}
+
+<<<<<<< HEAD
+=======
+.social-media-btn {
+    justify-content: center;
+    display: flex;
+    margin-top: 50px;
+}
+
+.fa {
+    margin: 0px 20px 0 0;
+    padding: 15px;
+    font-size: 50px;
+    text-align: center;
+    border-radius: 50%;
+    color: #D86000;
+    text-decoration: none;
+}
+.fa:hover{
+    color: #189090;
+    cursor: pointer;
+}
+footer a:hover {
+    text-decoration: none;
 }
 
+>>>>>>> 2e6c39ea0b37a723919f4fc34e2581b7599f9e7c
 /* environment-style */
 
 .card-body-flex {
@@ -198,4 +225,20 @@ li:hover{
 .avatar {
     border-radius: 50%;
     width: 200px;
-}
\ No newline at end of file
+<<<<<<< HEAD
+}
+=======
+}
+
+#header-button {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+    color: #D86000;
+    border-color: #D86000;
+}
+
+#header-button:hover {
+    background-color: black;
+}
+>>>>>>> 2e6c39ea0b37a723919f4fc34e2581b7599f9e7c
