You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

85 lines
2.1KB

  1. <!doctype HTML>
  2. <!-- head -->
  3. <html lang="en">
  4. <head>
  5. <title>Template | BareCSS</title>
  6. <!-- meta -->
  7. <meta charset=utf-8>
  8. <meta name="description" content="BareCSS template file">
  9. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  10. <!-- css -->
  11. <link href="css/bare.min.css" rel="stylesheet">
  12. </head>
  13. <!-- body -->
  14. <body>
  15. <!-- nav -->
  16. <nav><!-- use fx attribute for fixed positioning -->
  17. <label>
  18. <input type="checkbox">
  19. <header>
  20. <a href="http://www.barecss.com"><img src="img/your-logo.svg">Site name</a>
  21. </header>
  22. <ul>
  23. <li><a href="#one">Menu item</a></li>
  24. <li><a href="#two">Menu item</a></li>
  25. <li>
  26. <a>Drop down</a>
  27. <menu>
  28. <menuitem><a href="#three">Menu item</a></menuitem>
  29. <menuitem><a href="#four">Menu item</a></menuitem>
  30. <menuitem><a href="#five">Menu item</a></menuitem>
  31. </menu>
  32. </li>
  33. </ul>
  34. </label>
  35. </nav>
  36. <!-- standard section for content -->
  37. <section mt->
  38. <h1>Standard content</h1>
  39. <p>Paragraph one lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  40. <p>Paragraph two exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.</p>
  41. </section>
  42. <!-- section with grid -->
  43. <section>
  44. <h2>Section with grid</h2>
  45. <grid>
  46. <div col="1/3">
  47. <h3>1/3 grid</h3>
  48. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  49. </div>
  50. <div col="1/3">
  51. <h3>1/3 grid</h3>
  52. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  53. </div>
  54. <div col="1/3">
  55. <h3>1/3 grid</h3>
  56. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  57. </div>
  58. </grid>
  59. </section>
  60. </body>
  61. </html>