Biomod/2012/OSU/OhioMOD: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 148: Line 148:


<body>
<body>
 
<header>
<nav>
    <center>
    <p><a href="#">Sample navigation bar</a></p>
    <img id="frontvar" src="http://dl.dropbox.com/s/5ye82pz6sieqlzy/front_logo.jpg"/>
    </nav>
  </center>
 
  </header>
*Team Name: OhioMOD
<div id="wrapper">
*Institution:
    <nav>
**The Ohio State University, Columbus OH, USA
    <div id="nav" class="standardNav">
*Faculty Advisor:
        <ul>
**Dr. Carlos Castro
        <li><a href="#">#Background</a></li>
*Graduate Advisors:
        <li><a href="#">#Project</a></li>
**Mike Hudoba
        <li><a href="#">#Methods</a></li>
**Alex Marras
        <li><a href="#">#Results</a></li>
*Team Members:
        <li><a href="#">#Resources</a></li>
**Alex Autran
        <li><a href="#">#The Team</a></li>
**Jimmy Bossart
      </ul>
**Josh Brockman
        <div id="nav_biomod"><img src="http://dl.dropbox.com/s/s986aya26k1bbiu/nav_footer.png"></div>
**Bridget Crawford
      </div>
**Nick Justus
  </nav>
**Matt Lynch
    <div id="main">
**Kedryn Marquart
    <div class="section">
**Eisman Morales
        <h1>Background</h1>
**David Sohutskay
      </div>
**Marty Spang
    <div class="section">
**Mike Viznyuk
        <h1>Project</h1>
| [[Image:OhioMOD First Team Photo.jpg|550px]]
      </div>
<br/>
    <div class="section">
The Ohio State University — OhioMOD<br/>
        <h1>Methods</h1>
'''Title:''' A Framework for Assembling and Reconfiguring DNA Origami Containers<br/>
      </div>
'''Abstract:''' Previous DNA origami research has illustrated a wide array of 3D structures. Typically, folding multiple objects requires ordering a new set of DNA components for each desired structure. This project seeks to overcome this limitation by developing a hierarchical assembly framework where multiple 3D shapes can be constructed from a single base DNA origami structure. The basic shape is constructed by folding four equilateral triangles from a single DNA origami scaffold and then arranging them into a parallelogram. Schematics were created to fold these parallelograms into four nanoscale container-like shapes: a tetrahedron, an octahedron, an icosahedron, and a wheel. These final shapes are composed of triangles joined by double stranded DNA connections that can be disrupted utilizing DNA strand displacement to ultimately reconfigure a given shape into a different 3D shape (i.e. reconfigure an octahedron to an icosahedron). This project will enable an economic framework to fabrication of multiple DNA origami structures. Furthermore, this approach could be used to develop DNA structures that can reconfigure in response to a biological stimulus, for example cancer cell microenvironments, for drug delivery applications.
    <div class="section">
</body>
        <h1>Results/Discussion</h1>
      </div>
    <div class="section">
        <h1>Resources</h1>
      </div>
    <div class="section">
        <h1>The Team</h1>
        <center>
        <div id="team_slider" role="team_slider">
        <section class="slider">
            <div class="flexslider">
            <ul class="slides">
                <li data-thumb="http://dl.dropbox.com/s/fpobpvxondszu99/theteam_nav.jpg"> <img src="http://dl.dropbox.com/s/3v3ra748y0px1sk/hjgj.jpg"></li>
                <li data-thumb="http://dl.dropbox.com/s/c1lakz9038tctat/castro_nav.jpg"> <img src="http://dl.dropbox.com/s/dludspdi4kgt8m6/castro_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/wucsphgdkswuter/hudoba_nav.jpg"> <img src="http://dl.dropbox.com/s/kn6s88wtb7t9ex6/hudoba_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/qv2vpqo2fqzgchy/marras_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/z0fxjhc3qshb79r/autran_nav.jpg"> <img src="http://dl.dropbox.com/s/1ee9xvpinxxsh15/autran_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/3mxgbma3ytfm61s/bossart_nav.jpg"> <img src="http://dl.dropbox.com/s/lsty77hjlc5f19i/bossart_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/rto7gtk9cv97g3e/brockman_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/2ur94d8koicrnx0/crawford_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/dsdnsrxcubk08en/justus_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/pfckd5kuddq3xh9/lynch_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/wsvj1mxw1sc157c/marquart_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/s57dszk8rnoay1i/morales_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/xrnssm96cd7kd26/sohutskay_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
                <li data-thumb="http://dl.dropbox.com/s/2xt1g8j6rk7uvxu/viznyuk_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
              </ul>
          </div>
          </section>
          </div>
          </center>
      </div>
      </div>
  </div>
    <!-- [END] #main -->
  </div>
<!-- [END] #wrapper -->
</html>
</html>

Revision as of 09:29, 22 October 2012

<html> <head> 

               <link rel="stylesheet" href="http://dl.dropbox.com/s/y6lp9909xs10md7/flexslider.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/s/piaqef6ntvm0hnn/jquery.queryloader2.js"></script> <!-- progress preloading-->

<script type"text/javascript"> $(document).ready(function () { $("body").queryLoader2({barColor: "#FFF",backgroundColor: "#000",percentage: true,barHeight: 1,completeAnimation: "grow",minimumTime: 100}); $("style").remove(); $('head').append('<link rel="stylesheet" href="/skins/monobook/shared.css?164" type="text/css" />'); $("#sidebar-main").remove(); $(".portlet").remove(); $("#contentSub").remove(); $("#jump-to-nav").remove(); $("#siteSub").remove(); $(".firstHeading").remove(); $("#footer").remove(); $(".printfooter").remove(); var aboveHeight = $('header').outerHeight(); }); 

   $(window).scroll(function(){

//if scrolled down more than the header's height 

       if ($(window).scrollTop() > aboveHeight){

// if yes, add "fixed" class to the <nav> // add padding top to the #content (value is same as the height of the nav) 

           $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');
       } else {

// when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top 

           $('nav').removeClass('fixed').next().css('padding-top','0');
       }
   });

</script> 

 <style type="text/css">

body { margin: 0; font-family: arial, sans-serif; background: #FFF; } header { text-align:center; padding:0px 0 0 0; background-color:#fff; }

  1. wrapper {

position:relative; width:100%; background:#000; }

  1. main {

width:100%; margin: 0px; background-image:url(img/background_v2.svg); padding:0px; } .section { min-height: 600px; padding-top: 1px; /*background-image:url(img/background_v2.svg);*/ color:#fff; } /* NAVIGATION STYLES */ .standardNav ul { display: block; margin: 0; padding: 6px; list-style:none; padding-left:100px; /*-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;*/ background: #333; } .standardNav li { display: inline-block; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; width:125px; } .standardNav li a { color:#9e9e9e; padding: 8px 10px; text-decoration: none; font-size: 14px; font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; } .standardNav li a:hover { color: #FFF; } .standardNav li.active a { color: #FFF; font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; } nav { font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; color:#9e9e9e; font-weight:bold; height: 60px; width: 100%; line-height:30px; position: relative; z-index:9999999; } nav p { padding: 0 70px; } nav a { font-family:"ff-din-web-pro", sans-serif; font-style:normal; font-weight:400; color:#9e9e9e; text-shadow: 0 0 0 transparent, 0 -1px 1px #333; }

  1. nav_biomod {

float:right; } h1 { color:#7f7f7f; font-size:20px; font-weight:normal; letter-spacing:2px; line-height:18px; padding-top:50px; text-align:center; text-transform:uppercase; font-family:"ff-din-web-condensed", sans-serif; font-style:normal; font-weight:400; } .fixed { position:fixed; }

  1. team_slider {

padding-top:50px; width:800px; } </style> </head>

<body> <header> 

   <center>
   <img id="frontvar" src="http://dl.dropbox.com/s/5ye82pz6sieqlzy/front_logo.jpg"/>
 </center>
 </header>

<div id="wrapper"> 

   <nav>
   <div id="nav" class="standardNav">
       <ul>
       <li><a href="#">#Background</a></li>
       <li><a href="#">#Project</a></li>
       <li><a href="#">#Methods</a></li>
       <li><a href="#">#Results</a></li>
       <li><a href="#">#Resources</a></li>
       <li><a href="#">#The Team</a></li>
     </ul>
       <div id="nav_biomod"><img src="http://dl.dropbox.com/s/s986aya26k1bbiu/nav_footer.png"></div>
     </div>
 </nav>
   <div id="main">
   <div class="section">
       <h1>Background</h1>
     </div>
   <div class="section">
       <h1>Project</h1>
     </div>
   <div class="section">
       <h1>Methods</h1>
     </div>
   <div class="section">
       <h1>Results/Discussion</h1>
     </div>
   <div class="section">
       <h1>Resources</h1>
     </div>
   <div class="section">
       <h1>The Team</h1>
       <center>
       <div id="team_slider" role="team_slider">
       <section class="slider">
           <div class="flexslider">
           <ul class="slides">
               <li data-thumb="http://dl.dropbox.com/s/fpobpvxondszu99/theteam_nav.jpg"> <img src="http://dl.dropbox.com/s/3v3ra748y0px1sk/hjgj.jpg"></li>
               <li data-thumb="http://dl.dropbox.com/s/c1lakz9038tctat/castro_nav.jpg"> <img src="http://dl.dropbox.com/s/dludspdi4kgt8m6/castro_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/wucsphgdkswuter/hudoba_nav.jpg"> <img src="http://dl.dropbox.com/s/kn6s88wtb7t9ex6/hudoba_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/qv2vpqo2fqzgchy/marras_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/z0fxjhc3qshb79r/autran_nav.jpg"> <img src="http://dl.dropbox.com/s/1ee9xvpinxxsh15/autran_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/3mxgbma3ytfm61s/bossart_nav.jpg"> <img src="http://dl.dropbox.com/s/lsty77hjlc5f19i/bossart_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/rto7gtk9cv97g3e/brockman_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/2ur94d8koicrnx0/crawford_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/dsdnsrxcubk08en/justus_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/pfckd5kuddq3xh9/lynch_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/wsvj1mxw1sc157c/marquart_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/s57dszk8rnoay1i/morales_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/xrnssm96cd7kd26/sohutskay_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
               <li data-thumb="http://dl.dropbox.com/s/2xt1g8j6rk7uvxu/viznyuk_nav.jpg"> <img src="http://dl.dropbox.com/s/gohlgd0xed4zedg/marras_slide.jpg" /> </li>
             </ul>
         </div>
         </section>
         </div>
         </center>
     </div>
     </div>
 </div>
   <!-- [END] #main --> 
 </div>

<!-- [END] #wrapper --> </html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2012/OSU/OhioMOD&oldid=638748"