Team:UCSC

From 2014.igem.org

(Difference between revisions)
m
m
Line 128: Line 128:
}     
}     
-
#wrapperSlides{
+
#wrapperSlide{
-
   width: 100%;
+
   width: 500px;
   height: 350px;
   height: 350px;
   margin: 0 auto;
   margin: 0 auto;
 +
  position: relative;
   border: 15px solid white;
   border: 15px solid white;
}
}
-
#contentSlides{
+
.slide{
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
Line 142: Line 143:
}
}
-
#contentSlides ul{
+
.slide{
-
  height: 100%;
+
    top: 0;
-
}
+
    opacity: 0;
 +
    width: 609px;
 +
    height: 420px;
 +
    display: block;
 +
    position: absolute;
-
#contentSlides ul li{
+
    transform: scale(0);  
-
  height: 275px;
+
    transition: all .7s ease-in-out;
-
  position: relative;
+
}
}
-
#contentSlides ul li img{
+
.slide img{
 +
  width: 100%;
   height: 100%;
   height: 100%;
   margin: auto;
   margin: auto;
    
    
}
}
 +
 +
.nav label {
 +
    width: 200px;
 +
    height: 100%;
 +
    display: none;
 +
    position: absolute;
 +
 +
  opacity: 0;
 +
    z-index: 9;
 +
    cursor: pointer;
 +
 +
    transition: opacity .2s;
 +
 +
    color: #FFF;
 +
    font-size: 156pt;
 +
    text-align: center;
 +
    line-height: 380px;
 +
    font-family: "Varela Round", sans-serif;
 +
    background-color: rgba(255, 255, 255, .3);
 +
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
 +
}
 +
 +
.slide:hover + .nav label { opacity: 0.5; }
 +
 +
.nav label:hover { opacity: 1; }
 +
 +
.nav .next { right: 0; }
 +
 +
input:checked + .slide-container  .slide {
 +
    opacity: 1;
 +
    transform: scale(1);
 +
    transition: opacity 1s ease-in-out;
 +
}
 +
 +
input:checked + .slide-container .nav label { display: block; }
 +
myh1{
myh1{
Line 339: Line 380:
<iframe width="640" height="360" style="padding:30px" src="//www.youtube-nocookie.com/embed/mcPxcHZZWss?rel=0" frameborder="0" allowfullscreen></iframe><myh5> UCSC iGEM in the News! </myh5>
<iframe width="640" height="360" style="padding:30px" src="//www.youtube-nocookie.com/embed/mcPxcHZZWss?rel=0" frameborder="0" allowfullscreen></iframe><myh5> UCSC iGEM in the News! </myh5>
-
<div id="wrapperSlides">
+
<!--
-
<div id= "contentSlides">
+
<ul class="slides">
 +
    <input type="radio" name="radio-btn" id="img-1" checked />
 +
    <li class="slide-container">
 +
<div class="slide">
 +
<img src="https://static.igem.org/mediawiki/2014/thumb/3/38/UCSC_Pafford_CampusView.JPG/800px-UCSC_Pafford_CampusView.JPG" />
 +
        </div>
 +
<div class="nav">
 +
<label for="img-3" class="prev">&#x2039;</label>
 +
<label for="img-2" class="next">&#x203a;</label>
 +
</div>
 +
    </li>
 +
    <input type="radio" name="radio-btn" id="img-2" />
 +
    <li class="slide-container">
 +
        <div class="slide">
 +
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
 +
        </div>
 +
<div class="nav">
 +
<label for="img-1" class="prev">&#x2039;</label>
 +
<label for="img-3" class="next">&#x203a;</label>
 +
</div>
 +
    </li>
 +
 +
    <input type="radio" name="radio-btn" id="img-3" />
 +
    <li class="slide-container">
 +
        <div class="slide">
 +
          <img src="https://static.igem.org/mediawiki/2014/thumb/3/38/UCSC_Pafford_CampusView.JPG/800px-UCSC_Pafford_CampusView.JPG" />
 +
        </div>
 +
<div class="nav">
 +
<label for="img-2" class="prev">&#x2039;</label>
 +
<label for="img-1" class="next">&#x203a;</label>
 +
</div>
<ul>
<ul>
-
<li id="slide1"><img src="https://static.igem.org/mediawiki/2014/thumb/3/38/UCSC_Pafford_CampusView.JPG/800px-UCSC_Pafford_CampusView.JPG" />
+
-->
 +
<br>
 +
 
<myh3> Team Picture Coming Soon!</myh3>
<myh3> Team Picture Coming Soon!</myh3>
</li>
</li>

Revision as of 19:27, 5 September 2014


Click here to edit this page!


UCSC iGEM in the News!
Team Picture Coming Soon!

Retrieved from "http://2014.igem.org/Team:UCSC"