alieninvasion
<?xml version="1.0"?>
<!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>Alien Invasion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* Design By: http://DENiAL-Design.com */
* {
padding: 0;
margin: 0;
outline: 0;
}
body {
color: #FFF;
font: 0.9em 'Trebuchet MS', Verdana, sans-serif;
background: #f2efdc;
}
a:link, a:visited {
text-decoration: none;
color: #26465B;
}
a:hover, a:active {
text-decoration: none;
color: #405f72;
}
h1 {
font-family: Georgia, serif;
font-size: 200%;
font-weight: normal;
color: #405f72;
}
h2 {
font-family: Georgia, serif;
font-size: 100%;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #405f72;
}
h3 {
margin: 0 0 5px 0;
padding: 0;
font-family: Georgia, serif;
font-size: 140%;
line-height: 1em;
font-weight: normal;
color: #405f72;
}
h3 a {
font-size: 110%;
}
h3 a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
li {
background: #959179 url(alieninvasion-images/bullet.png) left center no-repeat;
padding-left: 20px;
margin-bottom: 10px;
}
blockquote {
margin-left: 10px;
margin-right: 10px;
background: #CECAB5;
border-left: 5px solid #171717;
color: #7C8585;
padding: 5px;
font-family: Georgia, serif;
font-size: 100%;
font-weight: bold;
}
#wrapper {
width: 780px;
margin: 0px auto 10px;
}
.logo {
float: left;
width: 780px;
text-align: left;
margin-bottom: -36px;
padding-left: 15px;
background: url(alieninvasion-images/ufo_logo.png) no-repeat;
}
.logo h1 {
padding-left: 32px;
}
/*header-styles */
#header-{
float: right;
width: 50%;
font-size: 93%;
line-height: normal;
}
#header-ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#header-li {
float: left;
background: url("alieninvasion-images/left.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
}
#header-a {
float: left;
display: block;
background: url("alieninvasion-images/right.gif") no-repeat right top;
padding: 5px 15px 4px 6px;
text-decoration: none;
font-weight: bold;
color: #625E56;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header-a {
float: none;
}
/* End IE5-Mac hack */
#header-a:hover {
color: #eee;
}
#header-#current {
background-image: url("alieninvasion-images/left_on.gif");
}
#header-#current a {
background-image: url("alieninvasion-images/right_on.gif");
color: #fff;
padding-bottom: 5px;
}
.con_top {
background: #959179 url(alieninvasion-images/con_top.gif) no-repeat;
margin-left: -10px;
margin-top: 9px;
height: 17px;
}
#con_mid {
background: #959179 url(alieninvasion-images/cont.gif) top repeat;
padding: 10px;
}
.con_bottom {
background: #959179 url(alieninvasion-images/con_bottom.gif) no-repeat;
margin-left: -10px;
height: 17px;
}
#top {
margin-top: 17px;
background: #cecab5 url(alieninvasion-images/top.gif) top no-repeat;
padding: 10px;
}
#text p {
padding: 5px 15px;
}
.post {
width: 520px;
}
.post p {
padding: 0;
font-size: 100%;
line-height: 1.5em;
}
/* sidebar */
#sidebar {
float: right;
width: 190px;
padding: 5px;
}
#sidebar ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#sidebar li {
background: #959179 url(alieninvasion-images/bullet.png) left center no-repeat;
padding-left: 20px;
margin-bottom: 10px;
}
#sidebar h3 {
padding-top: 6px;
padding-left: 10px;
background: url(alieninvasion-images/side_title.png) no-repeat;
height: 35px;
margin-bottom: -5px;
}
.side_photo {
text-align: center;
padding: 5px;
}
.center {
text-align: center;
}
.left {
float: left;
padding-right: 5px;
}
.right {
float: right;
padding-left: 5px;
}
/* Meta */
.meta {
float: right;
width: 95%;
padding: 5px;
}
.comments {
text-align: left;
padding: 30px 0 0;
position: relative;
}
.commentslink {
padding: 2px 0 2px 20px;
background: url('alieninvasion-images/comments.png') left center no-repeat;
margin-right: 10px;
}
/*Footer styles*/
#footer {
background: url(alieninvasion-images/bottom.gif) bottom no-repeat;
text-align: center;
padding: 5px;
font-size: 0.8em;
}
#footer a {
color: #625E56;
text-decoration: none;
}
#footer a:hover, a:active {
color: #405f72;
background: none;
}
</style>
</head>
<body>
<div id="wrapper">
<!--Start of Wrapper div -->
<div class="logo">
<h1> DENiAL Design </h1>
</div>
<div id="header">
<ul>
<li> <a href="http://www.free-css.com/">Home</a> </li>
<li id="current"> <a href="http://www.free-css.com/">News</a> </li>
<li> <a href="http://www.free-css.com/">Products</a> </li>
<li> <a href="http://www.free-css.com/">About</a> </li>
<li> <a href="http://www.free-css.com/">Contact</a> </li>
</ul>
</div>
<br />
<div id="top">
<!-- Text div -->
<div class="con_top"></div>
<div id="con_mid">
<div id="sidebar">
<h3> Something </h3>
<ul>
<li> <a href="http://www.free-css.com/">Something</a> </li>
<li> <a href="http://www.free-css.com/">Something Else</a> </li>
<li> <a href="http://www.free-css.com/">OpenDesigns.org</a> </li>
<li> <a href="http://www.free-css.com/">Something</a> </li>
<li> <a href="http://www.free-css.com/">Something</a> </li>
<li> <a href="http://www.free-css.com/">Something</a> </li>
</ul>
<h3> Latest Gallery </h3>
<div class="side_photo"> <img src="alieninvasion-images/example.gif" alt="" /> </div>
<div class="center"> <a href="http://www.free-css.com/">View</a> | <a href="http://www.free-css.com/">Download</a> </div>
</div>
<div class="post">
<h3> <a href="http://www.free-css.com/">Lorem ipsum dolor</a> </h3>
<div class="left"> <img src="alieninvasion-images/example.gif" alt="" /> </div>
This Design was made by, Jason Kingery of DENiAL Design. You are free to use this template however you see fit, all I ask is that you keep the link in the footer to denial-Design, or some sort of credit. Otherwise, rip it apart, and learn away. And as always, I hope you enjoy using this template as much, as I enjoyed creating it. You can check out more of my Designs @ Open Designs. -Jason </div>
<br />
<div class="post">
<h3> <a href="http://www.free-css.com/">Lorem ipsum dolor</a> </h3>
<div class="right"> <img src="alieninvasion-images/example.gif" alt="" /> </div>
sit amet, consectetuer adipiscing elit. Praesent pellentesque euismod elit. Praesent facilisis leo sed diam. Curabitur imperdiet interdum erat. Sed lorem. Donec at nibh. Sed eu quam nec nunc tempus sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
<br />
<div class="post">
<h3> <a href="http://www.free-css.com/">Different Tags</a> </h3>
<h1> H1 Tag </h1>
<h2> H2 Tag </h2>
<h3> H3 Tag </h3>
<br />
<h2> Unordered List </h2>
<ul>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
<li>Item 4 </li>
<li>Item 5 </li>
</ul>
<br />
<blockquote> This is some blockquote text, just to show you what the blockquote looks like, I really do hope you enjoy this template,and find something really great to do with it! </blockquote>
</div>
<br />
</div>
<div class="con_bottom"></div>
</div>
<!--Text div ends -->
<div id="footer">
<!-- Footer start -->
© Name | Design by <a href="http://denial-Design.com">DENiAL Design</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div>
<!-- Footer ends -->
</div>
<!-- Wrapper ends -->
</body>
</html>
Related examples in the same category