Difference between revisions of "Team:Oxford/InitialIdeas"

Line 29: Line 29:
 
     </header>
 
     </header>
  
−
     <section id="about">
+
     <div id="wrapper">
−
      <div class="container">
+
 
−
        <div class="row">
+
        <!-- Sidebar -->
−
          <div class=".col-md-8 .offset-md-2">
+
        <div id="sidebar-wrapper">
−
            <h2>Section 1</h2>
+
            <ul class="sidebar-nav">
−
            <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
+
                <li class="sidebar-brand">
−
            <ul>
+
                    <a href="#">
−
              <li>Clickable nav links that smooth scroll to page sections</li>
+
                        Start Bootstrap
−
              <li>Responsive behavior when clicking nav links perfect for a one page website</li>
+
                    </a>
−
              <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li>
+
                </li>
−
              <li>Minimal custom CSS so you are free to explore your own unique design options</li>
+
                <li>
 +
                    <a href="#">Dashboard</a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Shortcuts</a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Overview</a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Events</a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">About</a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Services</a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Contact</a>
 +
                </li>
 
             </ul>
 
             </ul>
−
          </div>
 
 
         </div>
 
         </div>
−
      </div>
+
        <!-- /#sidebar-wrapper -->
−
    </section>
+
  
−
    <section id="services">
+
        <!-- Page Content -->
−
      <div class="container">
+
        <div id="page-content-wrapper">
−
        <div class="row">
+
            <div class="container-fluid">
−
          <div class=".col-md-8 .offset-md-2 .bg-light">
+
                <h1>Simple Sidebar</h1>
−
            <h2>Section 2</h2>
+
                <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
−
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
+
                <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
−
          </div>
+
                <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
 +
            </div>
 
         </div>
 
         </div>
−
      </div>
+
        <!-- /#page-content-wrapper -->
−
    </section>
+
  
−
     <section id="contact">
+
     </div>
−
      <div class="container">
+
−
        <div class="row">
+
−
          <div class=".col-md-8 .offset-md-2">
+
−
            <h2>Section 3</h2>
+
−
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </section>
+
  
 
     <!-- Footer -->
 
     <!-- Footer -->
Line 81: Line 90:
  
 
     <!-- Bootstrap core JavaScript -->
 
     <!-- Bootstrap core JavaScript -->
−
     <script src="vendor/jquery/jquery.min.js"></script>
+
     <script src="https://2018.igem.org/Team:Oxford/scripts?action=raw&ctype=text/javascript"></script>
−
     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
     <script src="https://2018.igem.org/Team:Oxford/scripts/bootstrapminjs?action=raw&ctype=text/javascript"></script>
  
 
   </body>
 
   </body>
  
 
</html>
 
</html>

Revision as of 11:34, 28 August 2018

Full Width Pics - Start Bootstrap Template

Initial Ideas

Simple Sidebar

This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.

Make sure to keep all page content within the #page-content-wrapper.

Toggle Menu