Difference between revisions of "Team:TecCEM/Carlos"

Line 30: Line 30:
 
         #bodyContent h5 {
 
         #bodyContent h5 {
 
             margin-bottom: 0px;
 
             margin-bottom: 0px;
 +
        }
 +
       
 +
        #bodyContent a[href ^="https://"],
 +
        .link-https {
 +
            padding-right: 0px;
 
         }
 
         }
 
          
 
          
Line 39: Line 44:
 
          
 
          
 
         body,
 
         body,
−
         html {
+
         html {}
−
            background: rgb(79, 71, 218);
+
−
            background: linear-gradient( 151deg, rgba(79, 71, 218, 1) 0%, rgba(222, 5, 217, 1) 35%, rgba(151, 205, 240, 1) 100%);
+
−
        }
+
 
          
 
          
 
         header,
 
         header,
Line 54: Line 56:
 
         header h1 {
 
         header h1 {
 
             font-size: 50px;
 
             font-size: 50px;
 +
        }
 +
       
 +
        .background {
 +
            min-height: max-content;
 +
            background: rgb(79, 71, 218);
 +
            background: linear-gradient( 151deg, rgba(79, 71, 218, 1) 0%, rgba(222, 5, 217, 1) 35%, rgba(151, 205, 240, 1) 100%);
 
         }
 
         }
 
          
 
          
Line 93: Line 101:
  
 
<body>
 
<body>
−
     <header>
+
     <section class="background">
−
         <h1>Header</h1>
+
         <header>
−
    </header>
+
            <h1>Header</h1>
−
    <section class="animation_1">
+
        </header>
−
        <img class="paper_1" src="./paper.png" alt="img" />
+
        <section class="animation_1">
−
        <div class="container">
+
            <img class="paper_1" src="./paper.png" alt="img" />
−
            <div class="item">
+
            <div class="container">
−
                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
+
                <div class="item">
−
                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!
 +
                </div>
 +
                <div class="item"></div>
 
             </div>
 
             </div>
−
             <div class="item"></div>
+
             <div class="container">
−
        </div>
+
                <div class="item"></div>
−
        <div class="container">
+
                <div class="item">
−
            <div class="item"></div>
+
                    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
−
            <div class="item">
+
                    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
+
                </div>
−
                pariatur aut impedit rem placeat iste. In, culpa!
+
 
             </div>
 
             </div>
−
        </div>
+
            <div class="container">
−
        <div class="container">
+
                <div class="item">
−
            <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
−
                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!
−
                pariatur aut impedit rem placeat iste. In, culpa!
+
                </div>
 +
                <div class="item"></div>
 
             </div>
 
             </div>
−
            <div class="item"></div>
+
         </section>
−
         </div>
+
        <section class="animation_2">
−
    </section>
+
            <img class="paper_2" src="./paper.png" alt="img" />
−
    <section class="animation_2">
+
            <div class="container">
−
        <img class="paper_2" src="./paper.png" alt="img" />
+
                <div class="item"></div>
−
        <div class="container">
+
                <div class="item">
−
            <div class="item"></div>
+
                    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
−
            <div class="item">
+
                    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
+
                </div>
−
                pariatur aut impedit rem placeat iste. In, culpa!
+
 
             </div>
 
             </div>
−
        </div>
+
            <div class="container">
−
        <div class="container">
+
                <div class="item">
−
            <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
−
                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!
−
                pariatur aut impedit rem placeat iste. In, culpa!
+
                </div>
 +
                <div class="item"></div>
 
             </div>
 
             </div>
−
             <div class="item"></div>
+
             <div class="container">
−
        </div>
+
                <div class="item"></div>
−
        <div class="container">
+
                <div class="item">
−
            <div class="item"></div>
+
                    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
−
            <div class="item">
+
                    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
+
                </div>
−
                pariatur aut impedit rem placeat iste. In, culpa!
+
 
             </div>
 
             </div>
−
         </div>
+
         </section>
−
    </section>
+
        <footer>
−
    <footer>
+
            <h1>Footer</h1>
−
        <h1>Footer</h1>
+
        </footer>
−
    </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/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/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/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/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/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/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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js" integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ==" crossorigin="anonymous"></script>
−
    <script>
+
        <script>
−
        const flightPath1 = {
+
            const flightPath1 = {
−
            curviness: 0.2,
+
                curviness: 0.2,
−
            autoRotate: true,
+
                autoRotate: true,
−
            values: [{
+
                values: [{
−
                x: 0,
+
                    x: 0,
−
                y: 200,
+
                    y: 200,
−
            }, {
+
                }, {
−
                x: -600,
+
                    x: -600,
−
                y: 200,
+
                    y: 200,
−
            }, {
+
                }, {
−
                x: -600,
+
                    x: -600,
−
                y: 400,
+
                    y: 400,
−
            }, {
+
                }, {
−
                x: 200,
+
                    x: 200,
−
                y: 400,
+
                    y: 400,
−
            }, {
+
                }, {
−
                x: 200,
+
                    x: 200,
−
                y: 650,
+
                    y: 650,
−
            }, {
+
                }, {
−
                x: -500,
+
                    x: -500,
−
                y: 650,
+
                    y: 650,
−
            }, {
+
                }, {
−
                x: -500,
+
                    x: -500,
−
                y: window.innerHeight,
+
                    y: window.innerHeight,
−
            }, ],
+
                }, ],
−
        };
+
            };
  
−
        const flightPath2 = {
+
            const flightPath2 = {
−
            curviness: 0.2,
+
                curviness: 0.2,
−
            autoRotate: true,
+
                autoRotate: true,
−
            values: [{
+
                values: [{
−
                x: 0,
+
                    x: 0,
−
                y: 200,
+
                    y: 200,
−
            }, {
+
                }, {
−
                x: 600,
+
                    x: 600,
−
                y: 200,
+
                    y: 200,
−
            }, {
+
                }, {
−
                x: 600,
+
                    x: 600,
−
                y: 420,
+
                    y: 420,
−
            }, {
+
                }, {
−
                x: -100,
+
                    x: -100,
−
                y: 420,
+
                    y: 420,
−
            }, {
+
                }, {
−
                x: -100,
+
                    x: -100,
−
                y: window.innerHeight,
+
                    y: window.innerHeight,
−
            }, ],
+
                }, ],
−
        };
+
            };
  
−
        const tween1 = new TimelineLite();
+
            const tween1 = new TimelineLite();
  
−
        tween1.add(
+
            tween1.add(
−
            TweenLite.to(".paper_1", 5, {
+
                TweenLite.to(".paper_1", 5, {
−
                bezier: flightPath1,
+
                    bezier: flightPath1,
−
                ease: Power1.easeInOut,
+
                    ease: Power1.easeInOut,
−
            })
+
                })
−
        );
+
            );
  
−
        const tween2 = new TimelineLite();
+
            const tween2 = new TimelineLite();
  
−
        tween2.add(
+
            tween2.add(
−
            TweenLite.to(".paper_2", 5, {
+
                TweenLite.to(".paper_2", 5, {
−
                bezier: flightPath2,
+
                    bezier: flightPath2,
−
                ease: Power1.easeInOut,
+
                    ease: Power1.easeInOut,
−
            })
+
                })
−
        );
+
            );
  
−
        const controller = new ScrollMagic.Controller();
+
            const controller = new ScrollMagic.Controller();
  
−
        const scene1 = new ScrollMagic.Scene({
+
            const scene1 = new ScrollMagic.Scene({
−
                triggerElement: ".animation_1",
+
                    triggerElement: ".animation_1",
−
                duration: 1000,
+
                    duration: 1000,
−
                triggerHook: 0,
+
                    triggerHook: 0,
−
            })
+
                })
−
            .setTween(tween1)
+
                .setTween(tween1)
−
            .setPin(".animation_1")
+
                .setPin(".animation_1")
−
            .addTo(controller);
+
                .addTo(controller);
  
−
        const scene2 = new ScrollMagic.Scene({
+
            const scene2 = new ScrollMagic.Scene({
−
                triggerElement: ".animation_2",
+
                    triggerElement: ".animation_2",
−
                duration: 1000,
+
                    duration: 1000,
−
                triggerHook: 0,
+
                    triggerHook: 0,
−
            })
+
                })
−
            .setTween(tween2)
+
                .setTween(tween2)
−
            .setPin(".animation_2")
+
                .setPin(".animation_2")
−
            .addTo(controller);
+
                .addTo(controller);
−
    </script>
+
        </script>
 +
    </section>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 20:54, 11 October 2021

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