Team:Penn/Modeling

From 2013.igem.org

(Difference between revisions)
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">
+
-
    <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/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
-
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
+
     <script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
-
   
+
     <style>
-
     <script>
+
-
        jQuery(document).ready(function($) {
+
          
          
-
         $('body').scrollspy({ target: '#nav-circles' });
+
/*Page specific*/
 +
      .member_container {
 +
         display: inline-block;
 +
        color: black;
 +
        min-height: 100px;
 +
        width: 250px;
 +
        margin-left: 30px;
 +
        margin-right:30px;
 +
        margin-bottom: 10px;
 +
        background-color: white;
 +
        -moz-border-radius: 10px;
 +
    -webkit-border-radius: 10px;
 +
    -khtml-border-radius: 10px;
 +
            border-radius: 10px;
 +
            overflow: hidden;
 +
            bottom: 350px;
 +
            padding: 20px;
 +
            margin-top: 20px;
 +
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 +
  /* IE 5-7 */
 +
  filter: alpha(opacity=80);
 +
  /* Netscape */
 +
  -moz-opacity: 0.8;
 +
  /* Safari 1.x */
 +
  -khtml-opacity: 0.8;
 +
  /* Good browsers */
 +
  opacity: 0.8;
          
          
-
        $("#one").click(function() {
+
    }
-
         $('html, body').animate({
+
   
-
         scrollTop: $("#top").offset().top,
+
    .left_wrap {
-
     }, '2400');
+
         min-height: 695px !important; /*change as page gets longer*/
-
});
+
    }
 +
   
 +
   
 +
    .member_text {
 +
        float: left;
 +
        text-align: left;
 +
        width: 250px;
 +
        color: black;
 +
         font-family: arial, sans-serif;
 +
       
 +
     }
 +
   
      
      
-
      $("#two").click(function() {
+
   
-
         $('html, body').animate({
+
    .member_container img {
-
        scrollTop: $("#first-section").offset().top,
+
         margin-left: 25px;
-
    }, '2400');
+
        float: center;
-
});
+
         width: 200px;
-
     
+
         -moz-border-radius: 10px;
-
          $("#three, #team").click(function() {
+
    -webkit-border-radius: 10px;
-
         $('html, body').animate({
+
    -khtml-border-radius: 10px;
-
         scrollTop: $("#second-section").offset().top,
+
            border-radius: 10px;
-
    }, '2400');
+
     }
-
});
+
-
 
+
-
      $("#four").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $("#third-section").offset().top,
+
-
     }, '2400');
+
-
});
+
          
          
-
         });
+
         .name {
-
    </script>
+
padding: 3px;
-
    <style>
+
margin: -3px;
-
        /*hero unit positioning*/
+
    width: 220px;
-
        #text {
+
    height: 175px;
-
                      align: center;
+
    display: none;
-
float: center;
+
-
            padding: 50px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
margin-top: 40px;
+
-
width: 400px;
+
-
overflow: hidden;
+
-
           
+
-
        }
+
-
       
+
-
        /*navigation circles*/
+
-
        #nav-circles {
+
-
            position: fixed;
+
-
            top: 100px;
+
-
            right: 20px;
+
-
            z-index: 9999;
+
-
        }
+
      
      
-
       
+
     
-
        #nav-circles li, #icon  {
+
}
-
            overflow: hidden;
+
 
-
            display: block;
+
h4 {
-
            height: 30px;
+
     text-align: center;
-
            width: 30px;
+
     font-size: 16px;
-
            border-radius: 100%;
+
    color: black;
-
            margin:10px;
+
font-family: arial, sans-serif;
-
            padding:3px;
+
-
            top: 100px;
+
-
            right: 100px;
+
-
            background-color: gray;
+
-
        }
+
-
       
+
-
        /*Sections*/
+
-
        .section {
+
-
            min-height: 700px;
+
-
            min-width: 500px;
+
-
        }
+
-
       
+
-
        /*rows with images*/
+
-
        .row{
+
-
            width: 100%;
+
-
            margin-top: 100px;
+
-
        }
+
-
       
+
-
      .span4 {
+
-
            height: 150px;
+
-
            width: 150px;
+
-
            position: static;
+
-
              -moz-border-radius: 100%;
+
-
     -webkit-border-radius: 100%;
+
-
     -khtml-border-radius: 100%;
+
-
            border-radius: 100%;
+
-
            overflow: hidden;
+
-
            background-size: 300px;
+
-
            background-position: -70px -20px;
+
-
           
+
-
            display: inline-block;
+
-
           
+
-
        }
+
-
       
+
-
        .span_smaller {
+
-
            font-family: arial, sans-serif;
+
-
            text-align: center;
+
-
            height: 100px;
+
-
            width: 100px;
+
-
            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: 25px;
+
-
            margin-top: 0px;
+
-
            display: inline-block;
+
-
           
+
-
        }
+
-
       
+
-
        .span4 img {
+
-
            height: 150px;
+
-
         
+
-
            position: relative;
+
-
        }
+
-
       
+
-
                .span4:hover {
+
-
            opacity: 1;
+
-
        }
+
-
                        .span_smaller:hover {
+
-
            opacity: 1;
+
-
        }
+
-
       
+
-
        .span_smaller img {
+
-
            height: 100px;
+
-
         
+
-
            position: relative;
+
-
        }
+
-
       
+
-
                .span4:hover {
+
-
            opacity: 1;
+
-
        }
+
-
       
+
-
        .img-span {
+
-
    overflow: hidden;
+
-
    height: 100px;
+
-
width: 100%;
+
-
background-size: 100%;
+
-
    background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
-
    background-repeat: no-repeat;
+
-
    background-position: center;
+
-
    position: relative;
+
-
margin-left: 0px;
+
margin-top: 20px;
margin-top: 20px;
-
margin-bottom: 20px;
 
}
}
-
a {
+
p{
-
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+
    font-family: sans-serif;
-
  filter: alpha(opacity=80);
+
    text-align: center;
-
-moz-opacity: 0.8;
+
-
-khtml-opacity: 0.8;
+
-
  opacity: 0.8;
+
}
}
-
a:hover {
+
h2{
-
    opacity: 1;
+
text-align: center;
-
    text-decoration: none;
+
}
}
-
 
+
             
-
    .figure {
+
          
-
         float: left;
+
      
-
        margin: 7px;
+
-
    display: inline;
+
-
    max-height: 400px;
+
-
     max-width: 400px;
+
          
          
-
    }
 
-
    .clear { clear:both;} /*add a clear div if formatting gets weird because of float*/
 
-
         
 
-
      .caption {
 
-
        font-size: 10px;
 
-
        font-family: arial;
 
-
      margin-bottom: 15px;
 
-
        line-height: 10px;
 
-
text-align: center;
 
-
 
-
      }
 
-
     
 
-
      .caption2 {
 
-
        font-size: 10px;
 
-
        font-family: arial;
 
-
        position: relative;
 
-
        left: -150px;
 
-
        top:-10px;
 
-
 
-
        line-height: 10px;
 
-
text-align: left;
 
-
float: left;
 
-
      }
 
     </style>
     </style>
-
  </head>
+
</head>
-
 
+
<body>
-
    <body>
+
<img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
-
      <div class="navbar-wrapper">
+
  <div class="left_wrap">
-
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+
   
-
      <div class="container">
+
 
-
 
+
  <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo-->
-
        <div class="navbar navbar-inverse navbar-fixed-top">
+
   
-
          <div class="navbar-inner">
+
    <ul class="navbar">
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
        <a href="https://2013.igem.org/Team:Penn"><li>HOME</li></a>
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
                 <li class="dropdown" id="project">
-
              <span class="icon-bar"></span>
+
                   <a href="#" class="active" data-toggle="dropdown">PROJECT<div class="arrow">></div> <b class="caret"></b></a>
-
              <span class="icon-bar"></span>
+
                   <ul class="dropdown-menu" id="drop-menu1">
-
              <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">Project <b class="caret"></b></a>
+
-
                   <ul class="dropdown-menu">
+
                    
                    
-
                    <li><a href="https://2013.igem.org/Team:Penn/Project">Project</a></li>
+
                    <a href="https://2013.igem.org/Team:Penn/Project"><li class="active" style="background-color: rgb(200,200,215);">project</li></a>
-
                     <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li>
+
                     <a href="https://2013.igem.org/Team:Penn/Parts"><li>parts</li></a>
-
                     <li class="active"><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
+
                     <a href="https://2013.igem.org/Team:Penn/Modeling"><li>modeling</li></a>
-
                    <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
+
                    <a href="https://2013.igem.org/Team:Penn/Safety"><li>safety</li></a>
                   </ul>
                   </ul>
                 </li>
                 </li>
-
                 <li class="dropdown">
+
                 <li class="dropdown" id="about">
-
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
+
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT<div class="arrow">></div>  <b class="caret"></b></a>
-
                   <ul class="dropdown-menu">
+
                   <ul class="dropdown-menu" id="drop-menu2">
-
                    <li><a href="https://2013.igem.org/Team:Penn/Team">Team</a></li>
+
                  <a href="https://2013.igem.org/Team:Penn/Team"> <li>team</li></a>
-
                    <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
+
                  <a href="https://2013.igem.org/Team:Penn/Sponsors"> <li>sponsors</li></a>
-
                    <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
+
                    <a href="https://igem.org/Team.cgi?id=1128"><li>official team profile</li></a>
-
                    <!--<li class="divider"></li>
+
                </li></ul>
-
                    <li class="nav-header">Nav header</li>
+
-
                    <li><a href="#">Separated link</a></li>
+
                  <a href="https://2013.igem.org/Team:Penn/HumanPractices"><li>HUMAN PRACTICES</li></a>
-
                    <li><a href="#">One more separated link</a></li>-->
+
<a href="https://2013.igem.org/Team:Penn/Notebook"><li>NOTEBOOK</li></a>
-
                  </ul>
+
         </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>
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div><!-- /.navbar-inner -->
+
-
         </div><!-- /.navbar -->
+
-
 
+
-
      </div> <!-- /.container -->
+
-
    </div><!-- /.navbar-wrapper -->
+
-
   
+
-
 
+
-
       
+
-
 
+
      
      
-
 
-
    <!--First section-->
 
-
    <div class="section" id="first-section">
 
-
       
 
-
    <div align="center" class="row" style="position: relative; margin-left: auto; margin-right: auto; display: block; width: 600px; max-height: 200px; margin-top: 140px; margin-bottom: 40px; overflow: hidden; position: static; white-space: nowrap;">
 
-
<div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: 0px 25px 0px 25px;">
 
-
    </div><!-- /.span4 -->
 
      
      
-
     <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; align: center; margin: 0px 25px 0px 25px;">
+
     <div class="section-title" style=" margin-top: 150px; position: relative;">modeling</div>
-
          <!--<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/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; margin: 0px 25px 0px 25px;">
+
    </div>
-
          <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>-->
+
    <div class="section1" style="background-position: top;">
-
         </div><!-- /.span4 --></div>
+
         <div class="text">
-
 
+
           
-
 
+
         </div>
-
    <!--first hero unit-->
+
-
    <div class="hero-unit" id="text">
+
-
      <h4>Modeling</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.<img src="https://googledrive.com/host/0B4ZBZOYYKBzEdTRvdHVIRDI0OWM/"
+
-
  class="figure"/><p class="caption">This is a caption</p><p>Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
                <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>
+
-
                        <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 class="hero-unit" id="text">
+
-
                                <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 class="hero-unit" id="text">
+
-
                                        <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.
+
-
  <img src="https://googledrive.com/host/0B4ZBZOYYKBzER09TYUNULWdHdU0" class="figure"/><p class="caption">This is a caption</p><p>Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p<
+
-
                                                <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>
+
-
                                                      <img src="https://googledrive.com/host/0B4ZBZOYYKBzESmtGdU1XelBPVm8/" class="figure"/><p class="caption2">This is a caption</p> <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>
 
-
 
      
      
 +
 
 +
</body>
 +
<script>
 +
        jQuery(document).ready(function($) {
 +
 +
 
 +
$(window).scroll($.debounce( 300, true, function(){
 +
    $(".navbar").hide();
 +
    $(".left_wrap").animate({
 +
    width: "65px"
 +
  }, 250, function() {
 +
  });
 +
}));
 +
$(window).scroll($.debounce(300, function(){
 +
  $(".navbar").show();
 +
    $(".left_wrap").animate({
 +
    width: "200px"
 +
  }, 250, function() {
 +
  });
 +
}));
 +
  /*navbar disappears when not hovered   
 +
$(".left_wrap, .navbar, .section-title, .drop-menu").mouseleave(function()
 +
{
 +
    $(".navbar").hide();
 +
    $(".left_wrap").animate({
 +
    width: "65px"
 +
  }, 500, function() {
 +
  });
 +
    }); 
 +
});*/
 +
 +
  $(".dropdown").mouseenter(function(){
 +
    $(".dropdown-menu").hide();
 +
            $(this).find(".dropdown-menu").show();
 +
            });
-
   
+
  $(".dropdown").mouseleave(function(){
-
    </div> <!--endsection--> 
+
        $(this).find(".dropdown-menu").hide();
 +
    });
 +
     
 +
      $(".dropdown li").mouseenter(function(){
 +
        $(this).addClass("active");
 +
      });
 +
     
 +
          $(".dropdown li").mouseleave(function(){
 +
        $(this).removeClass("active");
          
          
-
     </body>
+
        });
-
 
+
              });
-
 
+
     </script>
-
 
+
</html>
</html>

Revision as of 15:41, 21 August 2013

Team

modeling

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