API tools faq
paste
HTML

HTML Template 4

HTML
Nov 29th, 2016
219
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Code written by Jacob Howard
  4. 11/29/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. Copyright (c) 2016 Jacob Howard
  8.  
  9. -->
  10. <!DOCTYPE html>
  11. <html>
  12. <head>
  13. <meta charset="UTF-8">
  14. <title>Code Template 4</title>
  15. <style>
  16. /*
  17.  
  18. Code written by Jacob Howard
  19. 11/29/16
  20. If you wish to use this template, you do not have to ask for permission.
  21. If you wish to use this template for commercial purposes, please leave this comment.
  22. Copyright (c) 2016 Jacob Howard
  23.  
  24. */
  25. body {
  26.             background:#000;
  27.             color:#DD0000;
  28.             font-family:"Arial Narrow", sans-serif;
  29.             font-size:1.4em;
  30. }
  31. #wrapper {
  32.             width:80%;
  33.             max-width:1600px;
  34.             min-width:900px;
  35.             margin-left:auto;
  36.             margin-right:auto;
  37.             padding:15px;
  38.             margin-top:2%;
  39. }
  40. #holder {
  41.             border:2px solid #DD0000;
  42.             border-radius:15px;
  43.             width:100%;
  44. }
  45. #holder td {
  46.             border:2px solid #DD0000;
  47.             padding:10px;
  48. }
  49. #topheadl {
  50.             width:40%;
  51.             border-radius:10px 0px 0px 0px;
  52.             text-align:center;
  53. }
  54. #topheadr {
  55.             width:60%;
  56.             border-radius:0px 10px 0px 0px;
  57. }
  58. #main {
  59.             border-radius:0px 0px 10px 10px;
  60. }
  61. nav button {
  62.             color:#DD0000;
  63.             background:#000;
  64.             border:2px solid #DD0000;
  65.             font-family:"Arial Narrow", sans-serif;
  66.             font-size:1.4em;
  67.             width:19%;
  68.             height:125px;
  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.             color:#000;
  75.             background:#DD0000;
  76. }
  77. nav {
  78.             height:100%;
  79.             margin-left:15px;
  80. }
  81. img {
  82.             border:2px solid #DD0000;
  83.             border-radius:15px;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <div id="wrapper">
  89. <table id="holder" border="1">
  90. <tr>
  91. <td id="topheadl">
  92. <h1>Code Template 4</h1>
  93. </td>
  94. <td id="topheadr">
  95. <!--
  96.  
  97. URLs go here. Replace "#" with the link you wish for it to lead.
  98. i.e. "https://www.google.com/"
  99. To make the page open in a new tab, add the attribute ' target="_blank" '
  100. i.e. <a href="https://www.google.com/" target="_blank">
  101.  
  102. -->
  103. <nav>
  104. <a href="#"><button>Page 1</button></a>
  105. <a href="#"><button>Page 2</button></a>
  106. <a href="#"><button>Page 3</button></a>
  107. <a href="#"><button>Page 4</button></a>
  108. <a href="#"><button>Page 5</button></a>
  109. </nav>
  110. </td>
  111. </tr>
  112. <tr>
  113. <td id="main" colspan="2">
  114. <p>
  115. This is some filler content to demonstrate that, with the content inside of it, this page will gradually get taller. The image below also demonstrates the fact that unlike my other templates, images here are pre-styled to have a red border that compliments the color scheme of the rest of the page, while giving a nice smooth border radius - the entire time, not changing the image's size (minus the 4x4 pixes being taken up by the border, making it slightly wider) but still adding a nice touch to the page.
  116. </p>
  117. <a href="http://bit.ly/2fz71bP" target="_blank"><img src="http://bit.ly/2fz71bP" alt="Missing Cat Belongs Here!!!!" width="700px" height="500px"></a>
  118. </td>
  119. </tr>
  120. </table>
  121. </div>
  122. </body>
  123. </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!