reflections
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Reflections | Shaibal Mandal</title>
<style type='text/css'>
/* CSS Document - Author: Shaibal Mandal */
/* Main Styles that apply to body */
body {
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
padding-left: 50%;
background: #f4f4f4 url(reflections-images/bg.gif) center repeat-y;
position: absolute;
}
/* This is the page container built and centered using -ve margins */
#container {
width: 700px;
margin-left: -350px;
}
/* The topmost faded bar */
#topbar {
width:auto;
background: #EEE;
height: 20px;
padding: 10px 5px 5px 2px;
font: 9px verdana;
font-weight: bold;
color: #CCCCCC;
text-align: right;
}
/* This holds the two heading blocks, the title and the login form */
#headerwrapper {
width: auto;
}
/* class that styles the holder div of the forms */
.userform {
width: auto;
color: #DD7CB4;
padding: 5px 0px 5px 3px;
background: #fbfbfb;
border:1px solid #efefef;
border-top: none;
text-align: justify;
margin-bottom: 1px;
}
/* This will style the login and search */
.userform input {
border: 1px solid #DDD;
font-family: verdana;
font-size: 10px;
color: #BBB;
font-weight: bold;
}
h1 {
font: 48px verdana;
color: #EEE;
margin: 5px;
}
h6 {
font: 10px verdana;
font-weight: bold;
color: #DDD;
margin: 0px;
padding: 0px;
margin-left: 8px;
}
/* This holds the tabs */
#tabholder
{
width: auto;
}
/* Container for the article box, and the pic box */
.articleboxouter {
width: auto;
padding: 0px 6px 0px 5px;
clear: both;
}
/* Content holder for the articles */
.articleboxinner {
width: auto;
line-height: 20px;
color: #DD7CB4;
padding: 15px 6px 0px 6px;
background: #fbfbfb;
border:1px solid #efefef;
text-align: justify;
height: 220px;
}
/* The title style for the main article */
.articleheader
{
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #CCC;
}
/* This will style the read more thing at the bottom */
.readmore {
text-align: right;
display: block;
width: auto;
}
/* This controls the main pic in the main article box */
.mainpiccontrol
{
border: 1px #DBB7DB solid;
float: left;
margin-right: 10px;
}
/* Container for the pic thumbnails */
.picboxouter {
width: auto;
padding: 0px 6px 0px 5px;
clear: both;
}
/* Content holder for the pic box */
.picbox {
width: auto;
line-height: 22px;
color: #DD7CB4;
padding: 5px 6px 6px 6px;
border:1px solid #efefef;
border-top: none;
text-align: center;
}
/* This controls the thumbnails in the picbox div */
.pickboxcontrol
{
border: 1px #DDD solid;
vertical-align: middle;
}
/* Sometimes, I don't want borders around my hyperlink images */
.noborder {
border: none;
}
/* For taming those leeeeeeetle arrows */
img {
vertical-align: text-bottom;
}
/* Style-up those ugly default hyperlinks */
a {
text-decoration: none;
padding: 0;
margin: 0;
color: #663366;
}
/* And their ugly hover states too */
a:hover {
text-decoration: underline;
}
/* Why should the humble footer be left out? */
#footer {
background-color: #CCC;
color: #fff;
text-align: center;
vertical-align: middle;
height: 20px;
padding-top: 5px;
clear: both;
}
/* This will contain the three columns */
#newsContainer2
{
width:auto;
background-color: #E0E0E0;
}
/* First column of the three columns */
.c1
{
width: 227px;
background-color: #F7F4F7;
border: 1px solid #DDD;
border-top: none;
line-height: 22px;
color: #DD7CB4;
float: left;
}
/* Second column of the three columns */
.c2
{
width: 230px;
float: left;
border-bottom: 1px solid #DDD;
line-height: 22px;
color: #DD7CB4;
}
/* Third column of the three columns */
.c3
{
width: 228px;
background-color: #F7F4F7;
border: 1px solid #DDD;
border-top: none;
line-height: 22px;
color: #DD7CB4;
float: right;
}
/* This controls the titles for each column */
.noteheader
{
width:auto;
border-bottom: 1px solid #DDD;
border-top: none;
color: #DD7CB4;
height: 24px;
font-family: verdana;
font-size: 11px;
font-weight: bold;
background:url(reflections-images/headerBG.jpg) repeat-x;
}
/* And this gives the column text some breathing space */
.spacy
{
padding: 5px;
}
/* CSS Tabs */
#tabs8 {
float:left;
width:100%;
background:#F1F1F1;
font-size:93%;
line-height:normal;
border-bottom:1px solid #CCC;
}
#tabs8 ul {
margin:0;
padding:10px 10px 0 5px;
list-style:none;
}
#tabs8 li {
display:inline;
margin:0;
padding:0;
}
#tabs8 a {
float:left;
background:url("reflections-images/tableft8.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs8 a span {
float:left;
display:block;
background:url("reflections-images/tabright8.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#eee;
font-weight: bold;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
/* End IE5-Mac hack */
#tabs8 a:hover span {
color:#591333;
}
#tabs8 a:hover {
background-position:0% -42px;
}
#tabs8 a:hover span {
background-position:100% -42px;
color: #888;
}
#tabs8 #current a {
background-position:0% -42px;
}
#tabs8 #current a span {
background-position:100% -42px;
color: #888;
}
/* End of CSS Tabs */
</style>
<!--[if gte IE 5]>
<style>
#container {
margin-left: -351px;
}
</style>
<![endif]-->
</head>
<body>
<!-- Master Container: Centered and 700px wide -->
<div id="container">
<!-- The topmost bar -->
<div id="topbar"> Reality is an illusion caused by lack of alcohol </div>
<!-- End of top bar -->
<!-- This holds the main header -->
<div id="headerwrapper">
<!-- This is the site title -->
<h1>reflections</h1>
<div>
<!-- This is the site slogan -->
<h6> When reality is too distorted to handle </h6>
<br />
</div>
</div>
<!-- End of headerwrapper -->
<!-- This hold the navigation tabs -->
<div id="tabholder">
<div id="tabs8">
<ul>
<!-- CSS Tabs -->
<li id="current"> <a href="http://www.free-css.com/"><span>Reflections</span></a> </li>
<li><a href="http://www.free-css.com/"><span>Emotions</span></a></li>
<li><a href="http://www.free-css.com/"><span>Thoughts</span></a></li>
<li><a href="http://www.free-css.com/"><span>Hopes</span></a></li>
<li><a href="http://www.free-css.com/"><span>Dreams</span></a></li>
<li><a href="http://www.free-css.com/"><span>Visions</span></a></li>
<li><a href="http://www.free-css.com/"><span>Prayers</span></a></li>
</ul>
</div>
</div>
<!-- End of the tabs holder -->
<!-- This is the search box and login controls holder -->
<div class="articleboxouter">
<!-- Here's your stuff -->
<div class="userform">
<!-- The search box and the button -->
<input type="text" name="searchbox" id="search" size="15" />
<input type="submit" name="submit" value="search" />
<!-- Lots of whitespace -->
<!-- Here's your login controls -->
Username
<input type="text" name="loginbox" id="tflogin" size="15" />
Password
<input type="password" name="loginbox" id="tfpassword" size="15" />
<input type="submit" name="login" value="Login" />
</div>
</div>
<!-- End of the login controls holder -->
<!-- Here's the box for the main article -->
<div class="articleboxouter">
<!-- Here's where you can place ur content -->
<div class="articleboxinner">
<!-- The flower image. 300px by 200px -->
<img src="reflections-images/help.jpg" alt="help" class="mainpiccontrol" />
<!-- The title for this article -->
<span class="articleheader">A word from within</span> <br />
<!-- The preview content -->
Welcome to my third design 'reflections'. Due to a demanding job,
I can't contribute to the community often, so this time I decided to make
something substantially better than my previous works. I hope I have
succeeded. As always, no credits are necessary for using
this design. Use it, modify it, I'll bet you can make it look much
better! If time permits, drop me a line at findshaibal[at]yahoo[dot]com,
so I can take a look at how you've used my design....... <br />
<!-- Link to the full article, an arrow and a text link -->
<span class="readmore"> <a href="http://www.free-css.com/"> <img src="reflections-images/arrow.png" alt="read more" class="noborder" /> </a> <a href="http://www.free-css.com/">Read More</a> <br />
</span> </div>
<!-- End of content holder -->
</div>
<!-- End of main article -->
<!-- Here's the box for some pics, remove if not a photo gallery -->
<div class="picboxouter">
<!-- Here's where you can place ur thumbnails -->
<!-- All should be uniformly sized ;-) -->
<div class="picbox">
<!-- Arrow pointing backwards -->
<a href="http://www.free-css.com/"> <img src="reflections-images/arrowrev.png" alt="backward" class="noborder" /> </a> <img src="reflections-images/f1.jpg" alt="help" class="pickboxcontrol" /> <img src="reflections-images/f2.jpg" alt="help" class="pickboxcontrol" /> <img src="reflections-images/f3.jpg" alt="help" class="pickboxcontrol" /> <img src="reflections-images/f6.jpg" alt="help" class="pickboxcontrol" /> <img src="reflections-images/f7.jpg" alt="help" class="pickboxcontrol" />
<!-- Arrow pointing ahead -->
<a href="http://www.free-css.com/"> <img src="reflections-images/arrow.png" alt="forward" class="noborder" /> </a> </div>
</div>
<!-- End of photogallery -->
<!-- We love three columns, don't we? -->
<!-- Holder for three columns -->
<div class="articleboxouter">
<div id="newsContainer2">
<!-- Column 1 -->
<div class="c1">
<div class="noteheader"> Purpose </div>
<div class="spacy"> I'm sure this design can adapt to various needs. A blog,
a photo gallery, a business presence, or a personal
page. Whatever your needs may be, a small amount of
modifications will do the trick. You'll find ample comments
throughout the markup to help you out, and the css is not
rocket science either. I've tried to keep it as
simple as possible. </div>
</div>
<!-- Column 2 -->
<div class="c2">
<div class="noteheader"> The Standards </div>
<div class="spacy"> This is an XHTML 1.0 Strict, tableless layout.
All the fancy things are achieved with CSS. The page
displays well with IE6 and Firefox, and maintains a
fair amount of dignity when degrading to no css mode.
The tabs up there were made with a wonderful little free
tool called 'CSS tab designer'. All images are royalty fee
stuff from SXC. </div>
</div>
<!-- Column 3 -->
<div class="c3">
<div class="noteheader"> Not to forget </div>
<div class="spacy">
<!-- The content for this attention grabbing block -->
The three columns is a small bonus, and the cental
column has only a bottom border. The side columns will
keep pushing down as you keep adding content. Just make
sure that the cental column holds the least amount of
data. And do get back to me when you're
done playing with this design! <br />
findshaibal[at]yahoo[dot]com </div>
</div>
</div>
</div>
<!-- End of the three columns holder -->
<!-- This little whitespace will separate the page from the footer -->
<!-- Finally, here's the humble footer, holding your copyright -->
<div id="footer"> Your footer content here. (c) Copyright 2006-2007 Your company name.
XHTML 1.0 Strict | Pure CSS Layout </div>
<!-- End of footer -->
</div>
<!-- End of master container -->
</body>
</html>
Related examples in the same category