Advanced Search

HTML5 Template Cross Browser + CSS

/ Published in: HTML
Save to your folder(s)
This is a free gift to you folks ;)

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.