API tools faq
paste
HTML

HTML Template 6

HTML
Dec 9th, 2016
190
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.15 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Code written by Jacob Howard
  4. 12/9/16
  5. If you wish to use this template, you do not have to ask for permission.
  6. If you wish to use this template for commercial purposes, please leave this comment.
  7.  
  8. -->
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <meta charset="UTF-8">
  13. <title>Code Template 6</title>
  14. <style>
  15. /*
  16.  
  17. Code written by Jacob Howard
  18. 12/9/16
  19. If you wish to use this template, you do not have to ask for permission.
  20. If you wish to use this template for commercial purposes, please leave this comment.
  21.  
  22. */
  23. body {
  24.             background:#000;
  25.             color:#FFF;
  26.             font-family:"Arial Narrow", sans-serif;
  27.             font-size:1.4em;
  28. }
  29. #wrapper {
  30.             width:80%;
  31.             max-width:1600px;
  32.             min-width:720px;
  33.             margin-left:auto;
  34.             margin-right:auto;
  35.             padding:15px;
  36.             margin-top:2%;
  37. }
  38. #holder {
  39.             border:none;
  40.             width:100%;
  41. }
  42. #nav {
  43.             width:20%;
  44. }
  45. #main {
  46.             width:80%;
  47. }
  48. fieldset {
  49.             border:2px solid #0000AA;
  50. }
  51. XMP {
  52.             display:inline;
  53. }
  54. nav button {
  55.             border:2px solid #0000AA;
  56.             height:50px;
  57.             width:100%;
  58.             font-family:"Arial Narrow", sans-serif;
  59.             color:#FFF;
  60.             background:#000;
  61.             font-size:1.4em;
  62.             margin-top:5px;
  63.             margin-bottom:5px;
  64.             -moz-transition: all .2s ease-in;
  65.             -o-transition: all .2s ease-in;
  66.             -webkit-transition: all .2s ease-in;
  67. }
  68. nav button:hover {
  69.             color:#000;
  70.             background:#FFF;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <div id="wrapper">
  76. <table id="holder">
  77. <tr>
  78. <td id="tophead" colspan="2">
  79. <header><h1>Code Template 6</h1></header>
  80. </td>
  81. </tr>
  82. <tr>
  83. <td id="nav">
  84. <!--
  85.  
  86. URLs go here. Replace "#" with the link you wish for it to lead.
  87. i.e. "https://www.google.com/"
  88. To make the page open in a new tab, add the attribute ' target="_blank" '
  89. i.e. <a href="https://www.google.com/" target="_blank">
  90.  
  91. -->
  92. <fieldset id="lside">
  93. <legend>Navigation</legend>
  94. <nav>
  95. <a href="#"><button>Page 1</button></a>
  96. <a href="#"><button>Page 2</button></a>
  97. <a href="#"><button>Page 3</button></a>
  98. <a href="#"><button>Page 4</button></a>
  99. <a href="#"><button>Page 5</button></a>
  100. </nav>
  101. </fieldset>
  102. </td>
  103. <td id="main">
  104. <fieldset id="rside">
  105. <legend>Content</legend>
  106. <p><!-- You probably want to delete this if you plan on using this template. -->
  107. Again, another example paragraph that proves that this box is very fluid with the content! How I did this was I used the very uncommon <code><XMP><fieldset></XMP></code> and <code><XMP><legend></XMP></code> tags to make this possible.<br>
  108. Probably less prominent and new web designers who may or may not be using this template may be thinking to themselves: <br>&quot;Wait, what? How did you just use tags on a webpage without them getting parsed?&quot;<br>
  109. Well, it's easy. You use the heavily depricated and out-of-date <XMP><XMP></XMP> tag! While recommended to never use it by the W3C, it works as great as ever!<br>
  110. Wait, the navigation box to the left is still beating us! I really need to make this paragraph longer so that those buttons aren't larger, because that just looks weird.<Br>
  111. Ugh, forget it. This ultrawide monitors are hard to design on, because I sometimes have to look at it from a 4:3 perspective...
  112. </p>
  113. </fieldset>
  114. </td>
  115. </tr>
  116. </table>
  117. </div>
  118. </body>
  119. </html>
Advertisement
Comments
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!