Difference between revisions of "Team:KU Leuven/Engagement"

(Prototype team page)
 
Line 1: Line 1:
 
{{KU_Leuven}}
 
{{KU_Leuven}}
−
 
 
<html>
 
<html>
−
<div class="column full_size judges-will-not-evaluate">
+
<head>
−
<h3>★  ALERT! </h3>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
<style type="text/css">
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
        * {box-sizing:border-box}
−
</div>
+
        body {font-family: Verdana,sans-serif;}
−
<div class="clear"></div>
+
        .mySlides {display:none}
 +
       
 +
       
 +
        .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: 13px;
 +
          width: 13px;
 +
          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: 1s;
 +
          animation-name: fade;
 +
          animation-duration: 1s;
 +
        }
 +
 
 +
        @-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}
 +
        }
 +
 
 +
        .person h3::before,
 +
        .person h3::after {
 +
            content: '"';
 +
        }
 +
 
 +
        .person h2 {
 +
            padding-bottom: 0;
 +
        }
 +
 
 +
        .person h3 {
 +
            margin: 0;
 +
            padding: 0;
 +
 
 +
            font-size: 1em;
 +
            text-align: right;
 +
 
 +
            font-style: italic;
 +
 
 +
            padding: 0px 15px;
 +
            border-bottom: 0px;
 +
            color: #000;
 +
            font-family: Tahoma, Geneva, sans-serif !important;
 +
            font-weight: 100 !important;
 +
        }
 +
        </style>
 +
        </head>
 +
       
 +
        <h1 align="center"> Public Engagement</h1>
 +
        <p></p>
 +
       
 +
 
 +
        <div class="slideshow-container">
  
−
<div class="column half_size">
+
        <div class="mySlides fade">
 +
          <div class="numbertext">1 / 3</div>
 +
          <img src="https://static.igem.org/mediawiki/2017/4/47/KU_Leuven_Boxslider_2.png" style="width:100%">
 +
          <div class="text">Public Engagement</div>
 +
        </div>
  
−
<h1>Education and Public Engagement</h1>
+
        <div class="mySlides fade">
−
<h3>Best Education and Public Engagement Special Prize</h3>
+
          <div class="numbertext">2 / 3</div>
−
<p>Over the last few years, we have seen teams produce some truly outstanding work in the areas of education and public engagement. Innovative educational tools and public engagement activities have the ability to discuss the science behind synthetic biology, spark new scientific curiosity and establish a public dialogue about synthetic biology from voices/views outside the lab.
+
          <img src="https://static.igem.org/mediawiki/2017/1/1b/KULeuven_Boxslider.png" style="width:100%">
 +
          <div class="text">Public Engagement</div>
 +
        </div>
  
−
<br><br>
+
        <div class="mySlides fade">
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Education and Public Engagement prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
+
          <div class="numbertext">3 / 3</div>
−
<br><br>
+
          <img src="https://static.igem.org/mediawiki/2017/4/41/KU_Leuven_Boxslider3.png" style="width:100%">
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
          <div class="text">Public Engagement</div>
−
</p>
+
        </div>
−
</div>
+
  
 +
        </div>
 +
        <br>
  
 +
        <div style="text-align:center">
 +
          <span class="dot"></span>
 +
          <span class="dot"></span>
 +
          <span class="dot"></span>
 +
        </div>
 +
        <div class="team" id="team">
 +
          <div class="container">
  
 +
                <div class="person col-md-4">
 +
                    <div class="image">
 +
                        <img src="https://static.igem.org/mediawiki/2017/a/aa/KU_Leuven_Box3-01.png"/>
 +
                    </div>
 +
                    <h2>Public Engagement</h2>
 +
                    <p style="text-align:justify">Coming Soon</p>
 +
                </div>
  
−
<div class="column half_size">
+
                <div class="person col-md-4">
−
<h5>Inspiration</h5>
+
                    <div class="image">
−
<p>Here are a few examples of excellent Education and Public Engagement work:</p>
+
                        <img src="https://static.igem.org/mediawiki/2017/b/be/KU_Leuven_Box1-01.png" />
−
<ul>
+
                    </div>
−
<li><a href="https://2016.igem.org/Team:SCAU-China/Engagement">2016 SCAU-China</a></li>
+
                    <h2>Public Engagement</h2>
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">2016 Imperial College</a></li>
+
                    <p style="text-align:justify">Coming Soon.</p>
−
<li><a href="https://2015.igem.org/Team:UFMG_Brazil/Public_Engagement">2015 UFMG Brazil</a></li>
+
                </div>
−
<li><a href="https://2015.igem.org/Team:William_and_Mary/Practices"> 2015 William and Mary</a></li>
+
                <div class="person col-md-4">
−
</ul>
+
                    <div class="image">
 +
                        <img src="https://static.igem.org/mediawiki/2017/3/3f/KULeuven_Box2-01.png" />
 +
                    </div>
 +
                    <h2>Public Engagement</h2>
 +
                    <p style="text-align:justify"> Coming Soon</p>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
        </div>
  
−
</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, 3000); // Change image every 2 seconds
 +
}
 +
</script>
  
−
<div class="clear"></div>
+
</body>
−
</html>
+
</html>  
 +
{{KU_Leuven_footer}}

Revision as of 18:46, 20 October 2017

Public Engagement

1 / 3
Public Engagement
2 / 3
Public Engagement
3 / 3
Public Engagement

Public Engagement

Coming Soon

Public Engagement

Coming Soon.

Public Engagement

Coming Soon