Team:UPenn

From 2013.igem.org

(Difference between revisions)
m
m
Line 36: Line 36:
  });
  });
            
            
-
         
 
-
        /*      //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
//check which element is in view and highlight corresponding circle
-
  $(window).scroll(function() {
+
   
-
if (isScrolledIntoView(".one")) {
+
/* var inview = function() {
-
     $("#one").css("background-color", "black");
+
     var winTop = $(window).scrollTop();
-
}
+
     var halfVP = $(window).height() * 0.5;
-
else {
+
   
-
     $("#one").css("background-color", "white");
+
if (winTop >= 1000 && winTop < 0 + 1000) {
-
}
+
    $(this).css('background-color', '#528B8B')
-
});*/
+
} else {
-
       
+
    $(this).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');
+
$(window).scroll(function() {
-
if ($window.scrollTop() >= scrollTo && $window.scrollTop() < scrollTo + viewportHeight) {
+
    inview();
-
$(this).css('background-color', '#528B8B')
+
    });
-
} else {
+
    */
-
$(this).css('background-color', 'white');
+
-
}
+
-
});
+
-
 
+
-
});
+
});
});
      
      
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 5px; background-color: gray;
+
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;
-
}
 
-
 
-
#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;
 
}
}
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 goes here
+
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

Hello

Here's some stuff

Here's some other stuff

Member Name

Description of the member

Member Name

Description of the member

Member Name

Description of the member