|
|
| Line 1: |
Line 1: |
| − |
| |
| | | | |
| | {{CSS_UCL6}} | | {{CSS_UCL6}} |
| Line 6: |
Line 5: |
| | <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> |
| | | | |
| | | | |
| − | .mainmenu {background-color: #fff !important;} | + | .hide { |
| − | .menu-items a {color: #493C54;}
| + | display: none; |
| − | .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 | | #header2:before |
| | { | | { |
| | content: ""; | | content: ""; |
| − | background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg'); | + | background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg |
| | + | '); |
| | background-repeat: no-repeat; | | background-repeat: no-repeat; |
| | background-attachment: fixed !important; | | background-attachment: fixed !important; |
| − | -webkit-background-size: 100% 140%; | + | -webkit-background-size: cover; |
| − | background-position: 0 -100px; | + | -moz-background-size: cover; |
| − | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 600, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.6))); | + | -o-background-size: cover; |
| | + | background-size: cover; |
| | + | -webkit-box-sizing: border-box; |
| | + | -moz-box-sizing: border-box; |
| | + | box-sizing: border-box; |
| | position: absolute; | | position: absolute; |
| | top: 0; | | top: 0; |
| Line 121: |
Line 33: |
| | padding: 0; | | padding: 0; |
| | width: 100%; | | width: 100%; |
| − | height: 100%; | + | height: 3000px; |
| − | padding-bottom: 100px;
| + | |
| | overflow: hidden; | | overflow: hidden; |
| | display: block; | | display: block; |
| − | border: none;} | + | border: none; |
| | | | |
| − | #mobilebackground {
| + | } |
| − | background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_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)));
| + | |
| | | | |
| | + | |
| | + | |
| | + | #mobilebackground { |
| | + | background-image: url('https://static.igem.org/mediawiki/2015/0/05/UCL_11898614_10152993243092791_343687533393499844_n.jpg |
| | + | '); |
| | top: 0; | | top: 0; |
| | right: 0; | | right: 0; |
| Line 151: |
Line 65: |
| | | | |
| | | | |
| − | #wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1; overflow: auto;
| |
| − |
| |
| | | | |
| | | | |
| − | }
| + | #header2 { |
| − | | + | width: 100%; |
| − | #submenu {width: 100%; margin-top: 20px; text-align: center; position: relative; z-index: 999999;} | + | position: relative; |
| − | | + | padding: 0; |
| − | #text {margin-top: 50px; z-index: 9999; height: auto;}
| + | top: 0; |
| − | | + | bottom: 0; |
| − | | + | left: 0; |
| − | .blockk h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; background-color: #418E69; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.75;
| + | letter-spacing: 1.1px; |
| − | transition-property: opacity;
| + | font-family: Raleway; |
| − | transition-duration: 1s;
| + | margin: 0 auto; |
| − | transition-timing-function: ease; }
| + | min-height: 100%; |
| − | | + | height: auto; |
| − | .blockk {position: relative; width: 100%; height: auto;} | + | vertical-align: middle; |
| − | | + | padding-bottom: 100px; |
| − | .blockk:hover h2 {opacity: 1 !important; transition-property: opacity;
| + | margin-bottom: -10px; |
| − | 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; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b; width: 100%; overflow: auto;
| + | |
| | } | | } |
| | | | |
| − | #wraplatescolumn1 {width: 47%; float: left; padding-right: 2%;}
| |
| | | | |
| − | #wraplatescolumn2 {width: 50%; float: right; | + | #menu2 {top: 0px; left: 100px; position: relative; width: 21%; float: left; z-index: 99;} |
| | | | |
| − | }
| |
| | | | |
| | + | #menu3 {top: 0px; left: 100px; position: relative; width: 21%; float: left; z-index: 99; display: none; } |
| | + | #wrapper {width: 100%; padding-top: 100px; position: relative; margin: 0 auto; height: 100%;} |
| | | | |
| | + | #protocolcontent {width: 60%; top: 24px; position: relative; float: right; background: none; right: 100px; padding-bottom: 100px; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.7))); height: 100%; } |
| | | | |
| − | #wraplates img {width: 100%; border-radius: 10px; opacity: 0.8;
| |
| − | }
| |
| | | | |
| | + | .protcl { background-color: #fff; border-radius: 15px; border: 15px #fff solid; padding: 20px; position: relative; height: 100%;} |
| | | | |
| | | | |
| | | | |
| − | #text a, .blockk a {color: #418E69; font-weight: bold; text-decoration: none;}
| + | .protcl h4 {text-decoration: none; font-size: 14px; border-bottom: 0px; margin: 0 auto; padding: 0;} |
| − | #text a:hover, .blockk a:hover {color: #418E69; font-weight: bold; text-decoration: none;}
| + | .protcl h4 li {font-weight: normal; padding: 2px;} |
| − | #text a:visited, .blockk a:visited {color: #418E69; font-weight: bold; text-decoration: none;}
| + | .protcl h4 ol {font-weight: normal;} |
| | + | .protcl img {width: 100%; height: auto;} |
| | | | |
| − | .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 {
| + | #protocolcontent h2 {text-decoration: none; border-bottom: 0px; font-size: 18px; font-family: Raleway; text-transform: uppercase; letter-spacing: 4px; text-align: center;} |
| − | position: relative;
| + | |
| − | } | + | |
| | | | |
| − | .content {color: #d67166;}
| |
| | | | |
| − | .bigtitle {width: 74%; 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; | + | .title {margin-left: 30px; padding-left: 20px; margin: 0; padding: 0; color: #000; font-family: League Script; font-size: 64px;} |
| − | background-position: top center; background-repeat: no-repeat; background-size: contain; padding: 13%; position: relative; margin-bottom: 100px; color: #22343C;}
| + | |
| | | | |
| − | .bigtitle a {color: #22343C; text-decoration: none;}
| |
| | | | |
| − | .title2 {font-family: League Script; font-size: 380%; line-height: 1;}
| + | #menu2 ul, #menu3 ul {list-style: none; margin: 0; padding: 0; margin-top: -20px; } |
| | + | #menu2 ul li, #menu3 ul li {background-color: rgba(255, 255, 255, 0.8); list-style: none; padding-top: 7px; padding-bottom: 7px; margin-bottom: 10px; margin-top: -4px; opacity: 0.6; color: #000; padding-left: 13px; font-family: Raleway; |
| | + | letter-spacing: 1.1px; font-size: 14px; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0); cursor: pointer; display: block; } |
| | | | |
| − | .titlecircle {width: 100%; margin: 0 auto; padding-top: 14%;}
| |
| | | | |
| − | .arrow {font-size: 50px;}
| + | #menu2 ul li:hover, #menu3 ul li:hover {opacity: 0.7; transition-property: opacity; |
| − | | + | transition-duration: 1s; |
| − | | + | transition-timing-function: ease; color: #000; -webkit-transition: color ease-in-out 150ms;} |
| − | .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; | + | li.selected {background: #fff; border: 2px solid !important; border-color: #22343C; color: #22343C; opacity: 1 !important; animation: selectedappear 1s ease-in 0s 1; |
| | + | -webkit-animation: selectedappear 1s ease-in 0s 1; font-size: 15px; |
| | } | | } |
| | | | |
| − | @media(max-width:1280px){ | + | @-webkit-keyframes selectedappear {0% {opacity: 0.7;} 100% {opacity: 1;}} |
| | | | |
| − | .bigtitle {font-size: 15px;} | + | li.selected:hover {background: #fff; opacity: 1 !important; border: 2px solid !important; border-color: #22343C !important; color: #22343C !important;} |
| − | .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){.title {font-size: 56px;} |
| | + | #menu2 {left: 80px; width: 22%;} |
| | + | #protocolcontent {right: 80px; width: 61%;} |
| | } | | } |
| | | | |
| | | | |
| − | | + | @media(max-width:1024px){ .title {font-size: 50px;} .protcl {padding: 12px;} #menu2 {left: 70px;} |
| − | | + | #protocolcontent {right: 70px;} |
| − | @media(max-width:1152px){
| + | #mobilebackground {display:block;} |
| − | | + | |
| − | .bigtitle {font-size: 14px;}
| + | |
| − | .bigtitle {width: 52%;}
| + | |
| − | .titlecircle {width: 90%;}
| + | |
| − | 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: 808;} | + | |
| − | #wrapper {top: 100px; width: 88%; margin: 0 auto; overflow-x: hidden;} | + | |
| − | .blockk {margin-left: 1%; width: 99%;}
| + | |
| − | a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
| + | |
| | #header2:before {background-image: none;} | | #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:960px){ #menu2 ul li {font-size: 13px; padding-top: 5px; padding-bottom: 5px;} .protcl h4 {font-size: 13px;} .protcl {padding: 8px;} #mobilebackground {opacity: 0.9;} } |
| | | | |
| − | @media(max-width:910px){
| |
| − | }
| |
| | | | |
| − | @media(max-width:850px){ | + | @media(max-width:910px){ #menu2 {left: 45px; width: 24%;} |
| − | a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
| + | #protocolcontent {right: 45px; width: 63%;} .title {font-size: 46px;} |
| − | .buttonblack {padding: 4px 3px;}
| + | |
| − | .constructs img {min-width: 80% !important;}
| + | |
| − | .blockk {font-size: 13px;} | + | |
| | | | |
| | | | |
| | + | } |
| | | | |
| | + | @media(max-width:830px){ #menu2 {left: 35px;} |
| | + | #protocolcontent {right: 35px;} .protcl {border-radius: 10px;} #mobilebackground {opacity: 0.8;} |
| | + | #menu2 ul li {padding-top: 3px; padding-bottom: 3px; |
| | + | padding-left: 10px; padding-right: 10px; opacity: 0.8;} li.selected, li.selected:hover {border: 1px solid !important;} |
| | | | |
| | } | | } |
| | | | |
| | + | @media(max-width: 768px){#wrapper {padding-top: 50px;} |
| | + | .title {font-size: 56px;} .protcl {padding-top: 25px;} .protcl h4 { line-height: 1.3;} |
| | | | |
| − |
| |
| − | @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;}
| |
| | | | |
| | | | |
| Line 349: |
Line 166: |
| | | | |
| | | | |
| | + | @media(max-width:680px){.protcl {padding-top: 35px;} #menu2 ul li {padding-left: 5px;} .protcl h4 ul {margin: 0;}} |
| | | | |
| | + | @media(max-width:620px){ #menu2 {left: 20px; width: 27%;} |
| | + | #protocolcontent {right: 20px; width: 63%;} .protcl {padding: 35 5 5 5;} #protocolcontent h2 {font-size: 16px; letter-spacing: 3px;} |
| | | | |
| − | @media(max-width:680px){
| + | .protcl img {width: 100% !important; height: auto !important;} |
| − | #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){ | + | @media(max-width:530px) { #menu2 {left: 10px; width: 28%;}} |
| − | .title2 {font-size: 420%;}
| + | @media(max-width:520px){ #menu3 {width: 80%; left: 10%; display: inline;} #menu2 {display: none;} #menu3 ul li {padding-left: 5px; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; opacity: 0.8; font-size: 13px;} |
| − | #submenu {width: 80%; margin: 0 auto;}
| + | #protocolcontent {width: 80%; right: 10%;} } |
| − | #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.7;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | @media(max-width: 360px) {
| + | |
| − | | + | |
| − | .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| | </style> | | </style> |
| | </head> | | </head> |
| | + | <body> |
| | | | |
| | <div id="mobilebackground"></div> | | <div id="mobilebackground"></div> |
| | | | |
| − | <div id="header2"> | + | |
| | | | |
| | + | |
| | <div id="wrapper"> | | <div id="wrapper"> |
| | | | |
| − | <div class="bigtitle"> | + | |
| − | <div class="titlecircle"><span class="title2">Collaborations</span> <br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >▼ </a></span> | + | <p class="title">Collaborations</p> |
| | + | <ul class="cos"> |
| | + | <li id="item1">UCL iGEM Bootcamp Mini Jamboree </li> |
| | + | <li id="item2">London iGEM Meet-up</li> |
| | + | <li id="item3">UCL iGEM 2015 Collaboration survey</li> |
| | + | <li id="item4">2015 Oxford Team: short video assays</li> |
| | + | <li id="item5">2015 Paris-Bettencourt Team: Rhizi database</li> |
| | | | |
| | | | |
| | | | |
| − | </div> </div> | + | </ul> |
| | | | |
| − | <div class="blockk">
| + | </div> |
| − | <!--GENERAL SUMMARY HERE -->
| + | |
| − | </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="#showcase" class="buttonblack">SynBio Showcase</a>
| |
| | | | |
| | + | <div id="menu3"> |
| | + | <p class="title">Collaborations</p> |
| | + | <ul class="cos"> |
| | + | <a href="#digestion"><li id="item1">UCL iGEM Bootcamp Mini Jamboree</li></a> |
| | + | <a href="#ligation"><li id="item2">London iGEM Meet-up</li></a> |
| | + | <a href="#transformation"><li id="item3">UCL iGEM 2015 Collaboration survey</li></a> |
| | + | <a href="#gel"><li id="item4">2015 Oxford Team: short video assays</li></a> |
| | + | <a href="#gelextraction"><li id="item5">2015 Paris-Bettencourt Team: Rhizi database</li></a> |
| | + | |
| | + | <!-- <li id="item11">...</li> |
| | + | <li id="item12">...</li> |
| | + | <li id="item13">...</li> --> |
| | | | |
| − | <!--
| |
| − | <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> | + | </ul> |
| | | | |
| | + | </div> |
| | | | |
| | + | <div id="protocolcontent"> |
| | + | <div class="default-text"></div> |
| | + | |
| | | | |
| − | <div id="text">
| + | <div class=" about- item1 hide"> |
| − | <div class="blockk"> | + | |
| − | <h2><span id="lates" style="padding-top: 150px;"> . </span> </h2>
| + | |
| − | | + | |
| − | <div id="wraplates">
| + | |
| − | <div id="wraplatescolumn1">
| + | |
| − | | + | |
| | | | |
| | | | |
| | + | <div class="protcl" id="digestion"> <h2>Restriction digestion</h2> |
| | + | <h4> |
| | + | . |
| | + | </h4> |
| | </div> | | </div> |
| | | | |
| | + | </div> |
| | + | |
| | | | |
| | + | <div class="about-item2 hide"> |
| | + | |
| | + | <div id="ligation" class="protcl"> <h2> </h2> |
| | + | <h4> |
| | | | |
| | | | |
| − | <div id="wraplatescolumn2"> | + | </h4> |
| | | | |
| | | | |
| | </div> | | </div> |
| − | </div>
| + | </div> |
| − | </div> | + | |
| | | | |
| | | | |
| − | <br/><br/> | + | <div class="about-item3 hide"> |
| | + | <div id="transformation" class="protcl"><h2>Transformation </h2> |
| | + | <h4> |
| | | | |
| | | | |
| | + | </h4> |
| | | | |
| − | </div></div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!---
| |
| − |
| |
| − |
| |
| − | OLD TEXT
| |
| − |
| |
| − | <h2>UCL Academy </h2>
| |
| − | <p> With hopes of engaging the high school students of UCL Academy with synthetic biology, we´ll be teaching them about our iGEM project and lab protocols as well as working with them on their very first synthetic biology project throughout the summer.</p>
| |
| − |
| |
| − | <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>
| |
| − |
| |
| − | -->
| |
| | | | |
| | </div> | | </div> |
| | + | </div> |
| | | | |
| | | | |
| − | </div>
| |
| | | | |
| − | </div> </div> </div>
| |
| | | | |
| − | </body> | + | </div></div></div> |
| | | | |
| − | </html>
| |
| | | | |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!---
| |
| − |
| |
| − | <p>In iGEM it is all about collaborating! Throughout the summer we have been in contact with multiple iGEM teams from all over the world to improve our projects, benefit from one another's ideas and also because working together is always more fun.</p>
| |
| − | <div>
| |
| − | <br>
| |
| − | <h2 style="margin-top:1%">UCL iGEM Bootcamp Mini Jamboree </h2>
| |
| − |
| |
| − | <p>In collaboration with the London Biohackspace and Birkbeck College, we hosted an intensive, gruelling bootcamp that enlightened the attendees about various biobrick assembly protocols, biohacking, automation, and softwares associated with synthetic biology. The bootcamp culminated in a fascinating mini Jamboree, which featured all our iGEM projects, wiki and modeling tutorials, and even a DIY Spectrophotometer made in 1 week! </p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h2 style="margin-top:1%">London iGEM Meet-up</h2>
| |
| − | <p>iGEM teams around London met up on 31<sup>st</sup> of July at Birkbeck and presented the current progress of their research projects to each other, followed by a poster session and time for socialising. The teams involved were: UCL, Birkbeck, London Biohackspace, Westminster and Kent. </p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h2 style="margin-top:1%">2014 Aalto-Helsinki Team: Blue-Light-Response Element</h2>
| |
| − | <p>In order to use our constructs as personalised treatment devices, we collaborated with the Aalto-Helsinki team to use the blue-light-response element they created in 2014. The idea is to have a handheld/mobile device that can emit blue light and induce expression of out constructs when needed.</p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h2 style="margin-top:1%">UCL iGEM 2015 Collaboration survey</h2>
| |
| − | <p>This year UCL iGEM team has prepared an ambitious survey to to get the public's perception on synthetic biology, genetic engineering and probiotics. As survey was translated into 5 different languages including Spanish, French, Portuguese and German we have collaborated with iGEM teams from all around the world to collect as many data as possible as well as see how people's opinion on these topics varies from country to country.</p>
| |
| − | <p>All our collaborators received a badge to express our gratitude for the joint collaboration.The teams that collaborated with us were:</p>
| |
| − | <ul>
| |
| − | <li>Brasil-USP iGEM</li>
| |
| − | <li>Bordeaux iGEM</li>
| |
| − | <li>Macquarie iGEM</li>
| |
| − | <li>UNSW iGEM</li>
| |
| − | </ul>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h2 style="margin-top:1%">2015 Oxford Team: short video assays on Synthetic biology and Health</h2>
| |
| − | <p> In August 2015, members of the Oxford and UCL iGEM teams met up in London to get a grasp of the way people perceive Synthetic Biology applications in healthcare. The discussions worked as a platform for a collaboration between the Manchester-Graz, UCL and Oxford teams. In this joint initiative, they were able to gather some exciting new ideas on how to better develop an iGEM project that targets health conditions such as urinary tract infections (UTIs), schizophrenia and other mental health conditions such as anxiety and depression.</p>
| |
| − |
| |
| − | <br>
| |
| − |
| |
| − | <h2 style="margin-top:1%">2015 Paris-Bettencourt Team: Rhizi database</h2>
| |
| − | <p> We joined the Rhizi graphical database created by the Paris-Bettencourt team and received a pretty collaboration badge as a token for our appreciation.</p>
| |
| | </body> | | </body> |
| − | iGEM's NOTES ABOUT COLLABORATION
| |
| − | <p>
| |
| − | Sharing and collaboration are core values of iGEM. We encourage you to reach out and work with other teams on difficult problems that you can more easily solve together.
| |
| − | </p>
| |
| | | | |
| − | <div class="highlightBox"> | + | <script type="text/x-mathjax-config"> |
| | + | MathJax.Hub.Config({ |
| | + | tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} |
| | + | }); |
| | + | </script> |
| | + | <script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> |
| | | | |
| − | <h4> Which other teams can we work with? </h4> | + | <script type="text/javascript"> |
| − | <p>
| + | $('.cos li').click(function(e) { |
| − | You can work with any other team in the competition, including software, hardware, high school and other tracks. You can also work with non-iGEM research groups, but they do not count towards the <a hreef="https://2015.igem.org/Judging/Awards#Medals">iGEM team collaboration gold medal criterion</a>.
| + | var $this = $(this), |
| − | </p>
| + | $id = $this.attr('id'), |
| | + | $class = '.' + $('.about-' + $id).attr('class').replace('hide', ''); |
| | + | |
| | + | $('.default-text').addClass('hide'); |
| | + | $('.about-' + $id).removeClass('hide'); |
| | + | $('div[class*=about]').not($class).addClass('hide'); |
| | + | $($this).addClass('selected'); |
| | + | $('li').not($this).removeClass('selected'); |
| | | | |
| − | <p>
| + | }); |
| − | In order to meet the gold medal criteria on helping another team, you must complete this page and detail the nature of your collaboration with another iGEM team.
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| | | | |
| − | <p>
| + | </script> |
| − | Here are some suggestions for projects you could work on with other teams:
| + | </html> |
| − | </p> | + | |
| − | | + | |
| − | <ul>
| + | |
| − | <li> Improve the function of another team's BioBrick Part or Device</li>
| + | |
| − | <li> Characterize another team's part </li>
| + | |
| − | <li> Debug a construct </li>
| + | |
| − | <li> Model or simulating another team's system </li>
| + | |
| − | <li> Test another team's software</li>
| + | |
| − | <li> Help build and test another team's hardware project</li>
| + | |
| − | <li> Mentor a high-school team</li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | <div style="height:50px;">
| + | |
| − | </div>
| + | |
| − | </body>
| + | |
| − | </head>
| + | |
| − | -->
| + | |
