API tools faq
paste
HTML

HTML Template 3 (Updated)

HTML
Nov 18th, 2016
184
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.28 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Code written by Jacob Howard
  4. 11/18/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 3</title>
  14. <style>
  15. /*
  16.  
  17. Code written by Jacob Howard
  18. 11/18/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:#EEE;
  25.             color:#371886;
  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:1000px;
  33.             margin-left:auto;
  34.             margin-right:auto;
  35.             padding:15px;
  36.             margin-top:2%;
  37. }
  38. #holder {
  39.             width:100%;
  40. }
  41. #tophead {
  42.             border:2px solid #371886;
  43.             width:100%;
  44.             text-align:center;
  45.             border-radius:15px 15px 0px 0px
  46. }
  47. nav button {
  48.             border:2px solid #371886;
  49.             border-radius:0px;
  50.             background:#EEE;
  51.             color:#371886;
  52.             -moz-transition: all .2s ease-in;
  53.             -o-transition: all .2s ease-in;
  54.             -webkit-transition: all .2s ease-in;
  55.             width:19.5%;
  56.             height:75px;
  57.             font-size:1.4em;
  58.             font-family:"Arial Narrow", sans-serif;
  59.             margin-bottom:10px;
  60. }
  61. nav button:hover {
  62.             color:#EEE;
  63.             background:#371886;
  64. }
  65. #btmrow {
  66.             border:2px solid #371886;
  67.             border-radius:0px 0px 15px 15px;
  68. }
  69. #main {
  70.             border:none;
  71.             width:100%;
  72. }
  73. #main td {
  74.             padding:10px;
  75.             vertical-align:top;
  76. }
  77. #leftcol {
  78.             width:19%;
  79.             border-right:2px solid #371886;
  80.             border-left:none;
  81.             border-top:none;
  82.             border-bottom:none;
  83. }
  84. #centcol {
  85.             width:59%;
  86.             border:none;
  87. }
  88. #righcol {
  89.             width:19%;
  90.             border-right:none;
  91.             border-left:2px solid #371886;
  92.             border-top:none;
  93.             border-bottom:none;
  94. }
  95. </style>
  96. </head>
  97. <body>
  98. <div id="wrapper">
  99. <table id="holder">
  100. <tr>
  101. <td id="tophead">
  102. <header>
  103. <h1>Code Template 3</h1>
  104. </header>
  105. <!--
  106.  
  107. URLs go here. Replace "#" with the link you wish for it to lead.
  108. i.e. "https://www.google.com/"
  109. To make the page open in a new tab, add the attribute ' target="_blank" '
  110. i.e. <a href="https://www.google.com/" target="_blank">
  111.  
  112. -->
  113. <nav>
  114. <a href="#"><button>Page 1</button></a>
  115. <a href="#"><button>Page 2</button></a>
  116. <a href="#"><button>Page 3</button></a>
  117. <a href="#"><button>Page 4</button></a>
  118. <a href="#"><button>Page 5</button></a>
  119. </nav>
  120. </td>
  121. </tr>
  122. <tr>
  123. <!--
  124.  
  125. Bottom-most box. Ideal container for main content.
  126. Split into three sections, leftcol, centcol, and righcol respectively.
  127.  
  128. -->
  129. <td id="btmrow">
  130. <table id="main" border="1">
  131. <tr>
  132. <td id="leftcol">
  133. <p>Test Content</p>
  134. </td>
  135. <td id="centcol">
  136. <p>This is an example of a paragraph. It shows that when one box holds too much content, the entire page table becomes fluid with it, increasing to the necessary size. Since all paragraphs, like this one, can heavily vary in size, if it is kept up for too long, the page will eventually require scrolling. The default alignments for all three of these boxes is left, and as to be seen on the left and the right, items will be aligned to the top, to respect the nature of the rest of the page.</p>
  137. </td>
  138. <td id="righcol">
  139. <p>Test Content</p>
  140. </td>
  141. </tr>
  142. </table>
  143. </td>
  144. </tr>
  145. </table>
  146. </div>
  147. </body>
  148. </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!