Skip to content

Commit

Permalink
Merge branch 'master' into branch-phil
Browse files Browse the repository at this point in the history
  • Loading branch information
@vietanhdtd
vietanhdtd authored May 10, 2019
2 parents 1b65b29 + fa07c69 commit dd61064
Show file tree
Hide file tree
Showing 4 changed files with 222 additions and 28 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 @@ -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>
Expand All @@ -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">
Expand Down
186 changes: 174 additions & 12 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

/* page-structure */
/*page-structure*/

* {
margin: 0;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -62,7 +71,7 @@ footer {
}

.nav-linkto:hover {
color: #189090 !important;
color: #189090!important;
}

.btn-nav {
Expand All @@ -88,21 +97,31 @@ 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 {
display: flex;
align-items: center;
}


.nav-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}

/* header style */

.header-style {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -179,7 +332,7 @@ footer li {
color: #F09048;
}

footer li:hover{
footer li:hover {
color: #189090;
cursor: pointer;
}
Expand All @@ -191,6 +344,7 @@ footer li:hover{
margin-top: 50px;
padding-bottom: 70px;
}

.social-media-btn {
justify-content: center;
display: flex;
Expand All @@ -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;
}
Expand All @@ -224,7 +380,6 @@ footer a:hover {
align-items: center;
}


/* employees-style */

.employee-name {
Expand All @@ -239,4 +394,11 @@ footer a:hover {
.avatar {
border-radius: 50%;
width: 200px;
}
}
/* #header-button {
font-family: 'Sanomat Grab Web Regular', sans-serif;
font-size: 1.146em;
font-weight: 400;
color: #D86000;
border-color: #D86000;
} */

0 comments on commit dd61064

Please sign in to comment.