Skip to content

Commit

Permalink
Merge from master
Browse files Browse the repository at this point in the history
  • Loading branch information
@huynhhoangvy
huynhhoangvy committed May 11, 2019
2 parents 4c05c26 + 15c0c27 commit 285f66a
Show file tree
Hide file tree
Showing 5 changed files with 638 additions and 256 deletions.
152 changes: 152 additions & 0 deletions about-us.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<!DOCTYPE html>

<html class="no-js">


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Help a Platypus</title>
<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://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">
<div class="container navbar-nav navbar-light navbar-expand-lg py-2 nav-flex nav-row">
<a href="index.html" 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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link nav-linkto " href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">Rescued Platypus</a>
</li>
<li class="nav-item res-invisible-1">
<a class="nav-link nav-linkto" href="#">Help A Platypus</a>
</li>
<li class="nav-item res-invisible-1">
<a class="nav-link nav-linkto" href="#">Search</a>
</li>
</ul>
</div>
<form class="form-inline res-invisible-2">
<button class="mx-2 btn btn-nav my-2 my-sm-0" type="submit">HELP A PLATYPUS</button>
<button class="mx-2 btn btn-nav my-2 my-sm-0 search-icon" type="submit"><i
class="fas fa-search"></i></button>
</form>
</div>
</nav>
<header class="">
<div class="container">
<div class="aboutus-header-style">
<h1 class="header-title">WHO ARE WE ?</h1>
<div class="container employees p-5 row">
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
<img src="img/Phil.png " class="avatar-aboutus" alt="Phil 's Avatar">
<div class="card-body">
<h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
<p class="card-text text-info">Product Owner</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
<img src="img/Anh.png " class="avatar-aboutus" alt="Anh ' Avatar">
<div class="card-body">
<h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
<p class="card-text text-info">Scrum Master</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>
</div>
<div class="container employees p-5 row">
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
<img src="img/Loc.png" class="avatar-aboutus" alt="Loc's Avatar ">
<div class="card-body ">
<h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
<p class="card-text text-info ">Developer</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>
<div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
<img src="img/Vy.png" class="avatar-aboutus" alt="Vy's Avatar ">
<div class="card-body ">
<h5 class="card-title employee-name-aboutus text-danger px-4">Vy</h5>
<p class="card-text text-info ">Developer</p>
<p class="card-text text-warning">I think we shoudl put informations about who we are and what we did in our project</p>
<p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
</div>
</div>

</div>
</div>
</div>
</header>
<section></section>
<footer class="">
<div class="container row">
<a href="index.html" 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">
<div class="list-header"><a class="font-weight-bold">Company</a>
<ul class="footer-list text-muted">
<li><a>About</a></li>
<li><a>Jobs</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="list-header"><a class="font-weight-bold">Communities</a>
<ul class="footer-list text-muted">
<li><a>Rescuers</a></li>
<li><a>Forum</a></li>
<li><a>Investor</a></li>
<li><a>Event</a></li>
</ul>
</div>
<div class="list-header"><a class="font-weight-bold">Useful Links</a>
<ul class="footer-list text-muted">
<li><a>Help</a></li>
<li><a>Health</a></li>
<li><a>Extra Tips</a></li>
</ul>
</div>
</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>
</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="" async defer></script>
</body>

</html>
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.
94 changes: 67 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,25 +74,34 @@

<body>
<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>
<div class="container navbar-nav navbar-light navbar-expand-lg py-2 nav-flex nav-row">
<a href="index.html" 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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link nav-linkto " href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link nav-linkto " href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">About Us</a>
<a class="nav-link nav-linkto" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">Rescued Platypus</a>
</li>
<li class="nav-item res-invisible-1">
<a class="nav-link nav-linkto" href="#">Help A Platypus</a>
</li>
<li class="nav-item res-invisible-1">
<a class="nav-link nav-linkto" href="#">Search</a>
</li>
</ul>
</div>
<form class="form-inline">
<form class="form-inline res-invisible-2">
<button class="mx-2 btn btn-nav my-2 my-sm-0" type="submit">HELP A PLATYPUS</button>
<button class="mx-2 btn btn-nav my-2 my-sm-0 search-icon" type="submit"><i
class="fas fa-search"></i></button>
class="fas fa-search"></i></button>
</form>
</div>
</nav>
Expand All @@ -105,35 +114,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</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 Down Expand Up @@ -185,6 +220,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 All @@ -196,8 +238,8 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
</section>
<footer class="">
<div class="container row">
<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="index.html" 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">
<div class="list-header"><a class="font-weight-bold">Company</a>
<ul class="footer-list text-muted">
<li><a>About</a></li>
Expand All @@ -221,7 +263,7 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
</ul>
</div>
</div>
<div class="social-media-btn col-4">
<div class="social-media-btn col-3">
<ul class="row">
<li>
<a href="#" class="fa fa-instagram"></a>
Expand All @@ -234,10 +276,8 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
</li>
</ul>
</div>

</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">
Expand Down
Loading

0 comments on commit 285f66a

Please sign in to comment.