Skip to content

Commit

Permalink
edit navbar; more responsive. hheader is more responsive; not complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nguyephi
Nguyephi committed May 10, 2019
1 parent 54b2372 commit 1f7f66c
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 64 deletions.
59 changes: 38 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,42 @@
<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">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link nav-linkto " href="#">Home <span class="sr-only">(current)</span></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link nav-linkto" href="#">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">
<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>
<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="header-style">
<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>
<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>
Expand All @@ -60,23 +71,29 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
<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>
<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>
<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
<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>
Expand Down Expand Up @@ -110,8 +127,8 @@ <h5 class="card-title employee-name text-danger">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>
<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,14 +153,14 @@ <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>

Expand Down
79 changes: 36 additions & 43 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ footer {
}

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

.btn-nav {
Expand All @@ -81,6 +81,19 @@ footer {
border: none;
}

.res-invisible-1 {
display: none;
}

@media screen and (max-width: 989px) {
.res-invisible-2 {display: none;}
.res-invisible-1 {display: block;}
}

nav ul {
display: flex;
align-items: center;
}

/* header style */

Expand All @@ -97,21 +110,40 @@ footer {
padding: 20px 0px;
margin: 0px auto;
width: 60rem;
height: 18rem;
}

.header-title {
font-size: 60px;
font-family: 'Sanomat Grab Web Regular', sans-serif;
padding-bottom: 15px;
color: #D86000;
padding-bottom: 10px;
color: #F09048;
text-align: center;

}

.header-subtitle {
font-size: 18px;
font-weight: 300;
font-family: 'Sanomat Grab Web Regular', sans-serif;
letter-spacing: 1px;
padding-bottom: 20px;
padding-bottom: 25px;
color: #F09048;
text-align: center;
}

#header-button {
font-family: 'Sanomat Grab Web Regular', sans-serif;
font-size: 1.146em;
font-weight: 400;
color: ##F09048;
border-color: #F09048;
}

#header-button:hover {
color: white;
border-color: #189090;
background-color: #189090;
}

/* footer style */
Expand Down Expand Up @@ -142,32 +174,6 @@ li:hover{
margin-top: 50px;
}

<<<<<<< HEAD
.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;
background-color: #222326;
text-decoration: none;
}
.fa:hover{
color: #D86000;
cursor: pointer;
}
a:hover {
text-decoration: none;
=======
/* environment-style */

.card-body-flex {
Expand All @@ -192,17 +198,4 @@ 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;
}

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

0 comments on commit 1f7f66c

Please sign in to comment.