|
|
(37 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
- | <head> | + | <html lang="en-US"> |
- | <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
| + | <head> |
- | <!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>--> | + | <meta charset="UTF-8"> |
- | <script type="text/javascript" src="http://baijs.nl/tinycarousel/js/jquery.tinycarousel.min.js"></script>
| + | <meta http-equiv="refresh" content="1;url=https://2013.igem.org/Team:Penn"> |
- | | + | <script type="text/javascript"> |
- | <script type="text/javascript"> | + | window.location.href = "https://2013.igem.org/Team:Penn" |
- | $(document).ready(function(){
| + | </script> |
- | | + | <title>Page Redirection</title> |
- | $('#slider-code').tinycarousel({pager: true, interval:true});
| + | </head> |
- |
| + | <body> |
- | $("#tabs li").mouseenter(function(){
| + | <!-- Note: don't tell people to `click` the link, just tell them that it is a link. --> |
- |
| + | If you are not redirected automatically, follow the <a href='https://2013.igem.org/Team:Penn'>link here.</a> |
- | $(this).css("width","400px");
| + | </body> |
- | });
| + | |
- |
| + | |
- | $("#tabs li").mouseleave(function(){
| + | |
- | $(this).css("width","250px"); });
| + | |
- |
| + | |
- | $("#one").click(function() {
| + | |
- | $('html, body').animate({
| + | |
- | scrollTop: $(".one").offset().top,
| + | |
- | }, '2400');
| + | |
- | });
| + | |
- |
| + | |
- | $("#two").click(function() {
| + | |
- | $('html, body').animate({
| + | |
- | scrollTop: $(".two").offset().top,
| + | |
- | }, '2400');
| + | |
- | });
| + | |
- |
| + | |
- | $("#three").click(function() {
| + | |
- | $('html, body').animate({
| + | |
- | scrollTop: $(".three").offset().top,
| + | |
- | }, '2400');
| + | |
- | });
| + | |
- |
| + | |
- | //check which element is in view and highlight corresponding circle
| + | |
- |
| + | |
- | /* var inview = function() {
| + | |
- | var winTop = $(window).scrollTop();
| + | |
- | var halfVP = $(window).height() * 0.5;
| + | |
- |
| + | |
- | if (winTop >= 1000 && winTop < 0 + 1000) {
| + | |
- | $(this).css('background-color', '#528B8B')
| + | |
- | } else {
| + | |
- | $(this).css('background-color', 'white');
| + | |
- | }
| + | |
- |
| + | |
- | }
| + | |
- |
| + | |
- | $(window).scroll(function() {
| + | |
- | inview();
| + | |
- | });
| + | |
- | */
| + | |
- | });
| + | |
- |
| + | |
- |
| + | |
- | | + | |
- | </script>
| + | |
- | | + | |
- | | + | |
- | <style>
| + | |
- | /*image carousel styling (taken mostly from plugin)*/
| + | |
- | #slider-code { height: 300px; overflow:hidden; display: inline; }
| + | |
- | #slider-code .viewport { float: left; width: 400px; height: 300px;
| + | |
- | margin-right: -15px; border: solid white 10px; background-color: gray;
| + | |
- | overflow: hidden;position:relative; margin-top: 100px; margin-left: 75px; }
| + | |
- | #slider-code .buttons { display: block; margin: 30px -100px 0 0px; float: left; margin-top:200px; }
| + | |
- | #slider-code .next { margin: 20px 0 0 10px; margin-top: 200px; }
| + | |
- | #slider-code .disable { visibility: hidden; }
| + | |
- | #slider-code .overview { list-style: none; position: absolute;
| + | |
- | padding: 0; margin: 0; left: 0; top: 0; }
| + | |
- | #slider-code .overview li{ float: left; margin: 0 20px 0 0;
| + | |
- | padding: 1px; height: 296px; border: 1px solid #dcdcdc; width: 396px;}
| + | |
- | #slider-code .prev { padding-left: 50px}
| + | |
- | #slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
| + | |
- | #slider-code .pager li { float: left; height:10px; width:10px; margin: 5px 15px 15px 0px; z-index: 99; }
| + | |
- | #slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 10px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
| + | |
- | #slider-code .active { color: #fff; background-color: #555555; }
| + | |
- | | + | |
- | .overview li img {
| + | |
- | height: 300px;
| + | |
- | width: auto;
| + | |
- | }
| + | |
- | /*fonts and headings*/
| + | |
- | @font-face
| + | |
- | {
| + | |
- | font-family: bebas;
| + | |
- | src: url('https://googledrive.com/host/0B4ZBZOYYKBzEdC1mMURfM2FlRkk');
| + | |
- | }
| + | |
- | h2 {
| + | |
- | font-family: verdana, sans-serif;
| + | |
- | font-size: 20px;
| + | |
- | }
| + | |
- | h4 {
| + | |
- | font-size: 16px;
| + | |
- | font-family: helvetica, verdana, sans-serif;
| + | |
- | }
| + | |
- | | + | |
- | p {
| + | |
- | font-size: 14px;
| + | |
- | font-family: helvetica, verdana, sans-serif;
| + | |
- | }
| + | |
- | | + | |
- | /*get rid of wiki defaults*/
| + | |
- | .outer {
| + | |
- | width: 100%;
| + | |
- | text-align: center;
| + | |
- | float: center;
| + | |
- | height: 100%;
| + | |
- | background-color: black;
| + | |
- | }
| + | |
- | | + | |
- | #p-logo {
| + | |
- | position: absolute;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #content {
| + | |
- | width: 100%;
| + | |
- | background-color: black;
| + | |
- | }
| + | |
- | | + | |
- | #top-section {
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | .firstHeading {
| + | |
- | position: absolute;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | .thumb {
| + | |
- | display: none;
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | | + | |
- | #menubar {
| + | |
- | display: none;
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | .noprint {
| + | |
- | display: none;
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | #footer {
| + | |
- | display: none;
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | | + | |
- | /*sections of page*/
| + | |
- | | + | |
- | /*#banner {
| + | |
- | width: 100%;
| + | |
- | background-color: #B4EEFF;
| + | |
- | height: 300px;
| + | |
- | }*/
| + | |
- | | + | |
- | .space {
| + | |
- | height: 20px;
| + | |
- | background-color: gray;
| + | |
- | }
| + | |
- | | + | |
- | .one {
| + | |
- | height:600px;
| + | |
- | position: relative;
| + | |
- | padding-top: 30px;
| + | |
- | width: 100%;
| + | |
- | background-color: black;
| + | |
- | background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Yn0SK0Y0-7/snap.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
| + | |
- | background-position: 300px 50px;
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-size: 90%;
| + | |
- | }
| + | |
- | | + | |
- | .circle {
| + | |
- | height: 20px;
| + | |
- | width: 20px;
| + | |
- | background-color: black;
| + | |
- | -moz-border-radius: 100%;
| + | |
- | -ms-border-radius: 100%;
| + | |
- | -webkit-border-radius: 100%;
| + | |
- | -o-border-radius: 100%;
| + | |
- | border-radius: 100%;
| + | |
- | }
| + | |
- | | + | |
- | .two {
| + | |
- | height:600px;
| + | |
- | 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%;
| + | |
- | }
| + | |
- | | + | |
- | .three {
| + | |
- | position: relative;
| + | |
- | height:1000px;
| + | |
- | width: 100%;
| + | |
- | background-color: rgb(200,200,200);
| + | |
- | }
| + | |
- | | + | |
- | .right {
| + | |
- | float:right;
| + | |
- | text-align: left;
| + | |
- | margin-right: 200px;
| + | |
- | margin-top: -300px;
| + | |
- | background-color: white;
| + | |
- | height: 200px;
| + | |
- | padding:20px;
| + | |
- | width: 30%;
| + | |
- | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
| + | |
- | filter: alpha(opacity=70);
| + | |
- | -moz-opacity: 0.7;
| + | |
- | -khtml-opacity: 0.7;
| + | |
- | opacity: 0.7;
| + | |
- | }
| + | |
- | | + | |
- | .wrapper {
| + | |
- | background-color: rgb(230,230,230);
| + | |
- | opacity: 1;
| + | |
- | height: 500px;
| + | |
- | width: 90%;
| + | |
- | float: center;
| + | |
- | margin: 50px;
| + | |
- | }
| + | |
- |
| + | |
- | /*links and navigation*/
| + | |
- | #navigation {
| + | |
- | position: fixed;
| + | |
- | right: 0px;
| + | |
- | top: 20px;
| + | |
- | list-style-type: none;
| + | |
- | z-index: 9999999;
| + | |
- | | + | |
- | }
| + | |
- | | + | |
- | #navigation li {
| + | |
- | z-index:9999;
| + | |
- | height: 20px;
| + | |
- | margin: 30px;
| + | |
- | width: 20px;
| + | |
- | background-color: white;
| + | |
- | -moz-border-radius: 100%;
| + | |
- | -ms-border-radius: 100%;
| + | |
- | -webkit-border-radius: 100%;
| + | |
- | -o-border-radius: 100%;
| + | |
- | border-radius: 100%;
| + | |
- | opacity: 1;
| + | |
- | }
| + | |
- | | + | |
- | #tabs {
| + | |
- | position: absolute;
| + | |
- | list-style-type: none;
| + | |
- | z-index: 99;
| + | |
- | left: -330px;
| + | |
- | top: 100px;
| + | |
- | }
| + | |
- | | + | |
- | ul {
| + | |
- | list-style-type: none;
| + | |
- | }
| + | |
- | | + | |
- | #tabs li strong {
| + | |
- | margin-left: 50px;
| + | |
- | }
| + | |
- | | + | |
- | .nav {
| + | |
- | padding: 0px;
| + | |
- | width: 100%;
| + | |
- | background-color: white;
| + | |
- | position: fixed;
| + | |
- | margin: auto;
| + | |
- | z-index: 999;
| + | |
- | }
| + | |
- | | + | |
- | .nav li {
| + | |
- | display: inline;
| + | |
- | margin: 0px 30px 30px 0px;
| + | |
- | font-family: Verdana, sans-serif;
| + | |
- | }
| + | |
- | | + | |
- | #tabs li {
| + | |
- | padding: 10px 100px 40px 0px;
| + | |
- | text-align: center;
| + | |
- | text-align: right;
| + | |
- | margin-left: 20px;
| + | |
- | background-color: gray;
| + | |
- | height: 30px;
| + | |
- | width: 250px;
| + | |
- | margin: 5px;
| + | |
- | -moz-border-radius: 6%;
| + | |
- | -ms-border-radius: 6%;
| + | |
- | -webkit-border-radius: 6%;
| + | |
- | -o-border-radius: 6%;
| + | |
- | border-radius: 6%;
| + | |
- | -webkit-transition: width 0.4s ease;
| + | |
- | -moz-transition: width 0.4s ease;
| + | |
- | -o-transition: width 0.4s ease;
| + | |
- | transition: width 0.4s ease;
| + | |
- | }
| + | |
- | | + | |
- | /*Members*/
| + | |
- | .member {
| + | |
- | display: inline-block;
| + | |
- | float: left;
| + | |
- | margin: 20px;
| + | |
- | height: 200px;
| + | |
- | width: 400px;
| + | |
- | background-color: white;
| + | |
- | padding: 10px;
| + | |
- | position: relative;
| + | |
- | top: 100px;
| + | |
- | }
| + | |
- | | + | |
- | .member p{
| + | |
- | display: inline;
| + | |
- | }
| + | |
- | | + | |
- | .member h2 {
| + | |
- | text-align: left;
| + | |
- | display: block;
| + | |
- | width: 100%;
| + | |
- | }
| + | |
- | .member img {
| + | |
- | height: 125px;
| + | |
- | width: 100px;
| + | |
- | float: left;
| + | |
- | display: inline;
| + | |
- | margin: 5px;
| + | |
- | | + | |
- | }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | </style>
| + | |
- | </head>
| + | |
- | | + | |
- | | + | |
- | <body bgcolor="black">
| + | |
- | <div class="outer">
| + | |
- | | + | |
- | <!--<div id="banner">
| + | |
- | Banner
| + | |
- | </div>-->
| + | |
- | | + | |
- | <!--no side links
| + | |
- | <ul id="tabs">
| + | |
- | <li><h2>Link</h2></li>
| + | |
- | <li><div class="link"><h2>Link</h2></div></li>
| + | |
- | </ul>-->
| + | |
- | | + | |
- | | + | |
- | <ul class="nav">
| + | |
- | <li>Home</li> | + | |
- | <li>Team</li> | + | |
- | <li>Official Team Profile</li>
| + | |
- | <li>Project</li>
| + | |
- | <li>Parts</li>
| + | |
- | <li>Modeling</li>
| + | |
- | <li>Notebook</li>
| + | |
- | <li>Safety</li>
| + | |
- |
| + | |
- | </ul> | + | |
- | | + | |
- |
| + | |
- |
| + | |
- | </div> | + | |
- | | + | |
- | <ul id="navigation">
| + | |
- | <li id="one"></li>
| + | |
- | <li id="two"></li>
| + | |
- | <li id="three"><a href="#three"></a></li>
| + | |
- | </ul>
| + | |
- | | + | |
- | <div class="one">
| + | |
- |
| + | |
- |
| + | |
- | <!-- <div class="wrapper">-->
| + | |
- |
| + | |
- | <div id="slider-code">
| + | |
- | <a class="buttons prev" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/ef/Aiga_leftarrow_inv.gif" height="30px" width="30px"></a>
| + | |
- | <div class="viewport">
| + | |
- | <ul class="overview">
| + | |
- | <li><img src="https://photos-5.dropbox.com/t/0/AAD4ucdoclbVO5fVUmmzDplCRzxrWtMYBbjTSDc9d1cd3A/12/22389589/jpeg/32x32/3/1372255200/0/2/BE_LynchLabGroup_DSC2796.jpg/JRfQw_TF5ODfAeCtgoGC2P778v3uLIG4kH8RyU1_1D4%2C9Qc_PoPW15Bty16xStuVk3uGs1rf1eyg4lOWVfDzCVk%2CAqC9wck2taycFwsD86ppwkqoOD7TqZ-FQ-v8R3CC_kM?size=1024x768" /></li>
| + | |
- | <li><img src="https://photos-3.dropbox.com/t/0/AAAIAUzUbbv6wAvC_Rr5zSdUOVCRkXzMkMrRyC4S8KoDdg/12/22389589/jpeg/32x32/3/1372255200/0/2/BE_LynchLabGroup_DSC2806.jpg/RIpsWFyIK4hKs-f-RF7ySrKrAmQhvZDR9K96hbC0wTM%2CuBAFSQdyg0hg-crPY9nTVLqDjoT5Gi8C4_zq5CaoArM?size=1024x768" /></li>
| + | |
- | <li><img src="https://photos-1.dropbox.com/t/0/AAClj1H18t9XRJHZGk96O8Oxr8FCwFl-pVcAXvDfyZ4bZQ/12/22389589/jpeg/32x32/3/1372255200/0/2/BE_LynchLabGroup_DSC2710.jpg/LDHnmjOxvsQ_HCCmuG48jTM9RaCUogHTH3x3FIXG32s%2Cw6va9cJfvqwNXBaPTh-h0Lr7uTiieiRX5Ouow8-w_dM?size=1024x768" /></li>
| + | |
- | <li><img src=""/></li>
| + | |
- |
| + | |
- | </ul> | + | |
- | </div>
| + | |
- | <a class="buttons next" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7d/Aiga_rightarrow_inv.gif" height="30px" width="30px"/></a>
| + | |
- | <ul class="pager">
| + | |
- | <li><a rel="0" class="pagenum" href="#"></a></li>
| + | |
- | <li><a rel="1" class="pagenum" href="#"></a></li>
| + | |
- | <li><a rel="2" class="pagenum" href="#"></a></li>
| + | |
- | <li><a rel="3" class="pagenum" href="#"></a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- |
| + | |
- |
| + | |
- | <div class="right">
| + | |
- | <h2>Hello</h2>
| + | |
- | <h4>Welcome to Penn's iGEM team wiki!</h4>
| + | |
- | <p>This page is under construction at the moment, but check back with us soon to see what we're up to!</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | <!--<div class="space"> </div>-->
| + | |
- | | + | |
- | <div class="two"></div>
| + | |
- | | + | |
- | <!--<div class="space"></div>-->
| + | |
- | | + | |
- | <div class="three">
| + | |
- | <div class="member">
| + | |
- | <h2>Member Name</h2>
| + | |
- | <img src="http://www.bbsradio.com/posts/images/pic16848.jpg"/>
| + | |
- | <p>Description of the member</p>
| + | |
- | </div> | + | |
- | <div class="member">
| + | |
- | <h2>Member Name</h2>
| + | |
- | <img src="http://www.bbsradio.com/posts/images/pic16848.jpg"/>
| + | |
- | <p>Description of the member</p>
| + | |
- | </div>
| + | |
- | <div class="member">
| + | |
- | <h2>Member Name</h2>
| + | |
- | <img src="http://www.bbsradio.com/posts/images/pic16848.jpg"/>
| + | |
- | <p>Description of the member</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | | + | |
- | | + | |
- | </div>
| + | |
- | </body> | + | |
| </html> | | </html> |