edit nav and header (incomplete).

vietanhdtd · May 9, 2019 · 6580f68 · 6580f68
1 parent 4de9e6f
commit 6580f68
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -13,16 +13,19 @@
     <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="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">
@@ -45,8 +48,10 @@
     <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>
@@ -87,19 +92,22 @@ <h5 class="card-title">Special title treatment</h5>
             <div class="card" style="width: 18rem;">
                 <img src="..." class="card-img-top" alt="...">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                        card's content.</p>
                 </div>
             </div>
             <div class="card" style="width: 18rem;">
                 <img src="..." class="card-img-top" alt="...">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                        card's content.</p>
                 </div>
             </div>
             <div class="card" style="width: 18rem;">
                 <img src="..." class="card-img-top" alt="...">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                        card's content.</p>
                 </div>
             </div>
         </div>
@@ -114,13 +122,13 @@ <h5 class="card-title">Special title treatment</h5>
 
     <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>
 

diff --git a/style.css b/style.css
@@ -55,26 +55,26 @@ 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 {
@@ -91,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;
@@ -102,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 {
@@ -111,4 +112,17 @@ footer {
     font-family: 'Sanomat Grab Web Regular', sans-serif;
     letter-spacing: 1px;
     padding-bottom: 20px;
-}
+    color: #D86000;
+}
+
+#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
+}