internet-phenomenon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>internetPhenomenon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/****************************************
InternetPhenomenon Master STYLESHEET
DESIGNED BY VINCHE7
E-MAIL: vinche7@gmail.com WEBSITE: http://aquaticus.us.to
****************************************/
* {
margin: 0px;
padding: 0px;
}
img {
border-width: 0px;
display:block;
}
h1, h2, h3 {
color: #fff;
font-family: Arial, Helvetica;
font-weight: normal;
text-align: left;
}
p {
font-family: Arial, Helvetica;
}
body {
font-family: Arial, Helvetica;
text-align: center;
background-color: #222222;
}
#wrapper {
display: table;
width: 932px;
margin: 50px auto;
margin-bottom: 20px;
}
/******************************
LEFT COLUMN
******************************/
#leftcol {
float: left;
width: 648px;
}
#websitetitle {
text-align: left;
font-family: "TW Cen MT", Arial, Helvetica;
}
#websitetitle span {
color:#b4e2ff;
}
/******************************
NAVIGATION
******************************/
#nav {
display: table;
width: 643px;
margin-top: 28px;
margin-left: 5px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a, nav ul li a:active, nav ul li a:visited {
font-family: Arial, Helvetica;
font-size: 14px;
color: #fff;
letter-spacing: -1px;
text-decoration: none;
padding-left: 17px;
padding-right: 40px;
background: url(internet-phenomenon-images/nav.jpg) left center no-repeat;
}
#nav ul li a:hover {
background: url(internet-phenomenon-images/navhover.jpg) left center no-repeat;
}
/******************************
WELCOME BOX
******************************/
#welcomebox {
display: table;
width: 636px;
margin-top: 20px;
padding: 5px;
border: 1px solid #4b4b4b;
}
#welcomebox h2 {
font-family: Arial, Helvetica;
text-align: left;
color: #b4e2ff;
}
#welcomebox img {
float: left;
margin-right: 15px;
}
#welcomebox p {
font-family: Arial, Helvetica;
font-size: 12px;
text-align: left;
text-indent: 10px;
color: #fff;
margin-right: 70px;
line-height: 25px;
}
/******************************
MAIN CONTENT STYLING
******************************/
#contentheading {
width: 618px;
height: 24px;
margin-top:15px;
padding-top: 2px;
padding-left: 30px;
background: url(internet-phenomenon-images/mainlcorner.jpg) top left no-repeat #324045;
}
#contentbox {
width: 602px;
padding: 12px 22px 12px 22px;
background: url(internet-phenomenon-images/contentbg.jpg) top left repeat-y;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #4b4b4b;
}
#content {
width: 572px;
background-color:#fff;
padding: 20px 15px 20px 15px;
}
#content p {
font-size: 14px;
line-height: 20px;
letter-spacing: -1px;
text-align: left;
text-indent: 10px;
color: #555555;
margin-bottom: 10px;
}
#content p span {
margin-left: 20px;
}
#content blockquote {
margin: 0px 20px 10px 40px;
padding: 10px 0px 10px 0px;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-left: 5px #777 solid;
font-family: Tahoma, Verdana, Helvetica;
font-size: 15px;
font-weight: bold;
color: #222222;
}
/******************************
RIGHT COLUMN
******************************/
#rightcol {
width: 258px;
margin-left: 10px;
padding: 20px 6px 20px 6px;
float: left;
border: 2px solid #373737;
}
#rightcol h2 {
color: #c9c9c9;
}
.section {
display: table;
width: 244px;
margin-bottom: 28px;
padding: 0px 7px 30px 7px;
background: url(internet-phenomenon-images/rightcolhdot.jpg) left bottom repeat-x;
}
.section p {
margin-top: 15px;
font-size: 12px;
text-align: left;
text-indent: 10px;
color: #fff;
}
/******************************
SEARCH FORM STYLES
******************************/
#searchInput {
width: 236px;
height: 18px;
border: 2px solid #777777;
margin-top: 10px;
}
#searchSubmit {
width: 51px;
height: 25px;
background: url(internet-phenomenon-images/searchsubmit.jpg) no-repeat;
border-width: 0px;
margin-top: 18px;
float:right;
font-family: Arial, Helvetica;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
color: #fff;
}
/******************************
NEWS POSTING STYLES
******************************/
.posted {
font-family: Arial, Helvetica;
font-size: 11px;
color: #c9c9c8;
margin-top: 28px;
float: right;
}
.posted span {
color: #ff9d15;
}
.date {
font-family: Arial, Helvetica;
font-size: 11px;
color: #c9c9c8;
margin-top: 3px;
clear: right;
float: right;
}
/******************************
FOOTER/COPYRIGHT
******************************/
#copyright {
margin-top: 80px;
font-size: 13px;
color: #fff;
}
#copyright a, #copyright a:active, #copyright a:visited {
text-decoration: none;
color: #b4e2ff;
}
#copyright a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcol">
<h1 id="websitetitle"><span>internet</span>Phenomenon</h1>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Our Services</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>
</ul>
</div>
<div id="welcomebox"> <img src="internet-phenomenon-images/sheep.jpg" alt=""/>
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis egestas dignissim justo. Suspendisse potenti. Sed suscipit aliquet diam. Vivamus quis odio. Duis id ante. Aenean vel erat. Morbi nec erat. Pellentesque a mi at est pulvinar viverra.</p>
</div>
<div id="contentheading">
<h3>Home</h3>
</div>
<img src="internet-phenomenon-images/undercontentheading.jpg" alt="" />
<div id="contentbox">
<div id="content">
<p><strong>internetPhenomenon</strong>, my first template contributed to <i>open source web designs</i>. First an introduction: my name is Vincent and I am a student of Canada. Web design is not my profession but merely a hobby. However, some people ask me if I can design websites for them. My reply is, yes I can. So, if you need a site designed, some graphics made or simply have a burning desire to contact me, e-mail me at:</p>
<blockquote>vinche7[at]gmail[dot]com</blockquote>
<p><strong>SOMETIMES</strong> I may not reply to an e-mail as quick as I hope to. This may be caused by several reasons. I am none the less still a student and studies right now is what's important. This may be one reason why I don't reply a.s.a.p. So please be patient. I am not deliberately putting anyone off to the side, it is just a matter of when I have free time to do web design. Thank you.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sit amet risus. Nullam consectetuer. Aliquam in felis vel nisl commodo nonummy. Vestibulum et tortor. Pellentesque sit amet felis. Nulla erat mi, mattis vitae, hendrerit a, venenatis vel, mauris. Curabitur orci. Etiam dignissim lectus vel est. Fusce vehicula dolor adipiscing arcu. Mauris ac dolor et quam dictum tristique. Phasellus aliquam lacinia nisi. Suspendisse eget leo et odio ultricies venenatis. Etiam sagittis leo vel justo. Sed malesuada massa vel purus. Donec ut risus. Nunc elit purus, luctus at, auctor ac, ultrices eget, turpis. Cras volutpat risus eget pede. Nulla fermentum risus at nisi.</p>
</div>
</div>
<img src="internet-phenomenon-images/leftcolfoot.jpg" alt="" /> </div>
<div id="rightcol">
<div class="section">
<h2>Search</h2>
<form action="http://www.free-css.com/">
<input type="text" id="searchInput" />
<input type="submit" value="Go!" id="searchSubmit" />
</form>
</div>
<div class="section">
<h2>News Update</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in leo. Curabitur dignissim. Proin tempus nisi ac lacus. Duis vitae mi ac nisi pretium commodo. Fusce elementum, nulla nec mollis vulputate, massa tellus cursus libero.</p>
<div class="posted"> Posted by <span>Admin</span> </div>
<div class="date"> June 02, 2007 </div>
</div>
<div class="section">
<h2>News Update</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in leo. Curabitur dignissim. Proin tempus nisi ac lacus. Duis vitae mi ac nisi pretium commodo. Fusce elementum, nulla nec mollis vulputate, massa tellus cursus libero.</p>
<div class="posted"> Posted by <span>Admin</span> </div>
<div class="date"> June 02, 2007 </div>
</div>
<div id="copyright"> Copyright © Your Company, 2007-2008 <br />
Designed by <a href="http://aquaticus.us.to">Aquaticus Studios</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category