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-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(https://2014.igem.org/File:NCTU_Formosa_2014_Cursor_Bluerayaim.png), crosshair;
+
 
}
}
#description {
#description {
-
background-image: url(https://static.igem.org/mediawiki/2014/c/ca/NCTU_wiki_Backdround.png);
+
background-image: url(https://static.igem.org/mediawiki/2014/5/5a/NCTU_wiki_Backdround.jpg);
-
 
+
background-position: center top;
-
cursor: url(https://2014.igem.org/File:NCTU_Formosa_2014_Cursor_Bluerayaim.png), crosshair;
+
margin-bottom:10pt;
}
}
#sitemap {
#sitemap {
-
background-image: url(https://static.igem.org/mediawiki/2014/c/c3/NCTU_Wiki%E4%B8%8B%E9%A6%96%E9%A0%81.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2014/6/60/BackgroundNCTU.png);
z-index:4;
z-index:4;
-
min-height: 750px!important;
+
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 {
-
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 388: Line 592:
.pictureContainer {
.pictureContainer {
-
     height: 250px;
+
     height: 200px;
-
     width: 250px;
+
     width: 200px;
     overflow: hidden;
     overflow: hidden;
cursor: pointer;
cursor: pointer;
float : left ;
float : left ;
margin:25pt;
margin:25pt;
 +
opacity: 0.9;
}
}
.picturebox {
.picturebox {
-
     height: 500px;
+
     height: 400px;
     width: 25px;
     width: 25px;
}
}
.upperbox, .lowerbox {
.upperbox, .lowerbox {
display: block;
display: block;
-
width: 250px;
+
width: 200px;
-
height: 250px;
+
height: 200px;
}
}
.lowerbox {
.lowerbox {
color: white;
color: white;
-
background: white;
+
 
text-align: center;
text-align: center;
vertical-align: middle;
vertical-align: middle;
Line 419: Line 624:
}
}
.pictureContainer .picturebox:hover {
.pictureContainer .picturebox:hover {
-
     top: -250px;
+
     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