Difference between revisions of "Team:Concordia"

Line 2: Line 2:
  
 
<html>
 
<html>
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="/Template:Concordia/CSS/homepage_parallax?action=raw&ctype=text/css">
 +
</head>
 +
 
<body>
 
<body>
<script src="/Template:Concordia/JS/skrollr.js"></script>
 
<script src="/Template:Concordia/JS/main.js"></script>
 
<style type="text/css">
 
/* CSS */
 
.hsContainer {
 
    display: table;
 
    table-layout: fixed;
 
    width: 100%;
 
    height: 100%;
 
    overflow: hidden;
 
    position: relative;
 
    opacity: 0;
 
}
 
.hsContent {
 
    max-width: 450px;
 
    margin: -150px auto 0 auto;
 
    display: table-cell;
 
    vertical-align: middle;
 
    color: #ebebeb;
 
    padding: 0 8%;
 
    text-align: center
 
}
 
.bcg {
 
    background-position: center center;
 
    background-repeat: no-repeat;
 
    background-attachment: fixed;
 
    background-size: cover;
 
    height: 100%;
 
    width: 100%;
 
}
 
  
#slide-1 .bcg {background-image:url('https://static.igem.org/mediawiki/2015/7/7e/2015Concordia_homeimage.jpg')}
+
<section class="module parallax parallax-1">
 +
  <div class="container">
 +
    <h1 style="font-size:48px">WELCOME</h1>
 +
  </div>
 +
</section>
  
</style>
+
<section class="module content">
 +
  <div class="container">
 +
    <h2>Lorem Ipsum Dolor</h2>
 +
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
 +
  </div>
 +
</section>
  
<!-- HTML -->
+
<section class="module parallax parallax-2">
<section id="slide-1" class="homeSlide">
+
  <div class="container">
    <div class="bcg"
+
    <h1>Rise</h1>
        data-center="background-position: 0px 50%;"
+
  </div>
        data-bottom-top="background-position: 0px 40%;"
+
        data-top-bottom="background-position: -40px 50%;"
+
        data-anchor-target="#slide-1"
+
    >
+
        <div class="hsContainer">
+
            <div class="hsContent">
+
                <div class="plaxEl"
+
                    data-106-top="opacity: 0"
+
                    data-bottom="opacity: 1; position: fixed; top: 206px; width: 100%; left: 0;"
+
                    data--30p-top="opacity: 1;"
+
                    data--60p-top="opacity: 0;"
+
                    data-anchor-target="#slide-1"
+
                >
+
                    <h2>Fixed element fading in and out</h2>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
 
</section>
 
</section>
  
<img src="https://static.igem.org/mediawiki/2015/7/7e/2015Concordia_homeimage.jpg" style="max-width:100%;">
+
<section class="module content">
 
+
  <div class="container">
<section class="Content Text Color-Pink" id="HomeIntrod">
+
    <h2>Lorem Ipsum Dolor</h2>
<img src="https://static.igem.org/mediawiki/2015/7/7e/2015Concordia_HomeIntestine.png" id="HomeIntro">
+
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<h2 class="HomeIntroH2" style="font-size:40px">Overview</h2>
+
  </div>
<p class="HomeIntroP" style="font-size:24px">Why we are engineering an extracellular scaffold on a bacterium.</p>
+
 
</section>
 
</section>
  
<section class="Content Text Color-Green" id="HomeScaffolding">
+
<section class="module parallax parallax-3">
<img src="https://static.igem.org/mediawiki/2015/3/37/2015Concordia_HomeLactis.png" id="HomeScaffold">
+
  <div class="container">
<h2 class="HomeScaffoldH2"  style="font-size:40px">Scaffold</h2>
+
    <h1>Calm</h1>
<p class="HomeScaffoldP" style="font-size:24px; color:#00344f">Why we are engineering an extracellular scaffold on a bacterium.</p>
+
  </div>
 
</section>
 
</section>
  
<section class="Content Text Color-LightBlue" id="HomeMilk">
+
<section class="module content">
<img src="https://static.igem.org/mediawiki/2015/a/aa/2015Concordia_HomeMilk.png" id="HomeIntolerance">
+
  <div class="container">
<h2 class="HomeIntoleranceH2" style="font-size:40px">Food Intolerances</h2>
+
    <h2>Lorem Ipsum Dolor</h2>
<p class="HomeIntoleranceP" style="font-size:24px">Why we are engineering an extracellular scaffold on a bacterium.</p>
+
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
 +
  </div>
 
</section>
 
</section>
 +
  
  

Revision as of 19:34, 17 September 2015

WELCOME

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Rise

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Calm

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit...