VirginiaTemplate2

From 2013.igem.org

(Difference between revisions)
(Created page with "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates --> <html xmlns="http://www.w3.org...")
Line 16: Line 16:
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<![endif]-->
 +
 +
<style media="screen" type="text/css">
 +
/*hide default igem banner and reformat style into blank slate*/
 +
 +
#globalWrapper {width: 100%;}
 +
 +
#top-section {width: 100%; height:30px; border:none;}
 +
 +
#p-logo {display:none;}
 +
 +
#search-controls {display:none;}
 +
 +
#menubar a {color:#000000;}
 +
 +
#menubar a:hover{text-decoration:none; color:#52749C;}
 +
 +
.left-menu {background-color:#FFFFFF; margin:0px 0px 0px 0px; padding:0;}
 +
 +
.left-menu ul {background-color:#FFFFFF; margin:0; padding:0;}
 +
 +
.right-menu ul li a {background-color:#FFFFFF;}
 +
 +
.printfooter {display:none;}
 +
 +
#footer-box {border:none;}
 +
 +
#catlinks {display:none;}
 +
 +
.firstHeading {display:none;}
 +
 +
#content {width: 100%; border:none;}
 +
 +
#bodyContent {border:none;}
 +
 +
html, body
 +
{
 +
height: 100%;
 +
}
 +
 +
body
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
background: #088573;
 +
font-family: 'Open Sans', sans-serif;
 +
font-size: 13px;
 +
color: #4F4F4F;
 +
}
 +
 +
h1, h2, h3
 +
{
 +
margin: 0;
 +
padding: 0;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
color: #098A76;
 +
}
 +
 +
p, ol, ul
 +
{
 +
margin-top: 0px;
 +
}
 +
 +
ol, ul
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
list-style:  none
 +
}
 +
 +
p
 +
{
 +
line-height: 180%;
 +
}
 +
 +
strong
 +
{
 +
}
 +
 +
a
 +
{
 +
color: #088674;
 +
}
 +
 +
a:hover
 +
{
 +
text-decoration: none;
 +
}
 +
 +
a img
 +
{
 +
border: none;
 +
}
 +
 +
img.border
 +
{
 +
}
 +
 +
img.alignleft
 +
{
 +
float: left;
 +
}
 +
 +
img.alignright
 +
{
 +
float: right;
 +
}
 +
 +
img.aligncenter
 +
{
 +
margin: 0px auto;
 +
}
 +
 +
hr
 +
{
 +
display: none;
 +
}
 +
 +
ul.style1
 +
{
 +
}
 +
 +
ul.style1 li
 +
{
 +
padding: 1.50em 0em 1.90em 0em;
 +
border-top: 1px solid #e8e8e8;
 +
}
 +
 +
ul.style1 a
 +
{
 +
text-decoration: none;
 +
color: #6e6d6d;
 +
}
 +
 +
ul.style1 a:hover
 +
{
 +
text-decoration: underline;
 +
}
 +
 +
ul.style1 .posted
 +
{
 +
font-size: 0.90em;
 +
color: #b6b6b6;
 +
}
 +
 +
ul.style1 .first
 +
{
 +
padding-top: 0em;
 +
border-top: none;
 +
}
 +
 +
/** WRAPPER */
 +
 +
#wrapper
 +
{
 +
background: #FFFFFF;
 +
}
 +
 +
.container
 +
{
 +
width: 100%;
 +
margin: 0px auto;
 +
}
 +
 +
.clearfix
 +
{
 +
clear: both;
 +
}
 +
 +
/** HEADER */
 +
 +
#header-wrapper
 +
{
 +
overflow: hidden;
 +
height: 150px;
 +
background: #088573;
 +
border-bottom: 1px solid #3B3B3A;
 +
}
 +
 +
#header
 +
{
 +
overflow: hidden;
 +
}
 +
 +
/** LOGO */
 +
 +
#logo
 +
{
 +
position: relative;
 +
float: left;
 +
width: 380px;
 +
height: 100px;
 +
}
 +
 +
#logo h1, #logo p
 +
{
 +
margin: 0px;
 +
line-height: normal;
 +
}
 +
 +
#logo h1 a
 +
{
 +
display: block;
 +
position: absolute;
 +
top: 0px;
 +
left: 0px;
 +
width: 100%;
 +
height: 100%;
 +
line-height: 150px;
 +
color: #FFFFFF;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
font-size: 1.50em;
 +
}
 +
 +
/** MENU */
 +
 +
#menu
 +
{
 +
float: right;
 +
padding: 40px 0px 0px 0px;
 +
height: 99px;
 +
}
 +
 +
#menu ul
 +
{
 +
float: right;
 +
margin: 0px;
 +
padding: 0px;
 +
background: #0DA993;
 +
list-style: none;
 +
line-height: normal;
 +
}
 +
 +
#menu li
 +
{
 +
float: left;
 +
padding: 2em 2em 2em 2em;
 +
}
 +
 +
#menu a
 +
{
 +
display: block;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
font-size: 1.10em;
 +
color: #FFFFFF;
 +
}
 +
 +
#menu a:hover
 +
{
 +
text-decoration: underline;
 +
}
 +
 +
#menu .active a
 +
{
 +
color: #088674;
 +
}
 +
 +
#menu .first
 +
{
 +
background: #FFFFFF;
 +
border-left: none;
 +
box-shadow: none;
 +
color: #088674;
 +
}
 +
 +
/** PAGE */
 +
 +
#page
 +
{
 +
overflow: hidden;
 +
padding: 0px;
 +
}
 +
 +
#page h2
 +
{
 +
padding: 0px 0px 30px 0px;
 +
letter-spacing: -1px;
 +
font-family: 'Open Sans', sans-serif;
 +
font-weight: 400;
 +
font-size: 2em;
 +
color: #098A76;
 +
}
 +
 +
/** CONTENT */
 +
 +
#content
 +
{
 +
float: left;
 +
width: 650px;
 +
}
 +
 +
#content h2
 +
{
 +
padding: 10px 0px 20px 0px;
 +
font-size: 2.50em;
 +
}
 +
 +
#content img
 +
{
 +
float: left;
 +
margin-right: 40px;
 +
}
 +
 +
/** SIDEBAR */
 +
 +
#sidebar
 +
{
 +
float: right;
 +
width: 300px;
 +
}
 +
 +
#sidebar h2
 +
{
 +
padding: 10px 0px 20px 0px;
 +
}
 +
 +
/* Footer */
 +
 +
#footer
 +
{
 +
overflow: hidden;
 +
padding: 3em 0em;
 +
}
 +
 +
#footer p
 +
{
 +
text-align: center;
 +
color: #FFFFFF;
 +
}
 +
 +
#footer a
 +
{
 +
color: #FFFFFF;
 +
}
 +
 +
/** Banner */
 +
 +
#banner
 +
{
 +
overflow: hidden;
 +
padding: 50px 0px;
 +
background: #E2E0DE;
 +
border-bottom: 1px solid #D8D8D8;
 +
}
 +
 +
/** Slider */
 +
 +
#slider
 +
{
 +
overflow: hidden;
 +
margin: 0 auto;
 +
width: 1000px;
 +
position: relative;
 +
}
 +
 +
#slider .button
 +
{
 +
display: inline-block;
 +
background: #0074C6;
 +
color: #ffffff;
 +
text-align: center;
 +
line-height: 50px;
 +
height: 50px;
 +
text-decoration: none;
 +
outline: 0;
 +
border-radius: 8px;
 +
font-size: 1.25em;
 +
border-bottom: solid 2px #0054A6;
 +
text-shadow: 0 1px 1px #003A6C;
 +
}
 +
 +
#slider .button:hover
 +
{
 +
background: #2094E6;
 +
}
 +
 +
#slider .viewer
 +
{
 +
width: 1000px;
 +
height: 500px;
 +
margin: 0 auto;
 +
overflow: hidden;
 +
}
 +
 +
#slider .viewer .reel
 +
{
 +
display: none;
 +
}
 +
 +
#slider .viewer .reel .slide
 +
{
 +
position: relative;
 +
width: 1000px;
 +
height: 500px;
 +
}
 +
 +
#slider .viewer .reel h2
 +
{
 +
position: absolute;
 +
top: 230px;
 +
left: 0;
 +
padding: 0px 30px;
 +
line-height: 80px;
 +
background: #111111;
 +
text-align: center;
 +
opacity: 0.75;
 +
font-weight: normal;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
color: #ffffff;
 +
font-size: 4.50em;
 +
}
 +
 +
#slider .viewer .reel p
 +
{
 +
position: absolute;
 +
top: 310px;
 +
left: 0;
 +
display: block;
 +
padding: 5px 35px;
 +
background: #0074C6;
 +
text-align: center;
 +
opacity: 0.75;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
font-weight: normal;
 +
color: #ffffff;
 +
font-size: 2.00em;
 +
}
 +
 +
#slider .indicator
 +
{
 +
margin: 30px auto 0 auto;
 +
}
 +
 +
#slider .indicator ul
 +
{
 +
list-style: none;
 +
padding: 0;
 +
margin: 0;
 +
text-align: center;
 +
}
 +
 +
#slider .indicator ul li
 +
{
 +
display: inline-block;
 +
width: 12px;
 +
height: 12px;
 +
text-indent: -9999em;
 +
background: #c8c8c8;
 +
margin: 0 2px 0 2px;
 +
border-radius: 8px;
 +
border-bottom: solid 1px #ffffff;
 +
border-top: solid 1px #909090;
 +
}
 +
 +
#slider .indicator ul li.active
 +
{
 +
background: #505050;
 +
border-top: solid 1px #505050;
 +
}
 +
 +
#featured
 +
{
 +
overflow: hidden;
 +
padding: 50px 0px;
 +
border-bottom: 1px solid #D8D8D8;
 +
}
 +
 +
#featured #fbox1
 +
{
 +
float: left;
 +
width: 235px;
 +
margin-right: 20px;
 +
}
 +
 +
#featured #fbox2
 +
{
 +
float: left;
 +
width: 235px;
 +
margin-right: 20px;
 +
}
 +
 +
#featured #fbox3
 +
{
 +
float: left;
 +
width: 235px;
 +
}
 +
 +
#featured #fbox4
 +
{
 +
float: right;
 +
width: 235px;
 +
}
 +
 +
#featured img
 +
{
 +
}
 +
 +
#featured p
 +
{
 +
text-align: center;
 +
}
 +
 +
#featured h2
 +
{
 +
padding: 20px 0px 20px 0px;
 +
text-align: center;
 +
text-transform: uppercase;
 +
font-size: 1.00em;
 +
font-weight: 700;
 +
font-family: 'Open Sans', sans-serif;
 +
color: #098A76;
 +
}
 +
 +
#featured .title
 +
{
 +
margin-bottom: 40px;
 +
border-top: 1px solid #D8D8D8;
 +
border-bottom: 1px solid #D8D8D8;
 +
font-family: 'Open Sans', sans-serif;
 +
font-size: 2.50em;
 +
color: #098A76 !important;
 +
}
 +
 +
 +
</style>
 +
</head>
</head>
<body>
<body>
Line 21: Line 551:
<div id="header" class="container">
<div id="header" class="container">
<div id="logo">
<div id="logo">
-
<h1><a href="#">Refreshen</a></h1>
+
<h1><a href="#">VGEM</a></h1>
</div>
</div>
<div id="menu">
<div id="menu">
<ul>
<ul>
-
<li class="first active"><a href="#" accesskey="1" title="">Homepage</a></li>
+
<li class="first active"><a href="#" accesskey="1" title="">Home</a></li>
-
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
+
<li><a href="#" accesskey="2" title="">Project</a></li>
-
<li><a href="#" accesskey="3" title="">About Us</a></li>
+
<li><a href="#" accesskey="3" title="">Notebook</a></li>
-
<li><a href="#" accesskey="4" title="">Careers</a></li>
+
<li><a href="#" accesskey="4" title="">Human Practices</a></li>
-
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
+
<li><a href="#" accesskey="5" title="">Team</a></li>
</ul>
</ul>
</div>
</div>
Line 87: Line 617:
<div id="featured" class="container">
<div id="featured" class="container">
<h2 class="title">Praesent mattis condimentum</h2>
<h2 class="title">Praesent mattis condimentum</h2>
-
<div id="fbox1"> <img src="images/pic04.jpg" width="235" height="235" alt="" />
+
<div id="fbox1"> <img src="https://www.dropbox.com/s/z7pe5qmsl83jtz9/project%20thumb.jpg" width="235" height="235" alt="" />
-
<h2>Fusce ultrices fringilla</h2>
+
<h2>Project</h2>
-
<p>In posuere eleifend quisque semper augue mattis wisi maecenas ligula.</p>
+
<p>Learn more about the exciting developments of minicells as a safe and effective chassis.</p>
</div>
</div>
-
<div id="fbox2"> <img src="images/pic05.jpg" width="235" height="235" alt="" />
+
<div id="fbox2"> <img src="https://www.dropbox.com/s/pa7lbkgbjk04284/notebook%20thumb.jpg" width="235" height="235" alt="" />
-
<h2>Fusce ultrices fringilla</h2>
+
<h2>Notebook</h2>
-
<p>Maecenas ligula. Pellentesque viverra vulputate Aliquam erat volutpat.</p>
+
<p>See how we spent our summer of science.</p>
</div>
</div>
-
<div id="fbox3"> <img src="images/pic06.jpg" width="235" height="235" alt="" />
+
<div id="fbox3"> <img src="https://www.dropbox.com/s/wfunymh3dpoy4hb/humanpracticesthumb.jpg" width="235" height="235" alt="" />
-
<h2>Fusce ultrices fringilla</h2>
+
<h2>Human Practices</h2>
-
<p>Donec fermentum nibh in augue a lacus at urna congue rutrum.</p>
+
<p>Discover the local and global impact our iGEM team has made.</p>
</div>
</div>
-
<div id="fbox4"> <img src="images/pic07.jpg" width="235" height="235" alt="" />
+
<div id="fbox4"> <img src="https://www.dropbox.com/s/v6k92hk6fcgr7du/team%20thumb%20photo.jpg" width="235" height="235" alt="" />
-
<h2>Fusce ultrices fringilla</h2>
+
<h2>Team</h2>
-
<p>Suspendisse sit amet tellus eros bibendum volutpat nulla.</p>
+
<p>Meet the brains and brawn behind the project.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer">
-
<p>Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>. Photos by <a href="http://fotogrph.com/">Fotogrph</a>.</p>
+
<p>E.M.M.</p>
 +
<!--Copyright (c) 2012 Sitename.com. All rights reserved. Design by FCT.-->
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 19:47, 18 June 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nulla luctus eleifend

This is Refreshen, a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. 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 :)

Retrieved from "http://2013.igem.org/VirginiaTemplate2"