atrandafir582
<!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>atrandafir582</title>
<style type='text/css'>
?/*
( atrandafir 582 - feel free to clean and upgrade this code )
*/
body
{
margin: 0;
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 15px 0;
background: #eeeeee;
}
#wrap {
width: 820px;
margin: 0 auto;
background: url(atrandafir582-img/bg.gif) top center repeat-y #FFFFFF;
}
#top_content {
padding: 0 10px;
}
#topheader {
padding: 25px 15px 15px 15px;
margin: 0 auto 0 auto;
background: url(atrandafir582-img/top_left.gif) top left repeat-x #85C329;
}
#rightheader {
float: right;
width: 375px;
height: 40px;
color: #FFFFFF;
text-align: right;
}
#rightheader p {
padding: 35px 15px 0 0;
margin: 0;
text-align: right;
}
#rightheader p span {
font-weight: bold;
}
#rightheader a:link, #rightheader a:visited {
color: #FFFFFF;
text-decoration: underline;
}
#title {
padding: 0;
margin: 0;
font-size: 2.5em;
color: #FFFFFF;
}
#title span {
font-size: 0.5em;
font-style: italic;
}
#title a:link, #title a:visited {
color: #FFFFFF;
text-decoration: none;
}
#title a:hover {
color: #E1F3C7;
}
#navigation {
background: #74A8F5;
border-top: 1px solid #ffffff;
height: 25px;
clear: both
}
#navigation ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 1.1em;
height: 25px;
}
#navigation ul li {
display: inline;
}
#navigation ul li a {
color: #FFFFFF;
display: block;
text-decoration: none;
float: left;
line-height: 25px;
padding: 0 16px;
border-right: 1px solid #ffffff;
}
#navigation ul li a:hover {
background: #5494F3;
}
#content {
padding: 0 15px;
margin: 0 auto 0 auto;
background: url(atrandafir582-img/content_bg.gif) repeat-x left top #ffffff;
color: #666666;
}
#content p#whereami {
padding: 20px 0 15px 0;
margin: 0;
}
#whereami a:link, #whereami a:visited {
color: #73A822;
text-decoration: underline;
}
#content h1, #content h2,
#content h3, #content h4 , #content h5 {
color: #74A8F5;
}
#content h1 {
font-family: "Trebuchet MS", Arial, Helvetica;
padding: 0;
margin: 0 0 15px 0;
font-size: 2em;
}
#content h2 {
font-family: "Trebuchet MS", Arial, Helvetica;
padding: 0;
margin: 0 0 15px 0;
font-size: 1.5em;
}
#top_body, #content_body {
padding: 0 25px;
}
#footer {
background: url(atrandafir582-img/footer.gif) no-repeat center bottom ;
color: #FFFFFF;
padding: 0 10px 13px 10px;
}
#footer p {
padding: 0;
margin: 0;
}
#footer p a:link, #footer p a:visited {
color: #FFFFFF;
font-style: italic;
text-decoration: none;
}
#footer #footer_bg {
background: url(atrandafir582-img/footer_bg.gif) repeat-x left bottom #85C329;
padding: 15px 15px 25px 15px;
border-top: 1px solid #7BB425;
}
#footer #design {
display: block;
width: 150px;
height: 30px;
float: right;
line-height: 20px;
padding: 0 5px;
text-align: right;
color: #E1F3C7;
}
#footer #design a {
color: #FFFFFF;
text-decoration: underline;
}
.table {
margin-bottom: 15px;
width: 100%;
border-collapse: collapse;
}
.table_header td {
background: url(atrandafir582-img/tableheader-bg.gif) no-repeat left top;
padding: 5px 10px;
color: rgb(70,122,167);
border-top: 1px solid #CBD6DE;
border-bottom: 1px solid #ADBECB;
font-size: 1.1em;
font-weight: bold;
}
.table_header td a:link, .table_header td a:visited {
text-decoration: underline;
color: rgb(70,122,167);
}
.table_header td a:hover {
text-decoration: underline;
color: #73A822;
}
.table_header td {
border: 1px solid #CBD6DE;
}
.row1 td, .row2 td, .row_hover td, .paging_row td {
padding: 5px 10px;
color: #666666;
border: 1px solid #CBD6DE;
}
.row1 td {
background: #ffffff;
}
.row2 td {
background: #eeeeee;
}
.row_hover td {
background: #FBFACE;
color: #000000;
}
.hidden {
display: none;
}
.little {
font-size: 10px;
}
.clear {
clear: both;
}
.img_left {
float: left;
padding: 1px;
border: 1px solid #cccccc;
margin: 0 10px 10px 0;
}
/* #content ul basic style for unordered lists
------------------------------------------------*/
#content ul {
font-size: 1.1em;
line-height: 1.8em;
margin: 0 0 15px 0;
padding: 0;
list-style-type: none;
}
/* #content p paragraphs
-----------------------------*/
#content p {
font-size: 1.2em;
margin: 0;
padding: 0 0 15px 0;
}
/* #content p a links in paragraphs
------------------------------------*/
#content p a:link, #content p a:visited,
.table a:link, .table a:visited,
.link a {
color: #73A822;
text-decoration: none;
}
#content p a:hover, .table a:hover, .link a:hover {
text-decoration: underline;
}
/* #content ul.green (73A822)
--------------------------------*/
#content ul.green li {
padding: 0 0 0 20px;
margin: 0;
background: url(atrandafir582-img/bullet_green.gif) no-repeat 1px 3px;
font-size: 1.1em;
}
#content ul.green li a:link, #content ul.green li a:visited {
color: #73A822;
text-decoration: none;
}
#content ul.green li a:hover {
color: #73A822;
text-decoration: underline;
}
/* #content ul.black (73A822)
--------------------------------*/
#content ul.black li {
padding: 0 0 0 20px;
margin: 0;
background: url(atrandafir582-img/bullet_grey.gif) no-repeat 1px 3px;
font-size: 1.1em;
}
#content ul.black li a:link, #content ul.black li a:visited {
color: #666666;
text-decoration: none;
}
#content ul.black li a:hover {
color: #999999;
text-decoration: underline;
}
/* #content ol
--------------------------------*/
#content ol {
padding: 0 0 0 25px;
margin: 0 0 15px 0;
line-height: 1.8em;
}
#content ol li {
font-size: 1.1em;
}
#content ol li a:link, #content ol li a:visited {
color: #73A822;
text-decoration: none;
}
#content ol li a:hover {
color: #73A822;
text-decoration: underline;
}
/* #content p.paging
---------------------------------*/
#content p.paging {
padding: 5px;
border: 1px solid #CBD6DE;
text-align: center;
margin-bottom: 15px;
background: #eeeeee;
}
/* .small_input smaller text in inputs/combos
-----------------------------------------------*/
.small_input {
font-size: 10px;
}
/* .form_table style for table used in forms
---------------------------------------------*/
.form_table {
margin-bottom: 15px;
font-size: 1.1em;
}
.form_table p {
margin: 0;
padding: 0;
}
.form_table td {
padding: 5px 10px;
}
/* .checkbox_nomargins clear all margins from a checkbox
---------------------------------------------------------*/
.checkbox_nomargins {
/*margin:0;width:13px;height:13px;overflow:hidden;
font-size: 10px;*/
margin: 0;
padding: 0;
}
/* .button some buttons style - inspired from wordpress
------------------------------*/
input.button {
margin: 0;
padding: 2px;
border: 3px double #999999;
border-left-color: #ccc;
border-top-color: #ccc;
background: url(atrandafir582-img/button.gif) repeat-x left top;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* form style for forms
-------------------------*/
form {
padding: 0;
margin: 0;
}
/* input.inputgri - some style for inputs
--------------------------------------------*/
input.inputgri, select.inputgri, textarea.inputgri {
background: #eeeeee;
font-size: 14px;
border: 1px solid #cccccc;
padding: 3px;
}
input.inputgri:focus, select.inputgri:focus , textarea.inputgri:focus {
background: #ffffff;
border: 1px solid #686868;
}
/* .notice - messages to user
--------------------------------*/
.notice {
background: #CAEA99;
border: 1px solid #70A522;
padding: 15px 15px 15px 15px;
margin-bottom: 15px;
font-size: 1.2em;
color: #333333;
}
.notice_error {
background: #FEDCDA;
border: 1px solid #CE090E;
padding: 15px 15px 15px 15px;
margin-bottom: 15px;
font-size: 1.2em;
color: #333333;
}
#notice a {
color: #333333;
text-decoration: underline;
}
/* Other links
----------------*/
.other_links {
background: #eeeeee;
border-top: 1px solid #cccccc;
padding: 5px;
margin: 0 0 15px 0;
}
#content .other_links h2 {
color: #999999;
padding: 0 0 0 3px;
margin: 0;
}
#content .other_links ul {
padding: 0;
margin: 0;
}
#content .other_links ul li {
padding: 0 0 0 20px;
background: url(atrandafir582-img/bullet_grey.gif) no-repeat left center;
}
#content .other_links a, #content .other_links a:visited {
color: #999999;
text-decoration: underline;
}
#content .other_links a:hover {
color: #666666;
}
/* code */
code {
font-size: 1.2em;
color: #73A822;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<!-- rightheader -->
<div id="rightheader">
<p> 8, Aug 2007<br />
Hey <strong><a href="">Username</a></strong>, <a href="#">Logout</a> </p>
</div>
<!-- topheader -->
<div id="topheader">
<h1 id="title">
<a href="#">atrandafir582</a>
<span>1.0</span>
</h1>
</div>
<!-- navigation -->
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About the template</a></li>
<li><a href="#">Other handy link</a></li>
<li><a href="http://www.alexandru.es">About the author</a></li>
</ul>
</div>
</div>
<!-- header ends here -->
<div id="content">
<p id="whereami">
Home >
<a href="#">About the template</a>
</p>
<h1> Welcome to atrandafir582 </h1>
<p>
<img src="atrandafir582-img/nane.gif" class="img_left" alt="Picture inside a parragraph" />
Hello, this is my first template that I am going to share with everybody,
I have originally made it for web-based applications, but I guess it could
be used as blog or usual website with little modifications. Feel free to
modify, and improve this design, I will apreciate if you will just send me
an e-mail with your website url before removing "Template by atrandafir.es" link at
the bottom of the page, so I can see how you use it. Enjoy! </p>
<div class="clear"></div>
<h2> Let's put in some text </h2>
<p>
Lorem ipsum dolor sit amet consectetuer Cras Ut semper lacus et.
Purus montes condimentum libero enim lacus montes ut wisi vitae ac.
Vestibulum Curabitur feugiat sed convallis risus Integer nunc amet
orci elit. Leo id ut arcu pretium eu interdum risus nunc eget id. Urna
mauris nibh Integer lorem elit Curabitur ipsum pharetra eu nec. At
Curabitur Quisque tellus.
</p>
<p>
Vitae amet Ut hendrerit Cum Ut non nisl purus vel Integer. Wisi
tempus Curabitur quis sit turpis tristique vel Lorem sed consequat.
Integer elit Aliquam non gravida auctor congue Curabitur faucibus eget
enim. Tempus Nulla ante Maecenas urna dolor urna consequat sociis
fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.
</p>
<h2> Some lists </h2>
<p> Green one: </p>
<ul class="green">
<li>Aliquam non gravida auctor congue Curabitur faucibus eget</li>
<li>enim. Tempus Nulla <a href="">ante Maecenas</a> urna dolor urna consequat sociis</li>
<li>fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.</li>
</ul>
<p> And the <strong>black</strong>: </p>
<ul class="black">
<li>Aliquam non gravida auctor congue Curabitur faucibus eget</li>
<li>enim. Tempus Nulla <a href="">ante Maecenas</a> urna dolor urna consequat sociis</li>
<li>fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.</li>
</ul>
<p> Don't forget about the <strong>numbers</strong>: </p>
<ol>
<li>Aliquam non gravida auctor congue Curabitur faucibus eget</li>
<li>enim. Tempus Nulla <a href="">ante Maecenas</a> urna dolor urna consequat sociis</li>
<li>fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.</li>
</ol>
<h2> Here you see a table to display some results </h2>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="table">
<!-- table header -->
<tr class="table_header">
<td valign="middle" align="left"><a href="#">number</a></td>
<td valign="middle" align="left"><a href="#">link name</a></td>
<td valign="middle" align="left">some</td>
<td valign="middle" align="left">other</td>
<td valign="middle" align="left">table</td>
<td valign="middle" align="left">fields</td>
</tr>
<!-- row type one -->
<tr class="row1">
<td valign="middle" align="left">710375</td>
<td valign="middle" align="left"><a href="#">Aliquam non gravida</a></td>
<td valign="middle" align="left">5</td>
<td valign="middle" align="center">urna</td>
<td valign="middle" align="center">alfaro</td>
<td valign="middle" align="center">hunfe</td>
</tr>
<!-- row type two -->
<tr class="row2">
<td valign="middle" align="left">470110</td>
<td valign="middle" align="left"><a href="#">Lacinia lacinia ornare ac eros Nam nunc</a></td>
<td valign="middle" align="left">-45</td>
<td valign="middle" align="center">consequat</td>
<td valign="middle" align="center">lajuco</td>
<td valign="middle" align="center">handy</td>
</tr>
</table>
<!-- hint! you can add some between buttons to separate them more -->
<p class="paging">
<< First
< Previous
<strong>Page 3/3</strong>
<a href="#"> Next ></a>
<a href="#">Last >></a>
</p>
<!-- and a form example -->
<h2> This is how a simple form will look </h2>
<form action="#" method="post">
<table cellpadding="0" cellspacing="0" border="0" class="form_table">
<tr>
<td valign="middle" align="right">
Name:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" />
</td>
</tr>
<tr>
<td valign="middle" align="right">E-mail:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
Website:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="pass3" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
Hide e-mail:
</td>
<td valign="middle" align="left">
<select class="inputgri">
<option>No</option>
<option>Yes</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
Message:
</td>
<td valign="middle" align="left">
<textarea rows="3" cols="23" class="inputgri"></textarea>
</td>
</tr>
</table>
<p><input type="submit" class="button" value="Submit »" /></p>
</form>
<p>Nunc sed platea pede facilisi odio Vestibulum nibh laoreet sed pellentesque.
Urna Phasellus metus est adipiscing nonummy purus tortor Sed amet tellus.
In lacinia et Donec velit sed pellentesque </p>
<div class="notice">
This is a confirmation message after submiting a form.
</div>
<p>Integer elit Aliquam non gravida auctor congue Curabitur faucibus eget enim. Tempus Nulla ante Maecenas urna dolor urna consequat sociis fringilla orci. Lacinia lacinia ornare ac eros Nam nunc. </p>
<div class="notice_error">
An error message example.
</div>
<p>Quisque at turpis ipsum. Orci
penatibus nulla Nam id Pellentesque pharetra lorem sit elit porta. Vitae
id tincidunt nec orci in Nullam lacus Suspendisse ac odio. Interdum Sed interdum morbi neque.</p>
<div class="other_links">
<h2>You can also</h2>
<ul class="other">
<li><a href="#">Add some links</a></li>
<li><a href="#">At the bottom of every page</a></li>
<li><a href="#">To some external websites..</a></li>
</ul>
</div>
</div>
</div>
<!-- here ends header + content ( topcontent ) -->
<!-- footer -->
<div id="footer">
<div id="footer_bg">
<!-- right bottom link -->
<div id="design">
Template by <a href="http://www.alexandru.es">atrandafir</a><a href="http://free-templates.ru">.</a>
</div>
<!-- copyright -->
<p>
Designed with <xhtml/> and {css}
</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category