Difference between revisions of "Team:NAIT Edmonton/Trial11"

 
(57 intermediate revisions by the same user not shown)
Line 6: Line 6:
  
 
<title>Team NAIT 2015</title>
 
<title>Team NAIT 2015</title>
−
 
−
  <meta charset="utf-8">
 
−
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 
−
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 
−
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
−
  <link rel="stylesheet" href="/resources/demos/style.css">
 
−
  <script>
 
−
  $(function() {
 
−
    $( "#accordion" ).accordion();
 
−
  });
 
−
  </script>
 
  
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
−
<script type="text/javascript" src="https://2015.igem.org/index.php?title=
+
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&amp;ctype=text/javascript"></script>
−
Template:NAIT_Edmonton/js/jquery.flexslider"></script>
+
 
 +
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
  
 
<script type="text/javascript" charset="utf-8">
 
<script type="text/javascript" charset="utf-8">
Line 28: Line 18:
 
   $(window).load(function() {
 
   $(window).load(function() {
 
     $('.flexslider').flexslider({
 
     $('.flexslider').flexslider({
−
           animation: "slide"
+
           animation: "fade"
 
     });
 
     });
 
   });
 
   });
Line 42: Line 32:
 
<div class="header">
 
<div class="header">
  
−
<style type="text/css">
+
  <!--  <div class="logo">
  
−
.header_mobile {
+
<a href="https://2015.igem.org/Team:NAIT_Edmonton">
−
    display:none;
+
<img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px">
−
    position: absolute;
+
</a>
−
    background-color:transparent;
+
</div> --->
−
    width:65px;
+
−
    top: 90px;
+
−
    left:50px;
+
−
    height:65px;
+
−
    z-index:999;
+
−
    position:fixed;}
+
  
−
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
 
−
.header_mobile ul * {margin:0; padding:0;}
 
−
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
 
−
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
 
−
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
 
−
.header_mobile li.current-menu-item {background:#5AB3E3}
 
−
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 
−
.header_mobile ul ul li:hover{background:#159CD8}
 
−
.header_mobile ul ul li{float:none; width:120px}
 
−
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 
−
.header_mobile ul ul ul {top:0; left:200%}
 
−
.header_mobile ul li.selected a{color:#8BC5EB}
 
−
.header_mobile ul li:hover > ul{display:block;}
 
  
−
 
−
@media screen and (max-width:1000px){
 
−
 
−
.header_left{display:none;}
 
−
.header_right{display:none;}
 
−
.header_mobile{display:block;}
 
−
 
−
}
 
−
 
−
</style>
 
−
 
−
    <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
 
−
            <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
 
−
    </div>
 
 
     <div class="header_left">
 
     <div class="header_left">
 
         <ul>
 
         <ul>
Line 123: Line 80:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
 
−
 
−
  <div id="wrap">
 
−
 
−
<div id="accordion">
 
−
  <h3>Section 1</h3>
 
−
  <div>
 
−
    <p>
 
−
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
 
−
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
 
−
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
 
−
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 
−
    </p>
 
−
  </div>
 
−
  <h3>Section 2</h3>
 
−
  <div>
 
−
    <p>
 
−
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
 
−
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
 
−
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
 
−
    suscipit faucibus urna.
 
−
    </p>
 
−
  </div>
 
−
  <h3>Section 3</h3>
 
−
  <div>
 
−
    <p>
 
−
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
 
−
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
 
−
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
 
−
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
 
−
    </p>
 
−
    <ul>
 
−
      <li>List item one</li>
 
−
      <li>List item two</li>
 
−
      <li>List item three</li>
 
−
    </ul>
 
−
  </div>
 
−
  <h3>Section 4</h3>
 
−
  <div>
 
−
    <p>
 
−
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
 
−
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
 
−
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
 
−
    mauris vel est.
 
−
    </p>
 
−
    <p>
 
−
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
 
−
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
 
−
    inceptos himenaeos.
 
−
    </p>
 
−
  </div>
 
−
</div>
 
−
 
−
 
−
  <div class="desc">
 
  
 
<style type="text/css">
 
<style type="text/css">
  
−
.top_slogan {text-align:center; font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;}
+
.header_mobile {
 +
    display:none;
 +
    position: absolute;
 +
    background-color:transparent;
 +
    width:65px;
 +
    top: 90px;
 +
    left:50px;
 +
    height:65px;
 +
    z-index:999;
 +
    position:fixed;}
  
−
</style>
+
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
 +
.header_mobile ul * {margin:0; padding:0;}
 +
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
 +
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
 +
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
 +
.header_mobile li.current-menu-item {background:#5AB3E3}
 +
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 +
.header_mobile ul ul li:hover{background:#159CD8}
 +
.header_mobile ul ul li{float:none; width:120px}
 +
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 +
.header_mobile ul ul ul {top:0; left:200%}
 +
.header_mobile ul li.selected a{color:#8BC5EB}
 +
.header_mobile ul li:hover > ul{display:block;}
  
−
<center><div class="top_slogan">The Project</div></center>
 
  
−
<h1>Background</h1></a>
+
@media screen and (max-width:1000px){
−
+
−
<p style="font-size:15px">The structural and functional study of the proteins expressed by a genome is
+
  
−
called proteomics. This relatively novel science uses different methodologies in order to
+
.header_left{display:none;}
 +
.header_right{display:none;}
 +
.header_mobile{display:block;}
  
−
separate and identify specific proteins of interest. Among these techniques, SDS-PAGE
+
}
  
−
plays an essential role due to its high sensitivity, low sample volume requirement, and
+
</style>
 +
 
 +
<div id="wrap2">
  
−
high popularity. Negatively charged proteins migrate towards the positive electrode
+
  <div class="slider">
  
−
according to their size and charge. Smaller proteins migrate further in a given amount of
+
<style type="text/css">
 +
.slider{width:100%; margin:0; clear:both; position:relative; top:-48px;}
 +
.flex-container a:active,
 +
.flexslider a:active {outline: none;}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
 +
.flexslider {width: 100%; margin: 0; padding: 0 0 0 0;}
 +
.flexslider .slides > li {display: none;}
 +
.flexslider .slides img {width:100%; height:auto; display: block;}
 +
.flex-pauseplay span {text-transform: capitalize;}
 +
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
 +
html[xmlns] .slides {display: block;}
 +
* html .slides {height: 1%;}
 +
.no-js .slides > li:first-child {display: block;}
 +
.flexslider {position: relative; zoom: 1; overflow:hidden;} <!---height:500px--->
 +
.flexslider .slides {zoom: 1;}
 +
.flexslider .slides > li {position: relative;}
 +
.flex-container {zoom: 1; position: relative;}
 +
.flex-direction-nav li a {width:65px; height:37px; margin:0; display: block; position: absolute; top:0px; cursor: pointer; text-indent: -9999px;}
 +
.flex-direction-nav li a.next {background:url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png) no-repeat center; right:0px;}
 +
.flex-direction-nav li a.prev {background:url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat center;right:65px;}
 +
.flex-direction-nav li a.next:hover {background:url(https://static.igem.org/mediawiki/2015/b/ba/NAIT_Next_a.png) no-repeat center;}
 +
.flex-direction-nav li a.prev:hover {background:url(https://static.igem.org/mediawiki/2015/c/c4/NAIT_Prev_a.png) no-repeat center;}
 +
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 +
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
 +
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
 +
.flex-control-nav li:first-child {margin: 0;}
 +
.flex-control-nav li a {width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -9999px;}
 +
.flex-control-nav li a:hover {background-position: 0 -13px;}
 +
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
 +
.flex-caption{position: absolute;left:auto;right:auto; top:150px; width:100%;font-family: 'Source Sans Pro', sans-serif;text-align:center; font-size:14px; color:#FFFFFF; text-shadow:2px 2px 2px #000000}
 +
.flex-caption h0{font-size:30px; color:#FFFFFF}
 +
.flex-caption h2{ font-size:30px; color:#FFFFFF;text-shadow:2px 4px 2px #000000}
 +
.flex-caption p{ text-align:center; padding:0 200px;}
 +
a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#8BC5EB; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
 +
</style>
  
−
time. As proteins are separated in this manner, users load molecular weight standards
+
<div class="flexslider">
 +
    <ul class="slides">
 +
    <li><a href=""><img src="https://static.igem.org/mediawiki/2015/6/62/NAIT_Slide_Pedway.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p><strong><a href=""></a></strong></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Desc"><img src="https://static.igem.org/mediawiki/2015/5/56/NAIT_Slide_1_Project.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Practices"><img src="https://static.igem.org/mediawiki/2015/d/db/NAIT_Slide_2_Whiteboard.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                   
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Modeling"><img src="https://static.igem.org/mediawiki/2015/5/57/NAIT_Slide_3_3D.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
    </ul>
 +
  </div>
 +
  </div>
  
−
to estimate the size (in kDa) of the proteins present in their sample. Once the proteins of
+
<div id="wrap5">
  
−
a single sample have been isolated and are embedded in the polyacrylamide (PA) gel
+
  <div class="section_one_three">
 +
        <h2 class="centered_title">Achievements</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" title=""><img src="https://static.igem.org/mediawiki/2015/5/50/NAIT_Medal_Icon.png" width="125px" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Despite the time constraints, our team achieved a lot this summer and we are proud of what we have accomplished.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" class="more">read more</a>
 +
        </div>
 +
       
 +
  <div class="section_one_three">
 +
        <h2 class="centered_title">iGEM 2015</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org" title=""><img src="https://static.igem.org/mediawiki/2015/0/05/NAIT_Icon_services.png" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Learn about the exciting opportunities the iGEM foundation has to offer! The experience was incredible!
 +
        </p>
 +
        <a href="https://2015.igem.org" class="more">read more</a>
 +
        </div>
  
−
matrix, staining procedures are used to visualize them.</p>
+
  <div class="section_one_three">
 +
        <h2 class="centered_title">Contact Us!</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" title=""><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Please contact our team if you want more information about our project or have any other questions or concerns.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" class="more">read more</a>
 +
        </div>
 +
 
 +
</div>  
  
−
<br>
 
  
−
<center><img src="http://upload.wikimedia.org/wikipedia/commons/4/46/SDS-PAGE_Electrophoresis.png" width="750px"></center>
+
  <div class="clear"></div>  
 +
 
 +
 
 +
</div>
  
−
<br>
 
  
−
<p style="font-size:15;">Organic dyes, such as Coomassie blue, can be used for this purpose;
 
−
 
−
nevertheless, their low sensitivity and a detection range that goes from 1 to 50 ng can
 
−
 
−
be a challenge for detecting low abundance proteins (Jin, Huang, Yoo, & Choi, 2006). A
 
−
 
−
higher sensitivity can be achieved by fluorescent staining techniques (from 0.1 to 10
 
−
 
−
ng.); however, UV instruments are necessary in order to read the data (Jin et al., 2006).
 
−
 
−
The most sensitive method up to date is radiolabeling, but the requirement of hazardous
 
−
 
−
isotopes and their complex management makes it a complicated procedure (Jin et al.,
 
−
 
−
2006). Silver staining is a method that offers great sensitivity and an easy to handle
 
−
 
−
protocol, thus making it one of the most commonly used staining methods. </p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://www.bio-rad.com/webroot/web/images/lsr/products/electrophoresis/product_overlay_content/global/lsr_biosafe_coomasie_gel.jpg"></center>
 
−
 
−
<br><br>
 
−
 
−
<h1>The Problem </h1></a>
 
−
 
−
<p style="font-size:15px">Difficulties with silver staining arise when the molecular weight markers are re-
 
−
 
−
colored golden-brown in the staining process. Markers offer evenly distributed proteins
 
−
 
−
that show bands of equal intensity and known size. Researchers can compare these
 
−
 
−
bands with their sample and identify the protein they are looking for based on its size. A
 
−
 
−
subset of these markers has color-coded standard proteins to facilitate the identification
 
−
 
−
of each band. Post-silver staining, the users lose the ability to use the color code as a
 
−
 
−
reference.</p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://labs.mmg.pitt.edu/gjoerup/silver_stain.jpg" width="750px"></center>
 
−
     
 
−
  </div>
 
−
  </div>
 
−
 
−
  <div class="clear"></div>
 
  
 +
</div>
  
 
<div class="header_mobile">
 
<div class="header_mobile">
Line 278: Line 246:
 
   </ul>
 
   </ul>
 
</div>
 
</div>
 +
 +
  <div class="clear"></div>
 +
 
 
    
 
    
−
 
 
−
</div>
 
−
 
−
 
  
−
        <div class="footer">
+
<div class="footer">
 
         <div class="footer_content">
 
         <div class="footer_content">
 
             <div class="footer_left">
 
             <div class="footer_left">
Line 300: Line 267:
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 +
                <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs"><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" width="20px" alt="" title="" /></a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 305: Line 273:
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
</div>
 
  
 
<style type="text/css">
 
<style type="text/css">
  
 
#footer {z-index:15;}
 
#footer {z-index:15;}
−
.footer {position: relative; padding:20px 0 40px 0; margin: -25px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
+
.footer {padding:20px 0 40px 0; margin: 0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
Line 329: Line 296:
  
 
</body>
 
</body>
−
 
−
<!----------
 
−
 
−
                          _ __  _
 
−
                        ;'  '',)
 
−
                        /;6 , ;/
 
−
                        (Y)_:., |
 
−
                        `-', :; \
 
−
                          |;  ,.:\
 
−
                          /:.;  ;;)
 
−
                        |:;,.'|  :/
 
−
                        / |:  / ; /
 
−
                      /:;\ `| "//
 
−
                      /_,: | |./,|
 
−
                    _/: \.'|,|/| |
 
−
                  /:.,:.|,|"| |:|
 
−
                  /:;:|:,/;|:| |'|
 
−
        eduardo  |',:| \_ \ |_|;\_
 
−
                /;\_ /\_)) \_))\_))
 
−
                (;(________
 
−
                '''''`'''~`
 
−
 
−
------------------>
 
−
 
  
 
</html>
 
</html>

Latest revision as of 20:44, 6 August 2015

Team NAIT 2015