Difference between revisions of "Team:TecCEM/Carlos"
CarlosEsp71 (Talk | contribs) |
CarlosEsp71 (Talk | contribs) |
||
| Line 1: | Line 1: | ||
| + | <!DOCTYPE html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Line 7: | Line 8: | ||
<style> | <style> | ||
| − | @import url( | + | @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap"); |
| − | + | deMenu, | |
#top_title, | #top_title, | ||
.patrollink, | .patrollink, | ||
| Line 200: | Line 201: | ||
height: 150px; | height: 150px; | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 30 px; |
| − | left: | + | left: 25%; |
} | } | ||
| Line 208: | Line 209: | ||
position: absolute; | position: absolute; | ||
top: 30px; | top: 30px; | ||
| − | left: | + | left: 75%; |
| + | } | ||
| + | |||
| + | .datos, | ||
| + | .problematica, | ||
| + | .deteccion, | ||
| + | .remocion, | ||
| + | .resultados, | ||
| + | .impacto { | ||
| + | opacity: 0; | ||
| + | transition: 3s; | ||
| + | } | ||
| + | |||
| + | .show { | ||
| + | opacity: 1; | ||
| + | transition: 3s; | ||
} | } | ||
</style> | </style> | ||
| Line 228: | Line 244: | ||
<div class="item-20"> | <div class="item-20"> | ||
<h1>Ícono</h1> | <h1>Ícono</h1> | ||
| − | |||
</div> | </div> | ||
<div class="item-40"> | <div class="item-40"> | ||
<h1>Datos</h1> | <h1>Datos</h1> | ||
| − | + | <p class="datos"> | |
| − | <p> | + | |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. | Lorem ipsum dolor, sit amet consectetur adipisicing elit. | ||
Temporibus architecto numquam explicabo minus nemo perspiciatis | Temporibus architecto numquam explicabo minus nemo perspiciatis | ||
| Line 255: | Line 269: | ||
<div class="item-40"> | <div class="item-40"> | ||
<h1>Problemática</h1> | <h1>Problemática</h1> | ||
| − | + | <p class="problematica"> | |
| − | <p> | + | |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam | ||
laudantium molestias numquam quasi iure necessitatibus tenetur? | laudantium molestias numquam quasi iure necessitatibus tenetur? | ||
| Line 270: | Line 283: | ||
<div class="item-20"> | <div class="item-20"> | ||
<h1>Ícono</h1> | <h1>Ícono</h1> | ||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 284: | Line 296: | ||
<div class="item-40"> | <div class="item-40"> | ||
<h1>Detección</h1> | <h1>Detección</h1> | ||
| − | + | <p class="deteccion"> | |
| − | <p> | + | |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est | ||
voluptates eius laborum dolor. Ratione repellendus nobis | voluptates eius laborum dolor. Ratione repellendus nobis | ||
| Line 300: | Line 311: | ||
<div class="item-20"> | <div class="item-20"> | ||
<h1>Ícono</h1> | <h1>Ícono</h1> | ||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 306: | Line 316: | ||
<div class="item-20"> | <div class="item-20"> | ||
<h1>Ícono</h1> | <h1>Ícono</h1> | ||
| − | |||
</div> | </div> | ||
<div class="item-40"> | <div class="item-40"> | ||
<h1>Remoción</h1> | <h1>Remoción</h1> | ||
| − | + | <p class="remocion"> | |
| − | <p> | + | |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. | Lorem ipsum dolor, sit amet consectetur adipisicing elit. | ||
Temporibus architecto numquam explicabo minus nemo perspiciatis | Temporibus architecto numquam explicabo minus nemo perspiciatis | ||
| Line 339: | Line 347: | ||
<div class="item-20"> | <div class="item-20"> | ||
<h1>Ícono</h1> | <h1>Ícono</h1> | ||
| − | |||
</div> | </div> | ||
<div class="item-40"> | <div class="item-40"> | ||
<h1>Resultados</h1> | <h1>Resultados</h1> | ||
| − | + | <p class="resultados"> | |
| − | <p> | + | |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. | Lorem ipsum dolor, sit amet consectetur adipisicing elit. | ||
Temporibus architecto numquam explicabo minus nemo perspiciatis | Temporibus architecto numquam explicabo minus nemo perspiciatis | ||
| Line 366: | Line 372: | ||
<div class="item-40"> | <div class="item-40"> | ||
<h1>Impacto</h1> | <h1>Impacto</h1> | ||
| − | + | <p class="impacto"> | |
| − | <p> | + | |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam | ||
laudantium molestias numquam quasi iure necessitatibus tenetur? | laudantium molestias numquam quasi iure necessitatibus tenetur? | ||
| Line 381: | Line 386: | ||
<div class="item-20"> | <div class="item-20"> | ||
<h1>Ícono</h1> | <h1>Ícono</h1> | ||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 456: | Line 460: | ||
{ | { | ||
x: 0, | x: 0, | ||
| − | y: | + | y: 200, |
}, | }, | ||
{ | { | ||
x: 700, | x: 700, | ||
| − | y: | + | y: 200, |
}, | }, | ||
{ | { | ||
| Line 542: | Line 546: | ||
.setTween(tween3) | .setTween(tween3) | ||
.setPin(".animation_3") | .setPin(".animation_3") | ||
| + | .addTo(controller); | ||
| + | |||
| + | const datos = new ScrollMagic.Scene({ | ||
| + | triggerElement: ".datos", | ||
| + | }) | ||
| + | .setClassToggle(".datos", "show") | ||
| + | .addTo(controller); | ||
| + | |||
| + | const problematica = new ScrollMagic.Scene({ | ||
| + | triggerElement: ".problematica", | ||
| + | }) | ||
| + | .setClassToggle(".problematica", "show") | ||
| + | .addTo(controller); | ||
| + | |||
| + | const deteccion = new ScrollMagic.Scene({ | ||
| + | triggerElement: ".deteccion", | ||
| + | }) | ||
| + | .setClassToggle(".deteccion", "show") | ||
| + | .addTo(controller); | ||
| + | |||
| + | const remocion = new ScrollMagic.Scene({ | ||
| + | triggerElement: ".remocion", | ||
| + | }) | ||
| + | .setClassToggle(".remocion", "show") | ||
| + | .addTo(controller); | ||
| + | |||
| + | const resultados = new ScrollMagic.Scene({ | ||
| + | triggerElement: ".resultados", | ||
| + | }) | ||
| + | .setClassToggle(".resultados", "show") | ||
| + | .addTo(controller); | ||
| + | |||
| + | const impacto = new ScrollMagic.Scene({ | ||
| + | triggerElement: ".impacto", | ||
| + | }) | ||
| + | .setClassToggle(".impacto", "show") | ||
.addTo(controller); | .addTo(controller); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 02:11, 15 October 2021
<!DOCTYPE html>
Header
Ícono
Datos
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus architecto numquam explicabo minus nemo perspiciatis sint sunt rerum quia voluptatum maiores minima, optio laboriosam eligendi voluptas, dolore facilis modi autem tempore est. Dicta, officia. Pariatur nostrum minus quae fugiat aliquam, temporibus amet atque. Assumenda dolor hic possimus officiis, ut vero, cumque nam dolorum, quam perspiciatis est? Sint culpa harum inventore aliquid quis qui voluptate voluptas consequatur excepturi dolorum neque molestias ab fugiat doloribus, distinctio iste animi eligendi. Nostrum corporis saepe quo impedit provident consequatur totam fugit nihil minus fugiat, quisquam eum sint ducimus quis, eveniet pariatur mollitia velit numquam. Distinctio.
Problemática
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam laudantium molestias numquam quasi iure necessitatibus tenetur? Sequi voluptatum nobis, quae obcaecati, eaque ducimus molestias deserunt debitis quod aspernatur ullam aut dolores repudiandae laudantium ut soluta delectus, suscipit dolore quam? Ut sequi perspiciatis dolorum corporis? In architecto tempore asperiores id dolorum alias facilis beatae ratione fugit dolor facere non eaque fuga ipsam nihil ducimus cum, a rem? Alias fugiat incidunt, ab nemo modi sapiente? Et, illum!
Ícono
Detección
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est voluptates eius laborum dolor. Ratione repellendus nobis pariatur. Eum suscipit eveniet praesentium dicta optio laboriosam minima perferendis natus ipsa placeat voluptatum, consequuntur totam. Suscipit itaque, odit possimus aspernatur quae ad, dolores officiis reiciendis soluta quod iure, asperiores cumque! Repellat soluta corporis laborum unde eos, consectetur repudiandae nobis quasi aperiam quo id inventore veniam quae in quod natus, amet sed doloremque ex sapiente vitae! Quam, voluptate id.
Ícono
Ícono
Remoción
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus architecto numquam explicabo minus nemo perspiciatis sint sunt rerum quia voluptatum maiores minima, optio laboriosam eligendi voluptas, dolore facilis modi autem tempore est. Dicta, officia. Pariatur nostrum minus quae fugiat aliquam, temporibus amet atque. Assumenda dolor hic possimus officiis, ut vero, cumque nam dolorum, quam perspiciatis est? Sint culpa harum inventore aliquid quis qui voluptate voluptas consequatur excepturi dolorum neque molestias ab fugiat doloribus, distinctio iste animi eligendi. Nostrum corporis saepe quo impedit provident consequatur totam fugit nihil minus fugiat, quisquam eum sint ducimus quis, eveniet pariatur mollitia velit numquam. Distinctio.
Ícono
Resultados
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus architecto numquam explicabo minus nemo perspiciatis sint sunt rerum quia voluptatum maiores minima, optio laboriosam eligendi voluptas, dolore facilis modi autem tempore est. Dicta, officia. Pariatur nostrum minus quae fugiat aliquam, temporibus amet atque. Assumenda dolor hic possimus officiis, ut vero, cumque nam dolorum, quam perspiciatis est? Sint culpa harum inventore aliquid quis qui voluptate voluptas consequatur excepturi dolorum neque molestias ab fugiat doloribus, distinctio iste animi eligendi. Nostrum corporis saepe quo impedit provident consequatur totam fugit nihil minus fugiat, quisquam eum sint ducimus quis, eveniet pariatur mollitia velit numquam. Distinctio.
Impacto
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam laudantium molestias numquam quasi iure necessitatibus tenetur? Sequi voluptatum nobis, quae obcaecati, eaque ducimus molestias deserunt debitis quod aspernatur ullam aut dolores repudiandae laudantium ut soluta delectus, suscipit dolore quam? Ut sequi perspiciatis dolorum corporis? In architecto tempore asperiores id dolorum alias facilis beatae ratione fugit dolor facere non eaque fuga ipsam nihil ducimus cum, a rem? Alias fugiat incidunt, ab nemo modi sapiente? Et, illum!