|
|
| (60 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | <!----------{{: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">
| + | <!-- Bootstrap required meta tags --> |
| − | <!--bootstrap core css--> | + | <meta charset="utf-8"> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | + | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | + | |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
| + | |
| − | <style>
| + | |
| − | /**************************************** 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;
| + | |
| − | 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;
| + | |
| − | }
| + | |
| − | a {
| + | |
| − | color: #002bb8;
| + | |
| − | }
| + | |
| − | /*************************************************** 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');
| + | |
| − | }
| + | |
| − | html {
| + | |
| − | }
| + | |
| − | ::-webkit-scrollbar {
| + | |
| − | background: #cccccc;
| + | |
| − | }
| + | |
| − | ::-webkit-scrollbar-thumb {
| + | |
| − | background: #103010;
| + | |
| − | }
| + | |
| − | ::-webkit-scrollbar-thumb:hover{
| + | |
| − | background: #155015;
| + | |
| − | }
| + | |
| − | 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);
| + | |
| − | }
| + | |
| − | .full-masthead {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .masthead {
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .header-top {
| + | |
| − | height: 70%;
| + | |
| − | width: 100%;
| + | |
| − | position: relative;
| + | |
| − | background: rgb(248,247,246);
| + | |
| − | }
| + | |
| − | .video-header {
| + | |
| − | right: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .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-background {
| + | |
| − | display: flex;
| + | |
| − | z-index: 1;
| + | |
| − | height: 83%;
| + | |
| − | width: 99%;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | position: absolute;
| + | |
| − | direction: rtl;
| + | |
| − | }
| + | |
| − | .header-background-left, .header-background-center, .header-background-center-right, .header-background-right {
| + | |
| − | width: 18%;
| + | |
| − | }
| + | |
| − | .trail {
| + | |
| − | width: 100%;
| + | |
| − | height: auto;
| + | |
| − | top: 5%;
| + | |
| − | }
| + | |
| − | .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 ****************************************/
| + | <!-- Bootstrap css--> |
| − | .footer { | + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> |
| − | padding-top: 1rem;
| + | |
| − | padding-bottom: 1rem;
| + | |
| − | background: #404040;
| + | |
| − | }
| + | |
| − | .footer p{
| + | |
| − | font-family: "DosisRegular", sans-serif !important;
| + | |
| − | font-size: 3vh;
| + | |
| − | text-align: center !important;
| + | |
| − | }
| + | |
| − | #footerCopyright{
| + | |
| − | text-align: center !important;
| + | |
| − | }
| + | |
| − | .no-padding {
| + | |
| − | padding-right: 0 !important;
| + | |
| − | } | + | |
| − | .social-link.fa {
| + | |
| − | color: #eeeeee;
| + | |
| − | opacity: 0.5;
| + | |
| − | font-size: 6vw;
| + | |
| − | transition: all 0.4s;
| + | |
| − | -webkit-transition: all 0.4s;
| + | |
| − | }
| + | |
| − | .social-link:hover {
| + | |
| − | opacity: 0.9;
| + | |
| − | }
| + | |
| − | .sponsor {
| + | |
| − | height: 10vh;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .sponsor-img {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| | | | |
| − | /***********************************************************************************************************************/ | + | <!-- Fonts --> |
| − | /************************************************* CONTENIDO GENERAL DE LA PAGINA **************************************/ | + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet"> |
| − | /***********************************************************************************************************************/ | + | |
| | + | <style> |
| | | | |
| − | .articulo {
| + | /**********************************************************************************************************************/ |
| − | font-size: 1.7vw;
| + | /******************************************************* SLIDESHOW ***************************************************/ |
| − | }
| + | /**********************************************************************************************************************/ |
| − | .seccion-responsiva {
| + | .slideshow { |
| − | width: 80%;
| + | position: relative; |
| − | background: white;
| + | width: 80%; |
| − | margin: 0.5% auto;
| + | height: 80%; |
| − | padding: 2% 5%;
| + | margin: 0 10%; |
| − | border-radius: 40px;
| + | overflow-y: hidden; |
| − | box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
| + | |
| − | }
| + | |
| − | .resumen > .body-title {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .introduccion > .body-title {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .resumen::after, .introduccion::after {
| + | |
| − | content: "";
| + | |
| − | width: 80%;
| + | |
| − | height: 2px;
| + | |
| − | display:block;
| + | |
| − | right: 0;
| + | |
| − | background-color: #000;
| + | |
| − | padding: 0;
| + | |
| − | margin: 3% auto;
| + | |
| − | }
| + | |
| − | .contenido {
| + | |
| − | }
| + | |
| − | .leyenda {
| + | |
| − | font-size: 1.4vw;
| + | |
| − | }
| + | |
| − | .contenido-con-imagen-derecha, .contenido-con-imagen-izquierda {
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | .imagen-derecha > img, .imagen-izquierda > img {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .contenido-con-imagen-derecha > .imagen-derecha {
| + | |
| − | float: right;
| + | |
| − | margin: 10px;
| + | |
| − | width: 40%;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .contenido-con-imagen-derecha > .texto-izquierda {
| + | |
| − | float: left;
| + | |
| − | width: 51%;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .contenido-con-imagen-izquierda > .imagen-izquierda {
| + | |
| − | float: left;
| + | |
| − | margin: 10px;
| + | |
| − | width: 40%;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .contenido-con-imagen-izquierda > .texto-derecha {
| + | |
| − | float: right;
| + | |
| − | width: 51%;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .imagen-centrada-reducida > img {
| + | |
| − | width: 50%;
| + | |
| − | margin-left: 25%;
| + | |
| − | margin-right: 25%;
| + | |
| − | }
| + | |
| − | .imagen-centrada-reducida > .leyenda {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .imagen-centrada-completa > img {
| + | |
| − | width: 100%;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | }
| + | |
| − | .imagen-centrada-completa > .leyenda {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .conclusion {
| + | |
| − | }
| + | |
| − | .referencias {
| + | |
| − | }
| + | |
| − | /******************************************** RESIZING CONTENTS ON SCREEN SIZE *************************************/ | + | |
| − | @media screen and (max-width: 900px) {
| + | |
| − | .articulo {
| + | |
| − | font-size: 3vh;
| + | |
| − | line-height: 1.2em;
| + | |
| − | }
| + | |
| − | .body-title {
| + | |
| − | font-size: 6vh;
| + | |
| − | }
| + | |
| − | .body-subtitle {
| + | |
| − | font-size: 4vh;
| + | |
| − | }
| + | |
| − | .seccion-responsiva {
| + | |
| − | border-radius: 10px;
| + | |
| − | }
| + | |
| − | .masthead {
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | .header-top {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .header-bottom {
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | .header-title {
| + | |
| − | font-size: 16vw;
| + | |
| − | }
| + | |
| − | .header-subtitle {
| + | |
| − | font-size: 8vw;
| + | |
| − | }
| + | |
| − | .header-background {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .imagen-centrada-reducida > img {
| + | |
| − | width: 100%;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | .leyenda {
| + | |
| − | font-size: 2vh;
| + | |
| − | }
| + | |
| − | .social-link.fa {
| + | |
| − | font-size: 10vw;
| + | |
| − | }
| + | |
| − | .sponsor {
| + | |
| − | height: 10vw;
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | /******************************************************* TOPBAR MENU *********************************************/
| + | .slideshow .right-arrow-pane, .slideshow .left-arrow-pane{ |
| − | #topBarWrapper {
| + | position:absolute; |
| − | display: none;
| + | right:0; |
| | + | top:0; |
| | + | height:100%; |
| | + | width:100px; |
| | + | background: rgba(0,0,0,0.3); |
| | + | -webkit-transition: all 0.3s; |
| | + | -moz-transition: all 0.3s; |
| | + | -ms-transition: all 0.3s; |
| | + | -o-transition: all 0.3s; |
| | + | transition: all 0.3s; |
| | + | z-index:75; |
| | + | cursor:pointer; |
| | } | | } |
| | | | |
| − | .topBar { | + | .slideshow .left-arrow-pane { |
| − | position: fixed;
| + | left:0; |
| − | top: 18px;
| + | width:82px; |
| − | z-index: 99;
| + | right:auto; |
| − | height: 8vh;
| + | |
| − | width: 100%;
| + | |
| | } | | } |
| | | | |
| − | #navbar {
| + | .slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow { |
| − | position: fixed;
| + | position:absolute; |
| − | z-index: 99;
| + | top:50%; |
| − | height: 8vh;
| + | left:30%; |
| − | width: 100%;
| + | transform:translate(-50%, -50%); |
| − | background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%); | + | -webkit-transition: all 0.3s; |
| | + | -moz-transition: all 0.3s; |
| | + | -ms-transition: all 0.3s; |
| | + | -o-transition: all 0.3s; |
| | transition: all 0.3s; | | transition: all 0.3s; |
| − | -webkit-transition: all 0.3s; | + | /*z-index:50;*/ |
| | } | | } |
| | | | |
| − | #navbarLogoWrapper {
| + | .slideshow .left-arrow-pane .arrow { |
| − | position: absolute;
| + | right:30%; |
| − | display: inline-block;
| + | left:auto; |
| − | height: 100%;
| + | transform: translate(50%, -50%); |
| − | -webkit-transition: all 0.3s;
| + | |
| − | transition: all 0.3s;
| + | |
| | } | | } |
| | | | |
| − | #navbarLogoText {
| + | .slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{ |
| − | display: inline-block;
| + | height:50px; |
| − | font-size: 1vw;
| + | width:50px; |
| − | color: white;
| + | transform:rotate(45deg); |
| − | opacity: 0;
| + | border-style: solid; |
| − | -webkit-transition: opacity 0.3s;
| + | border-color: rgba(255, 255, 255, .5); |
| − | transition: opacity 0.3s;
| + | border-width:5px 5px 0 0; |
| | + | -webkit-transition: all 0.3s; |
| | + | -moz-transition: all 0.3s; |
| | + | -ms-transition: all 0.3s; |
| | + | -o-transition: all 0.3s; |
| | + | transition: all 0.3s; |
| | } | | } |
| | | | |
| − | #navbarLogo {
| + | .slideshow .left-arrow-pane .arrow div{ |
| − | height: 80%;
| + | transform:rotate(-135deg); |
| − | margin-top: 5%;
| + | |
| − | margin-bottom: 15%;
| + | |
| − | margin-left: 20px;
| + | |
| − | padding-left: 20px;
| + | |
| − | display: inline-block;
| + | |
| | } | | } |
| | | | |
| − | #navbarGif {
| + | .slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover { |
| − | height: 80%;
| + | background:rgba(0,0,0,.25); |
| − | margin-top: 5%;
| + | |
| − | margin-bottom: 15%;
| + | |
| − | margin-left: 20px;
| + | |
| − | padding-left: 20px;
| + | |
| − | display: none;
| + | |
| | } | | } |
| | | | |
| − | #navbarGif, #navbarLogoWrapper:hover #navbarLogo {
| + | .slideshow .right-arrow-pane:hover .arrow { |
| − | display: none;
| + | left:35%; |
| | } | | } |
| | | | |
| − | #navbarLogo, #navbarLogoWrapper:hover #navbarGif {
| + | .slideshow .left-arrow-pane:hover .arrow { |
| − | display: inline-block;
| + | right:35%; |
| | } | | } |
| | | | |
| − | #navbarLogoWrapper:hover {
| + | .slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{ |
| − | transform: scale(1.4,1.4);
| + | border-color:rgb(255,255,255); |
| − | cursor: pointer;
| + | |
| | } | | } |
| | | | |
| − | #navbarLogoWrapper:hover > #navbarLogoText {
| + | .slideshow .bubbles { |
| − | opacity: 1;
| + | position:absolute; |
| | + | width:100%; |
| | + | height:10%; |
| | + | bottom:0; |
| | + | background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); |
| | + | display:flex; |
| | + | justify-content: center; |
| | + | z-index:50; |
| | } | | } |
| | | | |
| − | #navContainer {
| + | .slideshow .bubbles div { |
| − | z-index: 2;
| + | height:30px; |
| − | height: 8vh;
| + | width:30px; |
| − | width: 80%;
| + | border-radius:5px; |
| − | left: 10%;
| + | border:solid white 3px; |
| − | position: fixed;
| + | margin:0 20px 0 0; |
| − | background-color: rgba(0,0,0,0);
| + | cursor:pointer; |
| − | color: #fff;
| + | |
| | } | | } |
| | | | |
| − | .navbar-linkContainer { | + | .slideshow .bubbles div:last-child { |
| − | height: 100%;
| + | margin-right: 0; |
| − | 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;
| + | .slideshow .bubbles div:hover { |
| − | top: 0;
| + | background-color: white; |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | right: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 1em;
| + | |
| − | margin: auto;
| + | |
| − | font-family: "Norwester", sans-serif;
| + | |
| − | font-weight: 700;
| + | |
| − | font-size: 1.5vw;
| + | |
| − | line-height: 1em;
| + | |
| − | border-right: 1px solid white;
| + | |
| | } | | } |
| | | | |
| − | #linkContainer_ModelingChild {
| + | .slideshow .bubbles div.active { |
| − | border: 0;
| + | background-color:white; |
| | } | | } |
| | | | |
| − | .navbar-linkContainer.active { | + | .slideshow .pauseBtn { |
| − | transform: scale(1.05,1.05);
| + | position:absolute; |
| − | border-radius: 5%;
| + | height:60px; |
| − | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
| + | width:60px; |
| − | background-color: #5da565;
| + | bottom:20px; |
| − | -webkit-transition: all 0.3s;
| + | right:150px; |
| − | transition: all 0.3s;
| + | background:rgba(34,34,34,.75); |
| − | z-index: 9;
| + | border-radius:10px; |
| | + | z-index:60; |
| | } | | } |
| | | | |
| − | .activeChild { | + | .slideshow .pauseBtn .bars { |
| − | border: 0;
| + | visibility: hidden; |
| − | z-index: 10;
| + | position:absolute; |
| | + | top:50%; |
| | + | left:50%; |
| | + | transform:translate(-50%, -50%); |
| | + | width:30px; |
| | + | height:35px; |
| | } | | } |
| | | | |
| − | .collapsed-menu { | + | .slideshow .pauseBtn .bars > div{ |
| − | top: calc(8vh + 18px);
| + | float:right; |
| − | position: fixed;
| + | width:10px; |
| − | z-index: 1;
| + | height:100%; |
| − | width: 100%;
| + | background:rgba(255,255,255,.75); |
| − | background-color: aquamarine;
| + | |
| | } | | } |
| | | | |
| − | .container-collapse { | + | .slideshow .pauseBtn .bars > div:first-child { |
| − | padding: 0 10px 30px 10px;
| + | float:left; |
| − | width: 80%;
| + | |
| − | margin-left: 10%;
| + | |
| | } | | } |
| | | | |
| − | .height-support { | + | .slideshow .pauseBtn:hover { |
| − | height: 20px;
| + | background: rgba(34,34,34,1); |
| − | width: 100%;
| + | cursor: pointer; |
| | } | | } |
| | | | |
| − | .mask { | + | .slideshow .pauseBtn:hover .bars > div { |
| − | height: 8vh;
| + | background: rgba(255,255,255,1); |
| − | width:100%;
| + | |
| − | background-color: rgba(0,0,0,0);
| + | |
| − | z-index: 0;
| + | |
| | } | | } |
| | | | |
| − | .navbarList { | + | .slideshow .pauseBtn .tri { |
| − | float: left;
| + | visibility: hidden; |
| − | height: 100%;
| + | position: absolute; |
| − | width: 20%;
| + | top:50%; |
| | + | left:50%; |
| | + | transform: translate(-50%, -50%); |
| | } | | } |
| | | | |
| − | .navbarItem { | + | .slideshow .pauseBtn .tri > div { |
| − | height: 100%;
| + | width: 0; |
| | + | height: 0; |
| | + | border-top: 18px solid transparent; |
| | + | border-left-style: solid; |
| | + | border-left-width: 30px; |
| | + | border-left-color:rgba(255,255,255,.75); |
| | + | border-bottom: 18px solid transparent; |
| | } | | } |
| | | | |
| − | .navbarItemHeader { | + | .slideshow .pauseBtn:hover .tri > div{ |
| − | display: inline-block;
| + | border-left-color:rgba(255,255,255,1); |
| − | 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 { | + | .slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active { |
| − | display: inline-block;
| + | visibility: visible; |
| − | position: relative;
| + | |
| − | color: black;
| + | |
| − | font-size: 1.5vw;
| + | |
| − | line-height: 1.5em;
| + | |
| − | text-decoration: none;
| + | |
| − | width: auto;
| + | |
| | } | | } |
| | | | |
| − | a.navbarItemHeader::after, a.navbarItemContent::after {
| + | .slideshow .content { |
| − | content: "";
| + | position:absolute; |
| − | position: absolute;
| + | top:0; |
| − | width: 0;
| + | left:0; |
| − | height: 2px;
| + | width:100%; |
| − | display:block;
| + | height:100%; |
| − | margin-top: 5px;
| + | overflow: hidden; |
| − | 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 {
| + | .slideshow .content .slide { |
| − | color: black;
| + | visibility:hidden; |
| − | text-decoration: none;
| + | position:absolute; |
| | + | top:0; |
| | + | left:0; |
| | + | height:100%; |
| | + | width:100%; |
| | + | overflow-y: hidden; |
| | + | -webkit-transition: left 1s; |
| | + | -moz-transition: left 1s; |
| | + | -ms-transition: left 1s; |
| | + | -o-transition: left 1s; |
| | + | transition: left 1s; |
| | } | | } |
| − | a.navbarItemHeader:visited, a.navbarItemContent:visited {
| + | .slideshow .content .slide video, .slideshow .content .slide img { |
| − | color: black; | + | width: 100%; |
| − | text-decoration: none; | + | height: 100%; |
| | } | | } |
| − | a.navbarItemHeader:active, a.navbarItemContent:active {
| + | |
| − | color: black;
| + | .slideshow .content .slide:first-child { |
| − | text-decoration: none;
| + | visibility:visible; |
| − | }
| + | left:0; |
| − | a.navbarItemHeader:hover, a.navbarItemContent:hover {
| + | z-index: 1; |
| − | color: black;
| + | width: 100%; |
| − | text-decoration: none;
| + | |
| | } | | } |
| | | | |
| − | a.navbarItemHeader:hover::after, a.navbarItemContent:hover::after {
| + | .slideshow .content .slide > img:first-child { |
| − | width: 100%;
| + | height:auto; |
| − | left: 0;
| + | width: 100%; |
| − | background: #000;
| + | overflow: hidden; |
| | } | | } |
| | | | |
| − | .clearBoth { | + | .slideshow .content .slide.active { |
| − | clear: both;
| + | left:0 !important; |
| − | }
| + | |
| − | /********************************************************* TOPBAR MENU ENDS *********************************************/
| + | |
| − | /***************************************************** SIDEBAR MENU **************************************************/
| + | |
| − | #sidebar {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | #sidebar-wrapper {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | z-index: 2;
| + | |
| − | right: 0;
| + | |
| − | width: 283px;
| + | |
| − | height: 100%;
| + | |
| − | -webkit-transition: all 0.4s ease 0s;
| + | |
| − | -moz-transition: all 0.4s ease 0s;
| + | |
| − | -ms-transition: all 0.4s ease 0s;
| + | |
| − | -o-transition: all 0.4s ease 0s;
| + | |
| − | transition: all 0.4s ease 0s;
| + | |
| − | transform: translateX(300px);
| + | |
| − | background: #5da565;
| + | |
| − | }
| + | |
| − | .sidebar-nav {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | width: 300px;
| + | |
| − | margin: 0;
| + | |
| − | padding: 10px;
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | .sub-sidebar-nav {
| + | |
| − | width:inherit;
| + | |
| − | list-style-type: none;
| + | |
| − | margin: 0;
| + | |
| − | padding: 10px;
| + | |
| − | position:static;
| + | |
| − | }
| + | |
| − | .sidebar-nav li.sidebar-nav-item a {
| + | |
| − | display: block;
| + | |
| − | text-decoration: none;
| + | |
| − | color: #fff;
| + | |
| − | padding: 10px;
| + | |
| − | }
| + | |
| − | .sidebar-nav-subitem {
| + | |
| − | list-style-type: none;
| + | |
| − | list-style: none;
| + | |
| − | text-decoration: none;
| + | |
| − | margin: 0;
| + | |
| − | padding: 10px;
| + | |
| − | color: #fff;
| + | |
| − | background: #2f6361;
| + | |
| − | padding: 0px;
| + | |
| − | }
| + | |
| − | .sidebar-nav li a:hover {
| + | |
| − | text-decoration: none;
| + | |
| − | color: #000;
| + | |
| − | background: #2a8481;
| + | |
| − | }
| + | |
| − | .sidebar-nav li a:active,
| + | |
| − | .sidebar-nav li a:focus {
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | .sidebar-nav > .sidebar-brand {
| + | |
| − | font-size: 1.2rem;
| + | |
| − | background: rgba(52, 58, 64, 0.1);
| + | |
| − | height: 80px;
| + | |
| − | line-height: 50px;
| + | |
| − | padding-top: 15px;
| + | |
| − | padding-bottom: 15px;
| + | |
| − | padding-left: 15px;
| + | |
| − | position:relative;
| + | |
| − | left: -32;
| + | |
| − | }
| + | |
| − | .sidebar-nav > .sidebar-brand a {
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | .sidebar-nav > .sidebar-brand a:hover {
| + | |
| − | color: #fff;
| + | |
| − | background: none;
| + | |
| − | }
| + | |
| − | .brand-hider {
| + | |
| − | width: 290px;
| + | |
| − | height: 78px;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | background: #2f6361;
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | top: 1px;
| + | |
| − | -webkit-transition: all 1s ease 0s;
| + | |
| − | -moz-transition: all 1s ease 0s;
| + | |
| − | -ms-transition: all 1s ease 0s;
| + | |
| − | -o-transition: all 1s ease 0s;
| + | |
| − | transition: all 1s ease 0s;
| + | |
| − | }
| + | |
| − | .brand-hider.active {
| + | |
| − | width: 10px;
| + | |
| − | right: 10px;
| + | |
| − | -webkit-transition: all 1s ease 0s;
| + | |
| − | -moz-transition: all 1s ease 0s;
| + | |
| − | -ms-transition: all 1s ease 0s;
| + | |
| − | -o-transition: all 1s ease 0s;
| + | |
| − | transition: all 1s ease 0s;
| + | |
| − | }
| + | |
| − | #sidebar-wrapper.active{
| + | |
| − | right: 300px;
| + | |
| − | -webkit-transition: all 0.4s ease 0s;
| + | |
| − | -moz-transition: all 0.4s ease 0s;
| + | |
| − | -ms-transition: all 0.4s ease 0s;
| + | |
| − | -o-transition: all 0.4s ease 0s;
| + | |
| − | transition: all 0.4s ease 0s;
| + | |
| − | }
| + | |
| − | .menu-toggle {
| + | |
| − | position: fixed;
| + | |
| − | right: 10px;
| + | |
| − | top: 30px;
| + | |
| − | width: 50px;
| + | |
| − | height: 50px;
| + | |
| − | text-align: center;
| + | |
| − | color: #fff !important;
| + | |
| − | background: rgba(52, 58, 64, 0.5);
| + | |
| − | line-height: 50px;
| + | |
| − | z-index: 999;
| + | |
| − | -webkit-transition: all 0.4s ease 0s;
| + | |
| − | -moz-transition: all 0.4s ease 0s;
| + | |
| − | -ms-transition: all 0.4s ease 0s;
| + | |
| − | -o-transition: all 0.4s ease 0s;
| + | |
| − | transition: all 0.4s ease 0s;
| + | |
| − | }
| + | |
| − | .menu-toggle:focus, .menu-toggle:hover {
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | .menu-toggle:hover {
| + | |
| − | background: #343a40;
| + | |
| − | }
| + | |
| − | /********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/
| + | |
| − | @media screen and (min-width: 900px) {
| + | |
| − | #topBarWrapper {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | #sidebar {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | #scroll-to-top-btn {
| + | |
| − | display: none !important;
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | /********************************************************Loader**************************************************/
| + | .slideshow .content .slide.left { |
| − | #loader-wrapper {
| + | left:-100vw !important; |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | z-index: 1000;
| + | |
| | } | | } |
| | | | |
| − | #loader {
| + | .slideshow .content .slide.right { |
| − | position: relative;
| + | left:100vw !important; |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | z-index: 1001;
| + | |
| | } | | } |
| | | | |
| − | #loaderMessage {
| + | .splash .slideshow .title { |
| − | position: absolute;
| + | top:65%; |
| − | width: 50%;
| + | left:200px; |
| − | height: 10%;
| + | |
| − | margin: 85% 25% 5% 25%;
| + | |
| − | font-size: 10%;
| + | |
| | } | | } |
| | | | |
| − | #videoLoader { | + | #HQ_page .slideshow .title p { |
| − | position:absolute;
| + | font-size:7em; |
| − | width: 50%;
| + | |
| − | margin: 15% 25%;
| + | |
| | } | | } |
| | | | |
| − | #loader-wrapper .loader-section {
| + | .notransition { |
| − | position: fixed;
| + | -webkit-transition: none !important; |
| − | width: 100%;
| + | -moz-transition: none !important; |
| − | height: 51%;
| + | -ms-transition: none !important; |
| − | background: rgb(214,230,223);
| + | -o-transition: none !important; |
| − | z-index: 1000;
| + | transition: none !important; |
| − | -webkit-transform: translateY(0);
| + | } |
| − | -ms-transform: translateY(0);
| + | |
| − | transform: translateY(0);
| + | |
| − | } | + | |
| − | #loader-wrapper .loader-section.section-top {
| + | |
| − | top: 0;
| + | |
| − | } | + | |
| − | #loader-wrapper .loader-section.section-bottom {
| + | |
| − | bottom: 0;
| + | |
| − | }
| + | |
| − | /* Loaded */
| + | |
| − | .loaded #loader-wrapper .loader-section.section-top {
| + | |
| − | -webkit-transform: translateY(-100%);
| + | |
| − | -ms-transform: translateY(-100%);
| + | |
| − | transform: translateY(-100%);
| + | |
| − | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| + | |
| − | -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| + | |
| − | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| + | |
| − | } | + | |
| − | .loaded #loader-wrapper .loader-section.section-bottom {
| + | |
| − | -webkit-transform: translateY(100%);
| + | |
| − | -ms-transform: translateY(100%);
| + | |
| − | transform: translateY(100%);
| + | |
| − | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| + | |
| − | -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| + | |
| − | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| + | |
| − | } | + | |
| − | .loaded #loader {
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: all 0.3s ease-out;
| + | |
| − | -o-transition: all 0.3s ease-out;
| + | |
| − | transition: all 0.3s ease-out;
| + | |
| − | }
| + | |
| − | .loaded #loader-wrapper {
| + | |
| − | visibility: hidden;
| + | |
| − | }
| + | |
| − | /* JavaScript Turned Off */
| + | |
| − | .no-js #loader-wrapper {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| | /**********************************************************************************************************************/ | | /**********************************************************************************************************************/ |
| − | /********************************************************* VERTICAL NAVBAR ********************************************/
| |
| | /**********************************************************************************************************************/ | | /**********************************************************************************************************************/ |
| − | .vertical-nav {
| + | /******************************************************* SLIDESHOW *****************************************************/ |
| − | list-style: none;
| + | |
| − | }
| + | |
| | | | |
| − | /* --------------------------------
| |
| − | Primary style
| |
| − | -------------------------------- */
| |
| − | *, *::after, *::before {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| | | | |
| − | a {
| + | #scroll-section { |
| − | color: yellow; | + | display: contents; |
| − | text-decoration: none;
| + | |
| | } | | } |
| − | | + | .header-main-page { |
| − | .cd-image-replace { | + | width: 100%; |
| − | /* replace text with image */ | + | height: 100%; |
| − | display: inline-block;
| + | background: rgb(157,217,223); |
| − | overflow: hidden; | + | |
| − | text-indent: 100%;
| + | |
| − | white-space: nowrap; | + | |
| − | color: transparent;
| + | |
| | } | | } |
| | | | |
| − | /* --------------------------------
| + | #video-main-page { |
| − | Navigation trigger - visible on small devices only
| + | width: 100%; |
| − | -------------------------------- */
| + | background: #9dd8dd; |
| − | .cd-nav-trigger {
| + | transition: all 0.6s; |
| − | display: block; | + | |
| | position: fixed; | | position: fixed; |
| − | z-index: 102; | + | z-index: 200; |
| − | bottom: 30px; | + | } |
| − | right: 5%; | + | #skip-btn { |
| − | height: 44px; | + | z-index: 201; |
| − | width: 44px; | + | background: rgba(0,0,0,0.3); |
| − | border-radius: 0.25em; | + | color: whitesmoke; |
| − | background: rgba(234, 242, 227, 0.9); | + | font-size: 8vh; |
| − | /* reset button style */
| + | width: 15vw; |
| | + | height: 9vh; |
| | + | line-height: 1em; |
| | + | text-align: center; |
| | + | position: fixed; |
| | + | border-radius: 10px; |
| | + | bottom: 1%; |
| | + | right: 1%; |
| | + | transition: all 0.2s; |
| | + | -webkit-transition: all 0.2s; |
| | + | } |
| | + | |
| | + | #skip-btn:hover { |
| | cursor: pointer; | | cursor: pointer; |
| − | -webkit-appearance: none; | + | background: rgba(0,0,0,0.5); |
| − | -moz-appearance: none;
| + | |
| − | -ms-appearance: none;
| + | |
| − | -o-appearance: none;
| + | |
| − | appearance: none;
| + | |
| − | border: none;
| + | |
| − | outline: none;
| + | |
| | } | | } |
| − | .cd-nav-trigger span {
| + | #bacteria-nadando { |
| − | /* central dot */ | + | width: 30vw; |
| − | position: absolute;
| + | height: 30vw; |
| − | height: 4px; | + | left: 35vw; |
| − | width: 4px; | + | position: fixed; |
| − | background-color: #3a2c41; | + | z-index: 1; |
| − | border-radius: 10%; | + | background: url(https://static.igem.org/mediawiki/2018/7/74/T--Tec-Monterrey--Frame_1_interactive_gif.png); |
| − | left: 50%; | + | background-size: cover; |
| − | top: 50%;
| + | |
| − | bottom: auto;
| + | |
| − | right: auto;
| + | |
| − | -webkit-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -moz-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -ms-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -o-transform: translateX(-50%) translateY(-50%); | + | |
| − | transform: translateX(-50%) translateY(-50%);
| + | |
| | } | | } |
| − | .cd-nav-trigger span::before, .cd-nav-trigger span::after {
| + | |
| − | /* bottom and top dots */ | + | #hiding-block { |
| − | content: '';
| + | background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%); |
| − | position: absolute;
| + | z-index: 3; |
| − | left: 0;
| + | |
| − | height: 100%; | + | |
| | width: 100%; | | width: 100%; |
| − | background-color: #3a2c41; | + | height: 100vh; |
| − | border-radius: inherit; | + | float: left; |
| | + | position: sticky; |
| | } | | } |
| − | .cd-nav-trigger span::before {
| + | |
| − | top: -9px; | + | #fixed-title { |
| | + | width: 50%; |
| | + | height: 35vh; |
| | + | font-size: 13vw; |
| | + | font-weight: 700; |
| | + | font-family: "DosisRegular", sans-serif; |
| | + | line-height: 1.2em; |
| | + | text-align: center; |
| | + | position: absolute; |
| | + | left: 25%; |
| | + | top: 25%; |
| | + | z-index: 2; |
| | + | color: rgba(246,246,246,0.9); |
| | } | | } |
| − | .cd-nav-trigger span::after {
| + | |
| − | bottom: -9px; | + | #fixed-subtitle { |
| | + | width: 100%; |
| | + | font-size: 6vw; |
| | + | font-weight: 500; |
| | + | font-family: "Norwester", monospace; |
| | + | line-height: 1.2em; |
| | + | text-align: center; |
| | + | z-index: 2; |
| | + | color: rgba(47,99,97,0.6); |
| | } | | } |
| − | @media only screen and (min-width: 900px) {
| + | |
| − | .cd-nav-trigger {
| + | .topBarWrapper { |
| − | display: none;
| + | display: contents !important; |
| − | }
| + | |
| | } | | } |
| | | | |
| − | /* --------------------------------
| + | #background-river { |
| − | Vertical navigation
| + | height: auto; |
| − | -------------------------------- */
| + | background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png); |
| − | .cd-vertical-nav {
| + | width: 100%; |
| − | position: fixed; | + | background-position-x: center; |
| − | z-index: 100;
| + | background-size: cover; |
| − | right: 5%;
| + | background-repeat-y: no-repeat; |
| − | bottom: 30px;
| + | |
| − | width: 90%;
| + | |
| − | max-width: 400px;
| + | |
| − | max-height: 90%;
| + | |
| − | overflow-y: auto;
| + | |
| − | -webkit-transform: scale(0); | + | |
| − | -moz-transform: scale(0);
| + | |
| − | -ms-transform: scale(0);
| + | |
| − | -o-transform: scale(0);
| + | |
| − | transform: scale(0); | + | |
| − | -webkit-transform-origin: right bottom; | + | |
| − | -moz-transform-origin: right bottom; | + | |
| − | -ms-transform-origin: right bottom; | + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | transform-origin: right bottom;
| + | |
| − | -webkit-transition: all 0.2s;
| + | |
| − | -moz-transition: all 0.2s;
| + | |
| − | transition: all 0.2s;
| + | |
| − | border-radius: 0.25em;
| + | |
| − | background-color: rgba(234, 242, 227, 0.9);
| + | |
| | } | | } |
| − | .cd-vertical-nav a { | + | |
| − | display: block; | + | .main-info-container-left { |
| − | padding: 1em; | + | width: 30%; |
| | + | height: auto; |
| | + | margin-top: 30%; |
| | + | margin-left: 2.5vw; |
| | + | float: left; |
| | } | | } |
| − | .cd-vertical-nav a.active { | + | |
| − | color: white; | + | .main-info-container-right { |
| | + | width: 30%; |
| | + | height: auto; |
| | + | margin-top: 50%; |
| | + | margin-right: 2.5vw; |
| | + | float: right; |
| | } | | } |
| − | .cd-vertical-nav.open { | + | |
| − | -webkit-transform: scale(1); | + | .main-info { |
| − | -moz-transform: scale(1); | + | width: 100%; |
| − | -ms-transform: scale(1); | + | height: 30vw; |
| − | -o-transform: scale(1); | + | background: white; |
| − | transform: scale(1);
| + | margin-top: 40vh; |
| − | -webkit-overflow-scrolling: touch;
| + | |
| | } | | } |
| − | .cd-vertical-nav.open + .cd-nav-trigger {
| + | |
| − | background-color: transparent;
| + | @media screen and (max-width: 900px) { |
| − | }
| + | .main-info-container-left { |
| − | .cd-vertical-nav.open + .cd-nav-trigger span {
| + | width: 40%; |
| − | background-color: rgba(58, 44, 65, 0);
| + | |
| − | }
| + | |
| − | .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {
| + | |
| − | /* transform dots in 'X' icon */
| + | |
| − | height: 3px;
| + | |
| − | width: 20px;
| + | |
| − | border-radius: 0;
| + | |
| − | left: -8px;
| + | |
| − | }
| + | |
| − | .cd-vertical-nav.open + .cd-nav-trigger span::before {
| + | |
| − | -webkit-transform: rotate(45deg);
| + | |
| − | -moz-transform: rotate(45deg);
| + | |
| − | -ms-transform: rotate(45deg);
| + | |
| − | -o-transform: rotate(45deg);
| + | |
| − | transform: rotate(45deg);
| + | |
| − | top: 1px;
| + | |
| − | }
| + | |
| − | .cd-vertical-nav.open + .cd-nav-trigger span::after {
| + | |
| − | -webkit-transform: rotate(135deg);
| + | |
| − | -moz-transform: rotate(135deg);
| + | |
| − | -ms-transform: rotate(135deg);
| + | |
| − | -o-transform: rotate(135deg);
| + | |
| − | transform: rotate(135deg);
| + | |
| − | bottom: 0;
| + | |
| − | }
| + | |
| − | @media only screen and (min-width: 900px) { | + | |
| − | .cd-vertical-nav { | + | |
| − | /* reset style */
| + | |
| − | right: 0;
| + | |
| − | top: 0;
| + | |
| − | bottom: auto;
| + | |
| − | height: 100vh;
| + | |
| − | width: 90px; | + | |
| − | max-width: none;
| + | |
| − | max-height: none;
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | -ms-transform: scale(1);
| + | |
| − | -o-transform: scale(1);
| + | |
| − | transform: scale(1);
| + | |
| − | background-color: transparent;
| + | |
| − | /* vertically align its content*/
| + | |
| − | display: table;
| + | |
| | } | | } |
| − |
| + | .main-info-container-right { |
| − |
| + | width: 40%; |
| − |
| + | |
| − | /* navbar background */
| + | |
| − | .cd-vertical-nav::before { | + | |
| − | /* this is the navigation background */
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%; | + | |
| − | height: 100%;
| + | |
| − | background: #397471;
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | -moz-transform: translateX(100%);
| + | |
| − | -ms-transform: translateX(100%);
| + | |
| − | -o-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | -webkit-transition: -webkit-transform 0.4s;
| + | |
| − | -moz-transition: -moz-transform 0.4s;
| + | |
| − | transition: transform 0.4s;
| + | |
| | } | | } |
| − | .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before { | + | #bacteria-nadando { |
| − | -webkit-transform: translateX(0); | + | display: none; |
| − | -moz-transform: translateX(0);
| + | |
| − | -ms-transform: translateX(0);
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | transform: translateX(0);
| + | |
| | } | | } |
| − | .cd-vertical-nav ul { | + | #hiding-block { |
| − | /* vertically align <ul> inside <nav>*/
| + | display: none; |
| − | display: table-cell; | + | |
| − | vertical-align: middle;
| + | |
| − | text-align: center;
| + | |
| | } | | } |
| − | .cd-vertical-nav a { | + | #background-river { |
| − | position: relative; | + | height: 400vh; |
| − | padding: 2em 0 0;
| + | |
| − | margin: 0.5em auto;
| + | |
| − | border-bottom: none;
| + | |
| − | font-size: 1rem;
| + | |
| − | color: #FFF;
| + | |
| − | line-height: 1em;
| + | |
| | } | | } |
| − | .cd-vertical-nav a.active { | + | #video-main-page { |
| − | color: #FFF; | + | display: none; |
| | } | | } |
| − | .cd-vertical-nav a::before, .cd-vertical-nav a::after { | + | #skip-btn { |
| − | /* used to create the filled circle and the background icon */
| + | display: none; |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | /* Force Hardware Acceleration */
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | backface-visibility: hidden;
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | -moz-transform: translateZ(0);
| + | |
| − | -ms-transform: translateZ(0);
| + | |
| − | -o-transform: translateZ(0);
| + | |
| − | transform: translateZ(0);
| + | |
| − | }
| + | |
| − | .cd-vertical-nav a::before {
| + | |
| − | /* filled circle */
| + | |
| − | top: 0;
| + | |
| − | height: 32px;
| + | |
| − | width: 32px;
| + | |
| − | border-radius: 50%;
| + | |
| − | background: #5DA565;
| + | |
| − | -webkit-transform: translateX(-50%) scale(0.1);
| + | |
| − | -moz-transform: translateX(-50%) scale(0.1);
| + | |
| − | -ms-transform: translateX(-50%) scale(0.1);
| + | |
| − | -o-transform: translateX(-50%) scale(0.1);
| + | |
| − | transform: translateX(-50%) scale(0.1);
| + | |
| − | -webkit-transition: -webkit-transform 0.4s, background-color 0.2s;
| + | |
| − | -moz-transition: -moz-transform 0.4s, background-color 0.2s;
| + | |
| − | transition: transform 0.4s, background-color 0.2s;
| + | |
| − | }
| + | |
| − | .cd-vertical-nav a::after {
| + | |
| − | /* icon */
| + | |
| − | opacity: 0;
| + | |
| − | top: 8px;
| + | |
| − | height: 16px;
| + | |
| − | width: 16px;
| + | |
| − | background: url(../img/cd-nav-icons.svg) no-repeat;
| + | |
| − | -webkit-transform: translateX(-50%) scale(0);
| + | |
| − | -moz-transform: translateX(-50%) scale(0);
| + | |
| − | -ms-transform: translateX(-50%) scale(0);
| + | |
| − | -o-transform: translateX(-50%) scale(0);
| + | |
| − | transform: translateX(-50%) scale(0);
| + | |
| − | -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s;
| + | |
| − | -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s;
| + | |
| − | transition: transform 0.4s 0s, opacity 0.1s 0.3s;
| + | |
| − | }
| + | |
| − | .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before {
| + | |
| − | background-color: #70C27C;
| + | |
| − | }
| + | |
| − | .cd-vertical-nav .label {
| + | |
| − | display: block; | + | |
| − | /* Force Hardware Acceleration */
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | backface-visibility: hidden;
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | -moz-transform: translateZ(0);
| + | |
| − | -ms-transform: translateZ(0);
| + | |
| − | -o-transform: translateZ(0);
| + | |
| − | transform: translateZ(0);
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | -moz-transform: translateX(100%);
| + | |
| − | -ms-transform: translateX(100%);
| + | |
| − | -o-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | -webkit-transition: all 0.4s;
| + | |
| − | -moz-transition: all 0.4s;
| + | |
| − | transition: all 0.4s;
| + | |
| − | line-height: 1em;
| + | |
| − | }
| + | |
| − | .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after {
| + | |
| − | -webkit-transform: translateX(-50%) scale(1);
| + | |
| − | -moz-transform: translateX(-50%) scale(1);
| + | |
| − | -ms-transform: translateX(-50%) scale(1);
| + | |
| − | -o-transform: translateX(-50%) scale(1);
| + | |
| − | transform: translateX(-50%) scale(1);
| + | |
| − | /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */
| + | |
| − | -moz-transform: translateX(-50%) scale(1) rotate(0.02deg);
| + | |
| − | }
| + | |
| − | .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transition: -webkit-transform 0.4s, opacity 0s;
| + | |
| − | -moz-transition: -moz-transform 0.4s, opacity 0s;
| + | |
| − | transition: transform 0.4s, opacity 0s;
| + | |
| − | }
| + | |
| − | .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label {
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | -moz-transform: translateX(0);
| + | |
| − | -ms-transform: translateX(0);
| + | |
| − | -o-transform: translateX(0);
| + | |
| − | transform: translateX(0);
| + | |
| | } | | } |
| | } | | } |
| − |
| |
| − | /* --------------------------------
| |
| − | no-js
| |
| − | -------------------------------- */
| |
| − | .no-js .cd-nav-trigger {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .no-js .cd-vertical-nav {
| |
| − | position: static;
| |
| − | height: auto;
| |
| − | width: 100%;
| |
| − | max-width: none;
| |
| − | background-color: #2A8481;
| |
| − | border-radius: 0;
| |
| − | -webkit-transform: scale(1);
| |
| − | -moz-transform: scale(1);
| |
| − | -ms-transform: scale(1);
| |
| − | -o-transform: scale(1);
| |
| − | transform: scale(1);
| |
| − | }
| |
| − | .no-js .cd-vertical-nav::before {
| |
| − | display: none;
| |
| − | }
| |
| − | .no-js .cd-vertical-nav ul::after {
| |
| − | clear: both;
| |
| − | content: "";
| |
| − | display: table;
| |
| − | }
| |
| − | .no-js .cd-vertical-nav li {
| |
| − | display: inline-block;
| |
| − | float: left;
| |
| − | }
| |
| − | .no-js .cd-vertical-nav a {
| |
| − | padding: 0 1em;
| |
| − | margin: 1.5em 1em;
| |
| − | color: #eaf2e3;
| |
| − | }
| |
| − | .no-js .cd-vertical-nav a.active {
| |
| − | color: #c0a672;
| |
| − | }
| |
| − | .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {
| |
| − | display: none;
| |
| − | }
| |
| − | .no-js .cd-vertical-nav .label {
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − |
| |
| − | /********************************************************* TERMINA VERTICAL NAVBAR ***********************************/
| |
| − |
| |
| | </style> | | </style> |
| | </head> | | </head> |
| | + | |
| | <body> | | <body> |
| | | | |
| − | <!-- Navigation Bars-->
| + | <div id="scroll-section"> |
| − | <!------------------------------------------------------- SIDEBAR MENU STARTS ------------------------------------------>
| + | <header id="page-top" class="header-main-page"> |
| − | <div id="sidebar">
| + | </header> |
| − | <a class="menu-toggle rounded" id="menuToggle" href="#"> | + | |
| − | <i class="fa fa-bars" style="font-size: 20px;"></i>
| + | <div id="background-river"> |
| − | </a>
| + | <div class="main-info-container-left"> |
| − | <nav id="sidebar-wrapper">
| + | <div class="main-info"> |
| − | <ul class="sidebar-nav">
| + | |
| − | <li class="sidebar-brand">
| + | |
| − | <div class="brand-hider"></div> | + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey">Tec de Monterrey</a>
| + | |
| − | </li>
| + | |
| − | <li class="sidebar-nav-item" id="menuProject">
| + | |
| − | <a>Project</a>
| + | |
| − | <ul class="sub-sidebar-nav">
| + | |
| − | <li class="sidebar-nav-subitem" id="subProject">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey">Overview</a>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey#description">Description</a>
| + | |
| − | <a href="#">Background</a>
| + | |
| − | <a href="#">Design</a>
| + | |
| − | <a href="#">Results</a>
| + | |
| − | <a href="#">Safety</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li> | + | |
| − | <li class="sidebar-nav-item" id="menuParts">
| + | |
| − | <a>Parts</a>
| + | |
| − | <ul class="sub-sidebar-nav">
| + | |
| − | <li class="sidebar-nav-subitem" id="subParts">
| + | |
| − | <a href="">Overview</a>
| + | |
| − | <a href="">Basic parts</a>
| + | |
| − | <a href="">Composite Parts</a>
| + | |
| − | <a href="">Parts Collection</a>
| + | |
| − | <a href="">Improved parts</a>
| + | |
| − | <a href="">Parts list</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li> | + | |
| − | <li class="sidebar-nav-item" id="menuPeople">
| + | |
| − | <a>People</a>
| + | |
| − | <ul class="sub-sidebar-nav">
| + | |
| − | <li class="sidebar-nav-subitem" id="subPeople">
| + | |
| − | <a href="#team">Overview</a>
| + | |
| − | <a href="#team">Team</a>
| + | |
| − | <a href="#">Attributions</a>
| + | |
| − | <a href="#">Collaborations</a>
| + | |
| − | <a href="#">Sponsors</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li> | + | |
| − | <li class="sidebar-nav-item" id="menuHP">
| + | |
| − | <a>Human Practices</a>
| + | |
| − | <ul class="sub-sidebar-nav">
| + | |
| − | <li class="sidebar-nav-subitem" id="subHP">
| + | |
| − | <a href="#HP">Overview</a>
| + | |
| − | <a href="#">Silver HP</a>
| + | |
| − | <a href="#">Integrated HP</a>
| + | |
| − | <a href="#">Education</a>
| + | |
| − | <a href="#">Public Engagement</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="sidebar-nav-item" id="menuModeling">
| + | |
| − | <a>Modeling</a>
| + | |
| − | <ul class="sub-sidebar-nav">
| + | |
| − | <li class="sidebar-nav-subitem" id="subModeling">
| + | |
| − | <a href="#">Overview</a>
| + | |
| − | <a href="#">Interlab</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − | </div>
| + | |
| − | <!--------------------------------------------------------- SIDEBAR MENU ENDS -------------------------------------------->
| + | |
| − | <!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
| + | |
| − | <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="#">
| + | |
| − | <div class=" navbar- linkContainer" id="linkContainer_Project"> | + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_Parts">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_People">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_HP">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#">
| + | |
| − | <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 collapsed-menu" id="collapseProject">
| + | |
| − | <div class="container-collapse"> | + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey#description"
| + | |
| − | 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 href="https://2018.igem.org/Team:Tec-Monterrey/InterLab" class="navbarItemHeader">InterLab</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#procedure-interlab" class="navbarItemContent">Procedure</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#results-interlab" class="navbarItemContent">Results</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#conclusion-interlab" class="navbarItemContent">Conclusion</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 href="https://2018.igem.org/Team:Tec-Monterrey/Demonstrate" class="navbarItemHeader">Demonstrate</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Introduction</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth"/>
| + | |
| | </div> | | </div> |
| − | </div>
| + | <div class="main-info"> |
| − | <!-- Parts collapsed -->
| + | |
| − | <div class="collapse collapsed-menu" id="collapseParts">
| + | |
| − | <div class="container-collapse"> | + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="" class="navbarItemHeader">Basic Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Best Basic Part</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="" class="navbarItemHeader">Composite Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Best Composite Part</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="" class="navbarItemHeader">Parts Collection</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Best Parts</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve" class="navbarItemHeader">Improved Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Part I</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Part II</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Part III</a>
| + | |
| − | <br>
| + | |
| − | <a href="" class="navbarItemContent">Part IV</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="" class="navbarItemHeader">Parts List</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth"/>
| + | |
| | </div> | | </div> |
| − | </div>
| + | <div class="main-info"> |
| − | <!-- People collapsed -->
| + | |
| − | <div class="collapse collapsed-menu" id="collapsePeople">
| + | |
| − | <div class="container-collapse"> | + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team" class="navbarItemHeader">Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#page-top" class="navbarItemContent">Header</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#teamMembers" class="navbarItemContent">Team Members</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi1" class="navbarItemContent">PI 1</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi2" class="navbarItemContent">PI 2</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#instructor" class="navbarItemContent">Instructor</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#advisors" class="navbarItemContent">Advisors</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#collaborators" class="navbarItemContent">Collaborators</a>
| + | |
| − | <br>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations" 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="https://2018.igem.org/Team:Tec-Monterrey/Attributions" class="navbarItemHeader">Attributions</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#tec-monterrey-work" class="navbarItemContent">What we have done</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#general-support" class="navbarItemContent">General Support</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#HP-support" class="navbarItemContent">HP Support</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#design-wiki" class="navbarItemContent">Design/Wiki</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#fund-raising" class="navbarItemContent">Fund raising</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#thanks" class="navbarItemContent">Thanks</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> |
| − | </div>
| + | <div class="main-info"> |
| − | <!-- HP collapsed -->
| + | |
| − | <div class="collapse collapsed-menu" id="collapseHP">
| + | |
| − | <div class="container-collapse"> | + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices" class="navbarItemHeader">Human Practices</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#page-top" class="navbarItemContent">Header</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#introduction-HP" class="navbarItemContent">Intro</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#monterrey-HP" class="navbarItemContent">Monterrey</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#chiapas-HP" class="navbarItemContent">Chiapas</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#integrated-HP" class="navbarItemContent">Integrated</a>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#world-HP" class="navbarItemContent">World</a>
| + | |
| − | <br>
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#prototype-HP" class="navbarItemContent">Prototype</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#" class="navbarItemHeader">The Journey</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Tabasco</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Chiapas</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Samples</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement" class="navbarItemHeader">Public Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Milenio News</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Conexion Tec</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Genobiotec</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Curiosamente</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Tec Review</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement" class="navbarItemHeader">Educational Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Seminar</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Congress</a>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="navbarItemContent">Talks</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth"/>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <!-- Modeling collapsed -->
| + | <div class="main-info-container-right"> |
| − | <div class="collapse collapsed-menu" id="collapseModeling"> | + | |
| − | <div class="container-collapse">
| + | </div> |
| − | <div class=" height- support"> | + | <div class="main-info"> |
| − | </div>
| + | </div> |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | <div class="main-info"> |
| − | <li class="nav-item navbarItem">
| + | </div> |
| − | <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" class="navbarItemHeader">Mathematical Model</a>
| + | <div class="main-info"> |
| − | <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>
| + | |
| − | <br class="clearBoth"/>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| − |
| + | <div id="hiding-block"> |
| − | <div class="mask"></div> | + | </div> |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!--------------------------------------------------------- TOPBAR MENU ENDS --------------------------------------------->
| + | |
| − | <!--Scroll to top button-->
| + | |
| − | <a class="scroll-to-top rounded" href="#page-top" id="scroll-to-top-btn">
| + | |
| − | <i class="fa fa-angle-up"></i>
| + | |
| − | </a>
| + | |
| − | </body>
| + | |
| − | </html>
| + | |
| | | | |
| | + | <br class="clearBoth" /> |
| | + | </div> <!-- background-river ends --> |
| | | | |
| | + | <div id="fixed-title"> |
| | + | E. coding |
| | + | <div id="fixed-subtitle">Tec-Monterrey</div> |
| | + | </div> |
| | | | |
| | + | <div id="bacteria-nadando"> |
| | + | </div> |
| | + | </div> <!-- scroll section ends --> |
| | | | |
| − | | + | <section style="height: 90vw"> |
| − | | + | <style> |
| − | | + | #dropzoneWrapper { |
| − | | + | width: 100%; |
| − | | + | height: auto; |
| − | | + | } |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <!------- MAIN -------> | + | |
| − | <!DOCTYPE html> | + | |
| − | <html>
| + | |
| − | | + | |
| − | <head>
| + | |
| − | <style>
| + | |
| | #outer-dropzone { | | #outer-dropzone { |
| − | height: 400px; | + | height: 60vw; |
| | + | width: 60vw; |
| | + | left: 30vw; |
| | touch-action: none; | | touch-action: none; |
| | } | | } |
| − |
| + | |
| − | #imageHolder {
| + | |
| − | height: 200px;
| + | |
| − | }
| + | |
| − | | + | |
| | .dropzone { | | .dropzone { |
| − | background-color: #ccc; | + | background-color: black; |
| | border: dashed 4px transparent; | | border: dashed 4px transparent; |
| | border-radius: 4px; | | border-radius: 4px; |
| − | margin: 10px auto 30px;
| |
| | padding: 10px; | | padding: 10px; |
| | width: 80%; | | width: 80%; |
| Line 1,696: |
Line 488: |
| | .drop-target { | | .drop-target { |
| | background-color: #29e; | | background-color: #29e; |
| − | border-color: #fff;
| |
| | border-style: solid; | | border-style: solid; |
| | } | | } |
| Line 1,702: |
Line 493: |
| | .drag-drop { | | .drag-drop { |
| | display: inline-block; | | display: inline-block; |
| − | min-width: 40px;
| + | height: 10vh; |
| − | height: 200px; | + | width: 10vh; |
| − | width: 200px; | + | z-index: 50; |
| − | | + | |
| − | color: #fff; | + | |
| − | /*background-color: #29e;*/
| + | |
| − | border: solid 2px #fff;
| + | |
| | | | |
| | -webkit-transform: translate(0px, 0px); | | -webkit-transform: translate(0px, 0px); |
| Line 1,718: |
Line 505: |
| | .drag-drop img { | | .drag-drop img { |
| | position: absolute; | | position: absolute; |
| − | height: 200px; | + | height: 100%; |
| − | width: 200px; | + | width: 100%; |
| | border-radius: 50%; | | border-radius: 50%; |
| | + | z-index: 50; |
| | } | | } |
| | | | |
| | .drag-drop.can-drop { | | .drag-drop.can-drop { |
| | color: #000; | | color: #000; |
| − | background-color: #4e4; | + | /*background-color: #4e4;*/ |
| | + | z-index: 50; |
| | } | | } |
| | + | |
| | + | |
| | + | #backgroundHolder { |
| | + | width: 60vw; |
| | + | height: 60vw; |
| | + | position: relative; |
| | + | z-index: 1; |
| | + | background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png"); |
| | + | background-repeat:no-repeat; |
| | + | background-size: 100%; |
| | + | } |
| | + | |
| | + | #interactive_Background { |
| | + | height: 100%; |
| | + | } |
| | + | |
| | + | #plasmidHolder { |
| | + | width: 60vw; |
| | + | height: 60vw; |
| | + | position: absolute; |
| | + | z-index: 3; |
| | + | background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png"); |
| | + | background-repeat:no-repeat; |
| | + | background-size: 100%; |
| | + | } |
| | + | |
| | + | #interactive_CutPlasmidFull { |
| | + | height: 100%; |
| | + | } |
| | + | |
| | + | #colorsWrapper { |
| | + | width: 60vw; |
| | + | height: 60vw; |
| | + | position: absolute; |
| | + | z-index: 2; |
| | + | background-repeat:no-repeat; |
| | + | background-size: 100%; |
| | + | } |
| | + | #color1 { |
| | + | opacity: 0; |
| | + | left: 48%; |
| | + | top: 54.5%; |
| | + | height: 8%; |
| | + | width: 8%; |
| | + | background-color: yellow; |
| | + | position: absolute; |
| | + | z-index:3; |
| | + | } |
| | + | #color2 { |
| | + | opacity: 0; |
| | + | left: 56%; |
| | + | top: 54.5%; |
| | + | height: 8%; |
| | + | width: 8%; |
| | + | background-color: red; |
| | + | position: absolute; |
| | + | z-index:3; |
| | + | } |
| | + | #color3 { |
| | + | opacity: 0; |
| | + | left: 48%; |
| | + | top: 63%; |
| | + | height: 7%; |
| | + | width: 7.5%; |
| | + | background-color: aqua; |
| | + | position: absolute; |
| | + | z-index:3; |
| | + | } |
| | + | #color4 { |
| | + | opacity: 0; |
| | + | left: 56%; |
| | + | top: 63%; |
| | + | height: 7%; |
| | + | width: 7.5%; |
| | + | background-color: pink; |
| | + | position: absolute; |
| | + | z-index:3; |
| | + | } |
| | + | |
| | + | |
| | </style> | | </style> |
| − | </head>
| |
| | | | |
| − | <body>
| |
| − | <div id="alan" class="drag-drop"> <img src="/imagesDemo/alan.jpg"> </div>
| |
| − | <div id="esteban" class="drag-drop"> <img src="/imagesDemo/esteban.jpg"> </div>
| |
| − | <div id="acebae" class="drag-drop"> <img src="/imagesDemo/aceperro.jpeg"> </div>
| |
| − | <div id="sofi" class="drag-drop"> <img src="/imagesDemo/sofi.jpg"> </div>
| |
| − | <div id="bobby" class="drag-drop"> <img src="/imagesDemo/bobby.jpg"> </div>
| |
| | | | |
| − | <div id=" outer- dropzone" class=" dropzone"> | + | |
| − | #outer-dropzone | + | <div style=" height: 10vh; width: 100%; background- color: black;" ><p style=" font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;" >DRAG AND DROP!</p></div> |
| − | <div id=" imageHolder"> <img id=" dropzoneImage"height="100%" src=""> </div> | + | <div id="dropzoneWrapper" style="background-color: black"> |
| − | </div>
| + | <div id=" gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;"> |
| − |
| + | <img src=" https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%"> |
| | + | </div> |
| | + | <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; "> |
| | + | <div style="background-color: black; height: 50%; text-align: center;"> |
| | + | <br> |
| | + | <br> |
| | + | <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div> |
| | + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> Pb</p> |
| | + | </div> |
| | + | <div style="background-color: black; height: 50%; text-align: center;"> |
| | + | <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div> |
| | + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> NO3</p> |
| | + | </div> |
| | + | |
| | + | </div> |
| | + | <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;"> |
| | + | <div style="background-color: black; height: 50%; text-align: center;"> |
| | + | <br> |
| | + | <br> |
| | + | <div id="acebae" class="drag-drop" style="margin: auto"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div> |
| | + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> PO4</p> |
| | + | </div> |
| | + | <div style="background-color: black; height: 50%; text-align: center;"> |
| | + | <div id="sofi" class="drag-drop" style="margin:auto"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div> |
| | + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> As</p> |
| | + | </div> |
| | + | </div> |
| | + | <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;"> |
| | + | <div id="outer-dropzone" class="dropzone"> |
| | + | <div id="backgroundHolder"> |
| | + | <div id="colorsWrapper"> |
| | + | <div id="color1"></div> |
| | + | <div id="color2"></div> |
| | + | <div id="color3"></div> |
| | + | <div id="color4"></div> |
| | + | </div> |
| | + | <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')"> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | <script> | | <script> |
| − | // target elements with the "draggable" class | + | |
| | + | $(document).on('scroll', function() { |
| | + | if($(this).scrollTop()>=$('#gifDiv').position().top){ |
| | + | $("#gifDiv").css("background-color: green;"); |
| | + | setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200); |
| | + | } |
| | + | }); |
| | + | |
| | + | |
| | + | document.addEventListener("DOMContentLoaded", function(event) { |
| | + | // target elements with the "draggable" class |
| | interact('.draggable') | | interact('.draggable') |
| | .draggable({ | | .draggable({ |
| Line 1,750: |
Line 663: |
| | // keep the element within the area of it's parent | | // keep the element within the area of it's parent |
| | restrict: { | | restrict: { |
| − | restriction: "parent", | + | restriction: "#dropzoneWrapper", |
| | endOnly: true, | | endOnly: true, |
| | elementRect: { | | elementRect: { |
| Line 1,768: |
Line 681: |
| | var textEl = event.target.querySelector('p'); | | var textEl = event.target.querySelector('p'); |
| | | | |
| − | textEl && (textEl.textContent = | + | (textEl.textContent = |
| | 'moved a distance of ' + | | 'moved a distance of ' + |
| | (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + | | (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + |
| Line 1,836: |
Line 749: |
| | if (event.relatedTarget.id == "alan") { | | if (event.relatedTarget.id == "alan") { |
| | document.getElementById(draggableElementID).style.display = "none"; | | document.getElementById(draggableElementID).style.display = "none"; |
| − | document.getElementById("dropzoneImage").src="https://media1.tenor.com/images/9efdeb655742370ffdedf960649d5150/tenor.gif?itemid=10898740"; | + | document.getElementById("color1").style.opacity = "1"; |
| | } else if (event.relatedTarget.id == "esteban") { | | } else if (event.relatedTarget.id == "esteban") { |
| | document.getElementById(draggableElementID).style.display = "none"; | | document.getElementById(draggableElementID).style.display = "none"; |
| − | document.getElementById("dropzoneImage").src="https://i.ytimg.com/vi/8r-9Ep9rarA/maxresdefault.jpg"; | + | document.getElementById("color2").style.opacity = "1"; |
| | } else if (event.relatedTarget.id == "acebae") { | | } else if (event.relatedTarget.id == "acebae") { |
| | document.getElementById(draggableElementID).style.display = "none"; | | document.getElementById(draggableElementID).style.display = "none"; |
| − | document.getElementById("dropzoneImage").src="https://acedog.co/images/acedog-627x378.png"; | + | document.getElementById("color3").style.opacity = "1"; |
| | } else if (event.relatedTarget.id == "sofi") { | | } else if (event.relatedTarget.id == "sofi") { |
| | document.getElementById(draggableElementID).style.display = "none"; | | document.getElementById(draggableElementID).style.display = "none"; |
| − | document.getElementById("dropzoneImage").src="https://i.ytimg.com/vi/mU_uE-d870U/maxresdefault.jpg"; | + | document.getElementById("color4").style.opacity = "1"; |
| − | } else if (event.relatedTarget.id == "bobby") {
| + | |
| − | document.getElementById(draggableElementID).style.display = "none";
| + | |
| − | document.getElementById("dropzoneImage").src="https://i.redd.it/wc8gkbw5kxv01.jpg";
| + | |
| | } | | } |
| | //console.log("d"); | | //console.log("d"); |
| Line 1,865: |
Line 775: |
| | inertia: true, | | inertia: true, |
| | restrict: { | | restrict: { |
| − | restriction: "parent", | + | restriction: "#dropzoneWrapper", |
| | endOnly: true, | | endOnly: true, |
| | elementRect: { | | elementRect: { |
| Line 1,879: |
Line 789: |
| | onmove: dragMoveListener, | | onmove: dragMoveListener, |
| | }); | | }); |
| | + | }); |
| | </script> | | </script> |
| − | </body> | + | </section> |
| | + | <section> |
| | + | <div class="slideshow"> |
| | + | <div class='right-arrow-pane'> |
| | + | <div class='arrow'> |
| | + | <div></div> |
| | + | </div> |
| | + | </div> |
| | + | <div class='left-arrow-pane'> |
| | + | <div class='arrow'> |
| | + | <div></div> |
| | + | </div> |
| | + | </div> |
| | + | <div class='bubbles'> |
| | + | </div> |
| | + | <div class='pauseBtn'> |
| | + | <div class='bars'> |
| | + | <div></div> |
| | + | <div></div> |
| | + | </div> |
| | + | <div class='tri'> |
| | + | <div></div> |
| | + | </div> |
| | + | </div> |
| | + | <div class='content'> |
| | + | <div class='slide'> |
| | + | <video autoplay loop muted> |
| | + | <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4"> |
| | + | </video> |
| | + | </div> |
| | + | <div class='slide'> |
| | + | <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" /> |
| | + | </div> |
| | + | <div class='slide'> |
| | + | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" /> |
| | + | </div> |
| | + | <div class='slide'> |
| | + | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" /> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | </html> | + | <div class="slideshow"> |
| | + | <div class='right-arrow-pane'> |
| | + | <div class='arrow'> |
| | + | <div></div> |
| | + | </div> |
| | + | </div> |
| | + | <div class='left-arrow-pane'> |
| | + | <div class='arrow'> |
| | + | <div></div> |
| | + | </div> |
| | + | </div> |
| | + | <div class='bubbles'> |
| | + | </div> |
| | + | <div class='pauseBtn'> |
| | + | <div class='bars'> |
| | + | <div></div> |
| | + | <div></div> |
| | + | </div> |
| | + | <div class='tri'> |
| | + | <div></div> |
| | + | </div> |
| | + | </div> |
| | + | <div class='content'> |
| | + | <div class='slide'> |
| | + | <video autoplay loop muted> |
| | + | <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4"> |
| | + | </video> |
| | + | </div> |
| | + | <div class='slide'> |
| | + | <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" /> |
| | + | </div> |
| | + | <div class='slide'> |
| | + | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" /> |
| | + | </div> |
| | + | <div class='slide'> |
| | + | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" /> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| | + | <script> |
| | + | var screen_900 = window.matchMedia("(max-width: 900px)"); |
| | + | var screen_1024 = window.matchMedia("(min-width: 1024px)"); |
| | + | var screen_1280 = window.matchMedia("(min-width: 1280px)"); |
| | + | var screen_1440 = window.matchMedia("(min-width: 1440px)"); |
| | + | var screen_1680 = window.matchMedia("(min-width: 1680px)"); |
| | + | var screen_1920 = window.matchMedia("(min-width: 1920px)"); |
| | + | var position = 3000; |
| | | | |
| | + | $(window).on('beforeunload', function() { |
| | + | $(window).scrollTop(0); |
| | + | }); |
| | | | |
| | + | if (screen_900.matches) { |
| | + | var timeoutVar = 0; |
| | + | } else if (screen_1024.matches) { |
| | + | position = 3450; |
| | + | var timeoutVar = setTimeout(function() { |
| | + | $(window).scrollTop(0); |
| | + | }, 8000); |
| | + | } else if (screen_1280.matches) { |
| | + | position = 4500; |
| | + | var timeoutVar = setTimeout(function() { |
| | + | $(window).scrollTop(0); |
| | + | }, 8000); |
| | + | } else if (screen_1440.matches) { |
| | + | position = 6000; |
| | + | var timeoutVar = setTimeout(function() { |
| | + | $(window).scrollTop(0); |
| | + | }, 8000); |
| | + | } else if (screen_1680.matches) { |
| | + | position = 6500; |
| | + | var timeoutVar = setTimeout(function() { |
| | + | $(window).scrollTop(0); |
| | + | }, 8000); |
| | + | } else if (screen_1920.matches) { |
| | + | position = 7500; |
| | + | var timeoutVar = setTimeout(function() { |
| | + | $(window).scrollTop(0); |
| | + | }, 8000); |
| | + | } else { |
| | + | var timeoutVar = setTimeout(function() { |
| | + | $(window).scrollTop(0); |
| | + | }, 8000); |
| | + | } |
| | | | |
| | + | function slideVideo() { |
| | + | $("#video-main-page").css('transform', 'translateY(-100%)'); |
| | + | $("#skip-btn").css('transform', 'translateY(-100%)'); |
| | + | $("#skip-btn").css({ |
| | + | 'top': '-10%' |
| | + | }); |
| | + | } |
| | | | |
| | + | function map(value, in_min, in_max, out_min, out_max) { |
| | + | return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; |
| | + | } |
| | | | |
| | + | //******************************************************* SCROLL OPACITY *********************************************** |
| | | | |
| | + | var hiding = document.getElementById("hiding-block"); |
| | + | var bacteria = document.getElementById("bacteria-nadando"); |
| | | | |
| − | <!----{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} ---->
| + | $(window).scroll(function(event) { |
| − | <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">Contact Us</h4>
| + | |
| − | <a class="footer-link no-padding" href="https://www.facebook.com/IgemTecMty" target="_blank">
| + | |
| − | <i class="fa fa-facebook-square social-link"></i>
| + | |
| − | </a>
| + | |
| − | <a class="footer-link no-padding" href="https://twitter.com/igemtecmty" target="_blank">
| + | |
| − | <i class="fa fa-twitter-square social-link"></i>
| + | |
| − | </a>
| + | |
| − | <a class="footer-link no-padding" href="mailto:igemtecmonterrey@gmail.com">
| + | |
| − | <i class="fa fa-envelope-square social-link"></i>
| + | |
| − | </a>
| + | |
| − | <a class="footer-link no-padding" href="https://www.instagram.com/igemtecmty/" target="_blank">
| + | |
| − | <i class="fa fa-instagram social-link"></i>
| + | |
| − | </a>
| + | |
| − | <div class="footer-text">
| + | |
| − | <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>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="col-md-9">
| + | |
| − | <h4 class="text-muted">Sponsors</h4>
| + | |
| − | <ul class="list-inline">
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/5/56/T--Tec-Monterrey--CECROPIA.png" alt="CECROPIA">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/a/a2/T--Tec-Monterrey--CONANP.png" alt="CONANP">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--Concretos.png" alt="Concretos Modernos del Sur">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/8/89/T--Tec-Monterrey--GDX.png" alt="GDX Holdings">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/e/e9/T--Tec-Monterrey--GenScript.png" alt="GenScript">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/3/37/T--Tec-Monterrey--IDT.png" alt="IDT">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Ladesa.png" alt="Ladesa">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/5/5e/T--Tec-Monterrey--NEB.png" alt="NEB">
| + | |
| − | </li>
| + | |
| − | <li class="list-inline-item sponsor">
| + | |
| − | <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/2/24/T--Tec-Monterrey--Opentrons.png" alt="Opnetrons">
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </footer>
| + | |
| | | | |
| − | <!-- Script controls collapsedMenus -->
| + | var hidingPos = hiding.offsetTop; |
| − | <script>
| + | var bacteriaPos = bacteria.offsetTop; |
| | | | |
| − | /*------------MENU STARTS-----------*/
| + | var scroll = $(window).scrollTop(); |
| − |
| + | var scrollOpacity = map(scroll, 0, 350, 1, 0); |
| − | //Menu collapsing
| + | //var scrollFade = map(scroll, 350, 0, 0, 1); |
| − |
| + | var bacteriaOpacity = map(scroll, 0, 500, 0, 1); |
| − | $("#linkContainer_Project").hover(
| + | var bacteriaTop = map(scroll, 900, 2000, -100, 100); |
| − | function () { | + | var bacteriaRotate = map(scroll, 0, 700, 50, 0); |
| − | $('#navbar').css('background','#2A8481');
| + | if (scroll > hidingPos) { |
| − | $("#linkContainer_Project").addClass("active");
| + | $('#bacteria-nadando ').css('opacity', '0'); |
| − | $("#linkContainer_ProjectChild").addClass("activeChild");
| + | } else { |
| − | openMenu('#collapseProject', '#b0e0e4');
| + | $('#bacteria-nadando ').css('opacity', bacteriaOpacity); |
| − |
| + | $('#bacteria-nadando ').css('top', bacteriaTop + 'px'); |
| − | }, 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');
| |
| − | $('.cd-vertical-nav').css('display','table');
| |
| − | }else{
| |
| − | $('#navbar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
| |
| − | $('.cd-vertical-nav').css('display','none');
| |
| − | }
| |
| − | }
| |
| | | | |
| − | function closeMenu(collapseName){ | + | //******************************************************* Video Controls ******************************************* |
| − | $(".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-----------*/ | + | $("#video-main-page").bind("ended", function() { |
| − | | + | slideVideo() |
| − | $(window).on("load", function() {
| + | }); |
| − | $('body').addClass('loaded');
| + | |
| − | });
| + | |
| | | | |
| | + | $("#skip-btn").click(function() { |
| | + | clearTimeout(timeoutVar); |
| | + | $(window).scrollTop(0); |
| | + | slideVideo(); |
| | + | }); |
| | + | |
| | + | |
| | </script> | | </script> |
| − | | + | <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow? |
| − | | + | action=raw&ctype=text/javascript"></script> |
| | + | </section> |
| | + | </body> |
| | | | |
| − | <!-- 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}} |
