Team:SYSU-Software

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
-
<head>
+
<head> <style>
 +
  /* Getting the new tags to behave */
 +
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
 +
mark, rp, rt, ruby, summary, time{ display: inline }
 +
 
 +
/* Global properties ======================================================== */
 +
body {
 +
background:#CCC;
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size:100%;
 +
line-height:1.125em;
 +
color:#24242424;
 +
}
 +
html {width:975px;
 +
margin-left:187px;
 +
}
 +
html, body { height:100%;}
 +
 
 +
 
 +
 
 +
/* Global Structure ============================================================= */
 +
.container {
 +
margin: 0 auto;
 +
position: relative;
 +
width: 975px;
 +
font-size:.8125em;
 +
}
 +
 
 +
/* Header */
 +
header{
 +
 +
height:50px;
 +
overflow:hidden;
 +
background:#FFFFFF/*repeat-x;*/
 +
border-radius: 50px;
 +
}
 +
 +
/*Gallery*/
 +
#gallery {
 +
height:250px;
 +
overflow:hidden;
 +
background:url(../images/gallerry-bg.gif) 0 0 ;/*repeat-x;*/
 +
}
 +
 +
/* Content */
 +
#content {
 +
float: left;
 +
width: 572px;
 +
}
 +
 +
/* Sidebar */
 +
aside{
 +
float: left;
 +
width: 302px;
 +
margin-right:52px;
 +
}
 +
 +
/* Footer */
 +
footer{
 +
padding:20px 0 22px 0;
 +
border-top:5px solid #eee;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* Left & Right alignment */
 +
 
 +
.fleft { float:left;}
 +
.fright { float:right;}
 +
.clear { clear:both;}
 +
 
 +
.col-1, .col-2, .col-3 { float:left;}
 +
 
 +
.alignright { text-align:right;}
 +
.aligncenter { text-align:center;}
 +
 
 +
.wrapper {
 +
width:100%;
 +
overflow:hidden;
 +
}
 +
 
 +
/* The inside class provides consistent padding. To be used often! */
 +
.inside{ padding: 32px 37px 50px 37px; }
 +
 
 +
 
 +
/*----- form defaults -----*/
 +
input, select, textarea {
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size:1em;
 +
vertical-align:middle;
 +
font-weight:normal;
 +
}
 +
 
 +
/*----- other -----*/
 +
figure { margin-bottom:18px;}
 +
 
 +
.img-indent {
 +
margin:0 20px 0 0;
 +
float:left;
 +
}
 +
.img-box {
 +
width:100%;
 +
overflow:hidden;
 +
padding-bottom:15px;
 +
}
 +
.img-box figure {
 +
float:left;
 +
margin:0 20px 0 0;
 +
padding:0;
 +
}
 +
 
 +
.extra-wrap {
 +
overflow:hidden;
 +
}
 +
 
 +
p {margin-bottom:18px;}
 +
.p1 { margin-bottom:9px;}
 +
.p2 { margin-bottom:18px;}
 +
.p3 { margin-bottom:27px;
 +
}
 +
 
 +
 
 +
/*----- txt, links, lines, titles -----*/
 +
a {
 +
color:#f27f02;
 +
outline:none;
 +
}
 +
a:hover{
 +
text-decoration:none;
 +
font-size: 12%;
 +
}
 +
 
 +
h1 {
 +
font-size:34px;
 +
line-height:1.2em;
 +
color:#fff;
 +
font-weight:normal;
 +
/*background:url(../images/logo.jpg) no-repeat 0 0;*/
 +
padding:6px 0 8px 69px;
 +
position:absolute;
 +
left:48px;
 +
top:5px;
 +
width: 80px;
 +
height: 21px;
 +
}
 +
h1 a {
 +
color:#333;
 +
text-decoration:none;
 +
}
 +
h2 {
 +
font-size:20px;
 +
line-height:1.2em;
 +
font-weight:normal;
 +
color:#212222;
 +
margin-bottom:22px;
 +
}
 +
h2 span {
 +
color:#8a8a8a;
 +
}
 +
h3 {
 +
font-size:1em;
 +
margin-bottom:6px;
 +
}
 +
h3 a { color:#242424; }
 +
h3 a:hover {
 +
text-shadow: 1px 1px 1px #888;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*==================boxes====================*/
 +
.main-box {
 +
border-top:5px solid #eaeaea;
 +
background:#fff;
 +
width:100%;
 +
}
 +
 
 +
 
 +
.contacts {
 +
padding-bottom:20px;
 +
}
 +
.contacts li {
 +
width:100%;
 +
overflow:hidden;
 +
}
 +
.contacts li strong {
 +
float:left;
 +
width:95px;
 +
}
 +
 
 +
 
 +
.list1 {
 +
margin-left:12px;
 +
padding-bottom:18px;
 +
}
 +
.list1 li {
 +
background:url(../images/arrow1.gif) no-repeat 0 6px;
 +
padding:0 0 0 12px;
 +
}
 +
 
 +
 
 +
 
 +
/*===== header =====*/
 +
header nav {
 +
float:right;
 +
}
 +
header nav ul li {
 +
float:left;
 +
}
 +
header nav ul li a {
 +
border-radius: 20px;
 +
font-size:22px;
 +
color:#000;
 +
height:67px;
 +
line-height:67px;
 +
text-decoration:none;
 +
width:101px;
 +
text-align:center;
 +
float:left;
 +
/*background:#7cbc19;
 +
background-image: gradient(top, #383282, #484095); /* FF3.6 */
 +
background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
 +
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
 +
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */*/
 +
background:#7cbc19;
 +
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
 +
}
 +
header nav ul li a.current, header nav ul li a:hover {
 +
padding-bottom:5px;
 +
}
 +
 +
header nav ul li:nth-of-type(2) a {
 +
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
 +
background:#FFFFFF;
 +
}
 +
header nav ul li:nth-of-type(3) a {
 +
background:#7cbc19;
 +
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
 +
}
 +
header nav ul li:nth-of-type(4) a {
 +
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
 +
background:#FFFFFF;
 +
}
 +
header nav ul li:nth-of-type(5) a {
 +
background:#7cbc19;
 +
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
 +
}
 +
header nav ul li:nth-of-type(6) a {
 +
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
 +
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
 +
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
 +
background:#FFFFFF;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*===== gallery =====*/
 +
.roundabout-holder  {
 +
width:650px;
 +
height:250px;
 +
margin:0 auto;
 +
}
 +
.roundabout-moveable-item {
 +
  width: 446px;
 +
  height: 200px;
 +
  cursor: pointer;
 +
border:3px solid #ccc;
 +
border:3px solid rgba(0, 0, 0, 0.08);
 +
  border-radius:4px;
 +
-moz-border-radius:4px;
 +
-webkit-border-radius:4px;
 +
}
 +
.roundabout-moveable-item img{
 +
width:100%;
 +
}
 +
.roundabout-in-focus {
 +
border:3px solid rgba(0, 0, 0, 0.2);
 +
}
 +
 
 +
 
 +
/*===== content =====*/
 +
#content {
 +
 +
}
 +
#content img, aside img {
 +
border:3px solid #ebebeb;
 +
border-radius:4px;
 +
-moz-border-radius:4px;
 +
-webkit-border-radius:4px;
 +
}
 +
#content img:hover {
 +
border-color:#bbb;
 +
}
 +
 +
 
 +
/*--- news list styles ---*/
 +
.news li {
 +
overflow:hidden;
 +
position:relative;
 +
padding:0 0 26px 84px;
 +
}
 +
.news li:last-child {
 +
padding-bottom:0;
 +
}
 +
 +
.news li figure {
 +
width:59px;
 +
height:59px;
 +
background:url(../images/date-bg1.gif) no-repeat 0 0;
 +
position:absolute;
 +
left:0;
 +
top:0;
 +
text-align:center;
 +
border:3px solid #ebebeb;
 +
border-radius:4px;
 +
-moz-border-radius:4px;
 +
-webkit-border-radius:4px;
 +
font-size:10px;
 +
color:#fff;
 +
text-transform:uppercase;
 +
}
 +
.news li figure strong {
 +
display:block;
 +
font-size:30px;
 +
line-height:1.2em;
 +
margin-bottom:-7px;
 +
padding-top:4px;
 +
}
 +
 +
.news li:nth-of-type(4n+2) figure {
 +
background:url(../images/date-bg2.gif) no-repeat 0 0;
 +
}
 +
.news li:nth-of-type(4n+3) figure {
 +
background:url(../images/date-bg3.gif) no-repeat 0 0;
 +
}
 +
.news li:nth-of-type(4n+4) figure {
 +
background:url(../images/date-bg4.gif) no-repeat 0 0;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
.team-list li {
 +
width:100%;
 +
overflow:hidden;
 +
padding-bottom:43px;
 +
}
 +
.team-list li:last-child {
 +
padding-bottom:0;
 +
}
 +
.team-list li figure {
 +
float:left;
 +
margin:0 20px 0 0;
 +
padding:0;
 +
}
 +
 
 +
 
 +
/*--- loopedSlider styles ---*/
 +
/*
 +
* Required
 +
*/
 +
#loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
 +
#loopedSlider .slides { position:absolute; top:0; left:0; }
 +
#loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
 +
/*
 +
* Optional
 +
*/
 +
#loopedSlider { width:295px; position:relative; clear:both; }
 +
#loopedSlider .nav-controls {
 +
width:100%;
 +
overflow:hidden;
 +
padding-top:10px;
 +
}
 +
#loopedSlider li {
 +
display:inline;
 +
}
 +
#loopedSlider li a.previous {
 +
float:left;
 +
}
 +
#loopedSlider li a.next {
 +
float:right;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*===== footer =====*/
 +
footer {
 +
color:#fff;
 +
}
 +
footer .fleft {
 +
padding-left:40px;
 +
}
 +
footer .fright {
 +
padding-right:40px;
 +
}
 +
 
 +
 
 +
/*----- forms -----*/
 +
#contacts-form {
 +
clear:right;
 +
width:100%;
 +
overflow:hidden;
 +
}
 +
#contacts-form fieldset {
 +
border:none;
 +
float:left;
 +
}
 +
#contacts-form .field {
 +
clear:both;
 +
}
 +
#contacts-form label {
 +
float:left;
 +
width:110px;
 +
line-height:18px;
 +
padding-bottom:6px;
 +
font-weight:bold;
 +
}
 +
#contacts-form input {
 +
width:205px;
 +
padding:1px 0 1px 3px;
 +
background:none;
 +
border:1px solid #e5e5e5;
 +
color:#616161;
 +
float:left
 +
}
 +
#contacts-form input:invalid {
 +
border-color:red;
 +
}
 +
#contacts-form textarea {
 +
width:450px;
 +
height:215px;
 +
padding:1px 0 1px 3px;
 +
background:none;
 +
border:1px solid #e5e5e5;
 +
color:#616161;
 +
margin-bottom:12px;
 +
overflow:auto;
 +
float:left;
 +
}
 +
#contacts-form div:last-child {
 +
padding-left:110px;
 +
}
 +
 
 +
/*==========================================*/
 +
</style>
 +
 
   <title>Team:SYSU-Guang Zhou</title>
   <title>Team:SYSU-Guang Zhou</title>
   <meta charset="utf-8">
   <meta charset="utf-8">

Revision as of 16:37, 5 July 2012

<!DOCTYPE html> Team:SYSU-Guang Zhou

SYSU

Welcome to Our SYSU!

SYSU is a free web template created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also HTML5 & CSS3 valid.

This website template has several pages: Home, About us, Privacy Policy, Gallery, Contact us (note that contact us form 鈥?doesn鈥檛 work), Site Map.

This website template can be delivered in two packages - with PSD source files included and without them. If you need PSD source files, please go to the template download page at TemplateMonster to leave the e-mail address that you want the template ZIP package to be delivered to.
Copyright - Type in your name here
Website template designed by TemplateMonster.com    |    3D Models provided by Templates.com

Retrieved from "http://2012.igem.org/Team:SYSU-Software"