Team:USTC-Software/css/team style

From 2012.igem.org

(Difference between revisions)
 
(28 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Team:USTC-Software/hidden}}
+
/*  styles for the thumbnail section */
-
{{Template:Team:USTC-Software/global_header}}
+
#member_feature_wrapper{
-
<html>
+
    width:100%;
-
<head>
+
    background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png');
-
     <title>USTC-Software Team</title>
+
    margin:80px auto;
-
     <link rel="stylesheet" href="https://2012.igem.org/Team:USTC-Software/css/style?action=raw&ctype=text/css" type="text/css"/>
+
    margin-left:auto;
-
     <link rel="stylesheet" href="https://2012.igem.org/Team:USTC-Software/css/team_style?action=raw&ctype=text/css" type="text/css" media="screen" title="no title" charset="utf-8">
+
    margin-right:auto;
-
     <link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'>
+
    padding:5px auto;
-
     <link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
+
}
-
     <link href='http://fonts.googleapis.com/css?family=Coda' rel='stylesheet' type='text/css'>
+
 
-
     <script src="https://2012.igem.org/Team:USTC-Software/js/jquery-1.7.1.min?action=raw&ctype=text/javascript" type="text/javascript" charset="utf-8"></script>
+
#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:128px;
 +
    height:469px;
 +
    z-index:0;
 +
    background:url('https://static.igem.org/mediawiki/2012/c/ca/USTC-Software-images-kaishuai-whole.png');
 +
     }
 +
    #member-kaishuai div.member-name{
 +
          left:-25px;
 +
      }
 +
#member-sen{
 +
    top:0;
 +
    left:635px;
 +
    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:755px;
 +
    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;
      
      
-
     <script type="text/javascript">
+
     opacity:0;
-
        $(document).ready(function(){
+
-
            $('div.member_details').hide();
+
-
            $('div.member').click(function(){
+
-
                $('div.member_details').hide();
+
-
                var detail = $(this).attr('id');
+
-
                $('div#'+detail+'-details').fadeIn('slow'); //  display the coresponding details
+
-
            });
+
-
            $('div.detail_close').click(function(){
+
-
                $(this).parents('div.member_details').fadeOut('speed'); //  close the coresponding details
+
-
            });
+
-
        });
+
-
    </script>
+
      
      
-
</head>
+
    }
-
<body>
+
    .member div.member-name h5{
 +
        display:block;
 +
        text-align:center;
 +
        color:white;
 +
        font-size:18px;
 +
        font-family: 'Coda', sans-serif;
 +
    }
      
      
-
    <!-- members' thumbnails -->
+
.member:hover div.member-name{
-
     <div id="member_feature_wrapper">
+
     opacity:1;
-
        <div id="members">
+
}
-
            <div id="meet-team"></div>
+
 
-
           
+
#slogon{
-
            <div class="member" id="member-kai">     <div class="member-name"><h5>Kai Kang</h5></div>    </div>
+
     width:580px;
-
            <div class="member" id="member-kaifeng"> <div class="member-name"><h5>Kaifeng Chen</h5></div>    </div>
+
    height:125px;
-
            <div class="member" id="member-chao">    <div class="member-name"><h5>Chao Xu</h5></div>    </div>
+
    background:url('https://static.igem.org/mediawiki/2012/d/db/USTC-Software-images-slogon.png');
-
            <div class="member" id="member-litong">  <div class="member-name"><h5>Litong Jiang</h5></div>    </div>
+
    position:absolute;
-
            <div class="member" id="member-kaishuai"><div class="member-name"><h5>Kaishuai Yang</h5></div>    </div>
+
    right:-120px;
-
            <div class="member" id="member-sen">     <div class="member-name"><h5>Sen Jiang</h5></div>    </div>
+
    bottom:-50px;
-
            <div class="member" id="member-qi">      <div class="member-name"><h5>Qi Hu</h5></div>    </div>
+
    z-index:1000;
-
            <div class="member" id="member-wenjuan"> <div class="member-name"><h5>Wenjuan Zhang</h5></div>    </div>
+
}
-
            <div class="member" id="member-yunlong"> <div class="member-name"><h5>Yunlong Zheng</h5></div>    </div>
+
 
-
       
+
 
-
            <!-- team logo -->
+
/* style for the detail section */
-
            <div id="slogon"></div>
+
div.member_details{
-
        </div>
+
    width:100%;
-
     </div>
+
    height:550px;
-
     <!-- end of members' thumbnails -->
+
     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:50px;
 +
    left:10px;
 +
     cursor:pointer;
 +
    }
 +
    div.detail_close:hover{
 +
        background-position: 0px 0px;
 +
    }
      
      
-
     <!-- members' details -->
+
div.details_member_name{
-
     <div id="member_details_wrapper">
+
     position:absolute;
-
        <div class="member_details" id="member-kai-details">
+
     top:0px;
-
            <div class="detail_close"></div>
+
    left:100px;
-
            <div class="details_member_name">
+
    }
-
                <p class="h1">Kai Kang</p>
+
    div.details_member_name p.h1{
-
            </div>
+
        color:black;
-
            <div class="member_photo" id="photo_kai"></div>
+
        font-size:50px;
-
            <div class="resume">
+
         line-height:50px;
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
         font-family:'Coda', sans-serif;
-
            </div>
+
    }
-
         </div>
+
div.member_photo{
-
         <div class="member_details" id="member-kaifeng-details">
+
    height:450px;
-
            <div class="detail_close"></div>
+
    width:450px;
-
            <div class="details_member_name">
+
    position:absolute;
-
                <p class="h1">Kaifeng Chen</p>
+
    bottom:0px;
-
            </div>
+
    left:100px;
-
            <div class="member_photo" id="photo_kaifeng"> </div>
+
}
-
            <div class="resume">
+
#photo_kai{
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
    background:url('https://static.igem.org/mediawiki/2012/1/10/USTC-Software-images-kai-half.png') no-repeat;
-
            </div>
+
}
-
        </div>
+
#photo_kaifeng{
-
        <div class="member_details" id="member-chao-details">
+
    background:url('https://static.igem.org/mediawiki/2012/b/b6/USTC-Software-images-kaifeng-half.png') no-repeat;
-
            <div class="detail_close"></div>
+
}
-
            <div class="details_member_name">
+
 
-
                <p class="h1">Chao Xu</p>
+
 
-
            </div>
+
#photo_litong{
-
            <div class="member_photo" id="photo_chao"></div>
+
    background:url('https://static.igem.org/mediawiki/2012/d/dc/USTC-Software-images-litong-half.png') no-repeat;
-
            <div class="resume">
+
}
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
#photo_chao{
-
            </div>
+
    background:url('https://static.igem.org/mediawiki/2012/d/d3/USTC-Software-images-chao-half.png') no-repeat;
-
        </div>
+
}
-
        <div class="member_details" id="member-litong-details">
+
 
-
            <div class="detail_close"></div>
+
#photo_kaishuai{
-
            <div class="details_member_name">
+
    background:url('https://static.igem.org/mediawiki/2012/c/c2/USTC-Software-images-kaishuai-half.png') no-repeat;
-
                <p class="h1">Litong Jiang</p>
+
}
-
            </div>
+
 
-
            <div class="member_photo" id="photo_litong"> </div>
+
#photo_sen{
-
            <div class="resume">
+
    background:url('https://static.igem.org/mediawiki/2012/c/c1/USTC-Software-images-sen-half.png') no-repeat;
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
}
-
            </div>
+
 
-
        </div>
+
#photo_qi{
-
        <div class="member_details" id="member-kaishuai-details">
+
    background:url('https://static.igem.org/mediawiki/2012/f/f3/USTC-Software-images-qi-half.png') no-repeat;
-
            <div class="detail_close"></div>
+
}
-
            <div class="details_member_name">
+
 
-
                <p class="h1">Kaishuai Yang</p>
+
 
-
            </div>
+
div.resume{
-
            <div class="member_photo" id="photo_kaishuai"></div>
+
    width:400px;
-
            <div class="resume">
+
    height:480px;
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
    padding:10px 20px;
-
            </div>
+
     overflow: scroll;
-
        </div>
+
    position:absolute;
-
        <div class="member_details" id="member-sen-details">
+
     top:100px;
-
            <div class="detail_close"></div>
+
     left:650px;
-
            <div class="details_member_name">
+
     }
-
                <p class="h1">Sen Jiang</p>
+
     div.resume p{
-
            </div>
+
        color:black;
-
            <div class="member_photo" id="photo_sen"></div>
+
        font-size:16px;
-
            <div class="resume">
+
        font-family: 'Source Code Pro', sans-serif;
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
        }
-
            </div>
+
        div.resume p+p{
-
        </div>
+
            text-indent:2em;
-
        <div class="member_details" id="member-qi-details">
+
        }
-
            <div class="detail_close"></div>
+
-
            <div class="details_member_name">
+
-
                <p class="h1">Qi Hu</p>
+
-
            </div>
+
-
            <div class="member_photo" id="photo_qi"></div>
+
-
            <div class="resume">
+
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
-
            </div>
+
-
        </div>
+
-
        <div class="member_details" id="member-wenjuan-details">
+
-
            <div class="detail_close"></div>
+
-
            <div class="details_member_name">
+
-
                <p class="h1">Wenjuan Zhang</p>
+
-
            </div>
+
-
            <div class="member_photo" id="photo_wenjuan"></div>
+
-
            <div class="resume">
+
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
-
            </div>
+
-
        </div>
+
-
        <div class="member_details" id="member-yunlong-details">
+
-
            <div class="detail_close"></div>
+
-
            <div class="details_member_name">
+
-
                <p class="h1">Yunlong Zheng</p>
+
-
            </div>
+
-
            <div class="member_photo" id="photo_yunlong"></div>
+
-
            <div class="resume">
+
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
-
            </div>
+
-
        </div>
+
-
     </div>
+
-
       
+
-
     </div>
+
-
      
+
-
     <div id="thanks"></div>
+
-
     <div id="links"></div>
+
-
</body>
+
-
</html>
+

Latest revision as of 17:28, 26 September 2012

/* styles for the thumbnail section */

  1. 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;

}

  1. members{ 
   width:980px;
   height:550px;
   position:relative;
   margin-top:50px;
   margin-bottom:100px;
   margin-left:auto;
   margin-right:auto;

}

  1. 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;

}

  1. 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;
   }
  1. 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;

}

  1. 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;

}

  1. 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;

}

  1. member-kaishuai{ 
   top:-5px;
   left:530px;
   width:128px;
   height:469px;
   z-index:0;
   background:url('https://static.igem.org/mediawiki/2012/c/ca/USTC-Software-images-kaishuai-whole.png');
   }
   #member-kaishuai div.member-name{
          left:-25px;
      }
  1. member-sen{ 
   top:0;
   left:635px;
   width:150px;
   height:478px;
   background:url('https://static.igem.org/mediawiki/2012/a/ae/USTC-Software-images-sen-whole.png');
   z-index:10;

}

  1. member-qi{ 
   top:10px;
   left:755px;
   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;

}

  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:50px;
   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;

}

  1. photo_kai{ 
   background:url('https://static.igem.org/mediawiki/2012/1/10/USTC-Software-images-kai-half.png') no-repeat;

}

  1. photo_kaifeng{ 
   background:url('https://static.igem.org/mediawiki/2012/b/b6/USTC-Software-images-kaifeng-half.png') no-repeat;

}


  1. photo_litong{ 
   background:url('https://static.igem.org/mediawiki/2012/d/dc/USTC-Software-images-litong-half.png') no-repeat;

}

  1. photo_chao{ 
   background:url('https://static.igem.org/mediawiki/2012/d/d3/USTC-Software-images-chao-half.png') no-repeat;

}

  1. photo_kaishuai{ 
   background:url('https://static.igem.org/mediawiki/2012/c/c2/USTC-Software-images-kaishuai-half.png') no-repeat;

}

  1. photo_sen{ 
   background:url('https://static.igem.org/mediawiki/2012/c/c1/USTC-Software-images-sen-half.png') no-repeat;

}

  1. photo_qi{ 
   background:url('https://static.igem.org/mediawiki/2012/f/f3/USTC-Software-images-qi-half.png') no-repeat;

}


div.resume{ 

   width:400px;
   height:480px;
   padding:10px 20px;
   overflow: scroll;
   position:absolute;
   top:100px;
   left:650px;
   }
   div.resume p{
       color:black;
       font-size:16px;
       font-family: 'Source Code Pro', sans-serif;
       }
       div.resume p+p{
           text-indent:2em;
       }
Retrieved from "http://2012.igem.org/Team:USTC-Software/css/team_style"