Team:Penn

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
   <head>
   <head>
-
     <title>Home</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"/>
-
        <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
  <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
 +
 +
        <script>
 +
    jQuery(document).ready(function($) {
 +
       
 +
            $("#first").mouseenter(function(){
 +
            $("#first-text").css("display", "inline-block");
 +
          $("#first-text").animate({
 +
            width: "200px"
 +
            });
 +
            });
 +
           
 +
              $("#first").mouseleave(function(){
 +
            $("#first-text").hide();
 +
          $("#first-text").animate({
 +
            width: "10px"
 +
            });
 +
            });
 +
             
 +
                  $("#second").mouseenter(function(){
 +
            $("#second-text").css("display", "inline-block");
 +
          $("#second-text").animate({
 +
            width: "200px"
 +
            });
 +
            });
 +
           
 +
              $("#second").mouseleave(function(){
 +
            $("#second-text").hide();
 +
          $("#second-text").animate({
 +
            width: "10px"
 +
            });
 +
            });
 +
             
 +
                  $("#third").mouseenter(function(){
 +
            $("#third-text").css("display", "inline-block");
 +
          $("#third-text").animate({
 +
            width: "200px"
 +
            });
 +
            });
 +
           
 +
              $("#third").mouseleave(function(){
 +
            $("#third-text").hide();
 +
          $("#third-text").animate({
 +
            width: "10px"
 +
            });
 +
            });
 +
       
 +
              $(".img-wrapper #first").mouseclick(function(){
 +
                $('html, body').animate({
 +
        scrollTop: $("#first-section").offset().top,
 +
    }, '2400');
 +
                });
 +
           
 +
            /*put in same for other sections*/
 +
           
 +
           
 +
       
 +
           
 +
            $(".hero-unit").click(function(){
 +
                $(this).fadeOut();
 +
                });
 +
 +
 +
});
 +
    </script>
 +
      
      
Line 14: Line 79:
         /*fonts/headings*/
         /*fonts/headings*/
         h4 {
         h4 {
-
             text-align: left;
+
             text-align: center;
         }
         }
-
     
+
       
 +
 +
/*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;
-
#myCarousel {
 
-
  width: 80%;
 
}
}
-
.team td {
+
#navigation li:hover{
-
     overflow: hidden;
+
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-
            height:175px;
+
  filter: alpha(opacity=60);
-
            width:220px;
+
-moz-opacity: 0.6;
-
            display: inline-block;
+
-khtml-opacity: 0.6;
-
            padding:5px;
+
  opacity: 0.6;
-
   
+
}
-
        }
+
 
-
       
+
#navigation li {
-
        .hidden { /*change this class when hovered*/
+
z-index:9999;
-
            display: none;
+
height: 20px;
-
        }
+
margin: 30px;
-
        .team img {
+
width: 20px;
-
          max-width:100%;
+
background-color: black;
-
    max-height:100%;
+
-moz-border-radius: 100%;
-
        }
+
-ms-border-radius: 100%;
-
       
+
-webkit-border-radius: 100%;
-
.name {
+
-o-border-radius: 100%;
-
    position: absolute;
+
border-radius: 100%;
-
    margin-bottom: 30px;
+
opacity: 1;
-
    width: 220px;
+
}
-
    height: 0px;
+
*/
-
    display: none;
+
 
-
    background-color: white;
+
 
-
    margin-top: -50px;
+
/*Make hero unit slightly transparent*/
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
#hero-unit {
 +
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -khtml-opacity: 0.7;
   opacity: 0.7;
   opacity: 0.7;
 +
width: 300px;
 +
position: relative;
 +
display: inline-block;
 +
margin-left: 600px;
 +
margin-top: -500px;
}
}
 +
/*fix up featurette formatting*/
 +
/*
 +
.featurette {
 +
    padding: 50px;
 +
    margin: 50px;
 +
    text-align: left;
 +
}
 +
body {
 +
    text-align: left;
 +
}
-
  /* CUSTOMIZE THE CAROUSEL
+
.pull-right {
-
     -------------------------------------------------- */
+
    float: right;
 +
    height: 100px;
 +
    width: auto;
 +
}
 +
*/
 +
.span4 {
 +
     display: block;
 +
    position: relative;
 +
    height: 50px;
 +
    margin:20px;
 +
    border-radius: 0px;
 +
    float: left;
 +
}
-
  .carousel-control {
+
/*fonts*/
-
      height: 80px;
+
.lead {
-
      margin-top: 0;
+
    font-size: 13px;
-
padding-top: 10px;
+
-
      font-size: 120px;
+
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
      background-color: transparent;
+
-
      border: 0;
+
-
      z-index: 10;
+
-
    }
+
-
    /*
+
-
.carousel img {
+
-
  min-width: 100%;
+
}
}
-
 
+
 
 +
.featurette p {
 +
    font-size: 13px;
      
      
-
 
+
}
-
    .carousel-caption {
+
.text {
-
      background-color: rgba(0,0,0,.3);
+
    height: 40px;
-
     }
+
    width: 50px;
 +
    background-color: rgb(200,200,200);
 +
     border-radius: 6px;
 +
    text-align: right;
 +
    margin-left: -30px;
 +
    padding: 3px;
 +
    display: none;
 +
 +
}
 +
 
 +
 
 +
 
 +
.img-side-wrapper {
 +
    height: 500px;
 +
    width: 400px;
 +
    margin-top: 200px;
 +
    margin-left: 200px;
 +
}
 +
 
 +
.img-wrapper {
 +
    height: 80px;
 +
    width: 80px;
 +
    border-radius: 100%;
 +
    z-index: 99;
 +
    overflow:hidden;
 +
    display: inline-block;
 +
}
 +
 
 +
.img-text-wrapper {
 +
    height: 140px;
 +
    width: 300px;
 +
    margin-top: -50px;
      
      
-
    .carousel-caption h1,
+
}
-
    .carousel-caption .lead {
+
.img-wrapper img {
-
      margin: 0;
+
    display: inline-block;
-
      line-height: 1.25;
+
    height: 90px;
-
      color: #fff;
+
    width: auto;
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
 
-
    }*/
+
      
      
-
    #main_area{
+
}
-
      margin: 100px 100px 10px 100px;
+
-
     
+
-
    }
+
-
.textbox {
+
#min-width {
-
text-align: left;
+
    min-width: 1000px;
-
float: left;
+
    height: 500px;
-
width: 300px;
+
}
}
 +
 +
.img-span {
 +
    overflow: hidden;
 +
    height: 100px;
 +
    width: 100%;
 +
}
 +
   
 +
        .span4 {
 +
        text-align: justify;
 +
        margin-left: 50px;
 +
    }
      
      
 +
#rowfirst {
 +
    display: relative;
 +
    margin-top: 450px;
 +
}
 +
       
 +
            /* 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 {
-
/*Position/size hero unit*/
+
     }
-
.hero-unit {
+
-
     width: 375px;
+
-
    float: left;
+
-
margin-left: 100px;
+
-
margin-top: -50px;
+
-
}
+
 +
    /* 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;
 +
    }
 +
   
 +
    .img1 img {
 +
        height: 400px;
 +
        width: auto;
 +
    }
 +
    .img1 {
 +
        height: 400px;
 +
        width: 600px;
 +
        margin-top: 80px;
 +
        float: right;
 +
        overflow: hidden;
 +
    }
-
#logo {
 
-
  height: 45px;
 
-
  float: right;
 
-
  margin-right: -220px;
 
-
}
 
     </style>
     </style>
   </head>
   </head>
Line 124: Line 303:
      
      
      
      
-
    <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">
Line 136: Line 316:
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
             </button>
-
             <a class="brand" class="active" href="https://2013.igem.org/Team:Penn">Penn's iGEM Team</a>
+
             <a class="brand" href="https://2013.igem.org/Team:Penn">Penn's iGEM Team</a>
             <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
             <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
             <div class="nav-collapse collapse">
             <div class="nav-collapse collapse">
Line 154: Line 334:
                   </ul>
                   </ul>
                 </li>
                 </li>
-
                 <li><a href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
+
                 <li class="active"><a href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
<li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
<li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
                 <li class="dropdown">
                 <li class="dropdown">
Line 166: Line 346:
                   </ul>
                   </ul>
                 </li>
                 </li>
-
                <li><a href="http://2013.igem.or"><img id = "logo" src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png"></li></a>
 
               </ul>
               </ul>
             </div><!--/.nav-collapse -->
             </div><!--/.nav-collapse -->
Line 176: Line 355:
      
      
-
    <!-- Main Area -->
+
   
-
                <div id="main_area">
+
   
-
                        <!-- Slider -->
+
    <!--Circles on the side that scroll you to sections of the page-->
-
                        <div class="row">
+
<ul id="navigation">
-
                                <div class="span12" id="slider">
+
<li id="one"></li>
-
                                        <!-- Top part of the slider -->
+
<li id="two"></li>
-
                                        <div class="row">
+
<li id="three"></li>
-
                                                <div class="span8" id="carousel-bounding-box">
+
<li id="four"></li>
-
                                                        <div id="myCarousel" class="carousel slide">
+
</ul>
-
                                                                <!-- Carousel items -->
+
   
-
                                                                <div class="carousel-inner">
+
   
-
                                                                        <div class="active item" data-slide-number="0"><img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" /></div>
+
<!--general human practices overview-->
-
                                                                        <div class="item" data-slide-number="1"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" /></div>
+
<div id="min-width">
-
                                                                        <div class="item" data-slide-number="2"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
        <!--
-
                                                                        <div class="item" data-slide-number="3"><img src="http://placehold.it/770x300&text=four" /></div>
+
 
-
                                                                        <div class="item" data-slide-number="4"><img src="http://placehold.it/770x300&text=five" /></div>
+
<div class="hero-unit">
-
                                                                        <div class="item" data-slide-number="5"><img src="http://placehold.it/770x300&text=six" /></div>
+
  <h1>Human Practices</h1>
-
                                                                </div>
+
  <p><!--Tagline goes here--></p>
-
                                                                <!-- Carousel nav -->
+
<!-- <p>Welcome to our page on human practices!  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="carousel-control left" href="#myCarousel" data-slide="prev" style="font-size:30px;">&#x276E;</a>
+
    <!--<a class="btn btn-primary btn-large">
-
                                                                <a class="carousel-control right" href="#myCarousel" data-slide="next"style="font-size:30px; ">&#x276F; </a>
+
      Learn more-->
-
                                                        </div>
+
  <!-- </a>
-
                                                </div>
+
  </p>
-
                                                <div class="span4" id="carousel-text"></div>
+
</div><!--end hero unit-->
 +
 
 +
<div class="img-side-wrapper">
 +
   
 +
<div class="img-text-wrapper">
 +
<div class="img-wrapper">
 +
  <a href="#first-sect"><img id="first" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
 +
    </div><!--img wrapper-->
 +
    <div class="text" id="first-text">
 +
        <h4>First Section</h4>
 +
    </div>
 +
    </div>
 +
 
 +
    <div class="img-text-wrapper">
 +
    <div class="img-wrapper">
 +
  <a href="#second-sect"><img id="second" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
 +
    </div><!--img wrapper-->
 +
    <div class="text" id="second-text">
 +
        <h4>Second Section</h4>
 +
    </div>
 +
    </div>
 +
 
 +
    <div class="img-text-wrapper">
 +
    <div class="img-wrapper">
 +
  <a href="#third-sect"><img id="third" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></a>
 +
    </div><!--img wrapper-->
 +
    <div class="text" id="third-text">
 +
        <h4>Third Section</h4>
 +
    </div>
 +
    </div>
 +
 
 +
   
 +
</div>
 +
 
 +
    <div class="hero-unit" id="hero-unit">
 +
  <h1>Human Practices</h1>
 +
  <p><!--Tagline goes here--></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
 +
    <!--<a class="btn btn-primary btn-large">
 +
      Learn more-->
 +
    </a>
 +
  </p>
 +
</div><!--end hero unit-->
 +
 
 +
  </div>
 +
 
 +
<!--
 +
  <hr class="featurette-divider">
 +
<div class="img-side-wrapper">
 +
   
 +
        <a href="#"><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;">
 +
        </div></a>
 +
       
 +
        <div class="text"><h2>First Section</h2>
 +
          <p>  </p>
 +
        </div>
 +
 
 +
   
 +
              <a href="#"> <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;">
 +
                </div></a>
 +
                <div class="text"><h2>Second Section</h2>
 +
          <p> </p>
 +
        </div>
   
   
-
                                                <div style="display: none;" id="slide-content">
+
           
-
                                                        <div id="slide-content-0">
+
     
-
                                                                <h1>Hello and Welcome!</h1>
+
       
-
                                                      <p>Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
+
          <a href="#"> <div class="span4">
-
                                                    back with us soon to learn more about what we're up to!</p> <a id="team" class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Penn/Team">Meet the Team</a>
+
          <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;">
-
                                                        </div>
+
            </div></a>
-
                                                        <div id="slide-content-1">
+
            <div class="text"><h2>Third Section</h2>
-
                                                                <h1>Project</h1>
+
          <p> </p>
-
              <p>This wiki is currently under construction, but check
+
        </div>
-
              back with us soon to learn more about what we're up to!  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>
+
      </div>
-
              <a class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Penn/Project">Our Project</a>
+
-->
-
                                                        </div>
+
     
-
                                                        <div id="slide-content-2">
+
   
-
                                                                <h1>Outreach</h1>
+
<div class="img-span">
-
              <p>Learn more about what Penn's iGEM team is doing in the community.  This wiki is currently under construction, but check
+
    <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
              back with us soon to learn more about what we're up to! 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>
+
</div>
-
              <a class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a>
+
   
-
                                                        </div>
+
-
                                                        <div id="slide-content-3">
+
-
                                                                <h2>Slider Four</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                                <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-4">
+
-
                                                                <h2>Slider Five</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                                <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-5">
+
-
                                                                <h2>Slider Six</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                                <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
+
-
                                                        </div>
+
-
                                                </div>
+
-
                                        </div>
+
-
+
-
                                </div>
+
-
                        </div> <!--/Slider-->
+
-
+
-
                        <div class="row hidden-phone" id="slider-thumbs">
+
-
                                <div class="span12">
+
-
                                        <!-- Bottom switcher of slider -->
+
-
                                        <ul class="thumbnails">
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-0">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-1">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-2">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-3">
+
-
                                                                <img src="http://placehold.it/170x100&text=four" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-4">
+
-
                                                                <img src="http://placehold.it/170x100&text=five" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-5">
+
-
                                                                <img src="http://placehold.it/170x100&text=six" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                        </ul>
+
-
                                </div>
+
-
                        </div>
+
</div>
</div>
-
<script>
+
<div class="four" id="first-sect">
-
   jQuery(document).ready(function($) {
+
    <div class="span4">
 +
   <h1>Outreach</h1>
 +
  <p><!--Tagline goes here--></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
 +
    <!--<a class="btn btn-primary btn-large">
 +
      Learn more-->
 +
    </a>
 +
  </p>
   
   
-
        $('#myCarousel').carousel({
+
  <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
-
                interval: 5000
+
 
-
        });
+
-
+
-
        $('#carousel-text').html($('#slide-content-0').html());
+
-
+
-
        //Handles the carousel thumbnails
+
-
        $('[id^=carousel-selector-]').click( function(){
+
-
                var id_selector = $(this).attr("id");
+
-
                var id = id_selector.substr(id_selector.length -1);
+
-
                var id = parseInt(id);
+
-
                $('#myCarousel').carousel(id);
+
-
        });
+
-
+
-
+
-
        // When the carousel slides, auto update the text
+
-
        $('#myCarousel').on('slid', function (e) {
+
-
                var id = $('.item.active').data('slide-number');
+
-
                $('#carousel-text').html($('#slide-content-'+id).html());
+
-
        });
+
-
+
-
+
-
});
+
-
</script>
+
 +
</div>
 +
 +
<div class="img1"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></div>
 +
 +
     
 +
     
 +
 +
 +
</div>
 +
 +
 +
<<div class="img-span">
 +
    <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
</div>
      
      
-
    <!--Overview-->
 
-
    <div class="four">
 
-
        <div class="hero-unit">
 
-
  <h1>Accomplishments</h1>
 
-
  <br/>
 
-
<div class="textbox">
 
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
 
</div>
</div>
 +
<div class="four" id="second-sect">
 +
    <div class="span4">
 +
  <h1>Section 2</h1>
 +
  <p><!--Tagline goes here--></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
 +
    <!--<a class="btn btn-primary btn-large">
 +
      Learn more-->
 +
    </a>
 +
  </p>
 +
 +
  <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
 
 +
</div>
</div>
 +
 +
<div class="img1"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></div>
 +
 +
     
 +
     
 +
 +
 +
</div>
 +
 +
<div class="img-span">
 +
    <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
</div>
</div>
      
      
-
      
+
</div>
 +
<div class="four" id="third-sect">
 +
     <div class="span4">
 +
  <h1>Third Sectoin</h1>
 +
  <p><!--Tagline goes here--></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
 +
    <!--<a class="btn btn-primary btn-large">
 +
      Learn more-->
 +
    </a>
 +
  </p>
 +
 +
  <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
 
 +
</div>
 +
 +
<div class="img1"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/2DoiODoUy6/Discovery%20Day%20Clark%20Park/IMG_2048.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/></div>
 +
 +
     
 +
     
 +
 +
 +
</div>
 +
</div>
 +
   
 +
   
   </body>
   </body>
</html>
</html>

Revision as of 12:28, 19 July 2013

Penn's iGEM Team

First Section

Second Section

Third Section

Human Practices

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

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

<

Section 2

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 Sectoin

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"