Difference between revisions of "Team:Lambert GA/Demonstrate"

Line 1: Line 1:
 
{{:Team:Lambert_GA/Template}}
 
{{:Team:Lambert_GA/Template}}
−
 
  
 
<html>
 
<html>
 +
 +
<head>
 +
 +
 +
<link href="https://fonts.googleapis.com/css?family=Codystar:300,400" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 +
<style type="text/css">
 +
#holder {
 +
position: fixed;
 +
top: 0%;
 +
left: 0%;
 +
height: 100%;
 +
width: 100%;
 +
z-index: -3;
 +
}
 +
#oceanvideo {
 +
position: fixed;
 +
top: 0%;
 +
left: 0%;
 +
width: 100%;
 +
height: 100%;
 +
object-fit: fill;
 +
z-index: 1;
 +
}
 +
#overlay {
 +
position: fixed;
 +
top: 0%;
 +
left: 0%;
 +
width: 100%;
 +
height: 100%;
 +
background-color: #000000;
 +
opacity: 0.3;
 +
z-index: 3;
 +
}
 +
#bigtitle {
 +
position: absolute;
 +
top: 43%;
 +
left: 0%;
 +
height: 10%;
 +
width: 100%;
 +
z-index: 2;
 +
font-family: 'Codystar', cursive;
 +
color: #FFFFFF;
 +
font-size: 70px;
 +
text-align: center;
 +
z-index: 4;
 +
}
 +
#actualtext {
 +
position: relative;
 +
top: 400%;
 +
left: 0%;
 +
height: 170%;
 +
width: 100%;
 +
background-color: #FFFFFF;
 +
z-index: 4;
 +
}
 +
#afterhome {
 +
position: relative;
 +
top: 99%;
 +
left: 0%;
 +
height: 170%;
 +
width: 100%;
 +
}
 +
#sidebar {
 +
position: absolute;
 +
top: 0%;
 +
left: 8%;
 +
height: 35%;
 +
width: 13%;
 +
z-index: 6;
 +
}
 +
#link {
 +
font-family: 'Montserrat', sans-serif;
 +
color: #000000;
 +
font-size: 24px;
 +
cursor: pointer;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
#link:hover {
 +
color: #0077be;
 +
text-decoration: none;
 +
}
 +
 +
#maincontent {
 +
position: relative;
 +
top: 0%;
 +
left: 28%;
 +
height: 92%;
 +
width: 64%;
 +
border-top: 30px;
 +
}
 +
#target1{
 +
position: relative;
 +
top: -80px;
 +
}
 +
#target2{
 +
position: relative;
 +
top: -80px;
 +
}
 +
#target3{
 +
position: relative;
 +
top: -80px;
 +
}
 +
#target4{
 +
position: relative;
 +
top: -80px;
 +
}
 +
#target5{
 +
position: relative;
 +
top: -80px;
 +
}
 +
#subheading1 {
 +
font-size: 36px;
 +
font-family: 'Montserrat', sans-serif;
 +
}
 +
#content1 {
 +
font-family: 'Lora', serif;
 +
font-size: 15px;
 +
line-height: 1.75em;
 +
 +
}
 +
#subheading2 {
 +
font-size: 36px;
 +
font-family: 'Montserrat', sans-serif;
 +
}
 +
#content2 {
 +
font-family: 'Lora', serif;
 +
font-size: 15px;
 +
line-height: 1.75em;
 +
 +
}
 +
#subheading3 {
 +
font-size: 36px;
 +
font-family: 'Montserrat', sans-serif;
 +
}
 +
#content3 {
 +
font-family: 'Lora', serif;
 +
font-size: 15px;
 +
line-height: 1.75em;
 +
 +
}
 +
#subheading4 {
 +
font-size: 36px;
 +
font-family: 'Montserrat', sans-serif;
 +
}
 +
#subheading5 {
 +
font-size: 36px;
 +
font-family: 'Montserrat', sans-serif;
 +
}
 +
#footer {
 +
height: 100px;
 +
width: 100%;
 +
background-color: #FFFFFF;
 +
z-index: 7;
 +
}
 +
#flogo {
 +
font-size:28px;
 +
color: #767676;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
#flogo:hover {
 +
color: #3B5998;
 +
}
 +
#tlogo {
 +
font-size:28px;
 +
color: #767676;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
#tlogo:hover {
 +
color: #00aced;
 +
}
 +
#ilogo {
 +
font-size:28px;
 +
color: #767676;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
#ilogo:hover {
 +
color: #bc2a8d;
 +
}
 +
#afterhome {
 +
position: relative;
 +
top: 99%;
 +
left: 0%;
 +
height: 170%;
 +
width: 100%;
 +
}
 +
</style>
 +
</head>
 +
 +
<body>
 +
 +
 +
<div id="holder">
 +
    <video style= "z-index:1;" id="oceanvideo"  autoplay muted loop>
 +
              <source src="https://static.igem.org/mediawiki/2018/4/48/T--Lambert_GA--GlassRaindrop.mp4" type="video/mp4">
 +
              Your browser does not support video.
 +
            </video>
 +
    <div id="overlay"></div>
 +
          <div id="bigtitle">
 +
              M O D E L
 +
          </div>
 +
</div>
  
 
<br><br><br>
 
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
<br><br><br>
 +
 +
<div id="actualtext">
 +
 +
 +
<div id="afterhome">
 +
      <div id="sidebar">
 +
<br><br>
 +
                      <div id="link">
 +
                            <b><a style="color:black; text-decoration: none;" href="#target1">Target 1</a></b>
 +
                      </div>
 +
<br><br>
 +
                      <div id="link">
 +
                            <b><a style="color:black; text-decoration: none;" href="#target2">Target 2</a></b>
 +
                      </div>
 +
<br><br>
 +
                      <div id="link">
 +
                            <b><a style="color:black; text-decoration: none;" href="#target3">Target 3</a></b>
 +
                      </div>
 +
<br><br>
 +
                      <div id="link">
 +
                            <b><a style="color:black; text-decoration: none;" href="#target4">Target 4</a></b>
 +
                      </div>
 +
<br><br>
 +
                      <div id="link">
 +
                            <b><a style="color:black; text-decoration: none;" href="#target5">Target 5</a></b>
 +
                      </div>
 +
      </div>
 +
</div>
 +
  <div id="maincontent">
 +
<br><br>
  
 
<div class="column full_size judges-will-not-evaluate">
 
<div class="column full_size judges-will-not-evaluate">
Line 30: Line 288:
  
  
 +
</div>
 
</div>
 
</div>
  
 +
<div id="footer">
 +
<br><br>
 +
<a href="https://www.facebook.com/groups/198318606966726/"><i class="fa fa-facebook" id="flogo"></i></a>
 +
 +
<a href="https://twitter.com/lamberths_igem?lang=en"><i class="fa fa-twitter" id="tlogo"></i></a>
 +
 +
<a href="https://www.instagram.com/lambertigem/"><i class="fa fa-instagram" id="ilogo"></i></a>
 +
 +
</div>
  
 +
</body>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
<script>
 +
$(window).scroll(function(e){
 +
  parallax();
 +
});
  
 +
//PARALLAX FUNCTION
 +
function parallax(){
 +
  var scrolled = $(window).scrollTop();
 +
  $('#oceanvideo').css('top',-(scrolled*0.35)+'px');
 +
}
  
 +
//NOT THE MOST EFFICIENT PARALLAX, BUT SIMPLE
 +
</script>
  
 
</html>
 
</html>

Revision as of 15:40, 8 August 2018

CALM ELECTROPEN
BACKGROUND DATA & METHODS RESULTS DISCUSSION COLOR Q SUPPLEMENTARY REFERENCES
COLOR Q CHROME Q REFERENCES
PRINCIPLES & DESIGN MODEL & THEORY PRODUCT DESIGN REFERENCES
INTEGRATED HUMAN PRACTICES EDUCATION & ENGAGEMENT COLLABORATIONS
BASIC PARTS COMPOSITE PARTS
DESCRIPTION BACKGROUND DESIGN EXPERIMENTS LAB NOTEBOOK INTERLAB RESULTS DEMONSTRATE THE VISION
TEAM MEMBERS ATTRIBUTIONS

M O D E L



































★ ALERT!

This page is used by the judges to evaluate your team for the medal criterion or award listed below.

Delete this box in order to be evaluated for this medal criterion and/or award. See more information at Instructions for Pages for awards.

Demonstrate

Gold Medal Criterion #4

Teams that can show their system working under real world conditions are usually good at impressing the judges in iGEM. To achieve gold medal criterion #4, convince the judges that your project works. There are many ways in which your project working could be demonstrated, so there is more than one way to meet this requirement. This gold medal criterion was introduced in 2016, so check our what 2016 teams did to achieve their gold medals!

Please see the 2018 Medals Page for more information.