safe-as-houses
<!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>Safe As Houses</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*universal*/
body {
background-image: url(safe-as-houses-images/body-back.jpg);
background-repeat: repeat-x;
background-color: #F7FAEF;
}
a:link {
color: #fdf7f7;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #fdf7f7;
}
a:hover {
text-decoration: none;
color: #ABB09E;
}
a:active {
text-decoration: none;
color: #fdf7f7;
}
a {
font-family: serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 140px;
color: #fdf7f7;
letter-spacing: -5px;
clear: both;
font-weight: normal;
text-align: center;
line-height: 100px;
margin: 0px;
padding: 0px;
list-style-type: none;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 55px;
color: #fdf7f7;
letter-spacing: -5px;
clear: both;
font-weight: normal;
text-align: center;
line-height: 60px;
margin: 0px;
padding: 0px;
font-style: normal;
}
h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
color: #fdf7f7;
letter-spacing: -1px;
clear: both;
font-weight: normal;
text-align: left;
line-height: 30px;
margin: 0px;
padding: 0px;
text-decoration: underline;
text-transform: capitalize;
margin-bottom: 10px;
margin-top: 10px;
}
#container {
width: 880px;
background-image: url(safe-as-houses-images/main-back.jpg);
background-repeat: repeat-x;
background-color: #45484C;
margin-top: 20px;
margin-bottom: 20px;
padding: 40px;
margin: auto;
z-index: 1;
position: relative;
border: 2px ridge #fdf7f7;
border-left: 2px groove #fdf7f7;
border-top: 2px groove #fdf7f7;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 20px;
}
#outer {
width: 1190px;
margin: auto;
background-image: url(safe-as-houses-images/brackets.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
.divider{
background-color: #333333;
height: 1px;
border-top: 1px solid #000;
margin: 0px;
clear: both;
}
/*header*/
#header {
color: #dee7c8;
}
#header h2 a {
color: #dee7c8;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 55px;
letter-spacing: -5px;
clear: both;
font-weight: normal;
text-align: center;
line-height: 60px;
margin: 0px;
padding: 0px;
font-style: normal;
}
#header h2 a:visited {
color: #dee7c8;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 55px;
letter-spacing: -5px;
clear: both;
font-weight: normal;
text-align: center;
line-height: 60px;
margin: 0px;
padding: 0px;
font-style: normal;
}
#header h2 a:hover {
color: #fdf7f7;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 55px;
letter-spacing: -5px;
clear: both;
font-weight: normal;
text-align: center;
line-height: 60px;
margin: 0px;
padding: 0px;
font-style: normal;
}
#header h2 a:active {
color: #dee7c8;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 55px;
letter-spacing: -5px;
clear: both;
font-weight: normal;
text-align: center;
line-height: 60px;
margin: 0px;
padding: 0px;
font-style: normal;
}
.quote {
float: right;
width: 250px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 12px;
color: #abb09e;
text-align: right;
}
/*main content*/
.article {
padding: 10px;
width: 680px;
float: right;
display: inline;
text-align: justify;
color: #FDF7F7;
font-size: 14px;
font-weight: normal;
letter-spacing: normal;
}
.article h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
color: #fdf7f7;
letter-spacing: -1px;
clear: both;
font-weight: normal;
text-align: left;
line-height: 36px;
margin: 0px;
padding: 0px;
}
.article .digg-this {
color: #454749;
position: absolute;
right: 5px;
font-family: serif;
font-size: 36px;
font-weight: normal;
font-style: normal;
width: 300px;
margin-top: -20px;
}
.digg-this a:link {
color: #454749;
position: absolute;
right: 45px;
font-family: serif;
font-size: 36px;
font-weight: normal;
font-style: normal;
}
.article .digg-this a:visited {
color: #454749;
position: absolute;
right: 45px;
font-family: serif;
font-size: 36px;
font-weight: normal;
font-style: normal;
}
.article .digg-this a:hover {
color: #ABB09E;
position: absolute;
right: 45px;
font-family: serif;
font-size: 36px;
font-weight: normal;
font-style: normal;
}
.article .digg-this a:active {
color: #454749;
position: absolute;
right: 45px;
font-family: serif;
font-size: 36px;
font-weight: normal;
font-style: normal;
}
.article .digg-this a {
color: #454749;
position: absolute;
right: 45px;
font-family: serif;
font-size: 36px;
font-weight: normal;
font-style: normal;
}
.body-text {
font-family: "Helvetica Neue", Helvetica, Arial;
color: #c9c8c8;
font-weight: lighter;
}
/*sidebar*/
#sidebar ul {
margin: 0px;
padding: 0px;
}
#sidebar li {
list-style-type: none;
list-style-position: outside;
color: #9fa58f;
font-style: italic;
font-weight: normal;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 1px;
}
#sidebar li a {
list-style-type: none;
list-style-position: outside;
color: #9fa58f;
font-style: italic;
font-weight: normal;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
}
#sidebar li a:visited {
list-style-type: none;
list-style-position: outside;
color: #9fa58f;
font-style: italic;
font-weight: normal;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
}
#sidebar li a:hover {
list-style-type: none;
list-style-position: outside;
color: #fdf7f7;
font-style: italic;
font-weight: normal;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
}
#sidebar li a:active {
list-style-type: none;
list-style-position: outside;
color: #9fa58f;
font-style: italic;
font-weight: normal;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
}
#sidebar {
width: 150px;
float: left;
display: inline;
}
.ampersand {
color: #abb09e;
font-size: 200px;
line-height: 160px;
}
.your-words {
color: #ABB09E;
font-size: 26px;
line-height: 24px;
}
.about {
color: #454749;
width: 600px;
float: right;
font-size: 14px;
line-height: 18px;
}
.about h3 {
color: #454749;
text-decoration: underline;
font-size: 16px;
padding-top: 5px;
}
/*footers*/
#footer-1 {
clear: both;
}
#footer-2 {
clear: both;
padding-top: 40px;
padding-bottom: 20px;
}
#footer-1 {
clear: both;
padding-top: 40px;
}
.twitter {
width: 200px;
color: #454749;
font-size: 24px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 20px;
float: left;
clear: both;
}
.twitter ul {
margin: 0px;
padding: 0px;
margin-top: -20px;
}
.twitter li {
width: 200px;
color: #454749;
font-size: 24px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 20px;
list-style-position: inside;
list-style-type: none;
}
.twitter a:link {
color: #454749;
font-style: normal;
}
.twitter a:visited {
color: #454749;
font-style: normal;
}
.twitter a:hover {
color: #ABB09E;
font-style: normal;
}
.twitter a:active {
color: #454749;
font-style: normal;
}
.about img {
margin-top: 25px;
border: 1px solid #000;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 0px;
}
.credits {
font-size: 13px;
color: #83867A;
text-align: center;
padding-top: 5px;
letter-spacing: 1px;
}
.credits a:link {
font-size: 13px;
color: #83867A;
text-align: center;
padding-top: 20px;
letter-spacing: 1px;
font-style: normal;
font-weight: normal;
}
.credits a:visited{
font-size: 13px;
color: #83867A;
text-align: center;
padding-top: 20px;
letter-spacing: 1px;
font-style: normal;
font-weight: normal;
}
.credits a:hover {
font-size: 13px;
color: #fff;
text-align: center;
padding-top: 20px;
letter-spacing: 1px;
font-style: normal;
font-weight: normal;
}
.credits a:active {
font-size: 13px;
color: #83867A;
text-align: center;
padding-top: 20px;
letter-spacing: 1px;
font-style: normal;
font-weight: normal;
}
.footer-big {
font-size: 48px;
color: #282A2B;
line-height: 30px;
font-style:normal;
}
.footer-big a:link {
font-size: 48px;
color: #282A2B;
line-height: 30px;
font-style:normal;
}
.footer-big a:visited {
font-size: 48px;
color: #282A2B;
line-height: 30px;
font-style:normal;
}
.footer-big a:hover {
font-size: 48px;
color: #83867A;
line-height: 30px;
font-style:normal;
}
.footer-big a:active {
font-size: 48px;
color: #282A2B;
line-height: 30px;
font-style:normal;
}
.footer-mid{
font-size: 36px;
color: #454749;
left: 60px;
line-height: 30px;
font-style:normal;
}
.footer-mid a:link {
font-size: 36px;
color: #454749;
left: 60px;
line-height: 30px;
font-style:normal;
}
.footer-mid a:visited {
font-size: 36px;
color: #454749;
left: 60px;
line-height: 30px;
font-style:normal;
}
.footer-mid a:hover {
font-size: 36px;
color: #83867A;
left: 60px;
line-height: 30px;
font-style:normal;
}
.footer-mid a:active {
font-size: 36px;
color: #454749;
left: 60px;
line-height: 30px;
font-style:normal;
}
.footer-small {
font-size: 18px;
color: #454749;
line-height: 30px;
font-style:normal;
}
.footer-small a:link {
font-size: 18px;
color: #454749;
line-height: 30px;
font-style:normal;
}
.footer-small a:visited {
font-size: 18px;
color: #454749;
line-height: 30px;
font-style:normal;
}
.footer-small a:hover {
font-size: 18px;
color: #83867A;
line-height: 30px;
font-style:normal;
}
.footer-small a:active {
font-size: 18px;
color: #454749;
line-height: 30px;
font-style:normal;
}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="css/stylesheet-ie6.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="outer">
<div id="container">
<div id="header">
<div class="quote"> This theme is perfect for Bloggers, Chatterboxes & Wordsmiths who want less distractions and more words!</div>
<h1>Safe As Houses</h1>
<h2>A new theme using only <a href="#">web safe</a> typography</h2>
</div>
<div id="sidebar"> <span class="ampersand">&</span> <span class="your-words">Your Words.</span>
<h3>Categories</h3>
<ul>
<li><a href="#">Stuff You Write About</a></li>
<li><a href="#">More kinds of Stuff</a></li>
<li><a href="#">Some Other Stuff</a></li>
</ul>
<h3>Pages</h3>
<ul>
<li><a href="#">A Page About You</a></li>
<li><a href="#">More About You</a></li>
<li><a href="#">It's All About You!</a></li>
</ul>
<h3>Posts</h3>
<ul>
<li><a href="#">A Great Story Or Two</a></li>
<li><a href="#">Another Post I Guess</a></li>
<li><a href="#">Good Huh?</a></li>
</ul>
</div>
<div class="article">
<h2>Lorem ipsum dolor sit amet, consectetur. </h2>
Donec id aliquet sem. Proin sem nulla, imperdiet quis pretium tincidunt, vestibulum ut erat. Fusce varius, est nec imperdiet hendrerit, massa elit consectetur magna, a porta ligula justo sollicitudin purus. Nulla et justo turpis. Etiam tempus pellentesque tellus, ut dapibus velit aliquam vel. Sed porta sapien ac elit ultrices sit amet pellentesque mauris bibendum. Aenean facilisis est vel quam aliquam eu malesuada nunc viverra. Fusce ac metus id magna porttitor lacinia. Vivamus dapibus leo at mi imperdiet at bibendum ipsum blandit. Phasellus sodales nunc ac lorem aliquet volutpat. Etiam pharetra pretium nisl ac feugiat. Donec velit ante, pretium sit amet volutpat et, porta et sem. Vestibulum a lorem risus, id molestie leo. Curabitur ac ante ligula.
<p class="body-text">Etiam molestie, massa sed ornare consectetur, metus mauris aliquam purus, vulputate auctor mauris lectus quis magna. Praesent convallis, purus eget vestibulum molestie, turpis orci adipiscing orci, id congue lacus magna ut mi. Praesent ac neque lectus. Donec nibh augue, porttitor eget vehicula id, ullamcorper a lectus. Sed quam enim, imperdiet non vehicula a, feugiat adipiscing tellus. Sed quis ligula ligula, sodales vulputate ipsum. Nullam aliquam tortor lacus. Vivamus et aliquam neque. Nunc auctor pellentesque libero, non dictum nulla porttitor a. <a href="#">Nunc auctor tincidunt leo</a>, tincidunt aliquet ante cursus eu. Nunc nulla metus, semper ut auctor vel, aliquam faucibus nulla. Nulla nec elit arcu. Nulla vitae urna sit amet orci pellentesque iaculis ut condimentum lectus. Pellentesque ut erat a enim sagittis congue eu eget purus. Etiam molestie justo quis dolor egestas bibendum eu nec est. Vestibulum lobortis mattis nulla in tristique.Curabitur eu viverra ante.</p>
<p class="body-text">Sed eu nisi magna. Nulla facilisi. Nunc ornare quam quis augue elementum eu lobortis arcu ornare. Sed mollis tincidunt nibh, a fringilla erat feugiat id. Vivamus facilisis commodo velit vitae vulputate. In vitae venenatis erat. Sed pharetra molestie mollis. Fusce ullamcorper nisi et sapien adipiscing quis iaculis nulla gravida. Nulla eget sapien mi, quis faucibus arcu. Donec venenatis, neque aliquet ultrices aliquam, elit sem dictum ante, quis pellentesque mi eros id lorem. Proin sagittis vehicula justo.</p>
<div class="digg-this"><a href="#" >{digg this}</a></div>
< <a href="#">Next</a> ~ OR ~ <a href="#">Previous</a> </div>
<div id="footer-1">
<div class="divider"></div>
<div class="twitter">Your Name is:
<ul id="twitter_update_list">
<li><span>@<a href="#">maneki80</a> lol</span> <a style="font-size: 85%;" href="#">about 2 hours ago</a></li>
</ul>
<a href="#" >follow me on Twitter</a> </div>
<div class="about">
<h3>More About Your Name</h3>
Sed quis ligula ligula, sodales vulputate ipsum. Nullam aliquam tortor lacus. Vivamus et aliquam neque. Nunc auctor pellentesque libero, non dictum nulla porttitor a. Nunc auctor tincidunt leo, tincidunt aliquet ante cursus eu. Nunc nulla metus, semper ut auctor vel, aliquam faucibus nulla. Nulla nec elit arcu. Nulla vitae urna sit amet orci pellentesque iaculis ut condimentum lectus.</div>
<div class="twitter">Your Name's Recent Photos: <a href="#" >follow me on Flickr</a> </div>
<div class="about"> <a href="#"><img src="safe-as-houses-images/demo/4612618262_fc0886771d_s.jpg" alt="" height="75" width="75" /></a> <a href="#"><img src="safe-as-houses-images/demo/4612617564_e512f4c30d_s.jpg" alt="" height="75" width="75" /></a> <a href="#"><img src="safe-as-houses-images/demo/4612616906_94df27fe9e_s.jpg" alt="" height="75" width="75" /></a> <a href="#"><img src="safe-as-houses-images/demo/4371871107_87f1f5f085_s.jpg" alt="" height="75" width="75" /></a> <a href="#"><img src="safe-as-houses-images/demo/4372622222_fb7036e20d_s.jpg" alt="" height="75" width="75" /></a> <a href="#"><img src="safe-as-houses-images/demo/4372621560_203aa14641_s.jpg" alt="" height="75" width="75" /></a> <a href="#"><img src="safe-as-houses-images/demo/4371870023_feb2e86f54_s.jpg" alt="" height="75" width="75" /></a> </div>
</div>
<div class="divider"></div>
<div id="footer-2"> <span class="footer-big"><a href="#">{twitter}</a></span> <span class="footer-mid"><a href="#">{delicious}</a></span> <span class="footer-big"><a href="#">{myspace}</a></span> <span class="footer-small"><a href="#">{linked in}</a></span> <span class="footer-mid"><a href="#">{youtube}</a></span> <span class="footer-small"><a href="#">{smashing magazine} </a></span> <span class="footer-mid"><a href="#">{flickr}</a></span> <span class="footer-small"><a href="#">{artician}</a></span> <span class="footer-mid"><a href="#">{digg}</a></span> <span class="footer-mid"><a href="#">{link}</a></span> <span class="footer-big"><a href="#">{site}</a></span> <span class="footer-small"><a href="#">{linked in}</a></span> <span class="footer-mid"><a href="#">{youtube}</a></span> <span class="footer-big"><a href="#">{facebook}</a></span> <span class="footer-small"><a href="#">{your other site}</a></span> <span class="footer-small"><a href="#">{link}</a></span> <span class="footer-mid"><a href="#">{link}</a></span> <span class="footer-small"><a href="#">{your other site}</a></span> <span class="footer-small"><a href="#">{link}</a></span> <span class="footer-mid"><a href="#">{link}</a></span> <span class="footer-mid"><a href="#">{other site}</a></span> <span class="footer-small"><a href="#">{other site}</a></span> </div>
</div>
<div class="credits">Copyright <a href="#">Your Name</a> 2009 ~ <a href="#">Link can go here?</a> ~ <a href="#">Another Link can go here? ~</a> Using the Safe As Houses theme by <a href="http://theearlybird.co.uk">the earlybird</a></div>
</div>
</body>
</html>
Related examples in the same category