Line 7: | Line 7: | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > | ||
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> | ||
− | + | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | |
+ | <link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet"> | ||
+ | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <style> | ||
+ | body, html { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | font: 400 15px/1.8 "Lato", sans-serif; | ||
+ | color: #777; | ||
+ | } | ||
+ | .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-5, .bgimg-4 { | ||
+ | position: relative; | ||
+ | opacity: 0.65; | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat;F | ||
+ | background-size: cover; | ||
+ | |||
+ | } | ||
+ | .bgimg-1 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/e/e7/T--IIT_Delhi--InterlabPlate.jpeg"); | ||
+ | min-height: 600px; | ||
+ | } | ||
+ | |||
+ | .bgimg-2 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/f/ff/T--IIT_Delhi--white.jpeg"); | ||
+ | min-height: 100px; | ||
+ | } | ||
+ | |||
+ | .bgimg-3 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/f/ff/T--IIT_Delhi--white.jpeg"); | ||
+ | min-height: 100px; | ||
+ | } | ||
+ | |||
+ | .bgimg-4{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/9/90/T--IIT_Delhi--Dark2.png"); | ||
+ | min-height: 300px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .bgimg-5 { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2018/f/ff/T--IIT_Delhi--white.jpeg"); | ||
+ | min-height: 100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .caption { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 50%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | .caption span.border { | ||
+ | background-color: #111; | ||
+ | color: #fff; | ||
+ | padding: 18px; | ||
+ | font-size: 25px; | ||
+ | letter-spacing: 10px; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | letter-spacing: 5px; | ||
+ | text-transform: uppercase; | ||
+ | font: 20px "Lato", sans-serif; | ||
+ | color: #111; | ||
+ | } | ||
+ | |||
+ | /* Turn off parallax scrolling for tablets and phones */ | ||
+ | @media only screen and (max-device-width: 1024px) { | ||
+ | .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 { | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
<style> | <style> | ||
@charset "UTF-8"; | @charset "UTF-8"; | ||
Line 82: | Line 159: | ||
#banner { | #banner { | ||
− | background: url("T-- | + | background: url("https://static.igem.org/mediawiki/2018/f/f1/T--IIT_Delhi--Interlab.png") ; |
background-position: center; | background-position: center; | ||
Line 253: | Line 330: | ||
padding-left: 30px; | padding-left: 30px; | ||
} | } | ||
− | /*end of | + | /*end of overlayved*/ |
} | } | ||
Line 291: | Line 368: | ||
padding-bottom: 0px; | padding-bottom: 0px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.bggg | .bggg | ||
Line 312: | Line 380: | ||
background-size:cover; | background-size:cover; | ||
padding-bottom: 0px; | padding-bottom: 0px; | ||
− | |||
− | |||
} | } | ||
Line 333: | Line 399: | ||
text-align: center; | text-align: center; | ||
overflow: hidden; | overflow: hidden; | ||
− | background-color: | + | background-color: white; |
font-family: Arial, Helvetica, sans-serif; | font-family: Arial, Helvetica, sans-serif; | ||
position: static; | position: static; | ||
Line 344: | Line 410: | ||
font-size: 16px; | font-size: 16px; | ||
position:relative; | position:relative; | ||
− | color: | + | color: black; |
text-align: center; | text-align: center; | ||
Line 432: | Line 498: | ||
.active { | .active { | ||
background-color: #4CAF50; | background-color: #4CAF50; | ||
− | color: | + | color: black; |
} | } | ||
Line 459: | Line 525: | ||
z-index: 0; | z-index: 0; | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | @media screen and (max-width: 850px) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.navaman a{display: none;} | .navaman a{display: none;} | ||
.RespIcon {display: block;} | .RespIcon {display: block;} | ||
Line 480: | Line 541: | ||
margin-top: -17px; | margin-top: -17px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 501: | Line 557: | ||
margin-top: -15px; | margin-top: -15px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 522: | Line 573: | ||
margin-top: -10px; | margin-top: -10px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 544: | Line 590: | ||
margin-top: -8px; | margin-top: -8px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
</style> | </style> | ||
− | |||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > | ||
Line 615: | Line 653: | ||
mode: 'transform' | mode: 'transform' | ||
}, | }, | ||
− | + | navPanel: { | |
animation: 'pushX', | animation: 'pushX', | ||
breakpoints: 'medium', | breakpoints: 'medium', | ||
Line 621: | Line 659: | ||
height: '100%', | height: '100%', | ||
hidden: true, | hidden: true, | ||
− | html: '<div data-action="moveElement" data-args=" | + | html: '<div data-action="moveElement" data-args="nav"></div>', |
orientation: 'vertical', | orientation: 'vertical', | ||
position: 'top-left', | position: 'top-left', | ||
Line 627: | Line 665: | ||
width: 250 | width: 250 | ||
}, | }, | ||
− | + | navButton: { | |
breakpoints: 'medium', | breakpoints: 'medium', | ||
height: '4em', | height: '4em', | ||
− | html: '<span class="toggle" data-action="toggleLayer" data-args=" | + | html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span>', |
position: 'top-left', | position: 'top-left', | ||
side: 'top', | side: 'top', | ||
Line 661: | Line 699: | ||
<script> | <script> | ||
/* skel-layers.js v2.0.0 | (c) n33 | getskel.com | MIT licensed */ | /* skel-layers.js v2.0.0 | (c) n33 | getskel.com | MIT licensed */ | ||
− | + | (function(e){typeof define=="function"&&define.amd?define(["jquery","skel"],e):e(jQuery,skel)})(function(e,t){var n="config",r="cache",i="_skel_layers_translateOrigin",s="setTimeout",o="_skel_layers_resetForms",u="trigger",f="_skel_layers_translate",l="visibleWrapper",c="_skel_layers_promote",h="position",p="_skel_layers_demote",d="$element",v="moveToVisibleWrapper",m="moveToHiddenWrapper",g="_skel_layers_resume",y="exclusiveLayer",b="exclusive",w="_skel_layers_cssNumericValue",E="center",S="css",x="right",T="bottom",N="prototype",C=null,k="_skel_layers_init",L="width",A="_skel_layers_suspend",O="left",M="_skel_layers_doTranslate",_="overflow-x",D="layers",P="speed",H="wrapper",B="hidestart",j="showstart",F="skel-layers-layer-z-index",I="transform",q="children",R="skel-layers-moved",U="hiddenWrapper",z="scrollTop",W="parent",X="length",V="hideend",$="showend",J="auto",K=!1,Q=".skel-layers-fixed:not(.skel-layers-moved)",G="deviceType",Y="unlockView",Z="height",et="resetForms",tt="top",nt="touchstart.lock click.lock scroll.lock",rt="_height",it="element",st="hidden",ot='<div id="skel-layers-placeholder-',ut="iterate",at="_skel_layers_fadeOut",ft="transition",lt=!0,ct="_skel_layers_fadeIn",ht="-webkit-",pt="recalcW",dt="skel-layers-exclusiveVisible",vt="padding-bottom",mt="blur",gt="useActive",yt="-webkit-tap-highlight-color",bt="easing",wt="events",Et="isInitialized",St="animation",xt="lockView",Tt="originalEvent",Nt="100%",Ct="skel-layers-layer-position",kt="z-index",Lt="skel-layers-layer-index",At="animate",Ot="#skel-layers-placeholder-",Mt="animations",_t="skel_layers_hiddenWrapper",Dt="append",Pt="_skel_layers_initializeCell",Ht="_width",Bt="find",jt="registerLocation",Ft="resize.lock scroll.lock",It="orientationchange.lock",qt="none",Rt="undefined",Ut="positions",zt="stopPropagation",Wt="touchPosX",Xt="breakpoints",Vt="touchPosY",$t="hide",Jt="_skel_layers_expandCell",Kt="-moz-",Qt="canUseProperty",Gt="attr",Yt="preventDefault",Zt="_skel_layers_hasParent",en="window",tn="addClass",nn="-ms-",rn="visible",sn="absolute",on="opacity",un="_skel_layers_xcss",an="-o-",fn="rgba(0,0,0,0)",ln="removeClass",cn="show",hn="object",pn="ios",dn="s ",vn="appendTo",mn="getArray",gn="cell-size",yn="states",bn="x",wn="overflow-y",En="mode",Sn="max-height",xn="px",Tn="-",Nn="fixed",Cn="isVisible",kn="max-width",Ln="recalcH",An="touches",On="side",Mn="*",_n="opacity ",Dn="relative",Pn="body",Hn="htmlbody",Bn="#",jn="html";t.registerPlugin(D,function(e){function Zn(e,t,r){var i,s,o=this;this.id=e,this.index=r,this[wt]={},this[n]={breakpoints:C,states:C,position:C,side:C,animation:qt,orientation:qt,width:J,height:J,maxWidth:Nt,maxHeight:Nt,zIndex:this.index,html:"",hidden:K,exclusive:C,resetScroll:lt,resetForms:lt,swipeToHide:lt,clickToHide:K},Yn._.extend(this[n],t),this[n][b]===C&&(this[n][b]=this[n][st]),this[it]=Yn._.newDiv(this[n][jn]),this[it].id=e,this[it]._layer=this,this[d]=C,this[Wt]=C,this[Vt]=C,this[rn]=K,s=Yn._.newElement(this.id,this[it],_t,1),s.onAttach=function(){var e=this[hn]._layer;e[Et]()||e.init(),e.resume()},s.onDetach=function(){var e=this[hn]._layer;e.suspend()},o[n][yn]&&o[n][yn]!=Yn._.sd?(Yn._.cacheElement(s),i=Yn._[mn](o[n][yn]),Yn._[ut](i,function(e){Yn._.addCachedElementToState(i[e],s)})):o[n][Xt]?(Yn._.cacheElement(s),i=Yn._[mn](o[n][Xt]),Yn._[ut](i,function(e){Yn._.addCachedElementToBreakpoint(i[e],s)})):Yn._.attachElement(s)}var Yn;return typeof e==Rt?K:(e.fn[p]=function(){var t,n;if(this[X]>1){for(t=0;t<this[X];t++)e(this[t])[p]();return e(this)}return n=e(this),n[S](kt,n.data(F)).data(F,""),n},e.fn[Jt]=function(){var t=e(this),n=t[W](),r=12;n[q]().each(function(){var t=e(this),n=t[Gt]("class");n&&n.match(/(\s+|^)([0-9]+)u(\s+|$)/)&&(r-=parseInt(RegExp.$2))}),r>0&&(t[Pt](),t[S](L,(t.data(gn)+r)/12*100+"%"))},e.fn[Zt]=function(){return e(this).parents()[X]>0},e.fn[Pt]=function(){var t=e(this);t[Gt]("class").match(/(\s+|^)([0-9]+)u(\s+|$)/)&&t.data(gn,parseInt(RegExp.$2))},e.fn[c]=function(t){var r,i,s;if(this[X]>1){for(r=0;r<this[X];r++)e(this[r])[c](t);return e(this)}return i=e(this),isNaN(s=parseInt(i.data(Lt)))&&(s=0),i.data(F,i[S](kt))[S](kt,Yn[n].baseZIndex+s+(t?t:1)),i},e.fn[o]=function(){var t=e(this);return e(this)[Bt]("form").each(function(){this.reset()}),t},e.fn[un]=function(t,n){return e(this)[S](t,n)[S](Kt+t,Kt+n)[S](ht+t,ht+n)[S](an+t,an+n)[S](nn+t,nn+n)},e.fn._skel_layers_xcssProperty=function(t,n){return e(this)[S](t,n)[S](Kt+t,n)[S](ht+t,n)[S](an+t,n)[S](nn+t,n)},e.fn._skel_layers_xcssValue=function(t,n){return e(this)[S](t,n)[S](t,Kt+n)[S](t,ht+n)[S](t,an+n)[S](t,nn+n)},Zn[N][Mt]={none:{show:function(e){var t=e[n],r=e[d];r[z](0)[c](t.zIndex)[cn](),t[et]&&r[o](),t[b]&&Yn[xt](bn),e[v](),e[u](j),e[u]($)},hide:function(e){var t=e[n],r=e[d];r[Bt](Mn)[u](mt,[lt]),t[b]&&Yn[Y](bn),e[m](),r[p]()[$t](),e[u](B),e[u](V)}},fade:{show:function(e){var t=e[n],r=e[d];r[z](0)[c](t.zIndex)[S](on,0)[cn](),t[et]&&r[o](),t[b]&&Yn[xt](bn),e[v](),e[u](j),window[s](function(){r[ct](function(){e[u]($)})},50)},hide:function(e){var t=e[n],r=e[d];r[Bt](Mn)[u](mt,[lt]),e[u](B),r[at](function(){t[b]&&Yn[Y](bn),e[m](),r[p]()[$t](),e[u](V)})}},overlayvedX:{show:function(e){var t=e[n],r=e[d];r[z](0)[c](t.zIndex)[S](t[On],Tn+Yn[pt](t[Ht])+xn)[cn](),t[et]&&r[o](),t[b]&&Yn[xt](bn),e[v](),e[u](j),window[s](function(){r[f]((t[On]==x?Tn:"")+Yn[pt](t[Ht]),0),window[s](function(){e[u]($)},Yn[n][P])},50)},hide:function(e){var t=e[n],r=e[d];r[Bt](Mn)[u](mt,[lt]),e[u](B),r[i](),window[s](function(){t[b]&&Yn[Y](bn),e[m](),r[p]()[$t](),e[u](V)},Yn[n][P]+50)}},overlayvedY:{show:function(e){var t=e[n],r=e[d];r[z](0)[c](t.zIndex)[S](t[On],Tn+Yn[pt](t[rt])+xn)[cn](),t[et]&&r[o](),t[b]&&Yn[xt]("y"),e[v](),e[u](j),window[s](function(){r[f](0,(t[On]==T?Tn:"")+Yn[pt](t[rt])),window[s](function(){e[u]($)},Yn[n][P])},50)},hide:function(e){var t=e[n],r=e[d];r[Bt](Mn)[u](mt,[lt]),e[u](B),r[i](),window[s](function(){t[b]&&Yn[Y]("y"),e[m](),r[p]()[$t](),e[u](V)},Yn[n][P]+50)}},pushX:{show:function(e){var t=e[n],i=e[d],a=Yn[r][H].add(Yn[r][l][q]());i[z](0)[S](t[On],Tn+Yn[pt](t[Ht])+xn)[cn](),t[et]&&i[o](),a[c](),t[b]&&Yn[xt](bn),e[v](),e[u](j),window[s](function(){i.add(a)[f]((t[On]==x?Tn:"")+Yn[pt](t[Ht]),0),window[s](function(){e[u]($)},Yn[n][P])},50)},hide:function(e){var t=e[n],o=e[d],a=Yn[r][H].add(Yn[r][l][q]());o[Bt](Mn)[u](mt,[lt]),e[u](B),o.add(a)[i](),window[s](function(){t[b]&&Yn[Y](bn),o[$t](),e[m](),a[p](),e[u](V)},Yn[n][P]+50)}},pushY:{show:function(e){var t=e[n],i=e[d],a=Yn[r][H].add(Yn[r][l][q]());i[z](0)[S](t[On],Tn+Yn[Ln](t[rt])+xn)[cn](),t[et]&&i[o](),t[b]&&Yn[xt]("y"),e[v](),e[u](j),window[s](function(){i.add(a)[f](0,(t[On]==T?Tn:"")+Yn[Ln](t[rt])),window[s](function(){e[u]($)},Yn[n][P])},50)},hide:function(e){var t=e[n],o=e[d],a=Yn[r][H].add(Yn[r][l][q]());o[Bt](Mn)[u](mt,[lt]),e[u](B),o.add(a)[i](),window[s](function(){t[b]&&Yn[Y]("y"),o[$t](),e[m](),e[u](V)},Yn[n][P]+50)}},revealX:{show:function(e){var t=e[n],i=e[d],a=Yn[r][H].add(Yn[r][l][q]());i[z](0)[cn](),t[et]&&i[o](),a[c](),t[b]&&Yn[xt](bn),e[v](),e[u](j),window[s](function(){a[f]((t[On]==x?Tn:"")+Yn[pt](t[Ht]),0),window[s](function(){e[u]($)},Yn[n][P])},50)},hide:function(e){var t=e[n],o=e[d],a=Yn[r][H].add(Yn[r][l][q]());o[Bt](Mn)[u](mt,[lt]),e[u](B),a[i](),window[s](function(){t[b]&&Yn[Y](bn),o[$t](),a[p](),e[m](),e[u](V)},Yn[n][P]+50)}}},Zn[N][Ut]={"top-left":{v:tt,h:O,side:O},"top-right":{v:tt,h:x,side:x},top:{v:tt,h:E,side:tt},"top-center":{v:tt,h:E,side:tt},"bottom-left":{v:T,h:O,side:O},"bottom-right":{v:T,h:x,side:x},bottom:{v:T,h:E,side:T},"bottom-center":{v:T,h:E,side:T},left:{v:E,h:O,side:O},"center-left":{v:E,h:O,side:O},right:{v:E,h:x,side:x},"center-right":{v:E,h:x,side:x},center:{v:E,h:E,side:K},"center-center":{v:E,h:E,side:K}},Zn[N].on=function(e,t){this[wt][e]||(this[wt][e]=[]),this[wt][e].push(t)},Zn[N][u]=function(e){var t;if(!this[wt][e]||this[wt][e][X]==0)return;t=this,Yn._[ut](this[wt][e],function(n){t[wt][e][n]()})},Zn[N][cn]=function(){var e,t,i,o,a;if(this[rn]){Yn[r][l][Dt](this[it]);return}e=this,t=this[n],i=Yn._[gt](t[St]),o=this[d],o[S](kn,"")[S](Sn,"")[S](L,"")[S](Z,""),t[Ht]=Yn._[gt](t[L]),t[rt]=Yn._[gt](t[Z]),t[Ht]==J&&(t[Ht]=o.outerWidth()+1),t[rt]==J&&(t[rt]=o.outerHeight()+1),o[S](kn,Yn._[gt](t.maxWidth))[S](Sn,Yn._[gt](t.maxHeight))[S](L,t[Ht])[S](Z,t[rt]),Yn._.vars[G]==pn&&(t[rt]==Nt&&!t[st]&&o[S](Z,"-webkit-calc("+t[rt]+" + 70px)"),o.on(mt,"input,select,textarea",function(t,n){if(n)return;window[s](function(){Yn[r][U][Dt](e[it]),window[s](function(){Yn[r][l][Dt](e[it])},500)},500)})),a=this[Ut][t[h]],o[tn]("skel-layer-"+t[h]).data(Ct,t[h]);switch(a.v){case tt:o[S](tt,0);break;case T:o[S](T,0);break;case E:o[S](tt,"50%")[S]("margin-top",Tn+Yn.getHalf(t[rt]))}switch(a.h){case O:o[S](O,0);break;case x:o[S](x,0);break;case E:o[S](O,"50%")[S]("margin-left",Tn+Yn.getHalf(t[Ht]))}this[Mt][i][cn](this),t[b]&&(Yn[r][Pn][tn](dt),Yn[r][y]=this),this[rn]=lt,this[u](cn)},Zn[N][$t]=function(){var e,t;if(!this[rn]){Yn[r][U][Dt](this[it]);return}e=this[n],t=Yn._[gt](e[St]),t in this[Mt]||(t=qt),this[Mt][t][$t](this),e[b]&&Yn[r][y]===this&&(Yn[r][Pn][ln](dt),Yn[r][y]=C),this[u]($t),this[rn]=K},Zn[N].init=function(){var t=this[n],r=e(this[it]),i=this;r[k](),r[Bt](Mn).each(function(){Yn.parseInit(e(this))}),r[tn]("skel-layer").data(Lt,this.index)[S](kt,Yn[n].baseZIndex)[S](h,Nn)[S]("-ms-overflow-style","-ms-autohiding-scrollbar")[S]("-webkit-overflow-scrolling","touch")[$t]();switch(t.orientation){case"vertical":r[S](wn,J)[S](_,st);break;case"horizontal":r[S](_,J)[S](wn,st);break;case qt:default:}if(!t[h]||!(t[h]in this[Ut]))t[h]="top-left";t[On]||(t[On]=this[Ut][t[h]][On]);if(!t[St]||typeof t[St]!==hn&&!(t[St]in this[Mt]))t[St]=qt;t.clickToHide&&r[Bt]("a")[S](yt,fn).on("click.skel-layers",function(t){var r,o,u=e(this);if(u.hasClass("skel-layers-ignore"))return;t[Yt](),t[zt](),i[$t]();if(u.hasClass("skel-layers-ignoreHref"))return;r=u[Gt]("href"),o=u[Gt]("target"),typeof r!==Rt&&r!=""&&window[s](function(){o=="_blank"&&Yn._.vars[G]!="wp"?window.open(r):window.location.href=r},Yn[n][P]+10)}),r.on("touchstart",function(e){i[Wt]=e[Tt][An][0].pageX,i[Vt]=e[Tt][An][0].pageY}).on("touchmove",function(e){var n,s,o,u,a,f,l;if(i[Wt]===C||i[Vt]===C)return;n=i[Wt]-e[Tt][An][0].pageX,s=i[Vt]-e[Tt][An][0].pageY,o=r.outerHeight(),u=r.get(0).scrollHeight-r[z]();if(t[st]&&t.swipeToHide){a=K,f=20,l=50;switch(t[On]){case O:a=s<f&&s>-1*f&&n>l;break;case x:a=s<f&&s>-1*f&&n<-1*l;break;case tt:a=n<f&&n>-1*f&&s>l;break;case T:a=n<f&&n>-1*f&&s<-1*l}if(a)return i[Wt]=C,i[Vt]=C,i[$t](),K}if(r[z]()==0&&s<0||u>o-2&&u<o+2&&s>0)return K}),this[d]=r},Zn[N][Et]=function(){return this[d]!==C},Zn[N][Cn]=function(){return this[d].is(":visible")},Zn[N][v]=function(){Yn[r][l][Dt](this[d])},Zn[N][m]=function(){if(!this[d][Zt]())return;Yn[r][U][Dt](this[d])},Zn[N].resume=function(t){if(!this[Et]())return;this[d][Bt](Mn).each(function(){Yn.parseResume(e(this))}),this[n][st]||this[cn](t)},Zn[N].suspend=function(){if(!this[Et]())return;this[d][i](),this[d][Bt](Mn).each(function(){Yn.parseSuspend(e(this))}),this[rn]&&this[$t]()},Yn={cache:{visibleWrapper:C,body:C,exclusiveLayer:C,document:C,html:C,htmlbody:C,hiddenWrapper:C,layers:{},parent:C,window:C,wrapper:C},config:{baseZIndex:1e4,layers:{},mode:h,speed:500,easing:"ease",wrap:lt},eventType:"click touchend",layerIndex:1,create:function(t,i,s){var o,u;if(t in Yn[r][D])return;if(h in i){if(!i[jn]&&(o=e(Bn+t))[X]==0)return;return Yn[n].wrap||(Yn[n].wrap=lt,Yn.initWrappers()),u=new Zn(t,i,Yn.layerIndex++),Yn[r][D][t]=u,o&&(o[q]()[vn](u[it]),o.remove()),s||Yn._.updateState(),u}return},destroy:function(i){if(i in Yn[r][D]){var s=Yn[r][D][i];return s.suspend(),s[n][yn]&&s[n][yn]!=Yn._.sd&&(a=Yn._[mn](s[n][yn]),Yn._[ut](a,function(e){Yn._.removeCachedElementFromState(a[e],i)})),s[n][Xt]&&(a=Yn._[mn](s[n][Xt]),Yn._[ut](a,function(e){Yn._.removeCachedElementFromBreakpoint(a[e],i)})),e(s[it]).remove(),delete Yn[r][D][i],t.uncacheElement(i),lt}return},get:function(e){if(e in Yn[r][D])return Yn[r][D][e];return},hide:function(e){Yn[r][D][e][$t]()},show:function(e){Yn[r][D][e][cn]()},toggle:function(e){var t=Yn[r][D][e];t[Cn]()?t[$t]():t[cn]()},getBaseFontSize:function(){return Yn._.vars.IEVersion<9?16.5:parseFloat(getComputedStyle(Yn[r][Pn].get(0)).fontSize)},getHalf:function(e){var t=parseInt(e);return typeof e=="string"&&e.charAt(e[X]-1)=="%"?Math.floor(t/2)+"%":Math.floor(t/2)+xn},lockView:function(e){e==bn&&Yn[r][Hn][S](_,st),Yn[n][En]!=I&&t.vars[G]==pn&&Yn[r][W][S](Z,Yn[r].document[Z]()),Yn[r][H].on(nt,function(e){e[Yt](),e[zt](),Yn[r][y]&&Yn[r][y][$t]()}),Yn[r][en].on(It,function(e){Yn[r][y]&&Yn[r][y][$t]()}),Yn._.vars.isMobile||window[s](function(){Yn[r][en].on(Ft,function(e){Yn[r][y]&&Yn[r][y][$t]()})},Yn[n][P]+50)},parseInit:function(t){var n,i,s=t.get(0),o=t[Gt]("data-action"),u=t[Gt]("data-args"),a,f;o&&u&&(u=u.split(","));switch(o){case"toggleLayer":case"layerToggle":t[S](yt,fn)[S]("cursor","pointer"),n=function(t){t[Yt](),t[zt]();if(Yn[r][y])return Yn[r][y][$t](),K;var n=e(this),i=Yn[r][D][u[0]];i[Cn]()?i[$t]():i[cn]()},t.on(Yn.eventType,n);break;case"navList":a=e(Bn+u[0]),n=a[Bt]("a"),i=[],n.each(function(){var t=e(this),n,r;n=Math.max(0,t.parents("li")[X]-1),r=t[Gt]("href"),i.push('<a class="link depth-'+n+'"'+(typeof r!==Rt&&r!=""?' href="'+r+'"':"")+'><span class="indent-'+n+'"></span>'+t.text()+"</a>")}),i[X]>0&&t[jn]("<nav>"+i.join("")+"</nav>");break;case"copyText":a=e(Bn+u[0]),t[jn](a.text());break;case"copyHTML":a=e(Bn+u[0]),t[jn](a[jn]());break;case"moveElementContents":a=e(Bn+u[0]),s[g]=function(){a[q]().each(function(){var n=e(this);t[Dt](n),n[tn](R)})},s[A]=function(){t[q]().each(function(){var t=e(this);a[Dt](t),t[ln](R),Yn.refresh(t)})},s[g]();break;case"moveElement":a=e(Bn+u[0]),s[g]=function(){e(ot+a[Gt]("id")+'" />').insertBefore(a),t[Dt](a),a[tn](R)},s[A]=function(){e(Ot+a[Gt]("id")).replaceWith(a),a[ln](R),Yn.refresh(a)},s[g]();break;case"moveCell":a=e(Bn+u[0]),f=e(Bn+u[1]),s[g]=function(){e(ot+a[Gt]("id")+'" />').insertBefore(a),t[Dt](a),a[S](L,J),f&&f[Jt]()},s[A]=function(){e(Ot+a[Gt]("id")).replaceWith(a),a[S](L,""),f&&f[S](L,"")},s[g]();break;default:}},parseResume:function(e){var t=e.get(0);t[g]&&t[g]()},parseSuspend:function(e){var t=e.get(0);t[A]&&t[A]()},recalc:function(e,t){var n=Yn._.parseMeasurement(e),r;switch(n[1]){case"%":r=Math.floor(t*(n[0]/100));break;case"em":r=Yn.getBaseFontSize()*n[0];break;default:case xn:r=n[0]}return r},recalcH:function(t){return Yn.recalc(t,e(window)[Z]())},recalcW:function(t){return Yn.recalc(t,e(window)[L]())},refresh:function(t){var n;t?n=t.filter(Q):n=e(Q),n[k](lt)[vn](Yn[r][l])},unlockView:function(e){e==bn&&Yn[r][Hn][S](_,""),Yn[n][En]!=I&&t.vars[G]==pn&&Yn[r][W][S](Z,""),Yn[r][H].off(nt),Yn[r][en].off(It),Yn._.vars.isMobile||Yn[r][en].off(Ft)},init:function(){n in Yn[n]&&(Yn._.extend(Yn[n],Yn[n][n]),delete Yn[n][n]),Yn._[ut](Yn[n],function(e){Yn[n][e]&&typeof Yn[n][e]==hn&&h in Yn[n][e]&&(Yn[n][D][e]=Yn[n][e],delete Yn[n][e])}),typeof Yn[n][En]=="function"&&(Yn[n][En]=Yn[n][En]()),Yn[n][En]==I&&(!Yn._[Qt](I)||!Yn._[Qt](ft))&&(Yn[n][En]=h),Yn[n][En]==h&&!Yn._[Qt](ft)&&(Yn[n][En]=At),Yn._.vars[G]=="wp"&&(Yn[n][En]=At),Yn[r][en]=e(window),e(function(){Yn.initAnimation(),Yn.initObjects(),Yn[n].wrap&&Yn.initWrappers(),Yn.initLayers(),Yn.initIncludes(),Yn._.updateState()})},initIncludes:function(){e(".skel-layers-include").each(function(){Yn.parseInit(e(this))})},initLayers:function(){Yn._[ut](Yn[n][D],function(e){Yn.create(e,Yn[n][D][e],lt)})},initObjects:function(){Yn[r].document=e(document),Yn[r][jn]=e(jn),Yn[r][Pn]=e(Pn),Yn[r][Hn]=e("html,body")},initAnimation:function(){Yn[n][En]==At?(e.fn[ct]=function(t){e(this).fadeTo(Yn[n][P],1,t)},e.fn[at]=function(t){e(this).fadeTo(Yn[n][P],0,t)}):(e.fn[ct]=function(t){e(this)[S](on,1),t&&window[s](t,Yn[n][P]+50)},e.fn[at]=function(t){e(this)[S](on,0),t&&window[s](t,Yn[n][P]+50)});if(Yn[n][En]==I)e.fn[i]=function(){return e(this)[f](0,0)},e.fn[f]=function(t,n){return e(this)[S](I,"translate("+t+"px, "+n+"px)")},e.fn[k]=function(){return e(this)[S]("backface-visibility",st)[S]("perspective","500")[un](ft,"transform "+Yn[n][P]/1e3+dn+Yn[n][bt]+","+_n+Yn[n][P]/1e3+dn+Yn[n][bt])};else{var o=[];Yn[n][En]==At?(Yn[r][en].resize(function(){if(Yn[n][P]!=0){var e=Yn[n][P];Yn[n][P]=0,window[s](function(){Yn[n][P]=e,o=[]},0)}}),Yn[n][bt].substr(0,4)=="ease"?(Yn[n][bt]="swing",Yn[n][P]=Yn[n][P]*.65):Yn[n][bt]="linear",e.fn[M]=function(t,r){e(this)[At](t,Yn[n][P],Yn[n][bt],r)},e.fn[k]=function(t){return e(this)[S](h,t?Nn:sn)}):(Yn[r][en].resize(function(){window[s](function(){o=[]},0)}),e.fn[M]=function(t,r){var i=e(this);Yn._[ut](t,function(e){i[S](e,t[e])}),window[s](r,Yn[n][P])},e.fn[k]=function(t){return e(this)[S](ft,"top "+Yn[n][P]/1e3+dn+Yn[n][bt]+","+"right "+Yn[n][P]/1e3+dn+Yn[n][bt]+","+"bottom "+Yn[n][P]/1e3+dn+Yn[n][bt]+","+"left "+Yn[n][P]/1e3+dn+Yn[n][bt]+","+_n+Yn[n][P]/1e3+dn+Yn[n][bt])[S](h,t?Nn:sn)}),e[w]=function(e){return e&&e.slice(-1)=="%"?e:parseInt(e)},e.fn[i]=function(){for(var t=0;t<this[X];t++){var n=this[t],i=e(n);o[n.id]&&i[M](o[n.id],function(){Yn._[ut](o[n.id],function(e){i[S](e,o[n.id][e])}),Yn[r][W][S](_,""),Yn[r][H][S](L,J)[S](vt,0)})}return e(this)},e.fn[f]=function(n,i){var s,u,f,l;n=parseInt(n),i=parseInt(i),n!=0?((t.vars[G]==pn?Yn[r][W]:Yn[r][Pn])[S](_,st),Yn[r][H][S](L,Yn[r][en][L]())):f=function(){(t.vars[G]==pn?Yn[r][W]:Yn[r][Pn])[S](_,""),Yn[r][H][S](L,J)},i<0?Yn[r][H][S](vt,Math.abs(i)):l=function(){Yn[r][H][S](vt,0)};for(s=0;s<this[X];s++){var c=this[s],p=e(c),d;if(!o[c.id])if(d=Zn[N][Ut][p.data(Ct)]){o[c.id]={};switch(d.v){case E:case tt:o[c.id][tt]=e[w](c.style[tt]);break;case T:o[c.id][T]=e[w](c.style[T])}switch(d.h){case E:case O:o[c.id][O]=e[w](c.style[O]);break;case x:o[c.id][x]=e[w](c.style[x])}}else d=p[h](),o[c.id]={top:d[tt],left:d[O]};a={},Yn._[ut](o[c.id],function(e){var t;switch(e){case tt:t=Yn[Ln](o[c.id][e])+i;break;case T:t=Yn[Ln](o[c.id][e])-i;break;case O:t=Yn[pt](o[c.id][e])+n;break;case x:t=Yn[pt](o[c.id][e])-n}a[e]=t}),p[M](a,function(){f&&f(),l&&l()})}return e(this)}}},initWrappers:function(){Yn[n][En]!=I?(Yn[r][Pn].wrapInner('<div id="skel-layers-parent" />'),Yn[r][W]=e("#skel-layers-parent"),Yn[r][W][S](h,sn)[S](O,0)[S](tt,0)[S]("min-height",Nt)[S](L,Nt)):Yn[r][W]=Yn[r][Pn],Yn[r][W].wrapInner('<div id="skel-layers-wrapper" />'),Yn[r][H]=e("#skel-layers-wrapper"),Yn[r][H][S](h,Dn)[S](O,0)[S](x,0)[S](tt,0)[k](),Yn[r][U]=e('<div id="skel-layers-hiddenWrapper" />')[vn](Yn[r][W]),Yn[r][U][S](Z,Nt),Yn[r][l]=e('<div id="skel-layers-visibleWrapper" />')[vn](Yn[r][W]),Yn[r][l][S](h,Dn),Yn._[jt](_t,Yn[r][U][0]),Yn._[jt]("skel_layers_visibleWrapper",Yn[r][l][0]),Yn._[jt]("skel_layers_wrapper",Yn[r][H][0]),e("[autofocus]").focus(),Yn.refresh()}},Yn)}(jQuery))}); | |
</script> | </script> | ||
<script> | <script> | ||
− | + | window.sr = ScrollReveal({reset: true}); | |
window.sr = ScrollReveal(); | window.sr = ScrollReveal(); | ||
/*sr.reveal('.img1', {duration: 700}); | /*sr.reveal('.img1', {duration: 700}); | ||
Line 678: | Line 716: | ||
<body> | <body> | ||
− | <div id="globalWrapperdivi" style="margin-top: -6.5%;z-index: 1 | + | <div id="globalWrapperdivi" style="margin-top: -6.5%;z-index: 1"> |
− | <div class= "NameClass" style="background-color: | + | <div class= "NameClass" style="background-color:white;"> |
<a style="height: 150px; width: 150px;margin-left: 34%;margin-top: 0px; padding-top: 35px;" href="https://2018.igem.org/Team:IIT_Delhi"> | <a style="height: 150px; width: 150px;margin-left: 34%;margin-top: 0px; padding-top: 35px;" href="https://2018.igem.org/Team:IIT_Delhi"> | ||
<img src="https://static.igem.org/mediawiki/2018/d/de/T--IIT_Delhi--whitelogo.png" style="height: 150px; width: 150px;display:inline; margin-top: 40px;"> </a> | <img src="https://static.igem.org/mediawiki/2018/d/de/T--IIT_Delhi--whitelogo.png" style="height: 150px; width: 150px;display:inline; margin-top: 40px;"> </a> | ||
Line 688: | Line 726: | ||
</div> | </div> | ||
− | <div class="RespIcon" style="background-color: | + | <div class="RespIcon" style="background-color: white;"> |
<a href="https://2018.igem.org/Team:IIT_Delhi" style="height: 150px; width: 150px; margin-left: 5%;margin-top: 0px; padding-top: 14px;"> | <a href="https://2018.igem.org/Team:IIT_Delhi" style="height: 150px; width: 150px; margin-left: 5%;margin-top: 0px; padding-top: 14px;"> | ||
− | <img src="https://static.igem.org/mediawiki/2018/d/de/T--IIT_Delhi--whitelogo.png" style="height: 150px; width: 150px; display:inline; padding-top: 15px;"> </a> <a href="javascript:void(0);" style="Background-color: | + | <img src="https://static.igem.org/mediawiki/2018/d/de/T--IIT_Delhi--whitelogo.png" style="height: 150px; width: 150px; display:inline; padding-top: 15px;"> </a> <a href="javascript:void(0);" style="Background-color: white;" class="icon" onclick="openNav()"> <i class="fa fa-bars" style="padding-top: 100px"></i> </a> |
</div> | </div> | ||
Line 883: | Line 921: | ||
</div> | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Banner --> | ||
+ | <section id="banner"> | ||
+ | |||
+ | |||
+ | </section> | ||
+ | <div class="bgimg-1"> | ||
+ | <div class="caption"> | ||
+ | <span class="border" >Fifth International InterLab Measurement Study</span> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | <div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: center;"> | |
− | + | ||
− | + | ||
− | + | ||
− | <div style=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <p style="font-size:20px;font-family: 'Lato', sans-serif;font-weight:400;color: black;margin: auto;width: 75%;"> | |
− | + | iGEM teams all over the world in association with The Measurement Committee, through the InterLab study, have been developing a robust measurement procedure for green fluorescent protein (GFP) over the last several years. In order to identify and correct the sources of systematic variability in synthetic biology measurements, so that eventually, measurements that are taken in different labs will be no more variable than measurements taken within the same lab.<br> | |
− | + | <br> | |
− | + | iGEM IIT Delhi once again participated in the iGEM InterLab Measurement Study, in order to tackle the issue of variability in bulk measurements of a population of cells (such as with a plate reader).<br> | |
− | + | <br> | |
− | + | The idea of this year's study was to divide the total fluorescence by the number of cells in order to determine the mean expression level of GFP per cell. Usually, this is done by measuring the absorbance of light at 600nm, from which we compute the “optical density (OD)” of the sample as an approximation of the number of cells.<br> | |
− | + | <br> | |
− | + | In the InterLab Measurement Study, iGEM IITD performed 2 sets of experiments, as required by the InterLab protocol(we used Synergy H1 Microplate Reader),<br> | |
− | + | <br> | |
− | + | <b style=" | |
− | + | font-size: 125%; | |
− | + | ">1. Conversion between absorbance of cells to the absorbance of a known concentration of beads</b> | |
− | + | <br><br> | |
− | + | We were provided with a sample containing silica beads that are roughly the same size and shape as a typical <i>E. coli</i> cell, so that it should scatter light in a similar way. Since we knew the concentration of the beads, we were able to convert our lab’s absorbance measurements into a standard “equivalent concentration of beads” measurement.<br> | |
+ | <br> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/8/8a/T--IIT_Delhi--InterlabParticle2.png" style="border:3px solid #000000" width="48%"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/d/dc/T--IIT_Delhi--InterlabFluorescin2.png" style="border:3px solid #000000" width="48%"> | ||
+ | <br> | ||
+ | <br style=" | ||
+ | font-size: 125%; | ||
+ | "> | ||
+ | <b style=" | ||
+ | font-size: 125%; | ||
+ | ">2. Counting colony-forming units (CFUs) from the sample.</b> | ||
+ | <br><br> | ||
− | + | We determined how many live cells were in the volume of media that we plated out and obtained a cell concentration for our sample as a whole. We determined the number of CFUs in positive and negative control samples in order to compute a conversion factor from absorbance to CFU.<br> | |
− | + | <br> | |
− | + | The data for both the experiments were submitted to iGEM, additionally, you can find our measurements for the Plate Reader here : <a href="https://static.igem.org/mediawiki/2018/e/e1/T--IIT_Delhi--Interlab18.xlsx"><b>IIT Delhi InterLab Plate Reader Measurements</b></a> | |
− | + | </p> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </div> | |
− | + | ||
<!--/**/--> | <!--/**/--> | ||
− | + | <div style="background-color: white"> | |
− | + | ||
<div style="background-color: #555;color:black;font-size: 35px;text-align: center;font-family: sans-serif;"><h4 style="color: white">Contact us</h4></div> | <div style="background-color: #555;color:black;font-size: 35px;text-align: center;font-family: sans-serif;"><h4 style="color: white">Contact us</h4></div> | ||
<div style="text-align: center;margin-bottom: -136px;"><h4 style="color:black;font-size: 50px;"><u class="fx" style="cursor: pointer;text-align: center">Address</u></h4><p style="text-align: center;margin-bottom: 16px">Undergraduate Laboratory<br> | <div style="text-align: center;margin-bottom: -136px;"><h4 style="color:black;font-size: 50px;"><u class="fx" style="cursor: pointer;text-align: center">Address</u></h4><p style="text-align: center;margin-bottom: 16px">Undergraduate Laboratory<br> | ||
Line 1,002: | Line 1,023: | ||
} | } | ||
+ | |||
+ | |||
function myFunction1() { | function myFunction1() { | ||
Line 1,007: | Line 1,030: | ||
− | |||
− | |||
− | |||
− | |||
var prev2 = document.getElementById("mydropdownsakks2"); | var prev2 = document.getElementById("mydropdownsakks2"); | ||
Line 1,031: | Line 1,050: | ||
function myFunction2() { | function myFunction2() { | ||
document.getElementById("mydropdownsakks2").classList.toggle("show"); | document.getElementById("mydropdownsakks2").classList.toggle("show"); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
var prev1 = document.getElementById("mydropdownsakks1"); | var prev1 = document.getElementById("mydropdownsakks1"); | ||
Line 1,060: | Line 1,074: | ||
if (prev2.classList.contains("show")) | if (prev2.classList.contains("show")) | ||
prev2.classList.remove("show"); | prev2.classList.remove("show"); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
var prev1 = document.getElementById("mydropdownsakks1"); | var prev1 = document.getElementById("mydropdownsakks1"); | ||
Line 1,089: | Line 1,098: | ||
if (prev3.classList.contains("show")) | if (prev3.classList.contains("show")) | ||
prev3.classList.remove("show"); | prev3.classList.remove("show"); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
var prev1 = document.getElementById("mydropdownsakks1"); | var prev1 = document.getElementById("mydropdownsakks1"); | ||
Line 1,115: | Line 1,119: | ||
prev3.classList.remove("show"); | prev3.classList.remove("show"); | ||
− | |||
− | |||
− | |||
− | |||
var prev4 = document.getElementById("mydropdownsakks4"); | var prev4 = document.getElementById("mydropdownsakks4"); | ||
if (prev4.classList.contains("show")) | if (prev4.classList.contains("show")) | ||
Line 1,127: | Line 1,127: | ||
prev1.classList.remove("show"); | prev1.classList.remove("show"); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Revision as of 02:59, 18 October 2018
iGEM teams all over the world in association with The Measurement Committee, through the InterLab study, have been developing a robust measurement procedure for green fluorescent protein (GFP) over the last several years. In order to identify and correct the sources of systematic variability in synthetic biology measurements, so that eventually, measurements that are taken in different labs will be no more variable than measurements taken within the same lab.
iGEM IIT Delhi once again participated in the iGEM InterLab Measurement Study, in order to tackle the issue of variability in bulk measurements of a population of cells (such as with a plate reader).
The idea of this year's study was to divide the total fluorescence by the number of cells in order to determine the mean expression level of GFP per cell. Usually, this is done by measuring the absorbance of light at 600nm, from which we compute the “optical density (OD)” of the sample as an approximation of the number of cells.
In the InterLab Measurement Study, iGEM IITD performed 2 sets of experiments, as required by the InterLab protocol(we used Synergy H1 Microplate Reader),
1. Conversion between absorbance of cells to the absorbance of a known concentration of beads
We were provided with a sample containing silica beads that are roughly the same size and shape as a typical E. coli cell, so that it should scatter light in a similar way. Since we knew the concentration of the beads, we were able to convert our lab’s absorbance measurements into a standard “equivalent concentration of beads” measurement.
2. Counting colony-forming units (CFUs) from the sample.
We determined how many live cells were in the volume of media that we plated out and obtained a cell concentration for our sample as a whole. We determined the number of CFUs in positive and negative control samples in order to compute a conversion factor from absorbance to CFU.
The data for both the experiments were submitted to iGEM, additionally, you can find our measurements for the Plate Reader here : IIT Delhi InterLab Plate Reader Measurements