Team:NCTU Formosa/source/head-index

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style>
<style>
 +
.ch-item {
 +
    width: 100%;
 +
    height: 100%;
 +
    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');
 +
}
 +
 +
 +
.ch-img-2 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-2.jpg');
 +
}
 +
 +
.ch-img-3 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-3.jpg');
 +
}
 +
.ch-img-4 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-4.jpg');
 +
}
 +
.ch-img-5 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-5.jpg');
 +
}
 +
.ch-img-6 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-6.jpg');
 +
}
 +
.ch-img-7 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-7.jpg');
 +
}
 +
.ch-img-7 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-7.jpg');
 +
}
 +
.ch-img-8 {
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d8/WIKI_8-8.jpg');
 +
}
 +
 +
.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;
 +
    border-top: 1px solid rgba(255,255,255,0.5);
 +
}
 +
 +
.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);
 +
}
    
    

Revision as of 14:32, 12 October 2014

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