Line 6: | Line 6: | ||
<title>About Us</title> | <title>About Us</title> | ||
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> | ||
+ | <!-- <link rel="stylesheet" href="https://2017.igem.org/Template:TAS_Taipei/Bootstrap"> <link rel="stylesheet" href="https://2017.igem.org/Template:TAS_Taipei/JqueryJS"> <script src="https://2017.igem.org/Template:TAS_Taipei/BootstrapJS"></script> --> | ||
<style type='text/css'> | <style type='text/css'> | ||
#top_title, | #top_title, | ||
Line 20: | Line 21: | ||
.cv { | .cv { | ||
− | box-shadow: 100px 0px 0 0px # | + | box-shadow: 100px 0px 0 0px #FBB5A4; |
+ | } | ||
+ | |||
+ | .this_border { | ||
+ | background-color: #FBB5A4; | ||
} | } | ||
Line 32: | Line 37: | ||
<div class="yellow"> | <div class="yellow"> | ||
<div class="box right"> | <div class="box right"> | ||
− | <div class="box2 right project" href="https://2017.igem.org/Team:TAS_Taipei/Background"> | + | <div class="box2 right project" href="https://2017.igem.org/Team:TAS_Taipei/Background"> <img src="https://static.igem.org/mediawiki/2017/0/00/T--TAS_Taipei--Project_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Project</h6> | <h6 class="navCap">Project</h6> | ||
</div> | </div> | ||
− | <div class="box2 right experiment" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary"> | + | <div class="box2 right experiment" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary"> <img src="https://static.igem.org/mediawiki/2017/b/b0/T--TAS_Taipei--Exp_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Experiments</h6> | <h6 class="navCap">Experiments</h6> | ||
</div> | </div> | ||
− | <div class="box2 right modeling" href="https://2017.igem.org/Team:TAS_Taipei/Model"> | + | <div class="box2 right modeling" href="https://2017.igem.org/Team:TAS_Taipei/Model"> <img src="https://static.igem.org/mediawiki/2017/b/be/T--TAS_Taipei--Modeling_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Modeling</h6> | <h6 class="navCap">Modeling</h6> | ||
</div> | </div> | ||
− | <div class="box2 right prototype" href="https://2017.igem.org/Team:TAS_Taipei/Applied_Design"> | + | <div class="box2 right prototype" href="https://2017.igem.org/Team:TAS_Taipei/Applied_Design"> <img src="https://static.igem.org/mediawiki/2017/2/2e/T--TAS_Taipei--Prototype_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Prototype</h6> | <h6 class="navCap">Prototype</h6> | ||
</div> | </div> | ||
− | <div class="box2 right policy" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices"> | + | <div class="box2 right policy" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices"> <img src="https://static.igem.org/mediawiki/2017/4/42/T--TAS_Taipei--HP2_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Human Practices</h6> | <h6 class="navCap">Human Practices</h6> | ||
</div> | </div> | ||
− | <div class="box2 right biosafety" href="https://2017.igem.org/Team:TAS_Taipei/Safety"> | + | <div class="box2 right biosafety" href="https://2017.igem.org/Team:TAS_Taipei/Safety"> <img src="https://static.igem.org/mediawiki/2017/b/b8/T--TAS_Taipei--Biosafety_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Safety</h6> | <h6 class="navCap">Safety</h6> | ||
</div> | </div> | ||
− | <div class="box2 right about" href="https://2017.igem.org/Team:TAS_Taipei/Team"> | + | <div class="box2 right about" href="https://2017.igem.org/Team:TAS_Taipei/Team"> <img src="https://static.igem.org/mediawiki/2017/1/1a/T--TAS_Taipei--About_Us_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">About Us</h6> | <h6 class="navCap">About Us</h6> | ||
</div> | </div> | ||
− | <div class="box2 right acknowledgments" href="https://2017.igem.org/Team:TAS_Taipei/Attributions"> | + | <div class="box2 right acknowledgments" href="https://2017.igem.org/Team:TAS_Taipei/Attributions"> <img src="https://static.igem.org/mediawiki/2017/5/52/T--TAS_Taipei--Attributions_C.png" id="dna"> |
− | + | ||
<h6 class="navCap">Attributions</h6> | <h6 class="navCap">Attributions</h6> | ||
</div> | </div> | ||
Line 92: | Line 89: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <box class="home"> | + | <box class="home"> <img src="https://static.igem.org/mediawiki/2017/6/6c/T--TAS_Taipei--4home.svg" alt="Home" id="home" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei';" style="cursor: pointer;"> </box> |
− | + | <!--全版面大型看板開始--> | |
− | </ | + | <div class="jumbotron" id="prototype-jumbo"> |
− | <div class="cv"> | + | <div class="container"> |
+ | <h1>Prototype</h1> | ||
+ | <h4>Design, Build, and Test: Putting our project to work</h4> | ||
+ | </div> <a href="#cv"><img src="https://static.igem.org/mediawiki/2017/4/4a/T--TAS_Taipei--Chevron_500px_200ppi.png" alt="test" id="chevron"></a> </div> | ||
+ | <!--全版面大型看板結尾--> | ||
+ | <div class="cv" id="cv"> | ||
<div class="row"> | <div class="row"> | ||
− | <nav class="pageNav col-lg- | + | <nav class="pageNav col-lg-1_5"> |
<ul class="nav"> | <ul class="nav"> | ||
− | <li> | + | <li> <a href="#Notebook" class="pageNavBig">Notebook</a> </li> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
</nav> | </nav> | ||
− | <div class="white col-lg-2"> | + | <div class="white col-lg-2"> hi </div> |
− | + | ||
− | + | ||
<div class="col-lg-10"> | <div class="col-lg-10"> | ||
+ | <!-- header --> | ||
<header> | <header> | ||
− | <div class="row"> | + | <div class="row" id="Notebook"> |
− | <h1 class="name">NOTEBOOK</h1> | + | <h1 class="name col-lg-12">NOTEBOOK</h1> |
</div> | </div> | ||
− | <div class="row this_border"></div>< | + | <div class="row this_border"></div> |
+ | </header> | ||
+ | <section class="main"> | ||
<div class="row"> | <div class="row"> | ||
<a href="https://static.igem.org/mediawiki/2017/8/86/T--TAS_Taipei--Protocols.pdf" type="button" class="btn btn-info col-lg-4"> | <a href="https://static.igem.org/mediawiki/2017/8/86/T--TAS_Taipei--Protocols.pdf" type="button" class="btn btn-info col-lg-4"> | ||
− | + | Click here to see Tom Brown’s full response | |
</a> | </a> | ||
− | </div> | + | </div><br> |
− | </ | + | </section> |
</div> | </div> | ||
</div> | </div> | ||
− | + | </div> | |
− | + | </div> | |
− | + | <script> | |
− | + | $("a").on('click', function(event) { | |
− | + | if (this.hash !== "") { | |
− | + | event.preventDefault(); | |
− | + | var hash = this.hash; | |
− | + | $('html, body').animate({ | |
− | + | scrollTop: $(hash).offset().top | |
− | + | }, 300, function() { | |
− | + | // Add hash (#) to URL when done scrolling (default click behavior) | |
+ | window.location.hash = hash; | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | $(function() { | ||
+ | $('.yellow').removeClass('active'); | ||
+ | $('.yellow').mouseenter(function() { | ||
+ | var windowsize = $(window).width(); | ||
+ | if (windowsize > 1020) { | ||
+ | //if the window is greater than 1020px wide then hover | ||
+ | $('.yellow').addClass('active'); | ||
} | } | ||
+ | $('.navCap').addClass('deactive'); | ||
}); | }); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | $('.yellow').mouseleave(function() { | |
− | + | var windowsize = $(window).width(); | |
− | + | if (windowsize > 1020) { | |
− | + | //if the window is greater than 1020px wide then hover | |
− | + | $('.yellow').removeClass('active'); | |
− | + | } | |
− | + | $('.navCap').removeClass('deactive'); | |
− | + | }); | |
− | + | $('.box2').click(function() { | |
− | + | var windowsize = $(window).width(); | |
− | + | if (windowsize < 1020) { | |
− | + | //if the window is less than 1020px wide then turn on click for mobile. | |
− | + | if ($('.yellow').hasClass('active')) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
window.location = $(this).attr('href'); | window.location = $(this).attr('href'); | ||
+ | } else { | ||
+ | $('.yellow').addClass('active'); | ||
+ | $('.return').addClass('active'); | ||
+ | $('.home').addClass('deactive'); | ||
} | } | ||
+ | } else { | ||
+ | window.location = $(this).attr('href'); | ||
+ | } | ||
− | + | }) | |
− | + | $('.box3').click(function() { | |
− | + | var windowsize = $(window).width(); | |
− | + | if (windowsize < 1020) { | |
− | + | //if the window is less than 1020px wide then turn on click for mobile. | |
− | + | if ($('.yellow').hasClass('active')) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
window.location = $(this).attr('href'); | window.location = $(this).attr('href'); | ||
+ | } else { | ||
+ | $('.yellow').addClass('active'); | ||
+ | $('.return').addClass('active'); | ||
+ | $('.home').addClass('deactive'); | ||
} | } | ||
− | }) | + | } else { |
+ | window.location = $(this).attr('href'); | ||
+ | } | ||
+ | }) | ||
− | + | $('.return').click(function() { | |
− | + | $('.yellow').removeClass('active'); | |
− | + | $('.return').removeClass('active'); | |
− | + | $('.home').removeClass('deactive'); | |
− | + | }) | |
− | + | $('.cv').click(function() { | |
− | + | $('.yellow').removeClass('active'); | |
− | + | $('.return').removeClass('active'); | |
− | + | $('.home').removeClass('deactive'); | |
− | + | }) | |
− | + | $('.jumbotron').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | }) | + | $('.prototype').removeClass('active'); |
+ | $('.biosafety').removeClass('active'); | ||
+ | $('.about').removeClass('active'); | ||
+ | $('.policy').removeClass('active'); | ||
+ | $('.acknowledgments').removeClass('active'); | ||
+ | }); | ||
− | + | $('.cv').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.project').mouseenter(function() { | |
− | + | $('.project').addClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.experiment').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').addClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.modeling').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').addClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.prototype').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').addClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.biosafety').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').addClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.about').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').addClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.policy').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').addClass('active'); | |
− | + | $('.acknowledgments').removeClass('active'); | |
− | + | }); | |
− | + | $('.acknowledgments').mouseenter(function() { | |
− | + | $('.project').removeClass('active'); | |
− | + | $('.experiment').removeClass('active'); | |
− | + | $('.modeling').removeClass('active'); | |
− | + | $('.prototype').removeClass('active'); | |
− | + | $('.biosafety').removeClass('active'); | |
− | + | $('.about').removeClass('active'); | |
− | + | $('.policy').removeClass('active'); | |
− | + | $('.acknowledgments').addClass('active'); | |
− | + | }); | |
− | + | }) | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </script> | |
</body> | </body> | ||
</html> | </html> |
Revision as of 08:23, 20 October 2017
X
Project
Experiments
Modeling
Prototype
Human Practices
Safety
About Us
Attributions
Project
Experiment
Modeling
Prototype
Human Practice
Biosafety
About Us
Attributions
hi