Line 1: | Line 1: | ||
− | {{TAS Taipei/CSS2}} | + | {{TAS Taipei/CSS2}} {{TAS Taipei/Bootstrap}} {{TAS Taipei/BootstrapJS}} |
<html lang="en"> | <html lang="en"> | ||
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/ | + | <!-- |
+ | <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 24: | ||
} | } | ||
− | |||
.cv { | .cv { | ||
box-shadow: 100px 0px 0 0px #f9cdad; | box-shadow: 100px 0px 0 0px #f9cdad; | ||
} | } | ||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
− | <div class=" | + | <div class="return"> |
− | <div class=" | + | <h1>X</h1> |
− | < | + | </div> |
− | + | <div class="yellow"> | |
− | + | <div class="box right"> | |
− | </ | + | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Background" id="project"> |
− | </ | + | <img src="https://static.igem.org/mediawiki/2017/9/92/Project.png" id="dna"> |
− | + | </div> | |
− | + | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary" id="experiment"> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/9/9c/Exp.png" id="dna"> |
− | + | </div> | |
− | + | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Model" id="modeling"> | |
− | </ | + | <img src="https://static.igem.org/mediawiki/2017/3/3c/Modeling.png" id="dna"> |
− | </ | + | </div> |
+ | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Prototype" id="prototype"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/3/31/Prototype.png" id="dna"> | ||
+ | </div> | ||
+ | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices" id="policy"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/5/55/Hp2.png" id="dna"> | ||
+ | </div> | ||
+ | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Safety" id="biosafety"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/b/b9/Biosafety.png" id="dna"> | ||
+ | </div> | ||
+ | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Team" id="about"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/a/a3/About_us1.png" id="dna"> | ||
+ | </div> | ||
+ | <div class="box2 right" href="https://2017.igem.org/Team:TAS_Taipei/Attributions" id="acknowledgments"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/8/8d/Attributions.png" id="dna"> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="blue"> |
− | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Background" id="project"> | |
− | + | <h1>Project</h1> | |
− | + | </div> | |
− | < | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Experimental_Summary" id="experiment"> |
− | + | <h1>Experiment</h1> | |
− | + | </div> | |
− | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Model" id="modeling"> | |
− | + | <h1>Modeling</h1> | |
− | + | </div> | |
− | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Prototype" id="prototype"> | |
− | < | + | <h1>Prototype</h1> |
− | + | </div> | |
− | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Human_Practices" id="policy"> | |
− | + | <h1>Human Practice</h1> | |
− | + | </div> | |
− | < | + | <div class="box3 left" href="https://static.igem.org/mediawiki/2017/b/b9/Biosafety.png" id="biosafety"> |
− | + | <h1>Biosafety</h1> | |
− | + | </div> | |
− | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Team" id="about"> | |
− | + | <h1>About Us</h1> | |
− | + | </div> | |
− | + | <div class="box3 left" href="https://2017.igem.org/Team:TAS_Taipei/Attributions" id="acknowledgments"> | |
− | + | <h1>Attributions</h1> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
</div> | </div> | ||
Line 87: | Line 92: | ||
<img src="https://static.igem.org/mediawiki/2017/0/0d/5home.svg" alt="Home" id="home" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei';" style="cursor: pointer;"> | <img src="https://static.igem.org/mediawiki/2017/0/0d/5home.svg" alt="Home" id="home" onclick="location.href='https://2017.igem.org/Team:TAS_Taipei';" style="cursor: pointer;"> | ||
</box> | </box> | ||
+ | <!--全版面大型看板開始--> | ||
+ | <div class="jumbotron"> | ||
+ | <div class="container"> | ||
+ | <h1>Modeling</h1> | ||
+ | <h4>It’s not only what happens in the lab, but also what happens in our community.</h4> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--全版面大型看板結尾--> | ||
<div class="cv"> | <div class="cv"> | ||
<!-- header --> | <!-- header --> | ||
<header> | <header> | ||
− | <h1 class="name"> | + | <h1 class="name">MODELING SUMMARY</h1> |
− | <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi quos aliquam quod sed, eum. Recusandae quia eligendi, deleniti perspiciatis perferendis aut beatae nesciunt voluptatum, molestias veritatis vitae, minus similique. Ducimus beatae ipsam sequi aspernatur amet est, minus eligendi magnam! Ut aut maiores, commodi tempore molestias vel odio nulla! Perspiciatis quo, animi ducimus neque labore cupiditate illum illo odit harum beatae dolore eius fuga consequatur dicta, hic architecto placeat pariatur? Saepe pariatur sequi beatae quis quos, aut, impedit rem assumenda cupiditate ratione a est, quae dolorem nisi et? Perspiciatis atque aperiam pariatur, aut, et aliquam adipisci iusto optio nulla ratione odio!</h4> | + | <h4 class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi quos aliquam quod sed, eum. Recusandae quia eligendi, deleniti perspiciatis perferendis aut beatae nesciunt voluptatum, molestias veritatis vitae, minus similique. Ducimus beatae ipsam sequi aspernatur amet est, minus eligendi magnam! Ut aut maiores, commodi tempore molestias vel odio nulla! Perspiciatis quo, animi ducimus neque labore cupiditate illum illo odit harum beatae dolore eius fuga consequatur dicta, hic architecto placeat pariatur? Saepe pariatur sequi beatae quis quos, aut, impedit rem assumenda cupiditate ratione a est, quae dolorem nisi et? Perspiciatis atque aperiam pariatur, aut, et aliquam adipisci iusto optio nulla ratione odio!</h4> |
+ | <div class="row"> | ||
+ | <div class="this_border"> | ||
+ | </div> | ||
+ | </div> | ||
</header> | </header> | ||
<h1 id="title2">RESEARCH</h1> | <h1 id="title2">RESEARCH</h1> | ||
Line 110: | Line 127: | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
<h1 class="section-title">Professor Roam</h1> | <h1 class="section-title">Professor Roam</h1> | ||
+ | <h4 class="para"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div class="job" id="top"> | ||
+ | <h1 class="section-title">Dr. Barnard</h1> | ||
+ | <h4 class="para"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div class="job" id="top"> | ||
+ | <h1 class="section-title">Bioethics Panel</h1> | ||
+ | <h4 class="para"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div class="job" id="top"> | ||
+ | <h1 class="section-title">Survey Results</h1> | ||
+ | <h4 class="para"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div class="job" id="top"> | ||
+ | <h1 class="section-title">Nanoparticle Waste Collectors</h1> | ||
+ | <h4 class="para"> | ||
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | ||
+ | </h4> | ||
+ | </div> | ||
+ | <div class="job" id="top"> | ||
+ | <h1 class="section-title">Tap Water Musuem</h1> | ||
<h4 class="para"> | <h4 class="para"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis soluta aspernatur, aut pariatur debitis odio nemo autem delectus, accusantium nihil hic praesentium nesciunt. Similique velit illum sunt, cupiditate eaque dolores consequuntur, corrupti, soluta impedit aliquam ex? Hic nisi cumque dolore quidem placeat quo impedit ab soluta mollitia! Ratione, veniam. Quasi! | ||
Line 126: | Line 173: | ||
<div class="experiences"> | <div class="experiences"> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">Kindergarten Science Experiments</h1> |
<h4 class="para"> | <h4 class="para"> | ||
− | + | Our iGEM team also hosted several kindergarten sessions to teach kindergarteners the power of observation and the basics of science. For example, we taught them how to use microscopes to look at bills and coins, and how to use refraction lenses to see that white light is made up of various colours. | |
</h4> | </h4> | ||
+ | </div> | ||
+ | <div class="image_container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/4/47/Group_Pic.jpeg" alt="test" id="group"> | ||
+ | <h4 class="subtitle"><b>Figure 2-1 Group Pic:</b> perception without comprehension is a dangerous combination.</h4> | ||
+ | </div> | ||
+ | <div class="image_container" id="kt"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/5/57/Alvin_Steph.jpeg" alt="test" id="group"> | ||
+ | <h4 class="subtitle"><b>Figure 2-2 Alvin+Steph:</b> Two seniors, both alike in dignity, In fair kindergarten, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. </h4> | ||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">7th Grade Introduction to Synthetic Biology</h1> |
<h4 class="para"> | <h4 class="para"> | ||
− | + | We held several teaching sessions, where we introduced iGEM and the basics of synthetic biology, such as transcription and translation, to young scientists in seventh grade. They learned how to use micropipettes, as well as how to load and run dyes through an agarose gel. We also gave students different real world problems. Using paper biobrick parts, students put together constructs that would solve the given problems. | |
</h4> | </h4> | ||
+ | </div> | ||
+ | <div class="image_container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/e/e1/T-TAS_Taipei--HP-7-1.jpg" alt="test" id="group"> | ||
+ | <!-- <h4 class="subtitle"><b>Figure 1-1 Paul:</b> perception without comprehension is a dangerous combination.</h4> --> | ||
+ | </div> | ||
+ | <div class="image_container" id="kt"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/d/dc/T-TAS_Taipei--HP-7-2.jpg" alt="test" id="group"> | ||
+ | <!-- <h4 class="subtitle"><b>Figure 1-2 KT:</b> Two seniors, both alike in dignity, In fair kindergarten, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. </h4> --> | ||
+ | </div> | ||
+ | <div class="image_container"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/3/38/T--TAS_Taipei--HP_Jumbo.jpg" alt="test" id="full-img"> | ||
+ | <!-- <h4 class="subtitle"><b>Figure 1-2 KT:</b> Two seniors, both alike in dignity, In fair kindergarten, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. </h4> --> | ||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
Line 144: | Line 211: | ||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">Spring Fair</h1> |
<h4 class="para"> | <h4 class="para"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | ||
Line 150: | Line 217: | ||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">Survey Day</h1> |
<h4 class="para"> | <h4 class="para"> | ||
− | + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | |
</h4> | </h4> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">NCTU Conference</h1> |
<h4 class="para"> | <h4 class="para"> | ||
− | + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | |
</h4> | </h4> | ||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">Collaboration with other teams</h1> |
<h4 class="para"> | <h4 class="para"> | ||
− | + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | |
</h4> | </h4> | ||
</div> | </div> | ||
<div class="job" id="top"> | <div class="job" id="top"> | ||
− | <h1 class="section-title"> | + | <h1 class="section-title">Social Media</h1> |
<h4 class="para"> | <h4 class="para"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officia sit amet omnis deleniti veritatis ut. Placeat reprehenderit quas in non a quidem vitae aspernatur, nihil vero pariatur rerum nobis est eum, minima aliquid neque quaerat quibusdam quis. Repellendus neque voluptas reiciendis, id dolorum, asperiores dolores debitis libero autem quibusdam. | ||
Line 200: | Line 259: | ||
</div> | </div> | ||
</section> | </section> | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
+ | <script> | ||
+ | $(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'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('.yellow').mouseleave(function() { | ||
+ | var windowsize = $(window).width(); | ||
+ | if (windowsize > 1020) { | ||
+ | //if the window is greater than 1020px wide then hover | ||
+ | $('.yellow').removeClass('active'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | $('.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'); | ||
+ | } 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'); | ||
+ | } 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'); | ||
+ | }) | ||
+ | }) | ||
+ | |||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 08:14, 28 June 2017