Posted By

gamblelyn on 05/30/11


Tagged

css js Shell links html5 shiv


Versions (?)

html5 css js shiv shell


 / Published in: HTML
 

this has place for external styles and the css start for a button sprite. Also has some comments about new html5 markup.

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

Report this snippet  

You need to login to post a comment.