Posted By

miltonbneto on 03/22/11


Tagged

css html crossbrowser browser 5 cross html5


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

miltonbneto
colinrei
bogastyle


HTML5 Template Cross Browser + CSS


 / Published in: HTML
 

This is a free gift to you folks ;)

  1. <!DOCTYPE html>
  2. <!--[if lt IE 7 ]> <html lang="pt-BR" class="ie6 ielt8"> <![endif]-->
  3. <!--[if IE 7 ]> <html lang="pt-BR" class="ie7 ielt8"> <![endif]-->
  4. <!--[if IE 8 ]> <html lang="pt-BR" class="ie8"> <![endif]-->
  5. <!--[if (gte IE 9)|!(IE)]><!--> <html lang="pt-BR"> <!--<![endif]-->
  6. <html lang="pt-BR">
  7. <meta charset="utf-8" />
  8. <meta name="keywords" content="" >
  9. <meta name="description" content="" >
  10. <title>Title</title>
  11. <link rel="stylesheet" href="style/style.css" />
  12. <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
  13. <link rel="apple-touch-icon" href="img/favicon.png" />
  14. <!--[if IE]>
  15. <script>
  16. document.createElement("header" );
  17. document.createElement("footer" );
  18. document.createElement("section");
  19. document.createElement("aside" );
  20. document.createElement("nav" );
  21. document.createElement("article");
  22. document.createElement("hgroup" );
  23. document.createElement("time" );
  24. </script>
  25. <![endif]-->
  26. * {
  27. margin:0;
  28. padding:0;
  29. list-style:none;
  30. }
  31. article,aside,details,figcaption,figure,
  32. footer,header,hgroup,menu,nav,section {
  33. display: block;
  34. }
  35. a{
  36. text-decoration:none;
  37. }
  38.  
  39. body{
  40. background:#143246 url(../img/background.jpg) no-repeat center top;
  41. padding: 0;
  42. margin: 0;
  43. }
  44.  
  45. /*******************************/
  46. /* RECURSOS VISUAIS */
  47. /*******************************/
  48. .left{
  49. float:left;
  50. }
  51. .right{
  52. float:right;
  53. }
  54.  
  55. </style>
  56.  
  57. </head>
  58. <!-- RICH SNIPPETS GOODRELATIONS -->
  59. <div xmlns="http://www.w3.org/1999/xhtml"
  60. xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  61. xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  62. xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
  63. xmlns:gr="http://purl.org/goodrelations/v1#"
  64. xmlns:foaf="http://xmlns.com/foaf/0.1/"
  65. xmlns:vcard="http://www.w3.org/2006/vcard/ns#">
  66.  
  67. <div typeof="gr:BusinessEntity" about="#company">
  68. <div property="gr:legalName" content="Micro Fast Informática"></div>
  69. <div property="vcard:tel" content="+55-11-3791-4433"></div>
  70. <div rel="vcard:adr">
  71. <div typeof="vcard:Address">
  72. <div property="vcard:country-name" content="Brasil"></div>
  73. <div property="vcard:locality" content="São Paulo"></div>
  74. <div property="vcard:street-address" content="Rua André Saraiva, 589 - São Paulo - SP"></div>
  75. </div>
  76. </div>
  77. <div rel="foaf:depiction" resource="http://meudominio.com.br/img/logo.png"></div>
  78. <div rel="foaf:page" resource=""></div>
  79. </div>
  80. </div
  81. <!-- RICH SNIPPETS GOODRELATIONS -->
  82. <div id="wrapper">
  83.  
  84. <div id="content">
  85. <header id="main-header">
  86. <p class="right">Tel: (11) 3791-4433<br />(16) 3172-7373<br />[email protected]
  87. <hgroup>
  88. <h1>Micro Fast Informática</h1>
  89. <h2>Tudo o que você precisa em Informática</h2>
  90. </hgroup>
  91. <nav>
  92. <ul id="navmenu">
  93. <li class="left"><a href="#" tabindex="1">Teste</a></li>
  94. <li class="left"><a href="#" tabindex="2">Teste</a></li>
  95. <li class="left"><a href="#" tabindex="3">Teste</a></li>
  96. <li class="left"><a href="#" tabindex="4">Teste</a></li>
  97. <li class="left"><a href="#" tabindex="5">Teste</a></li>
  98. <li class="left"><a href="#" tabindex="6">Teste</a></li>
  99. <li class="left"><a href="#" tabindex="7">Teste</a></li>
  100. <li class="left"><a href="#" tabindex="8">Teste</a></li>
  101. </ul>
  102. </nav>
  103. </header>
  104. <section id="container">
  105. <div id="top-container">
  106. <ul>
  107. <li class="left">Suporte Técnico<br /><a href="#">Ver Quais</a></li>
  108. <li class="left">Serviços<br /><a href="#">Ver Quais</a></li>
  109. <li class="left">Produtos<br /><a href="#">Ver Quais</a></li>
  110. </ul>
  111. <aside>
  112. <h2>Tudo o que você precisa!</h2>
  113. <p>Tudo o que você precisaTudo o que você precisa</p>
  114. <form action="" method="">
  115. <label>Digite o que você precisa:</label>
  116. <input type="text" name="" value="Busque"
  117. onfocus="if (this.value=='Busque') this.value=''"
  118. onblur="if (this.value=='') this.value='Busque'"/>
  119. <input type="submit" value="Pesquisar no site" />
  120. </form>
  121. </aside>
  122. </div>
  123. <section id="content">
  124. <article id="main-content">
  125. <h2>Tudo o que você precisa!</h2>
  126. <p>Tudo o que você precisa em Computadores! Tudo o que você precisa em Computadores.</p>
  127. <ul>
  128. <li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
  129. <li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
  130. <li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
  131. <li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
  132. <li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
  133. <li>AQUI EM MÃOS - Tudo o que você precisa em Computadores!</li>
  134. </ul>
  135. <footer>
  136. <ul id="content-buttons">
  137. <li class="left">Emergência 24 horas</li>
  138. <li class="left">Contrato Mensal</li>
  139. <li class="left">Atendimento Personalizado</li>
  140. <li class="left">Manutenção</li>
  141. <li class="left">Infra Estrutura</li>
  142. <li>Contrato Especial</li>
  143. </ul>
  144. </footer>
  145. </article>
  146. <aside>
  147. <figure>
  148. <figcaption>A view of the pulpit rock in Norway</figcaption>
  149. <img src="parceiros.jpg" width="300" height="90" />
  150. </figure>
  151. <!-- SOME JQUERY PLUGIN -->
  152. </aside>
  153. </section>
  154. <footer>
  155. <ul>
  156. <li class="left"><a href="#">Teste</a></li>
  157. <li class="left"><a href="#">Teste</a></li>
  158. <li class="left"><a href="#">Teste</a></li>
  159. </ul>
  160. <address class="right">
  161. <p><strong>Micro Fast Informática</strong><br />
  162. Tel: (11) 3791-4433<br />
  163. (16) 3172-7373<br />
  164. [email protected]<br />
  165. Loja 01 - Rua André Saraiva, 589 - São Paulo - SP / Loja 02 - Rua Jorge Miguel Saad, 525 - Igarapava - SP</p>
  166. </footer>
  167. </section>
  168. </div>
  169. </div>
  170. <!-- Insert Here Code Google Analytics -->
  171.  
  172. <!-- END Code Google Analytics -->
  173. </body>
  174. </html>

Report this snippet  

You need to login to post a comment.