beer-bongs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Beer Bongs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type='text/css'>
/*-------------------------------------------------------
author: gorotron (www.gorotron.com)
version: 1.0
license: Commons Attribution 3.0 United States License
http://creativecommons.org/licenses/by/3.0/us/
Do whatever you like with this template just be
sure to leave my link at the bottom of each page.
Thanks!
-------------------------------------------------------*/
@import "dropdown.css";
* {
margin:0;
padding:0;
}
html {
text-align:center;
background:#F3F3F3;
}
body {
font:62.5% Verdana, Arial, Helvetica;
text-align:left;
color:#333;
width:75em;
margin:2em auto;
background:#FFF;
padding:1.3em;
background:#FFF url(beer-bongs-images/body_bg.gif) bottom repeat-x;
border:0.1em solid #EAEAEA;
}
p {
font-size:1.2em;
line-height:1.5em;
margin:1em 0;
}
a {
color:#004D85;
text-decoration:none;
}
p a, td a, th a {
background:url(beer-bongs-images/link_underline.gif) bottom repeat-x;
padding-bottom:0.1em;
}
ul {
list-style:none;
}
#masthead {
width:100%;
height:14em;
position:relative;
margin-bottom:0.3em;
background:url(beer-bongs-images/masthead_bg.gif) repeat-x;
line-height:14em;
}
#masthead h1 {
font-size:3em;
font-family:"trebuchet ms";
margin-left:1em;
color:#FFF;
}
#masthead h1 a {
color:#FFF;
}
#masthead sup {
font-size:0.5em;
}
#mastheadBox {
background:url(beer-bongs-images/masthead_box.gif) left center no-repeat;
z-index:11;
position:absolute;
height:8em;
top:50%;
margin-top:-5em;
right:2em;
width:43.5em;
padding:1em 1em 1em 3.5em;
}
#mastheadBox h2 {
line-height:1em;
color:#F60;
font-size:1.2em;
}
#mastheadBox p {
padding:1em 0 0;
margin:0;
}
#breadCrumbs {
clear:both;
padding:0.5em 2em;
margin-top:0.3em;
background:#EAEAEA url(beer-bongs-images/breadcrumbs_bg.gif);
}
#breadCrumbs li {
display:inline;
}
#breadCrumbs li a {
margin-right:0.5em;
padding-right:1em;
background:url(beer-bongs-images/breadcrumbs_bullet.gif) right 0.7em no-repeat;
}
#breadCrumbs li a:hover, #footer li a:hover {
text-decoration:underline;
}
/* Main Column */
#mainContent {
width:53em;
padding:2em 0 2em 2em;
float:left;
}
#mainContent h2 {
color:#F60;
font-size:1.5em;
}
#mainContent p + h2 {
margin-top:1.5em;
}
#mainContent h3 {
font-size:1.25em;
}
#mainContent blockquote {
padding:0 2em;
font-style:italic;
font-size:0.9em;
color:#444;
border-left:4px solid #F90;
}
#mainContent ul {
color:#F90;
}
#mainContent li {
background:url(beer-bongs-images/li_bullet.gif) left center no-repeat;
font-size:1.2em;
padding-left:1em;
margin:0 0 0.5em 1em;
color:#333;
}
#suckerfish {
width:100%;
height:10em;
font-family:monaco, courier;
}
/* Main Column Table */
#mainContent table {
margin-top:1.5em;
}
#mainContent thead th {
background:#EAEAEA;
}
#mainContent td {
padding:0.5em;
background:#F4F4F4;
}
#mainContent td:hover {
background:#EAEAEA;
}
#mainContent th {
padding:0.5em;
background:#F4F4F4;
color:#004D85;
}
#mainContent th strong {
color:#F60;
}
/* Form */
fieldset {
padding:1em 1em 0.5em;
border:1px solid #EAEAEA;
margin-top:2em;
background:#F7F7F7;
}
label {
display:block;
padding-bottom:0.5em;
font-weight:bold;
}
input, textarea {
border:1px solid #CCC;
padding:0.25em;
width:20em;
}
textarea {
width:28em;
height:5em;
font:1.2em Verdana, Arial, Helvetica, sans-serif;
}
input:hover, input:focus, textarea:hover, textarea:focus {
border-color:#999;
}
#submit {
color:#FFF;
font-size:1em;
font-weight:bold;
width:auto;
background:#F90 url(beer-bongs-images/nav_bg.gif) bottom repeat-x;
}
input#submit:hover {
border-color:#F60;
}
/* Side Column */
#secondaryContent {
width:16em;
padding:2em;
float:left;
}
#secondaryContent h2, #secondaryContent p {
font-size:1.2em;
}
#secondaryContent h2 {
color:#F60;
}
.secondaryContentBox {
border:1px solid #EAEAEA;
background:#F7F7F7;
padding:1em 1em 0.5em;
margin-bottom:2em;
}
.secondaryContentBox span {
color:#F60;
font-weight:bold;
}
#secondaryContent blockquote {
font-style:italic;
font-size:0.9em;
padding:0.5em 0 0 2em;
background:url(beer-bongs-images/left_quote.gif) no-repeat;
}
#secondaryContent blockquote p {
background:url(beer-bongs-images/right_quote.gif) right bottom no-repeat;
padding-bottom:1em;
}
#secondaryContent blockquote span {
margin-left:2em;
}
#secondaryContent .source {
text-align:right;
margin:-0.5em 0 2em;
font-size:1em;
}
#footer {
text-align:center;
clear:both;
padding:1em 0 0;
background:url(beer-bongs-images/footer_hr.gif) repeat-x;
}
#footer li {
display:inline;
margin:0.5em;
}
</style>
<script src="src/dropdown.js" type="text/javascript"></script>
</head>
<body>
<div id="masthead">
<h1><a href="http://www.free-css.com/">Beer Bongs!</a></h1>
<div id="mastheadBox">
<h2>User-centric ROI</h2>
<p>Objectively aggregate robust e-services for compelling scenarios. Collaboratively initiate reliable meta-services through interdependent opportunities! <a href="http://www.free-css.com/">Read more...</a></p>
</div>
</div>
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li class="menu sfHover"><a href="subpage.html">Subpage</a>
<ul>
<li><a href="http://www.free-css.com/">Entry Level</a></li>
<li><a href="http://www.free-css.com/">Business</a></li>
<li><a href="http://www.free-css.com/">Enterprise Systems</a></li>
<li><a href="http://www.free-css.com/">Limited Specials</a></li>
</ul>
</li>
<li class="menu sfHover"><a href="http://www.free-css.com/">Solutions</a>
<ul>
<li><a href="http://www.free-css.com/">Self-Managed Servers</a></li>
<li><a href="http://www.free-css.com/">Managed Servers</a></li>
<li><a href="http://www.free-css.com/">Load Balanced Clusters</a></li>
<li><a href="http://www.free-css.com/">Enterprise Systems</a></li>
<li><a href="http://www.free-css.com/">Disaster Recovery</a></li>
<li><a href="http://www.free-css.com/">Colocation</a></li>
</ul>
</li>
<li class="menu sfHover"><a href="http://www.free-css.com/">Services</a>
<ul>
<li><a href="http://www.free-css.com/">Network Services</a></li>
<li><a href="http://www.free-css.com/">Hardware Services</a></li>
<li><a href="http://www.free-css.com/">Security Services</a></li>
<li><a href="http://www.free-css.com/">Backup Services</a></li>
<li><a href="http://www.free-css.com/">Software Services</a></li>
<li><a href="http://www.free-css.com/">Monitoring Services</a></li>
</ul>
</li>
<li class="menu sfHover"><a href="http://www.free-css.com/">Support</a>
<ul>
<li><a href="http://www.free-css.com/">Self Help Wiki</a></li>
<li><a href="http://www.free-css.com/">Network Operations Center</a></li>
<li><a href="http://www.free-css.com/">Customer Community</a></li>
<li><a href="http://www.free-css.com/">Contact OpenReaction</a></li>
</ul>
</li>
<li class="menu sfHover"><a href="http://www.free-css.com/">Company</a>
<ul>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Testimonials</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Network & Data Center</a></li>
<li><a href="http://www.free-css.com/">Guarantees</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Affiliates</a></li>
</ul>
</li>
</ul>
<ul id="breadCrumbs">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Solutions</a></li>
<li>Managed Servers</li>
</ul>
<div id="mainContent">
<h2>Managed Servers</h2>
<p>This template is "elastic", meaning that if you are using a standards-compliant browser such as <a href="http://www.free-css.com/">Firefox</a> or <a href="http://www.free-css.com/">Safari</a>, you can increase the size of the entire page layout to your liking by pressing 'control +' (or 'command +' in OS X). It also means that you can set a larger or smaller size to the entire page by changing just the percentage number on line 24 of the included CSS stylesheet.</p>
<p>Feel free to do whatever you want with this template as long as you leave my credit at the bottom of each page. This template is being released to the public under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.</p>
<p>Click on 'Servers' or any of its sub-links to see a second layout.</p>
<!--[if IE 6]>
<p><strong>IE6 users, there are drop down menus under each link that you can't see because your browser is not standards compliant. The drop downs for this site require a small bit of javascript in order to function in your browser (see below). Either way, I suggest you upgrade!</strong></p>
<![endif]-->
<p>Distinctively parallel task resource sucking web services without economically sound web-readiness. Phosfluorescently redefine <a href="http://www.free-css.com/">out-of-the-box</a> best practices before timely expertise. Efficiently re-engineer inexpensive e-tailers with focused customer service.</p>
<p>Enthusiastically synergize ubiquitous benefits for interactive methodologies. Credibly visualize integrated experiences through vertical best practices.</p>
<h3>Why I love managed servitude</h3>
<p>Enthusiastically synergize ubiquitous benefits for interactive methodologies. Credibly visualize integrated experiences through vertical best practices.</p>
<p>An example of a blockquote:</p>
<blockquote>
<p>Intrinsicly transition future-proof bandwidth without mission-critical relationships. Quickly customize client-centered platforms for market positioning partnerships. Uniquely administrate unique deliverables rather than interoperable expertise.</p>
</blockquote>
<p>Appropriately target fully researched methodologies with efficient functionalities. Progressively customize open-source bandwidth and fully researched core competencies. Proactively predominate 24/365 scenarios before end-to-end interfaces.</p>
<p>In order for the drop down menu to work in IE6, you will need to add the following javascript to a file named dropdown.js in the src folder of this website: (for more info on the drop down and this javascript code, read about the <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Son of Suckerfish Dropdowns</a>)</p>
<textarea id="suckerfish" rows="4" cols="20">
<!-- This javascript has been commented out to pass W3C validation. You don't need to comment yours out when it's in an external file!
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</textarea>
<p>Synergistically unleash mission-critical paradigms through integrated models. Proactively evolve fully tested meta-services without enterprise-wide testing procedures. Appropriately exploit resource sucking web-readiness without clicks-and-mortar action items. </p>
<p>An example of a list:</p>
<ul>
<li>List item</li>
<li>Another item</li>
<li>Yet another item</li>
</ul>
<p>Completely network distributed networks vis-a-vis go forward data. Intrinsicly reintermediate principle-centered architectures vis-a-vis leading-edge solutions. Energistically plagiarize visionary quality vectors for exceptional networks.</p>
<p>Collaboratively actualize plug-and-play outsourcing and maintainable applications. Distinctively simplify front-end platforms before backward-compatible relationships.</p>
<h2>Example Form:</h2>
<fieldset>
<form action="http://www.free-css.com/" method="post">
<p>
<label for="name">Name:</label>
<input type="text" id="name" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" id="email" />
</p>
<p>
<label for="message">Message:</label>
<textarea id="message" rows="5" cols="28"></textarea>
</p>
<p>
<input type="submit" id="submit" value="Submit" />
</p>
</form>
</fieldset>
</div>
<div id="secondaryContent">
<div class="secondaryContentBox">
<h2>Live Chat 24/7</h2>
<p>Distinctively parallel task resource sucking web services without economically sound web-readiness.</p>
<p><span title="Phone">p:</span> 800.555.1234</p>
<p><span title="Email">e:</span> <a href="http://www.free-css.com/">email@sample.com</a></p>
</div>
<blockquote>
<p>Transition future-proof bandwidth without mission-critical relationships. Quickly customize client-centered platforms for market positioning partnerships.</p>
</blockquote>
<p class="source">- Lorem Ipsum<br />
Acme Industries</p>
</div>
<ul id="footer">
<li>© 2008 Your Name Here.</li>
<li>This free CSS template based on Beer Bongs! by <a href="http://www.gorotron.com">gorotron</a>.</li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
<li><a href="http://www.free-css.com/">Privacy Policy</a></li>
<li><a href="http://www.free-css.com/">Terms of Service</a></li>
</ul>
</body>
</html>
Related examples in the same category