feat: add header nav menu

static/assets/home.css

@@ -1,11 +1,32 @@
 .header {
-  border-bottom: 2px solid #C28100;
+  /* border-bottom: 2px solid #C28100; */
   padding-bottom: 1.5em;
   padding-top: 1.5em;
+  background-color: #d35400;
 }
 
 .header-container {
   display: flex;
+  justify-content: space-between;
+}
+
+.header-left {
+  display: flex;
+}
+
+.header-menu {
+  display: flex;
+  align-items: flex-end;
+
+}
+
+.header-menu a {
+  color: white;
+  margin-right: 1em;
+}
+
+.header-menu a:last-of-type {
+  margin-right: 0;
 }
 
 .header-image {
@@ -27,6 +48,7 @@
 .header-title {
   font-family: 'Roboto Slab', serif;
   margin: 0;
+  color: white;
   font-weight: 500;
   font-size: 2.5em;
 }
@@ -35,16 +57,17 @@
   margin: 0;
   text-decoration: underline;
   font-weight: 100;
-  color: #34495e;
-  transition: 0.2s;
+  color: #ecf0f1;
+  transition: opacity 0.2s;
 }
 
 .header-sub-title:hover {
-  color: #0029FF;
+  opacity: 0.9;
+  color: #ecf0f1;
 }
 
 .header-description {
-  color: #34495e;
+  color: #ecf0f1;
 }
 
 .content {
@@ -143,11 +166,17 @@
 }
 
 .card {
+  cursor: pointer;
   display: flex;
   border: 1px solid #bdc3c7;
   border-radius: 4px;
   margin-bottom: 1em;
   box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
+  transition: all 0.2s;
+}
+
+.card:hover {
+  transform: scale(1.02);
 }
 
 .card-image {
@@ -209,7 +238,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1000px) {
   .header {
     padding-top: 1em;
     padding-bottom: 1em;
@@ -217,6 +246,13 @@
   .header-container {
     display: block;
   }
+  .header-left {
+    display: block;
+  }
+  .header-menu {
+    justify-content: center;
+    margin-top: 1em;
+  }
   .header-content {
     padding: 0;
   }