Line 1: | Line 1: | ||
{{HZAU-China}} | {{HZAU-China}} | ||
<html> | <html> | ||
− | <style> | + | |
− | + | <head> | |
− | + | <title></title> | |
+ | <meta charset="UTF-8"> | ||
+ | <style> | ||
+ | |||
+ | .right-photo{ | ||
+ | width: 320px; | ||
+ | float: right; | ||
+ | border-left: 1px solid #F2F2F2; | ||
+ | padding: 0 20px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .left-photo{ | ||
+ | width: 320px; | ||
+ | float: left; | ||
+ | border-left: 1px solid #F2F2F2; | ||
+ | padding: 0 20px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #portrait_container { | ||
+ | border-right: 1px solid white; | ||
} | } | ||
+ | #portrait_container img { | ||
+ | padding: 5px; | ||
+ | transition: 0.2s ease; | ||
+ | } | ||
+ | #portrait_container img:hover { | ||
+ | cursor: pointer; | ||
+ | -webkit-transform: scale(1.3); | ||
+ | } | ||
+ | #portrait_container > .row { | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | width: 90px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
+ | |||
+ | <script>localStorage.clear();</script> | ||
+ | <script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | if(document.domain === "2015.igem.org") | ||
+ | setTimeout(function() { | ||
+ | $("style:eq(0)").remove(); | ||
+ | }, 500); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | var bio_data = [ | ||
+ | {"name":"xiaoxueba","photo_url":"https://static.igem.org/mediawiki/2016/0/02/T--HZAU-China--background_element.png","question_1":"my name is chengbochen","question_2":"i am xiaoxueba!"}, | ||
+ | {"name":"name1","photo_url":"https://static.igem.org/mediawiki/2015/2/2f/DLiu.JPG","question_1":"","question_2":""}, | ||
+ | {"name":"name2","photo_url":"https://static.igem.org/mediawiki/2015/8/8e/LYim.JPG","question_1":"","question_2":""}, | ||
+ | {"name":"name3","photo_url":"https://static.igem.org/mediawiki/2015/8/8e/LYim.JPG","question_1":"","question_2":""}, | ||
+ | {"name":"name4","photo_url":"https://static.igem.org/mediawiki/2015/8/8e/LYim.JPG","question_1":"","question_2":""} | ||
+ | ]; | ||
+ | |||
+ | $('#portrait_container img').click(function() { | ||
+ | index = $(this).data('index'); | ||
+ | |||
+ | $("#spotlight_question_1 p").show(); | ||
+ | $("#spotlight_question_2 p").show(); | ||
+ | $("#spotlight_question_3 p").show(); | ||
+ | $("#spotlight_image").show(); | ||
+ | $("#spotlight_name").show(); | ||
+ | $("#spotlight_question_intro").hide(); | ||
+ | $("#spotlight_question_1").removeClass('intro_large'); | ||
+ | $("#spotlight_question_2").removeClass('intro_large'); | ||
+ | $("#spotlight_question_3").removeClass('intro_large'); | ||
+ | |||
+ | $("#spotlight_name").html(bio_data[index]["name"]); | ||
+ | $("#spotlight_question_1 p").html(bio_data[index]["question_1"]); | ||
+ | $("#spotlight_question_2 p").html(bio_data[index]["question_2"]); | ||
+ | $("#spotlight_image").attr('src', bio_data[index]["photo_url"]); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | </head> | ||
+ | |||
+ | |||
<body> | <body> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | |
+ | |||
+ | <div> | ||
+ | <div id="portrait_container"class="left-photo"> | ||
+ | <div > | ||
+ | <img data-index='0' src="https://static.igem.org/mediawiki/2016/0/02/T--HZAU-China--background_element.png"> | ||
+ | <img data-index='1' src="https://static.igem.org/mediawiki/2015/e/e0/BTseng.JPG"> | ||
+ | <img data-index='2' src="https://static.igem.org/mediawiki/2015/b/b4/AWiggins.JPG"> | ||
+ | <img data-index='3' src="https://static.igem.org/mediawiki/2015/2/25/JChuang.JPG"> | ||
+ | <img data-index='4' src="https://static.igem.org/mediawiki/2015/2/2f/DLiu.JPG"> | ||
+ | <img data-index='5' src="https://static.igem.org/mediawiki/2015/8/8e/LYim.JPG"> | ||
+ | </div> | ||
+ | <div > | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id='member_spotlight' class="right-photo"> | ||
+ | <div > | ||
+ | <div> | ||
+ | <div > | ||
+ | <img id='spotlight_image' src="https://static.igem.org/mediawiki/2014hs/a/ae/Chris_s.png" style='display:none;width:70%;margin-left:15%;'> | ||
+ | </div> | ||
+ | <div > | ||
+ | <h3 id='spotlight_name' style='text-align:center;display:none;'>Christopher Yen</h3> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div > | ||
+ | <div id='spotlight_question_1'> | ||
+ | <h5 style=''>What got you interested in synthetic biology?</h5> | ||
+ | <p style='display:none;'></p> | ||
+ | </div> | ||
+ | <div id='spotlight_question_2'> | ||
+ | <h5 style=''>Dream career or lifegoal?</h5> | ||
+ | <p style='display:none;'></p> | ||
+ | </div> | ||
+ | <div id='spotlight_question_intro'> | ||
+ | <h5 style=''>Click on each member to see their responses!</h5> | ||
+ | <p style='display:none;'></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 14:03, 9 October 2016