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

Line 1: Line 1:
−
 
 
{{Template:Team:CHINA_CD_UESTC/menu}}
 
{{Template:Team:CHINA_CD_UESTC/menu}}
−
 
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
−
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active">
+
<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" />
+
    <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">
 
/*************************************************
 
/*************************************************
−
whole right section
+
                whole right section
−
https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg
+
                https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg
−
background-size: 180px;
+
                    background-size: 180px;
  
 
***********************************************/
 
***********************************************/
 
#RightSection {
 
#RightSection {
−
position: fixed;
+
    position: fixed;
−
left: 260px;
+
    left: 260px;
−
top: 0;
+
    top: 0;
−
right: 0;
+
    right: 0;
−
height:100%;
+
    height:100%;
−
background:#F0F0F0;
+
    background:#F0F0F0;
−
background-image:url("https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg");
+
    background-image:url("https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg");
−
overflow-y: scroll;
+
    overflow-y: scroll;
−
background-repeat: repeat;
+
    background-repeat: repeat;
−
background-size: 180px;
+
    background-size: 180px;
  
−
transition: all 200ms ease-out;
+
    transition: all 200ms ease-out;
−
transform: translate3d(0, 0, 0);
+
    transform: translate3d(0, 0, 0);
−
z-index:1;
+
    z-index:1;
  
 
}
 
}
  
 
/**************gallery******************/
 
/**************gallery******************/
−
.gallery-container2 {
+
.gallery-items {
−
    padding:10px 0 0 0 ;
+
−
    position:relative;
+
−
    width:90%;
+
−
 
+
−
    border-radius:5px;
+
−
}
+
−
 
+
−
/* css3 photo gallery styles */
+
−
.gallery2 {
+
 
     width:1000px;
 
     width:1000px;
−
     margin:10px 0 0 40px;
+
    height: 1000px;
 +
     margin:10px 0 0 0;
 +
    position: relative;
 +
    left: -150px;
 
}
 
}
−
.gallery2 a {
+
.gallery-items a {
 
     display:inline-block;
 
     display:inline-block;
−
     height:190px;
+
     height:150px;
 
     position:relative;
 
     position:relative;
−
     width:280px;
+
     width:230px;
 
     margin-left: 10px;
 
     margin-left: 10px;
 
     margin-right: 10px;
 
     margin-right: 10px;
 
     margin-top: 10px;
 
     margin-top: 10px;
−
    border: 10px solid #fff;
 
−
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 
 
}
 
}
−
.gallery2 a img {
+
.gallery-items a img {
 
     cursor:pointer;
 
     cursor:pointer;
−
     display:block;
+
     display:inline-block;
 
     height:100%;
 
     height:100%;
 
     left:0px;
 
     left:0px;
Line 67: Line 58:
 
     top:0px;
 
     top:0px;
 
     width:100%;
 
     width:100%;
−
     z-index:1;
+
     z-index:0;
 +
    border: 10px solid #fff;
 +
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 +
 
  
 
     -moz-user-select: none;
 
     -moz-user-select: none;
Line 86: Line 80:
 
     transition-duration:0.5s;
 
     transition-duration:0.5s;
 
}
 
}
−
.gallery2 a:focus img {
+
.gallery-items li:hover img{
 
     border:15px solid #fff;
 
     border:15px solid #fff;
 
     cursor:default;
 
     cursor:default;
−
     height:250%;
+
     height:190%;
 
     position:absolute;
 
     position:absolute;
−
     width:250%;
+
     width:190%;
−
     z-index:25;
+
     z-index:51;
  
 
     box-shadow:1px 1px 5px #888;
 
     box-shadow:1px 1px 5px #888;
Line 108: Line 102:
  
 
/* custom focus rules */
 
/* custom focus rules */
−
.gallery2 a:focus:nth-child(3n+1) img {
+
.gallery-items li:hover:nth-child(3n+1) img{
−
left:150px;
+
    left: -100px;
 +
    z-index: 50;
 
}
 
}
−
.gallery2 a:focus:nth-child(3n+2) img {
+
.gallery-items li:hover:nth-child(3n+2) img{
−
     left:-150px;
+
     left:-200px;
 +
    z-index: 50;
 +
 
 
}
 
}
−
.gallery2 a:focus:nth-child(3n+3) img {
+
.gallery-items li:hover:nth-child(3n+3) img{
−
     left:-450px;
+
     left:-300px;
 +
    z-index: 50;
 +
 
 
}
 
}
−
.gallery2 a:focus:nth-child(-n+3) img {
+
.gallery-items li:hover:nth-child(n) img{
−
     top:140px;
+
     top:-100px;
 +
    z-index: 50;
 +
 
 
}
 
}
−
.gallery2 a:focus:nth-child(n+7) img {
+
.gallery-items li:hover:nth-child(n+7) img{
 
     top:-150px;
 
     top:-150px;
 +
    z-index: 50;
 +
 
}
 
}
−
.gallery2 a:focus:nth-child(n+10) img {
+
.gallery-items li:hover:nth-child(n+10) img{
 
     top:-295px;
 
     top:-295px;
 +
    z-index: 50;
 +
 
}
 
}
  
−
/* extra close layer */
+
p {
−
.gallery2 .close {
+
        text-align: left;
−
    background:transparent;
+
 
−
    cursor:pointer;
+
−
    display:none;
+
−
    height:352px;
+
−
    left:170px;
+
−
    position:absolute;
+
−
    top:160px;
+
−
    width:500px;
+
−
    z-index:30;
+
 
}
 
}
−
.gallery2 a:focus ~ .close {
+
/***********select-gallery*********/
−
     display:block;
+
.gallery-container{
 +
    width: 60%;
 +
    margin: 30px auto;
 +
    display: block;
 +
}
 +
.gallery-container label{
 +
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 +
    width: 25%;
 +
    height: 30px;
 +
    cursor: pointer;
 +
    color: #777;
 +
    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(1%,#gallerygallerygallery), color-stop(100%,#eaeaea));
 +
    background: -webkit-linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%);
 +
    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: #646d93;
 +
    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: -webkit-linear-gradient(top, #646d93 0%,#7c87ad 100%);
 +
    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: #424d71;
 +
    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;
 
}
 
}
−
p {
 
−
text-align: left;
 
  
 +
 +
 +
.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;
 +
}
 +
.bigger-index:hover {
 +
    position: fixed;
 +
    z-index: 1000!important;
 
}
 
}
 +
/**********select-gallery over*******/
 
#firstTitle {
 
#firstTitle {
−
margin-left: 100px;
+
    margin-left: 100px;
 
}
 
}
  
 
</style>
 
</style>
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
−
<div id="RightSection"></div>
+
    <div id="RightSection"></div>
  
−
<div id="title">
+
    <div id="title">
−
<div id="firstTitle"><p><B>GALLERY</B></p></div>
+
        <div id="firstTitle">
−
</div>
+
            <p>
 +
                <B>GALLERY</B>
 +
            </p>
 +
        </div>
 +
    </div>
  
−
<div id="RightContent">
+
    <div id="RightContent">
−
<div class="transparent_class ">
+
        <div class="transparent_class ">
−
<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.</p>
+
            <p class="blockWords">
−
</div>
+
                &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.
 +
            </p>
 +
        </div>
  
−
<div id="RightContentText">
+
        <div id="RightContentText">
−
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
+
            <section class="gallery-container">
−
<div class="container clearfix">
+
  
−
<div id="content" class="grid_12">
+
                <input id="select-type-all" name="radio-set-1" type="radio" class="gallery-selector-type-all" checked="checked" />
−
<h2> <strong>Click it！</strong>
+
                <label for="select-type-all" class="gallery-label-type-all">All</label>
−
</h2>
+
−
</div>
+
−
</div>
+
  
−
</div>
+
                <input id="select-type-1" name="radio-set-1" type="radio" class="gallery-selector-type-1" />
−
        <div class="gallery-container2" id="gallery-container2">
+
                 <label for="select-type-1" class="gallery-label-type-1">Daily life</label>
−
            <div class="gallery2">
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                 <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
−
                <span class="close"></span>
+
−
            </div>
+
−
        </div>
+
  
 +
                <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>
  
 +
                <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>
  
 +
                <div class="clr"></div>
  
 +
                <ul class="gallery-items">
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-3">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-3">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
 +
                    </li>
 +
                </ul>
 +
            </section>
  
 +
        </div>
  
−
</div>
+
    </div>
−
 
+
−
</div>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 05:19, 26 August 2015

<!DOCTYPE html>

GALLERY

  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.