Difference between revisions of "Team:Hong Kong-CUHK"

Line 130: Line 130:
 
line-height: 1.8;
 
line-height: 1.8;
 
}
 
}
−
}
 
−
 
−
 
−
 
−
 
−
* {box-sizing:border-box}
 
−
.mySlides {display:none}
 
−
 
−
/* Slideshow container */
 
−
.slideshow-container {
 
−
  max-width: 1000px;
 
−
  position: relative;
 
−
  margin: auto;
 
−
}
 
−
 
−
 
−
.flashingprev, .flashingnext{
 
−
  background:red;
 
−
    cursor: pointer;
 
−
  position: absolute;
 
−
  top: 50%;
 
−
  width: auto;
 
−
  padding: 16px;
 
−
  margin-top: -22px;
 
−
  color: #fff;
 
−
  font-weight: bold;
 
−
  font-size: 80px;
 
−
  transition: 0.6s ease;
 
−
  border-radius: 0 3px 3px 0;
 
−
    animation-name: flash;
 
−
    animation-duration: 1.8s;
 
−
    animation-timing-function: linear;
 
−
    animation-iteration-count: infinite;
 
−
 
−
    /* Chrome 4+, Safari 4+, Opera 15+ */
 
−
    -webkit-animation-name: flash;
 
−
    -webkit-animation-duration: 0.7s;
 
−
    -webkit-animation-timing-function: linear;
 
−
    -webkit-animation-iteration-count: infinite;
 
−
  -webkit-box-shadow: 0 0 33px #B20000;
 
−
 
 
−
    /* Firefox 5+ */
 
−
    -moz-animation-name: flash;
 
−
    -moz-animation-duration: 0.7s;
 
−
    -moz-animation-timing-function: linear;
 
−
    -moz-animation-iteration-count: infinite;
 
−
  -moz-box-shadow: 0 0 3px #B20000;
 
−
}
 
−
 
−
@keyframes flash { 
 
−
    0% { opacity: 1.0 }
 
−
    50% { opacity: 0.5 }
 
−
    100% { opacity: 1.0 }
 
−
}
 
−
 
−
/* Chrome 4+, Safari 4+, Opera 15+ */
 
−
@-webkit-keyframes flash { 
 
−
    0% { opacity: 1.0 }
 
−
    50% { opacity: 0.5 }
 
−
    100% { opacity: 1.0 }
 
−
}
 
−
 
−
/* Firefox 5+ */
 
−
@-moz-keyframes flash { 
 
−
    0% { opacity: 1.0 }
 
−
    50% { opacity: 0.5 }
 
−
    100% { opacity: 1.0 }
 
−
}
 
−
 
−
 
−
 
−
/* Position the "next button" to the right */
 
−
.flashingnext {
 
−
  right: 0;
 
−
  border-radius: 3px 0 0 3px;
 
−
}
 
−
 
−
/* Position the "prev button" to the left */
 
−
.flashingprev {
 
−
  left: 0;
 
−
  border-radius: 3px 0 0 3px;
 
−
}
 
−
 
−
/* On hover, add a black background color with a little bit see-through */
 
−
.prev:hover, .next:hover {
 
−
  background-color: rgba(0,0,0,0.8);
 
−
}
 
−
 
−
/* Caption text */
 
−
.text {
 
−
  color: #f2f2f2;
 
−
  font-size: 15px;
 
−
  padding: 8px 12px;
 
−
  position: absolute;
 
−
  bottom: 8px;
 
−
  width: 100%;
 
−
  text-align: center;
 
−
}
 
−
 
−
/* Number text (1/3 etc) */
 
−
.numbertext {
 
−
  color: #f2f2f2;
 
−
  font-size: 12px;
 
−
  padding: 8px 12px;
 
−
  position: absolute;
 
−
  top: 0;
 
−
}
 
−
 
−
/* The dots/bullets/indicators */
 
−
.dot {
 
−
  cursor:pointer;
 
−
  height: 13px;
 
−
  width: 13px;
 
−
  margin: 0 2px;
 
−
  background-color: #bbb;
 
−
  border-radius: 50%;
 
−
  display: inline-block;
 
−
  transition: background-color 0.6s ease;
 
−
}
 
−
 
−
.active, .dot:hover {
 
−
  background-color: #717171;
 
−
}
 
−
 
−
/* Fading animation */
 
−
.fade {
 
−
  -webkit-animation-name: fade;
 
−
  -webkit-animation-duration: 1.5s;
 
−
  animation-name: fade;
 
−
  animation-duration: 1.5s;
 
−
}
 
−
 
−
@-webkit-keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
−
 
−
@keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
−
 
−
/* On smaller screens, decrease text size */
 
−
@media only screen and (max-width: 300px) {
 
−
  .prev, .next,.text {font-size: 11px}
 
 
}
 
}
  
Line 318: Line 173:
 
#section02 a {
 
#section02 a {
 
   padding-top: 60px;
 
   padding-top: 60px;
 +
text-align: center;
 
}
 
}
  
Line 332: Line 188:
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
}
 
}
−
 
−
 
−
 
−
 
−
 
  
  
Line 355: Line 206:
 
   </div>
 
   </div>
  
−
   <center><a href="#section02"><span></span>Scroll</a>
+
 
 +
   <center><a href="#myCarousel"><span></span>Scroll</a>
 
</section>
 
</section>
 +
<section id="myCarousel" class="carousel slide" data-ride="carousel">
 +
  <!-- Indicators -->
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
    <li data-target="#myCarousel" data-slide-to="1"></li>
 +
    <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    <li data-target="#myCarousel" data-slide-to="3"></li>
 +
  </ol>
 +
 +
  <!-- Wrapper for slides -->
 +
  <div class="carousel-inner">
 +
    <div class="item active">
 +
<img src="https://static.igem.org/mediawiki/2017/f/fa/Page1.jpeg" height="500" >
 +
    </div>
 +
 +
    <div class="item">
 +
        <img src="https://static.igem.org/mediawiki/2017/7/77/Cuhk_thirdpage.PNG" width="100%" >
 +
    </div>
 +
 +
    <div class="item">
 +
      <img src="https://static.igem.org/mediawiki/2017/2/27/Cuhk_forthpage.PNG" width="100%" >
 +
    </div>
 +
 +
<div class="item">
 +
<img src="https://static.igem.org/mediawiki/2017/6/6b/Cuhk_finalpage.PNG" width="100%" >
 +
  </div>
 +
  </div>
 +
 +
  <!-- Left and right controls -->
 +
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 +
    <span class="glyphicon glyphicon-chevron-left"></span>
 +
    <span class="sr-only">Previous</span>
 +
  </a>
 +
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
 +
    <span class="glyphicon glyphicon-chevron-right"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 
<section id="section02" class="demo">
 
<section id="section02" class="demo">
 
   <div class="slideshow-container">
 
   <div class="slideshow-container">

Revision as of 11:00, 20 August 2017

Scroll
1 / 4
2 / 4
3 / 4
4 / 4
Caption Five
❮ ❯

Email: igemcuhk1617@gmail.com