Difference between revisions of "Team:TU-Eindhoven/testpage"

Line 1: Line 1:
 
{{:Team:TU-Eindhoven/NavMenu}}
 
{{:Team:TU-Eindhoven/NavMenu}}
 
<html>
 
<html>
−
    <div class="container-fluid main-wrapper">
+
<head>
−
    <div id="main" class="container round white">
+
  <style>
 +
        body, html {
 +
            height: 100%;
 +
            margin: 0;
 +
            font: 400 15px/1.8 "Lato", sans-serif;
 +
            color: #777;
 +
        }
 
          
 
          
−
      
+
        .bgimg-1,
 +
        .bgimg-2,
 +
        .bgimg-3 {
 +
            position: relative;
 +
            /* opacity: 0.65; */
 +
            background-attachment: fixed;
 +
            background-position: center;
 +
            background-repeat: no-repeat;
 +
            background-size: cover;
 +
        }
 +
        .bgimg-1 {
 +
            background-image: url("/images/frontpage/center.jpg");
 +
            min-height: 500px;
 +
        }
 +
       
 +
        .bgimg-2 {
 +
            background-image: url("/images/frontpage/plazza.jpg");
 +
            min-height: 400px;
 +
        }
 +
       
 +
        .bgimg-3 {
 +
            background-image: url("/images/frontpage/sissy.jpg");
 +
            min-height: 400px;
 +
        }
 +
       
 +
        .caption {
 +
            position: absolute;
 +
            left: 0;
 +
            top: 50%;
 +
            width: 100%;
 +
            text-align: center;
 +
            color: #000;
 +
        }
 +
       
 +
        .caption span.border {
 +
            background-color: #111;
 +
            color: #fff;
 +
            padding: 18px;
 +
            font-size: 25px;
 +
            letter-spacing: 10px;
 +
        }
 +
       
 +
        h3 {
 +
            letter-spacing: 5px;
 +
            text-transform: uppercase;
 +
            font: 20px "Lato", sans-serif;
 +
            color: #111;
 +
        }
 +
       
 +
        /* Turn off parallax scrolling for tablets and phones */
 +
        @media only screen and (max-device-width: 1024px) {
 +
            .bgimg-1,
 +
            .bgimg-2,
 +
            .bgimg-3 {
 +
                background-attachment: scroll;
 +
            }
 +
        }
 +
        .jumbotron{
 +
          padding:0;
 +
        }
 +
        video#bgvid {
 +
          /* position: fixed;
 +
          top: 50%;
 +
          left: 50%; */
 +
          width: 100%;
 +
          /* height: auto; */
 +
          z-index: -100;
 +
          /* -ms-transform: translateX(-50%) translateY(-50%);
 +
          -moz-transform: translateX(-50%) translateY(-50%);
 +
          -webkit-transform: translateX(-50%) translateY(-50%); */
 +
          /* transform: translateX(-50%) translateY(-50%); */
 +
          background: url(/images/VIDEO-IGEM_Trim.mp4_snapshot_00.21_[2018.10.17_14.30.27].jpg) no-repeat;
 +
          /* background-size: cover;  */
 +
          margin-bottom:-10px;
 +
        }
 +
        .video-text,
 +
        .videoCtrl {
 +
          position: absolute;
 +
          top: 50%;
 +
          left: 50%;
 +
          transform: translateX(-50%) translateY(-50%);
 +
 
 +
          /* font-size: 7vw; */
 +
          line-height: 1.5em;
 +
          color: rgb(141, 49, 194);
 +
          text-align: center;
 +
          font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 +
          /* display: none; */
 +
        }
 +
        .playBtn {
 +
            background-color:transparent;
 +
            border-width: 0px;
 +
        }
 +
        .playBtn img {
 +
            width:100px;
 +
            opacity:0.2;
 +
        }
 +
        .playBtn:hover img {
 +
            opacity:0.7;
 +
        }
 +
        #videoModal video {
 +
            width: 80%;
 +
            margin:0 auto;
 +
            top: 50%;
 +
            left: 50%;
 +
            transform: translateX(12.5%) translateY(10%);
 +
        }
 +
        #videoModal {
 +
            padding-top:0;
 +
        }
 +
        .closeFigure {
 +
            position:fixed;
 +
            top:100px;
 +
            right:100px;
 +
        }
 +
     </style>
 +
</head>
 +
 
 +
    <div class="jumbotron neat">
 +
        <video id="bgvid" playsinline autoplay muted loop poster="https://static.igem.org/mediawiki/2018/a/ad/T--TU-Eindhoven--homepageVideoThumbnail.jpeg">
 +
            <source src="https://static.igem.org/mediawiki/2018/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4" type="video/mp4">
 +
        </video>
 +
        <!-- <div class="video-text">
 +
            Welcome to GelCatraz!
 +
        </div> -->
 +
        <div class="videoCtrl">
 +
            <button class="playBtn" onclick="showVideoModal(this)" data-vid-url="https://static.igem.org/mediawiki/2018/5/5c/T--TU-Eindhoven--FullscreenVideo.mp4">
 +
                <img src="https://static.igem.org/mediawiki/2018/d/dc/T--TU-Eindhoven--VideoPlayBtn.png">
 +
            </button>
 +
        </div>
 +
    </div>
 +
 
 +
    <div class="container-fluid">
 
         <div class="row">
 
         <div class="row">
−
             <div id="introDiv" class="col-xs-12 introduction">
+
        <div>
−
                <h1 style="text-align: center;">Introduction</h1>
+
             <!-- if our video is ready -->
−
                <p>From the beginning, the Human Practices took a central role in shaping our
+
        </div>
−
                    project. When we started our brainstorm sessions in March, we had no clue which
+
        <div class="bgimg-1">
−
                    topic we wanted to explore. Yet, we wanted it to be relevant to society.
+
            <div class="caption">
−
                    During these first months, we got the opportunity to interact with experts
+
            <span class="border">WELCOME TO GELCATRAZ</span>
−
                    and the public to discuss our ideas. These encounters were of great help in
+
−
                    our topic selection. During a visit to the Dutch Institute for Public Health
+
−
                    and the Environment (RIVM) and the Rathenau Instituut (Dutch organization for
+
−
                    technology assessment), we realized that the lack of a safe platform for
+
−
                    working with GMOs outside of controlled environments is a problem on itself
+
−
                    that deserves a solution. We were excited to tackle this issue with
+
−
                    Gelcatraz, but also wanted to work towards a more concrete application. In
+
−
                    the time that followed, we consulted several experts and interacted with the
+
−
                    public to get feedback on our proposals. Once we had settled on the wound
+
−
                    healing application, we interacted with more stakeholders and experts to
+
−
                    shape the design of the wound healing patch. We realize that our project
+
−
                    would not have been the same without the Human Practices. In the following
+
−
                    section, we share the insights we gained from interactions with stakeholders
+
−
                    and experts during the three main stages of the project: finding a project,
+
−
                    finding an application  and shaping the design .
+
−
                </p>
+
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
</html>
+
       
−
<partinfo>BBa_K2812000</partinfo>
+
         <div style="color: #777;background-color:white;text-align:center;padding:50px 20%;text-align: justify;">
−
<html>
+
            <h3 style="text-align:center;">Narrow Demo</h3>
−
         <div class="row">
+
            <p>Parallax scrolling is a web site trend where the background content
−
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 col-xl-2 toc-column">
+
            is moved at a different speed than the foreground content while
−
                <div class="toc-wrapper">
+
        scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis
−
                    <hr>
+
        nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit
−
                    <li>
+
        pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra
−
                        <ul id="tableOfContent">
+
        interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat
−
                            <p>The best that most of us can hope to achieve in physics is simply to misunderstand at a deeper level.</p>
+
        morbi, curabitur aliquam pede, nullam vitae eu placerat eget et
−
                        </ul>
+
        vehicula. Varius quisque non molestie dolor, nunc nisl dapibus
−
                        <a class="backToTop" onclick="topFunction()">▲</a>
+
        vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar,
−
                    </li>
+
        in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis
−
                    <hr>
+
            eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
−
                </div>
+
        ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit
 +
        platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat
 +
            leo.</p>
 +
        </div>
 +
       
 +
        <div class="bgimg-2">
 +
            <div class="caption">
 +
            <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
 
             </div>
 
             </div>
−
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-10 col-xl-8 docs">
+
        </div>
−
                <section>
+
       
−
                    <h2>What is Lorem Ipsum</h2>
+
        <div style="position:relative;">
−
                    <div class="figureWrapper figureRight">
+
            <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 20%;text-align: justify;">
−
                        <div class="figureFrame">
+
            <p style="color:#ddd;">Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
−
                            <a class="figureModal" onclick="openFigureModal(this)">
+
−
                                <img class="figure" data-hdurl="https://static.igem.org/mediawiki/2018/thumb/2/24/T--WPI_Worcester--goat3.png/450px-T--WPI_Worcester--goat3.png"
+
−
                                src="https://static.igem.org/mediawiki/2018/thumb/2/24/T--WPI_Worcester--goat3.png/180px-T--WPI_Worcester--goat3.png">
+
−
                            </a>
+
−
                            <div class="figureCaption">
+
−
                                <p>
+
−
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+
−
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
+
−
                                    printer took a galley of type.
+
−
                                </p>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zheshemenshierhie</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zheshenemerhie</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                </section>
+
−
                <section>
+
−
                    <h2>What is Lorem Ipsum</h2>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zhhishenemehie</h3>
+
−
                    <p>
+
−
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+
−
                        has been the industry's standard dummy text ever since the 1500s, when an unknown
+
−
                        printer took a galley of type and scrambled it to make a type specimen book. It has
+
−
                        survived not only five centuries, but also the leap into electronic typesetting,
+
−
                        remaining essentially unchanged. It was popularised in the 1960s with the release of
+
−
                        Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+
−
                        publishing software like <span class="klk2elaborate">Aldus PageMaker</span> including
+
−
                        versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
+
−
                        typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
+
−
                        since the 1500s, when an unknown printer took a galley.
+
−
                    </p>
+
−
                    <blockquote class="explanation disappear" id="AldusPageMaker">
+
−
                        <h4>Aldus PageMaker</h4>
+
−
                        <p>
+
−
                            Now is Adobe InDesign - The next page in layout design.
+
−
                            The industry-leading page design and layout app lets you create, preflight, and publish beautiful documents for print and digital media. InDesign CC has everything you need to make posters, books, digital magazines, eBooks, interactive PDFs, and more.
+
−
                        </p>
+
−
                                            </blockquote>
+
−
 
+
−
                    <h3>zishenemenshie</h3>
+
−
                    <div class="figureWrapper figureMiddle">
+
−
                        <div class="figureFrame">
+
−
                            <a class="figureModal" onclick="openFigureModal(this)">
+
−
                                <img class="figure" src="https://static.igem.org/mediawiki/2018/thumb/2/24/T--WPI_Worcester--goat3.png/450px-T--WPI_Worcester--goat3.png">
+
−
                            </a>
+
−
                            <div class="figureCaption">
+
−
                                <p>
+
−
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+
−
                                    has been the industry's standard dummy text ever since the 1500s, when an unknown
+
−
                                    printer took a galley of type.
+
−
                                </p>
+
−
                            </div>
+
−
                        </div>
+
−
                    </div>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zshenemenshe</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                </section>
+
−
                <section>
+
−
                    <h2>What is Lorem Ipsum?</h2>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zhisheneshierhe</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                    <h3>zheimeee</h3>
+
−
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
−
                </section>
+
 
             </div>
 
             </div>
−
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-2 placeholder"></div>
 
 
         </div>
 
         </div>
−
    </div>
+
       
−
    <div id="imageModal" class="figureModalWindow">
+
        <div class="bgimg-3">
−
 
+
            <div class="caption">
−
             <!-- The Close Button -->
+
            <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
−
             <span class="closeFigure">&times;</span>
+
            </div>
−
         
+
        </div>
−
             <!-- Modal Content (The Image) -->
+
       
−
            <img class="figureModal-content" id="img01">
+
        <div style="position:relative;">
−
         
+
             <div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 20%;text-align: justify;">
−
             <!-- Modal Caption (Image Text) -->
+
             <p style="color:#ddd;">Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
−
             <div class="modalCaption">Lorem Ipsum</div>
+
             </div>
−
          </div>
+
        </div>
 +
       
 +
        <div class="bgimg-1">
 +
            <div class="caption">
 +
             <span class="border">COOL!</span>
 +
             </div>
 +
        </div>
 +
        </div>
 
     </div>
 
     </div>
 
</html>
 
</html>
 
{{:Team:TU-Eindhoven/footer}}
 
{{:Team:TU-Eindhoven/footer}}

Revision as of 19:49, 17 October 2018

WELCOME TO GELCATRAZ

Narrow Demo

Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.

LESS HEIGHT

Scroll up and down to really get the feeling of how Parallax Scrolling works.

SCROLL UP

Scroll up and down to really get the feeling of how Parallax Scrolling works.

COOL!