Difference between revisions of "Team:UCL/PublicEngagement"

Line 1: Line 1:
−
{{CSS_UCL5}}
+
{{CSS_UCL6}}
 +
 
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<script>
 +
 +
  $(function () {
 +
  $('.content').myTooltip({
 +
    speed: 200,
 +
    closeOnClick: true
 +
  });
 +
 
 +
});
 +
 +
 +
 +
$.fn.myTooltip = function ( options ) {
 +
 
 +
 
 +
  var defaults = {
 +
    speed: 650,
 +
    closeOnClick: false,
 +
    tooltipClass: 'tooltip'
 +
  };
 +
 
 +
  var settings = $.extend( {}, defaults, options );
 +
 
 +
  var $this = $(this),
 +
      $tooltip = $this.find('.'+settings.tooltipClass);
 +
 
 +
 
 +
  setPosition();
 +
  $(window).resize(function () {
 +
    setPosition();
 +
  });
 +
 
 +
 
 +
  $this.mouseenter(function () {
 +
    $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 +
  }).mouseleave(function () {
 +
    $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 +
  });
 +
 
 +
  if(settings.closeOnClick) {
 +
    $tooltip.click(function () {
 +
      $(this).stop(true, true).fadeOut(settings.speed);
 +
    });
 +
  }
 +
 
 +
 
 +
  function setPosition() {
 +
    $tooltip.css({top: $this.height(), left: -150});
 +
  }
 +
 
 +
};
 +
 +
</script>
 +
 +
<script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 +
<script>
 +
smoothScroll.init({
 +
speed: 1000,
 +
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callbackBefore: function ( toggle, anchor ) {},
 +
callbackAfter: function ( toggle, anchor ) {}
 +
});
 +
</script>
 
<style>
 
<style>
  
  
−
/*h2 {
+
.mainmenu {background-color: #fff !important;}
−
font-size:200%;
+
.menu-items a {color: #493C54;}
−
}*/
+
.buttonblack {background-color: #22343C; border-color: #22343C; }
 +
a.buttonblack { color: #fff !important; font-size: 12px;}
 +
.buttonblack:hover {border-color: #22343C; color: #22343C !important;}
  
−
p {
+
 
−
margin-left:30px;
+
 
−
margin-bottom:40px;
+
 
 +
 
 +
 
 +
 
 +
#header2 {
 +
 
 +
width: 100%;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
margin: 0 auto;
 +
min-height: 100%;
 +
height: auto;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
 
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#header2:before
 +
{
 +
content: "";
 +
    background-image: url('https://static.igem.org/mediawiki/2015/9/9c/UCL_11951276_10152993241842791_5231271247123384140_n.jpg');
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed !important;
 +
  -webkit-background-size: 100% 140%;
 +
background-position: 0 -100px;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 600, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0.1)));
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
 
 +
overflow: hidden;
 +
display: block;
 +
border: none;}
 +
 
 +
#mobilebackground {
 +
  background-image: url('https://static.igem.org/mediawiki/2015/9/9c/UCL_11951276_10152993241842791_5231271247123384140_n.jpg');
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.1)));
 +
 
 +
    top: 0;
 +
    right: 0;
 +
    left: 0;
 +
    background-position: 0 0 0 0;
 +
position: fixed;
 +
    background-repeat: no-repeat;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: none;
 +
width: 100%;
 +
height: 100%;
 +
 
 +
  }
 +
 
 +
 
 +
#wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1; overflow: auto;
 +
 
 +
 
 +
 
 +
}
 +
 
 +
#submenu {width: 100%; margin-top: 20px; text-align: center; position: relative; z-index: 999999;}
 +
 
 +
#text {margin-top: 50px; z-index: 9999; height: auto;}
 +
 
 +
 
 +
#text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #418E69; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.75;
 +
transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 
 +
.blockk {position: relative; width: 100%;}
 +
 
 +
.blockk:hover h2 {opacity: 1 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 
 +
.blockk:hover img, .blockk:hover .latesimage {opacity: 0.9 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 
 +
#wraplates img:hover {opacity: 1 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease;}
 +
 
 +
.blockk {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b; width: 100%;
 
}
 
}
 +
 +
#wraplatescolumn1 {width: 47%; float: left; padding-right: 2%;}
 +
 +
#wraplatescolumn2 {width: 50%; float: right;
 +
 +
}
 +
 +
 +
 +
#wraplates img {width: 100%; border-radius: 10px; opacity: 0.8;
 +
}
 +
 +
 +
 +
 +
#text a {color: #418E69; font-weight: bold; text-decoration: none;}
 +
#text a:hover {color: #418E69; font-weight: bold; text-decoration: none;}
 +
#text a:visited {color: #418E69; font-weight: bold; text-decoration: none;}
 +
 +
.content .tooltip {
 +
  background-color: #fff;
 +
border: 1px #22343C solid;
 +
  border-radius: 4px;
 +
  padding: 3px;
 +
  position: absolute;
 +
  width: 300px;
 +
  z-Index: 99999;
 +
  display: none;
 +
letter-spacing: 1px;
 +
line-height: 1;
 +
font-size: 11px;
 +
}
 +
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
 +
 +
.content {
 +
  position: relative;
 +
}
 +
 +
.content {color: #d67166;}
 +
 +
.bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_Circlegreen.png'); text-align: center; line-height: 2;
 +
    background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 11%; position: relative; margin-bottom: 100px; color: #22343C; opacity: 0.7;}
 +
 +
.bigtitle a {color: #22343C; text-decoration: none;}
 +
 +
.title2 {font-family: League Script; font-size: 470%; line-height: 1;}
 +
 +
.titlecircle {width: 90%; margin: 0 auto; padding-top: 18%;}
 +
 +
.arrow {font-size: 50px;}
 +
 +
 +
.buttonblack {
 +
text-transform: uppercase;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 4px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
            color: #FFFFFF;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
 +
.latesimage {background: #fff; display: block; padding: 5px 8px; border: 1px solid; border-color: #22343C; border-radius: 10px; line-height: 1.5; letter-spacing: 0.8; font-weight: bold; margin-top: 5px; opacity: 0.7; margin-bottom: 40px;
 +
}
 +
 +
@media(max-width:1280px){
 +
 +
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
 +
.buttonblack {padding: 5px 11px;}
 +
 +
.blockk {line-height: 1.8;}
 +
#wraplatescolumn1 {width: 55%; float: left; padding-right: 2%;}
 +
#wraplatescolumn2 {width: 43%; float: right;}
 +
.latesimage {margin-bottom: 20px;}
 +
 +
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:1152px){
 +
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
.blockk {line-height: 1.6;}
 +
 +
}
 +
 +
 +
@media(max-width:1024px){
 +
.bigtitle {width: 58%; font-size: 13px;}
 +
.titlecircle {padding-top: 15%; width: 80%;}
 +
#wrapper {top: 100px; width: 88%; margin: 0 auto; margin-bottom: 100px; overflow-x: hidden;}
 +
.blockk {margin-left: 1%; width: 99%;}
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 +
#header2:before {background-image: none;}
 +
#mobilebackground {display: block;}
 +
.constructs {font-size: 15px;}
 +
 +
#wraplatescolumn2 .latesimage {margin-bottom: 35px;}
 +
 +
 +
 +
}
 +
 +
@media(max-width:960px){
 +
 +
.bigtitle {font-size: 13px; width: 60%; padding: 15%;}
 +
.buttonblack {padding: 5px 5px;}
 +
#submenu {width: 100%;}
 +
.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
 +
.constructs {text-align: center;}
 +
.blockk {line-height: 1.5;}
 +
.latesimage {font-size: 13px;}
 +
 +
}
 +
 +
 +
@media(max-width:910px){
 +
}
 +
 +
@media(max-width:850px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 +
.buttonblack {padding: 4px 3px;}
 +
.constructs img {min-width: 80% !important;}
 +
.blockk {font-size: 13px;}
 +
 +
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width: 768px){
 +
.bigtitle {font-size: 13px; padding: 20%; width: 60%;}
 +
.bigtitle p { font-size: 13px; margin-top: -20px !important;}
 +
.titlecircle {width: 100%; padding-top: 8%;}
 +
a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
#wraplatescolumn2 .latesimage {margin-bottom: 60px;}
 +
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:680px){
 +
#wrapper {width: 100%;}
 +
.blockk {margin-left: 5%; width: 90%;}
 +
.constructs {font-size: 13px;}
 +
.bigtitle p { font-size: 13px; }
 +
.titlecircle {width: 90%; padding-top: 10%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
 +
 +
 +
}
 +
 +
@media(max-width:640px){
 +
.title2 {font-size: 420%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
#wraplatescolumn2 .latesimage {margin-bottom: 150px;}
 +
.latesimage {font-size: 12px;}
 +
 +
 +
 +
}
 +
 +
 +
@media(max-width: 600px) {
 +
#wraplatescolumn1 {width: 90%; float: none; padding-right: 0;}
 +
#wraplatescolumn2 {width: 90%; float: none;}
 +
.blockk {margin-left: 10%; width: 90%;}
 +
.blockk h2 { width: 85%; font-size: 18px !important;}
 +
#wraplatescolumn2 .latesimage, #wraplatescolumn1 .latesimage {margin-bottom: 20px;}
 +
 +
}
 +
 +
@media(max-width:530px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
 +
.title2 {font-size: 400%;}
 +
.titlecircle {width: 100%; padding-top: 12%;}
 +
 +
 +
}
 +
 +
@media(max-width: 480px) {
 +
#submenu {width: 90%; margin: 0 auto;}
 +
.title2 {font-size: 380%;}
 +
 +
 +
 +
 +
}
 +
 +
@media(max-width: 430px) {
 +
.title2 {font-size: 360%;}
 +
.titlecircle {width: 100%; padding-top: 14%;}
 +
.bigtitle {padding: 18%; width: 66%;}
 +
}
 +
 +
@media(max-width: 380px) {
 +
 +
.titlecircle {width: 100%; padding-top: 18%;}
 +
.title2 {font-size: 320%;}
 +
 +
.bigtitle {padding: 15%; width: 70%; opacity: 1; }
 +
 +
#mobilebackground {-webkit-mask-image: none; opacity: 0.3;
 +
}
 +
 +
 +
}
 +
 +
 +
@media(max-width: 360px) {
 +
 +
.buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
 +
}
 +
 +
  
 
</style>
 
</style>
 
</head>
 
</head>
−
<body>
 
  
−
<div id="main">
+
<div id="mobilebackground"></div>
 +
<div id="header2">
  
 +
<div id="wrapper">
  
−
<h5>Education and Public Engagement</h5>
+
<div class="bigtitle">
−
<div style="height:80px"></div>
+
<div class="titlecircle"><span class="title2">Public engagement</span> <br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a></span>
−
<h2>Science Museum Lates</h2>
+
−
<p> After managing to get a spot on the Science Museum Lates, we spent an evening sharing our passion for synthetic biology with the public by informing them about iGEM and the coding of information in the form of DNA. They even went home with their names inscribed in bracelets coded in DNA! </p>
+
  
 +
</p>
 +
 +
</div> </div>
 +
<div id="submenu" style="padding-top: 150px;">
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#lates" class="buttonblack">Science Museum Lates</a>
 +
  <!--       
 +
<a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack"></a>
 +
  <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#" class="buttonblack">.</a> -->
 +
 +
</div>
 +
 +
 +
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="lates" style="padding-top: 150px;">Science Museum Lates</span> </h2>
 +
 +
<div id="wraplates">
 +
<div id="wraplatescolumn1">
 +
In the evening of 25th May, UCL iGEM team was invited to have its own stall at the Science Musuem. The invitation worked well in our favour as it was themed synthetic biology. Such themed nights in science museum are after hours hence, “late” and only held at the last Wednesday of every month. As we were still developing concrete project ideas then, we decided to stick to more general aspects of synthetic biology and make it interactive to all sorts of people with or without synbio background. One of the most fascinating topic of synthetic biology we decided to focus on that night was Craig Venter’s code table with alphabets and punctuations.
 +
<br/><br/>
 +
 +
 +
We thought the curious visitors would be able admire and appreciate synthetic biology more if they could relate to it in some personal level. We displayed multiple copies of Craig Venter’s synthetic codon table and initially explained the idea and logic behind this. One mg of DNA can potentially store upto 455 exabytes of data was able to constantly surprise people. <br/><br/>
 +
 +
To show an example of the data could be synthetically stored we used four different beads labelled A,G,T and C and using the Craig venter’s table people could convert their initials into three base codes. This was very helpful as people could then see how this system would work. Three unique non-degenerate bases made up of combination of A,G,T and C which represents either an alphabet or special character. <br/><br/>
 +
Once they were explained about the codon table, some of our team members were dedicated to help them weave a bracelet with their codon names on. Everyone was happy to learn something new and have a bracelet as a memorabilia. <br/> <br/>
 +
 +
Apart from the general talks on synthetic biology and Craig-Ventre’s now even more famous codon table, to the people with further interest in knowing what iGEM was, we talked about our project and participation and what we hoped to achieved by the end of this summer. <br/><br/>
 +
 +
Overall, we had a good experience talking to people about synthetic biology, iGEM ,bacteria and ourselves !
 +
 +
 +
<div style="height: 50px;"></div>
 +
<img src="https://static.igem.org/mediawiki/2015/7/75/UCL_Screenshot_2015-08-31_at_13.16.52.png"/> <br/><span class="latesimage">We have also shared Craig Venter’s table we used to interact and entertain people in number of hundreds below.</span>
 +
 +
<img src="https://static.igem.org/mediawiki/2015/0/0c/UCL_Screenshot_2015-08-31_at_13.17.14.png"/> <br/><span class="latesimage">
 +
The gentleman then passing his newly acquired knowledge or perhaps just trying to convince his slightly unhappy companion!</span>
 +
 +
 +
 +
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/b/bf/Screenshot_2015-08-31_at_13.17.41.png"/><br/><span class="latesimage">Proud bracelet owner!</span>
 +
 +
 +
 +
</div>
 +
 +
 +
 +
 +
<div id="wraplatescolumn2">
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/7/79/Screenshot_2015-08-31_at_13.16.20.png"><br/><span class="latesimage">Here’s a picture of some of our team setting up the table!</span>
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/c/c2/UCL_Screenshot_2015-08-31_at_13.16.27.png"><br/><span class="latesimage">Oh! What a mess! </span>
 +
 +
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/c/c8/UCL_Screenshot_2015-08-31_at_13.16.43.png"/> <br/><span class="latesimage">Some surprised and a little doubtful visitors here!</span>
 +
 +
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/8/8a/UCL_Screenshot_2015-08-31_at_13.16.59.png"/> <br/><span class="latesimage">Mariola assisting the gentleman with his queries! </span>
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/b/b0/Screenshot_2015-08-31_at_13.17.25.png"/><br/>
 +
<span class="latesimage">We also got people to be kind and helpful!</span>
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2015/6/69/Screenshot_2015-08-31_at_13.17.49.png"/>
 +
<br/>
 +
<span class="latesimage">Some even went on to tweet us!</span>
 +
</div>
 +
</div>
 +
 +
 +
 +
</div>
 +
 +
 +
 +
 +
<!--
 +
 +
<div class="blockk">
 +
 +
<h2> <span id=""  style="padding-top: 150px;"> title </span> </h2>
 +
 +
 +
</div>
 +
 +
-->
 +
 +
<!---OLD TEXT
  
 
<h2>UCL Academy </h2>
 
<h2>UCL Academy </h2>
Line 32: Line 549:
 
<h2>Headstart Summer School </h2>
 
<h2>Headstart Summer School </h2>
 
<p> We shared the joy of synthetic biology and iGEM with the A Level students from all over UK attending the UCL Headstart Biochemical Engineering Summer School at a reception and formal dinner.</p>
 
<p> We shared the joy of synthetic biology and iGEM with the A Level students from all over UK attending the UCL Headstart Biochemical Engineering Summer School at a reception and formal dinner.</p>
−
<div style="height:80px"></div>
+
 
 +
-->
 +
 
 
</div>
 
</div>
 +
 +
 +
</div>
 +
 +
</div> </div> </div>
 +
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 18:30, 31 August 2015

'

Public engagement
▼

Science Museum Lates

In the evening of 25th May, UCL iGEM team was invited to have its own stall at the Science Musuem. The invitation worked well in our favour as it was themed synthetic biology. Such themed nights in science museum are after hours hence, “late” and only held at the last Wednesday of every month. As we were still developing concrete project ideas then, we decided to stick to more general aspects of synthetic biology and make it interactive to all sorts of people with or without synbio background. One of the most fascinating topic of synthetic biology we decided to focus on that night was Craig Venter’s code table with alphabets and punctuations.

We thought the curious visitors would be able admire and appreciate synthetic biology more if they could relate to it in some personal level. We displayed multiple copies of Craig Venter’s synthetic codon table and initially explained the idea and logic behind this. One mg of DNA can potentially store upto 455 exabytes of data was able to constantly surprise people.

To show an example of the data could be synthetically stored we used four different beads labelled A,G,T and C and using the Craig venter’s table people could convert their initials into three base codes. This was very helpful as people could then see how this system would work. Three unique non-degenerate bases made up of combination of A,G,T and C which represents either an alphabet or special character.

Once they were explained about the codon table, some of our team members were dedicated to help them weave a bracelet with their codon names on. Everyone was happy to learn something new and have a bracelet as a memorabilia.

Apart from the general talks on synthetic biology and Craig-Ventre’s now even more famous codon table, to the people with further interest in knowing what iGEM was, we talked about our project and participation and what we hoped to achieved by the end of this summer.

Overall, we had a good experience talking to people about synthetic biology, iGEM ,bacteria and ourselves !

We have also shared Craig Venter’s table we used to interact and entertain people in number of hundreds below.
The gentleman then passing his newly acquired knowledge or perhaps just trying to convince his slightly unhappy companion!
Proud bracelet owner!

Here’s a picture of some of our team setting up the table!
Oh! What a mess!
Some surprised and a little doubtful visitors here!
Mariola assisting the gentleman with his queries!
We also got people to be kind and helpful!
Some even went on to tweet us!