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...")
 
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>
 +
 
<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-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
 +
    -webkit-filter:blur(2px);
 +
  -moz-filter: blur(2px);
 +
  -o-filter: blur(2px);
 +
  -ms-filter: blur(2px);
 +
  filter: blur(2px);
 +
  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;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
 
 +
overflow: hidden;
 +
display: block;
 +
border: none;}
 +
 
 +
#mobilebackground {
 +
  background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
 
 +
    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;}
 +
 
 +
#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:1152px){
 +
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
}
 +
 +
 +
@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: 80%;
 +
background: #fff;
 +
}
 +
 +
</style>
 
</head>
 
</head>
−
<body>
+
 
−
<h5>Bactoman</h5>
+
<div id="mobilebackground"></div>
−
<!--<p>
+
<div id="header2">
 +
 
 +
<div id="wrapper">
 +
 
 +
<div id="wrapperbacto">
 +
 
 +
 
 +
 
 +
<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
 
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>-->
+
</p>
 +
 
 +
 
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
</div>
 +
 
 +
</div> </div>
 +
 
 
</body>
 
</body>
 +
 +
</html>

Revision as of 20:02, 31 October 2015

'

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