Difference between revisions of "Team:CMUQ/Achievements"

Line 1: Line 1:
 
{{CMUQ/CSS}}
 
{{CMUQ/CSS}}
  
−
<html>
+
<html lang="en">
−
<title>W3.CSS</title>
+
<!--
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    Colours used:
−
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
        white: #F5F5F5 (whitesmoke)
−
<body>
+
        black: #101417
 +
        grey: #808080
 +
-->
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <!-- Preloaded elements which is added dynamically to the page, and as such might be needed before normally loaded -->
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/e/e2/T--NTNU_Trondheim--IMG_8974.jpg">
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/7/72/T--NTNU_Trondheim--Slideshow_03.jpeg">
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/4/4c/T--NTNU_Trondheim--IMG_8959.jpg">
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/9/93/T--NTNU_Trondheim--Description.jpg">
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/f/fe/T--NTNU_Trondheim--Slideshow_06.jpeg">
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/e/ef/T--NTNU_Trondheim--Slideshow_07.jpg">
 +
    <link rel="preload" as="image" href="https://static.igem.org/mediawiki/2017/a/ab/T--NTNU_Trondheim--Slideshow_08.jpg">
 +
    <!--stylesheets etc -->
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:NTNU_Trondheim/CSS/global?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:NTNU_Trondheim/CSS/footer?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:NTNU_Trondheim/CSS/menu?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:NTNU_Trondheim/CSS/content?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:NTNU_Trondheim/CSS/page_picture?action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css"
 +
          href="https://2017.igem.org/Template:NTNU_Trondheim/CSS/fix_code?action=raw&ctype=text/css" />
  
−
<div class="w3-container">
+
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
−
  <h2>Slideshow Caption</h2>
+
−
  <p>Add a caption text for each image slide with the w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or middle).</p>
+
−
</div>
+
  
−
<div class="w3-content w3-display-container">
+
    <script type="text/javascript" src="https://2017.igem.org/Template:NTNU_Trondheim/JS/picture_field_resize?action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:NTNU_Trondheim/JS/slideshow?action=raw&ctype=text/javascript"></script>
 +
</head>
  
−
<div class="w3-display-container mySlides">
 
−
  <img src="https://firebasestorage.googleapis.com/v0/b/qsiurp2018-24c40.appspot.com/o/iGem%2Fcompass.png?alt=media&token=c54cf2f9-045c-4dce-84d6-d934c68563f4" style="width:100%">
 
−
  <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
 
−
    French Alps
 
−
  </div>
 
−
</div>
 
−
 
−
<div class="w3-display-container mySlides">
 
−
  <img src="https://firebasestorage.googleapis.com/v0/b/qsiurp2018-24c40.appspot.com/o/iGem%2Fcompass.png?alt=media&token=c54cf2f9-045c-4dce-84d6-d934c68563f4" style="width:100%">
 
−
  <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
 
−
    Northern Lights
 
−
  </div>
 
−
</div>
 
−
 
−
<div class="w3-display-container mySlides">
 
−
  <img src="img_mountains.jpg" style="width:100%">
 
−
  <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
 
−
    Beautiful Mountains
 
−
  </div>
 
−
</div>
 
−
 
−
<div class="w3-display-container mySlides">
 
−
  <img src="img_forest.jpg" style="width:100%">
 
−
  <div class="w3-display-topright w3-large w3-container w3-padding-16 w3-black">
 
−
    The Rain Forest
 
−
  </div>
 
−
</div>
 
−
 
−
<div class="w3-display-container mySlides">
 
−
  <img src="img_mountains.jpg" style="width:100%">
 
−
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black">
 
−
    Mountains!
 
−
  </div>
 
−
</div>
 
−
 
−
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
 
−
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>
 
−
 
−
</div>
 
−
 
−
<script>
 
−
var slideIndex = 1;
 
−
showDivs(slideIndex);
 
−
 
−
function plusDivs(n) {
 
−
  showDivs(slideIndex += n);
 
−
}
 
−
 
−
function showDivs(n) {
 
−
  var i;
 
−
  var x = document.getElementsByClassName("mySlides");
 
−
  if (n > x.length) {slideIndex = 1}   
 
−
  if (n < 1) {slideIndex = x.length}
 
−
  for (i = 0; i < x.length; i++) {
 
−
    x[i].style.display = "none"; 
 
−
  }
 
−
  x[slideIndex-1].style.display = "block"; 
 
−
}
 
−
</script>
 
−
 
−
</body>
 
 
</html>
 
</html>

Revision as of 09:42, 8 August 2018