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...")
 
(40 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
    <title></title>
+
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
    <!-- Bootstrap -->
+
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
-
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
-
   
+
     <title>Penn iGEM</title>
-
     <style>
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/> <!--css-->
-
        /*fonts/headings*/
+
-
        h4 {
+
-
            text-align: center;
+
-
        }
+
-
       
+
-
       
+
-
       
+
-
       
+
-
/*Brady Bunch Table and background section*/
+
-
.team {
+
-
      float: center;
+
-
        margin-left: 200px;
+
-
}
+
-
.team td {
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script> <!--jquery-->
-
    overflow: hidden;
+
-
            height:175px;
+
-
            width:220px;
+
-
            display: inline-block;
+
-
            padding:5px;
+
      
      
-
        }
+
<script>
-
          
+
         $(document).ready(function($) {
-
        .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 {
+
$('.nav_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
-
height:800px;
+
  });
-
position: relative;
+
    </script>
-
padding-top: 30px;
+
<style>
-
width: 100%;
+
.box {
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Yn0SK0Y0-7/snap.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
max-width: 600px;
-
background-position: 300px
+
margin: 0 auto;
-
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;
+
}
}
 +
</style>
 +
</head>
-
.two {
+
<body>
-
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*/
+
<div id = "banner_wrap">
-
.hero-unit {
+
<div class = "banner"></div>
-
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
</div>
-
  filter: alpha(opacity=70);
+
<div id = "nav_holder">
-
-moz-opacity: 0.7;
+
<div class = "nav_wrap"></div>
-
  -khtml-opacity: 0.7;
+
</div>
-
  opacity: 0.7;
+
</div>
-
}
+
  <div id="text">
 +
<div class = "textwrap">
 +
<div class = "box">
 +
            <b><center><h1>
 +
Outreach
 +
</b></center></h1>
 +
<br/>
 +
Outreach events are essential for familiarizing the public with a new technology. By reaching out to the scientific community at the University of Pennsylvania, as well as the greater Philadelphia community, we were able to introduce synthetic biology to a wide audience and spread the word about iGEM.</center>
 +
<br/>
 +
<br/>
 +
<h4><b>Science Discovery Day</b></h4>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/>
 +
<div style="float:left;">
 +
<img src="https://static.igem.org/mediawiki/2013/2/24/Penn7.jpg" width='290' height='auto'>
 +
<p>Danielle helps a young scientist dye his DNA<br> sample.</p>
 +
</div>
 +
<div style="float:right;">
 +
<img src="https://static.igem.org/mediawiki/2013/f/fb/Penn8.jpg" width='290' height='auto'>
 +
<p>Danny explains the protocol to an interested <br>student.</p>
 +
</div>
 +
<div style="clear:both"/>
 +
</br>
 +
</br><h4><b>Pre-Freshman Program</b></h4>The Penn iGEM team presented an overview of our project and discussed the IGEM competition with a group of rising freshmen participating in a pre-college summer program. This program was designed to introduce incoming engineers to each engineering major offered at Penn. These incoming engineering students learned about the fascinating discipline of synthetic biology and many expressed an increased interest in bioengineering upon conclusion of the presentation.
 +
<br/>
 +
<br/>
 +
<div style="float:left;">
 +
<img src="https://static.igem.org/mediawiki/2013/8/87/Penn9.jpg" width='290' height='auto'>
 +
<p>Mahamad introduces iGEM to a new class of<br> engineering students.</p>
 +
</div>
 +
<div style="float:right;">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e4/Penn10.jpg" width='290' height='auto'>
 +
<p>Danielle gives a history lesson, discussing the<br> Human Genome Project.</p>
 +
</div>
 +
<div style="clear:both"/>
 +
<br/>
 +
<br/>
-
       
+
<h4><b>CURF Research Expo</b></h4>Penn iGEM presented our research at the Open House Research Expo hosted by the Center for Undergraduate Research and Fellowships. This poster presentation was attended by hundreds of Penn students and faculty members. We introduced synthetic biology to a multi-discipline crowd and presented our project to many curious students. Our poster generated a lot of interest in iGEM, synthetic biology, and epigenetics.
-
       
+
<br/>
-
       
+
<br/>
-
            /* CUSTOMIZE THE NAVBAR
+
<div style="float:left;">  
-
    -------------------------------------------------- */
+
<img src="https://static.igem.org/mediawiki/2013/2/2a/Penn11.jpg" width='290' height='auto'>
-
 
+
<p>Danielle explains the poster to a Penn student.</p>
-
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
+
</div>  
-
    .navbar-wrapper {
+
<div style="float:right;">  
-
      position: absolute;
+
<img src="https://static.igem.org/mediawiki/2013/f/fe/Penn12.jpg" width='290' height='auto'>
-
      top: 0;
+
<p>Mahamad presents research to an interested<br> observer.</p>
-
      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>
+
-
  </head>
+
-
  <body>
+
-
   
+
-
   
+
-
    <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">
+
-
          <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">
+
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
            </button>
+
-
            <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 -->
+
-
    </div><!-- /.navbar-wrapper -->
+
-
 
+
-
   
+
-
<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>
 +
<div style="clear:both"/>
 +
<br/>
 +
<br/>
 +
<h4><b>CURF Research Mixer</b></h4>The Penn iGEM team presented research to members of the Penn scientific community at the Research Mixer hosted by the Center for Undergraduate Research and Fellowships. Undergraduates looking to get involved in STEM research attended the event for information and inspiration, and our team introduced attendees to synthetic biology and epigenetics. Responses were highly positive, and many students expressed interest in getting involved in iGEM.
 +
<br/>
 +
<br/>
 +
<div style="float:left;">
 +
<img src="https://static.igem.org/mediawiki/2013/4/48/Penn13.jpg" width='290' height='auto'>
 +
<p>Danny and Brad arrive with the poster,<br> ready to present.</p>
 +
</div>
 +
<div style="float:right;">
 +
<img src="https://static.igem.org/mediawiki/2013/f/f1/Penn14.jpg" width='290' height='auto'>
 +
<p>Josh explain Penn iGEM's project to two<br> interested students.</p>
</div>
</div>
 +
<div style="clear:both"/>
 +
<br/>
 +
<br/>
 +
        </div>
 +
  </div>
-
   
+
</div>  
-
   
+
 
-
   
+
<div id ="pagefooter">
-
   
+
<br>
-
   
+
<br>
-
   
+
<center><a href = "https://2013.igem.org/Team:Penn"> Home  </a> <a href = "https://static.igem.org/mediawiki/2013/e/e5/Spec_Sheet.pdf" >Spec Sheet</a> <a href = "https://2013.igem.org/Team:Penn/sitemap" >Sitemap</a>
-
   
+
</center>  
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
<br>
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
Penn iGem &copy; 2013
-
   
+
</div>  
-
    <script src="../assets/js/jquery.js"></script>
+
-
    <script src="../assets/js/bootstrap-transition.js"></script>
+
</body>
-
    <script src="../assets/js/bootstrap-alert.js"></script>
+
<script>
-
    <script src="../assets/js/bootstrap-modal.js"></script>
+
</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>

Latest revision as of 03:21, 29 October 2013

Penn iGEM

Outreach


Outreach events are essential for familiarizing the public with a new technology. By reaching out to the scientific community at the University of Pennsylvania, as well as the greater Philadelphia community, we were able to introduce synthetic biology to a wide audience and spread the word about iGEM.

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.

Danny explains the protocol to an interested
student.



Pre-Freshman Program

The Penn iGEM team presented an overview of our project and discussed the IGEM competition with a group of rising freshmen participating in a pre-college summer program. This program was designed to introduce incoming engineers to each engineering major offered at Penn. These incoming engineering students learned about the fascinating discipline of synthetic biology and many expressed an increased interest in bioengineering upon conclusion of the presentation.

Mahamad introduces iGEM to a new class of
engineering students.

Danielle gives a history lesson, discussing the
Human Genome Project.



CURF Research Expo

Penn iGEM presented our research at the Open House Research Expo hosted by the Center for Undergraduate Research and Fellowships. This poster presentation was attended by hundreds of Penn students and faculty members. We introduced synthetic biology to a multi-discipline crowd and presented our project to many curious students. Our poster generated a lot of interest in iGEM, synthetic biology, and epigenetics.

Danielle explains the poster to a Penn student.

Mahamad presents research to an interested
observer.



CURF Research Mixer

The Penn iGEM team presented research to members of the Penn scientific community at the Research Mixer hosted by the Center for Undergraduate Research and Fellowships. Undergraduates looking to get involved in STEM research attended the event for information and inspiration, and our team introduced attendees to synthetic biology and epigenetics. Responses were highly positive, and many students expressed interest in getting involved in iGEM.

Danny and Brad arrive with the poster,
ready to present.

Josh explain Penn iGEM's project to two
interested students.



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