Team:USTC-Software/css/team style
From 2012.igem.org
(Difference between revisions)
Line 165: | Line 165: | ||
div.details_member_name p.h1{ | div.details_member_name p.h1{ | ||
color:white; | color:white; | ||
+ | font-size:50px; | ||
+ | line-height:50px; | ||
+ | font-family:'Coda', sans-serif; | ||
+ | } | ||
+ | div.member_photo{ | ||
+ | height:450px; | ||
+ | width:450px; | ||
+ | position:absolute; | ||
+ | bottom:0px; | ||
+ | left:100px; | ||
+ | } | ||
+ | |||
+ | #photo_chao{ | ||
+ | background:url('../images/photo_chao.png') no-repeat; | ||
+ | } | ||
+ | |||
+ | div.resume{ | ||
+ | width:400px; | ||
+ | position:absolute; | ||
+ | top:150px; | ||
+ | left:650px; | ||
+ | } | ||
+ | div.resume p{ | ||
+ | color:white; | ||
+ | font-size:18px; | ||
+ | font-family: 'Petit Formal Script', cursive; | ||
+ | } | ||
+ | div.resume p+p{ | ||
+ | text-indent:2em; | ||
+ | } | ||
+ | /* styles for the thumbnail section */ | ||
+ | #member_feature_wrapper{ | ||
+ | width:100%; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png'); | ||
+ | margin:80px auto; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | padding:5px auto; | ||
+ | } | ||
+ | |||
+ | #members{ | ||
+ | width:980px; | ||
+ | height:550px; | ||
+ | position:relative; | ||
+ | margin-top:50px; | ||
+ | margin-bottom:100px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | |||
+ | #meet-team{ | ||
+ | width:336px; | ||
+ | height:60px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/0/0b/USTC-Software-images-meet-team.png') no-repeat; | ||
+ | position:absolute; | ||
+ | top:-50px; | ||
+ | left:-100px; | ||
+ | } | ||
+ | |||
+ | .member{ | ||
+ | position:absolute; | ||
+ | margin:50px auto; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | #member-kai{ | ||
+ | top:10px; | ||
+ | left:0px; | ||
+ | width:183px; | ||
+ | height:473px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/0/01/USTC-Software-images-kai-whole.png'); | ||
+ | z-index:10; | ||
+ | } | ||
+ | #member-kai div.member-name{ | ||
+ | left:25px; | ||
+ | } | ||
+ | #member-kaifeng{ | ||
+ | top:0px; | ||
+ | left:150px; | ||
+ | width:142px; | ||
+ | height:470px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/4/47/USTC-Software-images-kaifeng-whole.png'); | ||
+ | z-index:0; | ||
+ | } | ||
+ | #member-chao{ | ||
+ | top:15px; | ||
+ | left:270px; | ||
+ | width:134px; | ||
+ | height:472px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/4/46/USTC-Software-images-chao-whole.png'); | ||
+ | z-index:10; | ||
+ | } | ||
+ | #member-litong{ | ||
+ | top:25px; | ||
+ | left:390px; | ||
+ | width:159px; | ||
+ | height:465px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/a/aa/USTC-Software-images-litong-whole.png'); | ||
+ | z-index:20; | ||
+ | } | ||
+ | #member-kaishuai{ | ||
+ | top:-5px; | ||
+ | left:530px; | ||
+ | width:150px; | ||
+ | height:470px; | ||
+ | z-index:0; | ||
+ | border: 1px solid #999; | ||
+ | } | ||
+ | #member-sen{ | ||
+ | top:0; | ||
+ | left:660px; | ||
+ | width:150px; | ||
+ | height:478px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/a/ae/USTC-Software-images-sen-whole.png'); | ||
+ | z-index:10; | ||
+ | } | ||
+ | #member-qi{ | ||
+ | top:10px; | ||
+ | left:780px; | ||
+ | width:197px; | ||
+ | height:462px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/2/29/USTC-Software-images-qi-whole.png'); | ||
+ | z-index:0; | ||
+ | } | ||
+ | #member-qi .member-name{ | ||
+ | left:30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .member div.member-name{ | ||
+ | height:60px; | ||
+ | width:150px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/2/2c/USTC-Software-images-member-name-bg.png') no-repeat; | ||
+ | position:absolute; | ||
+ | top:-45px; | ||
+ | z-index:1000; | ||
+ | |||
+ | opacity:0; | ||
+ | |||
+ | } | ||
+ | .member div.member-name h5{ | ||
+ | display:block; | ||
+ | text-align:center; | ||
+ | color:white; | ||
+ | font-size:18px; | ||
+ | font-family: 'Coda', sans-serif; | ||
+ | } | ||
+ | |||
+ | .member:hover div.member-name{ | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | #slogon{ | ||
+ | width:580px; | ||
+ | height:125px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/d/db/USTC-Software-images-slogon.png'); | ||
+ | position:absolute; | ||
+ | right:-120px; | ||
+ | bottom:-50px; | ||
+ | z-index:1000; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* style for the detail section */ | ||
+ | div.member_details{ | ||
+ | width:100%; | ||
+ | height:550px; | ||
+ | position:fixed; | ||
+ | bottom:0px; | ||
+ | background:white; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | div.detail_close{ | ||
+ | height:29px; | ||
+ | width:29px; | ||
+ | background:url('https://static.igem.org/mediawiki/2012/e/e4/USTC-Software-images-close.png') no-repeat; | ||
+ | background-position: 0px -30px; | ||
+ | z-index:9999; | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | left:10px; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | div.detail_close:hover{ | ||
+ | background-position: 0px 0px; | ||
+ | } | ||
+ | |||
+ | div.details_member_name{ | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:100px; | ||
+ | } | ||
+ | div.details_member_name p.h1{ | ||
+ | color:black; | ||
font-size:50px; | font-size:50px; | ||
line-height:50px; | line-height:50px; |
Revision as of 15:25, 25 September 2012
/* styles for the thumbnail section */
- member_feature_wrapper{
width:100%; background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png'); margin:80px auto; margin-left:auto; margin-right:auto; padding:5px auto;
}
- members{
width:980px; height:550px; position:relative; margin-top:50px; margin-bottom:100px; margin-left:auto; margin-right:auto;
}
- meet-team{
width:336px; height:60px; background:url('https://static.igem.org/mediawiki/2012/0/0b/USTC-Software-images-meet-team.png') no-repeat; position:absolute; top:-50px; left:-100px;
}
.member{
position:absolute; margin:50px auto; cursor:pointer;
}
- member-kai{
top:10px; left:0px; width:183px; height:473px; background:url('https://static.igem.org/mediawiki/2012/0/01/USTC-Software-images-kai-whole.png'); z-index:10; } #member-kai div.member-name{ left:25px; }
- member-kaifeng{
top:0px; left:150px; width:142px; height:470px; background:url('https://static.igem.org/mediawiki/2012/4/47/USTC-Software-images-kaifeng-whole.png'); z-index:0;
}
- member-chao{
top:15px; left:270px; width:134px; height:472px; background:url('https://static.igem.org/mediawiki/2012/4/46/USTC-Software-images-chao-whole.png'); z-index:10;
}
- member-litong{
top:25px; left:390px; width:159px; height:465px; background:url('https://static.igem.org/mediawiki/2012/a/aa/USTC-Software-images-litong-whole.png'); z-index:20;
}
- member-kaishuai{
top:-5px; left:530px; width:150px; height:470px; z-index:0; border: 1px solid #999;
}
- member-sen{
top:0; left:660px; width:150px; height:478px; background:url('https://static.igem.org/mediawiki/2012/a/ae/USTC-Software-images-sen-whole.png'); z-index:10;
}
- member-qi{
top:10px; left:780px; width:197px; height:462px; background:url('https://static.igem.org/mediawiki/2012/2/29/USTC-Software-images-qi-whole.png'); z-index:0; } #member-qi .member-name{ left:30px; }
.member div.member-name{
height:60px; width:150px; background:url('https://static.igem.org/mediawiki/2012/2/2c/USTC-Software-images-member-name-bg.png') no-repeat; position:absolute; top:-45px; z-index:1000; opacity:0; } .member div.member-name h5{ display:block; text-align:center; color:white; font-size:18px; font-family: 'Coda', sans-serif; }
.member:hover div.member-name{
opacity:1;
}
- slogon{
width:580px; height:125px; background:url('https://static.igem.org/mediawiki/2012/d/db/USTC-Software-images-slogon.png'); position:absolute; right:-120px; bottom:-50px; z-index:1000;
}
/* style for the detail section */
div.member_details{
width:100%; height:550px; position:fixed; bottom:0px; background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png'); z-index:10000;
}
div.detail_close{
height:29px; width:29px; background:url('https://static.igem.org/mediawiki/2012/e/e4/USTC-Software-images-close.png') no-repeat; background-position: 0px -30px; z-index:9999; position:absolute; top:10px; left:10px; cursor:pointer; } div.detail_close:hover{ background-position: 0px 0px; }
div.details_member_name{
position:absolute; top:0px; left:100px; } div.details_member_name p.h1{ color:white; font-size:50px; line-height:50px; font-family:'Coda', sans-serif; }
div.member_photo{
height:450px; width:450px; position:absolute; bottom:0px; left:100px;
}
- photo_chao{
background:url('../images/photo_chao.png') no-repeat;
}
div.resume{
width:400px; position:absolute; top:150px; left:650px; } div.resume p{ color:white; font-size:18px; font-family: 'Petit Formal Script', cursive; } div.resume p+p{ text-indent:2em; }
/* styles for the thumbnail section */
- member_feature_wrapper{
width:100%; background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png'); margin:80px auto; margin-left:auto; margin-right:auto; padding:5px auto;
}
- members{
width:980px; height:550px; position:relative; margin-top:50px; margin-bottom:100px; margin-left:auto; margin-right:auto;
}
- meet-team{
width:336px; height:60px; background:url('https://static.igem.org/mediawiki/2012/0/0b/USTC-Software-images-meet-team.png') no-repeat; position:absolute; top:-50px; left:-100px;
}
.member{
position:absolute; margin:50px auto; cursor:pointer;
}
- member-kai{
top:10px; left:0px; width:183px; height:473px; background:url('https://static.igem.org/mediawiki/2012/0/01/USTC-Software-images-kai-whole.png'); z-index:10; } #member-kai div.member-name{ left:25px; }
- member-kaifeng{
top:0px; left:150px; width:142px; height:470px; background:url('https://static.igem.org/mediawiki/2012/4/47/USTC-Software-images-kaifeng-whole.png'); z-index:0;
}
- member-chao{
top:15px; left:270px; width:134px; height:472px; background:url('https://static.igem.org/mediawiki/2012/4/46/USTC-Software-images-chao-whole.png'); z-index:10;
}
- member-litong{
top:25px; left:390px; width:159px; height:465px; background:url('https://static.igem.org/mediawiki/2012/a/aa/USTC-Software-images-litong-whole.png'); z-index:20;
}
- member-kaishuai{
top:-5px; left:530px; width:150px; height:470px; z-index:0; border: 1px solid #999;
}
- member-sen{
top:0; left:660px; width:150px; height:478px; background:url('https://static.igem.org/mediawiki/2012/a/ae/USTC-Software-images-sen-whole.png'); z-index:10;
}
- member-qi{
top:10px; left:780px; width:197px; height:462px; background:url('https://static.igem.org/mediawiki/2012/2/29/USTC-Software-images-qi-whole.png'); z-index:0; } #member-qi .member-name{ left:30px; }
.member div.member-name{
height:60px; width:150px; background:url('https://static.igem.org/mediawiki/2012/2/2c/USTC-Software-images-member-name-bg.png') no-repeat; position:absolute; top:-45px; z-index:1000; opacity:0; } .member div.member-name h5{ display:block; text-align:center; color:white; font-size:18px; font-family: 'Coda', sans-serif; }
.member:hover div.member-name{
opacity:1;
}
- slogon{
width:580px; height:125px; background:url('https://static.igem.org/mediawiki/2012/d/db/USTC-Software-images-slogon.png'); position:absolute; right:-120px; bottom:-50px; z-index:1000;
}
/* style for the detail section */
div.member_details{
width:100%; height:550px; position:fixed; bottom:0px; background:white; z-index:10000;
}
div.detail_close{
height:29px; width:29px; background:url('https://static.igem.org/mediawiki/2012/e/e4/USTC-Software-images-close.png') no-repeat; background-position: 0px -30px; z-index:9999; position:absolute; top:10px; left:10px; cursor:pointer; } div.detail_close:hover{ background-position: 0px 0px; }
div.details_member_name{
position:absolute; top:0px; left:100px; } div.details_member_name p.h1{ color:black; font-size:50px; line-height:50px; font-family:'Coda', sans-serif; }
div.member_photo{
height:450px; width:450px; position:absolute; bottom:0px; left:100px;
}
- photo_chao{
background:url('../images/photo_chao.png') no-repeat;
}
div.resume{
width:400px; position:absolute; top:150px; left:650px; } div.resume p{ color:white; font-size:18px; font-family: 'Petit Formal Script', cursive; } div.resume p+p{ text-indent:2em; }