Team:Penn/HumanPractices

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
 +
  <head>
 +
    <title></title>
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <!-- Bootstrap and mainstyle css -->
 +
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
 +
    <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/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
 +
   
 +
    <script>
 +
        jQuery(document).ready(function($) {
 +
       
 +
        $('body').scrollspy({ target: '#nav-circles' });
 +
 +
       
 +
        });
 +
    </script>
 +
    <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;
 +
            border-radius: 100%;
 +
            overflow: hidden;
 +
            margin: 50px;
 +
           
 +
           
 +
        }
 +
       
 +
        .span4 img {
 +
            height: 150px;
 +
            opacity: .7;
 +
        }
 +
       
 +
        .span4 img:hover {
 +
            height: 150px;
 +
            opacity: 1;
 +
        }
 +
       
 +
       
 +
    </style>
 +
  </head>
 +
 
 +
    <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" style="padding-left: 50px;">
 +
            <!-- 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 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="#first-section"><li></li></a>
 +
<a href="#second-section"><li></li></a>
 +
<a href="#third-section"><li></li></a>
 +
<a href="#fourth-section"><li></li></a>
 +
</ul>
 +
    </div>
 +
 +
    <!--Giant Image At the Top-->
 +
    <div class="jumbotron masthead">
 +
  <div class="container">
 +
  <!--<div class="hero-unit" id="text">
 +
      <p>Human Practices<p>
 +
    </div>-->
 +
    <h1>Human Practices</h1>
 +
    <p>Lorem ipsum dolor sit amet.</p>
 +
    <p>
 +
  </div>
 +
</div>
 +
   
 +
    <!--First section-->
 +
    <div class="section" id="first-section">
 +
       
 +
    <div class="row">
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
   
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
 +
            <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.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 class="section" id="second-section">
 +
       
 +
        <div class="row">
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
   
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
 +
            <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
 +
     
 +
        </div>
 +
   
 +
    <!--first hero unit-->
 +
    <div class="hero-unit" id="text">
 +
        <h4>Second 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-->
 +
   
 +
   
 +
   
 +
    <div class="section" id="third-section">
 +
       
 +
        <div class="row">
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/9E2cXZezHT/Discovery%20Day%20Clark%20Park/IMG_2055.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
   
 +
        <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/7LfqJB0eR9/Discovery%20Day%20Clark%20Park/IMG_2038.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>
 +
        </div><!-- /.span4 -->
 +
 +
            <div class="span4">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/MeiwwAmxBW/Discovery%20Day%20Clark%20Park/IMG_2057.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>
 +
 
 +
 
 +
 
 +
</html>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<!------------------------->
 +
<html>
<html>
   <head>
   <head>

Revision as of 18:19, 19 July 2013

Penn's iGEM Team

Human Practices

Lorem ipsum dolor sit amet.

First Section

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

Second Section

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 Section

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






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/HumanPractices"