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

 
(28 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 32: Line 33:
  
 
}
 
}
−
 
+
#RightContentText {
−
/**************gallery******************/
+
     background:rgba(35, 37, 35, 0.26)
−
.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 {
+
−
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
+
−
    width: 20%;
+
−
    height: 30px;
+
−
    padding: 10px;
+
−
    cursor: pointer;
+
−
    color: #000000;
+
−
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
+
−
    line-height: 33px;
+
−
    font-size: 19px;
+
−
     background: #gallerygallerygallery;
+
−
    background: -moz-linear-gradient(top, #gallerygallerygallery 1%, #eaeaea 100%);
+
−
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255, 255, 255)), color-stop(100%,#FFFFFF));
+
−
    background: -o-linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%);
+
−
    background: -ms-linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%);
+
−
    background: linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%);
+
−
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
+
−
    float: left;
+
−
    box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
+
−
}
+
−
.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{
+
−
    background: #000000;
+
−
    background: -moz-linear-gradient(top, #646d93 0%, #7c87ad 100%);
+
−
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646d93), color-stop(100%,#7c87ad));
+
−
    background: -o-linear-gradient(top, #646d93 0%,#7c87ad 100%);
+
−
    background: -ms-linear-gradient(top, #646d93 0%,#7c87ad 100%);
+
−
    background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
+
−
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
+
−
    color: #FFE400;
+
−
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
+
−
    box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset;
+
−
}
+
−
.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 249: Line 55:
 
         <div class="transparent_class ">
 
         <div class="transparent_class ">
 
             <p class="blockWords">
 
             <p class="blockWords">
−
                 &nbsp;&nbsp;We are a skillful and persistent group of nine Finns. We started as a group of students who didn't really know each other, assuming that we were going to spend our summer studying synthetic biology with strange colleagues. In the end we got a bunch of new friends and (in addition to studying synthetic biology) we just might have spent one of the best summers of our lives.
+
                 &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 260: 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 273: 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.