Difference between revisions of "Team:Vilnius-Lithuania/Collaborations"

m
Line 1: Line 1:
−
{{Vilnius-Lithuania/TopBar}}
 
 
{{Vilnius-Lithuania/menuOverlay}}
 
{{Vilnius-Lithuania/menuOverlay}}
 +
{{Vilnius-Lithuania/ContentPage}}
  
 
<html>
 
<html>
 
<head>
 
<head>
−
    <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/fonts.css&action=raw&ctype=text/css" />
+
<script>
−
     <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Collaborations&action=raw&ctype=text/css" />
+
     document.querySelector(".introContainer > span").style.backgroundImage = "url('https://static.igem.org/mediawiki/2019/d/da/T--Vilnius-Lithuania--cover19.jpg')";
−
    <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Animations&action=raw&ctype=text/css" />
+
</script>
 
</head>
 
</head>
 
<body>
 
<body>
−
    <div class="introContainer">
 
−
        <div class="heading">Collaborations</div>
 
−
        <div class="heading other">Collaborations</div>
 
−
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
−
    </div>
 
−
    <div class="milkWave" id="animWave">
 
−
        <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
−
            <path class="animWavePath" d="" fill="#fafafc"/>
 
−
        </svg>
 
−
    </div>
 
 
     <main>
 
     <main>
−
          
+
         <input id="headingTitleText" type="hidden" value="Collaborations" />
 +
        <div class="contentBlock">
 +
            <div class="content">
 +
                <div class="h2 larger">Collaborations</div>
 +
                <div class="h3">Paper airplane</div>
 +
                <p class="content-paragraph">
 +
                    Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Porttitor lacus luctus accumsan tortor posuere ac ut. Id leo in vitae turpis. Gravida neque convallis a cras semper auctor neque vitae tempus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis egestas maecenas pharetra convallis.
 +
                </p>
 +
                <div class="h3">Postcards</div>
 +
                <p class="content-paragraph">
 +
                    Sem nulla pharetra diam sit amet nisl. Ultricies integer quis auctor elit sed. Quis varius quam quisque id diam vel quam elementum. Suspendisse interdum consectetur libero id faucibus nisl. Lacinia at quis risus sed vulputate odio ut enim. Pulvinar mattis nunc sed blandit. Nisl purus in mollis nunc.
 +
                </p>
 +
                <div class="h3">Roblox in Taiwan</div>
 +
                <p class="content-paragraph">
 +
                    Sagittis purus sit amet volutpat consequat mauris nunc congue. Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum.
 +
                </p>
 +
                <div class="h3">Oslo in 3D</div>
 +
                <p class="content-paragraph">
 +
                    Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum.Vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis egestas maecenas pharetra convallis.
 +
                </p>
 +
                <div class="h3 references">References</div>
 +
                <p class="reference">
 +
                    1. Hao, Z., AghaKouchak, A., Nakhjiri, N. & Farahmand, A. Global Integrated Drought Monitoring and Prediction System (GIDMaPS) data sets. figshare http://dx.doi.org/10.6084/m9.figshare.853801 (2014).
 +
                </p>
 +
            </div>
 +
        </div>
 
     </main>
 
     </main>
 
     <script>
 
     <script>
 
         document.getElementById("fixedOverlay").classList.add("team");
 
         document.getElementById("fixedOverlay").classList.add("team");
−
    </script>
 
−
 
−
    <script>
 
−
        const collabs = [
 
−
            {name: "Lėktuvėlis", photo1: "https://cdn.pixabay.com/photo/2016/08/20/11/34/paper-plane-1607340_1280.jpg", photo2: "https://s31450.pcdn.co/wp-content/uploads/2016/02/iStock_000042222888_Medium_160304.jpg", text: "Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Porttitor lacus luctus accumsan tortor posuere ac ut. Id leo in vitae turpis. Gravida neque convallis a cras semper auctor neque vitae tempus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis egestas maecenas pharetra convallis."},
 
−
            {name: "Atvirutės", photo1: "https://cdn.pixabay.com/photo/2016/05/13/17/16/letters-1390463_1280.jpg", photo2: "https://sites.tufts.edu/insight/wp-content/blogs.dir/2889/files/2015/12/Cathedral-High-School-Boston-Mentoring.png", text: "Sem nulla pharetra diam sit amet nisl. Ultricies integer quis auctor elit sed. Quis varius quam quisque id diam vel quam elementum. Suspendisse interdum consectetur libero id faucibus nisl. Lacinia at quis risus sed vulputate odio ut enim. Pulvinar mattis nunc sed blandit. Nisl purus in mollis nunc."},
 
−
            {name: "Mūsų Mielas ir Brangusis Robloxas Taivane", photo1: "https://i.ytimg.com/vi/NIY6AG3pAgU/maxresdefault.jpg", photo2: "https://4.bp.blogspot.com/-1kYAohpsDYY/URwD2kiiFhI/AAAAAAAACSo/wEWQu1b51nM/s1600/RobloxScreenShot02122013_201948511.jpg", text: "Sagittis purus sit amet volutpat consequat mauris nunc congue. Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum."},
 
−
        ]; // TODO: change photos and content
 
−
    </script>
 
−
    <script>
 
−
        let cEl = (tagName, className, children = []) => {
 
−
            let element = document.createElement(tagName);
 
−
            element.className = className;
 
−
            children.forEach((child)=>element.appendChild(child));
 
−
            return element;
 
−
        };
 
−
        let main = document.querySelector("main");
 
−
        for (let collab of collabs){
 
−
            let collabName = cEl("div", "name");
 
−
            collabName.innerText = collab.name;
 
−
            let photo1 = cEl("span", "");
 
−
            photo1.style = "background-image: url(" + collab.photo1 + ");";
 
−
            let photo2 = cEl("span", "");
 
−
            photo2.style = "background-image: url(" + collab.photo2 + ");";
 
−
            let collabPhotos = cEl("div", "photos", [photo1, photo2]);
 
−
            let collabText = cEl("div", "text")
 
−
            collabText.innerText = collab.text;
 
−
            let collabDiv = cEl("div", "collabSingle", [collabName, collabPhotos, collabText]);
 
−
 
−
            main.appendChild(collabDiv);
 
−
        }
 
−
    </script>
 
−
   
 
−
    <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/WaveScript&action=raw&ctype=text/javascript"></script>
 
−
    <script>
 
−
        var setWaveParams = () => {
 
−
            let container = document.querySelector(".introContainer");
 
−
            return {
 
−
                width: container.offsetWidth,
 
−
                height: container.offsetHeight,
 
−
                waveWidth: container.offsetWidth,
 
−
                waveHeight: container.offsetHeight * 0.9,
 
−
                waveDelta: 15,
 
−
                speed: 0.15,
 
−
                wavePoints: 5,
 
−
            };
 
−
        }
 
−
        makeWave(document.getElementById("animWave"), setWaveParams);
 
−
    </script>
 
−
 
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/ScrollFadeIn&action=raw&ctype=text/javascript"></script>
 
−
<script>
 
−
scrollFadeIn(Array.from(document.querySelectorAll(".collabSingle")).map((item)=>Array.from(item.children)));
 
−
    </script>
 
−
    <script>
 
−
        // Title move animation
 
−
        function animate() {
 
−
            let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
 
−
            let scroll = scrollTop / window.innerHeight;
 
−
            if (scroll > 1) scroll = 1;
 
−
            let unit = "vw";
 
−
            if (window.innerWidth / window.innerHeight > 1) unit = "vh"
 
−
 
−
            document.querySelector(".introContainer .heading").style.transform = "translateX(-" + (60 * scroll) + unit + ")";
 
−
            document.querySelector(".introContainer .heading.other").style.transform = "translateX(" + (35 * scroll) + unit + ")";
 
−
        }
 
−
        window.addEventListener("scroll", animate, {passive: 1});
 
−
        window.addEventListener("resize", animate, {passive: 1});
 
−
        document.addEventListener("load", animate, {passive: 1});
 
−
        animate();
 
−
 
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Vilnius-Lithuania/footer}}
 
{{Vilnius-Lithuania/footer}}

Revision as of 09:56, 24 October 2020

Collaborations
Paper airplane

Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Porttitor lacus luctus accumsan tortor posuere ac ut. Id leo in vitae turpis. Gravida neque convallis a cras semper auctor neque vitae tempus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis egestas maecenas pharetra convallis.

Postcards

Sem nulla pharetra diam sit amet nisl. Ultricies integer quis auctor elit sed. Quis varius quam quisque id diam vel quam elementum. Suspendisse interdum consectetur libero id faucibus nisl. Lacinia at quis risus sed vulputate odio ut enim. Pulvinar mattis nunc sed blandit. Nisl purus in mollis nunc.

Roblox in Taiwan

Sagittis purus sit amet volutpat consequat mauris nunc congue. Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum.

Oslo in 3D

Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum.Vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis egestas maecenas pharetra convallis.

References

1. Hao, Z., AghaKouchak, A., Nakhjiri, N. & Farahmand, A. Global Integrated Drought Monitoring and Prediction System (GIDMaPS) data sets. figshare http://dx.doi.org/10.6084/m9.figshare.853801 (2014).