|
|
| Line 136: |
Line 136: |
| | @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400); | | @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400); |
| | * { | | * { |
| − | margin: 0; | + | margin: auto; |
| | padding: 0; | | padding: 0; |
| | } | | } |
| Line 144: |
Line 144: |
| | | | |
| | .demo a { | | .demo a { |
| | + | text-align: center; |
| | position: absolute; | | position: absolute; |
| | bottom: 20px; | | bottom: 20px; |
| Line 165: |
Line 166: |
| | position: relative; | | position: relative; |
| | text-align: center; | | text-align: center; |
| − | width: 100%; | + | width: 1000px; |
| − | height: 100%; | + | height: auto; |
| | background-color:#fff; | | background-color:#fff; |
| | } | | } |
| Line 197: |
Line 198: |
| | | | |
| | | | |
| − | <section id="section01" class="demo"> | + | <section id="section01"> |
| | <div class="splash" id="mainsplash"> | | <div class="splash" id="mainsplash"> |
| | <div class="row splashyla"> | | <div class="row splashyla"> |
| Line 207: |
Line 208: |
| | | | |
| | | | |
| − | <center><a href="#myCarousel"><span></span>Scroll</a> | + | <center><a href="#myCarousel"> |
| | </section> | | </section> |
| | <section id="myCarousel" class="carousel slide" data-ride="carousel"> | | <section id="myCarousel" class="carousel slide" data-ride="carousel"> |
| Line 247: |
Line 248: |
| | </a> | | </a> |
| | </div> | | </div> |
| − | <section id="section02" class="demo">
| |
| − | <div class="slideshow-container">
| |
| − |
| |
| − |
| |
| − | <div class="mySlides fade">
| |
| − | <div class="numbertext">1 / 4</div>
| |
| − | <img src="https://static.igem.org/mediawiki/2017/f/fa/Page1.jpeg" height="500" >
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="mySlides fade">
| |
| − | <div class="numbertext">2 / 4</div>
| |
| − | <img src="https://static.igem.org/mediawiki/2017/7/77/Cuhk_thirdpage.PNG" width="100%" >
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="mySlides fade">
| |
| − | <div class="numbertext">3 / 4</div>
| |
| − | <img src="https://static.igem.org/mediawiki/2017/2/27/Cuhk_forthpage.PNG" width="100%" >
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="mySlides fade">
| |
| − | <div class="numbertext">4 / 4</div>
| |
| − | <img src="https://static.igem.org/mediawiki/2017/6/6b/Cuhk_finalpage.PNG" width="100%" >
| |
| − | <div class="text">Caption Five</div>
| |
| − | </div>
| |
| − |
| |
| − | <span class="flashingprev" onclick="plusSlides(-1)">❮</span>
| |
| − | <span class="flashingnext" onclick="plusSlides(1)">❯</span>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <br>
| |
| − |
| |
| − | <div style="text-align:center">
| |
| − | <span class="dot" onclick="currentSlide(1)"></span>
| |
| − | <span class="dot" onclick="currentSlide(2)"></span>
| |
| − | <span class="dot" onclick="currentSlide(3)"></span>
| |
| − | <span class="dot" onclick="currentSlide(4)"></span>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | var slideIndex = 1;
| |
| − | showSlides(slideIndex);
| |
| − |
| |
| − | function plusSlides(n) {
| |
| − | showSlides(slideIndex += n);
| |
| − | }
| |
| − |
| |
| − | function currentSlide(n) {
| |
| − | showSlides(slideIndex = n);
| |
| − | }
| |
| − |
| |
| − | function showSlides(n) {
| |
| − | var i;
| |
| − | var slides = document.getElementsByClassName("mySlides");
| |
| − | var dots = document.getElementsByClassName("dot");
| |
| − | if (n > slides.length) {slideIndex = 1}
| |
| − | if (n < 1) {slideIndex = slides.length}
| |
| − | for (i = 0; i < slides.length; i++) {
| |
| − | slides[i].style.display = "none";
| |
| − | }
| |
| − | for (i = 0; i < dots.length; i++) {
| |
| − | dots[i].className = dots[i].className.replace(" active", "");
| |
| − | }
| |
| − | slides[slideIndex-1].style.display = "block";
| |
| − | dots[slideIndex-1].className += " active";
| |
| − | }
| |
| − | </script>
| |
| | | | |
| | | | |
