|
|
(44 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');
| + | |
- | });
| + | |
- |
| + | |
- |
| + | |
- | /* //function to check if elem is in view
| + | |
- | function isScrolledIntoView(elem)
| + | |
- | {
| + | |
- | var docViewTop = $(window).scrollTop();
| + | |
- | var docViewBottom = docViewTop + $(window).height();
| + | |
- | | + | |
- | var elemTop = $(elem).offset().top;
| + | |
- | var elemBottom = elemTop + $(elem).height();
| + | |
- | | + | |
- | return ((elemBottom <= docViewBottom) || (elemTop >= docViewTop));
| + | |
- | }
| + | |
- | | + | |
- | //check which element is in view and highlight corresponding circle
| + | |
- | $(window).scroll(function() {
| + | |
- | if (isScrolledIntoView(".one")) {
| + | |
- | $("#one").css("background-color", "black");
| + | |
- | }
| + | |
- | else {
| + | |
- | $("#one").css("background-color", "white");
| + | |
- | }
| + | |
- | });*/
| + | |
- |
| + | |
- | $(window).scroll(function() {
| + | |
- |
| + | |
- | // Determine which section is in view and activate respective navigation link
| + | |
- | $('.circle-inner').each(function() {
| + | |
- | var scrollTo = $(this).data('goto');
| + | |
- | if ($window.scrollTop() >= scrollTo && $window.scrollTop() < scrollTo + viewportHeight) {
| + | |
- | $(this).css('background-color', '#528B8B')
| + | |
- | } else {
| + | |
- | $(this).css('background-color', 'white');
| + | |
- | }
| + | |
- | });
| + | |
- | | + | |
- | });
| + | |
- | });
| + | |
- |
| + | |
- |
| + | |
- | | + | |
- | </script>
| + | |
- | | + | |
- | | + | |
- | <style>
| + | |
- |
| + | |
- | #slider-code { height: 300px; overflow:hidden; display: inline; }
| + | |
- | #slider-code .viewport { float: left; width: 400px; height: 300px;
| + | |
- | margin-right: -15px; border: solid white 5px; 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; }
| + | |
- | | + | |
- | | + | |
- | | + | |
- | @font-face
| + | |
- | {
| + | |
- | font-family: bebas;
| + | |
- | src: url('https://googledrive.com/host/0B4ZBZOYYKBzEdC1mMURfM2FlRkk');
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | .outer {
| + | |
- | width: 100%;
| + | |
- | text-align: center;
| + | |
- | float: center;
| + | |
- | height: 100%;
| + | |
- | background-color: #FFFFFF;
| + | |
- | }
| + | |
- | | + | |
- | #p-logo {
| + | |
- | position: absolute;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #content {
| + | |
- | width: 100%;
| + | |
- | }
| + | |
- | | + | |
- | #top-section {
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | .firstHeading {
| + | |
- | position: absolute;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | .thumb {
| + | |
- | display: none;
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | | + | |
- | #banner {
| + | |
- | width: 100%;
| + | |
- | background-color: #B4EEFF;
| + | |
- | height: 300px;
| + | |
- | }
| + | |
- | | + | |
- | .space {
| + | |
- | height: 20px;
| + | |
- | background-color: gray;
| + | |
- | }
| + | |
- | | + | |
- | #navigation {
| + | |
- | position: fixed;
| + | |
- | right: 0px;
| + | |
- | top: 100px;
| + | |
- | list-style-type: none;
| + | |
- | | + | |
- | }
| + | |
- | | + | |
- | #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;
| + | |
- | }
| + | |
- | | + | |
- | .one {
| + | |
- | height: 1000px;
| + | |
- | padding-top: 100px;
| + | |
- | width: 100%;
| + | |
- | background-color: rgb(100,100,100);
| + | |
- | }
| + | |
- | | + | |
- | .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:1000px;
| + | |
- | width: 100%;
| + | |
- | background-color: #7BB8F2;
| + | |
- | }
| + | |
- | | + | |
- | .three {
| + | |
- | height:1000px;
| + | |
- | width: 100%;
| + | |
- | background-color: rgb(200,200,200);
| + | |
- | }
| + | |
- | | + | |
- | .right {
| + | |
- | float:right;
| + | |
- | text-align: left;
| + | |
- | margin-right: 50px;
| + | |
- | margin-top: -300px;
| + | |
- | background-color: white;
| + | |
- | height: 200px;
| + | |
- | padding:20px;
| + | |
- | width: 30%;
| + | |
- | }
| + | |
- | | + | |
- | .wrapper {
| + | |
- | background-color: rgb(230,230,230);
| + | |
- | opacity: 1;
| + | |
- | height: 500px;
| + | |
- | width: 90%;
| + | |
- | float: center;
| + | |
- | margin: 50px;
| + | |
- |
| + | |
- |
| + | |
- | }
| + | |
- | | + | |
- | #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;
| + | |
- | background-color: white;
| + | |
- | }
| + | |
- | | + | |
- | .nav li {
| + | |
- | display: inline;
| + | |
- | margin: 0px 30px 30px 0px;
| + | |
- | font-family: bebas, 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;
| + | |
- | }
| + | |
- | | + | |
- | </style>
| + | |
- | </head>
| + | |
- | | + | |
- | | + | |
- | <body>
| + | |
- | <div class="outer">
| + | |
- | | + | |
- | <div id="banner">
| + | |
- | Banner goes here
| + | |
- | </div>
| + | |
- | | + | |
- | <ul id="tabs">
| + | |
- | <li><h2>Link</h2></li>
| + | |
- | <li><div class="link"><h2>Link</h2></div></li>
| + | |
- | </ul>
| + | |
- | | + | |
- | | + | |
- | <div class="space">
| + | |
- | <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="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/llama_613_600x450.jpg" /></li>
| + | |
- | <li><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/llama_613_600x450.jpg" /></li>
| + | |
- | <li><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/llama_613_600x450.jpg" /></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>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- | <div class="right">
| + | |
- | <h2>Hello</h2>
| + | |
- | <h4>Here's some stuff</h4>
| + | |
- | <p>Here's some other stuff</p>
| + | |
- | </div>
| + | |
- |
| + | |
- |
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | <div class="space"> </div>
| + | |
- | | + | |
- | <div class="two"></div>
| + | |
- | | + | |
- | <div class="space"></div>
| + | |
- | | + | |
- | <div class="three"> </div>
| + | |
- | | + | |
- | | + | |
- | | + | |
- | </div>
| + | |
- | </body> | + | |
| </html> | | </html> |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | <!--
| |
- | <html>
| |
- | <head>
| |
- | <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
| |
- | <style type="text/css"> @import "https://googledrive.com/host/0B4ZBZOYYKBzEYmdBemxXRHRBamM"; </style>
| |
- | <style type="text/javascript"> @import "https://googledrive.com/host/0B4ZBZOYYKBzEQ2w3TjVGaDlwUFE";</style>
| |
- | </head>
| |
- | <img id="penn" src="https://static.igem.org/mediawiki/2013/5/57/UPenn_logo.png"/>
| |
- |
| |
- |
| |
- | <script>
| |
- | $(document).ready(function(){
| |
- |
| |
- | //Testing some simple functions to see if it's working
| |
- | $(".tab").mouseenter(function() {
| |
- | $(this).css("width", "100px");
| |
- | });
| |
- |
| |
- | $(".tab").mouseleave(function() {
| |
- | $(this).css("width", "95px");
| |
- | });
| |
- |
| |
- |
| |
- | });
| |
- | </script>
| |
- |
| |
- | </html>
| |
- |
| |
- | {|
| |
- | !align="center" class="tab" id="current" |[[Team:UPenn|Home]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Team|Team]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[https://igem.org/Team.cgi?year=2013&team_name=UPenn Official Team Profile]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Project|Project]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Parts|Parts Submitted to the Registry]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Modeling|Modeling]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Notebook|Notebook]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Safety|Safety]]
| |
- | |}
| |
- | {|
| |
- | !align="center" class="tab"|[[Team:UPenn/Attributions|Attributions]]
| |
- | |}
| |
- | <!--
| |
- |
| |
- |
| |
- | {| id="left"
| |
- | !align="center" class="tab" id="current" |Test
| |
- | |}
| |
- |
| |
- | {| id="right"
| |
- | !align="center" class="tab" id="current" |Test
| |
- | |}
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | <!--http://blogs.scientificamerican.com/science-sushi/files/2012/11/SanfordLolcat-300x224.jpg
| |
- | {|align="justify"
| |
- | |You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.
| |
- | |[[Image:UPenn_logo.png|200px|right|frame]]
| |
- | |-
| |
- | |
| |
- | ''Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)''
| |
- | |[[Image:UPenn_team.png|right|frame|Your team picture]]
| |
- | |-
| |
- | |
| |
- | |align="center"|[[Team:UPenn | Team UPenn]]
| |
- | |}
| |
- | -->
| |