Team:Penn/Project

From 2013.igem.org

(Difference between revisions)
Line 6: Line 6:
     <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"/>
-
 
+
  <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
      
      
 +
    <script>
 +
        jQuery(document).ready(function($) {
 +
       
 +
        $('body').scrollspy({ target: '#nav-circles' });
 +
 +
       
 +
        });
 +
    </script>
     <style>
     <style>
-
         /*fonts/headings*/
+
         /*hero unit positioning*/
-
         h4 {
+
         #text {
-
             text-align: center;
+
             margin-left: 20px;
 +
            padding: 50px;
 +
           
         }
         }
          
          
-
          .row{
+
        /*navigation circles*/
-
             width: 100%;
+
        #nav-circles {
-
             margin-top: 100px;
+
             position: fixed;
-
             margin-left: 5px;
+
             top: 100px;
 +
             right: 20px;
 +
            z-index: 9999;
         }
         }
          
          
-
         .hero-unit {
+
         #nav-circles li {
-
            margin-top: 100px;
+
-
            margin-left: 30px;
+
-
            padding-right: 500px;
+
             display: block;
             display: block;
 +
            height: 30px;
 +
            width: 30px;
 +
            border-radius: 100%;
 +
            margin:10px;
 +
 
 +
            top: 100px;
 +
            right: 100px;
 +
            background-color: gray;
         }
         }
          
          
 +
        /*Sections*/
 +
        .section {
 +
            min-height: 700px;
 +
            min-width: 500px;
 +
        }
          
          
 +
        /*rows with images*/
 +
        .row{
 +
            width: 100%;
 +
            margin-top: 100px;
 +
            margin-left: auto;
 +
        }
          
          
-
/*Brady Bunch Table and background section*/
+
        .span4 {
-
.team {
+
            height: 150px;
-
      float: center;
+
            width: 150px;
-
        margin-left: 200px;
+
            border-radius: 100%;
-
}
+
             overflow: hidden;
-
 
+
             margin: 50px;
-
.team td {
+
              
-
    overflow: hidden;
+
              
-
             height:175px;
+
-
             width:220px;
+
-
             display: inline-block;
+
-
             padding:5px;
+
-
   
+
         }
         }
          
          
-
         .hidden { /*change this class when hovered*/
+
         .span4 img {
-
             display: none;
+
             height: 150px;
 +
            opacity: .7;
         }
         }
-
         .team img {
+
          
-
          max-width:100%;
+
        .span4 img:hover {
-
    max-height:100%;
+
            height: 150px;
 +
            opacity: 1;
         }
         }
          
          
-
.name {
+
         .img-span {
-
    position: absolute;
+
     overflow: hidden;
-
    margin-bottom: 30px;
+
     height: 100px;
-
    width: 220px;
+
    width: 100%;
-
    height: 0px;
+
-
    display: none;
+
-
    background-color: white;
+
-
    margin-top: -50px;
+
-
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
-
  filter: alpha(opacity=70);
+
-
-moz-opacity: 0.7;
+
-
-khtml-opacity: 0.7;
+
-
  opacity: 0.7;
+
-
}
+
-
 
+
-
/*navigation circles that scroll when clicked*/
+
-
/*links and navigation*/
+
-
#navigation {
+
-
position: fixed;
+
-
right: 0px;
+
-
top: 20px;
+
-
list-style-type: none;
+
-
z-index: 9999999;
+
-
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+
-
  filter: alpha(opacity=90);
+
-
-moz-opacity: 0.9;
+
-
-khtml-opacity: 0.9;
+
-
  opacity: 0.9;
+
-
 
+
-
}
+
-
 
+
-
#navigation li:hover{
+
-
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+
-
  filter: alpha(opacity=60);
+
-
-moz-opacity: 0.6;
+
-
-khtml-opacity: 0.6;
+
-
  opacity: 0.6;
+
-
}
+
-
 
+
-
#navigation li {
+
-
z-index:9999;
+
-
height: 20px;
+
-
margin: 30px;
+
-
width: 20px;
+
-
background-color: white;
+
-
-moz-border-radius: 100%;
+
-
-ms-border-radius: 100%;
+
-
-webkit-border-radius: 100%;
+
-
-o-border-radius: 100%;
+
-
border-radius: 100%;
+
-
opacity: 1;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
/*Make hero unit slightly transparent and left align text*/
+
-
.hero-unit {
+
-
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
-
  filter: alpha(opacity=70);
+
-
-moz-opacity: 0.7;
+
-
-khtml-opacity: 0.7;
+
-
  opacity: 0.7;
+
-
  text-align: left;
+
-
}
+
-
 
+
-
/*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;
     margin: auto;
}
}
-
 
+
     
-
.pull-left {
+
      /*jumbotron colors*/
-
    float: left;
+
      .jumbotron {
-
    height: 200px;
+
  position: relative;
-
    width: auto;
+
  min-height: 600px;
 +
  padding: 40px 0;
 +
  color: #fff;
 +
  text-align: center;
 +
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
 +
  background: #380060; /* Old browsers */
 +
  background: -moz-linear-gradient(45deg,  #380060 0%, #3fffe6 100%); /* FF3.6+ */
 +
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#094b42), color-stop(100%,#3fffe6)); /* Chrome,Safari4+ */
 +
  background: -webkit-linear-gradient(45deg,  #380060 0%,#3fffe6 100%); /* Chrome10+,Safari5.1+ */
 +
  background: -o-linear-gradient(45deg,  #380060 0%,#3fffe6 100%); /* Opera 11.10+ */
 +
  background: -ms-linear-gradient(45deg,  #380060 0%,#3fffe6 100%); /* IE10+ */
 +
  background: linear-gradient(45deg,  #380060 0%,#3fffe6 100%); /* W3C */
 +
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#380060', endColorstr='#3fffe6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 +
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 +
          box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}
}
-
 
-
.img-circle {
 
-
border-radius: 0px;
 
-
}
 
-
 
-
 
          
          
-
       
 
-
       
 
-
            /* CUSTOMIZE THE NAVBAR
 
-
    -------------------------------------------------- */
 
-
 
-
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
 
-
    .navbar-wrapper {
 
-
      position: absolute;
 
-
      top: 0;
 
-
      left: 0;
 
-
      right: 0;
 
-
      z-index: 10;
 
-
      margin-top: 20px;
 
-
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
 
-
    }
 
-
    .navbar-wrapper .navbar {
 
-
 
-
    }
 
-
 
-
    /* Remove border and change up box shadow for more contrast */
 
-
    .navbar .navbar-inner {
 
-
      border: 0;
 
-
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
 
-
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
 
-
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
 
-
    }
 
-
 
-
    /* Downsize the brand/project name a bit */
 
-
    .navbar .brand {
 
-
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
 
-
      font-size: 16px;
 
-
      font-weight: bold;
 
-
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
 
-
    }
 
-
 
-
    /* Navbar links: increase padding for taller navbar */
 
-
    .navbar .nav > li > a {
 
-
      padding: 15px 20px;
 
-
    }
 
-
 
-
    /* Offset the responsive button for proper vertical alignment */
 
-
    .navbar .btn-navbar {
 
-
      margin-top: 10px;
 
-
    }
 
-
   
 
     </style>
     </style>
   </head>
   </head>
-
   <body>
+
    
-
   
+
    <body data-spy="scroll" data-target="#nav-circles">
-
   
+
      <div class="navbar-wrapper">
-
       
+
-
      <div class="navbar-wrapper">
+
       <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
       <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
       <div class="container">
       <div class="container">
-
         <div class="navbar navbar-inverse">
+
         <div class="navbar navbar-inverse navbar-fixed-top">
-
           <div class="navbar-inner">
+
           <div class="navbar-inner" style="padding-left: 50px;">
             <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
             <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Line 256: Line 160:
       </div> <!-- /.container -->
       </div> <!-- /.container -->
     </div><!-- /.navbar-wrapper -->
     </div><!-- /.navbar-wrapper -->
 +
   
 +
    <!--link circles-->
 +
<div id="nav-circles">
 +
<ul class="nav">
 +
       
 +
<a href="#first-section"><li></li></a>
 +
<a href="#second-section"><li></li></a>
 +
<a href="#third-section"><li></li></a>
 +
<a href="#fourth-section"><li></li></a>
 +
</ul>
 +
    </div>
 +
    <!--Giant Image At the Top-->
 +
    <div class="jumbotron masthead">
 +
  <div class="container">
 +
    <h1>Project</h1>
 +
    <p>Lorem ipsum dolor sit amet.</p>
 +
    <p>
 +
  </div>
 +
</div>
      
      
-
   
+
<div class="img-span">
-
    <!--Circles on the side that scroll you to sections of the page-->
+
    <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
<ul id="navigation">
+
</div>
-
<li id="one"></li>
+
-
<li id="two"></li>
+
-
<li id="three"></li>
+
-
<li id="four"></li>
+
-
</ul>
+
-
   
+
-
   
+
-
<!--general human practices overview-->
+
-
  <div class="section">
+
-
<div class="hero-unit">
+
-
  <h1>Project</h1>
+
-
  <p><!--Tagline goes here--></p>
+
-
  <p>Welcome to our project page!  We're under construction right now, but check back to this page soon so you can see what awesome stuff we've been doing!
+
-
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.
+
-
    <!--<a class="btn btn-primary btn-large">
+
-
      Learn more-->
+
-
    </a>
+
-
  </p>
+
-
</div><!--end hero unit-->
+
-
  <hr class="featurette-divider">
+
    <!--First section-->
-
 
+
    <div class="section" id="first-section">
-
<div class="row">
+
       
 +
    <div class="row">
         <div class="span4">
         <div class="span4">
-
           <a><img id="two"class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;"></a>
+
           <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
          <h2>Abstract</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" id="two">More &raquo;</a></p>
+
         </div><!-- /.span4 -->
         </div><!-- /.span4 -->
      
      
-
                <div class="span4">
+
        <div class="span4">
-
           <img id="three" class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/1LlS0hsVIZ/Screen%20shot%202013-05-29%20at%2016.22.13.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
+
           <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
          <h2>Results</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="" id="three">More &raquo;</a></p>
+
         </div><!-- /.span4 -->
         </div><!-- /.span4 -->
             <div class="span4">
             <div class="span4">
-
           <img class="img-circle" data-src="holder.js/140x140" alt="140x140" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/mcUvmZSIS4/photo-5.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style=" height:140px;">
+
           <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
          <h2>Methods</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="" id="four">More &raquo;</a></p>
+
         </div><!-- /.span4 -->
         </div><!-- /.span4 -->
        
        
         </div>
         </div>
-
</div>
 
-
 
 
-
 
+
    <!--first hero unit-->
-
 
+
     <div class="hero-unit" id="text">
-
<div class="section" id="first-section">
+
         <h4>First Section</h4>
-
 
+
-
  <hr class="featurette-divider">
+
-
      
+
-
      <div class="featurette">
+
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/FsZxKlaNDL/Screen%20shot%202013-05-31%20at%2015.29.53.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
+
-
         <h2 class="featurette-heading">Abstract<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>
+
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
         <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
   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
   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
   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.</p>
+
   sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
-
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
    </div>
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
</div>
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  <img class="span5" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/FsZxKlaNDL/Screen%20shot%202013-05-31%20at%2015.29.53.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>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.</p>
+
-
        <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.</p>
+
-
        <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.</p>
+
-
        <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. <img class="span3" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/1LlS0hsVIZ/Screen%20shot%202013-05-29%20at%2016.22.13.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"
+
-
  style="margin: 4px;"/> 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.</p>
+
-
        <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.</p>
+
-
        <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.</p>
+
-
      </div>
+
-
     
+
-
      <hr class="featurette-divider">
+
-
     
+
   
-
 
+
   
-
 
+
<div class="img-span">
-
</div><!--/div class 2-->
+
    <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
</div>
</div>
 +
   
 +
    <div class="section" id="second-section">
 +
       
 +
        <div class="row">
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
   
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
            <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
-
<div class="four"><!--another section-->
 
-
 
-
  <hr class="featurette-divider">
 
-
 
-
      <div class="featurette">
 
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/FsZxKlaNDL/Screen%20shot%202013-05-31%20at%2015.29.53.png?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>
 
-
        <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</p>
 
-
        <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</p>
 
-
        <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</p>
 
        
        
-
      </div>
+
        </div>
-
     
+
   
-
      <hr class="featurette-divider">
+
    <!--first hero unit-->
-
 
+
    <div class="hero-unit" id="text">
-
      <div class="featurette">
+
         <h4>Second Section</h4>
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/FsZxKlaNDL/Screen%20shot%202013-05-31%20at%2015.29.53.png?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>
+
-
        <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.  <img class="span5" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/FsZxKlaNDL/Screen%20shot%202013-05-31%20at%2015.29.53.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>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</p>
+
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
         <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
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
Line 411: Line 247:
   in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
   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</p>
   sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
-
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
    </div>
-
  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
+
    </div> <!--endsection-->
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  <img class="span3" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/1LlS0hsVIZ/Screen%20shot%202013-05-29%20at%2016.22.13.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"
+
   
-
  style="margin: 4px;"/>Excepteur
+
   
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
<div class="img-span">
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
    <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
</div>
-
  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</p>
+
    <div class="section" id="third-section">
-
         <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
+
        <div class="row">
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
         <div class="span4">
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
        </div><!-- /.span4 -->
-
      </div>
+
   
-
     
+
        <div class="span4">
-
      <hr class="featurette-divider">
+
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
-
      <div class="featurette">
+
            <div class="span4">
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
+
          <img 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>
+
         </div><!-- /.span4 -->
-
         <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 class="section">another section-->
+
-
 
+
-
  <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>
-
 
+
   
-
      <div class="featurette">
+
    <!--first hero unit-->
-
        <img class="featurette-image pull-right" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg">
+
    <div class="hero-unit" id="text">
-
        <h2 class="featurette-heading"> Heading 2<span class="muted"><!--tagline-->.</span></h2>
+
         <h4>Third Section</h4>
-
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
        <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 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>
+
-
    <img class="span5" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/FsZxKlaNDL/Screen%20shot%202013-05-31%20at%2015.29.53.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/><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
   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
   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
   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</p>
   sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
-
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
    </div>
-
  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</p>
+
-
   
+
-
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua.  <img class="span3" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/-RV-MArbh8/Screen%20shot%202013-05-29%20at%2016.22.26.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"
+
-
  style="margin: 4px;"/>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</p>
+
-
    <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</p>
+
-
     
+
-
     
+
-
     
+
-
      </div>
+
-
 
+
-
 
+
-
</div><!--/div class 4-->
+
-
 
+
-
</div>
+
-
 
+
-
 
+
      
      
-
   
+
     </div> <!--endsection-->       
-
   
+
-
   
+
-
   
+
-
   
+
-
   
+
-
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
-
    <script src="https://googledrive.com/d/0B4ZBZOYYKBzEZlhjVEdoamExdm8/"></script><!--scrolly-->
+
-
 
+
-
   
+
-
    <script src="../assets/js/jquery.js"></script>
+
-
    <script src="../assets/js/bootstrap-transition.js"></script>
+
-
    <script src="../assets/js/bootstrap-alert.js"></script>
+
-
    <script src="../assets/js/bootstrap-modal.js"></script>
+
-
    <script src="../assets/js/bootstrap-dropdown.js"></script>
+
-
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
+
-
    <script src="../assets/js/bootstrap-tab.js"></script>
+
-
    <script src="../assets/js/bootstrap-tooltip.js"></script>
+
-
    <script src="../assets/js/bootstrap-popover.js"></script>
+
-
    <script src="../assets/js/bootstrap-button.js"></script>
+
-
    <script src="../assets/js/bootstrap-collapse.js"></script>
+
-
    <script src="../assets/js/bootstrap-carousel.js"></script>
+
-
    <script src="../assets/js/bootstrap-typeahead.js"></script>
+
-
    <script>
+
-
      !function ($) {
+
-
        $(function(){
+
-
                 
+
-
          $("#one").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".one").offset().top,
+
-
    }, '2400');
+
-
});
+
-
   
+
-
      $("#two").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".two").offset().top,
+
-
    }, '2400');
+
-
});
+
-
     
+
-
          $("#three").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".three").offset().top,
+
-
     }, '2400');
+
          
          
-
              $("#four").click(function() {
+
     </body>
-
        $('html, body').animate({
+
 
-
        scrollTop: $(".four").offset().top,
+
 
-
    }, '2400');
+
 
-
});
+
-
             
+
-
         
+
-
       
+
-
       
+
-
      }(window.jQuery)
+
-
     </script>
+
-
    <script src="../assets/js/holder/holder.js"></script>
+
</html>
</html>

Revision as of 13:14, 24 July 2013

Penn's iGEM Team

Project

Lorem ipsum dolor sit amet.

First Section

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

Second Section

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

Third Section

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

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