Difference between revisions of "Team:Vilnius-Lithuania/test/index.html"

(Blanked the page)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Vilnius-Lithuania/Loader}}
 
{{Vilnius-Lithuania/menuOverlay}}
 
  
<html>
 
<head>
 
<meta charset="utf-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<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" />
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/index.css&action=raw&ctype=text/css" />
 
        <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" />
 
</head>
 
 
<body>
 
    <section class="container" id="intro-page">
 
        <div id="intro-header">
 
            <svg id="waves" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="water-wave" id="wave0" d="" fill="#fafafc" waveHeight="360" waveDelta="-30" speed="0.2" wavePoints="8" />
 
<path class="water-wave" id="wave1" d="" fill="#679BF4" waveHeight="330" waveDelta="-36" speed="0.11" wavePoints="6" />
 
<path class="water-wave" id="wave2" d="" fill="#4080ED" waveHeight="300" waveDelta="-40" speed="0.18" wavePoints="8" />
 
<path class="water-wave" id="wave3" d="" fill="#2454CD" waveHeight="270" waveDelta="-35" speed="0.13" wavePoints="5" />
 
<path class="water-wave" id="wave4" d="" fill="#11348F" waveHeight="240" waveDelta="-40" speed="0.13" wavePoints="6" />
 
<path class="water-wave" id="wave5" d="" fill="#142E71" waveHeight="210" waveDelta="-41" speed="0.15" wavePoints="5" />
 
<path class="water-wave" id="wave6" d="" fill="#0F162C" waveHeight="180" waveDelta="-35" speed="0.18" wavePoints="10" />
 
<path class="water-wave" id="wave7" d="" fill="#121212" waveHeight="150" waveDelta="-28" speed="0.28" wavePoints="7" />
 
</svg>
 
        </div>
 
        <div id="intro">
 
            <div id="text-wrapper">
 
                <div id="title" class="elevate-navbar">
 
                    <h1>flavo<em>flow</em></h1>
 
                </div>
 
                <div id="desc-wrapper">
 
                    <div id="center-desc" style="width: -webkit-fit-content;">
 
                        <span id="description"></span>
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
    </section>
 
    <main id="storytelling">
 
        <div class="black-bg big-section">
 
            <div id="firstpart" class="section centered">
 
                <div id="fish-doodle" class="centered animation">
 
                </div>
 
                <div class="centered wdt-60">
 
                    <p class="white center">Throughout history <b>fish</b> have always played a <b>crucial part in a nutritious diet</b> across the world.</p>
 
                </div>
 
            </div>
 
            <div id="secondpart" class="section centered">
 
                <div class="centered wd-60">
 
                    <p class="white center">Over the past decades total production, trade and consumption of fish and aquaculture products <b>significantly expanded.</b></p>
 
                </div>
 
                <div class="centered wd-60">
 
                    <p class="white center">Almost <b>156 million tonnes</b> of fish ended up on our plates in 2018.</p>
 
                </div>
 
            </div>
 
            <div id="statistics" class="section two-parts">
 
                <h1 class="white">+<span id="production">0</span>%</h1>
 
                <h1 class="white">+<span id="consumption">0</span>%</h1>
 
                <p class="white">Rise in global aquaculture production from 1990 to 2018</p>
 
                <p class="white">Rise in total food fish consumption from 1990 to 2018</p>
 
            </div>
 
            <div id="fourthpart" class="section centered">
 
                <div class="centered wd-60">
 
                    <p class="white">Growing fish consumption drives a need for a more <b>intensive fish farming</b> - a need which emerging aquaculture farms have stepped in to satisfy.</p>
 
                </div>
 
                <div class="centered wd-60">
 
                    <p class="white">In order to obtain greater amounts of fish in a shorter period of time, aquafarms have implemented <b>recirculating aquaculture systems (RAS)</b>.</p>
 
                </div>
 
                <div class="centered">
 
                    <div id="ras-healthy" class="animation">
 
                    </div>
 
                </div>
 
            </div>
 
            <div id="fifthpart" class="section two-parts">
 
                <div class="half">
 
                    <h2 class="white"><b>Advantages</b> of RAS</h2>
 
                    <div class="list">
 
                        <div class="list-item">
 
                            <div><img src="https://static.igem.org/mediawiki/2020/7/74/T--Vilnius-Lithuania--mainPage-pros1.svg"></div>
 
                            <p>reduced water and land needs</p>
 
                        </div>
 
                        <div class="list-item">
 
                            <div><img src="https://static.igem.org/mediawiki/2020/a/a3/T--Vilnius-Lithuania--mainPage-pros2.svg"></div>
 
                            <p>fully controlled environment</p>
 
                        </div>
 
                        <div class="list-item">
 
                            <div><img src="https://static.igem.org/mediawiki/2020/4/4c/T--Vilnius-Lithuania--mainPage-pros3.svg"></div>
 
                            <p>automated feeding strategy</p>
 
                        </div>
 
                    </div>
 
                </div>
 
                <div class="half">
 
                    <h2 class="white"><b>Disadvantages</b> of RAS</h2>
 
                    <div class="list">
 
                        <div class="list-item">
 
                            <div><img src="https://static.igem.org/mediawiki/2020/b/b1/T--Vilnius-Lithuania--mainPage-cons1.svg"></div>
 
                            <p>high electricity consumption</p>
 
                        </div>
 
                        <div class="list-item">
 
                            <div><img src="https://static.igem.org/mediawiki/2020/e/ea/T--Vilnius-Lithuania--mainPage-cons2.svg"></div>
 
                            <p>water quality</p>
 
                        </div>
 
                    </div>
 
                </div>
 
            </div>
 
            <div id="sixthpart" class="section centered">
 
                <div class="centered">
 
                    <h1>However, the <b>biggest challenge</b> is...</h1>
 
                </div>
 
                <div id="infection" class="animation"></div>
 
            </div>
 
            <div id="seventhpart" class="section centered">
 
                <div class="centered wd-60">
 
                    <p class="white">Since the water in RAS is circulated between tanks, if <b>one bacteria-infected fish</b> enters the system, not long after, the entire RAS system can become <b>contaminated</b>.</p>
 
                </div>
 
                <div class="centered">
 
                    <div id="ras-sick" class="animation">
 
                    </div>
 
                </div>
 
            </div>
 
            <div class="milkWave">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#fafafc" />
 
</svg>
 
            </div>
 
        </div>
 
 
        <div class="white-bg big-section">
 
            <div class="section centered">
 
                <h1 class="black center">
 
                    THE PROBLEM
 
                </h1>
 
            </div>
 
            <div class="section centered wdt-60">
 
                <p class="black center">Diseases caused by Flavobacterium spp. constitute one of the <b>biggest host</b> and geographic ranges of the <b>bacterial fish pathogens</b>.</p>
 
            </div>
 
            <div id="bact" class="section centered">
 
                <div class="section centered wdt-60">
 
                    <p class="black center">The<b> most common</b> of these bacteria are the two opportunistic species:</p>
 
                </div>
 
                <div class="row">
 
                    <div class="half">
 
                        <h2 class="black center bact">Flavobacterium<br>psychrophilum</h2>
 
                        <svg class="cause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.15 72.9" xmlns:v="https://vecta.io/nano "><path d="M1.5,64.13,8.78,71.4l8-8 " fill="none " stroke="#222 " stroke-linecap="round " stroke-linejoin="round" stroke-width="3 "/><text transform="matrix(0 1 -1 0 4.85 0) " font-size="18 " font-family="montserrat-light,sans-serif ">causes</text></svg>
 
                        <p class="yellow center"><b>bacterial gill disease<br>&<br>rainbow trout fry syndrome</b></p>
 
                    </div>
 
                    <div class="half">
 
                        <h2 class="black center bact">Flavobacterium<br>columnare</h2>
 
                        <svg class="cause" xmlns="http://www.w3.org/2000/svg " viewBox="0 0 20.15 72.9" xmlns:v="https://vecta.io/nano"><path d="M1.5,64.13,8.78,71.4l8-8 " fill="none " stroke="#222 " stroke-linecap="round " stroke-linejoin="round" stroke-width="3 "/><text transform="matrix(0 1 -1 0 4.85 0) " font-size="18 " font-family="montserrat-light,sans-serif ">causes</text></svg>
 
                        <p class="yellow center"><b>columnaris disease</b></p>
 
                    </div>
 
                </div>
 
            </div>
 
 
        </div>
 
        <div id="threebacsec">
 
            <div class="black-bg big-section">
 
                <div class="milkWave rotate-wave">
 
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#fafafc" />
 
</svg>
 
                </div>
 
                <div class="section centered two-parts">
 
                    <div class="centered">
 
                        <h1><b>What the Flavo</b><br>is going on with the fish?</h1>
 
                    </div>
 
                </div>
 
                <div id="fish-symptoms" class="section centered wdt-80">
 
                    <div class="centered wd-60">
 
                        <p class="white">Typically, these diseases are denoted by heavy <b>bacterial colonizations</b> of gill epithelium and eroded fin tips.</p>
 
                    </div>
 
                    <div class="centered">
 
                        <div id="sick-fish" class="animation "></div>
 
                    </div>
 
                    <div class="centered wd-60">
 
                        <p class="white">However, after these physical changes are being seen, the <b>respiratory</b> and <b>osmoregulatory functions</b> are already <b>damaged</b>.</p>
 
                    </div>
 
 
                </div>
 
                <div id="die-offs" class="section centered">
 
                    <div class="centered wd-60">
 
                        <p class="white">Thus, if the disease is not detected in a span of a few days, it can result in <b class="emphasize ">massive fish die-offs</b>.</p>
 
                    </div>
 
                    <div class="centered">
 
                        <img src="https://static.igem.org/mediawiki/2020/4/42/T--Vilnius-Lithuania--mainPage-deadFish.svg">
 
                    </div>
 
                </div>
 
                <div class="section centered">
 
 
                    <div class="centered wd-60">
 
                        <p class="white">Are there any solutions to this problem?</p>
 
                    </div>
 
                </div>
 
                <div class="milkWave">
 
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#fafafc" />
 
</svg>
 
                </div>
 
            </div>
 
 
            <div class="white-bg big-section">
 
                <div class="section centered">
 
                    <div class="centered">
 
                        <h1 class="black center">Actually, yes!</h1>
 
                    </div>
 
                </div>
 
                <div class="section centered wd-60">
 
                    <div>
 
                        <p class="black center">We have found <b>three</b> major approaches to solving the Flavoproblem.</p>
 
                        <div class="animation" id="threeBac"></div>
 
                    </div>
 
                </div>
 
 
            </div>
 
            <div class="white-bg big-section smallWaves">
 
                <div class="milkWave small">
 
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#DDE4FD" />
 
</svg>
 
                </div>
 
                <div class="milkWave small" style="top: 20px;">
 
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#B8C7FC" />
 
</svg>
 
                </div>
 
                <div class="milkWave small" style="top: 40px;">
 
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#8BA2F7" />
 
</svg>
 
                </div>
 
                <div class="milkWave small" style="top: 60px;">
 
                    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#6281ef" />
 
</svg>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="lightblue-bg big-section">
 
            <div class="section centered">
 
                <div class="centered">
 
                    <h1 class="white title">detection</h1>
 
                </div>
 
            </div>
 
            <div class="section centered wd-50">
 
                <div>
 
                    <p class="white">One of our main goals is the development of a <b>detection test</b> that is based on <b>helicase-dependent amplification <em>(HDA)</em></b> and <b>lateral-flow assay <em>(LFA)</em></b> methods. This kit will help farmers in identifying
 
                        what the Flavo is in their tanks.</p>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="lightblue-bg big-section smallWaves">
 
            <div class="milkWave small">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d=" " fill="#4E71EB" />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 20px;">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d=" " fill="#3C62E3" />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 40px;">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#365AD8" />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 60px;">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#3356CE" />
 
</svg>
 
            </div>
 
        </div>
 
        <div class="brightblue-bg big-section">
 
            <div class="section centered">
 
                <div class="centered">
 
                    <h1 class="white title">treatment</h1>
 
                </div>
 
            </div>
 
 
            <div class="section centered wd-50">
 
                <div>
 
                    <p class="white">Detection, however, is only a tool which will reduce aquafarm’s losses - it will not solve the underlying problem.</p>
 
                </div>
 
            </div>
 
            <div class="section centered wd-50">
 
                <div>
 
                    <p class="white">Due to this reason, we have developed a new fundamental method to treat these diseases based on <b>toxin-antitoxin</b> or <b>exolysin-endolysin</b> systems. </p>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="brightblue-bg big-section smallWaves">
 
            <div class="milkWave small">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#2B4FC9" />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 20px;">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d=""  fill="#264AC6" />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 40px;">
 
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#103BAD" />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 60px;">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d=" " fill="#11348F" />
 
</svg>
 
            </div>
 
        </div>
 
        <div class="darkblue-bg big-section">
 
            <div class="section centered">
 
                <div class="centered">
 
                    <h1 class="white title">prevention</h1>
 
                </div>
 
            </div>
 
            <div class="section centered wd-50">
 
                <div>
 
                    <p class="white">On the other hand, no matter how perfect the treatment strategy is, it solves only the consequences of the disease.</p>
 
                </div>
 
            </div>
 
            <div class="section centered wd-50">
 
                <div>
 
                    <p class="white">Keeping this in mind, we have also created an innovative prevention tool, which is based on the <b>packaging of immunogenic proteins into alginate beads</b>. </p>
 
                </div>
 
            </div>
 
        </div>
 
        <div class="darkblue-bg big-section smallWaves">
 
            <div class="milkWave small">
 
                <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#142455" />
 
</svg>
 
            </div>
 
            <div class="milkWave small " style="top: 20px; ">
 
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath " d=" " fill="#131F43 " />
 
</svg>
 
            </div>
 
            <div class="milkWave small " style="top: 40px; ">
 
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath " d=" " fill="#0F162C " />
 
</svg>
 
            </div>
 
            <div class="milkWave small" style="top: 60px;">
 
                <svg width="100%" height="100%" version="1.1 " xmlns="http://www.w3.org/2000/svg">
 
<path class="animWavePath" d="" fill="#121212" />
 
</svg>
 
            </div>
 
        </div>
 
        <div id="links" class="black-bg big-section">
 
            <div class="section centered">
 
                <div class="centered">
 
                    <div id="dive" class="animation"></div>
 
                </div>
 
            </div>
 
            <div class="section centered nf">
 
                <div class="row">
 
                    <div class="link">
 
                        <object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/0/02/T--Vilnius-Lithuania--mainPage-designLink.svg"></object>
 
                        <h1>Design</h1>
 
                    </div>
 
                    <div class="link">
 
                        <object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/e/ef/T--Vilnius-Lithuania--mainPage-resultsLink.svg"></object>
 
                        <h1>Results</h1>
 
                    </div>
 
                    <div class="link">
 
                        <object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/f/f2/T--Vilnius-Lithuania--mainPage-softwareLink.svg"></object>
 
                        <h1>Software</h1>
 
                    </div>
 
 
                </div>
 
                <div class="row">
 
                    <div class="link"><object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/4/45/T--Vilnius-Lithuania--mainPage-modelLink.svg"></object>
 
                        <h1>Model</h1>
 
                    </div>
 
 
                    <div class="link"><object type="image/svg+xml" data="https://static.igem.org/mediawiki/2020/9/9b/T--Vilnius-Lithuania--mainPage-hp.svg"></object>
 
                        <h1>Human<br>practices</h1>
 
                    </div>
 
 
                </div>
 
            </div>
 
        </div>
 
    </main>
 
        <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 type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/ScrollFadeIn&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/gsap.min.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/ScrollTrigger.min.js&action=raw&ctype=text/javascript"></script>
 
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/lottie.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/zhoovis.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/RAShealthy&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/infection&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/zuve&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/RASsick&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/threebac&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/anim/dive&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></script>
 
    <script>
 
        scrollFadeIn(Array.from(document.querySelectorAll(".section")).map((item) => Array.from(item.children)));
 
    </script>
 
</body>
 
 
</html>
 
 
{{Vilnius-Lithuania/footer}}
 

Latest revision as of 10:37, 21 October 2020