thisistext
<!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">
<head>
<title>This is Text | Help</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
background-color:#444;
width:100%;
font-family:Verdana,Helvetica,sans-serif;
font-size:11px;
color:#e5e5e5;
}
/* Top Band */
#topband{
height:50px;
background:#cb610c url(thisistext-images/topbandpattern.gif) repeat-x;
}
/* Header */
#header{
height:125px;
background:#333 url(thisistext-images/headerbg.gif) repeat-x;
}
#header h1{
margin:0;
padding:45px 0 0 30px;
font-family:"Myriad Pro",Arial,sans-serif;
font-size:44px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
position:absolute;
color:#666;
}
#header h1 span{
color:#d4a70b;
}
/* Navbar */
#navbar{
height:65px;
background:#e5e5e5 url(thisistext-images/navbarbg.gif) repeat-x;
padding-left:20px;
}
/* Menu */
#navbar ul{
list-style-type:none;
margin:0;
}
#navbar ul li{
display:inline;
}
#navbar ul li a{
font-family:"Myriad Pro",Arial,sans-serif;
font-size:14px;
letter-spacing:-1px;
text-decoration:none;
text-align:center;
color:#666;
float:left;
display:block;
padding:18px 12px 31px 12px;
}
#navbar ul li a:hover{
background:transparent url(thisistext-images/navbarbghover_anim.gif) repeat-x;
color:#464646;
}
/* Content Divs */
#c{
width:100%;
background:#505050 url(thisistext-images/cbg.gif) repeat-y top left;
}
#c2{
background:transparent url(thisistext-images/cbg_shape.gif) no-repeat bottom right;
}
#cleft{
width:369px;
background:#555 url(thisistext-images/cleftbg.gif) repeat-x top left;
float:left;
padding:15px 15px 15px 15px;
}
#cright{
margin-left:400px;
background:transparent url(thisistext-images/crightbg.gif) repeat-x top left;
padding:20px 15px 25px 15px;
}
#c_clearboth{
clear:both;
}
/***** Content Styles *****/
/* Links, Acronyms, etc. */
a{
color:#bbbbbb;
}
a:hover{
color:#dd6a0d;
}
acronym{
cursor:help;
border-bottom:1px dotted #e5e5e5;
}
/* Headers */
#c h1,#c h2,#c h3,#c h4,#c h5,#c h6{
margin-top:5px;
font-family:Georgia,Helvetica,sans-serif;
font-weight:normal;
}
#c h1{
color:#d4a70b;
font-size:25px;
}
#c h2{
color:#cb610c;
font-size:22px;
}
#c h3{
color:#979797;
font-size:20px;
}
#c h4{
color:#e5e5e5;
font-size:15px;
font-weight:bold;
/*padding-left:5px;
border-left:2px dotted #888;*/
}
#c h5{
color:#d4a70b;
font-size:14px;
font-weight:bold;
}
#c h6{
color:#cb610c;
font-size:11px;
font-weight:bold;
}
#c span.date{
font:17px Georgia,Helvetica,sans-serif;
color:#888;
display:block;
margin-top:-3px;
}
/* Paragraphs */
#c p{
margin:10px 0 15px 0;
line-height:22px;
}
/*#c p:first-letter{
margin-left:5px;
}*/
/* Blockquotes */
#c blockquote{
margin:10px 0 10px 5px;
width:90%;
padding:10px 12px;
background:#555 url(thisistext-images/stripedbg.gif) repeat top left;
border:1px solid #666;
border-left-width:3px;
/* More subtle background
background:#555 url(thisistext-images/blockquotebg.gif) repeat top left;
border:1px solid #5e5e5e; */
}
#c blockquote p{
margin:0;
}
#c blockquote span{
display:block;
color:#888;
font-size:10px;
}
#c blockquote span a{
text-decoration:none;
}
/* Code */
#c code{
display:block;
margin:10px 0 15px 0;
padding:10px;
background:#555 url(thisistext-images/stripedbg.gif) repeat top left;
border:1px solid #666;
border-left-width:3px;
line-height:15px;
}
#c .highlight{
color:#d4a70b;
font-weight:bold;
}
/* Lists */
#cleft ul{
margin:15px 5px;
}
#cleft ul li{
list-style-type:none;
line-height:20px;
background:transparent url(thisistext-images/sidebarliststylelight.gif) no-repeat 0 6px;
padding-left:15px;
}
#cleft ul li ul{
margin:0 5px;
}
#cleft ol{
margin:15px 5px;
margin-left:24px !important;
margin-left:28px;
}
#cleft ol li{
line-height:20px;
}
#cleft ol li ol{
margin:0 5px 0 20px;
}
#cleft dl{
margin:15px 5px;
}
#cleft dl dt{
font-weight:bold;
color:#d4a70b;
}
#cleft dl dd{
margin:5px 0 10px 15px;
}
/* Forms */
#cleft form.boxed{
background-color:#505050;
border:1px solid #666;
padding:5px 15px 5px 15px;
margin:10px 0 20px 0;
}
#cleft form p{
margin:10px 0 10px;
}
#cleft form label{
display:block;
color:#bbb;
font-size:10px;
}
#cleft form input{
font:12px Verdana,Helvetica,sans-serif;
padding:2px 3px;
background:#666 url(thisistext-images/forminputbg.gif) repeat top left;
border:1px solid #777;
color:#e5e5e5;
}
#cleft form input.button{
background-color:#666;
border:1px solid #444;
cursor:pointer;
}
#cleft form textarea{
width:329px;
font:12px Verdana,Helvetica,sans-serif;
padding:2px 3px;
background:#666 url(thisistext-images/forminputbg.gif) repeat top left;
border:1px solid #777;
color:#e5e5e5;
}
/* Floated Images */
.floatright{
float:right;
padding:10px 0 10px 10px;
}
.floatleft{
float:left;
padding:10px 10px 10px 0;
}
/***** End Content Styles *****/
/* Sidebar */
#cright{
color:#888;
}
#cright h1{
font-size:22px;
}
#cright ul{
margin:5px 0 0 5px;
}
#cright ul li{
line-height:20px;
list-style-type:none;
}
#cright ul li a{
padding-left:15px;
background:transparent url(thisistext-images/sidebarliststyle.gif) no-repeat center left;
color:#888;
text-decoration:none;
}
#cright ul li a:hover{
background:transparent url(thisistext-images/sidebarliststylelight.gif) no-repeat center left;
color:#aaa;
}
/* Search Box */
#searchbox input{
height:20px;
width:133px;
border:1px solid #4b4b4b;
background-color:#555;
padding:4px 0 0 3px;
font:14px Arial,Helvetica,sans-serif;
color:#999;
}
#searchbox p{
margin:5px 0 0 0;
}
#searchbox input:focus,#searchbox input:hover{
border-color:#3f3f3f;
}
/* Sidebar image links */
#cright a img{
margin-top:10px;
border:none;
opacity:.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
}
#cright a:hover img{
opacity:1;
filter:alpha(opacity=100);
-moz-opacity:1;
}
/* Footer */
#footer{
height:94px;
width:100%;
border-top:1px solid #666;
background:#444 url(thisistext-images/footerbg.gif) no-repeat top left;
color:#999;
}
#footer p{
margin:9px 11px;
line-height:20px;
}
#footer p a{
text-decoration:none;
}
/* Generic Class Names */
.noborder{
border:0 !important;
}
.nobg{
background:transparent !important;
}
.clearboth{
clear:both !important;
}
.clearleft{
clear:left !important;
}
.clearright{
clear:right !important;
}
/* Special */
#preload{
width:0;
height:0;
display:inline;
background-image:url(thisistext-images/navbarbghover_anim.gif);
background-image:url(thisistext-images/sidebarliststylelight.gif);
}
</style>
</head>
<body>
<div id="preload">
<!-- -->
</div>
<div id="topband"> </div>
<div id="header">
<!-- Header -->
<!-- In the header, text surrounded with <span> will be yellow. -->
<h1>THISIS<span>TEXT</span></h1>
<!-- End Header -->
</div>
<div id="navbar">
<!-- Menu -->
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="help.html">HELP</a></li>
<li><a href="tags.html">TAGS</a></li>
</ul>
<!-- End Menu -->
</div>
<div id="c">
<div id="c2">
<div id="cleft">
<!-- Main Content Area -->
<h1>Help and Tips</h1>
<p>This page has some info about how to use this template.</p>
<h3>Floating Images</h3>
<p><img src="thisistext-images/testimage.gif" alt="Floated Image" class="floatright" />Morbi nisi. Proin commodo risus ut sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris rutrum eros sed elit. Fusce ornare, risus quis mattis aliquet, augue tortor vestibulum felis, nec malesuada orci magna non lorem. Nullam tempus. Nullam accumsan odio rutrum turpis. <img src="thisistext-images/testimage.gif" alt="Floated Image" class="floatleft" />Cras rutrum, lectus consequat hendrerit sollicitudin, velit dui tincidunt lorem, in vestibulum enim elit in diam. Maecenas rhoncus facilisis felis. Vivamus at urna. Sed scelerisque vulputate mi. Nullam neque. Sed iaculis, erat auctor condimentum varius, nisi nibh bibendum velit, at faucibus odio massa sagittis metus. Ut eget mauris. Vivamus vitae urna. Maecenas at turpis ut turpis cursus vestibulum.</p>
<p><em>Source:</em></p>
<code> <p><img src="" <span class="highlight">class="floatright"</span> />Lorem...</p> </code>
<p>Applying <span class="highlight">class="floatleft"</span> floats the image to the left (as in the second image in the paragraph above).</p>
<h3>"Boxed" Forms</h3>
<p>To get the dark box around a <form>, it must be given the <span class="highlight">"boxed"</span> class.</p>
<form class="boxed" action="#" method="post">
<p>
<label>Some Input:</label>
<input type="text" value="" />
</p>
<p>
<label>Another Input:</label>
<input type="text" value="" />
</p>
<br />
<p>
<input type="submit" value="Submit" class="button" />
<input type="reset" value="Reset" class="button" />
</p>
</form>
<p><em>Source:</em></p>
<code> <form <span class="highlight">class="boxed"</span>...><br />
. . .<br />
</form> </code>
<!-- End Main Content Area -->
</div>
<div id="cright">
<!-- Sidebar -->
<h1>search</h1>
<form id="searchbox" action="#" method="post">
<p>
<input type="text" title="Search" value="" />
</p>
</form>
<br />
<h1>links</h1>
<ul>
<li><a href="http://www.free-css.com/">Maecenas</a></li>
<li><a href="http://www.free-css.com/">Varius</a></li>
<li><a href="http://www.free-css.com/">Integer</a></li>
</ul>
<br />
<h1>latest work</h1>
<a href="http://www.free-css.com/"><img src="thisistext-images/testimage2.gif" alt="" /></a><br />
<a href="http://www.free-css.com/"><img src="thisistext-images/testimage2.gif" alt="" /></a>
<!-- End Sidebar -->
</div>
<div id="c_clearboth"></div>
</div>
</div>
<div id="footer">
<!-- Footer -->
<p> Copyright © 2006 Your Name <br />
Valid strict <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer/">CSS</a> <br />
Design by <a href="http://saltedsugar.com/">sofaspud</a> </p>
<!-- End Footer -->
</div>
</body>
</html>
Related examples in the same category