neoplanet-01 : Design 4 « Templates « HTML / CSS






neoplanet-01

   

<?xml version="1.0"?>
<!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>
    <!-- This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <meta name="robots" content="all,follow" />

    <meta name="author" lang="en" content="All: Your website name [www.your-website.com]; e-mail: info@your-website.com" />
    <meta name="copyright" lang="en" content="webdesign: Vit Dlouhy [Nuvio - www.nuvio.cz; NuvioTemplates - www.nuviotemplates.com]; e-mail: hello@nuviotemplates.com" />

    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    
<style type='text/css'>
/* ----------------------------------------------------------------------------------------------------------

    This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates

---------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------
HTML
---------------------------------------------------------------------------------------------------------- */

body {background:#5E6D70; color:#000;}

a {color:#E6E9EA;}
a:hover {color:#FFF;}

fieldset {border:1px solid #AEB7BC;}
legend {background:#C13B00; color:#FFF;}

table.table-style01 th {background:#3A4446; color:#CAD0D3;}
table.table-style01 th, table.table-style01 td {border:1px solid #76878C;}
table.table-style01 tr.bg td {background:#A0ABB0;}

ul.ul-style01 ul li {color:#3A4446;}

/* ----------------------------------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------------------------------- */

#main {border-top:10px solid #8E2B00; background:#929FA4;}

#header {background-color:#1B1D1E;}

#logo {color:#FFF;}
#logo span {color:#F80;}
#logo a {color:#FFF;}

#url {color:#526062;}
#url a {color:#526062;}
#url a:hover {color:#6A7C7E;}

#slogan {background:#3A4446; color:#AEB6BD;}

#content h1 {border-bottom:1px solid #5E6D70;}

#content #perex {border-bottom:1px solid #AEB7BC;}           
#content .boxes {border:1px solid #BCC3C8; background:#A0ABB0;}
#content .input-submit {border:1px solid #424E4F; background:#424E4F; color:#FFF;}

#aside {background:#526062;}

#search {background:#C13B00;}
#search #search-input {border:1px solid #FFF;}
#search #search-submit {border:1px solid #8E2B00; background:#8E2B00; color:#FFF;}

#nav li a {border-bottom:1px solid #76878C; color:#AEB6BD;}
#nav li#nav-active a {color:#FFF;}
#nav li a:hover {color:#FFF;}

#footer {background:#3A4446; color:#AEB6BD;}
#footer a {color:#AEB6BD;}
#footer a:hover {color:#FFF;}


</style>


    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/scheme.css" />
    <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />

    <title>Your website name | Homepage</title>
</head>

<body>

<div id="main">

    <!-- Header -->
    <div id="header" class="box">

        <!-- Your logo -->
        <h3 id="logo"><a href="#">Your <span>website</span> name</a></h3>

        <!-- Your website address -->
        <p id="url"><a href="#">www.your-server.com</a></p>
        
        <hr class="noscreen" />        
        
        <!-- Navigation -->
        <p class="noscreen noprint"><em>Quick links: <a href="#content">content</a>, <a href="#nav">navigation</a>, <a href="#search">search</a>.</em></p>
        
        <hr class="noscreen" />

    </div> <!-- /header -->

    <!-- 2 columns (content + sidebar) -->
    <div id="cols" class="box">

        <!-- Main content -->
        <div id="content">

            <!-- Your slogan -->
            <div id="slogan">
                
                <p class="nom">Place for your business slogan.</p>
                
            </div> <!-- /slogan -->
            
            <hr class="noscreen" />

            <!-- Title -->
            <h1>Lorem ipsum dolor sit amet</h1>
                        
            <div id="content-in">

                <p id="perex"><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing lit. Aliquam pellentesque enim blandit enimestan bibendum blandit. 
                Integer eu leo ac est aliquet imperdiet. Quisque neces ena justo id augue posuere msuada. Nullam ac metus. Cras non leo ut est placerat 
                condimentum. Aliquam ut enim.</strong></p> <!-- /perex -->
                
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enimeas bibendum blandit. Integer eu leo ac 
                est aliquet imperdiet. Quisque nec justo id augue <a href="#">posuere malesuada</a>. Nullam ac metus. Cras non leo utesen est placerat 
                condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris auctor arcu sit amet felis. Donec 
                eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer. Sed id ante.</p>
                
                <p><img src="tmp/image.gif" width="200" height="150" alt="" class="f-right" />
                Donec commodo. Pellentesque nunc. Ut blandit nisl nec nunc. Donec sapien est, imperdiet ultrices, cursus at, elementum ac, neque. Cum sociis 
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio. Sed ornare aliquam tortor. Aliquam aliquam blandit 
                ante. Fusce elit. Donec blandit. Sed nisi. Proin eros lectus, fermentum at, tristique quis, molestie quis, lectus. Nulla facilisi. Nullam 
                porttitor feugiat enim. Nunc sed orci. Morbi urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam adipiscing. Maecenas 
                varius eros in urna.</p>

                <ul class="ul-style01">
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet
                        <ul>
                            <li>Lorem ipsum dolor sit amet</li>
                            <li>Lorem ipsum dolor sit amet
                                <ul>
                                    <li>Lorem ipsum dolor sit amet</li>
                                    <li>Lorem ipsum dolor sit amet</li>
                                    <li>Lorem ipsum dolor sit amet</li>
                                </ul>
                            </li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                    </li>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Lorem ipsum dolor sit amet</li>
                </ul>

                <h2>Lorem ipsum sit dolor amet</h2>
                
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enimeas bibendum blandit. Integer eu leo ac 
                est aliquet imperdiet. Quisque nec justo id augue <a href="#">posuere malesuada</a>. Nullam ac metus. Cras non leo utesen est placerat 
                condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris auctor arcu sit amet felis. Donec 
                eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer. Sed id ante.</p>
                
                <div class="boxes">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elites est. Aliquam pellentesque enim blandit enimeas bibendum blandit. Integer 
                    eu leo ac est aliquet asemeas imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo utesen est placerat 
                    condimentum. Aliquam ut enim.</p>
                </div>
                
                <p>Donec commodo. Pellentesque nunc. Ut blandit nisl nec nunc. Donec sapien est, imperdiet ultrices, cursus at, elementum ac, neque. Cum sociis 
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio. Sed ornare aliquam tortor. Aliquam aliquam blandit ante. 
                Fusce elit. Donec blandit. Sed nisi. Proin eros lectus, fermentum at, tristique quis, molestie quis, lectus. Nulla facilisi. Nullam porttitor 
                feugiat enim. Nunc sed orci. Morbi urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam adipiscing. Maecenas varius eros in urna.</p>
                
                <h3>Lorem ipsum sit dolor amet</h3>
                
                <table class="table-style01">
                    <tr>
                        <th>Lorem ipsum</th>
                        <th>Lorem ipsum</th>
                        <th>Lorem ipsum</th>
                        <th>Lorem ipsum</th>
                        <th>Lorem ipsum</th>
                    </tr>
                    <tr>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                    <tr class="bg">
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                    <tr class="bg">
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                    </tr>
                </table>
                
                <h3>Lorem ipsum sit dolor amet</h3>
                
                <fieldset>
                    <legend>Form</legend>
                    
                    <form action="" method="post">
                    <table class="nom">
                        <tr>
                            <td>Name:</td>
                            <td><input type="text" size="30" name="" /></td>
                        </tr>
                        <tr>
                            <td>E-mail:</td>
                            <td><input type="text" size="30" name="" value="@" /></td>
                        </tr>
                        <tr>
                            <td class="va-top">Message:</td>
                            <td><textarea cols="50" rows="5" name=""></textarea></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="t-right"><input type="submit" value="Send form" class="input-submit" /></td>
                        </tr>
                    </table>                    
                    </form>
                    
                </fieldset>
                                
            </div> <!-- /content-in -->                
               
        </div> <!-- /content -->

        <hr class="noscreen" />

        <!-- Sidebar -->
        <div id="aside">
        
            <div id="aside-in">

                <!-- Search form -->
                <div id="search">
                
                    <form action="" method="get">
                        <div>
                            <span class="noscreen">Fulltext:</span>
                            <input type="text" size="30" name="query" id="search-input" /><input type="submit" value="Search" id="search-submit" />
                        </div>
                    </form>
                  
                </div> <!-- /search -->
    
                <hr class="noscreen" />
    
                <!-- Navigation -->
                <h3 class="noscreen">Navigation</h3>        
                
                <ul id="nav">
                    <li id="nav-active"><a href="#">Homepage</a></li> <!-- Active page (highlighted) -->
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
    
            </div> <!-- /aside-in -->
            
        </div> <!-- /aside -->
    
    </div> <!-- /cols -->

    <hr class="noscreen" />
    
    <!-- Footer -->
    <div id="footer">

        <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->            
        <p class="f-right"><a href="http://www.nuviotemplates.com/">Free web templates</a> by <a href="http://www.nuvio.cz/">Nuvio</a>, Internet: <a href="http://www.zvon.cz/">Katalog</a></p>
        <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->
        
        <p>&copy;&nbsp;2008 <a href="#">Your website name</a> | <a href="http://free-templates.ru">free-templates.ru</a></p>

    </div> <!-- /footer -->

</div> <!-- /main -->

</body>
</html>

   
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chicanery
47.chromz
48.churchsitev.2
49.citrus-island1-1
50.clementine
51.clicker
52.modernclassic
53.modernmagic
54.modernworld
55.A_Simple_Theme
56.minimalistica
57.miniseries
58.mint-idea
59.minty
60.mirax
61.miscellaneous
62.mistybud
63.mlpdesign02
64.mlpdesign03
65.mlpdesign04
66.mlpdesign08
67.model-4-me
68.model-portfolio
69.modelagency
70.modelportfolio
71.model_2
72.moderna
73.Modified
74.modulation
75.module-mag
76.mokofactory
77.monster
78.mork-horisont
79.mountainbreeze
80.mouse
81.mrtechie
82.multiflex2
83.multiple
84.multiplex
85.music
86.muzzle
87.MyCode
88.mydiary
89.myfamily
90.myhedspacefree08
91.mykindathing
92.myportfolio
93.mystic-garden
94.Mythology
95.myvalentine
96.naeve
97.natheless
98.nationalpark
99.neapolitan
100.neatness
101.nebuladog
102.nedweb
103.NelVoize
104.neoneon
105.neonix
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year