Team:UPenn/Project

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<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"/>
<link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
 +
   
 +
    <style>
 +
        /*fonts/headings*/
 +
        h4 {
 +
            text-align: center;
 +
        }
 +
       
 +
       
 +
       
 +
       
 +
/*Brady Bunch Table and background section*/
 +
.team {
 +
      float: center;
 +
        margin-left: 200px;
 +
}
-
<script>
+
.team td {
-
//Script here going to make more bubbles appear when hovering over one.
+
    overflow: hidden;
-
</script>
+
            height:175px;
-
<style>
+
            width:220px;
 +
            display: inline-block;
 +
            padding:5px;
      
      
-
.three {
+
        }
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
       
 +
        .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;
position: relative;
text-align: center;
text-align: center;
height:800px;
height:800px;
width: 100%;
width: 100%;
-
background-color: rgb(200,200,200);
 
padding-top: 50px;
padding-top: 50px;
}
}
-
.bubble {
+
/*Make hero unit slightly transparent*/
-
height: 200px;
+
.hero-unit {
-
width: 200px;
+
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-
background-color: white;
+
  filter: alpha(opacity=70);
-
margin-left: 100px;
+
-moz-opacity: 0.7;
-
margin-top: 50px;
+
-khtml-opacity: 0.7;
-
-moz-border-radius: 100%;
+
  opacity: 0.7;
-
-ms-border-radius: 100%;
+
-
-webkit-border-radius: 100%;
+
-
-o-border-radius: 100%;
+
-
border-radius: 100%;
+
-
opacity: 1;
+
-
text-align: center;
+
-
padding: 100px;  
+
}
}
-
#second {
 
-
    margin-left: 350px;
 
-
    height: 100px;
 
-
    width: 100px;
 
-
    margin-top: -30px;
 
-
}
 
-
</style>
+
    </style>
-
</head>
+
  </head>
-
<body>
+
  <body>
-
  <!--Navigation bar at the top-->
+
-
    <ul class="nav">
+
-
        <li><a href="https://2013.igem.org/Team:Penn">Home</a></li>
+
-
        <li id="team">Team</li>
+
-
        <li><a href="https://igem.org/Team.cgi?year=2013&team_name=Penn">Official Team Profile</a></li>
+
-
        <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/Notebook">Notebook</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
+
-
       
+
-
    </ul>
+
      
      
      
      
-
    <div class="three">
+
    <div class="navbar-wrapper">
-
        <!--Experimenting with a way to present the project in an interesting way.
+
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
-
        each "bubble" has some information about the project.  Hovering over a bubble will
+
      <div class="container">
-
        make another bubble appear with more information.-->
+
-
        <div class="bubble" id="first">
+
-
            <h2>Project</h2>
+
-
        </div>
+
-
       
+
-
        <div class="bubble" id="second">
+
-
        </div>
+
-
    </div>
+
-
</body>
+
        <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="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="2013.igem.org/Team:Penn#three">Team</a></li>
 +
                    <li><a href="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="2013.igem.org/Team:Penn/Project">Project</a></li>
 +
                <li><a href="2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
 +
                <li><a href="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="2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
 +
                    <li><a href="2013.igem.org/Team:Penn/Parts">Parts</a></li>
 +
                    <li><a href="2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
 +
                    <li><a href="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="one">
 +
   
 +
<div class="hero-unit">
 +
  <h1>Our Project</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>
 +
  </p>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
    <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 21:30, 8 July 2013

Penn's iGEM Team

Our Project

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.

Retrieved from "http://2013.igem.org/Team:UPenn/Project"