Skip to content

Commit

Permalink
fix the cards and the the footer-hover-effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@AustinNguyen2909
AustinNguyen2909 committed May 10, 2019
1 parent 54b2372 commit b2b5f48
Show file tree
Hide file tree
Showing 2 changed files with 288 additions and 266 deletions.
120 changes: 62 additions & 58 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<span class="navbar-toggler-icon"></span>
Expand Down Expand Up @@ -54,64 +52,67 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
</div>
</div>
</header>
<section class="" style="background-color: #D86000">
<div class="environment container py-5">
<div class="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">FOOD</h5>
<p class="card-text">- platypus are carnivores<br/> - they feed on annelid worms, insect larvae, freshwater shrimp, and freshwater yabby (crayfish)<br/> - 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>
<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" 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</h5>
<p class="card-text">-platypus needs a constant source of water (i.e. freshwater lakes, rivers, lagoons, farm dams, and streams)<br/> - 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 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 " 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">EXTRA TIPS</h5>
<p class="card-text">- platypus have venomous barb. Be careful when handling them<br/> - it’s actually ILLEGAL to own a platypus, bylaw according to Australian wildlife<br/> - 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>
<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>
</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>
</div>
</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>
<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">
<div class="list-header"><a class="font-weight-bold">Company</a>
<ul class="footer-list text-muted">
Expand All @@ -136,26 +137,29 @@ <h5 class="card-title employee-name text-danger">ANH</h5>
</ul>
</div>
</div>
<div class="social-media-btn col-4">
<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 class="social-media-btn col-4">
<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="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>

Expand Down
Loading

0 comments on commit b2b5f48

Please sign in to comment.