Team:UCLA/Template

From 2013.igem.org

(Difference between revisions)
 
(89 intermediate revisions not shown)
Line 1: Line 1:
-
<style type="text/css">
+
<html>
 +
<head>
 +
<link rel="stylesheet" href="https://2013.igem.org/Team:UCLA/Template/css?action=raw&ctype=text/css" type="text/css" />
 +
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 +
<script>
 +
$(document).ready(function(){
-
@import url(http://fonts.googleapis.com/css?family=Raleway);
 
-
/* Set all parents to full height */
 
-
html, body,
 
-
.container,
 
-
.cbp-fbscroller,
 
-
.cbp-fbscroller section {
 
-
height: 100%;
 
-
}
 
-
/* The nav is fixed on the right side  and we center it by translating it 50%
+
var $window = $(window); //You forgot this line in the above example
-
(we don't know it's height so we can't use the negative margin trick) */
+
-
.cbp-fbscroller > nav {
+
-
position: fixed;
+
-
z-index: 9999;
+
-
right: 100px;
+
-
top: 50%;
+
-
width: 26px;
+
-
-webkit-transform: translateY(-50%);
+
-
-moz-transform: translateY(-50%);
+
-
-ms-transform: translateY(-50%);
+
-
transform: translateY(-50%);
+
-
}
+
-
.cbp-fbscroller > nav a {
+
$('section[data-type="background"]').each(function(){
-
display: block;
+
var $bgobj = $(this); // assigning the object
-
position: relative;
+
$(window).scroll(function() {
-
z-index: 9999;
+
-
color: transparent;
+
-
width: 26px;
+
-
height: 26px;
+
-
outline: none;
+
-
margin: 25px 0;
+
-
border-radius: 50%;
+
-
border: 4px solid #fff;
+
-
}
+
-
.no-touch .cbp-fbscroller > nav a:hover {
+
//var yPos = -($(window).scrollTop() / $bgobj.data('speed'));
-
background: rgba(255,255,255,0.6);
+
var yPos = -( ($(window).scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));
-
}
+
-
.cbp-fbscroller > nav a.cbp-fbcurrent {
+
// Put together our final background position
-
background: #fff;
+
var coords = '50% '+ yPos + 'px';
-
}
+
// Move the background
 +
$bgobj.css({ backgroundPosition: coords });
 +
});
 +
});
 +
});
-
/* background-attachment does the trick */
+
$(function() {
-
.cbp-fbscroller section {
+
  $('a[href*=#]:not([href=#])').click(function() {
-
position: relative;
+
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
-
background-position: top center;
+
        || location.hostname == this.hostname) {
-
background-repeat: no-repeat;
+
-
background-size: cover;
+
-
}
+
-
.no-touch .cbp-fbscroller section {
+
      var target = $(this.hash);
-
background-attachment: fixed;
+
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-
}
+
      if (target.length) {
 +
        $('html,body').animate({
 +
          scrollTop: target.offset().top
 +
        }, 1000);
 +
        return false;
 +
      }
 +
    }
 +
  });
 +
});
 +
</script>
 +
</head>
-
#fbsection1 {
 
-
background-image: url(../images/bg1.png);
 
-
}
 
-
#infb1 {
 
-
font-family: 'Raleway', sans-serif;
 
-
position: relative;
 
-
height: 600px;
 
-
width: 800px;
 
-
margin: 18px auto 0;
 
-
}
 
-
#fbsection2 {
 
-
background-image: url(../images/bg2.png);
 
-
}
 
-
#fbsection3 {
+
<body id="bg">
-
background-image: url(../images/3.jpg);
+
<div id="container">
-
}
+
<div id="top-panel">
-
#fbsection4 {
+
<a href = "https://igem.org/Main_Page"><img style ="float:right; margin:150px 0px 0px 0px"  src = "https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" height = "50" width = "60"/></a>
-
background-image: url(../images/4.jpg);
+
</div>
-
}
+
</div>
-
#fbsection5 {
 
-
background-image: url(../images/5.jpg);
 
-
}
 
-
/* General Blueprint Style */
 
-
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 
-
@font-face {
 
-
font-family: 'fontawesome';
 
-
src:url('../fonts/fontawesome.eot');
 
-
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
 
-
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
 
-
url('../fonts/fontawesome.woff') format('woff'),
 
-
url('../fonts/fontawesome.ttf') format('truetype');
 
-
font-weight: normal;
 
-
font-style: normal;
 
-
}
 
-
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
<style>
-
body, html { font-size: 100%; padding: 0; margin: 0;}
+
#nav { font-family: "Raleway", serif; font-size: 12px; color: white;}
 +
#nav { background-color: #0070B0; width: 1150px; list-style: none; }
 +
#nav { float: left; margin: 0px 0px auto -100px; z-index: 5; }
 +
#nav li { float: left; margin: 0px 25px 0px -5px; position:relative; }
 +
#nav a { display: block; padding: 5px 15px; text-decoration: none; color: white; border-style: none; }
 +
#nav a:hover { color: #D6D615; }
 +
#nav {border-radius:8px; border: 2px solid white; }
 +
</style>
-
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
<ul id="nav">
-
.clearfix:before, .clearfix:after { content: " "; display: table; }
+
<li style="margin-left: 30px;"><a href="https://2013.igem.org/Team:UCLA">HOME</a>
-
.clearfix:after { clear: both; }
+
</li>
 +
<li><a href="/Team:UCLA/Project">PROJECT</a></li>
 +
<li><a href="/Team:UCLA/Team">TEAM</a></li>
 +
<li><a href="/Team:UCLA/Parts">PARTS</a></li>
 +
<li><a href="/Team:UCLA/Modeling">MODELING</a></li>
 +
<li><a href="/Team:UCLA/HumanPractices">HUMAN PRACTICES</a></li>
 +
<li><a href="/Team:UCLA/Notebook/Biobrick">NOTEBOOK</a></li>
 +
<li><a href="/Team:UCLA/Safety">SAFETY</a></li>
 +
        <li><a href="/Team:UCLA/Attributions">ATTRIBUTIONS</a></li>
 +
        <li><a href="https://igem.org/2013_Judging_Form?id=1176">JUDGING</a></li>
 +
</ul>
-
body {
 
-
    font-family: 'Lato', Calibri, Arial, sans-serif;
 
-
    color: #fff;
 
-
}
 
-
a {
 
-
color: #f0f0f0;
 
-
text-decoration: none;
 
-
}
 
-
a:hover {
+
</body>
-
color: #000;
+
-
}
+
-
.container > header {
 
-
padding: 2.875em 1.875em 1.875em;
 
-
position: fixed;
 
-
z-index: 1000;
 
-
width: 60%;
 
-
left: 20%;
 
-
}
 
-
.container > header h1 {
 
-
font-size: 2.125em;
 
-
line-height: 1.3;
 
-
margin: 0;
 
-
float: left;
 
-
font-weight: 400;
 
-
}
 
-
.container > header span {
+
</div>
-
display: block;
+
</html>
-
font-weight: 700;
+
-
text-transform: uppercase;
+
-
letter-spacing: 0.5em;
+
-
padding: 0 0 0.6em 0.1em;
+
-
}
+
-
 
+
-
.container > header nav {
+
-
float: right;
+
-
}
+
-
 
+
-
.container > header nav a {
+
-
display: block;
+
-
float: left;
+
-
position: relative;
+
-
width: 2.5em;
+
-
height: 2.5em;
+
-
background: #fff;
+
-
border-radius: 50%;
+
-
color: transparent;
+
-
margin: 0 0.1em;
+
-
border: 4px solid #fff;
+
-
text-indent: -8000px;
+
-
}
+
-
 
+
-
.container > header nav a:after {
+
-
content: attr(data-info);
+
-
color: #fff;
+
-
position: absolute;
+
-
width: 600%;
+
-
top: 120%;
+
-
text-align: right;
+
-
right: 0;
+
-
opacity: 0;
+
-
pointer-events: none;
+
-
}
+
-
 
+
-
.container > header nav a:hover:after {
+
-
opacity: 1;
+
-
}
+
-
 
+
-
.container > header nav a:hover {
+
-
background: #47a3da;
+
-
}
+
-
 
+
-
.icon-drop:before,
+
-
.icon-arrow-left:before {
+
-
font-family: 'fontawesome';
+
-
position: absolute;
+
-
top: 0;
+
-
width: 100%;
+
-
height: 100%;
+
-
speak: none;
+
-
font-style: normal;
+
-
font-weight: normal;
+
-
line-height: 2;
+
-
text-align: center;
+
-
color: #47a3da;
+
-
-webkit-font-smoothing: antialiased;
+
-
text-indent: 8000px;
+
-
padding-left: 8px;
+
-
}
+
-
 
+
-
.container > header nav a:hover:before {
+
-
color: #fff;
+
-
}
+
-
 
+
-
.icon-drop:before {
+
-
content: "\e000";
+
-
}
+
-
 
+
-
.icon-arrow-left:before {
+
-
content: "\f060";
+
-
}
+
-
 
+
-
</style>
+

Latest revision as of 23:26, 27 September 2013

Retrieved from "http://2013.igem.org/Team:UCLA/Template"