add navbar code and doc

1 files changed, 64 insertions, 1 deletions

diff --git a/index.html b/index.html
index 714cb2f..3e5f0f0 100644
--- a/index.html
+++ b/index.html
@@ -804,6 +804,7 @@
                 <div class="btn-group">
                     <a href="#grid" class="btn btn-primary">flexbox grid</a>
                     <a href="#responsive" class="btn btn-primary">responsive</a>
+                    <a href="#navbar" class="btn btn-primary">navbar</a>
                     <a href="#empty" class="btn btn-primary">empty states</a>
                 </div>
             </section>
@@ -961,13 +962,75 @@
                     <li><code>hide-xl</code> hides elements when the viewport is smaller than or equal to <strong>1280px</strong>. </li>
                 </ul>
             </section>
+        </section>
+
+        <section id="navbar" class="container grid-960">
+            <header class="text-center"><h4>navbar</h4></header>
+            <section class="notes">
+                <p><strong>Navbar</strong> is a layout container that appear in the header of apps and websites. </p>
+            </section>
+            <div class="columns">
+                <div class="column">
+                    <header class="navbar bg-grey">
+                        <section class="navbar-section">
+                            <a href="#navbar" class="btn btn-link btn-lg"><i class="icon icon-menu"></i></a>
+                            <a href="#navbar" class="navbar-brand">Spectre.css</a>
+                        </section>
+                        <section class="navbar-section">
+                            <input class="form-input form-inline" type="text" placeholder="search" />
+                            <a href="#navbar" class="btn btn-link">documents</a>
+                            <a href="#navbar" class="btn btn-link">login</a>
+                            <a href="#navbar" class="btn btn-primary">signup</a>
+                        </section>
+                    </header>
+                </div>
+            </div>
+            <div class="columns">
+                <div class="column">
+                    <header class="navbar">
+                        <section class="navbar-section">
+                            <a href="#navbar" class="btn btn-link btn-lg"><i class="icon icon-menu"></i></a>
+                            <a href="#navbar" class="navbar-brand">Spectre.css</a>
+                        </section>
+                        <section class="navbar-section">
+                            <input class="form-input form-inline" type="text" placeholder="search" />
+                            <figure class="avatar ml-10 mr-10">
+                                <img src="demo/img/avatar-4.png" />
+                            </figure>
+                            <a href="#navbar" class="btn btn-primary">share</a>
+                        </section>
+                    </header>
+                </div>
+            </div>
+
+            <section class="notes">
+                <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. By default, there is no grey background.</p>
+            </section>
+
+            <!-- navbar example -->
+<pre class="code lang-html">
+&lt;<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">&quot;navbar&quot;</span>&gt;
+    &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link btn-lg&quot;</span>&gt;
+            &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+        &lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-brand&quot;</span>&gt;Spectre.css&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/section</span>&gt;
+    &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
+        &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input form-inline&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span>&gt;documents&lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;documents&lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;login&lt;<span class="tag">/a</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;signup&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/section</span>&gt;
+&lt;<span class="tag">/header</span>&gt;
+</pre>
 
         </section>
 
         <section id="empty" class="container grid-960">
             <header class="text-center"><h4>empty states/blank slates</h4></header>
             <section class="notes">
-                <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
+                <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p>
             </section>
             <div class="columns">
                 <div class="column col-6">