Team:UPenn

From 2013.igem.org

(Difference between revisions)
m
 
(41 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; }
+
-
 
+
-
 
+
-
/*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: #FFFFFF;
+
-
}
+
-
 
+
-
#p-logo {
+
-
    position: absolute;
+
-
    display: none;
+
-
}
+
-
 
+
-
#content {
+
-
width: 100%;
+
-
}
+
-
 
+
-
#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: 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;
+
-
 
+
-
 
+
-
}
+
-
 
+
-
/*links and navigation*/
+
-
#navigation {
+
-
position: fixed;
+
-
right: 0px;
+
-
top: 20px;
+
-
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;
+
-
}
+
-
 
+
-
#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: 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>
+
-
<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&nbsp;&nbsp;&nbsp;Team&nbsp;&nbsp;&nbsp;&nbsp; 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 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>

Latest revision as of 23:25, 8 August 2013

Page Redirection If you are not redirected automatically, follow the link here.

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