Difference between revisions of "Team:Tokyo-NoKoGen/Demo"
Line 1: | Line 1: | ||
{{Tokyo-Nokogenfooter}} | {{Tokyo-Nokogenfooter}} | ||
− | |||
+ | {{TeamTokyoNokogen}} | ||
+ | <html> | ||
<style> | <style> | ||
− | div# | + | div#wrap { |
− | + | width:80%; | |
− | + | text-align:center; | |
− | + | margin-left:auto; | |
− | + | margin-right:auto; | |
− | } | + | } |
− | div# | + | div#bannerContainer { |
− | + | width:75%; | |
− | + | position:absolute; | |
+ | border:solid 1px; | ||
+ | top:0px; | ||
+ | |||
+ | } | ||
+ | div#box1 /*1段目の箱*/ { | ||
+ | width:900px; | ||
+ | height:330px; | ||
+ | margin-top:-10px; | ||
+ | border:solid 1px; | ||
+ | position:absolute; | ||
+ | top:260px | ||
+ | |||
+ | } | ||
+ | |||
+ | .overview { | ||
+ | width:600px; | ||
+ | height:300px; | ||
+ | margin-top:10px; | ||
+ | margin-left:10px; | ||
+ | background:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | 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:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | 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:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | display: table-cell; | ||
+ | display: inline-block; _display: inline; | ||
+ | vertical-align: middle; | ||
+ | top:300px | ||
+ | |||
+ | display: inline-block; _display: inline; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | div#box2 /*2段目の箱*/ { | ||
+ | width:900px; | ||
+ | height:330px; | ||
+ | margin-top:-10px; | ||
+ | border:solid 1px; | ||
+ | position:absolute; | ||
+ | top:340px; | ||
+ | left:0px; | ||
+ | } | ||
+ | |||
+ | .facebook { | ||
+ | width:200px; | ||
+ | height:135px; | ||
+ | position:relative; | ||
+ | left:15px; | ||
+ | margin-top:10px; | ||
+ | margin-left:20px; | ||
+ | background:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | 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:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | 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: #ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | float:right; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | div#box3 /*3段目の箱*/ { | ||
+ | width:900px; | ||
+ | height:180px; | ||
+ | margin-top:-19px; | ||
+ | border:solid 1px; | ||
+ | position:absolute; | ||
+ | top:350px | ||
+ | } | ||
+ | .Ache { | ||
+ | width:210px; | ||
+ | height:150px; | ||
+ | margin-top:10px; | ||
+ | margin-left:10px; | ||
+ | background:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | display: inline-block; _display: inline; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .Human { | ||
+ | width:210px; | ||
+ | height:150px; | ||
+ | margin-top:10px; | ||
+ | margin-left:10px; | ||
+ | background:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | display: inline-block; _display: inline; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .parts { | ||
+ | width:210px; | ||
+ | height:150px; | ||
+ | margin-top:10px; | ||
+ | margin-left:10px; | ||
+ | background:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | display: inline-block; _display: inline; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | |||
+ | } | ||
+ | .safety { | ||
+ | width:210px; | ||
+ | height:150px; | ||
+ | margin-top:-5px; | ||
+ | margin-left:10px; | ||
+ | background:#ffffff; | ||
+ | border:solid 1px #000000; | ||
+ | display: inline-block; _display: inline; | ||
+ | float:left; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | |||
p { | p { | ||
font-size:16px; | font-size:16px; | ||
Line 22: | Line 189: | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
+ | |||
+ | div#main { | ||
+ | width:1000px; | ||
+ | margin:0 auto; | ||
+ | background-color:#ffffff | ||
+ | text-align:center; | ||
+ | top:12px; | ||
+ | left:140px; | ||
+ | font-family:Georgia; | ||
+ | font-size:16px; | ||
+ | line-height:2; | ||
+ | } | ||
+ | |||
+ | |||
+ | div#nav { | ||
+ | width:100%; | ||
+ | margin:0 auto; | ||
+ | background-color:#E6FFE9 | ||
+ | text-align:center; | ||
+ | position:fixed; | ||
+ | z-index: 100; | ||
+ | top:18px; | ||
+ | } | ||
+ | |||
+ | div#nav td{ | ||
+ | width:300px;height:45px; | ||
+ | margin:0 auto; | ||
+ | text-align:center; | ||
+ | border:none; | ||
+ | font-family:fantasy; | ||
+ | font-size:18px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 40px; | ||
+ | background-color: #E6FFE9; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | font-size: 100%; | ||
+ | } | ||
+ | html, body, .wrapper { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #E6FFE9; | ||
+ | |||
+ | .link_box{ | ||
+ | position:; | ||
+ | width:30%; | ||
+ | padding:5%; | ||
+ | border:solid 1px #CCC; | ||
+ | margin:0px auto 20px; | ||
+ | } | ||
+ | |||
+ | .link_box a{ | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | text-indent:-999px; | ||
+ | } | ||
</style> | </style> | ||
− | < | + | <div id="wrap"> |
+ | |||
+ | <div id="bannerContainer"/*バナー*/> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/8/82/Tokyo-NoKogen_banner.png" width="900" height="250"> | ||
+ | </div> | ||
+ | <div id="box1"/*見えない1段目のボックス*/> | ||
+ | |||
+ | <div class="overview"> | ||
+ | <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 class="team"> | ||
+ | <p>team</p> | ||
+ | <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"> | ||
+ | <p>Notebook</p> | ||
+ | <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 class="facebook"> | ||
+ | <p>facebook</p> | ||
+ | <a href="https://www.facebook.com/tokyo.nokogen" target="_blank"></a> | ||
+ | |||
+ | </div> | ||
+ | <div class="twitter"> | ||
+ | <p>twitter</p> | ||
+ | <a href="https://twitter.com/iGEM_Nokogen" target="_blank"></a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="project"> | ||
+ | <p>project</p> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Description" target="_blank"></a> | ||
+ | </div> | ||
+ | |||
+ | <div id="box3"/*見えない3段目のボックス*/> | ||
+ | <div class="Ache"> | ||
+ | <p>Achievement</p> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/achievement" target="_blank"></a> | ||
+ | </div> | ||
+ | <div class="Human"> | ||
+ | <p>Human practice</p> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Practices" target="_blank"></a> | ||
+ | </div> | ||
+ | <div class="parts"> | ||
+ | <p>Parts</p> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Parts" target="_blank"></a> | ||
+ | </div> | ||
+ | <div class="safety"> | ||
+ | <p>Safety</p> | ||
+ | <a href="https://2015.igem.org/Team:Tokyo-NoKoGen/Safety" target="_blank"></a> | ||
+ | </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> | ||
− | + | </html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </html> | + |
Revision as of 01:53, 27 August 2015