(Prototype team page) |
|||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | {{TecCEM/Menu}} | |
− | {{TecCEM}} | + | |
<html> | <html> | ||
− | + | <head> | |
− | + | <meta charset="utf-8"> | |
+ | <title>Untitled Document</title> | ||
+ | </head> | ||
<div class="column full_size judges-will-not-evaluate"> | <div class="column full_size judges-will-not-evaluate"> | ||
<h3>★ ALERT! </h3> | <h3>★ ALERT! </h3> | ||
<p>This page is used by the judges to evaluate your team for the <a href="https://2021.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2021.igem.org/Judging/Awards"> award listed below</a>. </p> | <p>This page is used by the judges to evaluate your team for the <a href="https://2021.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2021.igem.org/Judging/Awards"> award listed below</a>. </p> | ||
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2021.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p> | <p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2021.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p> | ||
+ | </div> | ||
+ | <body> | ||
+ | <div class="Imagen_principal"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt=""> | ||
+ | <div class="Titulo"> | ||
+ | <h1>PArtnership</h1> | ||
+ | </div> | ||
+ | <div class="Difuminado"></div> | ||
+ | </div> | ||
+ | |||
+ | <div class="cuerpo_principal"> | ||
+ | |||
+ | <div class="Espacio_menu_lateral"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="Texto"> | ||
+ | <h2 id="primer">Título 1</h2> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p> | ||
+ | |||
+ | <h2 id="segundo">Título 2</h2> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p> | ||
+ | |||
+ | <h2 id="tercero">Título 3</h2> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p> | ||
+ | |||
+ | <h2 id="cuarto">Título 4</h2> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p> | ||
+ | |||
+ | <img id="fig1" src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt=""> | ||
+ | |||
+ | <p class="Caption">Fig 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, nam, maiores. Inventore ex eum doloremque eligendi id, voluptates quod illum, dolore deserunt iste alias. Dolor libero illo hic, temporibus harum.</p> | ||
+ | |||
+ | <h2 id="quinto">Título 5</h2> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div class="menu_lateral" id="menu_lateral"> | ||
+ | <ul style="list-style: none; margin: 0; padding: 0;"> | ||
+ | <li id="to1">Primer Título</li> | ||
+ | <li id="to2">Segundo Título</li> | ||
+ | <li id="to3">Tercer Título</li> | ||
+ | <li id="to4">Cuarto Título</li> | ||
+ | <li id="to5">Quinto Título</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="survey"> | ||
+ | <p><a href="https://surveymethods.com/" title="Survey Software">Survey Software</a> powered by <a | ||
+ | href="https://surveymethods.com" title="Survey Software"> SurveyMethods.com</a></p> | ||
</div> | </div> | ||
+ | </body> | ||
+ | <style> | ||
+ | .survey{ | ||
+ | display: flex; | ||
+ | align-content: center; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | body{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .Imagen_principal{ | ||
+ | display: flex; | ||
+ | align-content: center; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | width: 100vw; | ||
+ | height: 100vh; | ||
+ | } | ||
+ | .Imagen_principal > img{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .Titulo{ | ||
+ | position: absolute; | ||
+ | background: white; | ||
+ | padding: 1rem; | ||
+ | border-radius: 1rem; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | .Titulo > h1{ | ||
+ | display: inline; | ||
+ | opacity: 1; | ||
+ | font-size: 4rem; | ||
+ | } | ||
+ | .Difuminado{ | ||
+ | width: 100vw; | ||
+ | height: 100vh; | ||
+ | position: absolute; | ||
+ | z-index: 9; | ||
+ | background: black; | ||
+ | opacity: .4; | ||
+ | } | ||
+ | .cuerpo_principal{ | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | } | ||
+ | .menu_lateral{ | ||
+ | display: flex; | ||
+ | transition: transform 0.6s ease-out; | ||
+ | background: gray; | ||
+ | flex-wrap: wrap; | ||
+ | width: 10%; | ||
+ | justify-content: center; | ||
+ | align-content: center; | ||
+ | align-items: center; | ||
+ | max-height: 45rem; | ||
+ | position: fixed; | ||
+ | top: 50%; | ||
+ | transform: translateX(-100%) translateY(0); | ||
+ | |||
+ | } | ||
+ | .menu_lateral_hidden{ | ||
+ | transform: translateX(0%) translateY(0); | ||
+ | /*100% - .menu_lateral.height + .menu_lateral_teccem.heigh | ||
+ | 100 - 35 + 20 = 85 | ||
+ | */ | ||
+ | } | ||
+ | .Espacio_menu_lateral{ | ||
+ | width: 10%; | ||
+ | } | ||
+ | .menu_lateral li{ | ||
+ | margin-bottom: 1rem; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .Texto{ | ||
+ | width: 85%; | ||
+ | padding: 1rem; | ||
+ | justify-content: center; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | |||
+ | } | ||
+ | .Texto h2{ | ||
+ | align-self: left; | ||
+ | } | ||
+ | |||
+ | .Texto p { | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .Texto img{ | ||
+ | width: 70%; | ||
+ | max-height: 500px; | ||
+ | } | ||
+ | |||
+ | .Caption{ | ||
+ | width: 70%; | ||
+ | } | ||
+ | html, body { | ||
+ | height: 100vh; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <script> | ||
− | |||
+ | function getElementY(query) { | ||
+ | return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top | ||
+ | } | ||
− | + | function doScrolling(element, duration) { | |
− | + | var startingY = window.pageYOffset | |
− | + | var elementY = getElementY(element) | |
− | < | + | // If element is close to page's bottom then window will scroll only to some position above the element. |
− | + | var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY | |
− | + | var diff = targetY - startingY | |
− | + | // Easing function: easeInOutCubic | |
− | + | // From: https://gist.github.com/gre/1650294 | |
+ | var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 } | ||
+ | var start | ||
+ | |||
+ | if (!diff) return | ||
+ | |||
+ | // Bootstrap our animation - it will get called right before next frame shall be rendered. | ||
+ | window.requestAnimationFrame(function step(timestamp) { | ||
+ | if (!start) start = timestamp | ||
+ | // Elapsed miliseconds since start of scrolling. | ||
+ | var time = timestamp - start | ||
+ | // Get percent of completion in range [0, 1]. | ||
+ | var percent = Math.min(time / duration, 1) | ||
+ | // Apply the easing. | ||
+ | // It can cause bad-looking slow frames in browser performance tool, so be careful. | ||
+ | percent = easing(percent) | ||
+ | |||
+ | window.scrollTo(0, startingY + diff * percent) | ||
+ | // Proceed with animation as long as we wanted it to. | ||
+ | if (time < duration) { | ||
+ | window.requestAnimationFrame(step) | ||
+ | } | ||
+ | }) | ||
+ | } | ||
+ | // Apply event handlers. Example of firing the scrolling mechanism. | ||
+ | document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#primer', 1000)) | ||
+ | document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#segundo', 1000)) | ||
+ | document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tercero', 1000)) | ||
+ | document.getElementById('to4').addEventListener('click', doScrolling.bind(null, '#cuarto', 1000)) | ||
+ | document.getElementById('to5').addEventListener('click', doScrolling.bind(null, '#quinto', 1000)) | ||
+ | </script> | ||
+ | <script> | ||
+ | $(window).scroll(function(){ | ||
+ | if($(document).scrollTop() > 650){ | ||
+ | document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden"); | ||
+ | }else{ | ||
+ | document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden"); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 23:14, 21 October 2021
★ ALERT!
This page is used by the judges to evaluate your team for the medal criterion or award listed below.
Delete this box in order to be evaluated for this medal criterion and/or award. See more information at Instructions for Pages for awards.
![](https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg)
PArtnership
Título 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.
Título 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.
Título 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.
Título 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.
![](https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg)
Fig 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, nam, maiores. Inventore ex eum doloremque eligendi id, voluptates quod illum, dolore deserunt iste alias. Dolor libero illo hic, temporibus harum.
Título 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.
Survey Software powered by SurveyMethods.com