Nav Added & Styled

mooneyclan · May 17, 2019 · e3e9a73 · e3e9a73
1 parent f1af258
commit e3e9a73
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/css/index.css b/css/index.css
@@ -168,6 +168,21 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+.nav-section {
+  border-bottom: 2px dashed #C0C0C0;
+  padding: 30px 0;
+}
+.nav-section nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.nav-section nav div a {
+  padding: 20px;
+  color: black;
+  text-decoration: none;
+  font-size: 1.6rem;
+}
 .footer {
   width: 100%;
   border-top: 2px dashed silver;

diff --git a/index.html b/index.html
@@ -15,7 +15,18 @@
 </head>
 
 <body>
+  <section class="nav-section">
+    <nav class="container">
+      <h1>Fun Bus</h1>
 
+      <div>
+        <a href="index.html">Home</a>
+        <a href="#">About Us</a>
+        <a href="#">Blog</a>
+        <a href="#">Contact</a>
+      </div>
+    </nav>
+  </section>
 
 
   <div class="container home">

diff --git a/less/mixins.less b/less/mixins.less
@@ -1 +1,6 @@
-// Mixins in here
+// Mixins in here
+.flex-mixin(@jc: center, @ai: center) {
+  display: flex;
+  justify-content: @jc;
+  align-items: @ai;
+}
diff --git a/less/navigation.less b/less/navigation.less
@@ -1 +1,19 @@
-// Navigation Styles here
+// Navigation Styles here
+
+.nav-section {
+  border-bottom: 2px dashed @navigation-border;
+  padding: 30px 0;
+
+  nav {
+    .flex-mixin(space-between, center);
+
+    div {
+      a {
+        padding: 20px;
+        color: black;
+        text-decoration: none;
+        font-size: 1.6rem;
+      }
+    }
+  }
+}