(113 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{AUC-EGYPT/Wiki_Stripdown}}{{AUC-EGYPT/script}}{{AUC-EGYPT/navigationbar}}{{AUC-EGYPT/style.nav}} |
− | {{AUC-EGYPT}} | + | <!--{{IGEM_TopBar}}{{AUC-EGYPT}} --> |
− | {{AUC-EGYPT/ | + | <html> |
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <link href="اhttps://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> | ||
+ | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
+ | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/css/swiper.min.css"> | ||
+ | <style> | ||
+ | .swiper-container { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
− | + | html{ | |
− | + | background-color: #080727; | |
+ | } | ||
+ | #content { | ||
+ | background-color: #080727; | ||
+ | } | ||
− | + | .swiper-slide { | |
+ | text-align: center; | ||
+ | font-size: 18px; | ||
+ | background: #080727; | ||
+ | /* Center slide text vertically */ | ||
+ | |||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | -webkit-box-pack: center; | ||
+ | -ms-flex-pack: center; | ||
+ | -webkit-justify-content: center; | ||
+ | justify-content: center; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | -webkit-align-items: center; | ||
+ | align-items: center; | ||
+ | } | ||
− | + | /* Text Overlay */ | |
− | + | #lab_video_text_overlay h2 { | |
− | + | font-size:4em | |
− | + | } | |
− | + | ||
− | + | #lab_video_text_overlay .btn { | |
+ | border-radius:0; | ||
+ | text-transform:uppercase; | ||
+ | font-weight:200; | ||
+ | } | ||
+ | #lab_video_text_overlay .btn-warning { | ||
+ | background-color:#F5D328; | ||
+ | } | ||
+ | |||
+ | #lab_video_text_overlay { | ||
+ | position: absolute; | ||
+ | color: #FFF; | ||
+ | width: 100%; | ||
+ | top: 25%; | ||
+ | } | ||
+ | |||
+ | #lab_video_text_overlay .container { | ||
+ | text-align: center; | ||
+ | margin: 0px auto; | ||
+ | // background-color: #669900; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width:991px) { | ||
+ | #lab_video_text_wrap { | ||
+ | height: 300px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width:650px) { | ||
+ | #lab_video_text_wrap { | ||
+ | height: 250px; | ||
+ | } | ||
+ | #lab_video_text_overlay h2 { | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | #lab_video_text_overlay p { | ||
+ | font-size: .9em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /*------------------*/ | ||
+ | * {box-sizing: border-box;} | ||
+ | body {font-family: Verdana, sans-serif;} | ||
+ | .mySlides {display: none;} | ||
+ | img {vertical-align: middle;} | ||
+ | |||
+ | /* Slideshow container */ | ||
+ | .slideshow-container { | ||
+ | max-width: 1000px; | ||
+ | position: relative; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | /* 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 { | ||
+ | height: 15px; | ||
+ | width: 15px; | ||
+ | margin: 0 2px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | } | ||
+ | |||
+ | .active { | ||
+ | background-color: #717171; | ||
+ | } | ||
+ | |||
+ | <!--/* Fading animation */ | ||
+ | .fade { | ||
+ | -webkit-animation-name: fade; | ||
+ | -webkit-animation-duration: 6s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 6s; | ||
+ | }--> | ||
+ | |||
+ | @-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) { | ||
+ | .text {font-size: 11px} | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <section id="lab_video_slider"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="row"> | ||
+ | <!-- Link Swiper's CSS --> | ||
− | + | <!-- Swiper --> | |
− | + | <div class="swiper-container"> | |
− | + | <div class="swiper-wrapper"> | |
− | + | <div id="slide_one" class="swiper-slide"> | |
− | + | <img src="https://static.igem.org/mediawiki/2020/6/6a/T--AUC-EGYPT--Slide1.png" style="width:900px; height: 507px;"> | |
− | + | </div> | |
− | + | <div id="slide_two" class="swiper-slide"> | |
− | + | <video width="900" height="480" autoplay loop> | |
− | + | <source src="https://static.igem.org/mediawiki/2020/e/e2/T--AUC-EGYPT--Stage_1_VideoV2.mp4" type="video/mp4"> | |
+ | </video> </div> | ||
+ | <div id="slide_one" class="swiper-slide"> | ||
+ | <img src="https://static.igem.org/mediawiki/2020/d/d3/T--AUC-EGYPT--sol.png" style="width:900px; height: 507px;"> | ||
+ | </div> | ||
+ | <div id="slide_two" class="swiper-slide"> | ||
+ | <video width="900" height="480" autoplay loop> | ||
+ | <source src="https://static.igem.org/mediawiki/2020/c/c8/T--AUC-EGYPT--Stage_2_Video.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <img style="margin-button:260%;margin-left: 47%;" src="https://img.icons8.com/emoji/100/000000/2nd-place-medal-emoji.png"/> | ||
+ | |||
+ | </div> | ||
+ | <!-- Add Pagination --> | ||
+ | <div class="swiper-pagination"></div> | ||
+ | <!-- Add Arrows --> | ||
+ | <div class="swiper-button-next"></div> | ||
+ | <div class="swiper-button-prev"></div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Swiper JS --> | ||
+ | <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/js/swiper.min.js"></script> | ||
+ | |||
+ | <!-- Initialize Swiper --> | ||
+ | <script> | ||
+ | var swiper = new Swiper('.swiper-container', { | ||
+ | pagination: '.swiper-pagination', | ||
+ | paginationClickable: true, | ||
+ | nextButton: '.swiper-button-next', | ||
+ | prevButton: '.swiper-button-prev', | ||
+ | spaceBetween: 30, | ||
+ | |||
+ | autoplayDisableOnInteraction: false | ||
+ | }); | ||
+ | </script> | ||
+ | </div> | ||
+ | <!-- end .row --> | ||
+ | </div> | ||
+ | <!-- end .container--> | ||
+ | </div> | ||
+ | |||
+ | |||
− | + | <script> | |
− | + | var slideIndex = 0; | |
+ | showSlides(); | ||
+ | function showSlides() { | ||
+ | var i; | ||
+ | var slides = document.getElementsByClassName("mySlides"); | ||
+ | var dots = document.getElementsByClassName("dot"); | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
+ | } | ||
+ | slideIndex++; | ||
+ | if (slideIndex > slides.length) {slideIndex = 1} | ||
+ | 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"; | ||
+ | setTimeout(showSlides, 5000); // Change image every 5 seconds | ||
+ | } | ||
+ | </script> | ||
− | + | </body> | |
− | + | </html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + |
Latest revision as of 01:16, 19 December 2020