Team:NCTU Formosa/source/head-index

From 2014.igem.org

(Difference between revisions)
 
(157 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-attachment: fixed;
+
background-position: 0 50%;
background-position: 0 50%;
background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-repeat: no-repeat;
-
height: 900px;
+
position: relative;
position: relative;
overflow: hidden;
overflow: hidden;
-
cursor: url(http://www.w3schools.com/cssref/smiley.gif), crosshair;
+
 
}
}
#description {
#description {
-
background-image: url(https://static.igem.org/mediawiki/2014/9/9f/Background-1.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/5/5a/NCTU_wiki_Backdround.jpg);
-
//cursor: url('http://www.anicursor.com/cursor.ani');
+
background-position: center top;
-
z-index:4;
+
margin-bottom:10pt;
}
}
#sitemap {
#sitemap {
-
background-image: url(https://static.igem.org/mediawiki/2013/9/9e/Nctu-bg4.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/6/60/BackgroundNCTU.png);
z-index:4;
z-index:4;
-
min-height: 900px!important;
+
background-size: cover;
 +
background-repeat: no-repeat;
 +
min-height: 650px!important;
height: auto!important;
height: auto!important;
 +
background-position: center top;
}
}
#decor {
#decor {
display:none;
display:none;
-
background-image: url(https://static.igem.org/mediawiki/2013/1/14/Nctu-bg2.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/9/9f/Background-1.jpg);
}
}
#social {
#social {
display:none;
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/2014/9/9f/Background-1.jpg);
min-height: 1300px!important;
min-height: 1300px!important;
height: auto!important;
height: auto!important;
Line 64: Line 258:
left: 0;
left: 0;
color: white;
color: white;
-
text-align: right;
+
 
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 {
+
-
position:relative;
+
-
text-indent:9999px;
+
-
max-width:455px;
+
-
width:100%;
+
-
height:118px;
+
-
background: url(https://static.igem.org/mediawiki/2014/2/2b/NCTU_Formosa2014logo.jpg) no-repeat;
+
-
background-size: contain!important;
+
-
margin: 0 auto;
+
-
margin-bottom:10px;
+
-
}
+
#description .team {
#description .team {
display:none;
display:none;
}
}
#description .wordbox {
#description .wordbox {
-
margin-top:20px;
+
top: -17%;
-
padding-top:20px;
+
padding:30pt;
font-weight:300;
font-weight:300;
-
width:100%;
+
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;
-
text-indent: 50px;
+
  background-color: rgba(156, 156, 156, 0.76);
-
margin-bottom:30px;
+
    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 109: Line 293:
padding-right: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 {
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
0% { -webkit-transform: rotate(0deg);}
Line 140: Line 315:
100% { transform: rotate(360deg);}
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 {
#description .box:hover .wordbox {
color: #fff;
color: #fff;
Line 309: Line 468:
border-radius:3px;
border-radius:3px;
}
}
-
#sitemap .sec_container {
+
#sitemap .seclink {
display: block;
display: block;
margin:10px;
margin:10px;
Line 315: Line 474:
width:300px;
width:300px;
float:left;
float:left;
 +
overflow: hidden;
color:white;
color:white;
border-radius:5px;
border-radius:5px;
-
position: relative;
 
}
}
.seclink a {
.seclink a {
Line 333: Line 492:
.seclink a:hover {
.seclink a:hover {
text-decoration:none;
text-decoration:none;
 +
background:rgba(0,0,0,0.5);
}
}
#sec1 {
#sec1 {
-
background: url(https://static.igem.org/mediawiki/2014/2/2b/NCTU_Formosa2014logo.jpg) no-repeat;
+
background: #c56d83;
}
}
#sec2 {
#sec2 {
background: #dd9056;
background: #dd9056;
-
 
}
}
#sec3 {
#sec3 {
Line 361: Line 520:
#sec9 {
#sec9 {
background: #a88c57;
background: #a88c57;
-
}
 
-
.seclink a, .seclink a:hover  {
 
-
cursor: url(http://www.w3schools.com/cssref/smiley.gif), crosshair;
 
}
}
.seclink a i {
.seclink a i {
-
text-align: center;
+
position:absolute;
font-size:100px;
font-size:100px;
 +
padding-left:100px;
 +
padding-top:10px;
 +
top:0;
opacity:1;
opacity:1;
-
z-index: 5;
+
-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 {
#seclinks {
Line 376: Line 553:
}
}
.seclink a p {
.seclink a p {
 +
position:absolute;
display:block;
display:block;
 +
top:200px;
padding:10px;
padding:10px;
text-indent:30px;
text-indent:30px;
Line 383: Line 562:
-o-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;  
transition: all 0.5s ease-in-out;  
 +
}
 +
.seclink a:hover p {
 +
top:0;
}
}
.seclink .smalltitle {
.seclink .smalltitle {
font-family: Lobster Two;
font-family: Lobster Two;
 +
position:absolute;
display:block;
display:block;
 +
top:130px;
 +
left:0px;
text-indent:0;
text-indent:0;
padding-left:30px;
padding-left:30px;
Line 392: Line 577:
opacity:1;
opacity:1;
}
}
-
.sec_container {
+
.seclink a:hover .smalltitle {
-
  position: relative;
+
top:100px;
-
  margin: 10px auto;
+
left:-50px;
-
  width: 300px;
+
font-size:100px;
-
  height: 200px;
+
opacity:0.5;
}
}
-
.sec_card {
+
.space {
-
  width: 100%;
+
clear:both;
-
  height: 100%;
+
height:50px;
-
-webkit-transform-style: preserve-3d;
+
-
-moz-transform-style: preserve-3d;
+
-
transform-style: preserve-3d;
+
-
-webkit-transition: 0.5s;
+
-
-moz-transition: 0.5s;
+
-
transition: 0.5s;
+
-
position: relative;
+
}
}
-
.sec_container .sec_card:hover {
+
#footer-text, #footer-text a, #footer-text a:hover {
-
  transform: rotateY(180deg);
+
color: white!important;
-
-webkit-transform: rotateY(180deg);
+
}
}
-
.sec_card.flip {
+
 
-
  transform: rotateY(180deg);
+
.pictureContainer {
-
-webkit-transform: rotateY(180deg);
+
    height: 200px;
 +
    width: 200px;
 +
    overflow: hidden;
 +
cursor: pointer;
 +
float : left ;
 +
margin:25pt;
 +
opacity: 0.9;
}
}
-
.sec_card {
+
.picturebox {
-
  width: 100%;
+
    height: 400px;
-
  height: 100%;
+
    width: 25px;
-
  transform-style: preserve-3d;
+
-
  transition: all 0.5s linear;
+
-
position: relative;
+
}
}
-
.sec_card .smalltitle, .sec_card i {
+
.upperbox, .lowerbox {
display: block;
display: block;
-
  position: absolute;
+
width: 200px;
-
top: 0px;
+
height: 200px;
-
left: 0px;
+
-
  width: 100%;
+
-
  height: 100%;
+
-
    -webkit-backface-visibility: hidden; 
+
-
    -moz-backface-visibility: hidden; 
+
-
    backface-visibility: hidden;
+
}
}
-
.sec_card .smalltitle {
+
 
-
    -webkit-transform: rotateY(180deg);
+
.lowerbox {
-
    -moz-transform: rotateY(180deg); 
+
color: white;
-
    transform: rotateY(180deg); 
+
 
-
  box-sizing: border-box;
+
text-align: center;
-
  padding: 10px;
+
vertical-align: middle;
-
  color: white;
+
-
  text-align: center;
+
}
}
-
.space {
+
 
-
clear:both;
+
.pictureContainer .picturebox {
-
height:50px;
+
    position: relative;
 +
    top: 0px;
 +
    transition: top .2s ease-in-out;
 +
    float : left ;
}
}
-
#footer-text, #footer-text a, #footer-text a:hover {
+
.pictureContainer .picturebox:hover {
-
color: white!important;
+
    top: -200px;
}
}
 +
</style>
</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>
Line 461: Line 637:
});
});
   $(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://2014.igem.org/Team:NCTU_Formosa/project'; });
   });
   });
 +
</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>
+
  });
 +
});
 +
 
 +
 
 +
</script>

Latest revision as of 03:55, 18 October 2014

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