diff --git a/img/Vy.png b/img/Vy.png
new file mode 100644
index 0000000..b27a76b
Binary files /dev/null and b/img/Vy.png differ
diff --git a/img/environment-background.jpg b/img/environment-background.jpg
new file mode 100644
index 0000000..b2bb590
Binary files /dev/null and b/img/environment-background.jpg differ
diff --git a/index.html b/index.html
index 4ca467c..2d83265 100644
--- a/index.html
+++ b/index.html
@@ -63,36 +63,61 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
             </div>
         </div>
     </header>
-    <section class="">
-        <div class="environment container py-5 ">
+    <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/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>
+                    <p>
+                        <button class="btn environment-Info" type="button" data-toggle="collapse" data-target="#collapseExample-1" aria-expanded="false" aria-controls="collapseExample">
+                            FOOD
+                        </button>
+                    </p>
+                    <div class="collapse" id="collapseExample-1">
+                        <div class="">
+                            <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="card-footer btn btn-primary environment-moreInfo">More Info</a>
+                        </div>
+                    </div>
                 </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>
+                    <p>
+                        <button class="btn environment-Info" type="button" data-toggle="collapse" data-target="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample">
+                            ENVIRONMENT
+                        </button>
+                    </p>
+                    <div class="collapse" id="collapseExample-2">
+                        <div class="">
+                            <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="card-footer btn btn-primary environment-moreInfo">More Info</a>
+                        </div>
+                    </div>
                 </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>
+                    <p>
+                        <button class="btn environment-Info" type="button" data-toggle="collapse" data-target="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample">
+                            EXTRA TIPS
+                        </button>
+                    </p>
+                    <div class="collapse" id="collapseExample-3">
+                        <div class="">
+                            <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="card-footer btn btn-primary environment-moreInfo">More Info</a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -113,6 +138,13 @@ <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/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; ">
                 <img src="img/Anh.png " class="avatar " alt="Anh ' Avatar">
                 <div class="card-body">
diff --git a/style.css b/style.css
index 33ec801..7fe5ae5 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,4 @@
-
-/* page-structure */
+/*page-structure*/
 
 * {
     margin: 0;
@@ -28,11 +27,21 @@ header {
     height: 650px;
 }
 
+.environment-section {
+    background-image: url("img/environment-background.jpg");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
 .environment {
     min-height: 300px;
     display: flex;
     justify-content: space-around;
     text-align: center;
+    position: relative;
+    overflow: hidden;
 }
 
 .employees {
@@ -62,7 +71,7 @@ footer {
 }
 
 .nav-linkto:hover {
-    color: #189090 !important;
+    color: #189090!important;
 }
 
 .btn-nav {
@@ -88,8 +97,18 @@ footer {
 }
 
 @media screen and (max-width: 989px) {
-    .res-invisible-2 {display: none;}
-    .res-invisible-1 {display: block;}
+    .res-invisible-2 {
+        display: none;
+    }
+    .res-invisible-1 {
+        display: block;
+    }
+}
+
+.nav-flex {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
 }
 
 nav ul {
@@ -97,12 +116,12 @@ nav ul {
     align-items: center;
 }
 
+
 .nav-row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
-
 /* header style */
 
 .header-style {
@@ -150,6 +169,140 @@ header .container {
     text-align: center;
 }
 
+
+/* footer style */
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+}
+
+li {
+    list-style: none;
+    color: #F09048;
+}
+
+li:hover {
+    color: #D86000;
+    cursor: pointer;
+}
+
+.footer-links {}
+
+.list-header {
+    width: 100%;
+    color: #D86000;
+    line-height: 50px;
+    margin-top: 50px;
+}
+
+.social-media-btn {
+    justify-content: center;
+    display: flex;
+    margin-top: 50px;
+}
+
+.fa {
+    margin: 0px 20px 0 0;
+    padding: 15px;
+    width: 60px;
+    height: 60px;
+    font-size: 30px;
+    text-align: center;
+    border-radius: 50%;
+    color: #D86000;
+    text-decoration: none;
+    transition: all .3;
+}
+
+.fa:hover {
+    color: #F09048;
+    cursor: pointer;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+
+/* environment-style */
+
+.card-body-flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.environment-text {
+    font-size: 1.1rem;
+    color: white;
+}
+
+.environment-card {
+    background-color: rgba(0, 0, 0, .5);
+    border: none;
+    z-index: 2;
+}
+
+.environment-Info {
+    padding: .5rem 2rem;
+    font-weight: bold;
+    color: #F09048;
+    font-size: 1.2rem;
+    text-decoration: underline;
+}
+
+.environment-Info:hover {
+    color: #189090;
+}
+
+.environment-moreInfo {
+    color: #F09048;
+    border: 2px solid #F09048;
+    transition: all 0.3s;
+    font-weight: 400;
+}
+
+.environment-moreInfo:hover {
+    color: white;
+    border-color: #189090;
+    background-color: #189090;
+}
+
+.no-stretch {
+    align-items: flex-start;
+}
+
+.environment-bg {
+    width: 150%;
+    z-index: 0;
+    position: absolute;
+    top: -150px;
+    left: -100px;
+}
+
+
+/* employees-style */
+
+.employee-name {
+    font-size: 2em;
+    font-weight: 600;
+    background-color: aquamarine;
+}
+
+.no-border {
+    border: none;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    border: 8px solid #D86000;
+}
+
 #header-button {
     font-family: 'Sanomat Grab Web Regular', sans-serif;
     font-size: 1.146em;
@@ -164,10 +317,10 @@ header .container {
     background-color: #189090;
 }
 
-/* footer style */
 
+/* footer style */
 
-footer .container  {
+footer .container {
     display: flex;
     justify-content: space-between;
     margin: auto;
@@ -179,7 +332,7 @@ footer li {
     color: #F09048;
 }
 
-footer li:hover{
+footer li:hover {
     color: #189090;
     cursor: pointer;
 }
@@ -191,6 +344,7 @@ footer li:hover{
     margin-top: 50px;
     padding-bottom: 70px;
 }
+
 .social-media-btn {
     justify-content: center;
     display: flex;
@@ -206,10 +360,12 @@ footer li:hover{
     color: #D86000;
     text-decoration: none;
 }
-.fa:hover{
+
+.fa:hover {
     color: #189090;
     cursor: pointer;
 }
+
 footer a:hover {
     text-decoration: none;
 }
@@ -224,7 +380,6 @@ footer a:hover {
     align-items: center;
 }
 
-
 /* employees-style */
 
 .employee-name {
@@ -239,4 +394,11 @@ footer a:hover {
 .avatar {
     border-radius: 50%;
     width: 200px;
-}
\ No newline at end of file
+}
+/* #header-button {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+    color: #D86000;
+    border-color: #D86000;
+} */
\ No newline at end of file