|
|
| Line 1: |
Line 1: |
| − | <!--
| + | {{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} |
| − | V5
| + | |
| − | | + | |
| − | Changes
| + | |
| − | * Mobile Menu
| + | |
| − | * Muchos cambios alv ya se lo mandé a esteban
| + | |
| − | | + | |
| − | Detailed Changes
| + | |
| − | * SBSBSBSBSBBS
| + | |
| − | | + | |
| − | | + | |
| − | Missing
| + | |
| − | *
| + | |
| − | | + | |
| − | -->
| + | |
| − | | + | |
| − | | + | |
| − | <!---{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} ------>
| + | |
| | <html> | | <html> |
| − |
| |
| | <head> | | <head> |
| − | <meta name="viewport" content="width=device-width,initial-scale=1.0">
| + | <link rel="stylesheet" href="/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/> |
| − | <!--bootstrap core css-->
| + | <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet">
| + | <script src="/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.min.js"></script> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
| + | <script src="/jquery-jvectormap-2.0.3/jquery-jvectormap-world-mill.js"></script> |
| − |
| + | <style> |
| − | | + | .full-masthead { |
| − | | + | width: 100%; |
| − | <style>
| + | } |
| − | /**************************************** Clear the default wiki settings *********************************/
| + | .full-masthead img { |
| − | | + | width: 100%; |
| − | #home_logo,
| + | } |
| − | #sideMenu {
| + | #collabs { |
| − | display: none;
| + | width: 100%; |
| − | }
| + | height: auto; |
| − | | + | background: #70c27c; |
| − | #sideMenu,
| + | z-index: 1; |
| − | #top_title,
| + | display: block; |
| − | .patrollink {
| + | } |
| − | display: none;
| + | #meetings { |
| − | }
| + | width: 100%; |
| − | | + | height: auto; |
| − | #content,
| + | background: #2a4081; |
| − | #HQ_page {
| + | z-index: 1; |
| − | width: 100%;
| + | display: block; |
| − | padding: 0;
| + | } |
| − | margin: 0;
| + | .collab-container { |
| − | background-color: white; //font-size: 100% !important;
| + | width: 90%; |
| − | }
| + | height: auto; |
| − | | + | left: 5%; |
| − | #content {
| + | top: 5%; |
| − | margin-top: -16px;
| + | background: black; |
| − | }
| + | position: relative; |
| − | | + | display: flex; |
| − | #globalWrapper,
| + | } |
| − | #content,
| + | .container-left { |
| − | #HQ_page,
| + | margin: 1.5% 0 1.5% 1.5%; |
| − | #bodyContent,
| + | background: white; |
| − | #mw-content-text {
| + | display: flex; |
| − | height: 100%;
| + | width: 33.33%; |
| − | width: 100%;
| + | } |
| − | }
| + | .container-center { |
| − | | + | margin: 1.5% 0 1.5% 0; |
| − | /*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
| + | background: white; |
| − | | + | display: inline-block; |
| − | #top_menu_14 {
| + | width: 33.33%; |
| − | box-sizing: initial;
| + | } |
| − | }
| + | .container-right { |
| − | | + | margin: 1.5% 1.5% 1.5% 0; |
| − | td a {
| + | background: white; |
| − | padding-right: 0px !important;
| + | display: flex; |
| − | }
| + | width: 33.33%; |
| − | | + | } |
| − | #globalWrapper {
| + | .column-container { |
| − | padding-bottom: 0;
| + | width: 50%; |
| − | }
| + | } |
| − | | + | .team-logo { |
| − | /*************************************************** Bootstrap Stuff ************************************************/
| + | width: 90%; |
| − | | + | height: 120px; |
| − | .portfolio-item .caption .caption-content p {
| + | background: blue; |
| − | font-weight: 300;
| + | margin: 10px 5%; |
| − | font-size: 1.2rem;
| + | } |
| − | }
| + | .tec-logo { |
| − | | + | width: 100%; |
| − | @media (min-width: 992px) {
| + | height: 90%; |
| − | .portfolio-item {
| + | margin: 5% 0; |
| − | max-width: none;
| + | background: blue; |
| − | margin: 0;
| + | } |
| − | }
| + | .collab-info { |
| − | .portfolio-item .caption {
| + | width: 80%; |
| − | -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
| + | height; 500px; |
| − | -webkit-clip-path: inset(0px);
| + | left: 10%; |
| − | clip-path: inset(0px);
| + | margin: 10% 0; |
| − | }
| + | background: white; |
| − | .portfolio-item .caption .caption-content {
| + | position: relative; |
| − | transition: opacity 0.25s;
| + | display: inline-block; |
| − | margin-left: 5rem;
| + | z-index: 2; |
| − | margin-right: 5rem;
| + | } |
| − | margin-bottom: 5rem;
| + | </style> |
| − | }
| + | |
| − | .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;
| + | |
| − | }
| + | |
| − | | + | |
| − | .body-title {
| + | |
| − | font-family: "Norwester", sans-serif !important;
| + | |
| − | font-size: 4vw;
| + | |
| − | font-weight: 600 !important;
| + | |
| − | line-height: 1em;
| + | |
| − | padding: 10px 0 10px 0;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .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;
| + | |
| − | padding: 3% 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .scroll-to-top {
| + | |
| − | position: fixed;
| + | |
| − | right: 10px;
| + | |
| − | bottom: 10px;
| + | |
| − | display: none;
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /****** SQUEEZED MENU MOBILE STARTS ******/
| + | |
| − | | + | |
| − | #squeezedBtnWrapper {}
| + | |
| − | | + | |
| − | #squeezedNavBtn {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | z-index: 3;
| + | |
| − | height: 8vh;
| + | |
| − | width: 80px;
| + | |
| − | right: 10%;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 6vh;
| + | |
| − | color: whitesmoke;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sqCollapse {
| + | |
| − | background-color: #397471;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sqContainer {
| + | |
| − | background-color: #397471;
| + | |
| − | height: 100%;
| + | |
| − | width: 80%;
| + | |
| − | left: 10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sqContainer a:link {
| + | |
| − | font-size: 40px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .sqzCollapsedMenu {
| + | |
| − | height: auto;
| + | |
| − | width: 100%;
| + | |
| − | background-color: #397471;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /****** SQUEEZED MENU MOBILE ENDS ******/
| + | |
| − | | + | |
| − | /********************************************************* 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>
| + | |
| | </head> | | </head> |
| − |
| |
| | <body> | | <body> |
| − |
| + | <header class="full-masthead"> |
| − | <!--Mobile Jquery-->
| + | <div id="world-map" style="width: 600px; height: 400px"></div> |
| − | <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> | + | <script> |
| − | <script type="text/javascript">
| + | $(function(){ |
| − |
| + | $('#world-map').vectorMap({map: 'world_mill'}); |
| − |
| + | }); |
| − | /*--- Squeezed Menu ---*/
| + | </script> |
| − | var openSq = false;
| + | </header> |
| − | var activeChild;
| + | |
| − |
| + | |
| − | $(document).on( "vclick", "#squeezedNavBtn", function() { // event vclick
| + | |
| − | if (openSq) {
| + | |
| − | openSq = false;
| + | |
| − | $('#squeezedNavBtn').css('color', 'whitesmoke');
| + | |
| − | $("#sqCollapse").stop().slideUp(400);
| + | |
| − | try {
| + | |
| − | activeChild.stop().slideUp(400);
| + | |
| − | } catch(error) {
| + | |
| − | console.error("No hay child");
| + | |
| − | }
| + | |
| − | console.log("si entra al slideup alv");
| + | |
| − | setTimeout(
| + | |
| − | function() {
| + | |
| − | 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%)');
| + | |
| − | }
| + | |
| − | }, 400);
| + | |
| − | } else {
| + | |
| − | openSq = true;
| + | |
| − | setTimeout(
| + | |
| − | function() {
| + | |
| − | $('#squeezedNavBtn').css('color', 'white');
| + | |
| − | $("#sqCollapse").stop().slideDown(400);
| + | |
| − | console.log("si entra al slidedown alv");
| + | |
| − | }, 100);
| + | |
| − | $('#navbar').css('background', '#2A8481');
| + | |
| − | }
| + | |
| − |
| + | |
| − | });
| + | |
| − |
| + | |
| − | if (openSq) {
| + | |
| − | $('#navbar').css('background', '#2A8481');
| + | |
| − | }
| + | |
| − |
| + | |
| − | $(document).on( "vclick", ".sqzNavbarItemHeader", function() { // event vclick
| + | |
| − | console.log("Entro al else");
| + | |
| − | try {
| + | |
| − | activeChild.stop().slideUp(400);
| + | |
| − | } catch(error) {
| + | |
| − | console.error("No hay child");
| + | |
| − | }
| + | |
| − | activeChild = $(this).next(".sqzCollapsedMenu");
| + | |
| − | activeChild.stop().slideDown(400);
| + | |
| − | console.log("si jala navBarItemHeader alv");
| + | |
| − | });
| + | |
| | | | |
| − | $(window).scroll(colorNavbar);
| + | <section id="collabs"> |
| − | $(document).ready(colorNavbar);
| + | <div class="collab-container"> |
| − | </script>
| + | <div class="container-left"> |
| − | <!-- Navigation Bar--> | + | <div class=" column-container"> |
| − | <!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
| + | |
| − | <div id=" squeezedBtnWrapper"> | + | </div> |
| − | <div id=" squeezedNavBtn"> | + | <div class="team-logo"> |
| − | <div style=" height: 5px"></div> | + | </div> |
| − | <i class="fa fa-bars"></i>
| + | <div class="team-logo"> |
| | + | </div> |
| | </div> | | </div> |
| − | </div>
| + | <div class="column-container"> |
| − | <div id="topBarWrapper">
| + | |
| − | <div class="topBar d-flex"> | + | </div> |
| − | <div id="navbar">
| + | |
| − | <div id="navbarLogoWrapper">
| + | </div> |
| − | <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>
| + | |
| − | <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>
| + | |
| − | | + | |
| − | <!-- Project collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseProject">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <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>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <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>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Experiments</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Protocols</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Safety</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Notebook</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Calendar</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Meetings</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Results</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Introduction</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- Parts collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseParts">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Basic Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Best Basic Part</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Composite Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Best Composite Part</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Parts Collection</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Best Parts</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Improved Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part I</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part II</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part III</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part IV</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Parts List</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- People collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapsePeople">
| + | |
| − | <div class="containerCollapse" id="collapsedMenu">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Header</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Team Members</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Advisors</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Instructors</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Collaborations</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 1</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 2</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 3</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 4</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Attributions</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Design Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Programmers</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Investigators</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Ex-iGEMers</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Sponsors</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Principal</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Secondary</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- HP collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseHP">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Chiapas</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Sampling</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Analysis</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Reuslts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">References</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Integrated HP</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Gold HP</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">System Usage</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">References</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Public Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Milenio News</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Conexion Tec</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Genobiotec</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Curiosamente</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Tec Review</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Educational Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Seminar</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Congress</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Talks</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- Modeling collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseModeling">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Mathematical Model</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Growth</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Enzimes</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">InterLab</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Protocols</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Absorbance</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Fluorescence</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Squeezed collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="sqCollapse">
| + | |
| − | <div class="containerCollapse" id="sqContainer">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="height: 50%; width: 100%">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Project</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Description</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Design</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Experiments</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Notebook</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Results</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Parts</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Basic Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Composite Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Parts Collection</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Improved Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Parts List</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">People</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Collaborations</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Attributions</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Sponsors</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Human Practices</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Chiapas</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Integrated HP</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Public Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Educational Engagement</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Modeling</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Mathematical Model</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">InterLab</a>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="mask"></div>
| + | |
| | </div> | | </div> |
| − | </div>
| + | </div> |
| − | <!--------------------------------------------------------- TOPBAR MENU ENDS --------------------------------------------->
| + | <div class="container-center"> |
| − |
| + | <div class="tec-logo"> |
| − |
| + | |
| − | <!------- sidebar dots navigation ---->
| + | |
| − | <link href='https://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
| + | |
| − | | + | |
| − | <link rel="stylesheet" href="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--reset?action=raw&ctype=text/css">
| + | |
| − | <!-- CSS reset -->
| + | |
| − | <link rel="stylesheet" href="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--style?action=raw&ctype=text/css">
| + | |
| − | <!-- Resource style -->
| + | |
| − | <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--modernizr?action=raw&ctype=text/javascript"></script>
| + | |
| − | <!-- Modernizr -->
| + | |
| − |
| + | |
| − |
| + | |
| − | <!------------SideBar dots navigation -------->
| + | |
| − | | + | |
| − | <nav class="cd-vertical-nav">
| + | |
| − | <ul>
| + | |
| − | <li><a href="#project" class="active"><span class="label">Project</span></a></li>
| + | |
| − | <li><a href="#team"><span class="label">Team</span></a></li>
| + | |
| − | <li><a href="#HP"><span class="label">Human Practices</span></a></li>
| + | |
| − | <li><a href="#section4"><span class="label">Share</span></a></li>
| + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − | <!-- .cd-vertical-nav -->
| + | |
| − |
| + | |
| − | <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--main?action=raw&ctype=text/javascript"></script>
| + | |
| − |
| + | |
| − | <script>
| + | |
| − | $(".cd-vertical-nav").hover(
| + | |
| − | function() {
| + | |
| − | $('.cd-vertical-nav a').css('font-size', '0 px');
| + | |
| − | },
| + | |
| − | function() {
| + | |
| − | $('.cd-vertical-nav a').css('font-size', '1 rem');
| + | |
| − | }
| + | |
| − | );
| + | |
| − | </script>
| + | |
| − | <!-- Resource jQuery -->
| + | |
| − |
| + | |
| − |
| + | |
| − | <!--Scroll to top button-->
| + | |
| − | <a class="scroll-to-top rounded" href="#page-top">
| + | |
| − | <i class="fa fa-angle-up"></i> | + | |
| − | </a>
| + | |
| − | | + | |
| − | </body>
| + | |
| − | | + | |
| − | </html>
| + | |
| − | | + | |
| − | | + | |
| − | <!---MAIN--->
| + | |
| − | <html>
| + | |
| − | | + | |
| − | <head>
| + | |
| − |
| + | |
| − |
| + | |
| − | <style>
| + | |
| − | #globalWrapper {
| + | |
| − | background: rgb(248, 247, 246);
| + | |
| − | }
| + | |
| − | | + | |
| − | #myImage {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | max-width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .masthead {
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | | + | |
| − | #myTable p {
| + | |
| − | text-align: center;
| + | |
| − | font-size: 14px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #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>
| + | |
| − | <body id="page-top">
| + | |
| − |
| + | |
| − | <!-- 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">
| + | |
| − | <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> |
| − | <div class="overlay"></div>
| + | </div> |
| − | </header>
| + | <div class="container-right"> |
| − | | + | <div class="column-container"> |
| − | <!-- Project -->
| + | |
| − | <section id="project" style="background: #d3edf2; text-align: center;">
| + | </div> |
| − | <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> |
| − | <div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;">
| + | |
| − | <div class=" header- title" style="color: #3582d2;"> | + | </div> |
| − | 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> | | </div> |
| − | </section>
| + | <div class="column-container"> |
| − | | + | |
| − | <!-- Team-->
| + | </div> |
| − | <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
| + | <div class="team-logo"> |
| − | <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;"> | + | </div> |
| − | <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;"> | + | <div class="team-logo"> |
| − | <div>
| + | </div> |
| − | <table align="center" id="myTable">
| + | |
| − | <tr>
| + | |
| − | <th colspan="3" style="text-align:center;">
| + | |
| − | <h5>Team Members</h5>
| + | |
| − | </th>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <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>
| + | |
| − | </td>
| + | |
| − | <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>
| + | |
| − | </td>
| + | |
| − | <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>
| + | |
| − | <tr>
| + | |
| − | <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>
| + | |
| − | </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>
| + | |
| − | </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>
| + | |
| − | <tr>
| + | |
| − | <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>
| + | |
| − | </td>
| + | |
| − | <td>
| + | |
| − | <h6>Valeria Fuentes</h6>
| + | |
| − | <p>Congress of Sciences iGEM</p>
| + | |
| − | </td>
| + | |
| − | <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>
| + | |
| − | <tr>
| + | |
| − | <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>
| + | |
| − | </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>
| + | |
| − | </td>
| + | |
| − | <td>
| + | |
| − | <h6>Victor Robledo</h6>
| + | |
| − | <p>Wetlab/Drylab</p>
| + | |
| − | </td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <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>
| + | |
| − | </td>
| + | |
| − | <td>
| + | |
| − | <h6>Nora Torres</h6>
| + | |
| − | <p>Team Management</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>
| + | |
| − | </td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>
| + | |
| − | <h6>Samantha Peña</h6>
| + | |
| − | <p>Human Practices, and design</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>
| + | |
| − | </td>
| + | |
| − | <td>
| + | |
| − | <h6>Diego Valadez</h6>
| + | |
| − | <p>Wiki/Dry Lab</p>
| + | |
| − | </td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <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>
| + | |
| − | </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>
| + | |
| − | </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>
| + | |
| − | </tr>
| + | |
| − | </table>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| − | </section> | + | </div> |
| | + | </div> |
| | + | </section> |
| | | | |
| − | <!-- Human Practices -->
| + | <section id="meetings"> |
| − | <section id="HP" style="text-align: center;">
| + | <div class=" collab- container"> |
| − | <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
| + | </div> |
| − | <div style="width: 40%; float: left; padding-right: 20px;">
| + | <div class=" collab- info"> |
| − | <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
| + | </div> |
| − | </div>
| + | </section> |
| − | <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>
| + | |
| | </body> | | </body> |
| − |
| |
| − | </html>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} -->
| |
| − | <html>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − |
| |
| − | <!-- Footer -->
| |
| − | <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>
| |
| − | <p id="footerCopyright" class="text-muted small mb-0">Copyright © 2018</p>
| |
| − | </div>
| |
| − | </footer>
| |
| − |
| |
| − | <!-- Optional JavaScript -->
| |
| − | <!-- jQuery first, then Popper.js, then Bootstrap JS -->
| |
| − | <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://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');
| |
| − | $("#linkContainer_Project").addClass("active");
| |
| − | $("#linkContainer_ProjectChild").addClass("activeChild");
| |
| − | openMenu('#collapseProject', '#b0e0e4');
| |
| − | });
| |
| − | $('#collapseProject').mouseleave(function() {
| |
| − | colorNavbar();
| |
| − | $("#linkContainer_Project").removeClass("active");
| |
| − | $("#linkContainer_ProjectChild").removeClass("activeChild");
| |
| − | 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');
| |
| − | $("#linkContainer_Parts").addClass("active");
| |
| − | $("#linkContainer_PartsChild").addClass("activeChild");
| |
| − | openMenu('#collapseParts', '#bae4e8');
| |
| − | });
| |
| − | $('#collapseParts').mouseleave(function() {
| |
| − | colorNavbar();
| |
| − | $("#linkContainer_Parts").removeClass("active");
| |
| − | $("#linkContainer_PartsChild").removeClass("activeChild");
| |
| − | 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');
| |
| − | $("#linkContainer_People").addClass("active");
| |
| − | $("#linkContainer_PeopleChild").addClass("activeChild");
| |
| − | openMenu('#collapsePeople', '#caeaed');
| |
| − | });
| |
| − | $('#collapsePeople').mouseleave(function() {
| |
| − | colorNavbar();
| |
| − | $("#linkContainer_People").removeClass("active");
| |
| − | $("#linkContainer_PeopleChild").removeClass("activeChild");
| |
| − | 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');
| |
| − | $("#linkContainer_HP").addClass("active");
| |
| − | $("#linkContainer_HPChild").addClass("activeChild");
| |
| − | openMenu('#collapseHP', '#d8f0f2');
| |
| − | });
| |
| − | $('#collapseHP').mouseleave(function() {
| |
| − | colorNavbar();
| |
| − | $("#linkContainer_HP").removeClass("active");
| |
| − | $("#linkContainer_HPChild").removeClass("activeChild");
| |
| − | 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');
| |
| − | $("#linkContainer_Modeling").addClass("active");
| |
| − | $("#linkContainer_ModelingChild").addClass("activeChild");
| |
| − | openMenu('#collapseModeling', '#e7f6f7');
| |
| − | });
| |
| − | $('#collapseModeling').mouseleave(function() {
| |
| − | colorNavbar();
| |
| − | $("#linkContainer_Modeling").removeClass("active");
| |
| − | $("#linkContainer_ModelingChild").removeClass("activeChild");
| |
| − | 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);
| |
| − | } else {
| |
| − | $(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);
| |
| − | } else {
| |
| − | $(collapseName).stop().slideUp(300);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | $(window).scroll(colorNavbar);
| |
| − | $(document).ready(colorNavbar);
| |
| − |
| |
| − | /*------------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/jqueryeasingmin?action=raw&ctype=text/javascript" type="text/javascript"></script>
| |
| − | -->
| |
| − | </body>
| |
| − |
| |
| | </html> | | </html> |
| | + | {{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} |
