Posted By

nerdfiles on 01/11/10


Tagged

css html5


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

nerdfiles
ericschweichler
wirenaught


Two-column (cinematic)


 / Published in: HTML
 

URL: http://nerdfiles.net/mockup11/

"Header," "Footer": 100% "Page" width: fixed width, 960 Browsers tested: IE6, 7 and 8, FF3.5, Chrome, Opera 10.

Add in HTML5 if you wish.

  1. <!DOCTYPE HTML>
  2. <!-- I &heart; HTML5 -->
  3. <html lang="en">
  4.  
  5.  
  6. <meta charset="utf-8" />
  7. <title>New HTML5 Document</title>
  8.  
  9. <!--[if IE]>
  10. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11. <![endif]-->
  12. <script type="text/javascript" src=""></script>
  13.  
  14. <link rel="stylesheet" type="text/css" href="" />
  15. <style type="text/css">
  16. /*
  17. * A simple reset
  18. ********************************************************************/
  19. html, body, div, h1, h2, h3, ul, ol, li, form, fieldset,
  20. input, textarea {
  21. margin: 0;
  22. padding: 0;
  23. font-size: 100%;
  24. }
  25. ul {list-style: none;}
  26. img, fieldset {border: 0;}
  27. em {font-style: italic;}
  28. strong {font-weight: bold;}
  29.  
  30. /*
  31. * HTML5 Elements Defaults
  32. ********************************************************************/
  33. article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
  34.  
  35. /*
  36. * The Basics
  37. ********************************************************************/
  38. body { color: #111; font: 0.8em/1.4 Arial, sans-serif; background: #efefef; }
  39.  
  40. /* linking */
  41. a { text-decoration: none; }
  42. a:visited { }
  43. a:hover { }
  44.  
  45. a img { }
  46. a:visited img { }
  47. a:hover img { }
  48.  
  49. /* the usual */
  50. p { margin: 0; }
  51. p+p { margin: 1em 0; }
  52. img { }
  53.  
  54. /* lists */
  55. ul, ol { list-style: none; }
  56. ul { }
  57. ol { }
  58. li { }
  59. ul li { }
  60. ul ul { }
  61. ul ul li { }
  62. ol li { }
  63. ol ol { }
  64. ol ol li { }
  65. dl { }
  66. dd { }
  67. dt { }
  68. menu { }
  69.  
  70. /* table */
  71. table { border-collapse: collapse; border-spacing: 0; }
  72. tr { }
  73. th { }
  74. td { }
  75. caption { }
  76.  
  77. /* quotation */
  78. q { }
  79. cite { }
  80. blockquote { }
  81. blockquote p.quotation { }
  82. blockquote p.testimonial { }
  83. blockquote p cite { }
  84.  
  85.  
  86. /* headings */
  87. h1, h2, h3, h4, h5, h6 { }
  88. h1 { }
  89. h2 { }
  90. h3 { }
  91. h4 { }
  92. h5 { }
  93. h6 { }
  94.  
  95. /* form */
  96. form { }
  97. fieldset { }
  98. legend { }
  99. label { }
  100. input, textarea, select { font: 1em/1.5 Arial, sans-serif; }
  101. input { }
  102. input[type="text"] { }
  103. input.text { }
  104. input[type="button"] { }
  105. input.button { }
  106. input[type="submit"] { }
  107. input.submit { }
  108. input[type="reset"] { }
  109. input.reset { }
  110. input[type="file"] { }
  111. input.file { }
  112. input[type="radio"] { }
  113. input.radio { }
  114. input[type="checkbox"] { }
  115. input.checkbox { }
  116. input[type="password"] { }
  117. input.password { }
  118. select { }
  119. select option { }
  120. select optgroup { }
  121. textarea { }
  122. button { }
  123.  
  124. /* type format */
  125. abbr { }
  126. acronym { }
  127. address { }
  128. small { }
  129. pre { }
  130. pre p { }
  131. sub { vertical-align: sub; }
  132. sup { vertical-align: sup; }
  133. var { }
  134. code { }
  135. strong { }
  136. b { }
  137. em { }
  138. i { }
  139. del { }
  140. dfn { }
  141. ins { }
  142. kbd { }
  143. samp { }
  144.  
  145. /* generic */
  146. div { }
  147. span { }
  148.  
  149. /* externals */
  150. object { }
  151. iframe { }
  152.  
  153. /* html5 */
  154. article { }
  155. area { }
  156. aside { }
  157. audio { }
  158. canvas { }
  159. command { }
  160. datalist { }
  161. details { }
  162. dialog { }
  163. embed { }
  164. figure { }
  165. footer { }
  166. header { }
  167. hgroup { }
  168. keygen { }
  169. mark { }
  170. meter { }
  171. nav { }
  172. output { }
  173. progress { }
  174. rp { }
  175. rt { }
  176. ruby { }
  177. section { }
  178. source { }
  179. time { }
  180. video { }
  181.  
  182. /*
  183. * CSS Utility Classes
  184. ********************************************************************/
  185.  
  186. /* clearing */
  187. .clear-hack {
  188. *zoom: 1; /* IE6/7 */
  189. *display: block; /* IE6/7 */
  190. }
  191. .clear-hack:after {
  192. content: ".";
  193. display: block;
  194. height: 0;
  195. clear: both;
  196. visibility: hidden;
  197. }
  198. /* See: http://www.positioniseverything.net/easyclearing.html
  199. * if you care about IE/Mac
  200. */
  201. .clear { clear: both; }
  202. .clear-left { clear: left; }
  203. .clear-right { clear: right; }
  204.  
  205. /* justification */
  206. .text-left { text-align: left; }
  207. .text-right { text-align: right; }
  208. .text-center { text-align: center; }
  209. .text-justify { text-align: justify; }
  210.  
  211. /* additional type style */
  212. .bold { font-weight: bold; }
  213. .italic { font-style: italic; }
  214. .underline { text-decoration: underline; }
  215. .highlight { background: #ffc; }
  216. .teletype { font-family: monospace; }
  217. .big { font-size: bigger; }
  218. .blink { text-decoration: blink; }
  219. .strike { text-decoration: line-through; }
  220. .compact { display: compact; }
  221.  
  222. /* image alignment */
  223. img.align-right { float: right; margin: 0 0 0 1em; }
  224. img.align-left { float: left; margin: 0 1em 0 0; }
  225. img.align-center { display: block; margin: 0 auto; }
  226.  
  227. /* lists, etc */
  228. .nopadding { padding: 0; }
  229. .noindent { margin-left: 0; padding-left: 0; }
  230. .nobullet { list-style: none; list-style-image: none; }
  231. .inline { display: inline; }
  232.  
  233. /* floating */
  234. .left { float: left; }
  235. .right { float: right; }
  236.  
  237. /*
  238. * Structure
  239. ********************************************************************/
  240. .wrap { background: #fff; }
  241. .header { background: #ccc; opacity: 0.8; border-bottom: 1px #111 solid; text-shadow: 0 0 1px #222; }
  242. .header h1 { font-size: 2em; }
  243. .header a { color: #C8EF68; }
  244. .header p { width: 300px; }
  245. .header:hover { opacity: 1; }
  246. .header-inner { padding: 3em 2em; color: #fff; }
  247. .inner-wrap { width: 960px; margin: 0 auto; }
  248. .inner-wrap-inner { margin: 20px 0; }
  249. .col-left { float: left; width: 200px; margin: 0 20px 0 0; }
  250. .col-right { float: left; width: 740px; }
  251. .footer { background: #ccc; border-top: 1px #111 solid; border-bottom: 1px #777 solid; opacity: 0.8; color: #fff; text-shadow: 0 0 1px #222; }
  252. .footer:hover { opacity: 1; }
  253. .footer-inner { padding: 2em; }
  254. .header-title-block { width: 300px; }
  255. .more { float: right; text-transform: uppercase; font-weight: bold; font-size: 1.2em; }
  256.  
  257. </head>
  258.  
  259. <body class="home">
  260. <div class="wrap">
  261.  
  262. <div class="header">
  263. <div class="header-inner clear-hack">
  264. <div class="header-title-block">
  265. <h1><a href="#">Proin ac quam diam!</a></h1>
  266. <p>Praesent felis tellus, fringilla et dignissim eu, imperdiet quis dolor? Nam leo ipsum, aliquet sit amet posuere vel, tincidunt ac felis. Fusce massa libero, pretium ac tincidunt ut, rutrum a arcu. Sed ut neque placerat dui gravida rhoncus. In quis luctus dui. Proin ac quam diam!</p>
  267. <div class="more"><a href="#">Read more!</a></div>
  268. </div>
  269. </div>
  270. </div>
  271.  
  272. <div class="inner-wrap">
  273. <div class="inner-wrap-inner clear-hack">
  274. <div class="col-left">
  275. <p>
  276. Vivamus cursus facilisis varius. Nulla commodo enim facilisis orci tempor fermentum. Phasellus aliquam interdum odio, a commodo leo viverra sed. Aliquam dictum mattis nisl eget vehicula. Fusce nec metus nec diam malesuada semper non ut dolor. Nam ultricies felis id ligula interdum nec tempor mauris blandit! Etiam feugiat lacinia nulla non varius. Suspendisse ac cursus leo. Phasellus eget elit neque, a porttitor arcu. Curabitur eu est erat?
  277. </p>
  278. </div>
  279. <div class="col-right">
  280. <h1>Cicero roxxx</h1>
  281. <p>
  282. Vestibulum ut sapien leo, eu vestibulum dui. Phasellus vehicula auctor feugiat. Curabitur in est metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam laoreet facilisis fringilla. Aliquam erat volutpat. Morbi rutrum vehicula turpis. Praesent felis tellus, fringilla et dignissim eu, imperdiet quis dolor? Nam leo ipsum, aliquet sit amet posuere vel, tincidunt ac felis. Fusce massa libero, pretium ac tincidunt ut, rutrum a arcu. Sed ut neque placerat dui gravida rhoncus. In quis luctus dui. Proin ac quam diam!
  283. </p>
  284.  
  285. <p>
  286. Quisque posuere cursus risus vel facilisis! In nunc turpis, convallis eget luctus sed, condimentum sit amet sem. Proin nec magna diam, quis venenatis dolor. Etiam dolor ante, consequat vel accumsan et, volutpat ut risus. Aenean eu leo sed elit consectetur consectetur. Fusce et velit massa, vitae fringilla diam. Etiam sodales urna erat. Vivamus ut augue a ligula aliquam rutrum. Suspendisse sagittis congue ante sit amet dictum? Curabitur ornare pellentesque facilisis. Suspendisse potenti. Sed mattis lorem id lorem sollicitudin gravida. Quisque eget odio lacus. Aenean nec posuere risus. Praesent at vestibulum tortor.
  287. </p>
  288. </div>
  289. </div>
  290. </div>
  291.  
  292. <div class="footer">
  293. <div class="footer-inner">
  294. <h1>Proin ac quam diam!</h1>
  295. <p>Praesent felis tellus, fringilla et dignissim eu, imperdiet quis dolor? Nam leo ipsum, aliquet sit amet posuere vel, tincidunt ac felis. Fusce massa libero, pretium ac tincidunt ut, rutrum a arcu. Sed ut neque placerat dui gravida rhoncus. In quis luctus dui. Proin ac quam diam!</p>
  296. </div>
  297. </div>
  298.  
  299. </div>
  300. </body>
  301.  
  302. </html>

Report this snippet  

You need to login to post a comment.