API tools faq
paste
HTML

HTML Template 5

HTML
Dec 2nd, 2016
344
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.74 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Code written by Jacob Howard
  4. 12-02-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 5</title>
  14. <style>
  15. /*
  16.  
  17. Code written by Jacob Howard
  18. 12-02-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. Yes, this is a Christmas color theme. If this bothers you, simply DO NOT use this template :)
  22.  
  23. */
  24. body {
  25.             background:#FFF;
  26.             color:#CC0000;
  27.             font-family:"Arial Narrow", sans-serif;
  28.             font-size:1.4em;
  29. }
  30. #wrapper {
  31.             width:80%;
  32.             max-width:1600px;
  33.             min-width:720px;
  34.             margin-left:auto;
  35.             margin-right:auto;
  36.             padding:15px;
  37.             margin-top:2%;
  38. }
  39. #holder {
  40.             border:2px solid #CC0000;
  41.             border-radius:15px;
  42.             border-collapse:none;
  43.             width:100%;
  44. }
  45. #holder td {
  46.             padding:10px;
  47. }
  48. #tophead {
  49.             border-radius:0px 12px 0px 0px;
  50.             text-align:center;
  51.             border:2px solid #00CC00;
  52.             height:20%;
  53. }
  54. #nav {
  55.             width:19%;
  56.             border-radius:12px 0px 0px 12px;
  57.             border:2px solid #00CC00;
  58.             vertical-align:top;
  59. }
  60. nav button {
  61.             border:2px solid #00CC00;
  62.             height:75px;
  63.             width:100%;
  64.             margin-top:2px;
  65.             background:#FFF;
  66.             color:#00CC00;
  67.             font-family:"Arial Narrow", sans-serif;
  68.             font-size:1.4em;
  69.             -moz-transition: all .2s ease-in;
  70.             -o-transition: all .2s ease-in;
  71.             -webkit-transition: all .2s ease-in;
  72. }
  73. nav button:hover {
  74.             background:#00CC00;
  75.             color:#FFF;
  76. }
  77. #topbtn {
  78.             border-radius:9px 0px 0px 0px;
  79. }
  80. #btmbtn {
  81.             border-radius:0px 0px 0px 9px;
  82. }
  83. #main {
  84.             width:79%;
  85.             border-radius:0px 0px 12px 0px;
  86.             border:2px solid #CC0000;
  87.             vertical-align:top;
  88.             height:80%;
  89. }
  90. h1 {
  91.             text-shadow:#000 4px 4px 4px;
  92.             color:#00CC00;
  93.             font-family:"Arial Black", sans-serif;
  94.             font-size:2em;
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <div id="wrapper">
  100. <table id="holder">
  101. <tr>
  102. <td id="nav" rowspan="2">
  103. <!--
  104.  
  105. URLs go here. Replace "#" with the link you wish for it to lead.
  106. i.e. "https://www.google.com/"
  107. To make the page open in a new tab, add the attribute ' target="_blank" '
  108. i.e. <a href="https://www.google.com/" target="_blank">
  109.  
  110. -->
  111. <nav>
  112. <a href="#"><button id="topbtn">Page 1</button></a>
  113. <a href="#"><button>Page 2</button></a>
  114. <a href="#"><button>Page 3</button></a>
  115. <a href="#"><button>Page 4</button></a>
  116. <a href="#"><button id="btmbtn">Page 5</button></a>
  117. </nav>
  118. </td>
  119. <td id="tophead">
  120. <header>
  121. <h1>Code Template 5</h1>
  122. </header>
  123. </td>
  124. </tr>
  125. <tr>
  126. <td id="main">
  127. <p>
  128. This is the FILLER! FILL THE GAPS!
  129. </p>
  130. </td>
  131. </tr>
  132. </table>
  133. </div>
  134. </body>
  135. </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!