Team:NCTU Formosa/source/head-index

From 2013.igem.org

(Difference between revisions)
 
(40 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
-
 
+
.effect {
 +
left: -100%;
 +
}
#footer-box a{
#footer-box a{
color: white;
color: white;
Line 30: Line 32:
background-image: url(https://static.igem.org/mediawiki/2013/9/9e/Nctu-bg4.jpg);
background-image: url(https://static.igem.org/mediawiki/2013/9/9e/Nctu-bg4.jpg);
z-index:4;
z-index:4;
-
padding-left:50px;
+
min-height: 900px!important;
-
padding-right:50px;
+
height: auto!important;
}
}
#decor {
#decor {
Line 38: Line 40:
}
}
#social {
#social {
 +
display:none;
background-color: black;
background-color: black;
background-image: url(https://static.igem.org/mediawiki/2013/6/6e/Nctu-bg3.jpg);
background-image: url(https://static.igem.org/mediawiki/2013/6/6e/Nctu-bg3.jpg);
Line 50: Line 53:
position:relative;
position:relative;
height: 900px;
height: 900px;
 +
display:block;
}
}
.box {
.box {
 +
display:block;
position: absolute;
position: absolute;
-
width: 75%;
+
width: 100%;
-
max-width: 500px;
+
top:200px;
-
top:100px;
+
left: 0;
left: 0;
color: white;
color: white;
-
background-image: url('https://static.igem.org/mediawiki/2013/6/6a/Nctu-grainb.png');
 
-
background-repeat: repeat;
 
-
padding: 30px;
 
text-align: right;
text-align: right;
-
-moz-box-shadow: 1px 1px 3px #000;
 
-
-webkit-box-shadow: 1px 1px 3px #000;
 
-
box-shadow: 1px 1px 3px #000;
 
-
-webkit-border-radius: 3px;
 
-
-moz-border-radius: 3px;
 
-
border-radius: 3px;
 
-
transform:rotate(-1deg);
 
-
-ms-transform:rotate(-1deg);
 
-
-webkit-transform:rotate(-1deg); 
 
cursor:pointer;
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 {
#description .title {
-
text-align: right;
+
position:relative;
-
font-family: Lobster Two;
+
text-indent:9999px;
-
font-size: 60px;
+
max-width:455px;
-
font-weight: bold;
+
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;
margin-bottom:10px;
-
color: #222;
 
-
text-shadow: 0px 2px 3px #555;
 
-
-webkit-transition: .5s;
 
-
-moz-transition: .5s;
 
-
-o-transition: .5s;
 
-
-ms-transition: .5s;
 
-
transition: .5s;
 
}
}
#description .team {
#description .team {
display:none;
display:none;
-
text-align: right;
 
-
font-family: Lobster Two;
 
-
font-size: 16px;
 
-
font-weight: 700;
 
-
color: #222;
 
-
text-shadow: 0px 2px 3px #555;
 
}
}
#description .wordbox {
#description .wordbox {
-
border-top: 1px solid #222;
+
margin-top:20px;
-
box-shadow: 0 -1px 0 0px #444;
+
-
color: #111;
+
-
margin-top:10px;
+
padding-top:20px;
padding-top:20px;
 +
font-weight:300;
width:100%;
width:100%;
font-family: Open Sans;
font-family: Open Sans;
-
font-size: 16px;
+
font-size: 18px;
text-align:justify;
text-align:justify;
text-justify:inter-word;
text-justify:inter-word;
text-indent: 50px;
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;
-webkit-transition: .5s;
-moz-transition: .5s;
-moz-transition: .5s;
Line 114: Line 154:
transition: .5s;
transition: .5s;
}
}
-
#description .title:hover {
+
/*
 +
#description .box:hover .moret
 +
#description .box:hover .title {
color: #fff;
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;
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 .wordbox:hover {
+
#description .box:hover .wordbox {
color: #fff;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 40px #7FFF00;
text-shadow: 0 0 10px #fff, 0 0 40px #7FFF00;
Line 171: Line 213:
right:-150px;
right:-150px;
}
}
 +
*/
#social #meritw {
#social #meritw {
display:block;
display:block;
Line 177: Line 220:
margin: 0 auto;
margin: 0 auto;
vertical-align: text-top;
vertical-align: text-top;
 +
}
 +
#sitemap > p {
 +
padding-top:5px;
 +
color: #eee;
 +
text-indent:30px;
 +
padding-left:50px;
 +
padding-right:70px;
 +
padding-bottom:30px;
}
}
.bigtitle {
.bigtitle {
Line 183: Line 234:
font-size: 35px;
font-size: 35px;
padding-left:50px;
padding-left:50px;
-
padding-top:30px;
+
padding-top:50px!important;
padding-bottom:15px;
padding-bottom:15px;
}
}
Line 206: Line 257:
color: white;
color: white;
width:400px;
width:400px;
-
margin:10px;
+
margin:25px;
padding:10px;
padding:10px;
vertical-align: text-top;
vertical-align: text-top;
Line 221: Line 272:
font-size:20px;
font-size:20px;
font-weight:700;
font-weight:700;
-
padding-left:10px;
+
padding-left:20px;
-
padding-right:10px;
+
padding-right:20px;
padding-top:5px!important;
padding-top:5px!important;
padding-bottom:5px!important;
padding-bottom:5px!important;
Line 228: Line 279:
background-color: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.5);
top:-10px;
top:-10px;
-
width:400px;
+
width:380px;
position:relative;
position:relative;
left:-10px;
left:-10px;
Line 234: Line 285:
#social .merit p {
#social .merit p {
padding-top:10px;
padding-top:10px;
 +
padding-left:10px;
 +
padding-right:10px;
text-indent:30px;
text-indent:30px;
}
}
Line 253: Line 306:
padding-right:5px;
padding-right:5px;
border-radius:3px;
border-radius:3px;
-
}
 
-
#sitemap .bigtitle {
 
-
 
}
}
#sitemap .seclink {
#sitemap .seclink {
display: block;
display: block;
-
background:white;
 
margin:10px;
margin:10px;
-
height:180px;
+
height:200px;
-
width:280px;
+
width:300px;
float:left;
float:left;
overflow: hidden;
overflow: hidden;
 +
color:white;
 +
border-radius:5px;
}
}
.seclink a {
.seclink a {
 +
position: relative;
display: block;
display: block;
 +
background:rgba(0,0,0,0);
height:100%;
height:100%;
width: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>
</style>

Latest revision as of 14:54, 25 October 2013

Retrieved from "http://2013.igem.org/Team:NCTU_Formosa/source/head-index"