Difference between revisions of "Team:Tokyo-NoKoGen/Demo"
(30 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{TeamTokyoNokogen}} | {{TeamTokyoNokogen}} | ||
+ | |||
<html> | <html> | ||
<style> | <style> | ||
+ | html, body{ | ||
+ | |||
+ | height:auto; | ||
+ | margin-top:-10px; | ||
+ | padding:20px; | ||
+ | background:#ffffff; | ||
+ | position:absolute; | ||
+ | } | ||
div#wrap { | div#wrap { | ||
width:80%; | width:80%; | ||
text-align:center; | text-align:center; | ||
+ | position:relative; | ||
+ | min-height:100%; | ||
margin-left:auto; | margin-left:auto; | ||
margin-right:auto; | margin-right:auto; | ||
+ | |||
+ | |||
} | } | ||
div#bannerContainer { | div#bannerContainer { | ||
− | width: | + | width:75%; |
position:absolute; | position:absolute; | ||
− | + | ||
top:0px; | top:0px; | ||
Line 18: | Line 31: | ||
width:900px; | width:900px; | ||
height:330px; | height:330px; | ||
− | margin-top:10px; | + | margin-top:-10px; |
− | + | ||
position:absolute; | position:absolute; | ||
top:260px | top:260px | ||
− | |||
} | } | ||
− | + | .overview { | |
− | + | width:600px; | |
− | + | height:300px; | |
− | + | margin-top:10px; | |
− | + | margin-left:10px; | |
− | + | background:#FFFFCC; | |
− | + | ||
− | + | display: inline-block; _display: inline; | |
− | } | + | float:left; |
− | + | cursor:pointer; | |
− | + | } | |
− | + | ||
− | + | .team { | |
− | + | width:260px; | |
− | + | height:135px; | |
− | + | position:relative; | |
− | + | left:15px; | |
− | } | + | margin-top:10px; |
+ | margin-left:20px; | ||
+ | background:#CCFF99; | ||
+ | display: inline-block; _display: inline; | ||
+ | display: table-cell; /* ④ */ | ||
+ | vertical-align: middle; | ||
+ | left:15px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .notebook { | ||
+ | width:260px; | ||
+ | height:140px; | ||
+ | position:relative; | ||
+ | margin-top:5px; | ||
+ | margin-left:15px; | ||
+ | margin-right:10px; | ||
+ | background:#91d176; | ||
+ | display: table-cell; | ||
+ | display: inline-block; _display: inline; | ||
+ | vertical-align: middle; | ||
+ | top:300px | ||
+ | |||
+ | display: inline-block; _display: inline; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
div#box2 /*2段目の箱*/ { | div#box2 /*2段目の箱*/ { | ||
width:900px; | width:900px; | ||
height:330px; | height:330px; | ||
− | margin-top:10px; | + | margin-top:-10px; |
− | + | ||
position:absolute; | position:absolute; | ||
− | + | top:330px; | |
− | + | left:0px; | |
+ | } | ||
+ | .facebook { | ||
+ | width:200px; | ||
+ | height:135px; | ||
+ | position:relative; | ||
+ | left:15px; | ||
+ | margin-top:10px; | ||
+ | margin-left:20px; | ||
+ | background:#6b8bcd; | ||
+ | display: inline-block; _display: inline; | ||
+ | display: table-cell; /* ④ */ | ||
+ | vertical-align: middle; | ||
+ | position:absolute; | ||
+ | left:15px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .twitter { | ||
+ | width:200px; | ||
+ | height:140px; | ||
+ | position:relative; | ||
+ | left:15px; | ||
+ | margin-top:300px; | ||
+ | margin-left:20px; | ||
+ | background:#6b8bcd; | ||
+ | display: inline-block; _display: inline; | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .project { | ||
+ | width:650px; | ||
+ | height:300px; | ||
+ | margin-top:-300px; | ||
+ | margin-right:10px; | ||
+ | background: #79d480; | ||
+ | float:right; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | div#box3 /*3段目の箱*/ { | ||
+ | width:900px; | ||
+ | height:180px; | ||
+ | margin-top:-25px; | ||
+ | |||
+ | position:absolute; | ||
+ | top:330px | ||
} | } | ||
− | + | .Ache { | |
− | + | width:210px; | |
− | + | height:150px; | |
− | + | margin-top:10px; | |
− | + | margin-left:12px; | |
− | + | background:#71b4d0; | |
− | display: inline-block; _display: inline; | + | display: inline-block; _display: inline; |
− | + | float:left; | |
− | } | + | cursor:pointer; |
+ | } | ||
+ | .Human { | ||
+ | width:210px; | ||
+ | height:150px; | ||
+ | margin-top:10px; | ||
+ | margin-left:10px; | ||
+ | background:#6ecec7; | ||
+ | display: inline-block; _display: inline; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .parts { | ||
+ | width:210px; | ||
+ | height:150px; | ||
+ | margin-top:10px; | ||
+ | margin-left:10px; | ||
+ | background:#7bd593; | ||
+ | display: inline-block; _display: inline; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
− | + | } | |
− | + | .safety { | |
− | + | width:210px; | |
− | + | height:150px; | |
− | + | margin-top:-5px; | |
− | + | margin-left:10px; | |
− | + | background:#7593d3; | |
− | + | display: inline-block; _display: inline; | |
− | } | + | float:left; |
+ | cursor:pointer; | ||
+ | } | ||
Line 82: | Line 188: | ||
h2 { | h2 { | ||
font-size:20px; | font-size:20px; | ||
− | font-family: | + | font-family:fantasy; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 157: | Line 263: | ||
<div id="box1"/*見えない1段目のボックス*/> | <div id="box1"/*見えない1段目のボックス*/> | ||
− | <div | + | <div class="overview"> |
− | + | <h2>Introduction</h2> | |
− | + | <!-- <img src="http://junk-blog.com/wp-content/uploads/2014/09/sample_image.jpg" alt="サンプル画像" width="550" height="250"alt="Overview"/> --> | |
+ | |||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen" target="_blank"></a></td> | ||
+ | |||
+ | |||
</div> | </div> | ||
− | <div | + | <div class="team"> |
− | < | + | <h2>Team</h2> |
− | </div> | + | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Team" target="_blank" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7 ></a> |
+ | </div> | ||
+ | |||
+ | <div class="notebook"> | ||
+ | <h2>Notebook</h2> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Notebook" target="_blank" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7 ></a> | ||
+ | </div> | ||
+ | |||
+ | |||
<div id="box2"/*見えない2段目のボックス*/> | <div id="box2"/*見えない2段目のボックス*/> | ||
− | <div | + | <div class="facebook"> |
− | + | <h2>facebook</h2> | |
− | + | <a href="https://www.facebook.com/tokyo.nokogen" target="_blank"></a> | |
− | + | ||
− | <div | + | </div> |
− | < | + | <div class="twitter"> |
− | + | <h2>twitter</h> | |
− | </div> | + | <a href="https://twitter.com/iGEM_Nokogen" target="_blank"></a> |
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="project"> | ||
+ | <h2>project</h2> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Description" target="_blank"></a> | ||
+ | </div> | ||
+ | |||
+ | <div id="box3"/*見えない3段目のボックス*/> | ||
+ | <div class="Ache"> | ||
+ | <h2>Achievement</h2> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/achievement" target="_blank"></a> | ||
+ | </div> | ||
+ | <div class="Human"> | ||
+ | <h2>Human practice</h2> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Practices" target="_blank"></a> | ||
+ | </div> | ||
+ | <div class="parts"> | ||
+ | <h2>Parts</h2> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Parts" target="_blank"></a> | ||
+ | </div> | ||
+ | <div class="safety"> | ||
+ | <h2>Safety</h2> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Safety" target="_blank"></a> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
+ | <script type="text/javascript"> | ||
+ | $(function(){ | ||
+ | $(".overview").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(function(){ | ||
+ | $(".team").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".facebook").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".twitter").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".notebook").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".project").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".Ache").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".Human").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".parts").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(function(){ | ||
+ | $(".safety").click(function(){ | ||
+ | window.location=$(this).find("a").attr("href"); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | /*footer*/ | ||
+ | <style> | ||
+ | div#wrapper2 { | ||
+ | width:80%; | ||
+ | text-align:center; | ||
+ | position:relative; | ||
+ | min-height:100%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | div#footer { | ||
+ | margin:0 auto; | ||
+ | position:absolute; | ||
+ | width:900px; | ||
+ | |||
+ | left : -200px ; | ||
+ | bottom:-1300px; | ||
+ | } | ||
+ | |||
+ | |||
+ | div#footer img { | ||
+ | width:200px; | ||
+ | } | ||
+ | p { | ||
+ | font-size:16px; | ||
+ | font-family:Georgia; | ||
+ | line-height:2; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size:20px; | ||
+ | font-family:fantasy; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <body> | ||
+ | <div id="wrapper"> | ||
+ | <div id="footer"> | ||
+ | <a href="http://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2014/5/5e/Noko14_IDT.png"></a> | ||
+ | <a href="http://www.ultizyme.jp/"><img src="https://static.igem.org/mediawiki/2014/c/ce/Noko14_Image91.jpg"></a> | ||
+ | <a href="http://www.cosmobio.co.jp/index_e.asp"><img src="https://static.igem.org/mediawiki/2014/e/e5/Noko14_Logo_e.jpg"></a> | ||
+ | <a href="http://www.mbl.co.jp/e/index.html"><img src="https://static.igem.org/mediawiki/2014/4/4f/Noko14_MBL.gif"></a> | ||
+ | <a href="http://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2014/a/ad/Noko14_li.png"></a> | ||
+ | <a href="http://www.tuat.ac.jp/en/index.html"><img src="https://static.igem.org/mediawiki/2014/3/39/Noko14_tuat.png"></a> | ||
+ | <a href="http://www.tuat.ac.jp/~tanpaku/"><img src="https://static.igem.org/mediawiki/2014/3/3c/Noko14_ike.jpg"></a> | ||
+ | <a href="http://www.tuat.ac.jp/~kakusan/index.html"><img src="https://static.igem.org/mediawiki/2014/7/77/Noko14_ikeken.jpg"></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | /*footer*/ | ||
</html> | </html> |
Latest revision as of 16:31, 8 September 2015