Difference between revisions of "Team:Tuebingen/galleryTest"

 
 
(15 intermediate revisions by the same user not shown)
Line 147: Line 147:
 
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 
     filter: grayscale(100%);
 
     filter: grayscale(100%);
−
     max-height: 70px;
+
     max-height: 50px;
 
}
 
}
 
.sponsorLogo img:hover{
 
.sponsorLogo img:hover{
Line 171: Line 171:
 
* {
 
* {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
−
}
 
−
body {
 
−
    background: url("https://2019.igem.org/wiki/images/e/ee/T--Tuebingen--gallery_bg.png");
 
−
    background-attachment: fixed;
 
−
    background-size: 100% auto;
 
−
    background-repeat: no-repeat;
 
−
 
 
}
 
}
  
Line 679: Line 672:
 
}
 
}
  
−
.active div:not(.show) img {
+
.gallery .active div:not(.show) img {
 
filter: blur(3px);
 
filter: blur(3px);
 +
}
 +
.test3{
 +
    background: url("https://2019.igem.org/wiki/images/e/ee/T--Tuebingen--gallery_bg.png");
 +
    background-attachment: fixed;
 +
    background-size: 100% auto;
 +
    background-repeat: no-repeat;
 
}
 
}
 
</style>
 
</style>
Line 710: Line 709:
 
                     </a>
 
                     </a>
 
                     <div class="dropdown-menu">
 
                     <div class="dropdown-menu">
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/description">Description</a>
+
                         <a class="dropdown-item" href="/Team:Tuebingen/description">Description</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/incretin">Incretin</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/incretin">Incretin</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/kill_switch">Kill Switch</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/kill_switch">Kill Switch</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/cpp">Cell Penetrating Peptides</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/cpp">Cell Penetrating Peptides</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/nissle">Nissle</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/nissle">Nissle</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/model">Model</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/model">Model</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/software">Software</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/software">Software</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/notebook">Notebook</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/notebook">Notebook</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/results">Results</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/results">Results</a>
−
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/demonstrate">Demonstrate</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/demonstrate">Demonstrate</a>
 
                     </div>
 
                     </div>
 
                 </li>
 
                 </li>
Line 818: Line 817:
 
<a href="#" class="next">&gt;</a>
 
<a href="#" class="next">&gt;</a>
 
<main class="container gallery">
 
<main class="container gallery">
−
<div><img src="https://picsum.photos/id/21/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/21/800" alt=""></div>
−
<div class="vertical"><img src="https://picsum.photos/id/22/800/1000" alt=""></div>
+
<div class="test vertical"><img src="https://picsum.photos/id/22/800/1000" alt=""></div>
−
<div class="horizontal"><img src="https://picsum.photos/id/23/1400/800" alt=""></div>
+
<div class="test horizontal"><img src="https://picsum.photos/id/23/1400/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/24/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/24/800" alt=""></div>
 
<div><img src="https://picsumhttps://picsum.photos/id/25/800.photos/id/25/800" alt=""></div>
 
<div><img src="https://picsumhttps://picsum.photos/id/25/800.photos/id/25/800" alt=""></div>
−
<div class="big"><img src="https://picsum.photos/id/26/800" alt=""></div>
+
<div class="test big"><img src="https://picsum.photos/id/26/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/27/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/27/800" alt=""></div>
−
<div class="vertical"><img src="https://picsum.photos/id/28/800" alt=""></div>
+
<div class="test vertical"><img src="https://picsum.photos/id/28/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/29/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/29/800" alt=""></div>
−
<div class="horizontal"><img src="https://picsum.photos/id/10/800" alt=""></div>
+
<div class="test horizontal"><img src="https://picsum.photos/id/10/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/11/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/11/800" alt=""></div>
−
<div class="big"><img src="https://picsum.photos/id/12/800" alt=""></div>
+
<div class="test big"><img src="https://picsum.photos/id/12/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/13/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/13/800" alt=""></div>
−
<div class="horizontal"><img src="https://picsum.photos/id/14/800" alt=""></div>
+
<div class="test horizontal"><img src="https://picsum.photos/id/14/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/15/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/15/800" alt=""></div>
−
<div class="big"><img src="https://picsum.photos/id/16/800" alt=""></div>
+
<div class="test big"><img src="https://picsum.photos/id/16/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/17/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/17/800" alt=""></div>
−
<div class="vertical"><img src="https://picsum.photos/id/18/800" alt=""></div>
+
<div class="test vertical"><img src="https://picsum.photos/id/18/800" alt=""></div>
 
</main>
 
</main>
  
−
<div class='container-fluid p-3' style="background-color: rgba(255, 255, 255, 0.3);">
 
−
    <hr>
 
−
    <div class='row align-items-center'>
 
−
        <div class='col-6 col-md-2 sponsorLogo'>
 
−
            <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid"
 
−
                                                                src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png"
 
−
                                                                style="max-height: 80px;"></a>
 
−
        </div>
 
−
        <div class='col-6 col-md-2 sponsorLogo'>
 
−
            <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png"
 
−
                                                                            style="max-height: 80px;"></a>
 
−
        </div>
 
−
        <div class='col-6 col-md-2 sponsorLogo'>
 
−
            <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid"
 
−
                                                                                        src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png"
 
−
                                                                                        style="max-height: 80px;"></a>
 
−
        </div>
 
−
        <div class='col-6 col-md-2 sponsorLogo'>
 
−
            <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid"
 
−
                                                                                src="https://2019.igem.org/wiki/images/0/0a/T--Tuebingen--experimenta_logo.png"
 
−
                                                                                style="max-height: 80px;"></a>
 
−
        </div>
 
−
        <div class='col-6 col-md-2 sponsorLogo'>
 
−
            <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png"
 
−
                                                                          style="max-height: 80px;"></a>
 
−
        </div>
 
−
 
−
 
−
        <!--
 
−
<div class='col sponsorLogo'>
 
−
<a href="https://www.grk2062.uni-muenchen.de/index.html" target="_blank2" ><img class="img-fluid" src="http://2018.igem.org/wiki/images/f/fe/T--Munich--GRK2062.png" style="max-height: 70px;"></a>
 
−
</div>
 
−
-->
 
−
    </div>
 
−
 
−
    <hr>
 
−
    <div class='row align-items-center'>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                    src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                    src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://dwk.com/" target="_blank2"><img class="img-fluid"
 
−
                                                            src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid"
 
−
                                                                  src="https://2019.igem.org/wiki/images/f/f1/T--Tuebingen--implem_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                    src="https://2019.igem.org/wiki/images/8/88/T--Tuebingen--metabion_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid"
 
−
                                                                                  src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a>
 
−
        </div>
 
−
    </div>
 
−
 
−
    <div class='row align-items-center'>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                            src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                        src="https://2019.igem.org/wiki/images/9/95/T--Tuebingen--twist_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                          src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                      src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid"
 
−
                                                                        src="https://2019.igem.org/wiki/images/9/95/T--Tuebingen--twist_logo.png"></a>
 
−
        </div>
 
−
        <div class='col-4 col-md-2 col-xl-1 sponsorLogo'>
 
−
            <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid"
 
−
                                                                        src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a>
 
−
        </div>
 
−
 
−
    </div>
 
−
</div>
 
  
 
<script>
 
<script>
 
     // TODO: touch events
 
     // TODO: touch events
  
−
const divs = document.querySelectorAll('div');
+
const divs = document.querySelectorAll('div.test');
−
const body = document.body;
+
const body = document.querySelector('body');
 
const prev = document.querySelector('.prev');
 
const prev = document.querySelector('.prev');
 
const next = document.querySelector('.next');
 
const next = document.querySelector('.next');
  
−
checkPrev = () => document.querySelector('div:first-child').classList.contains('show') ? prev.style.display = 'none' : prev.style.display = 'flex';
+
checkPrev = () => document.querySelector('div.test:first-child').classList.contains('show') ? prev.style.display = 'none' : prev.style.display = 'flex';
  
−
checkNext = () => document.querySelector('div:last-child').classList.contains('show') ? next.style.display = 'none' : next.style.display = 'flex';
+
checkNext = () => document.querySelector('div.test:last-child').classList.contains('show') ? next.style.display = 'none' : next.style.display = 'flex';
  
 
Array.prototype.slice.call(divs).forEach(function (el) {
 
Array.prototype.slice.call(divs).forEach(function (el) {

Latest revision as of 14:37, 5 October 2019

Gallery

hallo123

hallo123

hallo123