Difference between revisions of "Team:Exeter"

 
(83 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
  
−
<!-- <link href='http://fonts.googleapis.com/css?family=Ek+Mukta' rel='stylesheet' type='text/css'> -->
+
<script src="https://2015.igem.org/Team:Exeter/bpopup/assets/jquery-bpopup-0-11-0-min-js?action=raw&amp;ctype=text/javascript"></script>
 +
<!--<script src="assets/jquery.easing.1.3.js"></script>
 +
<script src="assets/scripting.min.js"></script>-->
  
−
<div class="container">
+
<style type="text/css">
−
  <div class="row">
+
#wrapper, #infographic, .block {
−
     <div class="col-md-8">
+
     width:100%;
−
<section>
+
}
 +
#wrapper {
 +
    margin:0;
 +
}
 +
#infographic {
 +
    margin-top:35px;
 +
    position: relative;
 +
    display: inline-block;
 +
}
  
−
      <h1> Welcome to Exeter iGEM 2015! </h1>
+
#element_to_pop_up {
 +
    background-color:#fff;
 +
    border-radius:15px;
 +
    color:#000;
 +
    display:none;
 +
    padding:20px;
 +
    min-width:400px;
 +
    min-height: 180px;
 +
}
 +
.b-close{
 +
    cursor:pointer;
 +
    position:absolute;
 +
    right:10px;
 +
    top:5px;
 +
}
 +
#my-button {
 +
    z-index: 10;
 +
    position: absolute;
 +
    top: 53px;
 +
    left: 30px;
 +
    border-radius: 25px;
 +
    border: 1px solid #274e13;
 +
    background: #b6d7a8;
 +
    padding: 15px;
 +
    box-shadow: 0px 0px 25px #888888;
 +
}
 +
</style>
  
 +
<script>
 +
    // Semicolon (;) to ensure closing of earlier scripting
 +
    // Encapsulation
 +
    // $ is assigned to jQuery
 +
    ;(function($) {
  
−
<div id="carouselcontainer" class="panel panel-default">
+
        // DOM Ready
−
<!-- Half Page Image Background Carousel Header -->
+
        $(function() {
−
<header id="myCarousel" class="carousel slide">
+
            $(document).ready(function() {
−
    <!-- Indicators -->
+
              $('#element_to_pop_up').bPopup();
−
    <ol class="carousel-indicators">
+
            });
−
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
            // Binding a click event
−
        <li data-target="#myCarousel" data-slide-to="1"></li>
+
            // From jQuery v.1.7.0 use .on() instead of .bind()
−
        <li data-target="#myCarousel" data-slide-to="2"></li>
+
            $('#my-button').bind('click', function(e) {
−
        <li data-target="#myCarousel" data-slide-to="3"></li>
+
−
        <li data-target="#myCarousel" data-slide-to="4"></li>
+
−
    </ol>
+
  
−
    <!-- Wrapper for Slides -->
+
                 // Prevents the default action to be triggered.  
−
    <div class="carousel-inner">
+
                 e.preventDefault();
−
        <div class="item active">
+
−
            <!-- Set the first background image using inline CSS below. -->
+
−
            <a href="https://2015.igem.org/Team:Exeter/Team">
+
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/2/21/Team_carousel_ex.JPG"/>
+
−
            <div class="carousel-caption">
+
−
                 <h2 style="color:#FFFFFF;"></h2>
+
−
            </div>
+
−
            </a>
+
−
        </div>
+
−
        <div class="item">
+
−
            <!-- Set the second background image using inline CSS below. -->
+
−
            <a href="https://2015.igem.org/Team:Exeter/Practices">
+
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/9/95/Exeter_Joe_carousel_1.png"/>
+
−
            <div class="carousel-caption">
+
−
                 <h2 style="color:#FFFFFF;"></h2>
+
−
            </div>
+
−
            </a>
+
−
        </div>
+
−
        <div class="item">
+
−
            <!-- Set the third background image using inline CSS below. -->
+
−
            <a href="https://2015.igem.org/Team:Exeter/Modeling">
+
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/3/3b/Model_carousel_ex.gif"/>
+
−
            <div class="carousel-caption">
+
−
                <h2></h2>
+
−
            </div>
+
−
            </a>
+
−
        </div>
+
−
      <div class="item">
+
−
            <!-- Set the third background image using inline CSS below. -->
+
−
            <a href="https://2015.igem.org/Team:Exeter/Experiments">
+
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/2/21/Exeter_lab_carousel.png"/>
+
−
            <div class="carousel-caption">
+
−
                <h2></h2>
+
−
            </div>
+
−
            </a>
+
−
        </div>
+
−
    <div class="item">
+
−
            <!-- Set the third background image using inline CSS below. -->
+
−
            <a href="https://2015.igem.org/Team:Exeter/Timeline">
+
−
            <img class="fill" src="https://static.igem.org/mediawiki/2015/1/1b/Exeter_ribonostics_logo.png"/>
+
−
            <div class="carousel-caption">
+
−
                <h2 style="color:#FFFFFF;"></h2>
+
−
            </div>
+
−
            </a>
+
−
        </div>
+
−
    </div>
+
  
−
    <!-- Controls -->
+
                // Triggering bPopup when click event is fired
−
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+
                $('#element_to_pop_up').bPopup();
−
        <span class="icon-prev"></span>
+
−
    </a>
+
−
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
+
−
        <span class="icon-next"></span>
+
−
    </a>
+
  
−
</header> <!-- End of  carousel-->
+
            });
 +
 
 +
        });
 +
 
 +
    })(jQuery);
 +
</script>
 +
 
 +
<script>
 +
var myVideo = document.getElementById("video1");
 +
 
 +
function playPause() {
 +
    if (myVideo.paused)
 +
        myVideo.play();
 +
    else
 +
        myVideo.pause();
 +
}
 +
 
 +
function makeBig() {
 +
    myVideo.width = 560;
 +
}
 +
 
 +
function makeSmall() {
 +
    myVideo.width = 320;
 +
}
 +
 
 +
function makeNormal() {
 +
    myVideo.width = 420;
 +
}
 +
</script>
 +
 
 +
 
 +
<div id="infographic" onload="$('#element_to_pop_up').bPopup();">
 +
 
 +
<!-- Button that triggers the popup -->
 +
<button id="my-button">Watch Our Video</button>
 +
<!-- Element to pop up -->
 +
<div id="element_to_pop_up">
 +
  <center>
 +
        <button onclick="playPause()">Play/Pause</button>
 +
    <video id="video1" width="320" height="240" autoplay>
 +
        <source src="https://static.igem.org/mediawiki/2015/5/5c/Bovine_TB_1_.mp4" type="video/mp4">
 +
        Your browser does not support the video tag.
 +
    </video>
 +
    <p style="font-size:1em">Click outside window to close</p> <a href="https://youtu.be/HTQQr_W3q2s"> Click to see our Video </a>
 +
  </center>
 
</div>
 
</div>
  
−
<div id="infographic">
 
 
<img class="block" src="https://static.igem.org/mediawiki/2015/d/d6/Exeter_home1.png"/>
 
<img class="block" src="https://static.igem.org/mediawiki/2015/d/d6/Exeter_home1.png"/>
 
<img class="block" src="https://static.igem.org/mediawiki/2015/0/0b/Exeter_home2.png"/>
 
<img class="block" src="https://static.igem.org/mediawiki/2015/0/0b/Exeter_home2.png"/>
Line 95: Line 125:
 
</div>
 
</div>
  
 +
 +
 +
<div style="background:#274e13; width:100%" class="container">
 
<!-- This is where my buttons are -->
 
<!-- This is where my buttons are -->
 +
<center style="background:#274e13; font-size:1.6em;"><a href="https://static.igem.org/mediawiki/2015/3/37/Exeter_home_infographic.png">Click here for the full infographic</a></center>
 
         <nav>
 
         <nav>
−
           <ul class="pager">
+
           <ul style="background:#274e13; margin:0; padding:100px;" class="pager">
 
             <li class="previous"><a href="https://2015.igem.org/Team:Exeter/Medal_Requirements"><span aria-hidden="true">&larr;</span>Medals</a></li>
 
             <li class="previous"><a href="https://2015.igem.org/Team:Exeter/Medal_Requirements"><span aria-hidden="true">&larr;</span>Medals</a></li>
 +
            <li style="color:#b6d7a8; font-size:2em">Use these buttons to see more</li>
 
             <li class="next"><a href="https://2015.igem.org/Team:Exeter/Description">Project<span aria-hidden="true">&rarr;</span></a></li>
 
             <li class="next"><a href="https://2015.igem.org/Team:Exeter/Description">Project<span aria-hidden="true">&rarr;</span></a></li>
 
           </ul>
 
           </ul>
 
         </nav>
 
         </nav>
 
         <!-- Buttons stop -->
 
         <!-- Buttons stop -->
−
 
−
      </div>      <!-- /.col-md-8 -->
 
−
    </div><!-- /.row -->
 
 
</div>
 
</div>
 +
 +
 
</html>
 
</html>
 
{{Exeterfooter}}
 
{{Exeterfooter}}

Latest revision as of 03:54, 19 September 2015

Click outside window to close

Click to see our Video
Click here for the full infographic
  • Contact us:
    exeterigem@gmail.com