|
|
(25 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html> | + | <html lang="en"> |
- | <head>
| + | <head> |
- | <title></title> | + | <title>Team</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 and mainstyle css -->
| + | <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 src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
| + | <script> |
- | <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script> | + | $(document).ready(function($) { |
- | <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
| + | |
- |
| + | |
- | <script>
| + | |
- | jQuery(document).ready(function($) {
| + | |
- |
| + | |
- | $('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() {
| + | /*load in the sidebar*/ |
- | $('html, body').animate({
| + | $('.left_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc'); |
- | scrollTop: $("#third-section").offset().top,
| + | |
- | }, '2400');
| + | }); |
- | });
| + | |
- |
| + | |
- | });
| + | |
| </script> | | </script> |
| <style> | | <style> |
- | /*hero unit positioning*/
| + | |
- | #text {
| + | |
- | margin-left: 20px;
| + | |
- | padding: 50px;
| + | |
- |
| + | |
- | }
| + | |
| | | |
- | /*navigation circles*/
| + | |
- | #nav-circles {
| + | |
- | position: fixed;
| + | |
- | top: 100px;
| + | |
- | right: 20px;
| + | |
- | z-index: 9999;
| + | |
- | }
| + | |
- |
| + | |
- | #nav-circles li {
| + | |
- | 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: 5px;
| + | |
- | }
| + | |
- |
| + | |
- | .span4 {
| + | |
- | height: 150px;
| + | |
- | width: 150px;
| + | |
- | position: relative;
| + | |
- | -moz-border-radius: 100%;
| + | |
- | -webkit-border-radius: 100%; | + | |
- | -khtml-border-radius: 100%;
| + | |
- | border-radius: 100%;
| + | |
- | overflow: hidden;
| + | |
- | background-size: 300px;
| + | |
- | background-position: -70px -20px;
| + | |
- | opacity: .7;
| + | |
- | margin: 50px;
| + | |
- | display: inline-block;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | .span4 img {
| + | |
- | height: 150px;
| + | |
- |
| + | |
- | position: relative;
| + | |
- | }
| + | |
- |
| + | |
- | .span4:hover {
| + | |
- | opacity: 1;
| + | |
- | }
| + | |
- |
| + | |
- | .img-span {
| + | |
- | overflow: hidden;
| + | |
- | height: 100px;
| + | |
- | width: 100%;
| + | |
- | margin: auto;
| + | |
- | background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
| + | |
- | background-attachment: fixed;
| + | |
- | background-size: 100%;
| + | |
- | background-repeat: no-repeat;
| + | |
- | }
| + | |
- | | + | |
- | .hero-unit{
| + | |
- | margin-top:10px;
| + | |
- | }
| + | |
| | | |
| </style> | | </style> |
- | </head>
| + | </head> |
| + | <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"> |
| + | |
| | | |
- | <body data-spy="scroll" data-target="#nav-circles">
| |
- |
| |
- | <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">
| |
- | <!-- 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" 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">
| |
- |
| |
- | <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>
| |
- | <ul class="dropdown-menu">
| |
- | <li><a href="https://2013.igem.org/Team:Penn/Team">Team</a></li>
| |
- | <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>
| |
- | <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 class="dropdown">
| |
- | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
| |
- | <ul class="dropdown-menu">
| |
- |
| |
- | <li><a href="https://2013.igem.org/Team:Penn/Project">Project</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 -->
| |
- |
| |
- | <!--link circles-->
| |
- | <div id="nav-circles">
| |
- | <ul class="nav">
| |
- |
| |
- | <a href="#top"><li></li></a>
| |
- | <a href="#first-section"><li></li></a>
| |
- | <a href="#second-section"><li></li></a>
| |
- | <a href="#third-section"><li></li></a>
| |
- | </ul>
| |
- | </div>
| |
- | <div id="top">
| |
- |
| |
| | | |
- | <div class="img-span">
| |
- | </div>
| |
- |
| |
- | <!--First section-->
| |
- | <div class="section" id="first-section">
| |
- |
| |
- | <div class="row">
| |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 5%;">
| |
- | </div><!-- /.span4 -->
| |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 15%;">
| |
- | <!--<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/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg');left: 30%;">
| |
- | <!--<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>
| |
- | <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>
| |
| | | |
- | <div class="img-span"> | + | |
- | </div>
| + | <a href="https://2013.igem.org/Team:Penn/HumanPractices"><li class="active" style="background-color: rgb(200,200,215);">human practices</li></a> |
- |
| + | <a href="https://2013.igem.org/Team:Penn/Notebook"><li>notebook</li></a> |
- | <div class="section" id="second-section">
| + | </ul> |
- |
| + | <div class="section-title">human practices</div> |
- |
| + | </div> |
- | <div class="row">
| + | |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 5%;">
| + | |
- | </div><!-- /.span4 -->
| + | |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 15%;">
| + | |
- | <!--<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/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg');left: 30%;">
| |
- | <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>-->
| |
- | </div><!-- /.span4 --></div>
| |
| | | |
| | | |
- |
| + | <div class="section1" style="background-position: top;"> |
- | <!--first hero unit-->
| + | <div class="text"> |
- | <div class="hero-unit" id="text"> | + | Is Epigenetic Engineering Safe? <br><br> |
- | <h4>Second Section</h4> | + | Read our thoughts on the matter, in our editorial(link) in the Penn Bioethics Journal, the premiere expert-reviewed undergraduate bioethics journal (publication forthcoming) <br> |
- | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
| + | We spread the word about synthetic biology and iGEM at numerous outreach events! <br> |
- | 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. 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-->
| |
- |
| |
- | </div>
| |
- |
| |
- |
| |
- | <div class="img-span">
| |
- | </div>
| |
- |
| |
- | <div class="section" id="third-section">
| |
- |
| |
- | <div class="row">
| |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 5%;">
| |
- | </div><!-- /.span4 -->
| |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); left: 15%;">
| |
- | <!--<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/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg');left: 30%;">
| |
- | <!--<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>Third Section</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. Excepteur
| |
- | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
| |
- | </div>
| |
- |
| |
- | </div> <!--endsection-->
| |
- |
| |
- | </body>
| |
- |
| |
- |
| |
| | | |
| + | </body> |
| + | <script> |
| + | |
| + | </script> |
| </html> | | </html> |