JimmyZhong (Talk | contribs) |
|||
Line 1: | Line 1: | ||
{{iTesla-SoundBio}} | {{iTesla-SoundBio}} | ||
+ | |||
<html> | <html> | ||
− | < | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
− | < | + | <script> |
− | <script> | + | $(document).ready(function(){ |
− | + | // Add smooth scrolling to all links | |
+ | $("a").on('click', function(event) { | ||
− | + | // Make sure this.hash has a value before overriding default behavior | |
− | + | if (this.hash !== "") { | |
− | + | // Prevent default anchor click behavior | |
+ | event.preventDefault(); | ||
− | + | // Store hash | |
+ | var hash = this.hash; | ||
− | + | // Using jQuery's animate() method to add smooth page scroll | |
− | + | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area | |
− | + | $('html, body').animate({ | |
− | + | scrollTop: $(hash).offset().top | |
− | + | }, 800, function(){ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | // Add hash (#) to URL when done scrolling (default click behavior) | |
− | + | window.location.hash = hash; | |
− | + | }); | |
− | + | } // End if | |
− | + | }); | |
− | + | }); | |
− | + | </script> | |
− | + | <style> | |
+ | body { | ||
+ | font-family: "Lato", sans-serif; | ||
} | } | ||
− | + | .sidenav { | |
− | + | height: 100%; | |
− | z-index: | + | width: 180px; |
− | + | position: fixed; | |
+ | z-index: 1; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | background-color: #111; | ||
+ | overflow-x: hidden; | ||
+ | padding-top: 100px; | ||
} | } | ||
− | + | .sidenav a { | |
− | + | padding-top: 5px 5px 5px 5px; | |
− | + | text-decoration: none; | |
− | text- | + | font-size: 20px; |
− | + | color: #818181; | |
− | + | display: block; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .sidenav a:hover { | |
− | + | color: #f1f1f1; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .main { | |
− | width: | + | margin-left: 180px; /* Same as the width of the sidenav */ |
− | + | padding: 0px 10px; | |
− | + | font-family: arial; | |
+ | font-size: 20px; | ||
+ | padding: 30px | ||
} | } | ||
+ | @media screen and (max-height: 450px) { | ||
+ | .sidenav {padding-top: 15px;} | ||
+ | .sidenav a {font-size: 18px;} | ||
+ | } | ||
+ | </style> | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="sidenav"> | <div class="sidenav"> | ||
− | <a href=" | + | <a href="https://2018.igem.org/Team:iTesla-SoundBio">Main Page</a> |
<br> | <br> | ||
− | <a href= | + | <a href=#top>Top</a> |
<br> | <br> | ||
− | <a href= | + | <a href=#Description><img src="https://static.igem.org/mediawiki/2018/3/3c/T--iTesla-SoundBio--ProjectDescription.png" alt="Description" style="width:100%"></a> |
<br> | <br> | ||
− | <a href= | + | <a href=#What Are Horseshoe Crabs><img src="https://static.igem.org/mediawiki/2018/2/24/T--iTesla-SoundBio--WhatAreThey.png" alt="Education" style="width:100%"></a> |
<br> | <br> | ||
− | <a href= | + | <a href=#Why Are Horseshoe Crabs Bled><img src="https://static.igem.org/mediawiki/2018/2/2d/T--iTesla-SoundBio--WhyBled.png" alt="Design" style="width:100%"></a> |
<br> | <br> | ||
+ | <a href=#What Is LAL and Factor C><img src="https://static.igem.org/mediawiki/2018/9/9e/T--iTesla-SoundBio--LAL.png" alt="Design" style="width:100%"></a> | ||
</div> | </div> | ||
− | <div class=" | + | <script> |
+ | $("#title").text("Human Practices") | ||
+ | </script> | ||
+ | <div class="main"> | ||
+ | <div id="top"></div> | ||
+ | <div id="Research"> | ||
+ | <h1><strong>Research</strong></h1> | ||
</div> | </div> | ||
− | + | <div id="Education"> | |
− | <div id=" | + | <h1><strong>Education</strong></h1> |
− | < | + | |
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | + | <div id="Design"> | |
− | <div | + | <h1><strong>Design</strong></h1> |
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | </html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + |
Revision as of 01:05, 7 October 2018