Template:Team:Northwestern/Template/nav

From 2014.igem.org

(Difference between revisions)
 
(17 intermediate revisions not shown)
Line 16: Line 16:
/* Carousel base class */
/* Carousel base class */
.carousel {
.carousel {
-
   height: 500px;
+
   height: 600px;
   margin-bottom: 60px;
   margin-bottom: 60px;
}
}
Line 26: Line 26:
/* Declare heights because of positioning of img element */
/* Declare heights because of positioning of img element */
.carousel .item {
.carousel .item {
-
   height: 500px;
+
   height: 600px;
   background-color: #777;
   background-color: #777;
}
}
Line 34: Line 34:
   left: 0;
   left: 0;
   min-width: 100%;
   min-width: 100%;
-
   height: 500px;
+
   height: 600px;
}
}
Line 59: Line 59:
                
                
-
                <li><a href="https://2014.igem.org/Team:Northwestern/Project">Project</a></li>
+
            <li class="dropdown">
-
                <li><a href="https://2014.igem.org/Team:Northwestern/Team">Team</a></li>
+
          <a href="https://2014.igem.org/Team:Northwestern/Project" class="dropdown-toggle" data-toggle="dropdown">Project <span class="caret"></span></a>
 +
 
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:Northwestern/Project">Overview</a></li>
 +
            <li class="divider"></li>
 +
            <li><a href="https://2014.igem.org/Team:Northwestern/Growth">Cultures</a></li>
 +
            <li><a href="https://2014.igem.org/Team:Northwestern/CFPS">CFPS</a></li>
 +
            <li><a href="https://2014.igem.org/Team:Northwestern/parts">Part submitted</a></li>
 +
          </ul>
 +
        </li>
 +
<li><a href="https://2014.igem.org/Team:Northwestern/Team">Team</a></li>
                 <li><a href="https://2014.igem.org/Team:Northwestern/Safety">Safety</a></li>
                 <li><a href="https://2014.igem.org/Team:Northwestern/Safety">Safety</a></li>
                 <li><a href="https://2014.igem.org/Team:Northwestern/Notebook">Notebook</a></li>
                 <li><a href="https://2014.igem.org/Team:Northwestern/Notebook">Notebook</a></li>
-
                 <li><a href="https://2014.igem.org/Team:Northwestern/Human_Practice">Protocols</a></li>
+
                 <li><a href="https://2014.igem.org/Team:Northwestern/Protocols">Protocols</a></li>
                 <li><a href="https://2014.igem.org/Team:Northwestern/Modeling">Modeling</a></li>
                 <li><a href="https://2014.igem.org/Team:Northwestern/Modeling">Modeling</a></li>
-
                 <li class="dropdown">
+
                  
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice<span class="caret"></span></a>
+
                     <li><a href="https://2014.igem.org/Team:Northwestern/Human_Practice">Outreach Projects</a></li>
-
                  <ul class="dropdown-menu" role="menu">
+
 
-
                     <li><a href="#">Outreach Project 1</a></li>
+
-
                    <li><a href="#">Outreach Project 2</a></li>
+
-
                    <li><a href="#">Survey Data</a></li>
+
-
                    <li class="divider"></li>
+
-
                    <li class="dropdown-header">More</li>
+
-
                    <li><a href="#">Separated link</a></li>
+
-
                    <li><a href="#">One more separated link</a></li>
+
-
                  </ul>
+
-
                </li>
+
               </ul>
               </ul>
Line 99: Line 100:
           <div class="container">
           <div class="container">
             <div class="carousel-caption">
             <div class="carousel-caption">
-
              <h1>Example headline.</h1>
+
        <p>Outreach: teaching high schoolers about synthetic biology</p>
-
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
+
               <p><a class="btn btn-sm btn-primary" href="https://2014.igem.org/Team:Northwestern/Human_Practice" role="button">More on this...</a></p>
-
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
+
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
         <div class="item">
         <div class="item">
-
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
+
           <img src="https://static.igem.org/mediawiki/2014/f/f1/IMG_5391.jpg" alt="Second slide">
           <div class="container">
           <div class="container">
             <div class="carousel-caption">
             <div class="carousel-caption">
-
              <h1>Another example headline.</h1>
+
 
-
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
               <p>David loves to run gels!</p>
-
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
+
         
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
         <div class="item">
         <div class="item">
-
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
+
           <img src="https://static.igem.org/mediawiki/2014/6/6d/IMG_5400.jpg" alt="3">
           <div class="container">
           <div class="container">
             <div class="carousel-caption">
             <div class="carousel-caption">
-
              <h1>One more for good measure.</h1>
+
            <p>After another successful presentation session</p>
-
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
-
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
+
             </div>
             </div>
           </div>
           </div>
Line 129: Line 127:
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
     </div><!-- /.carousel -->
     </div><!-- /.carousel -->
-
 
</body>
</body>
</html>
</html>

Latest revision as of 23:35, 17 October 2014

Dropdown menu from bootstrap