Advanced Search

html5 css js shiv shell

/ Published in: HTML
Save to your folder(s)
this has place for external styles and the css start for a button sprite. Also has some comments about new html5 markup.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset=utf-8 />
  5.  
  6.   <!--*******  CSS:  ******-->
  7.   <link rel="stylesheet" href="css/basic.css" media="all" />
  8.   <link rel="stylesheet" href="css/style.css" media="screen" />
  9.  
  10.  
  11.   <title>HTML5 Basic Shell with js and css external and internal</title>
  12.   <!--[if IE]>
  13.     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  14.   <![endif]-->
  15.  
  16. <style>
  17.  
  18. article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
  19.  
  20. /*<article> 	For external content, like text from a news-article, blog, forum, or any other content from an external source*/
  21. /*<figure> 	    For grouping a section of stand-alone content, could be a video, images or diagrams, code etc*/
  22. /*<section> 	For a section in a document. Such as chapters, headers, footers, or any other sections of the document*/
  23. /*The <menu> tag defines a list or menu of commands.    */
  24. /*The <menu> tag is used for context menus, toolbars and for listing form controls and commands.*/
  25.  
  26. /* FONTS - to get other font kits visit: fontsquirrel.com  then change name accordingly, and put fonts in fonts folder in the root*/
  27.  
  28. 	@font-face {
  29. 	font-family: 'MisoLight';
  30. 	src: url('fonts/miso-light-webfont.eot?') format('eot'),
  31. 	     url('fonts/miso-light-webfont.woff') format('woff'),
  32. 	     url('fonts/miso-light-webfont.ttf')  format('truetype'),
  33. 	     url('fonts/miso-light-webfont.svg#webfontR7AhzoT1') format('svg');
  34. 	}
  35.  
  36.  
  37.  
  38. html {
  39.     background: #4e4928 url(images/site-background.jpg) repeat-x;
  40.     width:100%;
  41.     height:100%;
  42. }
  43.  
  44. /*UNIVERSAL*/
  45.  
  46. a:link{
  47. 	color:#ffef70;
  48. 	text-decoration:none;
  49. }
  50. a:visited{
  51. 	color:#c6ba57;
  52. 	text-decoration:none;
  53. }
  54. a:hover{
  55. 	color:#fff;
  56. 	text-decoration:underline;
  57.  
  58. }
  59. body{
  60.     color:#bfc590;
  61. 	font:13px Georgia, "Times New Roman", Times, serif;
  62. 	text-align:center;
  63. 	margin:0;
  64. 	padding:0;
  65. }
  66.  
  67. .main {margin: 0 auto;}
  68.  
  69. header {height: 30px;}
  70.  
  71. #pagewrapper{
  72. 	width:760px;
  73. 	text-align:left;
  74. 	margin-left:auto;
  75. 	margin-right:auto;
  76. }
  77. #contentwrapper{
  78. 	clear:both;
  79. 	float:left;
  80. 	padding-bottom:20px;
  81.  
  82. }
  83.  
  84.  
  85.  
  86. figure{
  87.  
  88. }
  89.  
  90.  
  91. h1{
  92. 	padding:0;
  93. 	margin:0;
  94. }
  95. h2{
  96. 	padding:0;
  97. 	margin:0;
  98. }
  99.  
  100. h1.title {font-size: 18px;}
  101.  
  102. /*NAVIGATION*/
  103. nav{ float:left; width:800px; }
  104. nav a{ color:#ffe61d; }
  105. nav a:hover{ color:#fff; }
  106. nav ul{
  107. 	float:left;
  108. 	list-style:none;
  109. 	margin:0;
  110. 	padding:0;
  111. 	width:630px;
  112. 	height:57px;
  113. }
  114. nav ul li{
  115. 	float:left;
  116. 	margin:0;
  117. 	padding:0;
  118. }
  119. nav ul li a{
  120. 	float:left;
  121. 	font:normal 16px Georgia, "Times New Roman", Times, serif;
  122. 	display:block;
  123. 	height:35px;
  124. 	padding:15px 14px 0 14px;
  125. 	margin:0;
  126. }
  127. nav ul li a:hover{
  128. 	text-decoration:none;
  129. 	color:#fff;
  130. }
  131. nav ul li.current a{
  132. 	background: #555;
  133. }
  134. nav ul li.current a{
  135. 	background: #777;
  136. }
  137.  
  138.  
  139.  
  140. .fl {float: left;}
  141. .fr {float: right;}
  142.  
  143. .clear {
  144.     overflow: auto;
  145.     width: 100%
  146. }
  147.  
  148.  
  149. </style>
  150. </head>
  151.  
  152.  
  153. <body class="main">
  154.  
  155.   <div id="pagewrapper">
  156.  
  157.     <header>
  158.       <h1 class="title"></h1>
  159.     </header>
  160.  
  161.  
  162.  
  163.     <figure class="fl">
  164.         <img src="images/portfolio-logo.png" />
  165.     </figure>
  166.  
  167.  
  168.  
  169.     <figure class="fr">
  170.         <img src="images/tablethome.png" />
  171.     </figure>
  172.  
  173.     <div class="clear"></div>
  174.  
  175.    <div id="contentwrapper">
  176.  
  177.  
  178.     <nav>
  179.       <ul>
  180.          <li><a href="#">Home</a></li>
  181.          <li><a href="#">About</a></li>
  182.          <li><a href="#">Clients</a></li>
  183.          <li><a href="#">Contact Us</a></li>
  184.     </ul>
  185.     </nav>
  186.  
  187.  
  188.       <section id="content" class="homepage">
  189.  
  190.       <article id="">
  191.         Article -For external content, like text from a news-article, blog, forum, or any other content from an external source
  192.       </article>
  193.  
  194.  
  195.     </section>
  196.  
  197.     <aside>
  198.       Sidebar
  199.     </aside>
  200.  
  201.     </div>
  202.       <!--End Contentwrapper begin footer-->
  203.  
  204.  
  205.     <footer>
  206.       Footer
  207.     </footer>
  208.  
  209.   </div>
  210.  
  211.  
  212. </body>
  213.  
  214. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  215.  
  216. <script>
  217.  
  218. $(function() {
  219. //alert('check')
  220. });
  221.  
  222. </script>
  223.  
  224.  
  225. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.