Difference between revisions of "Team:TecCEM/Carlos"

Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
−
<head>
+
<html lang="en">
−
<meta charset="utf-8">
+
  <head>
−
<title>Untitled Document</title>
+
    <meta charset="UTF-8" />
−
</head>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <title>Document</title>
 +
    <style>
 +
      * {
 +
        box-sizing: border-box;
 +
      }
  
−
<body>
+
      body {
−
<div style="display: flex; flex-direction: row; justify-cite: flex-start; flex-wrap: nowrap;align-items: center;">
+
        background: rgb(79, 71, 218);
−
<img style = "width: 70px; height: 70px;margin-right: 10px;" src="https://static.igem.org/mediawiki/2021/1/1c/T--TecCEM--logo.png" alt="">
+
        background: linear-gradient(
−
<h1 style="display: inline">Mostrar citas al pasar el mouse</h1>
+
          151deg,
−
</div>
+
          rgba(79, 71, 218, 1) 0%,
−
+
          rgba(222, 5, 217, 1) 35%,
−
<div class="general">
+
          rgba(151, 205, 240, 1) 100%
−
<div class="left">
+
        );
−
<h2>Left</h2>
+
      }
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi quos consequatur at ex magnam earum facere dicta optio eligendi, nemo reiciendis nobis a ducimus, in autem fugiat fugit. Natus.</p>
+
 
−
</div>
+
      header,
−
<div class="right">
+
      footer {
−
<h2>Right</h2>
+
        height: 100vh;
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi quos consequatur at ex magnam earum facere dicta optio eligendi, nemo reiciendis nobis a ducimus, in autem fugiat fugit. Natus.</p>
+
        display: flex;
−
<p>Como se fue demostrado por Ramirez en 
+
        justify-content: center;
−
<div class="Apacite">
+
        align-items: center;
−
<p>[1]</p>
+
      }
−
<span class="cite">
+
 
−
<h3>Referencia</h3>
+
      header h1 {
−
<p>[1] Secretaría de Salud: Datos abiertos dirección general de epidemiología (2021), https://www.
+
        font-size: 50px;
−
gob.mx/salud/documentos/datos-abiertos-152127.</p>
+
      }
−
</span>
+
      .container {
−
</div>
+
        display: flex;
−
Adicionalmente, encontramos expuesto en
+
      }
−
<div class="Apacite">
+
 
−
<p>(Senin, 2008)</p>
+
      .item {
−
<span class="cite">
+
        text-align: center;
−
<h3>Referencia</h3>
+
        width: 50%;
−
<p>[2] Senin, P. (2008). Dynamic Time Warping Algorithm Review. Science, 2007(December), 1–23. http://129.173.35.31/~pf/Linguistique/Treillis/ReviewDTW.pdf.</p>
+
        height: 30vh;
−
</span>
+
        padding-top: 1em;
−
</div>
+
        padding-bottom: 1em;
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae accusamus perspiciatis labore id excepturi ex facilis! Accusamus, reprehenderit ducimus iure incidunt, dolorum dolorem sint nisi libero amet, quasi, neque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae placeat deserunt, pariatur alias ad eius in ex hic aut, nisi modi quaerat labore, illum numquam. Totam repellat dolorem, culpa cumque. Y finalmente tenemos el trabajo de
+
      }
−
<div class="Apacite">
+
 
−
<p>Altan A et al. (2020)</p>
+
      .animation_1,
−
<span class="cite">
+
      .animation_2 {
−
<h3>Referencia</h3>
+
        background-repeat: no-repeat;
−
<p>[3] Altan, A., & Karasu, S. (2020). Recognition of COVID-19 disease from X-ray images by hybrid model consisting of 2D curvelet transform, chaotic salp swarm algorithm and deep learning technique. Chaos, Solitons and Fractals, 140, 110071. https://doi.org/10.1016/j.chaos.2020.110071</p>
+
        background-position: center;
−
</span>
+
        position: relative;
−
</div>
+
        overflow: hidden;
−
</p>
+
      }
−
</div>
+
 
−
</div>
+
      .paper_1 {
−
<p>hola</p>
+
        height: 70px;
−
+
        position: absolute;
−
<style>
+
        top: 0;
−
.general{
+
        left: 60%;
−
display: flex;
+
      }
−
}
+
 
−
.left{
+
      .paper_2 {
−
background: #7922C8;
+
        height: 70px;
−
padding: 10px;
+
        position: absolute;
−
width: 25%;
+
        top: 0;
−
margin-right: 10px;
+
        left: 20%;
−
}
+
      }
−
.right{
+
    </style>
−
width: 75%;
+
  </head>
−
padding: 10px;
+
  <body>
−
background: #DF9899
+
    <header>
−
}
+
      <h1>Header</h1>
−
.Apacite {
+
    </header>
−
  position: relative;
+
    <section class="animation_1">
−
display: inline;
+
      <img class="paper_1" src="./paper.png" alt="img" />
−
transition: 0.5s;
+
      <div class="container">
−
cursor: pointer;
+
        <div class="item">
−
width: auto;
+
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
−
}
+
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
−
.Apacite:hover{
+
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
−
text-decoration: underline;
+
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
−
}
+
          placeat iste. In, culpa!
−
.cite{
+
        </div>
−
position: absolute;
+
        <div class="item"></div>
−
bottom: 55px;
+
      </div>
−
width: 500px;
+
      <div class="container">
−
background: #fff;
+
        <div class="item"></div>
−
padding: 20px;
+
        <div class="item">
−
box-sizing: border-box;
+
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
−
visibility: hidden;
+
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
−
opacity: 0;
+
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
−
transition: 0.5s;
+
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
−
transform: translateX(-50%) translateY(50px)
+
          placeat iste. In, culpa!
−
}
+
        </div>
−
+
      </div>
−
.Apacite:hover .cite{
+
      <div class="container">
−
visibility: visible;
+
        <div class="item">
−
opacity: 1;
+
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
−
transform: translateX(-50%) translateY(0px)
+
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
−
}
+
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
−
+
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
−
p{
+
          placeat iste. In, culpa!
−
text-align: justify;
+
        </div>
−
display: inline;
+
        <div class="item"></div>
−
font-size: 150em;
+
      </div>
−
}
+
    </section>
−
</style>
+
    <section class="animation_2">
−
+
      <img class="paper_2" src="./paper.png" alt="img" />
−
</body>
+
      <div class="container">
 +
        <div class="item"></div>
 +
        <div class="item">
 +
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
 +
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
 +
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
 +
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
 +
          placeat iste. In, culpa!
 +
        </div>
 +
      </div>
 +
      <div class="container">
 +
        <div class="item">
 +
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
 +
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
 +
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
 +
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
 +
          placeat iste. In, culpa!
 +
        </div>
 +
        <div class="item"></div>
 +
      </div>
 +
      <div class="container">
 +
        <div class="item"></div>
 +
        <div class="item">
 +
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
 +
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
 +
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
 +
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
 +
          placeat iste. In, culpa!
 +
        </div>
 +
      </div>
 +
    </section>
 +
    <footer>
 +
      <h1>Footer</h1>
 +
    </footer>
 +
 
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
 +
      integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
 +
      integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
 +
      integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"
 +
      integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"
 +
      integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"
 +
      integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"
 +
      integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script>
 +
      const flightPath1 = {
 +
        curviness: 0.2,
 +
        autoRotate: true,
 +
        values: [
 +
          { x: 0, y: 110 },
 +
          { x: -600, y: 110 },
 +
          { x: -600, y: 290 },
 +
          { x: 200, y: 290 },
 +
          { x: 200, y: 500 },
 +
          { x: -500, y: 500 },
 +
          { x: -500, y: 630 },
 +
        ],
 +
      };
 +
 
 +
      const flightPath2 = {
 +
        curviness: 0.2,
 +
        autoRotate: true,
 +
        values: [
 +
          { x: 0, y: 110 },
 +
          { x: 600, y: 110 },
 +
          { x: 600, y: 300 },
 +
          { x: -100, y: 300 },
 +
          { x: -100, y: 620 },
 +
        ],
 +
      };
 +
 
 +
      const tween1 = new TimelineLite();
 +
 
 +
      tween1.add(
 +
        TweenLite.to(".paper_1", 5, {
 +
          bezier: flightPath1,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
 +
 
 +
      const tween2 = new TimelineLite();
 +
 
 +
      tween2.add(
 +
        TweenLite.to(".paper_2", 5, {
 +
          bezier: flightPath2,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
 +
 
 +
      const controller = new ScrollMagic.Controller();
 +
 
 +
      const scene1 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween1)
 +
        .setPin(".animation_1")
 +
        .addTo(controller);
 +
 
 +
      const scene2 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween2)
 +
        .setPin(".animation_2")
 +
        .addTo(controller);
 +
    </script>
 +
  </body>
 
</html>
 
</html>

Revision as of 21:09, 7 October 2021

<!DOCTYPE html> Document

Header

img
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit pariatur aut impedit rem placeat iste. In, culpa!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit pariatur aut impedit rem placeat iste. In, culpa!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit pariatur aut impedit rem placeat iste. In, culpa!
img
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit pariatur aut impedit rem placeat iste. In, culpa!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit pariatur aut impedit rem placeat iste. In, culpa!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt quae exercitationem culpa laborum, tempore unde aperiam repellendus, nemo similique facere soluta laboriosam sit pariatur aut impedit rem placeat iste. In, culpa!

Footer