index.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!doctype html>
  2. <!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
  3. <!--[if IE 7 ]> <html lang="en-us" class="no-js ie7"> <![endif]-->
  4. <!--[if IE 8 ]> <html lang="en-us" class="no-js ie8"> <![endif]-->
  5. <!--[if IE 9 ]> <html lang="en-us" class="no-js ie9"> <![endif]-->
  6. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
  7. <head>
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  9. <meta charset="utf-8">
  10. <title>Columnal Demo Page</title>
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <!-- The Columnal Grid (1140px wide base, load first), Type and image presets, and mobile stylesheet -->
  13. <link rel="stylesheet" href="css/columnal.css" type="text/css" media="screen" />
  14. <!-- Fixes for IE -->
  15. <!--[if lt IE 9]>
  16. <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
  17. <![endif]-->
  18. <!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 960px fixed width for IE6 and 7 -->
  19. <!--[if lte IE 7]>
  20. <link rel="stylesheet" href="css/fixed-984px-ie.css" type="text/css" media="screen" />
  21. <![endif]-->
  22. <!-- Fixes for IE6, only needed if IE 6 will be supported - width must match 984px or 960px of css file used above -->
  23. <!-- Use .imagescale to fix IE6 issues with full-column width images (class must be added to any image wider than the column it is placed into) -->
  24. <!--[if lte IE 6]>
  25. <link rel="stylesheet" href="css/ie6-984px.css" type="text/css" media="screen" />
  26. <![endif]-->
  27. <!-- End fixes for IE -->
  28. <!-- Customizations here -->
  29. <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen" />
  30. <!-- Page build tools - only needed while creating a site, remove when launching - Gray box colors and page debugging tools -->
  31. <link rel="stylesheet" href="css/build.css" type="text/css" media="screen" />
  32. <style>
  33. <!--
  34. /* These are just styles for the demo, you do not need them for your project */
  35. body {padding-bottom: 40px;}
  36. .col_12.title {background-color: white !important; border-bottom: none;}
  37. -->
  38. </style>
  39. </head>
  40. <body>
  41. <div class="container test">
  42. <div class="row">
  43. <div class="col_12">
  44. <h1>onCrash="Reboot()"</h1>
  45. <p>You can, you should, and if you're brave enough to start, you will.</p>
  46. </div>
  47. <div class="col_12 hmenu">
  48. <div class="col_1">
  49. <span>Home 1</span>
  50. </div>
  51. <div class="col_1">
  52. <span>Categories 2</span>
  53. </div>
  54. <div class="col_1">
  55. <span>Who is this Talha anyway? 3</span>
  56. </div>
  57. <div class="col_1">
  58. <span>About me and contact 4</span>
  59. </div>
  60. <div class="col_1">
  61. <span>Who is this 131 anyway? 5</span>
  62. </div>
  63. <div class="col_1"
  64. <span>About me and contact 6</span>
  65. </div>
  66. <div class="col_1">
  67. <span>About me and contact 7</span>
  68. </div>
  69. <div class="col_1">
  70. <span>About me and contact 8</span>
  71. </div>
  72. <div class="col_1">
  73. <span>About me and contact 9</span>
  74. </div>
  75. <div class="col_1">
  76. <span>About me and contact 10</span>
  77. </div>
  78. <div class="col_1">
  79. <span>About me and contact 11</span>
  80. </div>
  81. <div class="col_1 omega">
  82. <span>About me and contact 12</span>
  83. </div>
  84. </div>
  85. <div class="col_7 post">
  86. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. </p>
  87. </div>
  88. </div>
  89. </div>
  90. </body>
  91. </html>