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

 
(38 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 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">
+
 
<head>
 
<head>
  
−
<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;
  
 
}
 
}
−
 
+
#RightContentText {
−
/**************gallery******************/
+
     background:rgba(35, 37, 35, 0.26)
−
.gallery-container2 {
+
−
     padding:10px 0 0 0 ;
+
−
    position:relative;
+
−
    width:90%;
+
−
 
+
−
    border-radius:5px;
+
 
}
 
}
−
 
+
.gallery-container ul {
−
/* css3 photo gallery styles */
+
     list-style: none;
−
.gallery2 {
+
−
     width:1000px;
+
−
    margin:10px 0 0 40px;
+
 
}
 
}
−
.gallery2 a {
 
−
    display:inline-block;
 
−
    height:200px;
 
−
    position:relative;
 
−
    width:250px;
 
−
    margin-left: 20px;
 
−
    margin-right: 20px;
 
−
    margin-top: 20px;
 
−
    border: 10px solid #F2FFDE;
 
−
    border-radius: 5px;
 
  
−
}
+
</style>
−
.gallery2 a img {
+
<body id="homeIndexBody">
−
     cursor:pointer;
+
     <div id="RightSection"></div>
−
    display:block;
+
−
    height:100%;
+
−
    left:0px;
+
−
    position:absolute;
+
−
    top:0px;
+
−
    width:100%;
+
−
    z-index:1;
+
  
−
     -moz-user-select: none;
+
     <div id="title">
−
    -khtml-user-select: none;
+
        <div id="firstTitle">
−
     user-select: none;
+
            <p>
 +
                <B>GALLERY</B>
 +
            </p>
 +
        </div>
 +
     </div>
  
−
     -moz-box-sizing:border-box;
+
     <div id="RightContent">
−
    -webkit-box-sizing:border-box;
+
        <div class="transparent_class ">
−
    box-sizing:border-box;
+
            <p class="blockWords">
 +
                &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>
 +
        </div>
  
−
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
+
        <div id="RightContentText">
−
    -webkit-transition-duration:0.5s;
+
            <section class="gallery-container">
−
    -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;
+
−
}
+
−
.gallery2 a:focus img {
+
−
    border:15px solid #fff;
+
−
    cursor:default;
+
−
    height:250%;
+
−
    position:absolute;
+
−
    width:250%;
+
−
    z-index:25;
+
  
−
    box-shadow:1px 1px 5px #888;
+
                <input id="select-type-all" name="radio-set-1" type="radio" class="gallery-selector-type-all" checked="checked" />
−
    -moz-box-shadow:1px 1px 5px #888;
+
                <label for="select-type-all" class="gallery-label-type-all">All</label>
−
    -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 */
+
                <input id="select-type-1" name="radio-set-1" type="radio" class="gallery-selector-type-1" />
−
.gallery2 a:focus:nth-child(3n+1) img {
+
                <label for="select-type-1" class="gallery-label-type-1">Experiment</label>
−
left:150px;
+
−
}
+
−
.gallery2 a:focus:nth-child(3n+2) img {
+
−
    left:-50px;
+
−
}
+
−
.gallery2 a:focus:nth-child(3n+3) img {
+
−
    left:-250px;
+
−
}
+
−
.gallery2 a:focus:nth-child(-n+3) img {
+
−
    top:140px;
+
−
}
+
−
.gallery2 a:focus:nth-child(n+7) img {
+
−
    top:-150px;
+
−
}
+
−
.gallery2 a:focus:nth-child(n+10) img {
+
−
    top:-295px;
+
−
}
+
  
−
/* extra close layer */
+
                <input id="select-type-2" name="radio-set-1" type="radio" class="gallery-selector-type-2" />
−
.gallery2 .close {
+
                <label for="select-type-2" class="gallery-label-type-2">Daily life</label>
−
    background:transparent;
+
−
    cursor:pointer;
+
−
    display:none;
+
−
    height:352px;
+
−
    left:170px;
+
−
    position:absolute;
+
−
    top:160px;
+
−
    width:500px;
+
−
    z-index:30;
+
−
}
+
−
.gallery2 a:focus ~ .close {
+
−
    display:block;
+
−
}
+
−
p {
+
−
text-align: left;
+
  
−
}
+
                <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">Outreach</label>
  
−
</style>
+
                <div class="clr"></div>
−
<body id="homeIndexBody">
+
−
<div id="RightSection"></div>
+
  
−
<div id="title">
+
                <ul class="gallery-items">
−
<div id="firstTitle"><p><B>GALLERY</B></p></div>
+
                    <li class="gallery-item-type-2">
−
</div>
+
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/2/25/CHINA_CD_UESTC_gallery03.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/a/ad/CHINA_CD_UESTC_gallery04.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-1">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/2/2a/CHINA_CD_UESTC_gallery07.jpg" ></a>
 +
                    </li>
 +
                    <li class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/e/e9/CHINA_CD_UESTC_gallery13.jpg" ></a>
 +
                    </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>
  
−
<div id="RightContent">
+
                    <li class="gallery-item-type-2">
−
<div class="transparent_class ">
+
                        <a>
−
<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>
+
                            <img src="https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_gallery21.jpg" ></a>
−
</div>
+
                    </li>
  
−
<div id="RightContentText">
+
                    <li class="gallery-item-type-3">
−
        <div class="gallery-container2" id="gallery-container2">
+
                        <a>
−
            <div class="gallery2">
+
                            <img src="https://static.igem.org/mediawiki/2015/b/bf/CHINA_CD_UESTC_gallery02.jpg" ></a>
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                    </li>
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                    <li class="gallery-item-type-2">
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                        <a>
−
                <a tabindex="1"><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/7/77/CHINA_CD_UESTC_gallery22.jpg" ></a>
−
                <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a>
+
                    </li>
−
                <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>
+
  
 +
                    <li class="gallery-item-type-1">
 +
                        <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 class="gallery-item-type-3">
 +
                        <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 class="gallery-item-type-1">
 +
                        <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 class="gallery-item-type-2">
 +
                        <a>
 +
                            <img src="https://static.igem.org/mediawiki/2015/0/0a/CHINA_CD_UESTC_gallery24.jpg" ></a>
 +
                    </li>
 +
                </ul>
 +
            </section>
  
 +
        </div>
  
−
 
+
    </div>
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
 
</body>
 
</body>
 
</html>
 
</html>

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.