Difference between revisions of "Team:CHINA CD UESTC/Gallery"

 
(24 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Template:Team:CHINA_CD_UESTC/menu}}
 
{{Template:Team:CHINA_CD_UESTC/menu}}
 +
{{Template:Team:CHINA_CD_UESTC/cssstyle}}
 +
 +
 +
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
 
<html >
 
<html >
 
<head>
 
<head>
−
    <script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>
 
  
−
    <link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
 
 
</head>
 
</head>
 
     <style type="text/css">
 
     <style type="text/css">
Line 34: Line 35:
 
#RightContentText {
 
#RightContentText {
 
     background:rgba(35, 37, 35, 0.26)
 
     background:rgba(35, 37, 35, 0.26)
−
}
 
−
/**************gallery******************/
 
−
.gallery-items {
 
−
    width:970px;
 
−
    height: 1000px;
 
−
    margin:100px 0 0 70px;
 
−
    position: relative;
 
−
    left: -150px;
 
−
}
 
−
.gallery-items a {
 
−
    display:inline-block;
 
−
    height:150px;
 
−
    position:relative;
 
−
    width:230px;
 
−
    margin-left: 10px;
 
−
    margin-right: 10px;
 
−
    margin-top: 10px;
 
−
}
 
−
.gallery-items a img {
 
−
    cursor:pointer;
 
−
    display:inline-block;
 
−
    height:100%;
 
−
    left:0px;
 
−
    position:absolute;
 
−
    top:0px;
 
−
    width:100%;
 
−
    z-index:0;
 
−
    border: 10px solid #fff;
 
−
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 
−
 
−
 
−
    -moz-user-select: none;
 
−
    -khtml-user-select: none;
 
−
    user-select: none;
 
−
 
−
    -moz-box-sizing:border-box;
 
−
    -webkit-box-sizing:border-box;
 
−
    box-sizing:border-box;
 
−
 
−
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    -webkit-transition-duration:0.5s;
 
−
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    -moz-transition-duration:0.5s;
 
−
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    -o-transition-duration:0.5s;
 
−
    transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    transition-duration:0.5s;
 
−
}
 
−
.gallery-items li:hover img{
 
−
    border:15px solid #fff;
 
−
    cursor:default;
 
−
    height:190%;
 
−
    position:absolute;
 
−
    width:190%;
 
−
    z-index:51;
 
−
 
−
    box-shadow:1px 1px 5px #888;
 
−
    -moz-box-shadow:1px 1px 5px #888;
 
−
    -webkit-box-shadow:1px 1px 5px #888;
 
−
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    -webkit-transition-duration:0.5s;
 
−
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    -moz-transition-duration:0.5s;
 
−
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    -o-transition-duration:0.5s;
 
−
    transition-property:width, height, top, bottom, left, right, z-index, border;
 
−
    transition-duration:0.5s;
 
−
}
 
−
 
−
/* custom focus rules */
 
−
.gallery-items li:hover:nth-child(3n+1) img{
 
−
    left: -100px;
 
−
    z-index: 50;
 
−
}
 
−
.gallery-items li:hover:nth-child(3n+2) img{
 
−
    left:-200px;
 
−
    z-index: 50;
 
−
 
−
}
 
−
.gallery-items li:hover:nth-child(3n+3) img{
 
−
    left:-300px;
 
−
    z-index: 50;
 
−
 
−
}
 
−
.gallery-items li:hover:nth-child(n) img{
 
−
    top:-100px;
 
−
    z-index: 50;
 
−
 
−
}
 
−
.gallery-items li:hover:nth-child(n+7) img{
 
−
    top:-150px;
 
−
    z-index: 50;
 
−
 
−
}
 
−
.gallery-items li:hover:nth-child(n+10) img{
 
−
    top:-295px;
 
−
    z-index: 50;
 
−
 
−
}
 
−
 
−
p {
 
−
        text-align: left;
 
−
 
−
}
 
−
/***********select-gallery*********/
 
−
.gallery-container{
 
−
    width: 80%;
 
−
    margin: 60px auto 30px 170px;
 
−
    display: block;
 
−
}
 
−
 
−
 
−
 
−
.gallery-container label {
 
−
    width: 20%;
 
−
    height: 30px;
 
−
    padding: 10px;
 
−
    cursor: pointer;
 
−
    line-height: 33px;
 
−
    font-size: 19px;
 
−
 
−
    color: rgba(255,255,255,1);
 
−
    text-decoration: none;
 
−
    background-color: rgba(219,87,5,1);
 
−
    font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 
−
    display: block;
 
−
    padding: 4px;
 
−
    -webkit-border-radius: 8px;
 
−
    -moz-border-radius: 8px;
 
−
    border-radius: 8px;
 
−
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 
−
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 
−
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 
−
    text-align: center;
 
−
           
 
−
    -webkit-transition: all .3s ease;
 
−
    -moz-transition: all .3s ease;
 
−
    -ms-transition: all .3s ease;
 
−
    -o-transition: all .3s ease;
 
−
    transition: all .3s ease;
 
−
 
−
 
−
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
 
−
    float: left;
 
−
}
 
−
.gallery-container label.gallery-label-type-all{
 
−
    border-radius: 3px 0px 0px 3px;
 
−
}
 
−
.gallery-container label.gallery-label-type-3{
 
−
    border-radius: 0px 3px 3px 0px;
 
−
}
 
−
.gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all,
 
−
.gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1,
 
−
.gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2,
 
−
.gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{
 
−
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
 
−
   
 
−
 
−
 
−
    -webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
−
    -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
−
    box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 
−
    background-color: rgba(255, 178, 29, 0.9);
 
−
    color: rgb(255, 255, 255);}
 
−
.gallery-container input{
 
−
    display: none;
 
−
}
 
−
 
−
 
−
 
−
.gallery-items li{
 
−
    margin: 0px;
 
−
    float: left;
 
−
    width: 300px;
 
−
    height: 200px;
 
−
    -webkit-transition: all 0.6s ease-in-out;
 
−
    -moz-transition: all 0.6s ease-in-out;
 
−
    -o-transition: all 0.6s ease-in-out;
 
−
    -ms-transition: all 0.6s ease-in-out;
 
−
    transition: all 0.6s ease-in-out;
 
−
}
 
−
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1,
 
−
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2,
 
−
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{
 
−
    opacity: 1;
 
−
    -webkit-transform: scale(1.1);
 
−
    -moz-transform: scale(1.1);
 
−
    -o-transform: scale(1.1);
 
−
    -ms-transform: scale(1.1);
 
−
    transform: scale(1.1);
 
−
}
 
−
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1),
 
−
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2),
 
−
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){
 
−
    opacity: 0.1;
 
−
    -webkit-transform: scale(0.5);
 
−
    -moz-transform: scale(0.5);
 
−
    -o-transform: scale(0.5);
 
−
    -ms-transform: scale(0.5);
 
−
    transform: scale(0.5);
 
−
}
 
−
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span,
 
−
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span,
 
−
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{
 
−
    display:none;
 
−
}
 
−
 
−
/**********select-gallery over*******/
 
−
#firstTitle {
 
−
    margin-left: 100px;
 
 
}
 
}
 
.gallery-container ul {
 
.gallery-container ul {
Line 264: Line 55:
 
         <div class="transparent_class ">
 
         <div class="transparent_class ">
 
             <p class="blockWords">
 
             <p class="blockWords">
−
                 &nbsp;&nbsp;CHINA_CD_UESTC is a group of nerd struggling with the experiments? NO! Whether the rigorous experiments, or the broad social activities, we all happy to participate. Here you will see our members in experiments, discussions, meetings——which are enjoying the fun of gathering together by iGEM.
+
                 &nbsp;&nbsp;Are we a group of nerd struggling with the experiments? NO!! Whether the rigorous experiments are, we are all happy to participate. Here you will see our members' colorful experience in experiments, discussions and meetings——Gathered together by iGEM, we really had a good time.
 
             </p>
 
             </p>
 
         </div>
 
         </div>
Line 275: Line 66:
  
 
                 <input id="select-type-1" name="radio-set-1" type="radio" class="gallery-selector-type-1" />
 
                 <input id="select-type-1" name="radio-set-1" type="radio" class="gallery-selector-type-1" />
−
                 <label for="select-type-1" class="gallery-label-type-1">Daily life</label>
+
                 <label for="select-type-1" class="gallery-label-type-1">Experiment</label>
  
 
                 <input id="select-type-2" name="radio-set-1" type="radio" class="gallery-selector-type-2" />
 
                 <input id="select-type-2" name="radio-set-1" type="radio" class="gallery-selector-type-2" />
−
                 <label for="select-type-2" class="gallery-label-type-2">Entertainment</label>
+
                 <label for="select-type-2" class="gallery-label-type-2">Daily life</label>
  
 
                 <input id="select-type-3" name="radio-set-1" type="radio" class="gallery-selector-type-3" />
 
                 <input id="select-type-3" name="radio-set-1" type="radio" class="gallery-selector-type-3" />
−
                 <label for="select-type-3" class="gallery-label-type-3">Experiment</label>
+
                 <label for="select-type-3" class="gallery-label-type-3">Outreach</label>
  
 
                 <div class="clr"></div>
 
                 <div class="clr"></div>
Line 288: Line 79:
 
                     <li class="gallery-item-type-2">
 
                     <li class="gallery-item-type-2">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/2/25/CHINA_CD_UESTC_gallery03.jpg" ></a>
 
                     </li>
 
                     </li>
 
                     <li class="gallery-item-type-1">
 
                     <li class="gallery-item-type-1">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/a/ad/CHINA_CD_UESTC_gallery04.jpg" ></a>
 
                     </li>
 
                     </li>
 
                     <li class="gallery-item-type-1">
 
                     <li class="gallery-item-type-1">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/2/2a/CHINA_CD_UESTC_gallery07.jpg" ></a>
 
                     </li>
 
                     </li>
 
                     <li class="gallery-item-type-2">
 
                     <li class="gallery-item-type-2">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/e/e9/CHINA_CD_UESTC_gallery13.jpg" ></a>
 
                     </li>
 
                     </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/b/b3/CHINA_CD_UESTC_gallery08.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/d/d2/CHINA_CD_UESTC_gallery09.jpg" ></a>
 +
                    </li>
 +
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_gallery21.jpg" ></a>
 +
                    </li>
 +
 
                     <li class="gallery-item-type-3">
 
                     <li class="gallery-item-type-3">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/b/bf/CHINA_CD_UESTC_gallery02.jpg" ></a>
 
                     </li>
 
                     </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/7/77/CHINA_CD_UESTC_gallery22.jpg" ></a>
 +
                    </li>
 +
 
                     <li class="gallery-item-type-1">
 
                     <li class="gallery-item-type-1">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/6/64/CHINA_CD_UESTC_gallery12.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/f/f1/CHINA_CD_UESTC_gallery19.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/9/9b/CHINA_CD_UESTC_gallery01.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/a/ae/CHINA_CD_UESTC_gallery05.JPG" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/f/f2/CHINA_CD_UESTC_gallery23.jpg" ></a>
 +
                    </li>
 +
                   
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/39/CHINA_CD_UESTC_gallery14.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/1/1a/CHINA_CD_UESTC_gallery15.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/b/b2/CHINA_CD_UESTC_gallery10.JPG" ></a>
 
                     </li>
 
                     </li>
 
                     <li class="gallery-item-type-3">
 
                     <li class="gallery-item-type-3">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/b/b9/CHINA_CD_UESTC_gallery06.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/5/50/CHINA_CD_UESTC_gallery20.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/9/96/CHINA_CD_UESTC_gallery16.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-3">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/c/cf/CHINA_CD_UESTC_gallery17.jpg" ></a>
 
                     </li>
 
                     </li>
 
                     <li class="gallery-item-type-1">
 
                     <li class="gallery-item-type-1">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/1/1a/CHINA_CD_UESTC_gallery18.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/0/06/CHINA_CD_UESTC_gallery11.JPG" ></a>
 
                     </li>
 
                     </li>
 
                     <li class="gallery-item-type-2">
 
                     <li class="gallery-item-type-2">
 
                         <a>
 
                         <a>
−
                             <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                             <img src="https://static.igem.org/mediawiki/2015/0/0a/CHINA_CD_UESTC_gallery24.jpg" ></a>
 
                     </li>
 
                     </li>
 
                 </ul>
 
                 </ul>

Latest revision as of 19:58, 17 September 2015


<!DOCTYPE html>

GALLERY

  Are we a group of nerd struggling with the experiments? NO!! Whether the rigorous experiments are, we are all happy to participate. Here you will see our members' colorful experience in experiments, discussions and meetings——Gathered together by iGEM, we really had a good time.