Merge pull request #13 from vietanhdtd/branch-phil

Branch phil
vietanhdtd · May 10, 2019 · 070a5ed · 070a5ed
2 parents 2e6c39e + f313a6a
commit 070a5ed
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -23,31 +23,42 @@
     <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">
+            <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>
@@ -73,6 +84,7 @@ <h5 class="card-title environment-title">ENVIRONMENT</h5>
                     <a href="# " class="btn btn-primary ">More Info</a>
                 </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 ">
@@ -145,11 +157,8 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
                         <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">

diff --git a/style.css b/style.css
@@ -62,7 +62,7 @@ footer {
 }
 
 .nav-linkto:hover {
-    color: #189090!important;
+    color: #189090 !important;
 }
 
 .btn-nav {
@@ -82,6 +82,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 */
 
@@ -98,21 +111,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 */
@@ -142,7 +174,6 @@ footer li:hover{
     margin-top: 50px;
     padding-bottom: 70px;
 }
-
 .social-media-btn {
     justify-content: center;
     display: flex;
@@ -166,6 +197,7 @@ footer a:hover {
     text-decoration: none;
 }
 
+
 /* environment-style */
 
 .card-body-flex {