Difference between revisions of "Team:TecCEM"
| Line 17: | Line 17: | ||
<div class="cuerpo_principal"> | <div class="cuerpo_principal"> | ||
| − | <div class=" | + | |
| − | + | <div class="Espacio_menu"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| Line 47: | Line 44: | ||
</div> | </div> | ||
| + | <div class="menu" id="menu"> | ||
| + | <ul style="list-style: none; margin: 0; padding: 0;"> | ||
| + | <li>Primer</li> | ||
| + | <li>Segundo</li> | ||
| + | <li>Tercero</li> | ||
| + | </ul> | ||
| + | </div> | ||
</body> | </body> | ||
<style> | <style> | ||
| − | + | body{ | |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
| − | |||
} | } | ||
| − | |||
| − | |||
| − | |||
.Imagen_principal{ | .Imagen_principal{ | ||
display: flex; | display: flex; | ||
| Line 63: | Line 63: | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
| − | |||
width: 100vw; | width: 100vw; | ||
| + | height: 100vh; | ||
} | } | ||
.Imagen_principal > img{ | .Imagen_principal > img{ | ||
| Line 94: | Line 94: | ||
flex-direction: row; | flex-direction: row; | ||
} | } | ||
| − | . | + | .menu{ |
display: flex; | display: flex; | ||
| + | transition: transform 0.6s ease-out; | ||
background: gray; | background: gray; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 103: | Line 104: | ||
align-items: center; | align-items: center; | ||
max-height: 45rem; | max-height: 45rem; | ||
| − | position: | + | position: fixed; |
| + | top: 50%; | ||
| + | transform: translateX(-100%) translateY(0); | ||
| + | |||
} | } | ||
| − | . | + | .menu_hidden{ |
| + | transform: translateX(0%) translateY(0); | ||
| + | /*100% - .menu.height + .menu_teccem.heigh | ||
| + | 100 - 35 + 20 = 85 | ||
| + | */ | ||
| + | } | ||
| + | .Espacio_menu{ | ||
| + | width: 10%; | ||
| + | } | ||
| + | .menu li{ | ||
margin-bottom: 1rem; | margin-bottom: 1rem; | ||
cursor: pointer; | cursor: pointer; | ||
| Line 134: | Line 147: | ||
width: 70%; | width: 70%; | ||
} | } | ||
| + | html, body { | ||
| + | height: 100vh; | ||
| + | } | ||
</style> | </style> | ||
| − | <script | + | |
| − | + | <script> | |
| − | + | ||
$(window).scroll(function(){ | $(window).scroll(function(){ | ||
| − | + | if($(document).scrollTop() > 20){ | |
| − | + | document.querySelector(".menu").classList.add("menu_hidden"); | |
| − | + | } | |
| − | + | ||
| − | + | ||
}); | }); | ||
Revision as of 21:49, 12 September 2021
Home
Team
Project
Awards
Human Practices
Parts
Judging form
Team
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.
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.