Team:NCTU Formosa/source/head-index
From 2014.igem.org
(Difference between revisions)
(105 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | .wordbox p{ | ||
+ | font-family: "Courier"; | ||
+ | font-size: 20px; | ||
+ | margin: 10px 0 0 10px; | ||
+ | overflow: hidden; | ||
+ | |||
+ | } | ||
+ | .attach{ | ||
+ | margin-left: 30%; | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | top:50%; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .wordbox p a{ | ||
+ | color: lime; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .hh{height:200pt;} | ||
+ | .ch-item { | ||
+ | |||
+ | border-radius: 50%; | ||
+ | position: relative; | ||
+ | box-shadow: 0 1px 2px rgba(0,0,0,0.1); | ||
+ | cursor: default; | ||
+ | } | ||
+ | |||
+ | .ch-info-wrap{ | ||
+ | position: absolute; | ||
+ | width: 220px; | ||
+ | height: 220px; | ||
+ | border-radius: 50%; | ||
+ | perspective: 800px; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | top: 20px; | ||
+ | left: 20px; | ||
+ | background: #f9f9f9 url(../images/bg.jpg); | ||
+ | box-shadow: | ||
+ | 0 0 0 20px rgba(255,255,255,0.2), | ||
+ | inset 0 0 3px rgba(115,114, 23, 0.8); | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-info{ | ||
+ | position: absolute; | ||
+ | width: 220px; | ||
+ | height: 220px; | ||
+ | border-radius: 50%; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | transform-style: preserve-3d; | ||
+ | } | ||
+ | |||
+ | .ch-info > div { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border-radius: 50%; | ||
+ | background-position: center center; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .ch-info .ch-info-back { | ||
+ | transform: rotate3d(0,1,0,180deg); | ||
+ | background: #000; | ||
+ | } | ||
+ | |||
+ | |||
+ | .ch-img-1 { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-1.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | .ch-img-2 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/3/3e/WIKI_8-2.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | |||
+ | .ch-img-3 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/0/00/WIKI_8-3.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | .ch-img-4 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/8/89/WIKI_8-4.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | .ch-img-5 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/1/12/WIKI_8-5.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | .ch-img-6 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/a/af/WIKI_8-6.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | .ch-img-7 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/3/3b/WIKI_8-7.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | |||
+ | .ch-img-8 { | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2014/b/bc/WIKI_8-8.jpg'); | ||
+ | background-size: 200pt auto; | ||
+ | } | ||
+ | |||
+ | .ch-info h3 { | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 2px; | ||
+ | font-size: 14px; | ||
+ | margin: 0 15px; | ||
+ | padding: 40px 0 0 0; | ||
+ | height: 90px; | ||
+ | //font-family: 'Open Sans', Arial, sans-serif; | ||
+ | text-shadow: | ||
+ | 0 0 1px #fff, | ||
+ | 0 1px 2px rgba(0,0,0,0.3); | ||
+ | } | ||
+ | |||
+ | .ch-info p { | ||
+ | color: #fff; | ||
+ | padding: 10px 5px; | ||
+ | font-style: italic; | ||
+ | margin: 0 30px; | ||
+ | font-size: 12px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-info p a { | ||
+ | display: block; | ||
+ | color: rgba(255,255,255,0.7); | ||
+ | font-style: normal; | ||
+ | font-weight: 700; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 9px; | ||
+ | letter-spacing: 1px; | ||
+ | padding-top: 4px; | ||
+ | font-family: 'Open Sans', Arial, sans-serif; | ||
+ | } | ||
+ | |||
+ | .ch-info p a:hover { | ||
+ | color: rgba(255,242,34, 0.8); | ||
+ | } | ||
+ | |||
+ | .ch-item:hover .ch-info-wrap { | ||
+ | box-shadow: | ||
+ | 0 0 0 0 rgba(255,255,255,0.8), | ||
+ | inset 0 0 3px rgba(115,114, 23, 0.8); | ||
+ | } | ||
+ | |||
+ | .ch-item:hover .ch-info { | ||
+ | transform: rotate3d(0,1,0,-180deg); | ||
+ | } | ||
+ | |||
+ | |||
+ | Sponsors | ||
.effect { | .effect { | ||
left: -100%; | left: -100%; | ||
} | } | ||
+ | .blank { | ||
+ | height : 210px ; | ||
+ | } | ||
+ | .link{ | ||
+ | font-size:120%; | ||
+ | color:black; | ||
+ | } | ||
+ | .picture li{ | ||
+ | display: inline-block; | ||
+ | border-radius: 3px; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | width: 16.4%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | height:200pt; | ||
+ | border:0; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | |||
+ | .p{ | ||
+ | color: #999999 | ||
+ | } | ||
+ | |||
+ | |||
#footer-box a{ | #footer-box a{ | ||
color: white; | color: white; | ||
Line 10: | Line 201: | ||
background:black; | background:black; | ||
overflow-x: none; | overflow-x: none; | ||
- | font-family: Open Sans; | + | //font-family: Open Sans; |
} | } | ||
#footer-box { | #footer-box { | ||
Line 17: | Line 208: | ||
} | } | ||
.page { | .page { | ||
- | + | ||
background-position: 0 50%; | background-position: 0 50%; | ||
background-size: cover; | background-size: cover; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
- | + | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
- | + | ||
} | } | ||
#description { | #description { | ||
- | background-image: url(https://static.igem.org/mediawiki/2014/ | + | background-image: url(https://static.igem.org/mediawiki/2014/5/5a/NCTU_wiki_Backdround.jpg); |
- | + | background-position: center top; | |
- | + | margin-bottom:10pt; | |
} | } | ||
#sitemap { | #sitemap { | ||
- | background-image: url(https://static.igem.org/mediawiki/2014/ | + | background-image: url(https://static.igem.org/mediawiki/2014/6/60/BackgroundNCTU.png); |
z-index:4; | z-index:4; | ||
- | min-height: | + | background-size: cover; |
+ | background-repeat: no-repeat; | ||
+ | min-height: 650px!important; | ||
height: auto!important; | height: auto!important; | ||
+ | background-position: center top; | ||
} | } | ||
#decor { | #decor { | ||
Line 73: | Line 267: | ||
} | } | ||
#description .wordbox { | #description .wordbox { | ||
- | + | top: -17%; | |
- | padding | + | padding:30pt; |
font-weight:300; | font-weight:300; | ||
- | width: | + | width:98%; |
font-family: Open Sans; | font-family: Open Sans; | ||
font-size: 18px; | font-size: 18px; | ||
text-align:justify; | text-align:justify; | ||
text-justify:inter-word; | text-justify:inter-word; | ||
- | + | background-color: rgba(156, 156, 156, 0.76); | |
- | + | border-radius: 30px; | |
+ | opacity: 0; | ||
+ | float:left; | ||
+ | color: white; | ||
+ | z-index: 1; | ||
+ | position: relative; | ||
+ | box-shadow: 0px 0px 12px 7px #B7600B; | ||
+ | letter-spacing: 1px; | ||
+ | |||
+ | } | ||
+ | |||
} | } | ||
#description .wordbox p{ | #description .wordbox p{ | ||
Line 388: | Line 592: | ||
.pictureContainer { | .pictureContainer { | ||
- | height: | + | height: 200px; |
- | width: | + | width: 200px; |
overflow: hidden; | overflow: hidden; | ||
cursor: pointer; | cursor: pointer; | ||
float : left ; | float : left ; | ||
margin:25pt; | margin:25pt; | ||
+ | opacity: 0.9; | ||
} | } | ||
.picturebox { | .picturebox { | ||
- | height: | + | height: 400px; |
width: 25px; | width: 25px; | ||
} | } | ||
.upperbox, .lowerbox { | .upperbox, .lowerbox { | ||
display: block; | display: block; | ||
- | width: | + | width: 200px; |
- | height: | + | height: 200px; |
} | } | ||
.lowerbox { | .lowerbox { | ||
color: white; | color: white; | ||
- | + | ||
text-align: center; | text-align: center; | ||
vertical-align: middle; | vertical-align: middle; | ||
Line 419: | Line 624: | ||
} | } | ||
.pictureContainer .picturebox:hover { | .pictureContainer .picturebox:hover { | ||
- | top: - | + | top: -200px; |
} | } | ||
Line 435: | Line 640: | ||
}); | }); | ||
</script> | </script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $(".pro").click(function(){ | ||
+ | $(".elemen").addClass("element"); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $(".attach").click(function(){ | ||
+ | $(".wordbox").animate({ | ||
+ | opacity:'1' | ||
+ | |||
+ | }); | ||
+ | $(".attach").animate({ | ||
+ | opacity:'0 ' | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | </script> |
Latest revision as of 03:55, 18 October 2014