Difference between revisions of "Team:UCL/Bactoman"

(Created page with "{{CSS_UCL5}} <html> <head> <style> h5 { font-size:900% } </style> </head> <body> <h5>Bactoman</h5> <!--<p> Bactoman is a comic aimed to introduce our project to a younger audien...")
 
 
(33 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{CSS_UCL5}}
+
{{CSS_UCL6}}
 +
 
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<script type="text/JavaScript">
 +
 +
var image = new Array("https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png", "https://static.igem.org/mediawiki/2015/9/92/UCLbactoman2.png",
 +
"https://static.igem.org/mediawiki/2015/a/af/Uclbactoman3.png", "https://static.igem.org/mediawiki/2015/f/fb/Uclbactoman4.png", "https://static.igem.org/mediawiki/2015/e/ee/Uclabctoman5.png", "https://static.igem.org/mediawiki/2015/2/25/Uclbactoman6.png", "https://static.igem.org/mediawiki/2015/5/5b/Uclbactoman7.png", "https://static.igem.org/mediawiki/2015/0/03/Uclbactoman8.png", "https://static.igem.org/mediawiki/2015/a/aa/Uclbactoman9.png", "https://static.igem.org/mediawiki/2015/0/02/Uclbactoman10.png", "https://static.igem.org/mediawiki/2015/2/23/Uclbactoman11.png", "https://static.igem.org/mediawiki/2015/8/8e/Uclbactoman12.png", "https://static.igem.org/mediawiki/2015/d/dc/Uclbactoman13.png", "https://static.igem.org/mediawiki/2015/8/8c/Uclbactoman14.png", "https://static.igem.org/mediawiki/2015/9/9a/Uclbactoman15.png", "https://static.igem.org/mediawiki/2015/f/f7/Uclbactoman16.png", "https://static.igem.org/mediawiki/2015/f/fc/Uclbactoman17.png", "https://static.igem.org/mediawiki/2015/9/9c/Uclbactoman18.png", "https://static.igem.org/mediawiki/2015/4/4a/Uclbactoman19.png", "https://static.igem.org/mediawiki/2015/8/83/Uclbactoman20.png", "https://static.igem.org/mediawiki/2015/1/1a/Uclbactoman21.png", "https://static.igem.org/mediawiki/2015/d/df/Uclbactoman22.png", "https://static.igem.org/mediawiki/2015/c/cb/Uclbactomanlast.png")
 +
var imgNumber=1
 +
var numberOfImg = image.length
 +
 +
 +
function previousImage(){
 +
  if(imgNumber > 1){
 +
    imgNumber--
 +
    }
 +
  else{
 +
  imgNumber = numberOfImg
 +
}
 +
 +
  document.slideImage.src = image[imgNumber-1]
 +
    }
 +
 +
function nextImage(){
 +
  if(imgNumber < numberOfImg){
 +
    imgNumber++
 +
    }
 +
 +
  else{
 +
  imgNumber = 1
 +
}
 +
  document.slideImage.src = image[imgNumber-1]
 +
  }
 +
 
 +
if(document.images){
 +
  var image1 = new Image()
 +
  image1.src = "https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png"
 +
  var image2 = new Image()
 +
  image2.src = "https://static.igem.org/mediawiki/2015/9/92/UCLbactoman2.png"
 +
  var image3 = new Image()
 +
  image3.src = "https://static.igem.org/mediawiki/2015/a/af/Uclbactoman3.png"
 +
  var image4 = new Image()
 +
  image4.src = "https://static.igem.org/mediawiki/2015/f/fb/Uclbactoman4.png"
 +
  var image5 = new Image()
 +
  image5.src = "https://static.igem.org/mediawiki/2015/e/ee/Uclabctoman5.png"
 +
  var image6 = new Image()
 +
  image6.src = "https://static.igem.org/mediawiki/2015/2/25/Uclbactoman6.png"
 +
  var image7 = new Image()
 +
  image7.src = "https://static.igem.org/mediawiki/2015/5/5b/Uclbactoman7.png"
 +
  var image8 = new Image()
 +
  image8.src = "https://static.igem.org/mediawiki/2015/0/03/Uclbactoman8.png"
 +
 +
  }
 +
 
 +
 +
 +
</script>
 +
 +
 +
<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>
 +
 
<style>
 
<style>
−
h5 {
+
 
−
font-size:900%
+
 
 +
.mainmenu {background-color: #fff !important;}
 +
.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;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#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: #000;
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed !important;
 +
  -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;
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
 
 +
overflow: hidden;
 +
display: block;
 +
border: none;}
 +
 
 +
#mobilebackground {
 +
background: #000;
 +
    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: block;
 +
width: 100%;
 +
height: 100%;
 +
 
 +
  }
 +
 
 +
 
 +
#wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;}
 +
 
 +
#submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
 +
 
 +
#text {margin-top: 50px; z-index: 9999;}
 +
#text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }
 +
 
 +
.blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 
 +
#text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
 +
 
 +
.citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 100px; padding: 10px;}
 +
 
 +
.citecryan:hover {opacity: 1; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease;}
 +
 
 +
.constructs {background: #fff; border-radius: 4px; opacity: 1; padding: 10px; margin: 0 auto; text-align: justify; font-size: 17px;}
 +
#text a {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:hover {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:visited {color: #33726c; 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;
 
}
 
}
−
</style>
 
  
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
 +
 +
.content {
 +
  position: relative;
 +
}
 +
 +
.content {color: #d67166;}
 +
 +
.bigtitle {background-image:none/* url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
 +
    background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;*/}
 +
 +
.bigtitle a {color: #fff; text-decoration: none;}
 +
 +
.title2 {font-size: 380%;}
 +
 +
.titlecircle {width: 85%; margin: 0 auto; padding-top: 9%;}
 +
 +
.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;}
 +
 +
 +
@media(max-width:1280px){
 +
 +
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
 +
.buttonblack {padding: 5px 11px;}
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:1024px){
 +
.bigtitle {width: 58%;}
 +
.titlecircle {padding-top: 15%; width: 75%;}
 +
#wrapper {top: 100px;}
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 +
#header2:before {background-image: none;}
 +
#mobilebackground {display: block;}
 +
.constructs {font-size: 15px;}
 +
 +
 +
}
 +
 +
@media(max-width:960px){
 +
 +
.bigtitle {font-size: 13px; width: 65%;}
 +
.arrow {font-size: 40px;}
 +
.buttonblack {padding: 5px 5px;}
 +
#submenu {width: 110%; margin-left: -5%;}
 +
.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
 +
.constructs {text-align: center;}
 +
}
 +
 +
 +
@media(max-width:910px){
 +
}
 +
 +
@media(max-width:850px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 +
.buttonblack {padding: 4px 3px;}
 +
#submenu {width: 112%; margin-left: -6%;}
 +
.constructs img {min-width: 80% !important;}
 +
 +
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width: 768px){
 +
.bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
 +
.bigtitle p { font-size: 13px; margin-top: -20px !important;}
 +
.titlecircle {width: 70%; 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;}
 +
.citecryan {margin-left: 50px;}
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:680px){
 +
#wrapper {width: 100%;}
 +
#text {margin: 50px 25px 0 25px;}
 +
#text h4 {font-size: 13px;}
 +
.constructs {font-size: 13px;}
 +
.bigtitle p { font-size: 13px; }
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 70%; 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){
 +
.arrow {font-size: 30px;}
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width:530px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
 +
.bigtitle p {}
 +
.titlecircle {width: 60%;}
 +
.title2 {font-size: 320%;}
 +
#text h4 {line-height: 1.7;}
 +
.citecryan {margin-left: 10px;}
 +
 +
 +
}
 +
 +
@media(max-width: 480px) {
 +
.bigtitle p { font-size: 13px; text-align: center;}
 +
.titlecircle {width: 70%;}
 +
#submenu {width: 90%; margin: 0 auto;}
 +
 +
 +
 +
}
 +
 +
@media(max-width: 410px) {
 +
.titlecircle {width: 75%;}
 +
.title2 {font-size: 300%;}
 +
.bigtitle p {line-height: 1.5 !important;}
 +
}
 +
 +
@media(max-width: 380px) {
 +
.titlecircle {width: 75%; padding-top: 10%;}
 +
.bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
 +
.title2 {font-size: 260%;}
 +
 +
}
 +
 +
 +
@media(max-width: 360px) {
 +
.titlecircle {width: 80%;}
 +
.title2 {font-size: 240%;}
 +
.buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
 +
}
 +
 +
 +
 +
#wrapperbacto
 +
{position: relative;
 +
width: 90%;
 +
background: #fff;
 +
padding: 50px;
 +
margin-top: 50px;
 +
font-size: 14px;
 +
letter-spacing: 2px;
 +
border-radius: 10px;
 +
}
 +
 +
#wrapperbacto img {width: 95%;}
 +
 +
</style>
 
</head>
 
</head>
−
<body>
+
 
−
<h5>Bactoman</h5>
+
<div id="mobilebackground"></div>
−
<!--<p>
+
<div id="header2">
−
Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders
+
 
−
</p>-->
+
<div id="wrapper">
 +
 
 +
<div id="wrapperbacto">
 +
 
 +
 
 +
<center>
 +
<span class="title2">Bactoman</span></center><br/>
 +
<p>
 +
Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!<br/><br/><br/>
 +
 
 +
</p>
 +
<p></p>
 +
<p style="text-align: center; font-weight: bold;"><a href="JavaScript:previousImage()">Previous</a> &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="JavaScript:nextImage()">Next</a></p>
 +
</p>
 +
<p>
 +
<img src="https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png" name="slideImage"></p>
 +
 
 +
<p style="text-align: center; font-weight: bold;"><a href="JavaScript:previousImage()">Previous</a> &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="JavaScript:nextImage()">Next</a></p>
 +
 
 +
 
 +
 
 +
 
 +
<br/>
 +
 
 +
 
 +
</div>
 +
 
 +
<br/><br/>
 +
</div>
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
</div> </div>
 +
 
 
</body>
 
</body>
 +
 +
</html>

Latest revision as of 21:13, 31 October 2015

'

Bactoman

Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!


Previous                 Next

Previous                 Next