Skip to content

Commit

Permalink
make changes to the cards, the environment section & added Vy
Browse files Browse the repository at this point in the history
  • Loading branch information
@AustinNguyen2909
AustinNguyen2909 committed May 10, 2019
1 parent b2b5f48 commit 8e9fd11
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 23 deletions.
Binary file added img/Vy.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/environment-background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 48 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,35 +52,60 @@ <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>
Expand All @@ -101,6 +126,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">
Expand Down
57 changes: 50 additions & 7 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,21 @@
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 {
Expand Down Expand Up @@ -180,19 +190,52 @@
align-items: center;
}

.environment-title {
font-weight: 700;
color: white;
font-size: 2rem;
}

.environment-text {
font-size: 1.1rem;
color: white;
}

.environment-card {
background-color: rgba(216, 96, 0, .8);
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 */

Expand Down

0 comments on commit 8e9fd11

Please sign in to comment.