View source for Team:Glasgow/Application/Productdesign

{{GlasgowNavbar}}
<html>
   <head>
       <style>
           .firstHeading {
           display:none;
         }
    
        #content {
     width:auto;
     height:auto;
     padding:0px 0px 0px 0px;
     border:none;
    }
       * {
                padding:0;
                margin:0;
            }
        
        .banner {
            height:45vh;
            width:100vw;
            background-color: black;
            text-align: left;
            top:0;
        }
    
            h1 {
                color:white;
                margin-top:15vh;
                margin-left: 20vw;
                position:absolute;
                font-size: 4em;
            }
            
            .links {
                margin-top: 5vh;
                text-decoration:none;
                color:blue;
                margin-left:5vw;
            }

            
            .containerRight {
                width:70vw;
                text-align: justify;
                background-color:white;
                margin-left: 25vw;
                /*float: right;*/
            }               
       
            div h2 {
                text-align: center;
                margin-bottom: 8vh;
                margin-top:5vh;
            }
            /*
            .leftContainer {
                width:22vw;
                float:left;
                height:100%;
                text-align: center;
                background-color:white;
            }*/

             table {
                margin-top:15vh;
                border-radius: 10%;
                margin-left:7.5vw;
                float:left;
                text-align:center;
            }
            
            td {
                padding:0.8vw;
                cursor:pointer;
                margin-top: 4vh;
                color:deepskyblue;
            }
            
            td:hover {
                margin-top: 4vh;
                background-color: deepskyblue;
                color:white;                
            }
            
            .fixed {
                position: fixed;
                top:5vh;

            }
            
            .final {
                top: 230vh;
                position:relative;
            }

            
            .monster {
                height:50vh;
                width:15vw;
                position:relative;
                display:inline-block;
                margin: 0 auto;
            }
            
            .monsterContainer {
                width:70vw;
                height:50vh;
                margin:10vh auto;
                text-align: justify;
                margin-bottom: 10vh;
                
            }
            
            .monsterContainer:after {
                content: "";
	            width: 100%;
                display: inline-block;
            }

            .monsterImg {
                height:100%;
                width:100%;
                opacity:0.92;
                box-shadow: 0 0 5px purple;
            }

            h3 {
                color: white;
                position:absolute;
                bottom:5%;
                left: 5%;
                width:100%;
                opacity:0.85;
            }

            monsterSpan {
                letter-spacing: -1px;
                background: rgb(30, 5, 90);
                background: rgba(30, 5, 90, 0.7);
                padding:5%;
            }

            .dimmer {
                opacity:1;
            }

            .dimmer2 {
                text-decoration: underline;
                opacity:1
            }


            
      </style>

   </head>

     <body>

        <div class="banner scrollTop"><h1>Product Design</h1></div>
        <!--<div class='leftContainer'>-->
        <p class="links scrollOverview"><a style="color:blue;" href="https://2015.igem.org/Team:Glasgow"> Home</a> > <a style="color:blue;" href="https://2015.igem.org/Team:Glasgow/Project/Overview"> Project</a> > Product Design</p>
        <div id="sidebar"class="widget widget-categories">
        <table>
            <tr><td class="overview">Overview</td></tr>
            <tr><td class="sensor">Material</td></tr>
            <tr><td class="survivability">Waste Removal </td></tr>
            <tr><td class="conclusion">Feeding</td></tr>
            <tr><td class="Future Considerations">Future Considerations</td></tr>    
            <tr><td class="Alternatives">Alternatives</td></tr> 
            <tr><td class="top">Top</td></tr>    
        </table>
       </div>
        
       <!-- </div> -->
        
        <div class='containerRight'>
            
            <h2 style="margin-top:13vh;">Overview</h2>
            
            <p class="mainText">Our team were keen to use this opportunity to improve education of synthetic biology and raise public awareness of the facts. It was this mind set that led us to develop our ‘Friend in the Dark’, Furri-lux. Furri-lux is a stuffed toy designed to look like a “friendly monster” – he’s the good monster that scares away the bad monsters under the bed!<br/>
<br/>
However, the real magic happens on the inside…
<div class="scrollSensor"></div></p>
        
    
    <h2>Material</h2>
    
            <p class="mainText">Our bioluminescent bacteria will live in a broth suspension, which will be housed in a vessel made from poly(methyl methacrylate). PMMA was chosen as it would be sturdy enough so that if it were accidentally dropped or struck, it would prevent the release of the bacteria, and it’s transparent enough to allow the UV-A rays to reach them, and their bioluminescence to shine out. 
<br/>
<br/>
* The model was designed using a CAD program called Solidworks, then 3D printed using VeroGrey material. More information on VeroGrey can be found at: <a href="http://www.buildparts.com/materials/verogrey" target="_blank">http://www.buildparts.com/materials/verogrey.</a> *
<br/>
<br/>
Full instructions would be provided with the toy, for adults as well as in the form of <a href = “bedtime stories section/page/whatever" target="_blank">bedtime stories</a> for the children, to help them learn how to look after their pet and learn about the science in a way they would understand.
<div style="visibility:hidden; height:0;width:0;" class="scrollSurvivability"></div> </p>
        
        <h2>Waste Removal </h2>
    
            <p class="mainText"><div class="scrollConclusion"></div></p>
            
            <h2>Conclusion</h2>
    
            <p class="mainText test2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque</p>
        
            <h2 class="readMore">Read More!</h2>
            
        <div class="monsterContainer">
<div class="monster"><a href="#"><img class='monsterImg' src="https://static.igem.org/mediawiki/2015/9/9d/Monster2-inverted.png">
            <h3><span class="monsterSpan">Protocols</span></h3></a></div>
            
            <div class="monster"><a href="#"><img class='monsterImg' src="https://static.igem.org/mediawiki/2015/d/d4/Monster3-inverted.jpg">
            <h3 style="left:2.5%;"><span class="monsterSpan">Bioluminesence</span></h3></a></div>
            
            <div class="monster"><a href="#"><img class='monsterImg' src="https://static.igem.org/mediawiki/2015/e/e1/Monster4-inverted.jpg">
            <h3><span class="monsterSpan">Steve</span></h3></a></div>
            
            <div class="monster"><a href="#"><img class='monsterImg' src="https://static.igem.org/mediawiki/2015/d/d1/Monster5-inverted.jpg">
            <h3><span class="monsterSpan">Repressors</span></h3></a></div>
        
        </div>
</div>

<script>


        $('.overview').click(function() {
            $('html, body').animate({ scrollTop: $('.scrollOverview').offset().top}, 1000);
        });
         
        $('.sensor').click(function() {
            $('html, body').animate({ scrollTop: $('.scrollSensor').offset().top}, 1000);
        });
         
        $('.survivability').click(function() {
            $('html, body').animate({ scrollTop: $('.scrollSurvivability').offset().top}, 1000);
        });
         
        $('.conclusion').click(function() {
            $('html, body').animate({ scrollTop: $('.scrollConclusion').offset().top}, 1000);
        });
         
        $('.top').click(function() {
            $('html, body').animate({ scrollTop: $('.scrollTop').offset().top}, 1000);
        });
        
        </script> 


<!--------边上导航栏-------->
       <script type="text/javascript">

var x = $('.links').offset().top;
$(window).scroll(function() {
            if ($(this).scrollTop() > x) {
                $('table').addClass("fixed");
            }


            else { 
                $('table').removeClass("fixed");
            }
        });

</script>



<script type="text/javascript" >
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;

window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop - 150;
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
var w = window.innerWidth;
if(w>=1024){
  if($(window).scrollTop() + $(window).height() > $(document).height() - 850){
                $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
}
if(scrollTop < height){ obj.style.position = 'relative';      
}else{
obj.style.position = 'fixed';
}
}
</script>

<script type="text/javascript">
window.onload = function(){
menuFixed('sidebar');
}
</script>
</body>
</html>

{{Glasgowfooter}}