Sophie006liu (Talk | contribs) (Created page with "h i m y n a m e is...") |
JimmyZhong (Talk | contribs) |
||
(27 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{iTesla-SoundBio}} | |
− | + | ||
− | + | <html> | |
− | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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%; | ||
+ | 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; | ||
+ | font-size: 20px; | ||
+ | color: #818181; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .sidenav a:hover { | ||
+ | color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | .main { | ||
+ | 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"> | ||
+ | <a href="https://2018.igem.org/Team:iTesla-SoundBio">Main Page</a> | ||
+ | <br> | ||
+ | <a href=#top>Top</a> | ||
+ | <br> | ||
+ | <a href=#Research><img src="https://static.igem.org/mediawiki/2018/d/d8/T--iTesla-Soundbio--Researchpic.png" alt="Research" style="width:100%"></a> | ||
+ | <br> | ||
+ | <a href=#Education><img src="https://static.igem.org/mediawiki/2018/6/6b/T--itesla-soundbio--educationpic.png" alt="Education" style="width:100%"></a> | ||
+ | <br> | ||
+ | <a href=#Design><img src="https://static.igem.org/mediawiki/2018/3/3e/T--iTesla-Soundbio--Designpic.png" alt="Design" style="width:100%"></a> | ||
+ | </div> | ||
+ | <script> | ||
+ | $("#title").text("Human Practices") | ||
+ | </script> | ||
+ | <div class="main"> | ||
+ | <div id="top"></div> | ||
+ | <div id="Research"> | ||
+ | <h1><strong>Research</strong></h1> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div id="Education"> | ||
+ | <h1><strong>Education</strong></h1> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div id="Design"> | ||
+ | <h1><strong>Design</strong></h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | </html> |
Latest revision as of 00:57, 23 September 2018