Team:UPenn

From 2013.igem.org

(Difference between revisions)
m
Line 6: Line 6:
<script type="text/javascript">
<script type="text/javascript">
-
    $(document).ready(function(){
+
$(document).ready(function(){
-
               
+
           
  $('#slider-code').tinycarousel();
  $('#slider-code').tinycarousel();
-
       
+
 +
$("#tabs li").mouseenter(function(){
 +
    $(this).css("margin-left", "+=175px", "slow");
 +
});
 +
 +
$("#tabs li").mouseleave(function(){
 +
  $(this).css("margin-left","-=175px"); });
 +
     });
     });
 +
</script>
</script>
Line 16: Line 24:
<style>
<style>
      
      
-
#slider-code { height: 300px; overflow:hidden;}
+
#slider-code { height: 300px; overflow:hidden; display: inline;}
-
#slider-code .viewport { float: left; width: 400px; height: 300px; overflow: hidden; position: relative; }
+
#slider-code .viewport { float: left; width: 400px; height: 300px;
-
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; }
+
overflow: hidden;position:relative; margin-top: 100px; margin-left: 75px; }
-
#slider-code .next { margin: 30px 0 0 10px;  }
+
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; margin-top:150px; }
 +
#slider-code .next { margin: 30px 0 0 10px; margin-top: 150px;  }
#slider-code .disable { visibility: hidden; }
#slider-code .disable { visibility: hidden; }
-
#slider-code .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; }
+
#slider-code .overview { list-style: none; position: absolute;
-
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 296px; border: 1px solid #dcdcdc; width: 396px;}
+
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;}
.outer {
.outer {
Line 44: Line 55:
     position: absolute;
     position: absolute;
}
}
-
 
.firstHeading {
.firstHeading {
Line 58: Line 68:
#banner {
#banner {
width: 100%;
width: 100%;
-
background-color: #FFFF99;
+
background-color: #B4EEFF;
height: 300px;
height: 300px;
}
}
Line 69: Line 79:
#navigation {
#navigation {
position: fixed;
position: fixed;
-
right: 100px;
+
right: 50px;
top: 100px;
top: 100px;
list-style-type: none;
list-style-type: none;
Line 109: Line 119:
width: 100%;
width: 100%;
background-color: #7BB8F2;
background-color: #7BB8F2;
 +
}
 +
 +
.right {
 +
    float:right;
 +
    margin-top: 125px;
 +
    margin-right: 275px;
 +
}
 +
 +
#tabs {
 +
    position: absolute;
 +
    list-style-type: none;
 +
    z-index: 99;
 +
    left: -250px;
 +
    top: 100px;
 +
}
 +
 +
#tabs li {
 +
    background-color: gray;
 +
    height:  60px;
 +
    width: 250px;
 +
    margin: 5px;
 +
-moz-border-radius: 4%
 +
    -ms-border-radius: 4%;
 +
    -webkit-border-radius: 4%;
 +
    -o-border-radius: 4%;
 +
    border-radius: 4%;
 +
   
 +
    -webkit-transition: margin-left 0.4s ease;
 +
    -moz-transition: margin-left 0.4s ease;
 +
    -o-transition: margin-left 0.4s ease;
 +
    transition: margin-left 0.4s ease;
 +
}
</style>
</style>
Line 118: Line 160:
<div id="banner">
<div id="banner">
-
 
+
Banner goes here
</div>
</div>
 +
 +
<ul id="tabs">
 +
    <li>Link</li>
 +
    <li>Another Link</li>
 +
</ul>
 +
<div class="space"></div>
<div class="space"></div>
Line 135: Line 183:
     <div class="viewport">
     <div class="viewport">
         <ul class="overview">
         <ul class="overview">
-
             <li><img src="images/picture3.jpg" /></li>
+
             <li><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/llama_613_600x450.jpg" /></li>
-
             <li><img src="images/picture2.jpg" /></li>
+
             <li><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/llama_613_600x450.jpg" /></li>
-
             <li><img src="images/picture1.jpg" /></li>
+
             <li><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/llama_613_600x450.jpg" /></li>
         </ul>
         </ul>
     </div>
     </div>
     <a class="buttons next"  href="#"><img class="circle"/></div></a>
     <a class="buttons next"  href="#"><img class="circle"/></div></a>
 +
   
 +
    <div class="right">
 +
        Put some info here
 +
    </div>
</div>
</div>
Line 214: Line 266:
!align="center" class="tab"|[[Team:UPenn/Attributions|Attributions]]  
!align="center" class="tab"|[[Team:UPenn/Attributions|Attributions]]  
|}
|}
-
 
+
<!--

Revision as of 21:26, 19 June 2013

  • Link
  • Another Link
Put some info here




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