Team:NCTU Formosa/source/head-index
From 2013.igem.org
(Difference between revisions)
(44 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | < | + | <style> |
+ | .effect { | ||
+ | left: -100%; | ||
+ | } | ||
+ | #footer-box a{ | ||
+ | color: white; | ||
+ | } | ||
+ | body { | ||
+ | background:black; | ||
+ | overflow-x: none; | ||
+ | font-family: Open Sans; | ||
+ | } | ||
+ | #footer-box { | ||
+ | width:100%; | ||
+ | background-color:black; | ||
+ | } | ||
+ | .page { | ||
+ | background-attachment: fixed; | ||
+ | background-position: 0 50%; | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | height: 900px; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #description { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/d/de/Nctu-bg1.jpg); | ||
+ | z-index:4; | ||
+ | } | ||
+ | #sitemap { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/9/9e/Nctu-bg4.jpg); | ||
+ | z-index:4; | ||
+ | min-height: 900px!important; | ||
+ | height: auto!important; | ||
+ | } | ||
+ | #decor { | ||
+ | display:none; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/1/14/Nctu-bg2.jpg); | ||
+ | } | ||
+ | #social { | ||
+ | display:none; | ||
+ | background-color: black; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/6/6e/Nctu-bg3.jpg); | ||
+ | min-height: 1300px!important; | ||
+ | height: auto!important; | ||
+ | z-index:4; | ||
+ | } | ||
+ | .boxwrap { | ||
+ | width:100%; | ||
+ | max-width:1200px; | ||
+ | margin: 0 auto; | ||
+ | position:relative; | ||
+ | height: 900px; | ||
+ | display:block; | ||
+ | } | ||
+ | .box { | ||
+ | display:block; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | top:200px; | ||
+ | left: 0; | ||
+ | color: white; | ||
+ | text-align: right; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | #description .gear { | ||
+ | text-indent:9999px; | ||
+ | max-width:50px; | ||
+ | width:100%; | ||
+ | height:50px; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/a/ad/Nctu-gear.png) no-repeat; | ||
+ | background-size: contain!important; | ||
+ | position:absolute; | ||
+ | right:-20px; | ||
+ | top:-20px; | ||
+ | } | ||
+ | #description .title { | ||
+ | position:relative; | ||
+ | text-indent:9999px; | ||
+ | max-width:455px; | ||
+ | width:100%; | ||
+ | height:118px; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/b/ba/Nctu-biglogo.png) no-repeat; | ||
+ | background-size: contain!important; | ||
+ | margin: 0 auto; | ||
+ | margin-bottom:10px; | ||
+ | } | ||
+ | #description .team { | ||
+ | display:none; | ||
+ | } | ||
+ | #description .wordbox { | ||
+ | margin-top:20px; | ||
+ | padding-top:20px; | ||
+ | font-weight:300; | ||
+ | width:100%; | ||
+ | font-family: Open Sans; | ||
+ | font-size: 18px; | ||
+ | text-align:justify; | ||
+ | text-justify:inter-word; | ||
+ | text-indent: 50px; | ||
+ | margin-bottom:30px; | ||
+ | } | ||
+ | #description .wordbox p{ | ||
+ | padding-top:10px; | ||
+ | padding-left:30px; | ||
+ | padding-right:30px; | ||
+ | } | ||
+ | #description .box .readmore { | ||
+ | text-align:center; | ||
+ | margin-bottom:50px; | ||
+ | } | ||
+ | #description .box:hover .gear { | ||
+ | -webkit-animation: spin1 2s infinite linear; | ||
+ | -moz-animation: spin1 2s infinite linear; | ||
+ | -o-animation: spin1 2s infinite linear; | ||
+ | -ms-animation: spin1 2s infinite linear; | ||
+ | animation: spin1 2s infinite linear; | ||
+ | } | ||
+ | @-webkit-keyframes spin1 { | ||
+ | 0% { -webkit-transform: rotate(0deg);} | ||
+ | 100% { -webkit-transform: rotate(360deg);} | ||
+ | } | ||
+ | @-moz-keyframes spin1 { | ||
+ | 0% { -moz-transform: rotate(0deg);} | ||
+ | 100% { -moz-transform: rotate(360deg);} | ||
+ | } | ||
+ | @-o-keyframes spin1 { | ||
+ | 0% { -o-transform: rotate(0deg);} | ||
+ | 100% { -o-transform: rotate(360deg);} | ||
+ | } | ||
+ | @-ms-keyframes spin1 { | ||
+ | 0% { -ms-transform: rotate(0deg);} | ||
+ | 100% { -ms-transform: rotate(360deg);} | ||
+ | } | ||
+ | @-keyframes spin1 { | ||
+ | 0% { transform: rotate(0deg);} | ||
+ | 100% { transform: rotate(360deg);} | ||
+ | } | ||
+ | #description .box:hover .moret { | ||
+ | background-color:white; | ||
+ | color:darkblue; | ||
+ | } | ||
+ | .moret { | ||
+ | border: white solid 1px; | ||
+ | padding:3px; | ||
+ | padding-left:7px; | ||
+ | padding-right:7px; | ||
+ | border-radius:3px; | ||
+ | -webkit-transition: .5s; | ||
+ | -moz-transition: .5s; | ||
+ | -o-transition: .5s; | ||
+ | -ms-transition: .5s; | ||
+ | transition: .5s; | ||
+ | } | ||
+ | /* | ||
+ | #description .box:hover .moret | ||
+ | #description .box:hover .title { | ||
+ | color: #fff; | ||
+ | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7fff00, 0 0 70px #7FFF00, 0 0 80px #7FFF00, 0 0 100px #7FFF00, 0 0 150px #7FFF00; | ||
+ | } | ||
+ | #description .box:hover .wordbox { | ||
+ | color: #fff; | ||
+ | text-shadow: 0 0 10px #fff, 0 0 40px #7FFF00; | ||
+ | } | ||
+ | #decor #quill { | ||
+ | z-index:3; | ||
+ | position:absolute; | ||
+ | top:-150px; | ||
+ | left:0; | ||
+ | margin-left:200px; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/e/e5/Nctu-quill.png'); | ||
+ | background-repeat:no-repeat; | ||
+ | width:1087px; | ||
+ | height:1087px; | ||
+ | } | ||
+ | #decor #parchment { | ||
+ | position:absolute; | ||
+ | text-indent:-9999px; | ||
+ | top:-50px; | ||
+ | right:0; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/5/53/Nctu-parchment.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | width:70%; | ||
+ | height:200%; | ||
+ | } | ||
+ | #decor #tphoto1 { | ||
+ | z-index:2; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/0/0c/Nctu-tphoto1.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: contain; | ||
+ | width:200px; | ||
+ | height:200%; | ||
+ | transform:rotate(-5deg); | ||
+ | -ms-transform:rotate(-5deg); | ||
+ | -webkit-transform:rotate(-5deg); | ||
+ | position:absolute; | ||
+ | top:100px; | ||
+ | right:-80px; | ||
+ | } | ||
+ | #decor #tphoto2 { | ||
+ | z-index:2; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/5/5c/Nctu-tphoto2.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: contain; | ||
+ | width:500px; | ||
+ | height:200%; | ||
+ | transform:rotate(5deg); | ||
+ | -ms-transform:rotate(5deg); | ||
+ | -webkit-transform:rotate(5deg); | ||
+ | position:absolute; | ||
+ | top:500px; | ||
+ | right:-150px; | ||
+ | } | ||
+ | */ | ||
+ | #social #meritw { | ||
+ | display:block; | ||
+ | padding-top:30px; | ||
+ | width:90%; | ||
+ | margin: 0 auto; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | #sitemap > p { | ||
+ | padding-top:5px; | ||
+ | color: #eee; | ||
+ | text-indent:30px; | ||
+ | padding-left:50px; | ||
+ | padding-right:70px; | ||
+ | padding-bottom:30px; | ||
+ | } | ||
+ | .bigtitle { | ||
+ | text-indent:0; | ||
+ | color: white; | ||
+ | font-size: 35px; | ||
+ | padding-left:50px; | ||
+ | padding-top:50px!important; | ||
+ | padding-bottom:15px; | ||
+ | } | ||
+ | #social .bigtitle .em1 { | ||
+ | font-weight:700; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | #social .bigtitle .em2 { | ||
+ | color: #99ccff; | ||
+ | } | ||
+ | #social>p { | ||
+ | padding-top:5px; | ||
+ | color: #eee; | ||
+ | text-indent:30px; | ||
+ | padding-left:50px; | ||
+ | padding-right:70px; | ||
+ | } | ||
+ | #social .merit { | ||
+ | display:inline-block; | ||
+ | background: rgba(30,30,30,0.5); | ||
+ | border-radius:5px; | ||
+ | color: white; | ||
+ | width:400px; | ||
+ | margin:25px; | ||
+ | padding:10px; | ||
+ | vertical-align: text-top; | ||
+ | -webkit-transition: .5s; | ||
+ | -moz-transition: .5s; | ||
+ | -o-transition: .5s; | ||
+ | -ms-transition: .5s; | ||
+ | transition: .5s; | ||
+ | } | ||
+ | #social .merit:hover { | ||
+ | background: rgba(30,30,30,0.8); | ||
+ | } | ||
+ | #social .merit .smalltitle { | ||
+ | font-size:20px; | ||
+ | font-weight:700; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | padding-top:5px!important; | ||
+ | padding-bottom:5px!important; | ||
+ | text-indent:0!important; | ||
+ | background-color: rgba(0,0,0,0.5); | ||
+ | top:-10px; | ||
+ | width:380px; | ||
+ | position:relative; | ||
+ | left:-10px; | ||
+ | } | ||
+ | #social .merit p { | ||
+ | padding-top:10px; | ||
+ | padding-left:10px; | ||
+ | padding-right:10px; | ||
+ | text-indent:30px; | ||
+ | } | ||
+ | #social .cphoto img { | ||
+ | width:420px; | ||
+ | border-top-left-radius:5px; | ||
+ | border-top-right-radius:5px; | ||
+ | position:relative; | ||
+ | top:-10px; | ||
+ | left:-10px; | ||
+ | margin-bottom:0!important; | ||
+ | } | ||
+ | #social a { | ||
+ | color:#99ccff; | ||
+ | } | ||
+ | #social b { | ||
+ | background-color:#E86100; | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | border-radius:3px; | ||
+ | } | ||
+ | #sitemap .seclink { | ||
+ | display: block; | ||
+ | margin:10px; | ||
+ | height:200px; | ||
+ | width:300px; | ||
+ | float:left; | ||
+ | overflow: hidden; | ||
+ | color:white; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | .seclink a { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | background:rgba(0,0,0,0); | ||
+ | height:100%; | ||
+ | width:100%; | ||
+ | color:white; | ||
+ | -webkit-transition: all 0.5s ease-in-out; | ||
+ | -moz-transition: all 0.5s ease-in-out; | ||
+ | -o-transition: all 0.5s ease-in-out; | ||
+ | transition: all 0.5s ease-in-out; | ||
+ | } | ||
+ | .seclink a:hover { | ||
+ | text-decoration:none; | ||
+ | background:rgba(0,0,0,0.5); | ||
+ | } | ||
+ | #sec1 { | ||
+ | background: #c56d83; | ||
+ | } | ||
+ | #sec2 { | ||
+ | background: #dd9056; | ||
+ | } | ||
+ | #sec3 { | ||
+ | background: #deb754; | ||
+ | } | ||
+ | #sec4 { | ||
+ | background: #8da857; | ||
+ | } | ||
+ | #sec5 { | ||
+ | background: #7b7eb7; | ||
+ | } | ||
+ | #sec6 { | ||
+ | background: #82b1b1; | ||
+ | } | ||
+ | #sec7 { | ||
+ | background: #c56dbf; | ||
+ | } | ||
+ | #sec8 { | ||
+ | background: #aaaaaa; | ||
+ | } | ||
+ | #sec9 { | ||
+ | background: #a88c57; | ||
+ | } | ||
+ | .seclink a i { | ||
+ | position:absolute; | ||
+ | font-size:100px; | ||
+ | padding-left:100px; | ||
+ | padding-top:10px; | ||
+ | top:0; | ||
+ | opacity:1; | ||
+ | -webkit-transition: all 0.5s ease-in-out; | ||
+ | -moz-transition: all 0.5s ease-in-out; | ||
+ | -o-transition: all 0.5s ease-in-out; | ||
+ | transition: all 0.5s ease-in-out; | ||
+ | } | ||
+ | #sec1 a i, | ||
+ | #sec8 a i { | ||
+ | padding-left:120px; | ||
+ | } | ||
+ | #sec2 a i, | ||
+ | #sec4 a i, | ||
+ | #sec5 a i, | ||
+ | #sec6 a i { | ||
+ | padding-left:110px; | ||
+ | } | ||
+ | .seclink a:hover i { | ||
+ | //font-size:200px; | ||
+ | opacity:0.5; | ||
+ | top:-150px; | ||
+ | } | ||
+ | #seclinks { | ||
+ | padding-left:50px; | ||
+ | padding-right:50px; | ||
+ | } | ||
+ | .seclink a p { | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | top:200px; | ||
+ | padding:10px; | ||
+ | text-indent:30px; | ||
+ | -webkit-transition: all 0.5s ease-in-out; | ||
+ | -moz-transition: all 0.5s ease-in-out; | ||
+ | -o-transition: all 0.5s ease-in-out; | ||
+ | transition: all 0.5s ease-in-out; | ||
+ | } | ||
+ | .seclink a:hover p { | ||
+ | top:0; | ||
+ | } | ||
+ | .seclink .smalltitle { | ||
+ | font-family: Lobster Two; | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | top:130px; | ||
+ | left:0px; | ||
+ | text-indent:0; | ||
+ | padding-left:30px; | ||
+ | font-size:30px; | ||
+ | opacity:1; | ||
+ | } | ||
+ | .seclink a:hover .smalltitle { | ||
+ | top:100px; | ||
+ | left:-50px; | ||
+ | font-size:100px; | ||
+ | opacity:0.5; | ||
+ | } | ||
+ | .space { | ||
+ | clear:both; | ||
+ | height:50px; | ||
+ | } | ||
+ | #footer-text, #footer-text a, #footer-text a:hover { | ||
+ | color: white!important; | ||
+ | } | ||
+ | </style> | ||
<script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/stellar?action=raw&ctype=text/javascript"></script> | <script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/stellar?action=raw&ctype=text/javascript"></script> | ||
<script> | <script> | ||
Line 11: | Line 440: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$('.box').click(function() { window.location.href = 'https://2013.igem.org/Team:NCTU_Formosa/project'; }); | $('.box').click(function() { window.location.href = 'https://2013.igem.org/Team:NCTU_Formosa/project'; }); | ||
- | |||
}); | }); | ||
</script> | </script> |
Latest revision as of 14:54, 25 October 2013