|
|
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <head> | | <head> |
| | + | <style> |
| | + | #count{width:31%;} |
| | + | .counttable{width:90%;} |
| | + | table{width:100%;} |
| | + | td{width:16.667%;} |
| | | | |
| − | <script> | + | </style> |
| | | | |
| − | $(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>
| |
| − |
| |
| − |
| |
| − | .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/a/a6/UCL_MG_1643_2.jpg');
| |
| − | 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%;
| |
| − | pointer-events: none;
| |
| − | overflow: hidden;
| |
| − | display: block;
| |
| − | border: none;}
| |
| − |
| |
| − | #mobilebackground {
| |
| − | background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg');
| |
| − | -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%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #text h2 {
| |
| − | font-size: 30px !important;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #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: 340px; padding: 10px;}
| |
| − |
| |
| − | .citecryan:hover {opacity: 1; transition-property: opacity;
| |
| − | transition-duration: 1s;
| |
| − | transition-timing-function: ease;}
| |
| − |
| |
| − | .constructs {border-radius: 4px; margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1; padding: 40px; line-height: 1.4; padding-top: 25px;}
| |
| − | #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;
| |
| − | }
| |
| − |
| |
| − | .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/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: #22343C; text-decoration: none;}
| |
| − |
| |
| − | .title2 {font-family: League Script; font-size: 380%;}
| |
| − |
| |
| − | .titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
| |
| − |
| |
| − | .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;}
| |
| − | }
| |
| − |
| |
| − | .idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
| |
| − |
| |
| − |
| |
| − |
| |
| − | .idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px; border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;}
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | .constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1; margin-left: -20%;
| |
| − | border-radius: 15px; box-shadow: 0px 0px 20px #eaeaea;}
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | .constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none; transition-duration: 1s; transition-property: opacity;
| |
| − | transition-timing-function: ease; }
| |
| − |
| |
| − |
| |
| − | .constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity;
| |
| − | transition-timing-function: ease;}
| |
| − |
| |
| − |
| |
| − | </style>
| |
| | </head> | | </head> |
| − | | + | <body> |
| − | <div id="mobilebackground"></div> | + | <div id="main"> |
| − | <div id="header2"> | + | <h5>Gut-on-Chip</h5> |
| − | | + | <br> |
| − | <div id="wrapper"> | + | <h4>Introduction</h4> |
| − | | + | |
| − | <div class="bigtitle">
| + | |
| − | <div class="titlecircle"><span class="title2">Gut-on-a-chip</span><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >▼ </a></span>
| + | |
| − | | + | |
| − | | + | |
| − | </div> </div> | + | |
| − | <div id="submenu" style="padding-top: 150px;"> | + | |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#background" class="buttonblack">Introduction</a>
| + | |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#constructs" class="buttonblack">Monkey kidney fibroblast</a>
| + | |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#modelling" class="buttonblack">Modelling</a>
| + | |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#characterization" class="buttonblack">Protocol</a>
| + | |
| − | <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Results</a>
| + | |
| − |
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | <div id="text">
| + | |
| − | <div class="blockk">
| + | |
| − | <h2><span id="background" style="padding-top: 150px;">Introduction</span> </h2>
| + | |
| | <p>To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in: | | <p>To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in: |
| | | | |
| Line 451: |
Line 39: |
| | The microfluidics device will be initially tested using Monkey Kidney Epithelial Cells, which are very similar to Intestinal Epithelial Cells (Caco-2). Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere. | | The microfluidics device will be initially tested using Monkey Kidney Epithelial Cells, which are very similar to Intestinal Epithelial Cells (Caco-2). Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere. |
| | <br> | | <br> |
| − |
| + | <h4>Monkey Kidney Fibroblast Cell Culture:</h4> |
| − | <div id="text"> | + | |
| − | <div class="blockk">
| + | |
| − | <h2><span id="constructs" style="padding-top: 150px;">Monkey Kidney Fibroblast Cell Culture:</span> </h2>
| + | |
| | <br> | | <br> |
| | <img src="https://static.igem.org/mediawiki/2015/d/d6/08-25-2015_post_cd73_bead_trypsin_replate_0004.png" alt="Monkey kidney cells1"style="height:200px;"> | | <img src="https://static.igem.org/mediawiki/2015/d/d6/08-25-2015_post_cd73_bead_trypsin_replate_0004.png" alt="Monkey kidney cells1"style="height:200px;"> |