Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"
Davidacevedo (Talk | contribs) |
Davidacevedo (Talk | contribs) |
||
| Line 18: | Line 18: | ||
<!---{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} ------> | <!---{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} ------> | ||
<html> | <html> | ||
| + | |||
<head> | <head> | ||
| − | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | + | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| − | <!--bootstrap core css--> | + | <!--bootstrap core css--> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> |
| − | + | ||
| + | |||
| + | <!------- sidebar dots navigation ----> | ||
<link href="https://2016.igem.org/Team:Cornell_NY/sidebarstyle?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | <link href="https://2016.igem.org/Team:Cornell_NY/sidebarstyle?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
| − | <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarmain?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarmain?action=raw&ctype=text/javascript"></script> |
| − | <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarmodernizr?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarmodernizr?action=raw&ctype=text/javascript"></script> |
| − | <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarjquery?action=raw&ctype=text/javascript"></script> | + | <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarjquery?action=raw&ctype=text/javascript"></script> |
| − | + | ||
| − | + | ||
<style> | <style> | ||
| − | /**************************************** Clear the default wiki settings *********************************/ | + | /**************************************** Clear the default wiki settings *********************************/ |
| − | + | ||
| − | + | #home_logo, | |
| − | + | #sideMenu { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | ||
| − | + | #sideMenu, | |
| − | + | #top_title, | |
| − | + | .patrollink { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | ||
| − | + | #content, | |
| − | + | #HQ_page { | |
| − | + | width: 100%; | |
| − | + | padding: 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
margin: 0; | margin: 0; | ||
| + | background-color: white; //font-size: 100% !important; | ||
} | } | ||
| − | + | ||
| − | - | + | #content { |
| − | + | margin-top: -16px; | |
| − | + | ||
} | } | ||
| − | + | ||
| − | + | #globalWrapper, | |
| − | + | #content, | |
| − | + | #HQ_page, | |
| − | + | #bodyContent, | |
| + | #mw-content-text { | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
} | } | ||
| − | . | + | |
| − | + | /*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/ | |
| − | + | ||
| − | + | #top_menu_14 { | |
| + | box-sizing: initial; | ||
} | } | ||
| − | + | ||
| − | - | + | td a { |
| − | + | padding-right: 0px !important; | |
} | } | ||
| − | + | ||
| − | + | #globalWrapper { | |
| − | + | padding-bottom: 0; | |
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /*************************************************** Bootstrap Stuff ************************************************/ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .portfolio-item .caption .caption-content p { | |
| − | + | font-weight: 300; | |
| − | + | font-size: 1.2rem; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | @media (min-width: 992px) { | |
| − | + | .portfolio-item { | |
| − | + | max-width: none; | |
| − | + | margin: 0; | |
| − | + | } | |
| − | + | .portfolio-item .caption { | |
| − | } | + | -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s; |
| + | -webkit-clip-path: inset(0px); | ||
| + | clip-path: inset(0px); | ||
| + | } | ||
| + | .portfolio-item .caption .caption-content { | ||
| + | transition: opacity 0.25s; | ||
| + | margin-left: 5rem; | ||
| + | margin-right: 5rem; | ||
| + | margin-bottom: 5rem; | ||
| + | } | ||
| + | .portfolio-item img { | ||
| + | -webkit-transition: -webkit-clip-path 0.25s ease-out; | ||
| + | -webkit-clip-path: inset(-1px); | ||
| + | clip-path: inset(-1px); | ||
| + | } | ||
| + | .portfolio-item:hover img { | ||
| + | -webkit-clip-path: inset(2rem); | ||
| + | clip-path: inset(2rem); | ||
| + | } | ||
| + | .portfolio-item:hover .caption { | ||
| + | background-color: rgba(29, 128, 159, 0.9); | ||
| + | -webkit-clip-path: inset(2rem); | ||
| + | clip-path: inset(2rem); | ||
| + | } | ||
| + | } | ||
| − | + | a { | |
| − | + | color: #1D809F; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | a:hover, | |
| − | + | a:focus, | |
| − | + | a:active { | |
| − | + | color: #155d74; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .btn-primary { | |
| − | + | background-color: #1D809F !important; | |
| − | + | border-color: #1D809F !important; | |
| − | + | color: #fff !important; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .btn-primary:hover, | |
| − | + | .btn-primary:focus, | |
| − | + | .btn-primary:active { | |
| − | } | + | background-color: #155d74 !important; |
| + | border-color: #155d74 !important; | ||
| + | } | ||
| − | + | .btn { | |
| − | + | box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1); | |
| − | } | + | font-weight: 700; |
| + | } | ||
| − | + | .btn-xl { | |
| − | + | padding: 1.25rem 2.5rem; | |
| − | + | } | |
| − | } | + | |
| − | + | /*****************************************************custom css*****************************************************/ | |
| − | + | ||
| − | + | ||
| − | + | @font-face { | |
| − | + | font-family: "Norwester"; | |
| − | + | src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'), | |
| − | + | url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype'); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | @font-face { | |
| − | + | font-family: "Montserrat"; | |
| − | + | src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'), | |
| − | + | url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype'); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | @font-face { | |
| − | + | font-family: "DosisRegular"; | |
| − | + | src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'), | |
| − | + | url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype'); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | body, | |
| − | + | html { | |
| − | } | + | width: 100%; |
| + | height: 100%; | ||
| + | } | ||
| − | + | body { | |
| − | + | font-family: "DosisRegular", sans-serif !important; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ul { | |
| − | + | margin: 0 !important; | |
| − | + | } | |
| − | + | ||
| − | } | + | |
| − | + | h1, | |
| − | + | h2, | |
| − | + | h3, | |
| − | } | + | h4, |
| + | h5, | ||
| + | h6 { | ||
| + | font-weight: 700; | ||
| + | padding: 0 0 0 0; | ||
| + | margin: 0 0 0 0; | ||
| + | } | ||
| − | . | + | .text-faded { |
| − | + | color: rgba(255, 255, 255, 0.7); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | . | + | .masthead { |
| − | + | height: 100%; | |
| − | + | width: 100%; | |
| − | + | } | |
| − | } | + | |
| − | . | + | .header-top { |
| − | + | height: 70%; | |
| − | } | + | width: 100%; |
| + | position: relative; | ||
| + | background: rgb(248, 247, 246); | ||
| + | } | ||
| − | . | + | .header-bottom { |
| − | + | height: 30%; | |
| − | + | position: relative; | |
| − | + | background: white; | |
| − | + | padding: 10px 0px 10px 10px; | |
| − | + | margin: 0px 0px 0px 0px; | |
| − | + | " | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .div-header-bottom { | |
| − | + | padding: 5px 0px 0px 10px; | |
| − | + | border-left: 10px solid #2f6361; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .header-title { | |
| − | + | font-family: "Norwester", sans-serif !important; | |
| − | + | text-align: left !important; | |
| − | + | font-size: 9vw; | |
| − | + | font-weight: 700 !important; | |
| − | + | line-height: 1em; | |
| − | + | padding-bottom: 0; | |
| − | + | margin-bottom: -5px; | |
| − | + | color: #3582d2; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .header-subtitle { | |
| − | + | font-family: "Montserrat", monospace; | |
| − | + | text-align: left !important; | |
| − | + | font-size: 3.5vw; | |
| − | } | + | font-weight: 600 !important; |
| + | line-height: 1em; | ||
| + | padding-bottom: 4px; | ||
| + | color: #5da565; | ||
| + | } | ||
| − | .clearBoth { | + | .body-title { |
| − | + | font-family: "Norwester", sans-serif !important; | |
| − | } | + | font-size: 4vw; |
| − | + | font-weight: 600 !important; | |
| − | #squeezedBtnWrapper { | + | line-height: 1em; |
| − | } | + | padding: 10px 0 10px 0; |
| − | + | text-align: center; | |
| − | #squeezedNavBtn { | + | } |
| − | + | ||
| − | + | .body-title h1 { | |
| − | + | margin: 0 !important; | |
| − | + | } | |
| − | + | ||
| − | + | .body-subtitle { | |
| − | + | font-family: "Montserrat", monospace !important; | |
| − | + | font-size: 2.5vw; | |
| − | + | font-weight: 400 !important; | |
| − | } | + | line-height: 1.2em; |
| − | /********************************************************* TOPBAR MENU ENDS *********************************************/ | + | padding: 3% 0; |
| − | /********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/ | + | } |
| − | @media screen and (min-width : 906px){ | + | |
| − | + | .scroll-to-top { | |
| − | + | position: fixed; | |
| − | + | right: 10px; | |
| − | } | + | bottom: 10px; |
| − | + | display: none; | |
| − | @media screen and (max-width : 906px){ | + | width: 50px; |
| − | + | height: 50px; | |
| − | + | text-align: center; | |
| − | + | color: white !important; | |
| − | } | + | background: rgba(52, 58, 64, 0.5); |
| − | + | line-height: 45px; | |
| + | } | ||
| + | |||
| + | .scroll-to-top:focus, | ||
| + | .scroll-to-top:hover { | ||
| + | color: white !important; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top:hover { | ||
| + | background: #343a40; | ||
| + | } | ||
| + | |||
| + | .scroll-to-top i { | ||
| + | font-weight: 800; | ||
| + | } | ||
| + | |||
| + | .hide { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | .footer { | ||
| + | padding-top: 1rem; | ||
| + | padding-bottom: 1rem; | ||
| + | background: #404040; | ||
| + | } | ||
| + | |||
| + | #footerCopyright { | ||
| + | text-align: center !important; | ||
| + | } | ||
| + | |||
| + | .social-link { | ||
| + | color: #6c757d; | ||
| + | } | ||
| + | |||
| + | .social-link:hover { | ||
| + | color: #eeeeee; | ||
| + | } | ||
| + | |||
| + | /******************************************************* TOPBAR MENU *********************************************/ | ||
| + | |||
| + | #topBarWrapper {} | ||
| + | |||
| + | .topBar { | ||
| + | position: fixed; | ||
| + | top: 18px; | ||
| + | z-index: 2; | ||
| + | height: 8vh; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | #navbar { | ||
| + | position: fixed; | ||
| + | z-index: 2; | ||
| + | height: 8vh; | ||
| + | width: 100%; | ||
| + | background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%); | ||
| + | transition: all 0.3s; | ||
| + | -webkit-transition: all 0.3s; | ||
| + | } | ||
| + | |||
| + | #navbarLogoWrapper { | ||
| + | position: absolute; | ||
| + | display: inline-block; | ||
| + | height: 100%; | ||
| + | -webkit-transition: all 0.3s; | ||
| + | transition: all 0.3s; | ||
| + | } | ||
| + | |||
| + | #navbarLogoText { | ||
| + | display: inline-block; | ||
| + | font-size: 1vw; | ||
| + | color: white; | ||
| + | opacity: 0; | ||
| + | -webkit-transition: opacity 0.3s; | ||
| + | transition: opacity 0.3s; | ||
| + | } | ||
| + | |||
| + | #navbarLogo { | ||
| + | height: 80%; | ||
| + | margin-top: 5%; | ||
| + | margin-bottom: 15%; | ||
| + | margin-left: 20px; | ||
| + | padding-left: 20px; | ||
| + | border-left: 1px solid white; | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | #navbarGif { | ||
| + | height: 80%; | ||
| + | margin-top: 5%; | ||
| + | margin-bottom: 15%; | ||
| + | margin-left: 20px; | ||
| + | padding-left: 20px; | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | #navbarGif, | ||
| + | #navbarLogoWrapper:hover #navbarLogo { | ||
| + | display: none; | ||
| + | border: 0; | ||
| + | } | ||
| + | |||
| + | #navbarLogo, | ||
| + | #navbarLogoWrapper:hover #navbarGif { | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | #navbarLogoWrapper:hover { | ||
| + | transform: scale(1.4, 1.4); | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | #navbarLogoWrapper:hover>#navbarLogoText { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | #navContainer { | ||
| + | z-index: 2; | ||
| + | height: 8vh; | ||
| + | width: 80%; | ||
| + | left: 10%; | ||
| + | position: fixed; | ||
| + | background-color: rgba(0, 0, 0, 0); | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | .navbar-linkContainer { | ||
| + | height: 100%; | ||
| + | width: 20%; | ||
| + | color: white; | ||
| + | background-color: rgba(0, 0, 0, 0); | ||
| + | -webkit-transition: all 0.3s; | ||
| + | transition: all 0.3s; | ||
| + | position: relative; | ||
| + | float: left; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .navbar-linkContainerChild { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
| + | width: 80%; | ||
| + | height: 1em; | ||
| + | margin: auto; | ||
| + | font-family: "Norwester", sans-serif; | ||
| + | font-weight: 700; | ||
| + | font-size: 1.5vw; | ||
| + | line-height: 1em; | ||
| + | border-left: 1px solid white; | ||
| + | border-right: 1px solid white; | ||
| + | } | ||
| + | |||
| + | .navbar-linkContainer.active { | ||
| + | transform: scale(1.05, 1.05); | ||
| + | border-radius: 5%; | ||
| + | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | ||
| + | background-color: #5da565; | ||
| + | -webkit-transition: all 0.3s; | ||
| + | transition: all 0.3s; | ||
| + | } | ||
| + | |||
| + | .activeChild { | ||
| + | border: 0; | ||
| + | } | ||
| + | |||
| + | .collapsedMenu { | ||
| + | top: calc(8vh + 18px); | ||
| + | position: fixed; | ||
| + | z-index: 1; | ||
| + | width: 100%; | ||
| + | background-color: aquamarine; | ||
| + | } | ||
| + | |||
| + | .containerCollapse { | ||
| + | padding: 0 10px 30px 10px; | ||
| + | width: 80%; | ||
| + | margin-left: 10%; | ||
| + | } | ||
| + | |||
| + | .height-support { | ||
| + | height: 20px; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | .mask { | ||
| + | height: 8vh; | ||
| + | width: 100%; | ||
| + | background-color: rgba(0, 0, 0, 0); | ||
| + | z-index: 0; | ||
| + | } | ||
| + | |||
| + | .navbarList { | ||
| + | float: left; | ||
| + | height: 100%; | ||
| + | width: 20%; | ||
| + | } | ||
| + | |||
| + | .navbarItem { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .navbarItemHeader { | ||
| + | display: inline-block; | ||
| + | position: relative; | ||
| + | font-family: "Norwester", sans-serif; | ||
| + | font-weight: 500; | ||
| + | font-size: 1.8vw; | ||
| + | color: black; | ||
| + | text-decoration: none; | ||
| + | padding-top: 10px; | ||
| + | width: auto; | ||
| + | } | ||
| + | |||
| + | .navbarItemContent { | ||
| + | display: inline-block; | ||
| + | position: relative; | ||
| + | color: black; | ||
| + | font-size: 1.5vw; | ||
| + | line-height: 1.5em; | ||
| + | text-decoration: none; | ||
| + | width: auto; | ||
| + | padding-top: 10px; | ||
| + | } | ||
| + | |||
| + | a.navbarItemHeader::after, | ||
| + | a.navbarItemContent::after { | ||
| + | content: ""; | ||
| + | position: absolute; | ||
| + | width: 0; | ||
| + | height: 2px; | ||
| + | display: block; | ||
| + | margin-top: 5px; | ||
| + | right: 0; | ||
| + | background-color: #000; | ||
| + | -webkit-transition: width 0.3s ease-in-out 0s; | ||
| + | transition: width 0.3s ease-in-out 0s; | ||
| + | padding: 0; | ||
| + | margin: 0; | ||
| + | } | ||
| + | |||
| + | a.navbarItemHeader:link, | ||
| + | a.navbarItemContent:link { | ||
| + | color: black; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | a.navbarItemHeader:visited, | ||
| + | a.navbarItemContent:visited { | ||
| + | color: black; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | a.navbarItemHeader:active, | ||
| + | a.navbarItemContent:active { | ||
| + | color: black; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | a.navbarItemHeader:hover, | ||
| + | a.navbarItemContent:hover { | ||
| + | color: black; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | a.navbarItemHeader:hover::after, | ||
| + | a.navbarItemContent:hover::after { | ||
| + | width: 100%; | ||
| + | left: 0; | ||
| + | background: #000; | ||
| + | } | ||
| + | |||
| + | .clearBoth { | ||
| + | clear: both; | ||
| + | } | ||
| + | |||
| + | #squeezedBtnWrapper {} | ||
| + | |||
| + | #squeezedNavBtn { | ||
| + | position: fixed; | ||
| + | top: 18px; | ||
| + | z-index: 3; | ||
| + | height: 8vh; | ||
| + | width: 80px; | ||
| + | background-color: aquamarine; | ||
| + | right: 10%; | ||
| + | text-align: center; | ||
| + | font-size: 6vh; | ||
| + | } | ||
| + | |||
| + | #sqCollapse { | ||
| + | background-color: red; | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | #sqContainer { | ||
| + | background-color: red; | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | #sqContainer a:link { | ||
| + | font-size: 40px; | ||
| + | } | ||
| + | |||
| + | /********************************************************* TOPBAR MENU ENDS *********************************************/ | ||
| + | |||
| + | /********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/ | ||
| + | |||
| + | @media screen and (min-width: 906px) { | ||
| + | #squeezedNavBtn { | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 906px) { | ||
| + | #navContainer { | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
</style> | </style> | ||
</head> | </head> | ||
| + | |||
<body> | <body> | ||
| − | <!-- Navigation Bar--> | + | <!-- Navigation Bar--> |
| − | <!--------------------------------------------------------- TOPBAR MENU STARTS -------------------------------------------> | + | <!--------------------------------------------------------- TOPBAR MENU STARTS -------------------------------------------> |
| − | <div id="squeezedBtnWrapper"> | + | <div id="squeezedBtnWrapper"> |
| − | + | <div id="squeezedNavBtn"> | |
| − | + | <a href="#squeezedMenuDrop"><i class="fas fa-bars"></i></a> | |
| + | </div> | ||
</div> | </div> | ||
| − | + | <div id="topBarWrapper"> | |
| − | <div id="topBarWrapper"> | + | <div class="topBar d-flex"> |
| − | + | <div id="navbar"> | |
| − | + | <div id="navbarLogoWrapper"> | |
| − | + | <img id="navbarLogo" src="https://static.igem.org/mediawiki/2018/7/76/T--Tec-Monterrey--ECoding_Menu_Logo_Still_200.png" /><img id="navbarGif" src="https://static.igem.org/mediawiki/2018/c/c3/T--Tec-Monterrey--ECoding_Menu_Gif.gif" /> | |
| − | + | <h5 id="navbarLogoText">Home</h5> | |
| − | + | </div> | |
| + | <div id="navContainer"> | ||
| + | <a href="#collapseProject"> | ||
| + | <div class="navbar-linkContainer" id="linkContainer_Project"> | ||
| + | <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div> | ||
| + | </div> | ||
| + | </a> | ||
| + | <a href="#collapseParts"> | ||
| + | <div class="navbar-linkContainer" id="linkContainer_Parts"> | ||
| + | <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div> | ||
| + | </div> | ||
| + | </a> | ||
| + | <a href="#collapsePeople"> | ||
| + | <div class="navbar-linkContainer" id="linkContainer_People"> | ||
| + | <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div> | ||
| + | </div> | ||
| + | </a> | ||
| + | <a href="#collapseHP"> | ||
| + | <div class="navbar-linkContainer" id="linkContainer_HP"> | ||
| + | <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div> | ||
| + | </div> | ||
| + | </a> | ||
| + | <a href="#collapseModeling"> | ||
| + | <div class="navbar-linkContainer" id="linkContainer_Modeling"> | ||
| + | <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">MODELING</div> | ||
| + | </div> | ||
| + | </a> | ||
| + | </div> | ||
</div> | </div> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<!-- Project collapsed --> | <!-- Project collapsed --> | ||
<div class="collapse collapsedMenu" id="collapseProject"> | <div class="collapse collapsedMenu" id="collapseProject"> | ||
| Line 561: | Line 657: | ||
<ul class="navbar-nav mr-auto navbarList"> | <ul class="navbar-nav mr-auto navbarList"> | ||
<li class="nav-item navbarItem"> | <li class="nav-item navbarItem"> | ||
| − | + | <a href="" class="navbarItemHeader">Description</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Overview</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Introduction</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">The System</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Applications</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Prototype</a> | |
</li> | </li> | ||
</ul> | </ul> | ||
<ul class="navbar-nav mr-auto navbarList"> | <ul class="navbar-nav mr-auto navbarList"> | ||
<li class="nav-item navbarItem"> | <li class="nav-item navbarItem"> | ||
| − | + | <a class="navbarItemHeader">Design</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Background</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Module I</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Module II</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Module III</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Module IV</a> | |
</li> | </li> | ||
</ul> | </ul> | ||
<ul class="navbar-nav mr-auto navbarList"> | <ul class="navbar-nav mr-auto navbarList"> | ||
<li class="nav-item navbarItem"> | <li class="nav-item navbarItem"> | ||
| − | + | <a class="navbarItemHeader">Experiments</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Protocols</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Safety</a> | |
</li> | </li> | ||
</ul> | </ul> | ||
<ul class="navbar-nav mr-auto navbarList"> | <ul class="navbar-nav mr-auto navbarList"> | ||
<li class="nav-item navbarItem"> | <li class="nav-item navbarItem"> | ||
| − | + | <a class="navbarItemHeader">Notebook</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Calendar</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Meetings</a> | |
</li> | </li> | ||
</ul> | </ul> | ||
<ul class="navbar-nav mr-auto navbarList"> | <ul class="navbar-nav mr-auto navbarList"> | ||
<li class="nav-item navbarItem"> | <li class="nav-item navbarItem"> | ||
| − | + | <a class="navbarItemHeader">Results</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Overview</a> | |
| − | + | <br> | |
| − | + | <a class="navbarItemContent">Introduction</a> | |
</li> | </li> | ||
</ul> | </ul> | ||
| − | <br class="clearBoth"/> | + | <br class="clearBoth" /> |
</div> | </div> | ||
</div> | </div> | ||
| Line 669: | Line 765: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| − | <br class="clearBoth"/> | + | <br class="clearBoth" /> |
</div> | </div> | ||
</div> | </div> | ||
| Line 725: | Line 821: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| − | <br class="clearBoth"/> | + | <br class="clearBoth" /> |
</div> | </div> | ||
</div> | </div> | ||
| Line 785: | Line 881: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| − | <br class="clearBoth"/> | + | <br class="clearBoth" /> |
</div> | </div> | ||
</div> | </div> | ||
| Line 817: | Line 913: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| − | <br class="clearBoth"/> | + | <br class="clearBoth" /> |
</div> | </div> | ||
</div> | </div> | ||
| − | + | ||
| − | + | <!-- Squeezed collapsed --> | |
| − | <div class="collapse collapsedMenu" id=" | + | <div class="collapse collapsedMenu" id="sqCollapse"> |
| − | + | <div class="containerCollapse" id="sqContainer"> | |
| − | + | <div class="height-support"> | |
| − | + | </div> | |
| − | + | <ul class="navbar-nav mr-auto navbarList"> | |
| − | + | <li class="nav-item navbarItem"> | |
| − | + | <a href="#page-top" class="navbarItemHeader">Project</a> | |
| − | + | <a href="#page-top" class="navbarItemContent">Parts</a> | |
| − | + | <a href="#page-top" class="navbarItemContent">People</a> | |
| − | + | <a href="#page-top" class="navbarItemContent">Human Practices</a> | |
| − | + | <a href="#page-top" class="navbarItemContent">Modeling</a> | |
| − | + | </li> | |
| − | + | </ul> | |
| − | + | <br class="clearBoth" /> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </div> | + | |
| − | + | ||
<div class="mask"></div> | <div class="mask"></div> | ||
</div> | </div> | ||
| − | </div> | + | </div> |
| − | <!--------------------------------------------------------- TOPBAR MENU ENDS ---------------------------------------------> | + | <!--------------------------------------------------------- TOPBAR MENU ENDS ---------------------------------------------> |
| − | + | ||
<!--Scroll to top button--> | <!--Scroll to top button--> | ||
<a class="scroll-to-top rounded" href="#page-top"> | <a class="scroll-to-top rounded" href="#page-top"> | ||
| Line 891: | Line 946: | ||
</body> | </body> | ||
| + | |||
</html> | </html> | ||
| Line 896: | Line 952: | ||
<!---MAIN---> | <!---MAIN---> | ||
<html> | <html> | ||
| + | |||
<head> | <head> | ||
| − | <style> | + | <style> |
| − | #globalWrapper { | + | #globalWrapper { |
| − | + | background: rgb(248, 247, 246); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | # | + | #myImage { |
| − | + | position: absolute; | |
| − | + | top: 0; | |
| − | } | + | right: 0; |
| + | max-width: 100%; | ||
| + | } | ||
| − | + | .masthead { | |
| − | background: rgb(248,247,246); | + | min-height: 30rem; |
| − | } | + | position: relative; |
| + | width: 100%; | ||
| + | padding-top: 8rem; | ||
| + | padding-bottom: 8rem; | ||
| + | background: rgb(248, 247, 246); | ||
| + | } | ||
| − | . | + | .masthead h1 { |
| − | + | font-size: 4rem; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | . | + | @media (min-width: 992px) { |
| − | + | .masthead { | |
| − | + | height: 100vh; | |
| − | + | } | |
| − | + | .masthead h1 { | |
| − | + | font-size: 5.5rem; | |
| − | } | + | } |
| + | } | ||
| − | + | #project { | |
| − | + | -webkit-transition: height 4s; | |
| − | + | -moz-transition: height 4s; | |
| − | + | -ms-transition: height 4s; | |
| − | + | -o-transition: height 4s; | |
| − | } | + | transition: height 4s; |
| + | height: auto; | ||
| + | background-image: url('/img/logoOficialCirculos.png'); | ||
| + | background-repeat: no-repeat; | ||
| + | background-position: center; | ||
| + | background-size: contain; | ||
| + | text-align: center; | ||
| + | } | ||
| − | + | #team { | |
| − | + | text-align: center; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | #myTable { | |
| − | + | width: 95%; | |
| − | + | margin: 0px auto !important; | |
| − | + | padding: 10px; | |
| − | + | border: 2px solid rgb(1, 99, 60) !important; | |
| − | + | border-collapse: collapse; | |
| − | + | vertical-align: middle !important; | |
| − | + | table-layout: fixed; | |
| − | + | } | |
| − | } | + | |
| − | + | #myTable td { | |
| − | + | width: 33%; | |
| − | + | border: 2px solid rgb(1, 99, 60) !important; | |
| − | } | + | border-collapse: collapse; |
| + | text-align: center; | ||
| + | padding: 5px; | ||
| + | } | ||
| − | .portfolio-item .caption .caption-content h2 { | + | #myTable p { |
| − | + | text-align: center; | |
| − | + | font-size: 14px; | |
| − | } | + | } |
| − | </style> | + | |
| + | #HP { | ||
| + | background: rgb(248, 247, 246); | ||
| + | } | ||
| + | |||
| + | .service-icon { | ||
| + | background-color: #fff; | ||
| + | color: #1D809F; | ||
| + | height: 7rem; | ||
| + | width: 7rem; | ||
| + | display: block; | ||
| + | line-height: 7.5rem; | ||
| + | font-size: 2.25rem; | ||
| + | box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); | ||
| + | } | ||
| + | |||
| + | .callout { | ||
| + | padding: 15rem 0; | ||
| + | background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg"); | ||
| + | background-position: center center; | ||
| + | background-repeat: no-repeat; | ||
| + | background-size: cover; | ||
| + | } | ||
| + | |||
| + | .callout h2 { | ||
| + | font-size: 3.5rem; | ||
| + | font-weight: 700; | ||
| + | display: block; | ||
| + | max-width: 30rem; | ||
| + | } | ||
| + | |||
| + | .portfolio-item { | ||
| + | display: block; | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | max-width: 530px; | ||
| + | margin: auto auto 1rem; | ||
| + | } | ||
| + | |||
| + | .portfolio-item .caption { | ||
| + | display: flex; | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | background-color: rgba(33, 37, 41, 0.2); | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | z-index: 1; | ||
| + | } | ||
| + | |||
| + | .portfolio-item .caption .caption-content { | ||
| + | color: #fff; | ||
| + | margin: auto 2rem 2rem; | ||
| + | } | ||
| + | |||
| + | .portfolio-item .caption .caption-content h2 { | ||
| + | font-size: 0.8rem; | ||
| + | text-transform: uppercase; | ||
| + | } | ||
| + | </style> | ||
</head> | </head> | ||
| − | + | ||
| − | + | <body id="page-top"> | |
| − | + | <!------------SideBar dots navigation --------> | |
| − | <a class="cd-nav-trigger cd-img-replace">Open navigation</a> | + | |
| − | <nav id="cd-vertical-nav" > | + | <a class="cd-nav-trigger cd-img-replace">Open navigation</a> |
| − | + | <nav id="cd-vertical-nav"> | |
| − | + | <ul class="list-unstyled"> | |
| − | + | <li> | |
| + | <a href="#page-top" data-number="1"> | ||
<span class="cd-dot"></span> | <span class="cd-dot"></span> | ||
<span class="cd-label">Item 1</span> | <span class="cd-label">Item 1</span> | ||
</a> | </a> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="#project" data-number="2"> | |
<span class="cd-dot"></span> | <span class="cd-dot"></span> | ||
<span class="cd-label">Item 2</span> | <span class="cd-label">Item 2</span> | ||
</a> | </a> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="#team" data-number="3"> | |
<span class="cd-dot"></span> | <span class="cd-dot"></span> | ||
<span class="cd-label">Item 3</span> | <span class="cd-label">Item 3</span> | ||
</a> | </a> | ||
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="#HP" data-number="4"> | |
<span class="cd-dot"></span> | <span class="cd-dot"></span> | ||
<span class="cd-label">Item 4</span> | <span class="cd-label">Item 4</span> | ||
</a> | </a> | ||
| − | + | </li> | |
| − | + | </ul> | |
| − | </nav> | + | </nav> |
<!-- Header --> | <!-- Header --> | ||
| − | + | <header class="masthead" style="border-bottom: 20px solid #2f6361;"> | |
<img id="myImage" src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--Tec_ECoding_background.jpeg"> | <img id="myImage" src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--Tec_ECoding_background.jpeg"> | ||
<div class="container text-center my-auto" style="position: relative; top: 60%; left: 9%; max-width: 50%;"> | <div class="container text-center my-auto" style="position: relative; top: 60%; left: 9%; max-width: 50%;"> | ||
| − | + | <a class="btn btn-primary btn-xl" href="#project">Learn about the project</a> | |
| − | + | </div> | |
| − | + | <div class="overlay"></div> | |
</header> | </header> | ||
<!-- Project --> | <!-- Project --> | ||
<section id="project" style="background: #d3edf2; text-align: center;"> | <section id="project" style="background: #d3edf2; text-align: center;"> | ||
| − | + | <div style="width: 80%; margin: auto; text-align: justify; background: #f2fafc;"> | |
| − | + | <div style="width: 96%; margin: auto; text-align: justify; background: #fdfdfd; padding-top: 10px;"> | |
| − | <div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;"> | + | <div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;"> |
| − | + | <div class="header-title" style="color: #3582d2;"> | |
| − | + | E-Coding | |
| − | + | </div> | |
| − | + | <div class="header-subtitle" style="color: #5da565;"> | |
| − | + | Storing the world one base at a time | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div style="border-top: 5px solid #397471; border-right: 5px solid #2a8481; padding: 20px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;"> | |
| − | + | The research for storing vast amounts of information in smaller devices has been an attention seeking topic in multidisciplinary areas of knowledge all around the world. | |
| − | + | <br> | |
| − | + | <br> | |
| − | + | <q>DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer</q> <br> Baum, 1995 | |
| − | + | </div> | |
| − | + | <div style="padding: 0px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;"> | |
| − | + | Nevertheless, this potential has been limited due to the lack of efficient editing tools. CRISPR-Cas has become popular as an editing tool for its high specificity, low cost, and easy handling, compared to other editing techniques. In our work, we use Cas1-Cas2, proteins in charge of new protospacer adquisition in the CRISPR array. Predesigned sequences (-70pb aprox) in the form of ssDNA are produced in E.coli by induction of a promoter, and adquired by the complex Cas1-Cas2 to be integrated into the array. To produce this oligonucleotides, we use the retrotranscriptase EC86. A subsequent sequencing of the array will confirm the integration of the oligos in the CRISPR locus. We measure the integration rate in terms of stimuli intensity, and time. We hypothise that this system can store ordered data in vivo of many stimuli, just by changing the promoter. | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
</section> | </section> | ||
<!-- Team--> | <!-- Team--> | ||
<section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;"> | <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;"> | ||
| − | + | <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;"> | |
| − | + | <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;"> | |
| − | + | <div> | |
| − | + | <table align="center" id="myTable"> | |
| − | + | <tr> | |
| − | + | <th colspan="3" style="text-align:center;"> | |
| − | + | <h5>Team Members</h5> | |
| − | + | </th> | |
| − | + | </tr> | |
| − | <h6>Esteban de la Peña <a href="https://www.linkedin.com/in/esteban-de-la-pe%C3%B1a-th%C3%A9venet/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | <tr> |
| − | <p>In charge of making the wiki</p> | + | <td> |
| − | + | <h6>Esteban de la Peña <a href="https://www.linkedin.com/in/esteban-de-la-pe%C3%B1a-th%C3%A9venet/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | |
| − | + | <p>In charge of making the wiki</p> | |
| − | <h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Team Management/Wet Lab</p> | + | <td> |
| − | + | <h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | |
| − | + | <p>Team Management/Wet Lab</p> | |
| − | <h6>Adrián Hernández <a href= "https://www.linkedin.com/in/adri%C3%A1n-hern%C3%A1ndez-mendoza-0184ba14b/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Interlab managment & Dry Lab</p> | + | <td> |
| − | + | <h6>Adrián Hernández <a href="https://www.linkedin.com/in/adri%C3%A1n-hern%C3%A1ndez-mendoza-0184ba14b/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | |
| − | + | <p>Interlab managment & Dry Lab</p> | |
| − | + | </td> | |
| − | + | </tr> | |
| − | <h6>Sofia Lara <a href= "https://www.linkedin.com/in/sof%C3%ADa-lara-507773123" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | <tr> |
| − | <p>In charge of Human Practices</p> | + | <td> |
| − | </td> | + | <h6>Sofia Lara <a href="https://www.linkedin.com/in/sof%C3%ADa-lara-507773123" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>In charge of Human Practices</p> | |
| − | <h6>José Arnulfo Juárez Figueroa <a href= "https://www.linkedin.com/in/jos%C3%A9-arnulfo-ju%C3%A1rez-figueroa-1478a1159/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Team Management</p> | + | <td> |
| − | </td> | + | <h6>José Arnulfo Juárez Figueroa <a href="https://www.linkedin.com/in/jos%C3%A9-arnulfo-ju%C3%A1rez-figueroa-1478a1159/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Team Management</p> | |
| − | <h6>Ana E. Lasso de la Vega <a href= "https://www.linkedin.com/in/ana-elizabeth-ldlv/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Team Management</p> | + | <td> |
| − | </td> | + | <h6>Ana E. Lasso de la Vega <a href="https://www.linkedin.com/in/ana-elizabeth-ldlv/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Team Management</p> | |
| − | + | </td> | |
| − | + | </tr> | |
| − | <h6>Miranda Iriarte <a href= "https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | <tr> |
| − | <p>Congress of Sciences iGEM</p> | + | <td> |
| − | </td> | + | <h6>Miranda Iriarte <a href="https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Congress of Sciences iGEM</p> | |
| − | <h6>Valeria Fuentes</h6> | + | </td> |
| − | <p>Congress of Sciences iGEM</p> | + | <td> |
| − | </td> | + | <h6>Valeria Fuentes</h6> |
| − | + | <p>Congress of Sciences iGEM</p> | |
| − | <h6>Juan Fernández <a href= "https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Mathematical Model</p> | + | <td> |
| − | + | <h6>Juan Fernández <a href="https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | |
| − | + | <p>Mathematical Model</p> | |
| − | + | </td> | |
| − | + | </tr> | |
| − | <h6>Norma Garza <a href= "https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | <tr> |
| − | <p>Interlab managment/Drylab</p> | + | <td> |
| − | </td> | + | <h6>Norma Garza <a href="https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Interlab managment/Drylab</p> | |
| − | <h6>Miriam Salas Ramírez <a href= "https://www.linkedin.com/in/miriamsalas" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Congress of Sciences iGEM</p> | + | <td> |
| − | </td> | + | <h6>Miriam Salas Ramírez <a href="https://www.linkedin.com/in/miriamsalas" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Congress of Sciences iGEM</p> | |
| − | <h6>Victor Robledo</h6> | + | </td> |
| − | <p>Wetlab/Drylab</p> | + | <td> |
| − | </td> | + | <h6>Victor Robledo</h6> |
| − | + | <p>Wetlab/Drylab</p> | |
| − | <tr> | + | </td> |
| − | + | </tr> | |
| − | <h6>Carlos Javier Cordero <a href= "https://www.linkedin.com/in/carlos-javier-cordero-oropeza-386593a9/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | <tr> |
| − | <p>Drylab</p> | + | <td> |
| − | </td> | + | <h6>Carlos Javier Cordero <a href="https://www.linkedin.com/in/carlos-javier-cordero-oropeza-386593a9/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Drylab</p> | |
| − | <h6>Nora Torres</h6> | + | </td> |
| − | <p>Team Management</p> | + | <td> |
| − | </td> | + | <h6>Nora Torres</h6> |
| − | + | <p>Team Management</p> | |
| − | <h6>Roberto Vásquez <a href= "https://www.linkedin.com/in/robertovzz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Mathematical Model</p> | + | <td> |
| − | </td> | + | <h6>Roberto Vásquez <a href="https://www.linkedin.com/in/robertovzz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Mathematical Model</p> | |
| − | <tr> | + | </td> |
| − | + | </tr> | |
| − | <h6>Samantha Peña</h6> | + | <tr> |
| − | <p>Human Practices, and design</p> | + | <td> |
| − | </td> | + | <h6>Samantha Peña</h6> |
| − | + | <p>Human Practices, and design</p> | |
| − | <h6>Andrés Sánchez <a href= "http://linkedin.com/in/andresbsanchez" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Mathematical Model</p> | + | <td> |
| − | </td> | + | <h6>Andrés Sánchez <a href="http://linkedin.com/in/andresbsanchez" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Mathematical Model</p> | |
| − | <h6>Diego Valadez</h6> | + | </td> |
| − | <p>Wiki/Dry Lab</p> | + | <td> |
| − | </td> | + | <h6>Diego Valadez</h6> |
| − | + | <p>Wiki/Dry Lab</p> | |
| − | <tr> | + | </td> |
| − | + | </tr> | |
| − | <h6>Jesús Héctor López <a href= "https://www.linkedin.com/in/jesushectorlopezgrajeda" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | <tr> |
| − | <p>Dry Lab</p> | + | <td> |
| − | </td> | + | <h6>Jesús Héctor López <a href="https://www.linkedin.com/in/jesushectorlopezgrajeda" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Dry Lab</p> | |
| − | <h6>Adriana Lizeth Rubio <a href= "https://mx.linkedin.com/in/adriana-lizeth-rubio-aguirre-56b10a15a" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Mathematical Model</p> | + | <td> |
| − | </td> | + | <h6>Adriana Lizeth Rubio <a href="https://mx.linkedin.com/in/adriana-lizeth-rubio-aguirre-56b10a15a" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Mathematical Model</p> | |
| − | <h6>María Eugenia Reyna <a href= "https://www.linkedin.com/in/mar%C3%ADa-eugenia-reyna-fern%C3%A1ndez-775732167/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> | + | </td> |
| − | <p>Wetlab</p> | + | <td> |
| − | </td> | + | <h6>María Eugenia Reyna <a href="https://www.linkedin.com/in/mar%C3%ADa-eugenia-reyna-fern%C3%A1ndez-775732167/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6> |
| − | + | <p>Wetlab</p> | |
| − | + | </td> | |
| − | </div> | + | </tr> |
| − | </div> | + | </table> |
| − | </div> | + | </div> |
| + | </div> | ||
| + | </div> | ||
</section> | </section> | ||
<!-- Human Practices --> | <!-- Human Practices --> | ||
<section id="HP" style="text-align: center;"> | <section id="HP" style="text-align: center;"> | ||
| − | + | <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;"> | |
| − | + | <div style="width: 40%; float: left; padding-right: 20px;"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg"> | |
| − | + | </div> | |
| − | + | <div style="width: 60%; float: right; padding-top: 60px"> | |
| − | + | <div class="header-title" style="color: #3582d2;"> | |
| − | + | Human Practices | |
| − | + | </div> | |
| − | + | <div class="header-subtitle" style="color: #5da565;"> | |
| − | + | Pollutants in Chiapas and Mexico | |
| − | + | </div> | |
| − | + | <p style="font-size: 18px; color: #2f6361;">Our project has many applications, but we decided to face a critical environmental problem in one southern state of Mexico: Chiapas. Chiapas is a beautiful state with megadiverse ecosystems, but it also has a severe water pollution problem that affects many communities close to the natural and polluted water sources. With the help of Cecropia and CONANP we will obtain water samples from the polluted sources and analyze them with several techniques in order to make a valuable overview.</p> | |
| − | + | </div> | |
| − | + | </div> | |
</section> | </section> | ||
</body> | </body> | ||
| + | |||
</html> | </html> | ||
| Line 1,229: | Line 1,298: | ||
<!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} --> | <!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} --> | ||
<html> | <html> | ||
| + | |||
<body> | <body> | ||
<!-- Footer --> | <!-- Footer --> | ||
<footer class="footer text-center"> | <footer class="footer text-center"> | ||
| − | + | <div class="container row" style="margin: 0px auto;"> | |
| − | + | <div class="col-md-3"> | |
| − | + | <h4 class="text-muted">Follow Us</h4> | |
| − | + | <ul class="list-inline mb-5"> | |
| − | + | <li class="list-inline-item"> | |
| − | + | <a href="https://www.facebook.com/IgemTecMty" target="_blank"><i class="fa fa-facebook-square social-link" style="font-size: 100px;"></i></a> | |
| − | + | </li> | |
| − | + | <li class="list-inline-item"> | |
| − | + | <a href="https://twitter.com/igemtecmty" target="_blank"><i class="fa fa-twitter-square social-link" style="font-size: 100px;"></i></a> | |
| − | + | </li> | |
| − | + | <li class="list-inline-item"> | |
| − | + | <a href="mailto:igemtecmonterrey@gmail.com"><i class="fa fa-envelope-square social-link" style="font-size: 100px;"></i></a> | |
| − | + | </li> | |
| − | + | <li class="list-inline-item"> | |
| − | + | <a href="https://www.instagram.com/igemtecmty/" target="_blank"><i class="fa fa-instagram social-link" style="font-size: 100px;"></i></a> | |
| − | + | </li> | |
| − | + | <li style="padding-left:20px;"> | |
| − | + | <p class="text-muted" style="margin-bottom: 0;"><i class="fa fa-map-pin"></i> Av. Eugenio Garza Sada 2501</p> | |
| − | + | <p class="text-muted">64849 Monterrey, Mexico</p> | |
| − | + | </li> | |
| + | </ul> | ||
| + | </div> | ||
| + | <div class="col-md-6"> | ||
| + | <h4 class="text-muted">Sponsors</h4> | ||
| + | <ul class="list-inline"> | ||
| + | <li class="list-inline-item"> | ||
| + | <p class="text-muted">Waiting for a Miracle</p> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | <div class="col-md-3"> | ||
| + | <h4 class="text-muted">Quote</h4> | ||
| + | <p class="text-muted">“DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer.”</p> | ||
| + | <p class="text-muted">Baum, 1995</p> | ||
| + | </div> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div> | <div> | ||
<p id="footerCopyright" class="text-muted small mb-0">Copyright © 2018</p> | <p id="footerCopyright" class="text-muted small mb-0">Copyright © 2018</p> | ||
| − | + | </div> | |
</footer> | </footer> | ||
| − | <!-- Optional JavaScript --> | + | <!-- Optional JavaScript --> |
| − | <!-- jQuery first, then Popper.js, then Bootstrap JS --> | + | <!-- jQuery first, then Popper.js, then Bootstrap JS --> |
| − | <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> | + | <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> | + | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> |
| − | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> | + | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> |
| + | |||
| + | <!-- Script controls collapsedMenus --> | ||
| + | <script> | ||
| + | /*------------MENU STARTS-----------*/ | ||
| + | |||
| + | //Menu collapsing | ||
| + | |||
| + | $("#linkContainer_Project").hover( | ||
| + | function() { | ||
| + | $('#navbar').css('background', '#2A8481'); | ||
| + | $("#linkContainer_Project").addClass("active"); | ||
| + | $("#linkContainer_ProjectChild").addClass("activeChild"); | ||
| + | openMenu('#collapseProject', '#b0e0e4'); | ||
| − | + | }, | |
| − | + | function() { | |
| + | $("#linkContainer_Project").removeClass("active"); | ||
| + | $("#linkContainer_ProjectChild").removeClass("activeChild"); | ||
| + | closeMenu('#collapseProject'); | ||
| + | colorNavbar(); | ||
| − | + | $('#collapseProject').mouseenter(function() { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | $('#navbar').css('background','#2A8481'); | + | |
$("#linkContainer_Project").addClass("active"); | $("#linkContainer_Project").addClass("active"); | ||
$("#linkContainer_ProjectChild").addClass("activeChild"); | $("#linkContainer_ProjectChild").addClass("activeChild"); | ||
openMenu('#collapseProject', '#b0e0e4'); | openMenu('#collapseProject', '#b0e0e4'); | ||
| − | + | }); | |
| − | } | + | $('#collapseProject').mouseleave(function() { |
| + | colorNavbar(); | ||
$("#linkContainer_Project").removeClass("active"); | $("#linkContainer_Project").removeClass("active"); | ||
$("#linkContainer_ProjectChild").removeClass("activeChild"); | $("#linkContainer_ProjectChild").removeClass("activeChild"); | ||
closeMenu('#collapseProject'); | closeMenu('#collapseProject'); | ||
| − | + | }); | |
| − | + | } | |
| − | + | ); | |
| − | + | ||
| − | + | $("#linkContainer_Parts").hover( | |
| − | + | function() { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | + | $("#linkContainer_Parts").addClass("active"); | |
| − | + | $("#linkContainer_PartsChild").addClass("activeChild"); | |
| − | + | openMenu('#collapseParts', '#bae4e8'); | |
| − | + | }, | |
| − | + | function() { | |
| − | + | colorNavbar(); | |
| − | + | $("#linkContainer_Parts").removeClass("active"); | |
| − | + | $("#linkContainer_PartsChild").removeClass("activeChild"); | |
| − | + | closeMenu('#collapseParts'); | |
| − | + | ||
| − | + | $('#collapseParts').mouseenter(function() { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | $('#navbar').css('background','#2A8481'); | + | |
$("#linkContainer_Parts").addClass("active"); | $("#linkContainer_Parts").addClass("active"); | ||
$("#linkContainer_PartsChild").addClass("activeChild"); | $("#linkContainer_PartsChild").addClass("activeChild"); | ||
openMenu('#collapseParts', '#bae4e8'); | openMenu('#collapseParts', '#bae4e8'); | ||
| − | } | + | }); |
| + | $('#collapseParts').mouseleave(function() { | ||
colorNavbar(); | colorNavbar(); | ||
$("#linkContainer_Parts").removeClass("active"); | $("#linkContainer_Parts").removeClass("active"); | ||
$("#linkContainer_PartsChild").removeClass("activeChild"); | $("#linkContainer_PartsChild").removeClass("activeChild"); | ||
closeMenu('#collapseParts'); | closeMenu('#collapseParts'); | ||
| − | + | }); | |
| − | + | } | |
| − | + | ); | |
| − | + | ||
| − | + | $("#linkContainer_People").hover( | |
| − | + | function() { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | + | $("#linkContainer_People").addClass("active"); | |
| − | + | $("#linkContainer_PeopleChild").addClass("activeChild"); | |
| − | + | openMenu('#collapsePeople', '#caeaed'); | |
| − | + | }, | |
| − | + | function() { | |
| − | + | colorNavbar(); | |
| − | + | $("#linkContainer_People").removeClass("active"); | |
| − | + | $("#linkContainer_PeopleChild").removeClass("activeChild"); | |
| − | + | closeMenu('#collapsePeople'); | |
| − | + | ||
| − | + | $('#collapsePeople').mouseenter(function() { | |
| − | $('#navbar').css('background','#2A8481'); | + | $('#navbar').css('background', '#2A8481'); |
$("#linkContainer_People").addClass("active"); | $("#linkContainer_People").addClass("active"); | ||
$("#linkContainer_PeopleChild").addClass("activeChild"); | $("#linkContainer_PeopleChild").addClass("activeChild"); | ||
openMenu('#collapsePeople', '#caeaed'); | openMenu('#collapsePeople', '#caeaed'); | ||
| − | } | + | }); |
| + | $('#collapsePeople').mouseleave(function() { | ||
colorNavbar(); | colorNavbar(); | ||
$("#linkContainer_People").removeClass("active"); | $("#linkContainer_People").removeClass("active"); | ||
$("#linkContainer_PeopleChild").removeClass("activeChild"); | $("#linkContainer_PeopleChild").removeClass("activeChild"); | ||
closeMenu('#collapsePeople'); | closeMenu('#collapsePeople'); | ||
| − | + | }); | |
| − | + | } | |
| − | + | ); | |
| − | + | ||
| − | + | $("#linkContainer_HP").hover( | |
| − | + | function() { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | + | $("#linkContainer_HP").addClass("active"); | |
| − | + | $("#linkContainer_HPChild").addClass("activeChild"); | |
| − | + | openMenu('#collapseHP', '#d8f0f2'); | |
| − | + | }, | |
| − | + | function() { | |
| − | + | colorNavbar(); | |
| − | + | $("#linkContainer_HP").removeClass("active"); | |
| − | + | $("#linkContainer_HPChild").removeClass("activeChild"); | |
| − | + | closeMenu('#collapseHP'); | |
| − | + | ||
| − | + | $('#collapseHP').mouseenter(function() { | |
| − | $('#navbar').css('background','#2A8481'); | + | $('#navbar').css('background', '#2A8481'); |
$("#linkContainer_HP").addClass("active"); | $("#linkContainer_HP").addClass("active"); | ||
$("#linkContainer_HPChild").addClass("activeChild"); | $("#linkContainer_HPChild").addClass("activeChild"); | ||
openMenu('#collapseHP', '#d8f0f2'); | openMenu('#collapseHP', '#d8f0f2'); | ||
| − | } | + | }); |
| + | $('#collapseHP').mouseleave(function() { | ||
colorNavbar(); | colorNavbar(); | ||
$("#linkContainer_HP").removeClass("active"); | $("#linkContainer_HP").removeClass("active"); | ||
$("#linkContainer_HPChild").removeClass("activeChild"); | $("#linkContainer_HPChild").removeClass("activeChild"); | ||
closeMenu('#collapseHP'); | closeMenu('#collapseHP'); | ||
| − | + | }); | |
| − | + | } | |
| − | + | ); | |
| − | + | ||
| − | + | $("#linkContainer_Modeling").hover( | |
| − | + | function() { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | + | $("#linkContainer_Modeling").addClass("active"); | |
| − | + | $("#linkContainer_ModelingChild").addClass("activeChild"); | |
| − | + | openMenu('#collapseModeling', '#e7f6f7'); | |
| − | + | }, | |
| − | + | function() { | |
| − | + | colorNavbar(); | |
| − | + | $("#linkContainer_Modeling").removeClass("active"); | |
| − | + | $("#linkContainer_ModelingChild").removeClass("activeChild"); | |
| − | + | closeMenu('#collapseModeling'); | |
| − | + | ||
| − | + | $('#collapseModeling').mouseenter(function() { | |
| − | $('#navbar').css('background','#2A8481'); | + | $('#navbar').css('background', '#2A8481'); |
$("#linkContainer_Modeling").addClass("active"); | $("#linkContainer_Modeling").addClass("active"); | ||
$("#linkContainer_ModelingChild").addClass("activeChild"); | $("#linkContainer_ModelingChild").addClass("activeChild"); | ||
openMenu('#collapseModeling', '#e7f6f7'); | openMenu('#collapseModeling', '#e7f6f7'); | ||
| − | } | + | }); |
| + | $('#collapseModeling').mouseleave(function() { | ||
colorNavbar(); | colorNavbar(); | ||
$("#linkContainer_Modeling").removeClass("active"); | $("#linkContainer_Modeling").removeClass("active"); | ||
$("#linkContainer_ModelingChild").removeClass("activeChild"); | $("#linkContainer_ModelingChild").removeClass("activeChild"); | ||
closeMenu('#collapseModeling'); | closeMenu('#collapseModeling'); | ||
| − | + | }); | |
| − | + | } | |
| − | + | ); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | $("#navbarLogoWrapper").click(function() { | |
| − | + | window.location.href = "https://2018.igem.org/Team:Tec-Monterrey"; | |
| + | }); | ||
| + | |||
| + | function openMenu(collapseName, collapseColor) { | ||
| + | $(".topBar").css({ | ||
| + | 'height': '100%' | ||
| + | }); | ||
| + | $(".mask").css({ | ||
| + | 'background': 'rgba(0,123,255,0.5)', | ||
| + | 'height': '100%' | ||
| + | }); | ||
| + | $(collapseName).css({ | ||
| + | 'background-color': collapseColor | ||
}); | }); | ||
| − | + | if ($(".topBar").offset().top < 300) { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
$(collapseName).stop().fadeIn(300); | $(collapseName).stop().fadeIn(300); | ||
| − | + | } else { | |
$(collapseName).stop().slideDown(400); | $(collapseName).stop().slideDown(400); | ||
| − | |||
} | } | ||
| − | + | } | |
| − | + | ||
| − | + | function colorNavbar() { | |
| − | + | if ($(".topBar").offset().top > 300) { | |
| − | + | $('#navbar').css('background', '#2A8481'); | |
| − | + | } else { | |
| − | + | $('#navbar').css('background', 'linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)'); | |
} | } | ||
| + | } | ||
| − | + | function closeMenu(collapseName) { | |
| − | + | $(".topBar").css({ | |
| − | + | 'height': '8vh' | |
| − | + | }); | |
| + | $(".mask").css({ | ||
| + | 'background': 'rgba(0,0,0,0)', | ||
| + | 'height': '8vh' | ||
| + | }); | ||
| + | if ($(".topBar").offset().top < 300) { | ||
$(collapseName).stop().fadeOut(200); | $(collapseName).stop().fadeOut(200); | ||
| − | + | } else { | |
$(collapseName).stop().slideUp(300); | $(collapseName).stop().slideUp(300); | ||
| − | |||
} | } | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | $(window).scroll(colorNavbar); | |
| − | + | $(document).ready(colorNavbar); | |
| − | + | ||
| − | |||
| − | <!-- Custom JavaScript | + | |
| + | /*--- Squeezed Menu ---*/ | ||
| + | $("#squeezedNavBtn").hover( | ||
| + | function() { | ||
| + | $('#navbar').css('background', '#2A8481'); | ||
| + | openMenu('#sqCollapse', '#2cA555'); | ||
| + | }, | ||
| + | function() { | ||
| + | colorNavbar(); | ||
| + | closeMenu('#sqCollapse'); | ||
| + | } | ||
| + | ); | ||
| + | |||
| + | $(document).on("vclick", "#squeezedNavBtn", function() { | ||
| + | $("#sqContainer").css('background-color', 'blue'); | ||
| + | }); | ||
| + | |||
| + | /*------------MENU ENDS-----------*/ | ||
| + | </script> | ||
| + | |||
| + | <!-- Custom JavaScript | ||
<script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/StylishPortfolio?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/StylishPortfolio?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
<script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/jqueryeasingmin?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/jqueryeasingmin?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
--> | --> | ||
| − | + | </body> | |
| + | |||
</html> | </html> | ||
Revision as of 15:24, 5 September 2018
Home
E-Coding
Storing the world one base at a time
The research for storing vast amounts of information in smaller devices has been an attention seeking topic in multidisciplinary areas of knowledge all around the world.
Baum, 1995
DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer
Baum, 1995
Nevertheless, this potential has been limited due to the lack of efficient editing tools. CRISPR-Cas has become popular as an editing tool for its high specificity, low cost, and easy handling, compared to other editing techniques. In our work, we use Cas1-Cas2, proteins in charge of new protospacer adquisition in the CRISPR array. Predesigned sequences (-70pb aprox) in the form of ssDNA are produced in E.coli by induction of a promoter, and adquired by the complex Cas1-Cas2 to be integrated into the array. To produce this oligonucleotides, we use the retrotranscriptase EC86. A subsequent sequencing of the array will confirm the integration of the oligos in the CRISPR locus. We measure the integration rate in terms of stimuli intensity, and time. We hypothise that this system can store ordered data in vivo of many stimuli, just by changing the promoter.
Human Practices
Pollutants in Chiapas and Mexico
Our project has many applications, but we decided to face a critical environmental problem in one southern state of Mexico: Chiapas. Chiapas is a beautiful state with megadiverse ecosystems, but it also has a severe water pollution problem that affects many communities close to the natural and polluted water sources. With the help of Cecropia and CONANP we will obtain water samples from the polluted sources and analyze them with several techniques in order to make a valuable overview.