alieninvasion : Design 2 « Templates « HTML / CSS






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 -->
    &copy; 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

1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.ablaze
27.aboutfruts
28.abrasive
29.abscond
30.abstraction
31.acallia-development
32.accomplishable
33.actualbiz
34.adhesive
35.adios
36.advantage
37.aero-solutions
38.aerolyk
39.affection
40.agency
41.ahoy
42.al-infolabs
43.alexx-c
44.alpha
45.altered
46.altruism
47.ambiance
48.amoreira
49.angryhornet
50.anibanner01
51.AnotherSquare
52.anther
53.anthropod
54.Antikoerperchen
55.antiquity
56.aphotic
57.applique
58.aprilshowers
59.Arbenting-MinimalistResumeTemplate
60.expanding-portfolio
61.experience
62.expertvision
63.exploitable
64.ezine02
65.familiar
66.favorite-cakes
67.featherlight
68.featuring
69.femflex1
70.fernando1
71.fertilization
72.Fibre
73.fibreglass
74.filaments
75.findingpeace
76.firerescuesquad
77.fivestar
78.Flair Template
79.flair
80.flan2
81.flange
82.flattering
83.flavour
84.fleur
85.flightandfight
86.fluidity
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic