Difference between revisions of "Team:HebrewU/Notebook"

Line 232: Line 232:
 
/* Page Carousel */
 
/* Page Carousel */
 
.carousel {
 
.carousel {
−
   height: 650px;
+
   height: 360px;
−
   width: 1000px;
+
   width: 640px;
 
   overflow: hidden;
 
   overflow: hidden;
 
   text-align: center;
 
   text-align: center;
Line 370: Line 370:
 
   opacity: 1;
 
   opacity: 1;
 
}
 
}
 +
 +
 +
.carousel__activator:nth-of-type(6):checked ~ .carousel__track {
 +
  -webkit-transform: translateX(-500%);
 +
          transform: translateX(-500%);
 +
}
 +
.carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(6) {
 +
  transition: opacity 0.5s, -webkit-transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  opacity: 1;
 +
  -webkit-transform: scale(1);
 +
          transform: scale(1);
 +
}
 +
.carousel__activator:nth-of-type(6):checked ~ .carousel__controls:nth-of-type(6) {
 +
  display: block;
 +
  opacity: 1;
 +
}
 +
.carousel__activator:nth-of-type(6):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(6) {
 +
  opacity: 1;
 +
}
 +
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__track {
 +
  -webkit-transform: translateX(-600%);
 +
          transform: translateX(-600%);
 +
}
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__slide:nth-of-type(7) {
 +
  transition: opacity 0.5s, -webkit-transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s;
 +
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  opacity: 1;
 +
  -webkit-transform: scale(1);
 +
          transform: scale(1);
 +
}
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__controls:nth-of-type(7) {
 +
  display: block;
 +
  opacity: 1;
 +
}
 +
.carousel__activator:nth-of-type(7):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(7) {
 +
  opacity: 1;
 +
}
 +
 +
 +
 
.carousel__control {
 
.carousel__control {
 
   height: 30px;
 
   height: 30px;
Line 400: Line 450:
 
.carousel__indicators {
 
.carousel__indicators {
 
   position: absolute;
 
   position: absolute;
−
   bottom: 20px;
+
   bottom: 80px;
 
   width: 100%;
 
   width: 100%;
 
   text-align: center;
 
   text-align: center;
Line 413: Line 463:
 
   opacity: 0.35;
 
   opacity: 0.35;
 
   margin: 0 2.5px 0 2.5px;
 
   margin: 0 2.5px 0 2.5px;
 +
 
 
}
 
}
 
.carousel__indicator:hover {
 
.carousel__indicator:hover {
Line 455: Line 506:
 
   -webkit-transform: translateX(400%);
 
   -webkit-transform: translateX(400%);
 
           transform: translateX(400%);
 
           transform: translateX(400%);
 +
}
 +
 +
.carousel__track .carousel__slide:nth-of-type(6) {
 +
  -webkit-transform: translateX(500%);
 +
          transform: translateX(500%);
 +
}
 +
 +
.carousel__track .carousel__slide:nth-of-type(7) {
 +
  -webkit-transform: translateX(600%);
 +
          transform: translateX(600%);
 
}
 
}
 
.carousel--scale .carousel__slide {
 
.carousel--scale .carousel__slide {
Line 490: Line 551:
 
.carousel__slide:nth-of-type(1),
 
.carousel__slide:nth-of-type(1),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {
−
   background-image: url("1.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/7/77/T--hebrewu--highlights1.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
 
}
 
}
−
 
−
<img src="1.fw.png" width="1720" height="1132">
 
  
 
.carousel__slide:nth-of-type(2),
 
.carousel__slide:nth-of-type(2),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {
−
   background-image: url("2.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/e/e3/T--hebrewu--highlights2.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
Line 505: Line 564:
 
.carousel__slide:nth-of-type(3),
 
.carousel__slide:nth-of-type(3),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {
−
   background-image: url("3.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--hebrewu--highlights3.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
Line 511: Line 570:
 
.carousel__slide:nth-of-type(4),
 
.carousel__slide:nth-of-type(4),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {
−
   background-image: url("4.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/1/17/T--hebrewu--highlights4.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
Line 517: Line 576:
 
.carousel__slide:nth-of-type(5),
 
.carousel__slide:nth-of-type(5),
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
 
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(5) {
−
   background-image: url("5.fw.png");
+
   background-image: url("https://static.igem.org/mediawiki/2018/6/61/T--hebrewu--highlights5.png");
 
   background-size: cover;
 
   background-size: cover;
 
   background-position: center;
 
   background-position: center;
 
}
 
}
 +
 +
.carousel__slide:nth-of-type(6),
 +
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(6) {
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/dc/T--hebrewu--highlights6.png");
 +
  background-size: cover;
 +
  background-position: center;
 +
}
 +
 +
.carousel__slide:nth-of-type(7),
 +
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(7) {
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/9e/T--hebrewu--highlights7.png");
 +
  background-size: cover;
 +
  background-position: center;
 +
}
 +
  
 
h1 {
 
h1 {
Line 698: Line 772:
 
<div class="w3-blue-gray">
 
<div class="w3-blue-gray">
 
<div class="w3-center">
 
<div class="w3-center">
−
             <img src="https://static.igem.org/mediawiki/2018/0/06/T--hebrewU--Notebook_HL.png" width="20%">
+
             <img src="https://static.igem.org/mediawiki/2018/0/06/T--hebrewU--Notebook_HL.png" width="15%">
 
           <br />  
 
           <br />  
 
         <br />  
 
         <br />  
 
</div>   
 
</div>   
 +
 +
<div align="center">
 +
<div class="carousel-container">
 +
 +
  <div class="carousel my-carousel carousel--translate">
 +
    <input class="carousel__activator" type="radio" name="carousel" id="A" checked="checked"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="B"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="c"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="D"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="E"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="F"/>
 +
    <input class="carousel__activator" type="radio" name="carousel" id="G"/>
 +
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="G"></label>
 +
      <label class="carousel__control carousel__control--forward" for="B"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="A"></label>
 +
      <label class="carousel__control carousel__control--forward" for="c"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="B"></label>
 +
      <label class="carousel__control carousel__control--forward" for="D"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="c"></label>
 +
      <label class="carousel__control carousel__control--forward" for="E"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="D"></label>
 +
      <label class="carousel__control carousel__control--forward" for="F"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="E"></label>
 +
      <label class="carousel__control carousel__control--forward" for="G"></label>
 +
    </div>
 +
    <div class="carousel__controls">
 +
      <label class="carousel__control carousel__control--backward" for="F"></label>
 +
      <label class="carousel__control carousel__control--forward" for="A"></label>
 +
    </div>
 +
    <div class="carousel__track">
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
      <li class="carousel__slide">
 +
      </li>
 +
    </div>
 +
    <div class="carousel__indicators">
 +
      <label class="carousel__indicator" for="A"></label>
 +
      <label class="carousel__indicator" for="B"></label>
 +
      <label class="carousel__indicator" for="c"></label>
 +
      <label class="carousel__indicator" for="D"></label>
 +
      <label class="carousel__indicator" for="E"></label>
 +
      <label class="carousel__indicator" for="F"></label>
 +
      <label class="carousel__indicator" for="G"></label>
 +
 +
    </div>
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 +
<br />
 +
 +
 +
 
   <div style="text-align:center">
 
   <div style="text-align:center">
 
   <div align="center">
 
   <div align="center">
Line 979: Line 1,130:
 
</div>
 
</div>
 
      
 
      
−
<!--
 
−
<div class="carousel-container">
 
  
−
  <div class="carousel my-carousel carousel--translate">
 
−
    <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
 
−
    <input class="carousel__activator" type="radio" name="carousel" id="G"/>
 
−
    <input class="carousel__activator" type="radio" name="carousel" id="H"/>
 
−
    <input class="carousel__activator" type="radio" name="carousel" id="I"/>
 
−
    <input class="carousel__activator" type="radio" name="carousel" id="J"/>
 
−
    <div class="carousel__controls">
 
−
      <label class="carousel__control carousel__control--backward" for="J"></label>
 
−
      <label class="carousel__control carousel__control--forward" for="G"></label>
 
−
    </div>
 
−
    <div class="carousel__controls">
 
−
      <label class="carousel__control carousel__control--backward" for="F"></label>
 
−
      <label class="carousel__control carousel__control--forward" for="H"></label>
 
−
    </div>
 
−
    <div class="carousel__controls">
 
−
      <label class="carousel__control carousel__control--backward" for="G"></label>
 
−
      <label class="carousel__control carousel__control--forward" for="I"></label>
 
−
    </div>
 
−
    <div class="carousel__controls">
 
−
      <label class="carousel__control carousel__control--backward" for="H"></label>
 
−
      <label class="carousel__control carousel__control--forward" for="J"></label>
 
−
    </div>
 
−
    <div class="carousel__controls">
 
−
      <label class="carousel__control carousel__control--backward" for="I"></label>
 
−
      <label class="carousel__control carousel__control--forward" for="F"></label>
 
−
    </div>
 
−
    <div class="carousel__track">
 
−
      <li class="carousel__slide">
 
−
        <h1>7 Highlights</h1>
 
−
      </li>
 
−
      <li class="carousel__slide">
 
−
        <h1>1#</h1>
 
−
      </li>
 
−
      <li class="carousel__slide">
 
−
        <h1>2#</h1>
 
−
      </li>
 
−
      <li class="carousel__slide">
 
−
        <h1>3#</h1>
 
−
      </li>
 
−
      <li class="carousel__slide">
 
−
        <h1>4#</h1>
 
−
      </li>
 
−
    </div>
 
−
    <div class="carousel__indicators">
 
−
      <label class="carousel__indicator" for="F"></label>
 
−
      <label class="carousel__indicator" for="G"></label>
 
−
      <label class="carousel__indicator" for="H"></label>
 
−
      <label class="carousel__indicator" for="I"></label>
 
−
      <label class="carousel__indicator" for="J"></label>
 
−
    </div>
 
−
  </div>
 
−
</div>
 
−
</div>
 
  
−
-->
 
 
<div style="w3-blue-gray; height:300px;">
 
<div style="w3-blue-gray; height:300px;">
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 13:21, 17 October 2018

HebrewU HujiGEM 2018