|
|
(70 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 -->
| + | <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*/ |
| + | $('.left_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc'); |
| + | |
| + | }); |
| + | </script> |
| <style> | | <style> |
- | /*fonts/headings*/
| + | |
- | h4 {
| + | |
- | text-align: center;
| + | |
- | }
| + | |
| | | |
- |
| |
- |
| |
- |
| |
- | /*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="navbar-wrapper">
| + | <a href="https://2013.igem.org/Team:Penn/HumanPractices"><li class="active" style="background-color: rgb(200,200,215);">human practices</li></a> |
- | <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
| + | <a href="https://2013.igem.org/Team:Penn/Notebook"><li>notebook</li></a> |
- | <div class="container">
| + | </ul> |
| + | <div class="section-title">human practices</div> |
| + | </div> |
| + | |
| | | |
- | <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="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. -->
| |
- | <div class="nav-collapse collapse">
| |
- | <ul class="nav">
| |
- |
| |
- | <!-- 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 id="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><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 class="section1" style="background-position: top;"> |
- | </div><!-- /.navbar-wrapper -->
| + | <div class="text"> |
| + | Is Epigenetic Engineering Safe? <br><br> |
| + | 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> |
| + | We spread the word about synthetic biology and iGEM at numerous outreach events! <br> |
| + | </div> |
| + | </div> |
| | | |
- | <div class="one"><!--general human outreach overview-->
| |
- |
| |
- | <div class="hero-unit">
| |
- | <h1>Human Practices</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><!--end hero unit-->
| |
- | </div><!--/div class one-->
| |
- |
| |
- | <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><!--end hero unit-->
| |
- | </div><!--/div class 2-->
| |
- |
| |
- |
| |
- | <div class="three"><!--another section-->
| |
- | <div class="hero-unit">
| |
- | <h1>Section 3</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><!--end hero unit-->
| |
- | </div><!--/div class 3-->
| |
| | | |
- | <div class="four"><!--another section-->
| + | |
- | <div class="hero-unit">
| + | </body> |
- | <h1>Section 4</h1> | + | <script> |
- | <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.
| + | </script> |
- | <!--<a class="btn btn-primary btn-large">
| + | </html> |
- | Learn more--> | + | |
- | </a> | + | |
- | </p>
| + | |
- | </div><!--end hero unit-->
| + | |
- | </div><!--/div class 4-->
| + | |
- | </div> | + | |