Difference between revisions of "Team:UCL/James/Description"

Line 5: Line 5:
 
<link rel="stylesheet" type="text/css"
 
<link rel="stylesheet" type="text/css"
 
           href="https://2016.igem.org/Template:UCL/assets/mc-css-topmargin?action=raw&amp;ctype=text/css"/>
 
           href="https://2016.igem.org/Template:UCL/assets/mc-css-topmargin?action=raw&amp;ctype=text/css"/>
 +
 +
<style>
 +
  body {
 +
      position: relative;
 +
  }
 +
 +
.affix {
 +
    top: 150px;
 +
    right: 0px;
 +
}
 +
</style>
 
</head>
 
</head>
  
−
<body data-spy="scroll" data-target="#sidebarNav" data-offset="20">
+
<body data-spy="scroll" data-target="#navbar" data-offset="50">
  
−
<div class="container">
+
<div class="row">
−
      <div class="row">
+
<div id="title">
−
<div class="col-md-12">
+
  <h1>Section 1</h1>
−
<h1>Actual Heading</h1>
+
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 
</div>
 
</div>
 +
 
</div>
 
</div>
−
      <!-- Example row of columns -->
 
−
      <div class="row">
 
−
        <div class="col-md-10">
 
−
          <div id="#section1">
 
−
              <h2>Heading1</h2>
 
−
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
 
−
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
 
−
          </div>
 
−
        <div id="#section2">
 
−
              <h2>Heading2</h2>
 
−
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
 
−
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
 
−
        </div>
 
−
          <div id="#section3">
 
−
              <h2>Heading3</h2>
 
−
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
 
−
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
 
−
          </div>
 
−
        <div id="#section4">
 
−
              <h2>Heading4</h2>
 
−
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
 
−
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
 
−
        </div>
 
  
−
        </div>
+
<div class="row">
  
−
        <nav class="col-md-2" id="sidebarNav">
+
 
−
            <ul class="nav nav-pills nav-stacked">
+
 
−
              <li><a href="#section1">Heading 1</a></li>
+
<div class="col-md-9">
−
              <li><a href="#section2">Heading 2</a></li>
+
<div id="section1" >
−
              <li><a href="#section3">Heading 3</a></li>
+
  <h1>Section 1</h1>
−
               <li><a href="#section4">Heading 4</a></li>
+
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section2">
 +
  <h1>Section 2</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section3">
 +
  <h1>Section 3</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section41">
 +
  <h1>Section 4 Submenu 1</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section42">
 +
  <h1>Section 4 Submenu 2</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
</div>
 +
  <div id="navbar" class="col-md-3" data-spy="affix" data-offset-top="197">
 +
    <ul class="nav nav-pills nav-stacked">
 +
          <li><a href="#section1">Section 1</a></li>
 +
          <li><a href="#section2">Section 2</a></li>
 +
          <li><a href="#section3">Section 3</a></li>
 +
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
               <li><a href="#section41">Section 4-1</a></li>
 +
              <li><a href="#section42">Section 4-2</a></li>
 
             </ul>
 
             </ul>
−
        </nav>
+
          </li>
−
          
+
         </ul>
 
       </div>
 
       </div>
  
  
  
−
        <div id="main-container" class="container-fluid">
+
</div>
 +
 
  
−
            <div class="container-fluid">
 
−
                <div class="row">
 
−
                    <div class="col-md-9">
 
−
                        <div class="section" id="overview">
 
−
                            <div class="slim">
 
−
                                <h2>One</h2>
 
−
                                <p>
 
−
                                    Text here.
 
−
                                </p>
 
−
                            </div>
 
−
                        </div>
 
−
                        <div class="section-spacer"></div>
 
−
                        <div class="section" id="problem">
 
−
                            <div class="slim">
 
−
                                <h2>Two</h2>
 
−
                                <ul>
 
−
                                    <li>List.</li>
 
−
                                    <li>List.</li>
 
−
                                    <li>List.</li>
 
−
                                    <li>List.</li>
 
−
                                    <li>List.</li>
 
−
                                </ul>
 
−
                            </div>
 
−
                        </div>
 
−
                        <div class="section-spacer"></div>
 
−
                        <div class="section" id="antibio">
 
−
                            <div class="slim">
 
−
                                <h2>Three</h2>
 
−
                                <p>
 
−
                                    Text.
 
−
                                </p>
 
−
                                <div class="quote quote-full">
 
−
                                    <p>
 
−
                                        "Quote"
 
−
                                    </p>
 
−
                                    <h3>Joe Bloggs</h3>
 
−
                                </div>
 
−
                                <p>
 
−
                                    Text.
 
−
                                </p>
 
−
                            </div>
 
−
                        </div>
 
−
                        <div class="section-spacer"></div>
 
−
                        <div class="section" id="biofilms">
 
−
                            <div class="slim">
 
−
                                <h2>Four.</h2>
 
−
                                <div class="image image-full">
 
−
                                    <img src="http://www.kidzone.ws/geography/alberta/images/great-horned-owl.jpg"/>
 
−
                                    <p>
 
−
                                        Caption.
 
−
                                    </p>
 
−
                                </div>
 
  
−
                            </div>
+
</body>
−
                        </div>
+
−
                        <div class="section-spacer"></div>
+
−
                        <div class="section" id="solution">
+
−
                            <div class="slim">
+
−
                                <h2>Five</h2>
+
−
                                <p>Text.</p>
+
−
                            </div>
+
−
                            <div id="solution-overview">
+
−
                                <div class="slim">
+
−
                                    <h3>Five (a)</h3>
+
−
                                    <p>
+
−
                                        Text.
+
−
                                    </p>
+
−
                                </div>
+
−
                            </div>
+
−
                            <div id="solution-degrading-biofilm">
+
−
                                <div class="slim">
+
−
                                    <h3>Five (b)</h3>
+
−
                                    <p>Text.</p>
+
−
                                </div>
+
−
                            </div>
+
−
                            <div id="solution-killing-bacteria">
+
−
                                <div class="slim">
+
−
                                    <h3>Five (c)</h3>
+
−
                                    <p>
+
−
                                        Text.
+
−
                                    </p>
+
−
                                    <div id="solution-killing-bacteria-art175">
+
−
                                        <h4>Five (c) (i)</h4>
+
−
                                        <p>
+
−
                                            Text.
+
−
                                        </p>
+
−
                                    </div>
+
−
                                </div>
+
−
                            </div>
+
−
                        </div>
+
−
                        <div class="section-spacer"></div>
+
−
                            <div id="references">
+
−
                                <h2>References</h2>
+
−
                                <ol class="references">
+
−
                                    <li>Reference one.</li>
+
−
                                </ol>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="col-md-3 contents-sidebar">
+
−
                        <ul id="sidebar" class="nav nav-stacked">
+
−
                            <li><a href="#overview">One</a></li>
+
−
                            <li><a href="#problem">Two</a></li>
+
−
                            <li><a href="#antibio">Three</a></li>
+
−
                            <li><a href="#biofilms">Four</a></li>
+
−
                            <li>
+
−
                                <a href="#solution">Five</a>
+
−
                                <ul class="nav nav-stacked">
+
−
                                    <li><a href="#solution-overview">a</a></li>
+
−
                                    <li><a href="#solution-degrading-biofilm">b</a></li>
+
−
                                    <li>
+
−
                                        <a href="#solution-killing-bacteria">c</a>
+
−
                                        <ul class="nav nav-stacked">
+
−
                                            <li><a href="#solution-killing-bacteria-art175">i</a></li>
+
−
                                        </ul>
+
−
                                    </li>
+
−
                                </ul>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <div class="container-fluid">
+
−
                <div class="row" id="foot">
+
−
                    <div class="col-md-12">
+
−
                        <ul>
+
−
                            <li><a href="https://www.google.com"><i class="fa fa-twitter"></i></a></li>
+
−
                            <li><a href="https://www.google.com"><i class="fa fa-facebook"></i></a></li>
+
−
                            <li><a href="https://www.google.com"><i class="fa fa-youtube"></i></a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </div>
+
−
                    <div class="col-md-12">
+
−
                        <p>
+
−
                            Footer.
+
−
                        </p>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
    </body>
+
 
</html>
 
</html>

Revision as of 20:46, 17 August 2016

Section 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 3

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 4 Submenu 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 4 Submenu 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!