Team:Penn/Outreach

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="https://googledrive.com/host...")
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
     <title></title>
+
     <title>modeling</title>
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
      <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/>
-
    <!-- Bootstrap -->
+
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
-
     <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ" type="text/javascript"></script>
-
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzEblVWdXkta245Y0k/" type="text/javascript"> </script> <!--javascript-->
 +
<script>
 +
        $(document).ready(function($) {
-
   
+
/*load in the sidebar*/
-
    <style>
+
$('.left_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
-
        /*fonts/headings*/
+
 
-
        h4 {
+
          });
-
            text-align: center;
+
    </script>   
-
        }
+
<style>
 +
           
          
          
-
       
 
-
       
 
-
       
 
-
/*Brady Bunch Table and background section*/
 
-
.team {
 
-
      float: center;
 
-
        margin-left: 200px;
 
-
}
 
-
 
-
.team td {
 
-
    overflow: hidden;
 
-
            height:175px;
 
-
            width:220px;
 
-
            display: inline-block;
 
-
            padding:5px;
 
      
      
-
        }
 
          
          
-
        .hidden { /*change this class when hovered*/
 
-
            display: none;
 
-
        }
 
-
        .team img {
 
-
          max-width:100%;
 
-
    max-height:100%; 
 
-
        }
 
-
       
 
-
.name {
 
-
    position: absolute;
 
-
    margin-bottom: 30px;
 
-
    width: 220px;
 
-
    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;
 
-
}
 
-
 
-
.one {
 
-
height:800px;
 
-
position: relative;
 
-
padding-top: 30px;
 
-
width: 100%;
 
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Yn0SK0Y0-7/snap.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
 
-
background-position: 300px
 
-
background-repeat: no-repeat;
 
-
background-size: 100%;
 
-
background-attachment: fixed;
 
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 
-
  filter: alpha(opacity=70);
 
-
-moz-opacity: 0.7;
 
-
-khtml-opacity: 0.7;
 
-
  opacity: 0.7;
 
-
}
 
-
 
-
.two {
 
-
height:800px;
 
-
position: relative;
 
-
padding-top: 30px;
 
-
width: 100%;
 
-
background-color: #50393F;
 
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/-ZtRJ7Gu1U/photo-8.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
 
-
background-position: 300px -100px;
 
-
background-repeat: no-repeat;
 
-
background-size: 80%;
 
-
background-attachment: fixed;
 
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 
-
  filter: alpha(opacity=70);
 
-
-moz-opacity: 0.7;
 
-
-khtml-opacity: 0.7;
 
-
  opacity: 0.7;
 
-
}
 
-
       
 
-
    .three {
 
-
/*
 
-
no background image for now
 
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");*/
 
-
position: relative;
 
-
text-align: center;
 
-
height:800px;
 
-
width: 100%;
 
-
padding-top: 50px;
 
-
}
 
-
 
-
/*Make hero unit slightly transparent*/
 
-
.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;
 
-
}
 
-
 
-
 
-
       
 
-
       
 
-
       
 
-
            /* 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>
 +
<img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
 +
<img src="http://collegediabetesnetwork.org/wp-content/uploads/2012/07/UPenn_logo1.png" id="penn"/> <!--penn logo-->
 +
  <div class="left_wrap">
      
      
 +
 
 +
  <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo-->
      
      
-
    <div class="navbar-wrapper">
+
   
-
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+
   
-
      <div class="container">
+
   
 +
    <div class="section-title" style="left: 20px;">modeling</div>
-
        <div class="navbar navbar-inverse">
+
    </div>  
-
          <div class="navbar-inner">
+
    <div class="section1" style="background-position: top;">
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
        <div class="text">
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
             <b><center><h1>
-
              <span class="icon-bar"></span>
+
Outreach
-
              <span class="icon-bar"></span>
+
</b></center></h1>
-
              <span class="icon-bar"></span>
+
<br>
-
             </button>
+
<b><center>
-
            <a class="brand" href="#">Penn's iGEM Team</a>
+
-
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
+
-
            <div class="nav-collapse collapse">
+
-
              <ul class="nav">
+
-
                <li class="active"><a href="https://2013.igem.org/Team:Penn">Home</a></li>
+
-
                <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="https://2013.igem.org/Team:Penn#three">Team</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
+
-
                    <li><a href="https://igem.org/Team.cgi?year=2013">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>
+
-
<li><a href="https://2013.igem.org/Team:Penn/Project">Project</a></li>
+
-
                <li><a href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
+
-
                <li><a href="https://2013.igem.org/Team:Penn/Outreach">Outreach</a></li>
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">In the Lab <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                 
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div><!-- /.navbar-inner -->
+
-
        </div><!-- /.navbar -->
+
-
      </div> <!-- /.container -->
+
Science Discovery Day
-
    </div><!-- /.navbar-wrapper -->
+
</b></center>
 +
<br>
 +
The Penn iGEM team volunteered at the Philadelphia Science Festival, running a booth during Science Discovery Day. The Science Festival is a ten-day program dedicated to building public interest in science, technology, engineering, and mathematics. On Discovery Day, children come to Clark Park with their families and visit various booths to learn about science and perform fun, simple experiments. Our team ran an activity for participants to extract DNA from a cheek swab using household items, including saltwater, detergent, and alcohol. The children gained a great sense of accomplishment from performing a biology experiment, and we were happy to inspire some of America’s future scientists!
 +
<br>
 +
<br>
 +
<img src="http://www.flickr.com/photos/103329596@N08/9960265774/">
 +
<i>Danielle helps a young scientist dye his DNA sample.</i>
 +
<br>
 +
<br>
 +
 +
        </div>
 +
    </div>
      
      
-
<div class="two">
 
-
   
 
-
<div class="hero-unit">
 
-
  <h1>Outreach</h1>
 
-
  <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.
 
-
    <!--<a class="btn btn-primary btn-large">
 
-
      Learn more-->
 
-
    </a>
 
-
  </p>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
 
+
 
-
   
+
</body>
-
   
+
<script>
-
   
+
</script>
-
   
+
-
   
+
-
   
+
-
   
+
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
-
   
+
-
    <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(){
+
-
          // carousel demo
+
-
          $('#myCarousel').carousel()
+
-
       
+
-
       
+
-
      }(window.jQuery)
+
-
    </script>
+
-
    <script src="../assets/js/holder/holder.js"></script>
+
-
  </body>
+
</html>
</html>

Revision as of 07:36, 27 September 2013

modeling

modeling

Outreach


Science Discovery Day

The Penn iGEM team volunteered at the Philadelphia Science Festival, running a booth during Science Discovery Day. The Science Festival is a ten-day program dedicated to building public interest in science, technology, engineering, and mathematics. On Discovery Day, children come to Clark Park with their families and visit various booths to learn about science and perform fun, simple experiments. Our team ran an activity for participants to extract DNA from a cheek swab using household items, including saltwater, detergent, and alcohol. The children gained a great sense of accomplishment from performing a biology experiment, and we were happy to inspire some of America’s future scientists!

Danielle helps a young scientist dye his DNA sample.

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