Difference between revisions of "Team:Lambert GA/Applied Design"

Line 2: Line 2:
  
 
<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">
 +
              I M P R O V E
 +
          </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 44: Line 303:
 
</div>
 
</div>
 
</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>
  
  

Revision as of 14:37, 10 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

I M P R O V E



































★ 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.

Applied Design

Best Applied Design Special Prize

This is a prize for the team that has developed a synbio product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.

To compete for the Best Applied Design prize, please describe your work on this page and also fill out the description on the judging form.

You must also delete the message box on the top of this page to be eligible for this prize.

Inspiration

Take a look at what some teams accomplished for this prize.





</html>