Team:USTC-Software/css/team style

From 2012.igem.org

(Difference between revisions)
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{
 +
     border: 1px solid #999;
 +
    width:150px;
 +
    height:450px;
 +
    position:absolute;
 +
    margin:50px auto;
 +
    cursor:pointer;
 +
}
 +
 
 +
#member-kai{
 +
    top:10px;
 +
    left:0px;
 +
}
 +
#member-kaifeng{
 +
    top:0px;
 +
    left:100px;
 +
}
 +
#member-chao{
 +
    top:15px;
 +
    left:200px;
 +
}
 +
#member-litong{
 +
    top:25px;
 +
    left:300px;
 +
}
 +
#member-kaishuai{
 +
    top:-5px;
 +
    left:400px;
 +
}
 +
#member-sen{
 +
    top:0;
 +
    left:500px;
 +
}
 +
#member-qi{
 +
    top:10px;
 +
    left:600px;
 +
}
 +
#member-wenjuan{
 +
    top:25px;
 +
    left:700px;
 +
}
 +
#member-yunlong{
 +
    top:-5px;
 +
    left:800px;
 +
}
 +
 
 +
.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: 'Bubbler One', sans-serif;
 +
        margin-top:5px;
 +
    }
      
      
-
    <!-- 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>
+
}
-
            <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>
+
 
-
       
+
/* style for the detail section */
-
            <!-- team logo -->
+
div.member_details{
-
            <div id="slogon"></div>
+
    width:100%;
-
        </div>
+
    height:550px;
-
     </div>
+
    position:fixed;
-
     <!-- end of members' thumbnails -->
+
    bottom:100px;
 +
    background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png');
 +
}
 +
 
 +
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;
 +
    }
      
      
-
     <!-- 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 h1{
-
            </div>
+
        color:white;
-
            <div class="member_photo" id="photo_kai"></div>
+
         font-size:50px;
-
            <div class="resume">
+
         font-family:'Bubbler One', 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.member_photo{
-
         </div>
+
    height:450px;
-
         <div class="member_details" id="member-kaifeng-details">
+
    width:450px;
-
            <div class="detail_close"></div>
+
    position:absolute;
-
            <div class="details_member_name">
+
    bottom:0px;
-
                <p class="h1">Kaifeng Chen</p>
+
    left:100px;
-
            </div>
+
}
-
            <div class="member_photo" id="photo_kaifeng"> </div>
+
 
-
            <div class="resume">
+
#photo_chao{
-
                <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('../images/photo_chao.png') no-repeat;
-
            </div>
+
}
-
        </div>
+
 
-
        <div class="member_details" id="member-chao-details">
+
div.resume{
-
            <div class="detail_close"></div>
+
    width:400px;
-
            <div class="details_member_name">
+
    position:absolute;
-
                <p class="h1">Chao Xu</p>
+
    top:150px;
-
            </div>
+
    left:650px;
-
            <div class="member_photo" id="photo_chao"></div>
+
    }
-
            <div class="resume">
+
    div.resume p{
-
                <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>
+
         color:white;
-
            </div>
+
         font-size:18px;
-
        </div>
+
         font-family: 'Petit Formal Script', cursive;
-
        <div class="member_details" id="member-litong-details">
+
         }
-
            <div class="detail_close"></div>
+
         div.resume p+p{
-
            <div class="details_member_name">
+
             text-indent:2em;
-
                <p class="h1">Litong Jiang</p>
+
         }
-
            </div>
+
-
            <div class="member_photo" id="photo_litong"> </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-kaishuai-details">
+
-
            <div class="detail_close"></div>
+
-
            <div class="details_member_name">
+
-
                <p class="h1">Kaishuai Yang</p>
+
-
            </div>
+
-
            <div class="member_photo" id="photo_kaishuai"></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-sen-details">
+
-
            <div class="detail_close"></div>
+
-
            <div class="details_member_name">
+
-
                <p class="h1">Sen Jiang</p>
+
-
            </div>
+
-
            <div class="member_photo" id="photo_sen"></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-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>
+

Revision as of 12:01, 24 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{ 

   border: 1px solid #999;
   width:150px;
   height:450px;
   position:absolute;
   margin:50px auto;
   cursor:pointer;

}

  1. member-kai{ 
   top:10px;
   left:0px;

}

  1. member-kaifeng{ 
   top:0px;
   left:100px;

}

  1. member-chao{ 
   top:15px;
   left:200px;

}

  1. member-litong{ 
   top:25px;
   left:300px;

}

  1. member-kaishuai{ 
   top:-5px;
   left:400px;

}

  1. member-sen{ 
   top:0;
   left:500px;

}

  1. member-qi{ 
   top:10px;
   left:600px;

}

  1. member-wenjuan{ 
   top:25px;
   left:700px;

}

  1. member-yunlong{ 
   top:-5px;
   left:800px;

}

.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: 'Bubbler One', sans-serif;
       margin-top:5px;
   }

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

}


/* style for the detail section */ div.member_details{ 

   width:100%;
   height:550px;
   position:fixed;
   bottom:100px;
   background:url('https://static.igem.org/mediawiki/2012/d/de/USTC-Software-images-half-black.png');

}

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 h1{
       color:white;
       font-size:50px;
       font-family:'Bubbler One', sans-serif;
   }

div.member_photo{ 

   height:450px;
   width:450px;
   position:absolute;
   bottom:0px;
   left:100px;

}

  1. 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;
       }
Retrieved from "http://2012.igem.org/Team:USTC-Software/css/team_style"