Team:Waterloo/Test

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
<html>
<html>
<head>
<head>
-
<meta name="keywords" content="" />
 
-
<meta name="description" content="" />
 
-
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
-
<title>Glissade by FCT</title>
 
 +
<!-- Javascript-->
-
<style media="screen" type="text/css">
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
-
 
+
<script type="text/javascript">
-
#catlinks { display:none;}
+
$(document).ready(function() {
-
#search-controls {display: none}
+
//Set Default State of each portfolio piece
-
#top-section {position: relative;
+
$(".paging").show();
-
    height: 0px;
+
$(".paging a:first").addClass("active");
-
    width: 965px;
+
-
    margin: 0 auto 0 auto;
+
//Get size of images, how many there are, then determin the size of the image reel.
-
    border-left: 1px solid #444444;
+
var imageWidth = $(".window").width();
-
    border-right: 1px solid #444444;
+
var imageSum = $(".image_reel img").size();
-
border-bottom: 0px;}
+
var imageReelWidth = imageWidth * imageSum;
-
.firstHeading {display:none;}
+
-
#p-logo{display: none};
+
-
 
+
-
 
+
-
body {
+
-
margin: 0;
+
-
padding: 0;
+
-
background: #E5E6DD;
+
-
font-family: 'Oxygen', sans-serif;
+
-
font-size: 13px;
+
-
color: #8A8985;
+
-
}
+
-
 
+
-
h1, h2, h3 {
+
-
margin: 0;
+
-
padding: 0;
+
-
text-transform: uppercase;
+
-
font-weight: 300;
+
-
color: #FFFFFF;
+
-
}
+
-
 
+
-
h1 {
+
-
font-size: 2em;
+
-
}
+
-
 
+
-
h2 {
+
-
font-size: 2.8em;
+
-
}
+
-
 
+
-
h3 {
+
-
font-size: 2.6em;
+
-
}
+
-
 
+
-
p, ul, ol {
+
-
margin-top: 0;
+
-
line-height: 200%;
+
-
}
+
-
 
+
-
ul, ol {
+
-
}
+
-
 
+
-
a {
+
-
text-decoration: none;
+
-
color: #5BA689;
+
-
}
+
-
 
+
-
a:hover {
+
-
}
+
-
 
+
-
#wrapper {
+
-
overflow: hidden;
+
-
background: #FFFFFF;
+
-
}
+
-
 
+
-
.container {
+
-
width: 1200px;
+
-
margin: 0px auto;
+
-
 
+
-
}
+
-
 
+
-
/* Header */
+
-
 
+
-
#header-wrapper {
+
-
overflow: hidden;
+
-
height: 600px;
+
-
}
+
-
 
+
-
#header {
+
-
width: 960px;
+
-
height: 200px;
+
-
margin: 0 auto;
+
-
padding: 0px 20px;
+
-
}
+
-
 
+
-
/* Banner */
+
-
 
+
-
#banner {
+
-
overflow: hidden;
+
-
height: 400px;
+
-
background: url(images/img04.jpg) no-repeat center bottom;
+
-
}
+
-
 
+
-
#banner .image-style {
+
-
border: 15px solid #F4F4F4;
+
-
}
+
-
 
+
-
/* Logo */
+
-
 
+
-
#logo {
+
-
overflow: hidden;
+
-
height: 250px;
+
-
}
+
-
 
+
-
#logo h1, #logo p {
+
-
text-align: center;
+
-
}
+
-
 
+
-
#logo h1 {
+
-
padding: 50px 0px 0px 0px;
+
-
letter-spacing: -6px;
+
-
text-transform: lowercase;
+
-
font-size: 100px;
+
-
}
+
-
 
+
-
#logo p {
+
-
margin-top: -20px;
+
-
padding: 0px 0px 0px 5px;
+
-
font-size: 20px;
+
-
font-weight: 300;
+
-
color: #696969;
+
-
}
+
-
 
+
-
#logo p a {
+
-
color: #696969;
+
-
}
+
-
 
+
-
#logo a {
+
-
border: none;
+
-
background: none;
+
-
text-decoration: none;
+
-
color: #3C342E;
+
-
}
+
-
 
+
-
/* Splash */
+
-
 
+
-
#splash {
+
-
overflow: hidden;
+
-
padding: 0px 0px 50px 0px;
+
-
border-bottom: 1px dashed #E7E7E7;
+
-
letter-spacing: -3px;
+
-
text-align: center;
+
-
font-size: 48px;
+
-
}
+
-
 
+
-
#splash span {
+
-
color: #E7E7E7;
+
-
}
+
-
 
+
-
/* Search */
+
-
 
+
-
#search {
+
-
float: right;
+
-
width: 280px;
+
-
height: 60px;
+
-
padding: 20px 0px 0px 0px;
+
-
}
+
-
 
+
-
#search form {
+
-
height: 41px;
+
-
margin: 0;
+
-
padding: 10px 0 0 20px;
+
-
}
+
-
 
+
-
#search fieldset {
+
-
margin: 0;
+
-
padding: 0;
+
-
border: none;
+
-
}
+
-
 
+
-
#search-text {
+
-
width: 170px;
+
-
padding: 6px 5px 2px 5px;
+
-
border: 1px solid #DEDEDE;
+
-
background: #E7E7E7;
+
-
text-transform: lowercase;
+
-
font: normal 11px Arial, Helvetica, sans-serif;
+
-
color: #5D781D;
+
-
}
+
-
 
+
-
#search-submit {
+
-
width: 50px;
+
-
height: 22px;
+
-
border: none;
+
-
background: #E7E7E7;
+
-
color: #000000;
+
-
}
+
-
 
+
-
/* Menu */
+
-
 
+
-
#menu-wrapper {
+
-
overflow: hidden;
+
-
height: 52px;
+
-
margin-bottom: 2em;
+
-
background: #E7E7E7;
+
-
}
+
-
 
+
-
#menu {
+
-
overflow: hidden;
+
-
height: 52px;
+
-
}
+
-
 
+
-
#menu ul {
+
-
margin: 0;
+
-
padding: 0px 0px 0px 0px;
+
-
list-style: none;
+
-
line-height: normal;
+
-
text-align: center;
+
-
}
+
-
 
+
-
#menu li {
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#menu a {
+
-
display: block;
+
-
padding: 0px 30px;
+
-
line-height: 52px;
+
-
border: none;
+
-
text-decoration: none;
+
-
text-transform: lowercase;
+
-
text-align: center;
+
-
text-transform: uppercase;
+
-
font-family: 'Oswald', sans-serif;
+
-
font-size: 14px;
+
-
font-weight: 500;
+
-
color: #56273F;
+
-
}
+
-
 
+
-
#menu a:hover, #menu .current_page_item a {
+
-
background: #C61A70;
+
-
text-decoration: none;
+
-
color: #FFFFFF;
+
-
}
+
-
 
+
-
#menu .current_page_item a {
+
-
}
+
-
 
+
-
/* Page */
+
-
 
+
-
#page {
+
-
overflow: hidden;
+
-
padding: 20px 20px 40px 20px;
+
-
}
+
-
/* Content */
+
-
 
+
-
#content {
+
-
float: center;
+
-
width:1200px;
+
-
padding: 0px 0px 0px 0px;
+
-
}
+
-
 
+
-
.post {
+
-
overflow: hidden;
+
-
}
+
-
 
+
-
.post .title {
+
-
margin-right: -100px;
+
-
padding: 20px 0px 10px 0px;
+
-
border-bottom: 0px solid #E0E1D6;
+
-
text-shadow: 1px 1px 0px #FFFFFF;
+
-
font-size: 26px;
+
-
}
+
//Adjust the image reel to its new size
-
/* Changes text colour of main paragraph title */
+
$(".image_reel").css({'width' : imageReelWidth});
-
.post .title a {
+
-
border: none;
+
//Paging + Slider Function
-
color: #FF0000;
+
rotate = function(){
-
}
+
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
 +
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
-
.post .meta {
+
$(".paging a").removeClass('active'); //Remove all active class
 +
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 +
 +
//Slider Animation
 +
$(".image_reel").animate({  
 +
left: -image_reelPosition
 +
}, 500 );
 +
 +
};
-
margin-bottom: 30px;
+
//Rotation + Timing Event
-
padding: 20px;
+
rotateSwitch = function(){
-
text-align: left;
+
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
-
font-size: 16px;
+
$active = $('.paging a.active').next();
-
}
+
if ( $active.length === 0) { //If paging reaches the end...
 +
$active = $('.paging a:first'); //go back to first
 +
}
 +
rotate(); //Trigger the paging and slider function
 +
}, 4000); //Timer speed in milliseconds
 +
};
 +
 +
rotateSwitch(); //Run function on launch
 +
 +
//On Hover
 +
$(".image_reel a").hover(function() {
 +
clearInterval(play); //Stop the rotation
 +
}, function() {
 +
rotateSwitch(); //Resume rotation
 +
});
 +
 +
//On Click
 +
$(".paging a").click(function() {
 +
$active = $(this); //Activate the clicked paging
 +
//Reset Timer
 +
clearInterval(play); //Stop the rotation
 +
rotate(); //Trigger rotation immediately
 +
rotateSwitch(); // Resume rotation
 +
return false; //Prevent browser jump to link anchor
 +
});
 +
 +
});
 +
</script>
-
.post .meta .date {
 
-
float: left;
 
-
}
 
-
.post .meta .posted {
+
</head>
-
float: right;
+
-
}
+
-
.post .meta a {
 
-
}
 
-
 
-
.post .entry {
 
-
padding: 0px 0px 20px 0px;
 
-
padding-bottom: 20px;
 
-
text-align: justify;
 
-
}
 
-
 
-
.links {
 
-
padding-top: 20px;
 
-
margin-bottom: 30px;
 
-
}
 
-
 
-
.more {
 
-
display: block;
 
-
float: left;
 
-
width: 88px;
 
-
height: 25px;
 
-
padding: 2px 0px 0px 0px;
 
-
margin-right: 10px;
 
-
background: url(images/img08.jpg) no-repeat left top;
 
-
text-align: center;
 
-
color: #FFFFFF;
 
-
}
 
-
.comments {
 
-
display: block;
 
-
float: left;
 
-
width: 88px;
 
-
height: 25px;
 
-
padding: 2px 0px 0px 0px;
 
-
background: none;
 
-
text-align: center;
 
-
color: #FFFFFF;
 
-
 
-
}
 
-
 
-
/* Sidebar */
 
-
 
-
#sidebar {
 
-
float: left;
 
-
width: 200px;
 
-
margin: 0px;
 
-
padding: 0px 0px 0px 0px;
 
-
color: #F7F7F7;
 
-
}
 
-
 
-
#sidebar h2 {
 
-
margin: 0px 0px 0px 0px;
 
-
padding: 40px 0px 5px 0px;
 
-
border-bottom: none;
 
-
text-shadow: none;
 
-
font-size: 20px;
 
-
color: #56273F;
 
-
}
 
-
 
-
#sidebar a {
 
-
border: none;
 
-
}
 
-
 
-
#sidebar a:hover {
 
-
text-decoration: underline;
 
-
}
 
-
 
-
/* Calendar */
 
-
 
-
#calendar {
 
-
}
 
-
 
-
#calendar_wrap {
 
-
padding: 20px;
 
-
}
 
-
 
-
#calendar table {
 
-
width: 100%;
 
-
}
 
-
 
-
#calendar tbody td {
 
-
text-align: center;
 
-
}
 
-
 
-
#calendar #next {
 
-
text-align: right;
 
-
}
 
-
 
-
/* Three Column Footer Content */
 
-
 
-
#footer-bg {
 
-
overflow: hidden;
 
-
padding: 20px 20px;
 
-
background: #FFFFFF;
 
-
border-top: 10px solid #E7E7E7;
 
-
        margin
 
-
}
 
-
 
-
#footer-content {
 
-
}
 
-
#footer-content h2 {
 
-
float: justify;
 
-
      margin-right: 3em;
 
-
padding: 20px 20px 10px 0px;
 
-
border-bottom: 3px solid #DD6FFF;
 
-
font-size: 22px;
 
-
color: #FFFFFF;
 
-
 
-
}
 
-
#column1 {
 
-
float: left;
 
-
width: 384px;
 
-
margin-right: 15px;
 
-
margin-left: 12px;
 
-
}
 
-
 
-
#column2 {
 
-
margin-top: -17px;
 
-
float: left;
 
-
width: 384px;
 
-
}
 
-
 
-
#column3 {
 
-
float: left;
 
-
width: 384px;
 
-
        margin-left: 15px;
 
-
}
 
-
/* Footer */
 
-
 
-
#footer {
 
-
height: 100px;
 
-
margin: 0 auto;
 
-
padding: 0px 0px 0px 0px;
 
-
}
 
-
#footer p {
 
-
margin: 0;
 
-
padding-top: 10px;
 
-
line-height: normal;
 
-
text-align: justify;
 
-
text-shadow: 1px 1px 0px #FFFFFF;
 
-
color: #E7E7E7;
 
-
 
-
}
 
-
 
-
#footer a {
 
-
text-decoration: underline;
 
-
color: #909090;
 
-
}
 
-
 
-
#footer a:hover {
 
-
text-decoration: none;
 
-
color: #DD6FFF;
 
-
}
 
-
 
-
.box1 {
 
-
overflow: hidden;
 
-
height: 300px;
 
-
background: #F7F7F7;
 
-
}
 
-
 
-
.list-style1 {
 
-
margin: 0px;
 
-
padding: 0px;
 
-
list-style: none;
 
-
}
 
-
 
-
.list-style1 li {
 
-
padding: 7px 0px 7px 0px;
 
-
border-top: 1px dashed #E7E2DC;
 
-
}
 
-
 
-
.list-style1 .first {
 
-
padding-top: 0px;
 
-
border-top: none;
 
-
}
 
-
 
-
.list-style2 {
 
-
margin: 0px;
 
-
padding: 0px;
 
-
list-style: none;
 
-
}
 
-
 
-
.list-style2 li {
 
-
padding: 7px 0px 7px 0px;
 
-
}
 
-
 
-
 
-
.list-style2 a {
 
-
color: #000000;
 
-
 
-
}
 
-
 
-
.list-style2 a:hover {
 
-
text-decoration: underline;
 
-
}
 
-
 
-
.list-style2 .first {
 
-
padding-top: 0px;
 
-
border-top: none;
 
-
background: none;
 
-
}
 
-
 
-
/* Banner */
 
-
 
-
 
-
</style>
 
-
</head>
 
<body>
<body>
-
<div id="wrapper">
 
-
<div id="logo" class="container">
 
-
<h1><a href="#">IGEM </a></h1>
 
-
<p>This is a test</p>
 
-
</div>
 
-
<div id="menu-wrapper">
 
-
<div id="menu" class="container">
 
-
<ul>
 
-
<li class="current_page_item"><a href="#">Homepage</a></li>
 
-
<li><a href="#">Services</a></li>
 
-
<li><a href="#">Blog</a></li>
 
-
<li><a href="#">Photos</a></li>
 
-
<li><a href="#">About Us</a></li>
 
-
<li><a href="#">Links</a></li>
 
-
<li><a href="#">Contact Us</a></li>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
<div id="page" class="container">
 
-
<div id="content">
 
-
<div class="post">
 
-
<h2 class="title"><a href="#">Information Body</a></h2>
 
-
<div class="entry">
 
-
<p>This is <strong>Glissade </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org">FCT</a>. 
 
-
  The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative
+
<div id="content_wrapper">
-
Commons Attributions 3.0</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from
+
<div align="center">
-
 
+
<table id="rotator_news">
-
that, have fun with it :) </p>
+
<tr>
-
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae
+
<td id="window_images">
-
 
+
<div class="main_view">
-
nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit
+
    <div class="window">
-
 
+
        <div class="image_reel">
-
eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis,  egestas at sem.  Mauris quam enim,  in, rhoncus ut, lobortis a,
+
                    <img src="https://static.igem.org/mediawiki/2011/b/bf/USTC_Software_L001.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
-
 
+
                    <img src="https://static.igem.org/mediawiki/2011/d/da/USTC_Software_L002.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
-
est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante
+
                    <img src="https://static.igem.org/mediawiki/2011/e/e6/USTC_Software_L003.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
-
 
+
                    <img src="https://static.igem.org/mediawiki/2011/9/96/USTC_Software_L004.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
-
ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
+
                    <img src="https://static.igem.org/mediawiki/2011/6/60/USTC_Software_L005.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
-
</div>
+
                    <img src="https://static.igem.org/mediawiki/2011/2/22/USTC_Software_L006.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
-
</div>
+
                    <img src="https://static.igem.org/mediawiki/2011/b/ba/USTC_Software_L007.png" style=" margin-right:0px; width:640px; height:400px" alt="" />            
-
<div style="clear: both;">&nbsp;</div>
+
        </div>
-
</div>
+
    </div>
-
<!-- end #content -->
+
    <div class="paging">
-
<div id="sidebar">
+
        <a href="#" rel="1">1</a>
-
<div>
+
        <a href="#" rel="2">2</a>
-
<h2>Nulla luctus eleifend</h2>
+
        <a href="#" rel="3">3</a>
-
<ul class="list-style2">
+
        <a href="#" rel="4">4</a>
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
+
        <a href="#" rel="5">5</a>
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+
        <a href="#" rel="6">6</a>
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
+
        <a href="#" rel="7">7</a>
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
+
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
+
    </div>
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<!-- end #sidebar -->
+
-
<div style="clear: both;">&nbsp;</div>
+
-
</div>
+
-
<!-- end #page -->
+
-
+
-
</div>
+
-
<div id="footer-bg">
+
-
<div id="footer-content" class="container">
+
-
<div id="column1">
+
-
<h2>Tellus feugiat eleifend</h2>
+
-
<ul class="list-style2">
+
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
+
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
+
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
+
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
+
-
</ul>
+
-
</div>
+
-
<div id="column2">
+
-
<h2>Etiam rhoncus volutpat</h2>
+
-
<ul class="list-style2">
+
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
+
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
+
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
+
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
+
-
</ul>
+
-
</div>
+
-
<div id="column3">
+
-
<h2>Recommended Links</h2>
+
-
<ul class="list-style2">
+
-
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
+
-
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
+
-
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
+
-
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
+
-
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div id="footer">
+
-
+
-
</div>
+
-
<!-- end #footer -->
+
-
</body>
+
-
</html>
+

Revision as of 18:55, 21 April 2013

1 2 3 4 5 6 7

Retrieved from "http://2013.igem.org/Team:Waterloo/Test"