Team:UPenn
From 2013.igem.org
(Difference between revisions)
m |
m |
||
Line 36: | Line 36: | ||
}); | }); | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
//check which element is in view and highlight corresponding circle | //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(); | |
- | + | }); | |
- | + | */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
}); | }); | ||
Line 80: | Line 62: | ||
<style> | <style> | ||
- | + | /*image carousel styling (taken mostly from plugin)*/ | |
#slider-code { height: 300px; overflow:hidden; display: inline; } | #slider-code { height: 300px; overflow:hidden; display: inline; } | ||
#slider-code .viewport { float: left; width: 400px; height: 300px; | #slider-code .viewport { float: left; width: 400px; height: 300px; | ||
- | margin-right: -15px; border: solid white | + | margin-right: -15px; border: solid white 10px; background-color: gray; |
overflow: hidden;position:relative; margin-top: 100px; margin-left: 75px; } | 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 .buttons { display: block; margin: 30px -100px 0 0px; float: left; margin-top:200px; } | ||
Line 93: | Line 75: | ||
padding: 1px; height: 296px; border: 1px solid #dcdcdc; width: 396px;} | padding: 1px; height: 296px; border: 1px solid #dcdcdc; width: 396px;} | ||
#slider-code .prev { padding-left: 50px} | #slider-code .prev { padding-left: 50px} | ||
- | |||
#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; } | #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 .pager li { float: left; height:10px; width:10px; margin: 5px 15px 15px 0px; z-index: 99; } | ||
Line 100: | Line 81: | ||
- | + | /*fonts and headings*/ | |
@font-face | @font-face | ||
{ | { | ||
font-family: bebas; | font-family: bebas; | ||
src: url('https://googledrive.com/host/0B4ZBZOYYKBzEdC1mMURfM2FlRkk'); | src: url('https://googledrive.com/host/0B4ZBZOYYKBzEdC1mMURfM2FlRkk'); | ||
+ | } | ||
+ | h2 { | ||
+ | font-family: bebas, 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 { | .outer { | ||
width: 100%; | width: 100%; | ||
Line 140: | Line 134: | ||
} | } | ||
+ | /*sections of page*/ | ||
#banner { | #banner { | ||
width: 100%; | width: 100%; | ||
Line 149: | Line 144: | ||
height: 20px; | height: 20px; | ||
background-color: gray; | background-color: gray; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 223: | Line 196: | ||
+ | } | ||
+ | |||
+ | /*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; | ||
} | } | ||
Line 261: | Line 257: | ||
width: 250px; | width: 250px; | ||
margin: 5px; | margin: 5px; | ||
- | -moz-border-radius: 6%; | + | -moz-border-radius: 6%; |
-ms-border-radius: 6%; | -ms-border-radius: 6%; | ||
-webkit-border-radius: 6%; | -webkit-border-radius: 6%; | ||
Line 271: | Line 267: | ||
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> | </style> | ||
Line 280: | Line 309: | ||
<div id="banner"> | <div id="banner"> | ||
- | Banner | + | Banner |
</div> | </div> | ||
Line 352: | Line 381: | ||
<div class="space"></div> | <div class="space"></div> | ||
- | <div class="three"> </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> | ||
Revision as of 15:37, 24 June 2013
Link
Link
Member Name
Description of the member
Member Name
Description of the member
Member Name
Description of the member