closes #5. Finish the nav

vietanhdtd · May 9, 2019 · 621b34d · 621b34d
1 parent a7712a0
commit 621b34d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 8 deletions.
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/platypus-favicon.png b/img/platypus-favicon.png
diff --git a/img/platypus-logo.png b/img/platypus-logo.png
diff --git a/index.html b/index.html
@@ -9,10 +9,12 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title></title>
+    <title>Adopt your 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="style.css">
 </head>
 
@@ -21,10 +23,26 @@
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
 
-    <nav class="navbar-nav navbar-light py-2 bg-black">
-        <div class="container">
-            <a href="#" class="navbar-brand"><img src="img/logo.png" alt="Startup-logo" height="40px">
-            </a>
+    <nav class="bg-black">
+        <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">
+                <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 class="nav-item">
+                        <a class="nav-link nav-linkto" href="#">About Us</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>
         </div>
     </nav>
     <header class="">

diff --git a/style.css b/style.css
@@ -7,8 +7,9 @@
 }
 
 body {
-    font-size: 16px;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
 }
 
 nav {
@@ -43,5 +44,32 @@ footer {
 /*nav-style*/
 
 .bg-black {
-    background-color: black;
+    background-color: rgba(48, 24, 24, 1.0);
+}
+
+.nav-linkto {
+    color: #00cece !important;
+    font-weight: bold;
+    transition: all 0.3s;
+}
+
+.nav-linkto:hover {
+    color: #006060 !important;
+}
+
+.btn-nav {
+    color: #00cece;
+    border: 2px solid #00cece;
+    transition: all 0.3s;
+    font-weight: bold;
+}
+
+.btn-nav:hover {
+    color: white;
+    border-color: #006060;
+    background-color: #006060;
+}
+
+.search-icon {
+    border: none;
 }