Template:CSS/UT-Tokyo
From 2014.igem.org
(Difference between revisions)
Pineappler (Talk | contribs) |
Pineappler (Talk | contribs) |
||
(54 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script type="text/javascript"> | ||
+ | function changeIcon(URL) { | ||
+ | var target = document.getElementsByTagName("link"); | ||
+ | var i = 0; | ||
+ | for(i = 0;i<target.length;i++){ | ||
+ | if(target[i].rel == "shortcut icon"){ | ||
+ | target[i].parentNode.removeChild(target[i]); | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var link = document.createElement("link"); | ||
+ | link.type = "image/x-icon"; | ||
+ | link.rel = "shortcut icon"; | ||
+ | link.href = URL; | ||
+ | |||
+ | document.getElementsByTagName("head")[0].appendChild(link); | ||
+ | } | ||
+ | |||
+ | changeIcon("https://static.igem.org/mediawiki/2014/a/a9/Icon_32.gif"); | ||
+ | |||
+ | </script> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
Line 69: | Line 92: | ||
} | } | ||
body { | body { | ||
- | background-color: # | + | background-color: #9FA0A0; |
width: 100%; | width: 100%; | ||
margin: 0 auto; | margin: 0 auto; | ||
Line 279: | Line 302: | ||
.left-side{ | .left-side{ | ||
width:50%; | width:50%; | ||
- | height: | + | height:750px; |
background-color:#FFF; | background-color:#FFF; | ||
float:left; | float:left; | ||
Line 287: | Line 310: | ||
#bodyContent{ | #bodyContent{ | ||
width:100%; | width:100%; | ||
- | |||
- | |||
- | |||
} | } | ||
#contentSub{ | #contentSub{ | ||
Line 296: | Line 316: | ||
.top{ | .top{ | ||
width:100%; | width:100%; | ||
- | height: | + | height:750px; |
background-color:#000; | background-color:#000; | ||
} | } | ||
Line 312: | Line 332: | ||
top:350px; | top:350px; | ||
right:50%; | right:50%; | ||
- | + | margin-right:100px; | |
+ | z-index:200; | ||
+ | border-radius:30px; | ||
} | } | ||
#right-img{ | #right-img{ | ||
Line 319: | Line 341: | ||
top:350px; | top:350px; | ||
left:50%; | left:50%; | ||
- | + | margin-left:100px; | |
+ | z-index:200; | ||
+ | border-radius:30px; | ||
} | } | ||
#left-bottom{ | #left-bottom{ | ||
Line 325: | Line 349: | ||
height:100px; | height:100px; | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:650px; |
float:left; | float:left; | ||
background-image:url("https://static.igem.org/mediawiki/2014/e/eb/Gra_white.png"); | background-image:url("https://static.igem.org/mediawiki/2014/e/eb/Gra_white.png"); | ||
Line 334: | Line 358: | ||
height:100px; | height:100px; | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:650px; |
margin-left:50%; | margin-left:50%; | ||
background-image:url("https://static.igem.org/mediawiki/2014/b/ba/Gra_black.png"); | background-image:url("https://static.igem.org/mediawiki/2014/b/ba/Gra_black.png"); | ||
Line 341: | Line 365: | ||
#index-body{ | #index-body{ | ||
width:100%; | width:100%; | ||
- | background-color: | + | background-color:#9FA0A0; |
} | } | ||
.content-box{ | .content-box{ | ||
- | width: | + | width:1000px; |
background-color:#FFF; | background-color:#FFF; | ||
margin-left:auto; | margin-left:auto; | ||
margin-right:auto; | margin-right:auto; | ||
+ | position:relative; | ||
+ | top:50px; | ||
+ | border-radius:10px; | ||
+ | margin-bottom:30px; | ||
+ | min-height:150px; | ||
+ | } | ||
+ | .content-box h2, p{ | ||
+ | color:#000; | ||
+ | margin-left:30px; | ||
+ | width:950px; | ||
+ | } | ||
+ | .content-box h2{ | ||
+ | font-size:x-large; | ||
+ | } | ||
+ | .content-box p{ | ||
+ | font-size: medium; | ||
+ | font-family: Georgia; | ||
+ | color: #3F3F3F; | ||
+ | } | ||
+ | img.circle{ | ||
+ | visibility:hidden; | ||
+ | width:150px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | .content-box #box-left{ | ||
+ | width:500px; | ||
+ | float:left; | ||
+ | } | ||
+ | .content-box #box-right{ | ||
+ | width:400px; | ||
+ | float:left; | ||
+ | } | ||
+ | #box-right h2, #box-left h2{ | ||
+ | width:300px; | ||
+ | } | ||
+ | img.sns{ | ||
+ | width:150px; | ||
+ | padding-left:2px; | ||
+ | padding-bottom:10px; | ||
+ | } | ||
+ | img{ | ||
+ | border:0; | ||
} | } | ||
</style> | </style> | ||
+ | <script type = "text/javascript" language = "Javascript"> | ||
+ | function randomEcoli(){ | ||
+ | document.title = "TOP | UT-Tokyo 2014"; | ||
+ | var rand1 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand1; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "280px"; | ||
+ | document.getElementById(str).style.right = "50%"; | ||
+ | document.getElementById(str).style.paddingRight = "380px"; | ||
+ | var rand2 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand2; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "580px"; | ||
+ | document.getElementById(str).style.right = "50%"; | ||
+ | document.getElementById(str).style.paddingRight = "100px"; | ||
+ | document.getElementById(str).style.zIndex = "100"; | ||
+ | var rand3 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand3; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "300px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.marginLeft = "-30px"; | ||
+ | var rand4 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand4; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "270px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.paddingLeft = "400px"; | ||
+ | var rand5 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand5; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "50px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.paddingLeft = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.paddingLeft = "350px"; | ||
+ | var rand6 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand6; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "440px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.paddingLeft = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.marginLeft = "-120px"; | ||
+ | var rand7 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand7; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "540px"; | ||
+ | document.getElementById(str).style.left = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.paddingLeft = ""; | ||
+ | document.getElementById(str).style.right = "50%"; | ||
+ | document.getElementById(str).style.paddingRight = "370px"; | ||
+ | document.getElementById(str).style.zIndex = "100"; | ||
+ | } | ||
+ | </script> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 03:27, 18 October 2014