Team:Penn

From 2013.igem.org

(Difference between revisions)
m
m
Line 10: Line 10:
    
    
  //starts the carousel           
  //starts the carousel           
-
  $('#slider-code').tinycarousel({pager: true, interval:true, intervaltime: 5000});
+
  $('#slider-code').tinycarousel({pager: true, interval:true});
   
   
  /*Code for the sliding tabs
  /*Code for the sliding tabs
Line 68: Line 68:
      
      
  /*image carousel styling (taken mostly from plugin site)*/
  /*image carousel styling (taken mostly from plugin site)*/
-
#slider-code { height: 300px;  display: inline; overflow: hidden; position: relative;}
+
#slider-code { height: 300px;  display: inline; overflow: hidden;}
#slider-code .viewport { float: left; width: 400px; height: 300px;
#slider-code .viewport { float: left; width: 400px; height: 300px;
-
margin-right: -35px; border: background-color: gray;  
+
margin-right: -35px; border: background-color: gray;
overflow: hidden; position:relative; margin-top: 100px; margin-left: 75px;  z-index: -2;}
overflow: hidden; position:relative; margin-top: 100px; margin-left: 75px;  z-index: -2;}
#slider-code .buttons { display: block; margin: 30px -100px 0 0px; float: left; margin-top:225px; z-index: 1;}
#slider-code .buttons { display: block; margin: 30px -100px 0 0px; float: left; margin-top:225px; z-index: 1;}
-
#slider-code .next { margin: 20px 0 0 10px; margin-top: 225px; z-index: 100;}
+
#slider-code .next { margin: 20px 0 0 10px; margin-top: 225px; z-index: 1;}
#slider-code .disable { visibility: hidden; }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; position: absolute;
#slider-code .overview { list-style: none; position: absolute;
Line 79: Line 79:
#slider-code .overview li{ float: left; margin: 0 20px 0 0;
#slider-code .overview li{ float: left; margin: 0 20px 0 0;
padding: 1px; height: 296px; width: 396px;}
padding: 1px; height: 296px; width: 396px;}
-
#slider-code .prev { padding-left: 100px; z-index: 100;}
+
#slider-code .prev { padding-left: 100px; z-index: 1;}
#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 100px; }
#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 100px; }
#slider-code .pager li { float: left; height:10px; width:10px; margin: 5px 15px 15px 0px; z-index: 99; }
#slider-code .pager li { float: left; height:10px; width:10px; margin: 5px 15px 15px 0px; z-index: 99; }
Line 91: Line 91:
/*sections of page*/
/*sections of page*/
 +
 +
.space {
.space {
height: 20px;
height: 20px;
background-color: gray;
background-color: gray;
-
}
 
-
.outer{
 
-
    z-index: -10;
 
}
}
.one {
.one {
height:800px;
height:800px;
-
position: absolute;
+
position: relative;
padding-top: 30px;
padding-top: 30px;
width: 100%;
width: 100%;
Line 109: Line 108:
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 90%;
background-size: 90%;
-
top: 0px;
+
z-index: -99;
-
z-index: -100;
+
}
}
.two {
.two {
-
top: 800px;
+
height:800px;
-
position: absolute;
+
position: relative;
padding-top: 30px;
padding-top: 30px;
width: 100%;
width: 100%;
Line 126: Line 124:
.three {
.three {
-
height:800px;
 
-
position: absolute;
 
-
top: 2000px;
 
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
position: relative;
position: relative;
text-align: center;
text-align: center;
-
 
+
height:800px;
width: 100%;
width: 100%;
background-color: rgb(200,200,200);
background-color: rgb(200,200,200);
Line 152: Line 147:
   opacity: 0.7;
   opacity: 0.7;
}
}
-
 
.left{
.left{
Line 176: Line 170:
top: 20px;
top: 20px;
list-style-type: none;
list-style-type: none;
-
z-index: 100;
+
z-index: 9999999;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
   filter: alpha(opacity=90);
   filter: alpha(opacity=90);
Line 224: Line 218:
 +
#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;
 +
 +
}
-
/*Team table*/
 
.team {
.team {
float: center;
float: center;
-
margin-left: 250px;
 
}
}
Line 268: Line 309:
<body bgcolor="black">
<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>-->
<!--Navigation bar at the top-->
<!--Navigation bar at the top-->
Line 285: Line 335:
      
      
      
      
 +
   
 +
</div>
<!--Circles on the side that scroll you to sections of the page-->
<!--Circles on the side that scroll you to sections of the page-->
Line 293: Line 345:
</ul>
</ul>
-
 
+
<!--First section: brief overview-->
 +
<div class="one">
<!--Image carousel.  This is taken pretty much from the plugin site except for the captions which I added in-->         
<!--Image carousel.  This is taken pretty much from the plugin site except for the captions which I added in-->         
Line 301: Line 354:
         <ul class="overview">
         <ul class="overview">
             <!--Images that appear in the carousel-->
             <!--Images that appear in the carousel-->
-
             <li> <img id="image" src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/"></li>
+
             <li>
-
             <li><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" ></li>
+
            <img id="image" src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/"/>
-
             <li><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUDUwMm1ScllCRWs/" ></li>
+
            </li>
 +
         
 +
             <li><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" />
 +
             
 +
             <li><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUDUwMm1ScllCRWs/" />
 +
     
         </ul>
         </ul>
     </div>
     </div>
Line 314: Line 372:
     </ul>
     </ul>
</div>
</div>
-
 
-
 
-
<!--First section: brief overview-->
 
-
<div class="one">
 
-
   
 
-
 
      
      
     <!--Description to the right of the carousel that briefly introduces the team/project-->
     <!--Description to the right of the carousel that briefly introduces the team/project-->
Line 369: Line 421:
   </table>
   </table>
  <h4>Photos by Erica Sachse</h4>
  <h4>Photos by Erica Sachse</h4>
 +
</body>
 +
</html>
-
</div>
 
</body>
</body>
</html>
</html>

Revision as of 15:25, 6 July 2013

Hello

Welcome to Penn's iGEM team wiki!

This page is under construction at the moment, but check back with us soon to see what we're up to!

Project Overview

Meet the Bunch

Photos by Erica Sachse


</body> </html>