Team:Penn/HumanPractices

From 2013.igem.org

(Difference between revisions)
Line 3: Line 3:
     <title></title>
     <title></title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
     <!-- Bootstrap -->
+
     <!-- Bootstrap and mainstyle css -->
     <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
     <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
-
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
      
      
Line 104: Line 104:
}
}
 +
/*fix up featurette formatting*/
 +
 +
.featurette {
 +
    padding: 50px;
 +
    margin: 50px;
 +
    text-align: left;
 +
}
 +
 +
body {
 +
    text-align: left;
 +
}
 +
 +
.pull-right {
 +
    float: right;
 +
    height: 200px;
 +
    width: auto;
 +
}
 +
 +
.span4 {
 +
    margin: 40px;
 +
}
 +
 +
.row{
 +
    float: center;
 +
    margin: auto;
 +
}
 +
 +
.pull-left {
 +
    float: left;
 +
    height: 200px;
 +
    width: auto;
 +
}
 +
 +
.two featurette {
 +
    color: white;
 +
}
          
          
Line 150: Line 186:
       margin-top: 10px;
       margin-top: 10px;
     }
     }
 +
   
     </style>
     </style>
   </head>
   </head>
Line 217: Line 254:
      
      
      
      
-
<div class="one"><!--general human outreach overview-->
+
<!--general human practices overview-->
      
      
<div class="hero-unit">
<div class="hero-unit">
Line 228: Line 265:
   </p>
   </p>
</div><!--end hero unit-->
</div><!--end hero unit-->
-
</div><!--/div class one-->
+
 
 +
  <hr class="featurette-divider">
 +
 
 +
<div class="row">
 +
        <div class="span4">
 +
          <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
 +
          <h2>First Section</h2>
 +
          <p>This is a brief overview of the a section of the page.  Clicking the image or "more" will scroll down to that section</p>
 +
          <p><a class="btn" href="">More &raquo;</a></p>
 +
        </div><!-- /.span4 -->
 +
   
 +
                <div class="span4">
 +
          <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
 +
          <h2>Second Section</h2>
 +
          <p>This is a brief overview of the a section of the page.  Clicking the image or "more" will scroll down to that section</p>
 +
          <p><a class="btn" href="">More &raquo;</a></p>
 +
        </div><!-- /.span4 -->
 +
           
 +
     
 +
       
 +
            <div class="span4">
 +
          <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
 +
          <h2>Third Section</h2>
 +
          <p>This is a brief overview of the a section of the page.  Clicking the image or "more" will scroll down to that section</p>
 +
          <p><a class="btn" href="">More &raquo;</a></p>
 +
        </div><!-- /.span4 -->
 +
 
 +
     
 +
        </div>
 +
</div>
 +
 
 +
 
<div class="two">
<div class="two">
Line 234: Line 302:
   <h1>Outreach</h1>
   <h1>Outreach</h1>
   <p><!--Tagline goes here--></p>
   <p><!--Tagline goes here--></p>
-
   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 +
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 +
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
 +
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 +
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     <!--<a class="btn btn-primary btn-large">
     <!--<a class="btn btn-primary btn-large">
       Learn more-->
       Learn more-->
Line 240: Line 312:
   </p>
   </p>
</div><!--end hero unit-->
</div><!--end hero unit-->
 +
 +
  <hr class="featurette-divider">
 +
   
 +
      <div class="featurette" style="color:white;">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        <h2 class="featurette-heading">Outreach 1 <span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
 +
        Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
      <hr class="featurette-divider">
 +
 +
      <div class="featurette" style="color:white;">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        <h2 class="featurette-heading"> Outreach 2<span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
      <hr class="featurette-divider">
 +
 +
      <div class="featurette" style="color:white">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        <h2 class="featurette-heading">Outreach 3<span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
     
 +
 +
</div><!--/div class 2-->
</div><!--/div class 2-->
 +
</div>
Line 247: Line 349:
   <h1>Section 3</h1>
   <h1>Section 3</h1>
   <p><!--Tagline goes here--></p>
   <p><!--Tagline goes here--></p>
-
   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 +
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 +
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
 +
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 +
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     <!--<a class="btn btn-primary btn-large">
     <!--<a class="btn btn-primary btn-large">
       Learn more-->
       Learn more-->
Line 253: Line 359:
   </p>
   </p>
</div><!--end hero unit-->
</div><!--end hero unit-->
 +
 +
 +
 +
  <hr class="featurette-divider">
 +
 +
      <div class="featurette">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 +
        <h2 class="featurette-heading">Heading 1 <span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
      <hr class="featurette-divider">
 +
 +
      <div class="featurette">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 +
        <h2 class="featurette-heading"> Heading 2<span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
      <hr class="featurette-divider">
 +
 +
      <div class="featurette">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 +
        <h2 class="featurette-heading">Heading 3<span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
     
 +
 +
</div><!--/div class 3-->
</div><!--/div class 3-->
Line 259: Line 395:
   <h1>Section 4</h1>
   <h1>Section 4</h1>
   <p><!--Tagline goes here--></p>
   <p><!--Tagline goes here--></p>
-
   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 +
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 +
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
 +
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 +
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     <!--<a class="btn btn-primary btn-large">
     <!--<a class="btn btn-primary btn-large">
       Learn more-->
       Learn more-->
Line 265: Line 405:
   </p>
   </p>
</div><!--end hero unit-->
</div><!--end hero unit-->
 +
 +
 +
  <hr class="featurette-divider">
 +
 +
      <div class="featurette">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 +
        <h2 class="featurette-heading">Heading 1 <span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
      <hr class="featurette-divider">
 +
 +
      <div class="featurette">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 +
        <h2 class="featurette-heading"> Heading 2<span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
 +
     
 +
      <hr class="featurette-divider">
 +
 +
      <div class="featurette">
 +
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
 +
        <h2 class="featurette-heading">Heading 3<span class="muted"><!--tagline-->.</span></h2>
 +
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 +
      </div>
</div><!--/div class 4-->
</div><!--/div class 4-->
 +
</div>
</div>
Line 295: Line 461:
       !function ($) {
       !function ($) {
         $(function(){
         $(function(){
-
          // carousel demo
+
                 
-
          $('#myCarousel').carousel()
+
-
         
+
-
         
+
           $("#one").click(function() {
           $("#one").click(function() {
         $('html, body').animate({
         $('html, body').animate({
Line 321: Line 484:
     }, '2400');
     }, '2400');
  });
  });
 +
             
            
            
          
          

Revision as of 14:24, 12 July 2013

Penn's iGEM Team

Human Practices

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

140x140

First Section

This is a brief overview of the a section of the page. Clicking the image or "more" will scroll down to that section

More »

140x140

Second Section

This is a brief overview of the a section of the page. Clicking the image or "more" will scroll down to that section

More »

140x140

Third Section

This is a brief overview of the a section of the page. Clicking the image or "more" will scroll down to that section

More »

Outreach

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Outreach 1 .

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Outreach 2.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Outreach 3.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Heading 1 .

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Heading 2.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Heading 3.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Heading 1 .

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Heading 2.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Heading 3.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

Retrieved from "http://2013.igem.org/Team:Penn/HumanPractices"