aside-nav.html in magic_stylez-0.0.0.52

- old
+ new

@@ -10,12 +10,27 @@
   <script type="text/javascript" charset="utf-8">
     App = {};
     App.Environment = "production";
   </script>
 </head>
-<body class="blank fixed-nav">
-  <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
+<body class="with_aside_nav with_important_notice fixed-nav-lg">
+  
+  <div class="important_notice warning">
+    <div class="row">
+      <div class="col-xs-2" style="font-size: 24px;">
+        <i class="magicons-info-round"></i>
+      </div>
+      <div class="col-xs-8">
+        Example pictures from:&nbsp; <a href="http://lorempixel.com/" target="_blank">lorempixel.com</a>
+      </div>
+      <div class="col-xs-2" style="font-size: 24px;">
+        <i class="magicons-info-round"></i>
+      </div>
+    </div>
+  </div>
+  
+  <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar" role="navigation">
     <div class="corset">
     
   
   
       <div class="navbar-header">
@@ -48,28 +63,104 @@
       </div>
     
     </div>
   </div>
 
+  <div id="nav-aside" class="fixed-left">
+    <div class="inner-aside">
+    
+      <div class="aside-btn user-pic">
+        <img alt="User Picture" src="http://lorempixel.com/g/50/60/people/" />
+      </div>
+    
+      <a class="aside-btn" href="#" title="Dashboard">
+        <i class='glyphicon glyphicon-home'></i>
+      </a>    
+      <a class="aside-btn active" href="#" title="Settings">
+        <i class='glyphicon glyphicon-cog'></i>
+      </a>    
+      <a class="aside-btn" href="#" title="Inbox">
+        <i class='glyphicon glyphicon-inbox'></i>
+      </a> 
+      <a class="aside-btn" href="#" title="Pictures">
+        <i class='glyphicon glyphicon-picture'></i>
+      </a> 
+    
+    </div>
+  </div>
+
+
+
+
+<div class="fullpage-table" id="banner-one">
+      <div class="table-row">
+        <div class="banner-box responsive-hero with-footer with-header fill lorempixel" style="background-image: url('http://lorempixel.com/g/1200/500/nature/')">
+          <div class="banner-header">
+            <div class="corset">
+              <h1 class="loud">Responsive Aside-Nav</h1>
+            </div>
+          </div>
+      
+          <div class="banner-content">
+            <div class="corset">
+              <br/>
+              <div class="box blur">
+                <table class="name">
+                  <tr>
+                    <th>body &nbsp;</th>
+                    <td>with_aside_nav with_important_notice fixed-nav-lg</td>
+                  </tr>
+                  <tr>
+                    <th>navbar &nbsp;</th>
+                    <td>navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar</td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+      
+          <div class="banner-footer" id="sign_up_banner">
+            <div class="corset">
+              <div class="row">
+                <div class="col-sm-4 col-sm-offset-1">
+                  <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
+                  <button class="btn btn-success btn-block help_arrow hide_da_notice" data-text="Hide notice!">
+                    toggle Notice
+                  </button>
+                </div>
+                <div class="col-sm-4 col-sm-offset-2">
+                  <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
+                  <button class="btn btn-default btn-block help_arrow get_some_borders" data-text="click!">
+                    toggle Borders
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+      
+        </div>
+      </div>
+    </div>
+
   <div class="main_content">
+    
+    
+    
+    
+    
   
-    <div class="section brand">
+    <div class="section dark">
       <div class="corset">
         <h1>Responsive Slidebar</h1>
         <br/>
         <p class="loud">
           Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
           make your screen smaller than 768px and press the header-toggle
         </p>
         <br/>
         <h4>dependency:</h4> 
-        <code>@import "magic/content/navbar";</code>
-        <br/>
-        <br/>
-        <br/>
-        <div class="h3 center_text">
-          <i class="magicons-arrow-right"></i> &nbsp; Smaller your screen to see the Slidebar !! &nbsp; <i class="magicons-arrow-left"></i>
-        </div>
+        <code>@import "magic/content/aside_nav";</code>
+        <code>@import "magic/content/notice";</code>
       </div>
     </div>
   
     
 