Difference between revisions of "Team:AUC-EGYPT"

(Replaced content with "{{IGEM_TopBar}}{{AUC-EGYPT/TemplateCSS}} {{AUC-EGYPT}}")
 
(96 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{IGEM_TopBar}}{{AUC-EGYPT/TemplateCSS}}
+
{{AUC-EGYPT/Wiki_Stripdown}}{{AUC-EGYPT/script}}{{AUC-EGYPT/navigationbar}}{{AUC-EGYPT/style.nav}}
−
{{AUC-EGYPT}}
+
<!--{{IGEM_TopBar}}{{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