Skip to content

Commit

Permalink
#9 Closed. finished footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@vietanhdtd
vietanhdtd committed May 9, 2019
2 parents a1660b6 + 134d7a8 commit 1a899a8
Show file tree
Hide file tree
Showing 11 changed files with 119 additions and 29 deletions.
Binary file removed img/20190509_155243.jpg
View file
Binary file not shown.
Binary file removed img/20190509_155259.jpg
View file
Binary file not shown.
Binary file removed img/20190509_155312.jpg
View file
Binary file not shown.
Binary file added img/Anh.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/Loc.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/Phil.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/platypus-environment.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.
Binary file added img/platypus-food.webp
View file
Binary file not shown.
Binary file added img/platypus-tips.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.
76 changes: 62 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,24 @@
<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'>
<<<<<<< HEAD
<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="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">
>>>>>>> 134d7a8dedcc21a84e6046dc21188c6fdfb55215
<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">
<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">
<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">
Expand All @@ -49,20 +53,64 @@
<header class="">
<div class="container">
<div class="header-style">
<h1 class="header-title">Be a Hero! Resucue a Platypus.</h1>
<h4 class="header-subtitle">"Because the platypus both lays eggs and produces milk, <br /> it's one of
the few animals that can make it's own custard."</h4>
<h1 class="header-title">Be a Hero! Rescue a Platypus.</h1>
<h4 class="header-subtitle">"Because the platypus both lays eggs and produces milk, <br /> it's one of the few animals that can make it's own custard."</h4>
<button class="mx-2 btn btn-nav my-2 my-sm-0" id="header-button" type="submit">MORE INFO</button>
</div>
</div>
</header>
<section class="environment">
<div class="container">

<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>
</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>
</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>
</div>
</div>
</section>
<section class="employees">
<div class="container">

<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">
<div class="card-body">
<h5 class="card-title employee-name text-danger">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>
</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">
<h5 class="card-title employee-name text-danger">ANH</h5>
<p class="card-text text-warning">Scrum Master</p>
</div>
</div>
</div>
</section>
<footer class="">
Expand Down Expand Up @@ -106,13 +154,13 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
</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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</script>
<script src="" async defer></script>
</body>

Expand Down
72 changes: 57 additions & 15 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ body {
}

nav {
background-color: ;
min-height: ;
color: white;
}

Expand All @@ -30,14 +28,17 @@ header {
}

.environment {
background-color: black;
min-height: 300px;
color: white;
display: flex;
justify-content: space-around;
text-align: center;
}

.employees {
background-color: white;
min-height: 300px;
display: flex;
justify-content: space-around;
text-align: center;
}

footer {
Expand All @@ -54,32 +55,33 @@ footer {
}

.nav-linkto {
color: #00cece !important;
font-weight: bold;
color: #F09048 !important;
font-weight: 400;
transition: all 0.3s;
}

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

.btn-nav {
color: #00cece;
border: 2px solid #00cece;
color: #F09048;
border: 2px solid #F09048;
transition: all 0.3s;
font-weight: bold;
font-weight: 400;
}

.btn-nav:hover {
color: white;
border-color: #006060;
background-color: #006060;
border-color: #189090;
background-color: #189090;
}

.search-icon {
border: none;
}


/* header style */

.header-style {
Expand All @@ -89,7 +91,7 @@ footer {
align-items: center;
position: relative;
top: 200px;
color: #D86000;
color: #F09048;
border: 2px solid rgba(48, 24, 24, .9);
background-color: rgba(48, 24, 24, .9);
padding: 20px 0px;
Expand All @@ -100,7 +102,8 @@ footer {
.header-title {
font-size: 60px;
font-family: 'Sanomat Grab Web Regular', sans-serif;
padding-bottom: 20px;
padding-bottom: 15px;
color: #D86000;
}

.header-subtitle {
Expand Down Expand Up @@ -139,6 +142,7 @@ li:hover{
margin-top: 50px;
}

<<<<<<< HEAD
.social-media-btn {
justify-content: center;
display: flex;
Expand All @@ -163,4 +167,42 @@ li:hover{
}
a:hover {
text-decoration: none;
=======
/* environment-style */

.card-body-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}


/* employees-style */

.employee-name {
font-size: 2em;
font-weight: 600;
}

.no-border {
border: none;
}

.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;
}

#header-button:hover {
background-color: black
>>>>>>> 134d7a8dedcc21a84e6046dc21188c6fdfb55215
}

0 comments on commit 1a899a8

Please sign in to comment.