Team:Waterloo/Test

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
<html>
<head>
<head>
-
<meta name="description" content="" />
 
<meta name="keywords" content="" />
<meta name="keywords" content="" />
-
<title>Big Business 2.0 by FCT</title>
+
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
<title>Glissade by FCT</title>
 +
 +
<style media="screen" type="text/css">
<style media="screen" type="text/css">
-
//Annas Code
+
 
#catlinks { display:none;}
#catlinks { display:none;}
#search-controls {display: none}
#search-controls {display: none}
Line 20: Line 23:
#p-logo{display: none};
#p-logo{display: none};
-
* {
+
 
 +
body {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
 +
background: #E5E6DD;
 +
font-family: 'Oxygen', sans-serif;
 +
font-size: 13px;
 +
color: #8A8985;
}
}
-
a {
+
h1, h2, h3 {
-
text-decoration: underline;
+
margin: 0;
-
color: #0F8C8C;
+
padding: 0;
 +
text-transform: uppercase;
 +
font-weight: 300;
 +
color: #7D7764;
}
}
-
a:hover {
+
h1 {
-
text-decoration: none;
+
font-size: 2em;
}
}
-
body {
+
h2 {
-
font-size: 11.5pt;
+
font-size: 2.8em;
-
color: #5C5B5B;
+
-
line-height: 1.75em;
+
-
background: #E0DCDC url(images/img01.gif) repeat-x top left;
+
}
}
-
body,input {
+
h3 {
-
font-family: Georgia, serif;
+
font-size: 1.6em;
}
}
-
strong {
+
p, ul, ol {
-
color: #2C2B2B;
+
margin-top: 0;
 +
line-height: 180%;
}
}
-
br.clearfix {
+
ul, ol {
-
clear: both;
+
}
}
-
h1,h2,h3,h4 {
+
a {
-
font-weight: normal;
+
text-decoration: none;
-
letter-spacing: -1px;
+
color: #5BA689;
}
}
-
h2 {
+
a:hover {
-
font-size: 2.25em;
+
}
}
-
h2,h3,h4 {
+
#wrapper {
-
color: #2C2B2B;
+
overflow: hidden;
-
margin-bottom: 1em;
+
background: #5C5B5B;
}
}
-
h3 {
+
.container {
-
font-size: 1.75em;
+
width: 1200px;
 +
margin: 0px auto;
}
}
-
h4 {
+
/* Header */
-
font-size: 1.5em;
+
-
}
+
-
img.alignleft {
+
#header-wrapper {
-
margin: 5px 20px 20px 0;
+
overflow: hidden;
-
float: left;
+
height: 600px;
}
}
-
img.aligntop {
+
#header {
-
margin: 5px 0 20px 0;
+
width: 960px;
 +
height: 200px;
 +
margin: 0 auto;
 +
padding: 0px 20px;
}
}
-
img.pic {
+
/* Banner */
-
padding: 5px;
+
-
border: solid 1px #D4D4D4;
+
-
}
+
-
p {
+
#banner {
-
margin-bottom: 1.5em;
+
overflow: hidden;
 +
height: 400px;
 +
background: url(images/img04.jpg) no-repeat center bottom;
}
}
-
ul {
+
#banner .image-style {
-
margin-bottom: 1.5em;
+
border: 15px solid #F4F4F4;
}
}
-
ul h4 {
+
/* Logo */
-
margin-bottom: 0.35em;
+
-
}
+
-
.box {
+
#logo {
overflow: hidden;
overflow: hidden;
-
margin-bottom: 1em;
+
height: 250px;
}
}
-
.date {
+
#logo h1, #logo p {
-
background: #6E6E6E;
+
text-align: center;
-
padding: 5px 6px 5px 6px;
+
-
margin: 0 6px 0 0;
+
-
color: #FFFFFF;
+
-
font-size: 0.8em;
+
-
border-radius: 2px;
+
}
}
-
#content {
+
#logo h1 {
-
width: auto;
+
padding: 50px 0px 0px 0px;
-
float: center;
+
letter-spacing: -6px;
-
padding: 0;
+
text-transform: lowercase;
 +
font-size: 100px;
}
}
-
#content-box1 {
+
#logo p {
-
width: 320px;
+
margin-top: -20px;
-
float: left;
+
padding: 0px 0px 0px 5px;
 +
font-size: 20px;
 +
font-weight: 300;
 +
color: #696969;
}
}
-
#content-box2 {
+
#logo p a {
-
margin: 0 0 0 345px;
+
color: #696969;
-
width: 320px;
+
}
}
-
#footer {
+
#logo a {
-
margin: 40px 0 120px 0;
+
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;
text-align: center;
-
color: #8C8B8B;
+
font-size: 48px;
-
text-shadow: 0 1px 0 #FFFFFF;
+
}
}
-
#footer a {
+
#splash span {
-
color: #8C8B8B;
+
color: #E7E7E7;
}
}
-
#header {
+
/* Search */
-
height: 75px;
+
 
-
position: relative;
+
#search {
-
background: #6E6E6E url(images/img03.jpg) top left no-repeat;
+
float: right;
-
padding: 45px;
+
width: 280px;
-
color: #FFFFFF;
+
height: 60px;
-
width: 888px;
+
padding: 20px 0px 0px 0px;
-
border: solid 1px #7E7E7E;
+
-
border-top-left-radius: 5px;
+
-
border-top-right-radius: 5px;
+
-
overflow: hidden;
+
}
}
-
#logo {
+
#search form {
-
line-height: 160px;
+
height: 41px;
-
height: 160px;
+
margin: 0;
-
padding: 5px 0 0 0;
+
padding: 10px 0 0 20px;
-
position: absolute;
+
-
top: 0;
+
-
left: 45px;
+
}
}
-
#logo a {
+
#search fieldset {
-
text-decoration: none;
+
margin: 0;
-
color: #FFFFFF;
+
padding: 0;
-
text-shadow: 0 1px 1px #3E3E3E;
+
border: none;
}
}
-
#logo h1 {
+
#search-text {
-
font-size: 3.25em;
+
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;
}
}
-
#slogan {
+
#search-submit {
-
line-height: 160px;
+
width: 50px;
-
height: 160px;
+
height: 22px;
-
padding: 5px 0 0 0;
+
border: none;
-
position: absolute;
+
background: #E7E7E7;
-
right: 45px;
+
color: #000000;
-
top: 0;
+
}
}
-
#slogan h2 {
+
/* Menu */
-
color: #BEBEBE;
+
 
-
font-size: 1.25em;
+
#menu-wrapper {
-
text-shadow: 0 1px 1px #3E3E3E;
+
overflow: hidden;
 +
height: 52px;
 +
margin-bottom: 2em;
 +
background: #E7E7E7;
}
}
#menu {
#menu {
-
padding: 0 45px 0 45px;
+
overflow: hidden;
-
position: relative;
+
height: 52px;
-
background: #209D9D url(images/img02.gif) repeat-x top left;
+
-
margin: 0;
+
-
height: 60px;
+
-
width: 890px;
+
-
border-top: solid 1px #5AD7D7;
+
-
border-bottom: solid 1px #1C7575;
+
-
text-shadow: 0 1px 1px #007D7D;
+
}
}
#menu ul {
#menu ul {
 +
margin: 0;
 +
padding: 0px 0px 0px 0px;
list-style: none;
list-style: none;
-
padding-top: 12px;
+
line-height: normal;
-
position: relative;
+
text-align: center;
-
left: -15px;
+
}
}
-
#menu ul li {
+
#menu li {
-
padding: 5px 15px 5px 15px;
+
-
margin-right: 10px;
+
display: inline-block;
display: inline-block;
}
}
-
#menu ul li a, #menu ul li span {
+
#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;
text-decoration: none;
color: #FFFFFF;
color: #FFFFFF;
-
letter-spacing: -1px;
 
-
font-size: 1.25em;
 
}
}
-
#menu ul li span b {
+
#menu .current_page_item a {
-
display: inline-block;
+
-
border-left: 6px solid transparent;
+
-
border-right: 6px solid transparent;
+
-
border-top: 7px solid #1C7575;
+
-
margin-left: 8px;
+
-
position: relative;
+
-
top: -1px;
+
}
}
-
#menu ul li.active {
+
/* Page */
-
background: #1C7575;
+
 
-
border-top: solid 1px #1A6B6B;
+
#page {
-
border-bottom: solid 1px #5AD7D7;
+
overflow: hidden;
-
border-radius: 3px;
+
padding: 20px 20px 40px 20px;
-
padding-top: 4px;
+
-
padding-bottom: 4px;
+
}
}
 +
/* Content */
-
#menu ul li.active span b {
+
#content {
-
border-top-color: #165E5E;
+
float: center;
 +
width:1200px;
 +
padding: 0px 0px 0px 0px;
}
}
-
.dropotron {
+
.post {
-
background: rgba(32,157,157,0.9);
+
overflow: hidden;
-
border-top: solid 1px #5AD7D7;
+
-
border-bottom: solid 1px #1C7575;
+
-
text-shadow: 0 1px 1px #007D7D;
+
-
list-style: none;
+
-
margin: 0;
+
-
padding: 15px 10px 15px 10px;
+
-
min-width: 200px;
+
-
border-radius: 6px;
+
-
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
+
}
}
-
.dropotron a, .dropotron span {
+
.post .title {
-
color: #FFFFFF;
+
margin: 0px 0px 0px 0px;
-
text-decoration: none;
+
padding: 0px 0px 10px 0px;
-
letter-spacing: -1px;
+
border-bottom: 3px solid #E0E1D6;
-
display: block;
+
text-shadow: 1px 1px 0px #FFFFFF;
-
width: 100%;
+
font-size: 26px;
-
position: relative;
+
}
}
-
.dropotron span b {
+
.post .title a {
-
display: inline-block;
+
border: none;
-
border-top: 6px solid transparent;
+
color: #373737;
-
border-bottom: 6px solid transparent;
+
-
border-left: 7px solid #1C7575;
+
-
position: absolute;
+
-
right: 0px;
+
-
top: 7px;
+
}
}
-
.dropotron li:hover span b {
+
.post .meta {
-
border-left-color: #165E5E;
+
margin-bottom: 30px;
 +
padding: 0px;
 +
text-align: left;
 +
font-size: 16px;
}
}
-
.dropotron li {
+
.post .meta .date {
-
padding: 3px 10px 3px 10px;
+
float: left;
-
margin: 2px 0 2px 0;
+
-
border-radius: 3px;
+
}
}
-
.dropotron li:hover, .dropotron li.active {
+
.post .meta .posted {
-
padding-top: 2px;
+
float: right;
-
padding-bottom: 2px;
+
-
background: rgba(28,117,117,0.9);
+
-
border-top: solid 1px #1A6B6B;
+
-
border-bottom: solid 1px #5AD7D7;
+
}
}
-
.dropotron-level-1 {
+
.post .meta a {
-
border-top-left-radius: 0;
+
-
border-top-right-radius: 0;
+
}
}
-
#page {
+
.post .entry {
-
padding: 45px 45px 15px 45px;
+
padding: 0px 0px 20px 0px;
-
position: relative;
+
padding-bottom: 20px;
-
width: 890px;
+
text-align: justify;
-
margin: 0;
+
}
}
-
#page .section-list {
+
.links {
-
list-style: none;
+
padding-top: 20px;
-
padding-left: 0;
+
margin-bottom: 30px;
}
}
-
#page .section-list li {
+
.more {
-
clear: both;
+
display: block;
-
padding: 30px 0 30px 0;
+
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;
-
#page ul {
 
-
list-style: none;
 
}
}
-
#page ul li {
+
/* Sidebar */
-
border-top: dotted 1px #C4C4C4;
+
 
-
padding: 15px 0 15px 0;
+
#sidebar {
 +
float: left;
 +
width: 200px;
 +
margin: 0px;
 +
padding: 0px 0px 0px 0px;
 +
color: #F7F7F7;
}
}
-
#page ul li.first {
+
#sidebar h2 {
-
padding-top: 0;
+
margin: 0px 0px 0px 0px;
-
border-top: 0;
+
padding: 40px 0px 5px 0px;
 +
border-bottom: none;
 +
text-shadow: none;
 +
font-size: 20px;
 +
color: #56273F;
}
}
-
#page-bottom {
+
#sidebar a {
-
position: relative;
+
border: none;
-
margin: 0;
+
-
background: #6E6E6E url(images/img03.jpg) top left no-repeat;
+
-
border: solid 1px #7E7E7E;
+
-
width: 888px;
+
-
padding: 45px 45px 0 45px;
+
-
color: #DCDCDC;
+
-
border-bottom-left-radius: 5px;
+
-
border-bottom-right-radius: 5px;
+
-
text-shadow: 0 1px 1px #444444;
+
}
}
-
#page-bottom a {
+
#sidebar a:hover {
-
color: #F5F5F5;
+
text-decoration: underline;
}
}
-
#page-bottom h2, #page-bottom h3, #page-bottom h4 {
+
/* Calendar */
-
color: #FFFFFF;
+
 
 +
#calendar {
}
}
-
#page-bottom ul {
+
#calendar_wrap {
-
list-style: none;
+
padding: 20px;
}
}
-
#page-bottom ul li {
+
#calendar table {
-
border-top: dotted 1px #8F8F8F;
+
width: 100%;
-
padding: 15px 0 15px 0;
+
}
}
-
#page-bottom ul li.first {
+
#calendar tbody td {
-
padding-top: 0;
+
text-align: center;
-
border-top: 0;
+
}
}
-
#page-bottom-content {
+
#calendar #next {
-
width: 665px;
+
text-align: right;
-
float: left;
+
}
}
-
#page-bottom-sidebar {
+
/* Three Column Footer Content */
-
width: 200px;
+
 
-
margin: 0 0 0 690px;
+
#footer-bg {
 +
overflow: hidden;
 +
padding: 20px 20px;
 +
background: #F7F7F7;
 +
border-top: 10px solid #E7E7E7;
 +
        margin
}
}
-
#search input.form-submit {
+
#footer-content {
-
margin-left: 1em;
+
}
 +
#footer-content h2 {
 +
float: justify;
 +
      margin-right: 3em;
 +
padding: 20px 20px 10px 0px;
 +
border-bottom: 3px solid #DD6FFF;
 +
font-size: 22px;
color: #FFFFFF;
color: #FFFFFF;
-
padding: 10px;
+
 
-
background: #2FACAC;
+
}
-
border: 0;
+
#column1 {
 +
float: left;
 +
width: 384px;
 +
margin-right: 15px;
 +
margin-left: 12px;
}
}
-
#search input.form-text {
+
#column2 {
-
border: solid 1px #8F8F8F;
+
margin-top: -17px;
-
padding: 10px;
+
float: left;
 +
width: 384px;
}
}
-
#sidebar {
+
#column3 {
-
width: 200px;
+
float: left;
-
padding: 0;
+
width: 384px;
-
margin: 0 0 0 690px;
+
        margin-left: 15px;
}
}
 +
/* Footer */
-
#slider {
+
#footer {
-
position: relative;
+
height: 100px;
-
margin: 45px 45px 0px 45px;
+
margin: 0 auto;
-
width: 890px;
+
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;
-
#slider .viewer {
 
-
width: 890px;
 
-
height: 250px;
 
-
border: solid 1px #D4D4D4;
 
-
border-radius: 3px;
 
}
}
-
#slider .slide {
+
#footer a {
-
width: 890px;
+
text-decoration: underline;
-
height: 250px;
+
color: #909090;
-
padding: 10px;
+
}
}
-
#slider .indicator {
+
#footer a:hover {
-
position: relative;
+
text-decoration: none;
-
z-index: 1;
+
color: #DD6FFF;
-
text-align: center;
+
-
margin: 20px 0 0 0;
+
}
}
-
#slider .indicator span {
+
.box1 {
-
display: inline-block;
+
overflow: hidden;
-
text-indent: -9999em;
+
height: 300px;
-
width: 12px;
+
background: #F7F7F7;
-
height: 12px;
+
-
background: #E3DFDF;
+
-
border-radius: 6px;
+
-
margin: 0 2px 0 2px;
+
}
}
-
#slider .indicator span.active {
+
.list-style1 {
-
background: #6E6E6E;
+
margin: 0px;
 +
padding: 0px;
 +
list-style: none;
}
}
-
#wrapper {
+
.list-style1 li {
-
position: relative;
+
padding: 7px 0px 7px 0px;
-
width: 980px;
+
border-top: 1px dashed #E7E2DC;
-
margin: 75px auto 0 auto;
+
-
background: #FFFFFF;
+
-
border-radius: 6px;
+
-
box-shadow: 0px 5px 20px 2px rgba(0,0,0,0.1);
+
}
}
 +
.list-style1 .first {
 +
padding-top: 0px;
 +
border-top: none;
 +
}
-
</style>
+
.list-style2 {
 +
margin: 0px;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
.list-style2 li {
 +
padding: 7px 0px 7px 0px;
 +
}
-
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
+
 
-
<script type="text/javascript" src="jquery.dropotron-1.0.js"></script>
+
.list-style2 a {
-
<script type="text/javascript" src="jquery.slidertron-1.1.js"></script>
+
color: #000000;
-
<script type="text/javascript">
+
 
-
$(function() {
+
}
-
$('#menu > ul').dropotron({
+
 
-
mode: 'fade',
+
.list-style2 a:hover {
-
globalOffsetY: 11,
+
text-decoration: underline;
-
offsetY: -15
+
}
-
});
+
 
-
$('#slider').slidertron({
+
.list-style2 .first {
-
viewerSelector: '.viewer',
+
padding-top: 0px;
-
indicatorSelector: '.indicator span',
+
border-top: none;
-
reelSelector: '.reel',
+
background: none;
-
slidesSelector: '.slide',
+
}
-
speed: 'slow',
+
 
-
advanceDelay: 4000
+
/* Banner */
-
});
+
 
-
});
+
 
-
</script>
+
</style>
</head>
</head>
<body>
<body>
<div id="wrapper">
<div id="wrapper">
-
<div id="header">
+
<div id="logo" class="container">
-
<div id="logo">
+
<h1><a href="#">IGEM </a></h1>
-
<h1><a href="#">Big Business 2.0</a></h1>
+
<p>This is a test</p>
-
</div>
+
-
<div id="slogan">
+
-
<h2>Template design by Free CSS Templates</h2>
+
-
</div>
+
</div>
</div>
-
<div id="menu">
+
<div id="menu-wrapper">
-
<ul>
+
<div id="menu" class="container">
-
<li class="first">
+
<ul>
-
<span class="opener">Services<b></b></span>
+
<li class="current_page_item"><a href="#">Homepage</a></li>
-
<ul>
+
<li><a href="#">Services</a></li>
-
<li><a href="#">Lorem Ipsum</a></li>
+
<li><a href="#">Blog</a></li>
-
<li><a href="#">Consequat Dolor</a></li>
+
<li><a href="#">Photos</a></li>
-
<li><a href="#">Magna Feugiat</a></li>
+
<li><a href="#">About Us</a></li>
-
<li>
+
<li><a href="#">Links</a></li>
-
<span>Sed Tempus<b></b></span>
+
<li><a href="#">Contact Us</a></li>
-
<ul>
+
</ul>
-
<li><a href="#">Lorem Ipsum</a></li>
+
-
<li><a href="#">Consequat Dolor</a></li>
+
-
<li><a href="#">Magna Feugiat</a></li>
+
-
<li><a href="#">Sed Tempus</a></li>
+
-
<li><a href="#">Etiam Nullam</a></li>
+
-
<li><a href="#">Amet Phasellus</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">Etiam Nullam</a></li>
+
-
<li><a href="#">Amet Phasellus</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">Products</a></li>
+
-
<li><a href="#">Clients</a></li>
+
-
<li>
+
-
<span class="opener">Support<b></b></span>
+
-
<ul>
+
-
<li><a href="#">Lorem Ipsum</a></li>
+
-
<li><a href="#">Consequat Dolor</a></li>
+
-
<li><a href="#">Magna Feugiat</a></li>
+
-
<li>
+
-
<span>Sed Tempus<b></b></span>
+
-
<ul>
+
-
<li><a href="#">Lorem Ipsum</a></li>
+
-
<li><a href="#">Consequat Dolor</a></li>
+
-
<li><a href="#">Magna Feugiat</a></li>
+
-
<li><a href="#">Sed Tempus</a></li>
+
-
<li><a href="#">Etiam Nullam</a></li>
+
-
<li><a href="#">Amet Phasellus</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">Etiam Nullam</a></li>
+
-
<li><a href="#">Amet Phasellus</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">About</a></li>
+
-
<li class="last"><a href="#">Contact</a></li>
+
-
</ul>
+
-
<br class="clearfix" />
+
-
</div>
+
-
<div id="slider">
+
-
<div class="viewer">
+
-
<div class="reel">
+
-
<div class="slide">
+
-
<img src="images/slide01.jpg" alt="" />
+
-
</div>
+
-
<div class="slide">
+
-
<img src="images/slide02.jpg" alt="" />
+
-
</div>
+
-
<div class="slide">
+
-
<img src="images/slide03.jpg" alt="" />
+
-
</div>
+
-
<div class="slide">
+
-
<img src="images/slide04.jpg" alt="" />
+
-
</div>
+
-
<div class="slide">
+
-
<img src="images/slide05.jpg" alt="" />
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div class="indicator">
+
-
<span>1</span>
+
-
<span>2</span>
+
-
<span>3</span>
+
-
<span>4</span>
+
-
<span>5</span>
+
</div>
</div>
</div>
</div>
-
<div id="page">
+
<div id="page" class="container">
<div id="content">
<div id="content">
-
<div class="box">
+
<div class="post">
-
<h2>Welcome to Big Business 2.0</h2>
+
<h2 class="title"><a href="#">Information Body</a></h2>
-
<p>
+
<div class="entry">
-
This is <strong>Big Business 2.0</strong>, a free and fully standards-compliant CSS website template by <a href="http://www.freecsstemplates.org">FCT</a>. The pictures in this template are from <a href="http://fotogrph.com/">Fotogrph</a>. This free CSS template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative 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 all the links in the footer intact. Aside from that, have fun with it :)
+
<p>This is <strong>Glissade </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org">FCT</a>.
-
</p>
+
 
-
</div>
+
  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 class="box" id="content-box1">
+
 
-
<h3>Mauris justo</h3>
+
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  
-
<ul class="section-list">
+
 
-
<li class="first">
+
that, have fun with it :) </p>
-
<img class="pic alignleft" src="images/pic01.jpg" width="70" height="70" alt="" />
+
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae
-
<span>Condimentum et porttitor tristique nec aliquet magnis pretium quam nibh.</span>
+
 
-
</li>
+
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
-
<li>
+
 
-
<img class="pic alignleft" src="images/pic02.jpg" width="70" height="70" alt="" />
+
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,
-
<span>Posuere elementum sapien justo tortor nulla fringilla suspendisse nascetur.</span>
+
 
-
</li>
+
est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante
-
<li class="last">
+
 
-
<img class="pic alignleft" src="images/pic03.jpg" width="70" height="70" alt="" />
+
ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p>
-
<span>Ipsum quis vestibulum feugiat congue nunc laoreet volutpat lorem ipsum sociis.</span>
+
</div>
-
</li>
+
-
</ul>
+
-
</div>
+
-
<div class="box" id="content-box2">
+
-
<h3>Magnis hendrerit erat</h3>
+
-
<p>
+
-
Neque neque ornare penatibus tristique fusce turpis. Purus sagittis euismod at ornare suscipit tempus.
+
-
</p>
+
-
<ul class="list">
+
-
<li class="first"><a href="#">Ipsum phasellus ullamcorper</a></li>
+
-
<li><a href="#">Mollis mattis tempus amet</a></li>
+
-
<li><a href="#">Ipsum aliquet dignissim vitae</a></li>
+
-
<li><a href="#">Orci metus curae sed mollis</a></li>
+
-
<li class="last"><a href="#">Tristique amet venenatis</a></li>
+
-
</ul>
+
</div>
</div>
-
<br class="clearfix" />
+
<div style="clear: both;">&nbsp;</div>
</div>
</div>
 +
<!-- end #content -->
<div id="sidebar">
<div id="sidebar">
-
<div class="box">
+
<div>
-
<h3>Cursus magnis</h3>
+
<h2>Nulla luctus eleifend</h2>
-
<ul class="list">
+
<ul class="list-style2">
-
<li class="first"><a href="#">Adipiscing tincidunt</a></li>
+
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
-
<li><a href="#">Euismod elit sollicitudin</a></li>
+
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
-
<li><a href="#">Dolor magnis et lacinia</a></li>
+
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
-
<li><a href="#">Mauris ornare aenean</a></li>
+
<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
-
<li class="last"><a href="#">Ante semper fringilla</a></li>
+
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
 +
<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
</ul>
</ul>
-
</div>
 
-
<div class="box">
 
-
<h3>Morbi at varius</h3>
 
-
<div class="date-list">
 
-
<ul class="list date-list">
 
-
<li class="first"><span class="date">2/08</span> <a href="#">Quam sed tempus</a></li>
 
-
<li><span class="date">2/05</span> <a href="#">Lorem et vestibulum</a></li>
 
-
<li><span class="date">2/01</span> <a href="#">Risus aenean tellus</a></li>
 
-
<li class="last"><span class="date">1/31</span> <a href="#">Tristique et primis</a></li>
 
-
</ul>
 
-
</div>
 
</div>
</div>
</div>
</div>
-
<br class="clearfix" />
+
<!-- end #sidebar -->
 +
<div style="clear: both;">&nbsp;</div>
</div>
</div>
-
<div id="page-bottom">
+
<!-- end #page -->
-
<div id="page-bottom-content">
+
-
<h3>Magnis hendrerit erat</h3>
+
</div>
-
<p>
+
<div id="footer-bg">
-
Euismod sodales sociis hendrerit pulvinar acursus urna. Consectetur egestas sodales at ornare laoreet turpis. Lorem id sapien ridiculus sagittis imperdiet urna suspendisse. Posuere arcu parturient quam risus. Aliquam nullam magnis integer gravida vulputate felis. Consectetur montes sollicitudin dictum. Auctor sociis hendrerit pulvinar acursus urna lorem ipsum dolor vivamus pulvinar libero. Massa egestas cubilia lacus augue mattis consectetur.
+
<div id="footer-content" class="container">
-
</p>
+
<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>
-
<div id="page-bottom-sidebar">
+
<div id="column3">
-
<h3>Sed interdum</h3>
+
<h2>Recommended Links</h2>
-
<ul class="list">
+
<ul class="list-style2">
-
<li class="first"><a href="#">Suspendisse ultricies</a></li>
+
<li class="first"><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
-
<li><a href="#">Tortor mollis enim</a></li>
+
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
-
<li class="last"><a href="#">Lorem enim tempor</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>
</ul>
</div>
</div>
-
<br class="clearfix" />
 
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer">
-
Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org">FCT</a>. Photos by <a href="http://fotogrph.com/">Fotogrph</a>.
+
</div>
</div>
 +
<!-- end #footer -->
</body>
</body>
</html>
</html>

Revision as of 18:13, 21 April 2013

Glissade by FCT

Information Body

This is Glissade , a free, fully standards-compliant CSS template designed by FCT. The photos in this template are from Fotogrph. This free template is released under a Creative Commons Attributions 3.0 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 that, have fun with it :)

Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit 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, est. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.