home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Templates / CSS / CrystalX / index.html
Encoding:
Extensible Markup Language  |  2006-12-05  |  12.2 KB  |  258 lines
  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.     <meta http-equiv="content-language" content="cs" />
  7.     <meta name="robots" content="all,follow" />
  8.  
  9.     <meta name="author" content="All: ... [Nazev webu - www.url.cz]; e-mail: info@url.cz" />
  10.     <meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy@nuvio.cz" />
  11.     
  12.     <title>CrystalX</title>
  13.     <meta name="description" content="..." />
  14.     <meta name="keywords" content="..." />
  15.     
  16.     <link rel="index" href="./" title="Home" />
  17.     <link rel="stylesheet" media="screen,projection" type="text/css" href="./css/main.css" />
  18.     <link rel="stylesheet" media="print" type="text/css" href="./css/print.css" />
  19.     <link rel="stylesheet" media="aural" type="text/css" href="./css/aural.css" />
  20. </head>
  21.  
  22. <body id="www-url-cz">
  23.  
  24. <!-- Main -->
  25. <div id="main" class="box">
  26.  
  27.     <!-- Header -->
  28.     <div id="header">
  29.  
  30.         <!-- Logotyp -->
  31.         <h1 id="logo"><a href="./" title="CrystalX [Go to homepage]">Crystal<strong>X</strong><span></span></a></h1>
  32.         <hr class="noscreen" />          
  33.  
  34.         <!-- Quick links -->
  35.         <div class="noscreen noprint">
  36.             <p><em>Quick links: <a href="#content">content</a>, <a href="#tabs">navigation</a>, <a href="#search">search</a>.</em></p>
  37.             <hr />
  38.         </div>
  39.  
  40.         <!-- Search -->
  41.         <div id="search" class="noprint">
  42.             <form action="" method="get">
  43.                 <fieldset><legend>Search</legend>
  44.                     <label><span class="noscreen">Find:</span>
  45.                     <span id="search-input-out"><input type="text" name="" id="search-input" size="30" /></span></label>
  46.                     <input type="image" src="design/search_submit.gif" id="search-submit" value="OK" />
  47.                 </fieldset>
  48.             </form>
  49.         </div> <!-- /search -->
  50.  
  51.     </div> <!-- /header -->
  52.  
  53.      <!-- Main menu (tabs) -->
  54.      <div id="tabs" class="noprint">
  55.  
  56.             <h3 class="noscreen">Navigation</h3>
  57.             <ul class="box">
  58.                 <li><a href="#">Home<span class="tab-l"></span><span class="tab-r"></span></a></li>
  59.                 <li id="active"><a href="#">Weblog<span class="tab-l"></span><span class="tab-r"></span></a></li> <!-- Active -->
  60.                 <li><a href="#">About Me<span class="tab-l"></span><span class="tab-r"></span></a></li>
  61.                 <li><a href="#">Photos<span class="tab-l"></span><span class="tab-r"></span></a></li>
  62.                 <li><a href="#">Portfolio<span class="tab-l"></span><span class="tab-r"></span></a></li>
  63.                 <li><a href="#">Contact<span class="tab-l"></span><span class="tab-r"></span></a></li>
  64.                 <li><a href="#">Links<span class="tab-l"></span><span class="tab-r"></span></a></li>
  65.             </ul>
  66.  
  67.         <hr class="noscreen" />
  68.      </div> <!-- /tabs -->
  69.  
  70.     <!-- Page (2 columns) -->
  71.     <div id="page" class="box">
  72.     <div id="page-in" class="box">
  73.  
  74.         <div id="strip" class="box noprint">
  75.  
  76.             <!-- RSS feeds -->
  77.             <p id="rss"><strong>RSS:</strong> <a href="#">articles</a> / <a href="#">comments</a></p>
  78.             <hr class="noscreen" />
  79.  
  80.             <!-- Breadcrumbs -->
  81.             <p id="breadcrumbs">You are here: <a href="#">Home</a> > <a href="#">Category</a> >  <strong>Page</strong></p>
  82.             <hr class="noscreen" />
  83.             
  84.         </div> <!-- /strip -->
  85.  
  86.         <!-- Content -->
  87.         <div id="content">
  88.  
  89.             <!-- Article -->
  90.             <div class="article">
  91.                 <h2><span><a href="#">This is my best article</a></span></h2>
  92.                 <p class="info noprint">
  93.                     <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
  94.                     <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
  95.                     <span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
  96.                     <span class="comments"><a href="#">Comments</a></span>
  97.                 </p>
  98.  
  99.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
  100.                 Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
  101.                 ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
  102.                 auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
  103.                 Sed id ante.</p>
  104.  
  105.                 <p class="btn-more box noprint"><strong><a href="#">Continue</a></strong></p>
  106.             </div> <!-- /article -->
  107.  
  108.             <hr class="noscreen" />
  109.  
  110.             <!-- Article -->
  111.             <div class="article">
  112.                 <h2><span><a href="#">This is my third article</a></span></h2>
  113.                 <p class="info noprint">
  114.                     <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
  115.                     <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
  116.                     <span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
  117.                     <span class="comments"><a href="#">Comments</a></span>
  118.                 </p>
  119.  
  120.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
  121.                 Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
  122.                 ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
  123.                 auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
  124.                 Sed id ante.</p>
  125.  
  126.                 <p class="btn-more box noprint"><strong><a href="#">Continue</a></strong></p>
  127.             </div> <!-- /article -->
  128.  
  129.             <hr class="noscreen" />
  130.             
  131.             <!-- Article -->
  132.             <div class="article">
  133.                 <h2><span><a href="#">This is my second article</a></span></h2>
  134.                 <p class="info noprint">
  135.                     <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
  136.                     <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
  137.                     <span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
  138.                     <span class="comments"><a href="#">Comments</a></span>
  139.                 </p>
  140.  
  141.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
  142.                 Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
  143.                 ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
  144.                 auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
  145.                 Sed id ante.</p>
  146.  
  147.                 <p class="btn-more box noprint"><strong><a href="#">Continue</a></strong></p>
  148.             </div> <!-- /article -->
  149.  
  150.             <hr class="noscreen" />
  151.  
  152.             <!-- Article -->
  153.             <div class="article">
  154.                 <h2><span><a href="#">This is my first article</a></span></h2>
  155.                 <p class="info noprint">
  156.                     <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
  157.                     <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
  158.                     <span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
  159.                     <span class="comments"><a href="#">Comments</a></span>
  160.                 </p>
  161.  
  162.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
  163.                 Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
  164.                 ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
  165.                 auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
  166.                 Sed id ante.</p>
  167.  
  168.                 <p class="btn-more box noprint"><strong><a href="#">Continue</a></strong></p>
  169.             </div> <!-- /article -->
  170.  
  171.             <hr class="noscreen" />
  172.             
  173.         </div> <!-- /content -->
  174.  
  175.         <!-- Right column -->
  176.         <div id="col" class="noprint">
  177.             <div id="col-in">
  178.  
  179.                 <!-- About Me -->
  180.                 <h3><span><a href="#">About Me</a></span></h3>
  181.  
  182.                 <div id="about-me">
  183.                     <p><img src="design/tmp_photo.gif" id="me" alt="Yeah, it┬┤s me!" />
  184.                     <strong>John Doe</strong><br />
  185.                     Age: 26<br />
  186.                     Dallas, TX<br />
  187.                     <a href="#">Profile on MySpace</a></p>
  188.                 </div> <!-- /about-me -->
  189.  
  190.                 <hr class="noscreen" />
  191.  
  192.                 <!-- Category -->
  193.                 <h3 ><span>Category</span></h3>
  194.  
  195.                 <ul id="category">
  196.                     <li id="category-active"><a href="#">Selected category</a></li> <!-- Active -->
  197.                     <li><a href="#">Category</a></li>
  198.                     <li><a href="#">Category</a></li>
  199.                     <li><a href="#">Category</a></li>
  200.                     <li><a href="#">Category</a></li>
  201.                 </ul>
  202.  
  203.                 <hr class="noscreen" />
  204.  
  205.                 <!-- Archive -->
  206.                 <h3><span>Archive</span></h3>
  207.  
  208.                 <ul id="archive">
  209.                    <li><a href="#">January 2007</a></li>
  210.                     <li><a href="#">December 2006</a></li>
  211.                     <li><a href="#">November 2006</a></li>
  212.                     <li><a href="#">October 2006</a></li>
  213.                     <li><a href="#">September 2006</a></li>
  214.                     <li id="archive-active"><a href="#">August 2006</a></li> <!-- Active -->
  215.                     <li><a href="#">July 2006</a></li>
  216.                     <li><a href="#">June 2006</a></li>
  217.                     <li><a href="#">May 2006</a></li>
  218.                     <li><a href="#">April 2006</a></li>
  219.                     <li><a href="#">March 2006</a></li>
  220.                     <li><a href="#">February 2006</a></li>
  221.                     <li><a href="#">January 2006</a></li>
  222.                 </ul>
  223.  
  224.                 <hr class="noscreen" />
  225.  
  226.                 <!-- Links -->
  227.                 <h3><span>Links</span></h3>
  228.  
  229.                 <ul id="links">
  230.                     <li><a href="#">Something</a></li>
  231.                     <li><a href="#">Something</a></li>
  232.                     <li><a href="#">Something</a></li>
  233.                     <li><a href="#">Something</a></li>
  234.                     <li><a href="#">Something</a></li>
  235.                 </ul>
  236.  
  237.                 <hr class="noscreen" />
  238.             
  239.             </div> <!-- /col-in -->
  240.         </div> <!-- /col -->
  241.  
  242.     </div> <!-- /page-in -->
  243.     </div> <!-- /page -->
  244.  
  245.     <!-- Footer -->
  246.     <div id="footer">
  247.         <div id="top" class="noprint"><p><span class="noscreen">Back on top</span> <a href="#header" title="Back on top ^">^<span></span></a></p></div>
  248.         <hr class="noscreen" />
  249.         
  250.         <p id="createdby">created by <a href="http://www.nuvio.cz">Nuvio | Webdesign</a> <!-- DON┬┤T REMOVE, PLEASE! --></p>
  251.         <p id="copyright">© 2007 <a href="mailto:my@mail.com">My Name</a></p>
  252.     </div> <!-- /footer -->
  253.  
  254. </div> <!-- /main -->
  255.  
  256. </body>
  257. </html>
  258.