abstraction : Design 2 « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Design 2 




abstraction
     

<!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>Abstraction | Free Web Template by WebTemplateOcean.com</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />
<style type='text/css'>
/*
    designed by WebTemplateOcean
    http://www.webtemplateocean.com/
    released under Creative Commons Attribution-ShareAlike 3.0 license
*/

{
    margin: 0;
    padding: 0;
}

body {
    font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #999999;
    background: #000000;
}

h1, h2 {
    font-weight: normal;
}

h1 {
    float: left;
    padding: 40px 0 0 0;
    font-size: 2.5em;
    letter-spacing: -1px;
    color: #FFFFFF;
}

h1 a, h1 a:hover {
     color: #FFFFFF;
     background: none;
}

{
    padding: 10px 0;
    line-height: 1.5em;
    text-align: justify;
}

{
padding: 0 4px;
    color: #FFFFFF;
    text-decoration: none;
  background: #333333;
}

a:hover {
    background: #3F3F3F;
}

/* page */

#page {
    width: 960px;
    margin: auto;
}

#logo {
    height: 114px;
  padding: 0 15px;
}

/* menu */

#menu {
    float: right;    
  height: 73px;
    padding-right: 1px;
  background: url('abstraction-images/menu.gif') no-repeat right top;
  
}

#menu ul {
    list-style: none;
}

#menu ul li {
    display: block;
  float: left;
  height: 72px;
  margin-left: 1px;
  padding-left: 1px;
  background: #3E3E3E url('abstraction-images/menu.gif') no-repeat left top;
  border-bottom: 1px solid #5E5E5E;
}

#menu ul li a {
    display: block;
  float: left;
  margin: 0;
    padding: 20px 32px 0 32px;
    font-size: 1.1em;
  font-weight: bold;
  line-height: 52px;
  text-shadow: -1px 1px #000000
    color: #999999;
  background: #262626 url('abstraction-images/menu2.gif') repeat-x;
}

#menu ul li a:hover {
    color: #CCCCCC;
    text-decoration: none;
  background: #3E3E3E url('abstraction-images/menu.gif') repeat-x;
}

#topimg {
    height: 300px;
    background: url('abstraction-images/topimg.jpg') no-repeat top;
}

#main {
    padding: 0 15px;
  }

/* content */

#content {
    float: left;
    width: 560px;
    padding-top: 50px;
}

#content h2 {
    color: #FFFFFF;
    font-size: 2em;
}

#content h2 a {
    background: none;
}

/* post */

.post {
}

.entry {
    padding: 10px 0 30px 0;
}

.postmeta {
    font-size: .8em;
}

/* sidebar */

#sidebar {
    float: right;
    width: 315px;
    padding-top: 50px;
}

#sidebar h2 {
height: 66px;
    padding-left: 15px;
    font-size: 1.16em;
  font-weight: bold;
    line-height: 40px;
    color: #CCCCCC;
    background: #1C1C1C url('abstraction-images/h2.gif') no-repeat;
}

#sidebar p {
    text-align: left;
}

#sidebar ul {
    list-style: none;
    padding: 0 15px 30px 15px;
}

#sidebar ul li {
    padding: 0 11px;
    line-height: 2.5em;
    border-bottom: 1px solid #262626;
}

#sidebar ul li a {
    padding: 0 4px;
    background: none;
}

#sidebar ul li a:hover {
    background: #292929;
}

#sidebar .box {
    padding: 0 15px 25px 15px;
}

.clearing {
    clear: both;
    height: 1px;
    overflow: hidden;
}

/* footer */

#footer {
    height: 117px;
    clear: both;
    color: #999999;
    background: url('abstraction-images/footer.gif') no-repeat top;
}

#footer p {
    padding: 30px 30px 0 30px;
    font-size: .8em;
    text-align: center;
}

</style>


</head>
<body>
    <div id="page"
        <div id="logo">
            <h1><a href="#">Abstraction</a></h1>
            <div id="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div><!-- logo -->
        <div id="topimg">
            &nbsp;
        </div>  
        <div id="main">
            <div id="content">      
                <div class="post">
                    <h2><a href="#">Terms of Use</a></h2>
                    <p class="postmeta">Posted in <a href="#">Class apent</a> | Mar 252011 | <a href="#">comments</a></p>
                    <div class="entry">
                        <p>The template is released under <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution</a> license. So you are free to use it for personal or commercial purposes, modify it or redistribute as long as you keep the link back to WebTemplateOcean.com in the footer.</p>
                        <p>Under no circumstances can you use the template for websites with illegal or immoral (even if legalcontent. This includes, but is not limited to pornography, obscenity, homosexuality, abortion, violence, drugs, gambling.</p>
                    </div>
                </div>
                <div class="post">
                    <h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
                    <p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | Mar 242011 | <a href="#">comments</a></p>
                    <div class="entry">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec dui quis urna sollicitudin sodales. Fusce laoreet, ligula et rhoncus volutpat, felis magna varius tortor, ac molestie diam lorem in lectus. Aliquam venenatis mollis est, a porttitor ipsum interdum nec. Vestibulum sed risus ac nulla viverra pharetra.</p>
                        <p>Quisque congue lacus sed odio fermentum tincidunt. Proin vitae nulla velit. Cras consectetur commodo scelerisque. Curabitur leo nisl, blandit at tempus et, interdum at risus. Sed dui augue, pellentesque ac pulvinar id, malesuada eget diam. Integer elementum sem eget tortor faucibus id pellentesque lorem dignissim... <a href="#">more</a></p>
                    </div>
                </div>
                <div class="post">
                    <h2><a href="#">Maecenas venenatis rhoncus nulla</a></h2>
                    <p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | Mar 232011 | <a href="#">comments</a></p>
                    <div class="entry">
                        <p>Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla... <a href="#">more</a></p>
                    </div>
                </div>                      
            </div><!-- content -->
            <div id="sidebar">
                <h2>Quisque luctus</h2>
                <ul>
                    <li><a href="#">Ut pharetra neque eget</a></li>
                    <li><a href="#">Nisi tristique et feugiat</a></li>
                    <li><a href="#">Vulputate ac hendrerit ut</a></li>
                    <li><a href="#">Aenean sed lectus massa</a></li>
                    <li><a href="#">Quisque luctus sem suscipit</a></li>
                    <li><a href="#">Mauris vehicula elit dictum</a></li>
                </ul>
                <h2>Integer rhoncus</h2>
                <div class="box">
                    <p>Mauris sollicitudin tincidunt magna vitae semper. Curabitur ut pharetra quam. Integer rhoncus convallis urna vitae mattis. Sed pharetra massa ac metus fermentum et iaculis enim accumsan.</p>
                </div>
                <h2>Mauris sagittis</h2>
                <ul>
                    <li><a href="#">Mauris sagittis tellus</a></li>
                    <li><a href="#">Lacus tincidunt adipiscing</a></li>
                    <li><a href="#">Purus sagittis feugiat</a></li>
                    <li><a href="#">Suspendisse faucibus purus</a></li>
                    <li><a href="#">Fusce rhoncus velit odio</a></li>
                    <li><a href="#">Maecenas aliquam vehicula</a></li>
                </ul>
            </div><!-- sidebar -->  
            <div class="clearing">&nbsp;</div> 
        </div><!-- main -->
        <div id="footer">
            <p>Copyright &copy; 2011, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
        </div>  
    </div><!-- page -->
</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.acallia-development
31.accomplishable
32.actualbiz
33.adhesive
34.adios
35.advantage
36.aero-solutions
37.aerolyk
38.affection
39.agency
40.ahoy
41.al-infolabs
42.alexx-c
43.alieninvasion
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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.