Difference between revisions of "Team:Elan Vital Korea/Design"

(Prototype team page)
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Elan_Vital_Korea}}
+
{{ElanVitalKoreaMWlook}}
 +
{{ElanVitalKorea}}
 +
 
 
<html>
 
<html>
  
−
<h2>Design</h2>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 +
<script>
 +
$(document).ready(function(){
 +
    // Cache the Window object
 +
    $window = $(window);
 +
               
 +
  $('section[data-type="background"]').each(function(){
 +
    var $bgobj = $(this); // assigning the object
 +
                   
 +
      $(window).scroll(function() {
 +
                   
 +
        // Scroll the background at var speed
 +
        // the yPos is a negative value because we're scrolling it UP!                               
 +
        var yPos = -($window.scrollTop() / $bgobj.data('speed'));
 +
       
 +
        // Put together our final background position
 +
        var coords = '50% '+ yPos + 'px';
  
−
<p>
+
        // Move the background
−
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page. If you are going for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Applied Design award</a>, you should also complete this page and tell us what you did.  
+
        $bgobj.css({ backgroundPosition: coords });
 +
       
 +
}); // window scroll Ends
 +
 
 +
});   
 +
 
 +
});
 +
/*
 +
* Create HTML5 elements for IE's sake
 +
*/
 +
 
 +
document.createElement("article");
 +
document.createElement("section");
 +
</script>
 +
<style>
 +
 
 +
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 +
 
 +
body{
 +
    margin:0;
 +
    padding:0;
 +
font-family: 'Open Sans', sans-serif;
 +
background-color:      #F8F8F8;
 +
}
 +
 
 +
 
 +
#home {
 +
    background: url(https://static.igem.org/mediawiki/2015/8/87/ElanVitalKorea_bg_3.png) 50% 0 no-repeat fixed;
 +
min-height:1000px;
 +
    height: 1000px; 
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 +
}
 +
#about {
 +
    background: url(https://static.igem.org/mediawiki/2015/8/86/Blackbg.png) 50% 0 no-repeat fixed;
 +
    min-height:1000px;
 +
height: 1000px;
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 +
}
 +
#maintext {
 +
    background: url(https://static.igem.org/mediawiki/2015/9/9c/Lightbg_copy.jpg) 50% 0 no-repeat fixed;
 +
    height: 1000px;
 +
min-height:1000px;
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 +
}
 +
 
 +
#maintext2 {
 +
    background: url(https://static.igem.org/mediawiki/2015/8/86/Blackbg.png) 50% 0 no-repeat fixed;
 +
    height: 1000px;
 +
min-height:1000px;
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    max-width: 1920px;
 +
    position: relative;
 +
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* Introduction */
 +
 
 +
#home article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
 +
 
 +
#about article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
 +
 
 +
#maintext article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
 +
 
 +
 
 +
#maintext2 article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
 +
 
 +
 
 +
.galleryItem {
 +
    color: #797478;
 +
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
 +
    float: left;   
 +
    width: 16%;
 +
    margin:  2% 2% 50px 2%;
 +
}
 +
 +
.galleryItem h2 {
 +
    text-transform: uppercase;
 +
}
 +
 +
.galleryItem img {
 +
    max-width: 100%;
 +
    -webkit-border-radius: 5px;
 +
    -moz-border-radius: 5px;
 +
    border-radius: 5px;
 +
}
 +
 
 +
 
 +
 
 +
.center {
 +
  position: absolute;
 +
  margin: auto;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  width: 100px;
 +
  height: 100px;
 +
  border-radius: 3px;
 +
}
 +
 
 +
IMG.displayed {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto; }
 +
 
 +
IMG.igem {
 +
float:right;
 +
width:5%;
 +
margin:20px;
 +
}
 +
 
 +
h4 {
 +
color:white;
 +
font-size: 24px;
 +
letter-spacing:1px;
 +
line-height:25px;
 +
}
 +
 
 +
h5{
 +
text-decoration:none;
 +
font-size: 24px;
 +
letter-spacing:1px;
 +
line-height:25px;
 +
color:white;
 +
}
 +
 
 +
 
 +
p {
 +
font-size:18px;
 +
line-height:160%;
 +
}
 +
 
 +
h6{
 +
text-decoration:none;
 +
font-size: 12px;
 +
letter-spacing:1px;
 +
}
 +
 
 +
 
 +
/**
 +
* Media queries for responsive design.
 +
*
 +
* These follow after primary styles so they will successfully override.
 +
*/
 +
 
 +
@media all and (orientation:portrait) {
 +
  /* Style adjustments for portrait mode goes here */
 +
 
 +
}
 +
 
 +
@media all and (orientation:landscape) {
 +
  /* Style adjustments for landscape mode goes here */
 +
 
 +
}
 +
 
 +
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
 +
  consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
 +
@media screen and (max-device-width: 480px) {
 +
 
 +
 
 +
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
 +
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
 +
}
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
<body>
 +
    <!-- Section #1 -->
 +
        <section id="home" data-speed="10" data-type="background">
 +
            <a name="top" id="top"></a>
 +
            <a href="#">
 +
                <img class="igem" src="https://static.igem.org/mediawiki/2015/7/70/IGEM_Logo.gif">
 +
            </a>
 +
                        <br><br><br><br><br><br><br>
 +
                    <div class="center;">
 +
            <a href="https://2015.igem.org/Team:Elan_Vital_Korea">
 +
                <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png">
 +
            </a>
 +
                <h4 style="text-align:center;">
 +
                    PROJECT <br> -Design-
 +
                </h4>
 +
                    <a href="#myAnchor" rel="" id="anchor1" class="anchorLink"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png"></a>
 +
          </div>
 +
    </section>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
            <h5 style="text-align:center;">
 +
                <a name="myAnchor" id="myAnchor"></a>
 +
                    <font color="black">BBa_K1584017 & BBa K1584026</font>
 +
            </h5>
 +
                        <br>
 +
<P style="text-align:center;">
 +
<font color:black>
 +
LuxR controlled by constitutive promoterAHL-required LuxR-Producing Reporter part
 +
</font>
 
</p>
 
</p>
 +
<br><br>       
 +
<img class="displayed" src="https://static.igem.org/mediawiki/2015/1/15/NC_partimg_01.jpg">
 +
<br><br>
  
−
<div class="highlightBox">
 
−
<h4>Note</h4>
 
−
<p>In order to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Applied Design award</a> and/or the <a href="https://2015.igem.org/Judging/Awards#Medals">functional prototype gold medal criterion</a>, you must fill out this page.</p>
 
−
</div>
 
  
−
<p>This is a prize for the team that has developed a synthetic biology 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.</p>
 
  
−
<p>
+
 
−
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
+
 
 +
            <h5 style="text-align:center;">
 +
                <a name="myAnchor" id="myAnchor"></a>
 +
                    <font color="black">BBa_K1584008</font>
 +
            </h5>
 +
                        <br>
 +
<P style="text-align:center;">
 +
<font color:black>
 +
AiiA controlled by constitutive promoter
 +
</font>
 
</p>
 
</p>
 +
<br><br>               
 +
<img class="displayed" src="https://static.igem.org/mediawiki/2015/2/21/NC_partimg_03.jpg">
 +
<br><br>
 +
 +
 +
 +
 +
            <h5 style="text-align:center;">
 +
                <a name="myAnchor" id="myAnchor"></a>
 +
                    <font color="black">BBa_K1584035</font>
 +
            </h5>
 +
                        <br>
 +
<P style="text-align:center;">
 +
<font color:black>
 +
AHL- responsive LacZ reporter
 +
</font>
 +
</p>
 +
    <br><br>           
 +
<img class="displayed" src="https://static.igem.org/mediawiki/2015/7/78/NC_partimg_04.jpg">
 +
<br><br>
 +
 +
       
 +
 +
 +
<a href="#top" rel="" id="top" class="anchorLink"><img class="displayed" src="https://static.igem.org/mediawiki/2015/5/5b/Scroll_arrow_top_Black.png"></a> 
 +
<h6 style="text-align:center;"> <font color="black">
 +
                  To The Top
 +
              </font> </h6>
 +
     
 +
        </section>
 +
 +
<script>
 +
$('a').click(function(){
 +
    $('html, body').animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top
 +
    }, 500);
 +
    return false;
 +
});
 +
</script>
  
−
</div>
+
</body>
  
 
</html>
 
</html>

Latest revision as of 23:23, 18 September 2015








PROJECT
-Design-





BBa_K1584017 & BBa K1584026

LuxR controlled by constitutive promoterAHL-required LuxR-Producing Reporter part





BBa_K1584008

AiiA controlled by constitutive promoter





BBa_K1584035

AHL- responsive LacZ reporter





To The Top