|
|
(86 intermediate revisions not shown) |
Line 2: |
Line 2: |
| <head> | | <head> |
| <title>Project</title> | | <title>Project</title> |
| + | <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/> |
| + | <script src="https://googledrive.com/host/0B4ZBZOYYKBzEWHJQc2NoUWxGR1E/"></script> |
| <style> | | <style> |
| | | |
- | .left_wrap {
| + | /*Page specific*/ |
- | margin-left: -15px;
| + | |
- | padding-top: 50px;
| + | |
- | width: 200px;
| + | |
- | min-height: 2050px;
| + | |
- | background-color: white;
| + | |
- | position: absolute;
| + | |
- | -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;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | @font-face
| + | |
- | {
| + | |
- | font-family: QuickSandLight;
| + | |
- | src: url('https://googledrive.com/host/0B4ZBZOYYKBzEazRybm9PV21QdTA'),
| + | |
- | url('Sansation_Light.eot'); /* IE9 */
| + | |
- | }
| + | |
- | | + | |
- | @font-face
| + | |
- | {
| + | |
- | font-family: QuickSandLight;
| + | |
- | src: url('https://googledrive.com/host/0B4ZBZOYYKBzEczRPbHhwQ0pjRD'),
| + | |
- | url('Sansation_Light.eot'); /* IE9 */
| + | |
- | }
| + | |
- | | + | |
- |
| + | |
- | p {
| + | |
- | color: black;
| + | |
- | font-family: QuickSandLight, arial, sans-serif;
| + | |
- | font-size: 13px;
| + | |
- | }
| + | |
- |
| + | |
- | h1, h2 {
| + | |
- | color: black;
| + | |
- | font-family: arial, sans-serif;
| + | |
- | font-size: 15px;
| + | |
- | }
| + | |
- |
| + | |
- | a{
| + | |
- | font-family: arial, sans-serif;
| + | |
- | text-decoration: none;
| + | |
- | color: black;
| + | |
- | }
| + | |
- |
| + | |
- | a:visited {
| + | |
- | color: black !important;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | a:hover {
| + | |
- | color: #07304b !important;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- |
| + | |
- | .navbar ul {
| + | |
- | list-style-type: none;
| + | |
- | }
| + | |
- |
| + | |
- | .logo-wrap{
| + | |
- | margin-top: 10px;
| + | |
- | height: 70px;
| + | |
- | width: 70px;
| + | |
- | overflow: hidden;
| + | |
- | background-color: white;
| + | |
- | display: inline-block;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | #igem {
| + | |
- | height: 50px;
| + | |
- |
| + | |
- | margin: 30px 15px 15px 15px;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | #penn {
| + | |
- | margin-top: 25px;
| + | |
- | width: 80px;
| + | |
- | }
| + | |
- |
| + | |
- |
| + | |
- | .navbar{
| + | |
- | list-style-type: none;
| + | |
- | line-height: 30px;
| + | |
- | font-size: 15px;
| + | |
- | font-family: arial, sans-serif;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | .navbar li {
| + | |
- |
| + | |
- | padding-left: 50px;
| + | |
- | margin-left: -50px;
| + | |
- | }
| + | |
- |
| + | |
- | .navbar li:hover {
| + | |
- | width: 100%;
| + | |
- | background-color: rgb(200, 200, 215);
| + | |
- | }
| + | |
- |
| + | |
- | .active {
| + | |
- | color: #07304b !important;
| + | |
- | }
| + | |
- |
| + | |
- | .dropdown{
| + | |
- | list-style-type: none;
| + | |
- |
| + | |
- | }
| + | |
- | .dropdown-menu{
| + | |
- | list-style-type: none;
| + | |
- | | + | |
- | }
| + | |
- |
| + | |
- | .dropdown-menu .active {
| + | |
- | background-color: rgb(200,200,215);
| + | |
- | width: 100px;
| + | |
- | padding: 3px;
| + | |
- | -moz-border-radius: 30px;
| + | |
- | -webkit-border-radius: 30px;
| + | |
- | -khtml-border-radius: 30px;
| + | |
- | border-radius: 30px;
| + | |
- | }
| + | |
- |
| + | |
- | .arrow{
| + | |
- | display: inline;
| + | |
- | float: right;
| + | |
- | margin-right: 20px;
| + | |
- | font-size: 20px;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | .dropdown-menu li {
| + | |
- | width: 100px;
| + | |
- | padding: 3px;
| + | |
- | -moz-border-radius: 30px;
| + | |
- | -webkit-border-radius: 30px;
| + | |
- | -khtml-border-radius: 30px;
| + | |
- | border-radius: 30px;
| + | |
- | }
| + | |
- | #drop-menu1{
| + | |
- | position: absolute;
| + | |
- | left: 200px;
| + | |
- | top: 140px;
| + | |
- | text-align: center;
| + | |
- | display: inline;
| + | |
- | line-height: 20px;
| + | |
- | display: none;
| + | |
- | }
| + | |
- |
| + | |
- | #drop-menu2{
| + | |
- | width: 100px;
| + | |
- | position: absolute;
| + | |
- | left: 210px;
| + | |
- | top: 170px;
| + | |
- | text-align: center;
| + | |
- | display: inline;
| + | |
- | line-height: 20px;
| + | |
- | display: none;
| + | |
- |
| + | |
- | }
| + | |
- | .dropdown-menu li {
| + | |
- | list-style-type: none;
| + | |
- | margin-top: 2px;
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | .drop-menu-wrap{
| + | |
- | width: 120px;
| + | |
- | background-color: white;
| + | |
- | text-align: center;
| + | |
- | min-height: 700px;
| + | |
- | float: left;
| + | |
- | margin-left: -40px;
| + | |
- | }
| + | |
- |
| + | |
- | .section1 {
| + | |
- | margin-left: -15px;
| + | |
- | margin-top: -80px;
| + | |
- | padding-left: 210px;
| + | |
- | padding-top: 75px;
| + | |
- | background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/REFYp1Y82j/IMG_0382.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg');
| + | |
- | width: 100%;
| + | |
- | min-height: 700px;
| + | |
- | background-position: left;
| + | |
- | background-size: 2000px;
| + | |
- | background-repeat: no-repeat;
| + | |
- | }
| + | |
- |
| + | |
- | .section2 {
| + | |
- | margin-left: -15px;
| + | |
- | margin-top: -80px;
| + | |
- | padding-left: 210px;
| + | |
- | padding-top: 20px;
| + | |
- | background-image: url('https://googledrive.com/host/0B4ZBZOYYKBzEeUVISVdFUVBmaHM');
| + | |
- | width: 100%;
| + | |
- | min-height: 700px;
| + | |
- | background-size: 2000px;
| + | |
- | background-position: right;
| + | |
- | background-repeat: no-repeat;
| + | |
- | }
| + | |
- |
| + | |
- | .section3 {
| + | |
- | margin-left: -15px;
| + | |
- | margin-top: -80px;
| + | |
- | padding-left: 210px;
| + | |
- | padding-top: 20px;
| + | |
- | background-image: url('https://googledrive.com/host/0B4ZBZOYYKBzENXNaVkJuY2RGeDQ');
| + | |
- | width: 100%;
| + | |
- | min-height: 700px;
| + | |
- | background-size: 2000px;
| + | |
- | background-position: top;
| + | |
- | background-repeat: no-repeat;
| + | |
- | }
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- | .text {
| + | |
- | color: black;
| + | |
- | width: 700px;
| + | |
- | bottom: 350px;
| + | |
- | min-height: 500px;
| + | |
- | background-color:white;
| + | |
- | margin: auto;
| + | |
- | overflow: hidden;
| + | |
- | padding: 20px;
| + | |
- | margin-top: 20px;
| + | |
- | -moz-border-radius: 10px;
| + | |
- | -webkit-border-radius: 10px;
| + | |
- | -khtml-border-radius: 10px;
| + | |
- | border-radius: 10px;
| + | |
- | -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;
| + | |
- | }
| + | |
- |
| + | |
- | .text-wrap {
| + | |
- |
| + | |
- | overflow: hidden;
| + | |
- | width: 700px;
| + | |
- | margin: auto;
| + | |
- | }
| + | |
- |
| + | |
- | #methods {
| + | |
- | min-height: 50px !important;
| + | |
- | margin-bottom: 10px;
| + | |
- | }
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- | /*Page specific*/
| + | |
| .figure { | | .figure { |
| display: inline-block; | | display: inline-block; |
Line 285: |
Line 16: |
| | | |
| } | | } |
| + | |
| + | |
| | | |
| h2 { | | h2 { |
Line 308: |
Line 41: |
| } | | } |
| | | |
| + | |
| | | |
- |
| |
- |
| |
- | /*wiki defaults*/
| |
- |
| |
- | .outer {
| |
- | width: 100%;
| |
- | text-align: center;
| |
- | float: center;
| |
- | height: 100%;
| |
- | background-color: white;
| |
- | }
| |
- |
| |
- | #p-logo {
| |
- | position: absolute;
| |
- | display: none;
| |
- | }
| |
- |
| |
- | #content {
| |
- | width: 100%;
| |
- | background-color: white;
| |
- | }
| |
- |
| |
- | #top-section {
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | .firstHeading {
| |
- | position: absolute;
| |
- | display: none;
| |
- | }
| |
- |
| |
- | .thumb {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | #search-controls {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- |
| |
- | #footer {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | ul {
| |
- | list-style-type: none;
| |
- | list-style-image: none;
| |
- | }
| |
- |
| |
- | .printfooter {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | .noprint {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | .visualClear {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | #footer-box {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | #catlinks {
| |
- | display: none;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | body {
| |
- | margin: 10px 0 0 0;
| |
- | padding: 0;}
| |
- | #top-section {
| |
- | width: 965px;
| |
- | height: 0;
| |
- | margin: 0 auto;
| |
- | padding: 0;
| |
- | border: none;}
| |
- | body {
| |
- | margin: 10px 0 0 0;
| |
- | padding: 0;}
| |
- | #top-section {
| |
- | width: 965px;
| |
- | height: 0;
| |
- | margin: 0 auto;
| |
- | padding: 0;
| |
- | border: none;}
| |
- | #menubar {
| |
- | font-size: 65%;
| |
- | top: -14px;}
| |
- | .left-menu:hover {
| |
- | background-color: transparent;}
| |
- | #menubar li a {
| |
- | background-color: transparent;}
| |
- | #menubar:hover {
| |
- | color: white;}
| |
- | #menubar li a {
| |
- | color: transparent;}
| |
- | #menubar:hover li a {
| |
- | color: white;}
| |
| | | |
- | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| |
- | display:none;}
| |
- | #top-section {
| |
- | border: none;
| |
- | height: 0px;}
| |
- | #content {
| |
- | border: none;
| |
- | background-color: transparent;}
| |
- |
| |
- | #bodyContent {
| |
- | background-color: transparent;
| |
- | }
| |
| | | |
| </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="left_wrap"> | | <div class="left_wrap"> |
| | | |
- | <img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
| + | |
| <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo--> | | <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo--> |
| | | |
Line 448: |
Line 60: |
| <ul class="dropdown-menu" id="drop-menu1"> | | <ul class="dropdown-menu" id="drop-menu1"> |
| | | |
- | <a href="https://2013.igem.org/Team:Penn/Project"><li class="active" style="background-color:#759ab8;"></li>project</a> | + | <a href="https://2013.igem.org/Team:Penn/Project"><li class="active" style="background-color: rgb(200,200,215);">project</li></a> |
| <a href="https://2013.igem.org/Team:Penn/Parts"><li>parts</li></a> | | <a href="https://2013.igem.org/Team:Penn/Parts"><li>parts</li></a> |
| <a href="https://2013.igem.org/Team:Penn/Modeling"><li>modeling</li></a> | | <a href="https://2013.igem.org/Team:Penn/Modeling"><li>modeling</li></a> |
Line 467: |
Line 79: |
| | | |
| | | |
- | <div class="section-title" style=" margin-top: 150px; position: relative;">ABSTRACT</div> | + | <div class="section-title" style=" margin-top: 150px; position: relative;">abstract</div> |
- | <div class="section-title" style=" margin-top: 400px; position: relative;">METHODS</div> | + | <div class="section-title" style=" margin-top: 400px; position: relative;">methods</div> |
- | <div class="section-title" style=" margin-top: 750px; position: relative;">RESULTS</div> | + | <div class="section-title" style=" margin-top: 750px; position: relative;">results</div> |
| | | |
| | | |
Line 535: |
Line 147: |
| jQuery(document).ready(function($) { | | jQuery(document).ready(function($) { |
| | | |
- | $(".dropdown").mouseenter(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(); | | $(".dropdown-menu").hide(); |
| $(this).find(".dropdown-menu").show(); | | $(this).find(".dropdown-menu").show(); |
- |
| |
| }); | | }); |
- |
| + | |
| + | $(".dropdown").mouseleave(function(){ |
| + | $(this).find(".dropdown-menu").hide(); |
| + | }); |
| | | |
| $(".dropdown li").mouseenter(function(){ | | $(".dropdown li").mouseenter(function(){ |