Team:Penn/Parts

From 2013.igem.org

(Difference between revisions)

Revision as of 21:08, 3 August 2013

Abstract

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.

This is a caption

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

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

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.

This is a caption

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 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

This is a caption

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

@@ Line 14: / Line 14: @@
          $('body').scrollspy({ target: '#nav-circles' });
+        $("#one").click(function() {
+        $('html, body').animate({
+         scrollTop: $("#top").offset().top,
+     }, '2400');
+ });
+       $("#two").click(function() {
+        $('html, body').animate({
+         scrollTop: $("#first-section").offset().top,
+     }, '2400');
+ });
+          $("#three, #team").click(function() {
+        $('html, body').animate({
+         scrollTop: $("#second-section").offset().top,
+     }, '2400');
+ });
+       $("#four").click(function() {
+        $('html, body').animate({
+         scrollTop: $("#third-section").offset().top,
+     }, '2400');
+ });
          });
@@ Line 20: / Line 43: @@
      <style>
          /*hero unit positioning*/
-         .hero-unit {
+         #text {
-            margin-left: 20px;
+                      align: center;
+float: center;
              padding: 50px;
-margin-top: 50px;
+margin-left: auto;
+margin-right: auto;
+margin-top: 40px;
+width: 400px;
+overflow: hidden;
          }
@@ Line 34: / Line 62: @@
              z-index: 9999;
          }
-         #nav-circles li {
+         #nav-circles li, #icon  {
+            overflow: hidden;
              display: block;
              height: 30px;
@@ Line 41: / Line 71: @@
              border-radius: 100%;
              margin:10px;
+            padding:3px;
              top: 100px;
              right: 100px;
@@ Line 53: / Line 83: @@
          }
-      /*rows with images*/
+        /*rows with images*/
          .row{
              width: 100%;
@@ Line 62: / Line 92: @@
              height: 150px;
              width: 150px;
+            position: static;
+              -moz-border-radius: 100%;
+    -webkit-border-radius: 100%;
+    -khtml-border-radius: 100%;
+            border-radius: 100%;
+            overflow: hidden;
+            background-size: 300px;
+            background-position: -70px -20px;
+             display: inline-block;
+        }
+        .span_smaller {
+            font-family: arial, sans-serif;
+            text-align: center;
+            height: 100px;
+            width: 100px;
              position: relative;
                -moz-border-radius: 100%;
@@ Line 71: / Line 119: @@
              background-position: -70px -20px;
               opacity: .7;
-              margin: 50px;
+              margin: 25px;
+             margin-top: 0px;
               display: inline-block;
@@ Line 78: / Line 127: @@
          .span4 img {
              height: 150px;
+            position: relative;
+        }
+                 .span4:hover {
+            opacity: 1;
+        }
+                         .span_smaller:hover {
+            opacity: 1;
+        }
+        .span_smaller img {
+            height: 100px;
              position: relative;
@@ Line 92: / Line 154: @@
 background-size: 100%;
      background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
-    background-attachment: fixed;
      background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
 margin-left: 0px;
+margin-top: 20px;
+margin-bottom: 20px;
 }
+a {
+           -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
+ -moz-opacity: 0.8;
+ -khtml-opacity: 0.8;
+  opacity: 0.8;
+}
+a:hover {
-      /*jumbotron colors*/
+    opacity: 1;
-      .jumbotron {
+    text-decoration: none;
-  position: relative;
-  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);
 }
+     .figure {
+        float: left;
+        margin: 7px;
+    display: inline;
+    max-height: 400px;
+    max-width: 400px;
+     }
+     .clear { clear:both;} /*add a clear div if formatting gets weird because of float*/
+      .caption {
+        font-size: 10px;
+        font-family: arial;
+       margin-bottom: 15px;
+        line-height: 10px;
+text-align: center;
+      }
+      .caption2 {
+        font-size: 10px;
+        font-family: arial;
+        position: relative;
+        left: -150px;
+        top:-10px;
+        line-height: 10px;
+text-align: left;
+float: left;
+      }
      </style>
    </head>
-     <body data-spy="scroll" data-target="#nav-circles">
+     <body>
-       <div class="navbar-wrapper">
+        <div class="navbar-wrapper">
        <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
        <div class="container">
          <div class="navbar navbar-inverse navbar-fixed-top">
-           <div class="navbar-inner" style="padding-left: 50px;">
+           <div class="navbar-inner">
              <!-- 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">
@@ Line 136: / Line 221: @@
                <span class="icon-bar"></span>
              </button>
-            <a class="brand" href="https://2013.igem.org/Team:Penn">Penn's iGEM Team</a>
+           <!-- <a class="brand" style="color: white; padding-left: 11%;" href="https://2013.igem.org/Team:Penn">Penn iGEM</a>-->
              <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
              <div class="nav-collapse collapse">
                <ul class="nav">
-                 <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
+                 <li><a href="https://2013.igem.org/Team:Penn">Penn iGEM</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
@@ Line 148: / Line 233: @@
                      <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
                      <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
-                    <!--<li class="divider"></li>
-                    <li class="nav-header">Nav header</li>
-                    <li><a href="#">Separated link</a></li>
-                    <li><a href="#">One more separated link</a></li>-->
                    </ul>
                  </li>
@@ Line 173: / Line 255: @@
        </div> <!-- /.container -->
      </div><!-- /.navbar-wrapper -->
      <!--First section-->
      <div class="section" id="first-section">
-   <div class="row">
+    <div align="center" class="row" style="position: relative; margin-left: auto; margin-right: auto; display: block; width: 600px; max-height: 200px; margin-top: 140px; margin-bottom: 40px; overflow: hidden; position: static; white-space: nowrap;">
-       <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 5%;">
+<div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: 0px 25px 0px 25px;">
-        </div><!-- /.span4 -->
+    </div><!-- /.span4 -->
-     <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 15%;">
+     <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; align: center; margin: 0px 25px 0px 25px;">
            <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>-->
          </div><!-- /.span4 -->
-<div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg');left: 30%;">
+<div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; margin: 0px 25px 0px 25px;">
            <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>-->
          </div><!-- /.span4 --></div>
      <!--first hero unit-->
      <div class="hero-unit" id="text">
-        <h4>First Section</h4>
+       <div id="icon"><img src="http://images.wikia.com/arresteddevelopment/images/7/77/Icon-summary.png"/></div> <h4>Abstract</h4>
          <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.<img src="https://googledrive.com/host/0B4ZBZOYYKBzEdTRvdHVIRDI0OWM/"
+  class="figure"/><p class="caption">This is a caption</p><p>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 class="hero-unit" id="text">
+                                <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 class="hero-unit" id="text">
+                                        <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.
+  <img src="https://googledrive.com/host/0B4ZBZOYYKBzER09TYUNULWdHdU0" class="figure"/><p class="caption">This is a caption</p><p>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>
+                                                       <img src="https://googledrive.com/host/0B4ZBZOYYKBzESmtGdU1XelBPVm8/" class="figure"/><p class="caption2">This is a caption</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>
+                                                                <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> <!--endsection-->
      </body>