some changes to the cards and nav

vietanhdtd · May 9, 2019 · 134d7a8 · 134d7a8
2 parents 0013f6c + 6580f68
commit 134d7a8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -45,8 +45,9 @@
     <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>
@@ -114,13 +115,13 @@ <h5 class="card-title employee-name text-danger">ANH</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 {
@@ -138,4 +139,16 @@ footer {
 .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
 }