Finished nav bar Desktop. WIP: header content CSS.

karsevar · Jun 6, 2019 · c560e2d · c560e2d
1 parent d8606dc
commit c560e2d
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 2 deletions.
diff --git a/css/index.css b/css/index.css
@@ -168,6 +168,27 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+.static-nav {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.static-nav nav {
+  width: 40%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+.static-nav nav a {
+  text-decoration: none;
+  font-size: 1.6rem;
+  color: black;
+}
 .footer {
   width: 100%;
   border-top: 2px dashed silver;
@@ -180,6 +201,7 @@ img {
   padding: 20px;
 }
 .home .content-section {
+  border-top: 2px dashed #C0C0C0;
   margin: 30px 0;
   display: flex;
   flex-wrap: wrap;

diff --git a/index.html b/index.html
@@ -30,6 +30,12 @@ <h1>Fun Bus</h1>
         <a href='#'>Contact</a>
       </nav>
     </div>
+    <div class='header-content'>
+      <img src='img/fun-bus.jpg'>
+      <div class='header-text'>
+        <h2>Welcome To Fun Bus!</h2>
+        <p>Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, travelblogger adventure WordPress wanderlust theme blogger webiste expedition theme travelblogger. Adventure fun traveler pretty design website expedition.
+      </div>
 
     <section class="content-section">
       <div class="text-content">

diff --git a/less/home-page.less b/less/home-page.less
@@ -1,6 +1,9 @@
 .home {
 
   .content-section {
+    //Border addition
+    border-top: 2px dashed @navigation-border;
+
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;

diff --git a/less/navigation.less b/less/navigation.less
@@ -1 +1,19 @@
-// Navigation Styles here
+// Navigation Styles here
+.static-nav {
+    width: 100%;
+    height: 60px;
+
+    .flexDisplay(row, space-between, center);
+
+    nav {
+        width: 40%;
+        height: 100%;
+        .flexDisplay(row, space-around, center);
+
+        a {
+            text-decoration: none;
+            font-size: 1.6rem;
+            color: @nav-color;
+        }
+    }
+}
diff --git a/less/variables.less b/less/variables.less
@@ -11,4 +11,14 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
+@sandy-beach: #FFEBCD;
+@nav-color: black;
+
+//mixins and parametric mixins
+.flexDisplay(@direction, @justify, @align) {
+    display: flex;
+    flex-direction: @direction;
+    justify-content: @justify;
+    align-items: @align;
+}
+