Advertisement
evansy

page 002 v. 2

Nov 3rd, 2015
683
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.50 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!--
  5.  
  6. PAGE 002 (v. 2): READ ALL ABOUT IT, BY EVANSYHELP
  7.  
  8. RULES
  9. 1. Edit as much as you like, but...
  10. 2. Do not remove the credit.
  11. 3. Do not redistribute.
  12. 4. Do not use as a base.
  13. 5. Do not claim as your own.
  14.  
  15. DIMENSIONS
  16. Image: 150px by 485px
  17.  
  18. -->
  19.  
  20. <head>
  21.  
  22. <title>{Title}</title>
  23. <link rel="shortcut icon" href="{Favicon}" />
  24.  
  25. <style type="text/css">
  26.  
  27. /* SCROLLBAR */
  28.  
  29. ::-webkit-scrollbar {
  30. height:5px;
  31. width:3px;
  32. }
  33.  
  34. ::-webkit-scrollbar-thumb {
  35. background:#ae3e3e; /* CHANGE SCROLLBAR COLOUR */
  36. }
  37.  
  38. /* BASICS */
  39.  
  40. #body {
  41. background-color:#fff; /* CHANGE BACKGROUND COLOUR */
  42. color:#2b302e; /* CHANGE FONT COLOUR */
  43. font-family:arial;
  44. font-size:12px;
  45. line-height:120%;
  46. padding:0px;
  47. width:99%;
  48. height:98%;
  49. position:absolute;
  50. overflow:auto;
  51. }
  52.  
  53. /* TEXT STYLING */
  54.  
  55. a {
  56. text-decoration:none;
  57. color:#ae3e3e; /* CHANGE LINK COLOUR */
  58. }
  59.  
  60. b {
  61. font-weight:bold;
  62. letter-spacing:-1px;
  63. }
  64.  
  65. small {
  66. font-size:10px;
  67. }
  68.  
  69. big {
  70. font-size:14px;
  71. }
  72.  
  73. blockquote {
  74. width:95%;
  75. margin-left:20px;
  76. }
  77.  
  78. /* CONTENT */
  79.  
  80. .title {
  81. width:690px;
  82. margin:40px auto;
  83. color:#ae3e3e; /* CHANGE TITLE COLOUR */
  84. font-size:28px;
  85. font-family:arial;
  86. font-weight:bold;
  87. letter-spacing:-2px;
  88. position:relative;
  89. text-align:center;
  90. }
  91.  
  92. .container {
  93. width:690px;
  94. margin:-25px auto;
  95. height:500px;
  96. padding:10px;
  97. position:relative;
  98. background-color:#fff; /* CHANGE CONTAINER COLOUR */
  99. border:1px solid #d8d8d8; /* CHANGE BORDER COLOUR */
  100. }
  101.  
  102. .pic {
  103. width:150px;
  104. height:485px;
  105. padding:5px;
  106. float:right;
  107. border:1px solid #d8d8d8; /* CHANGE IMAGE BORDER COLOUR */
  108. background-color:#fff; /* CHANGE IMAGE BACKGROUND COLOUR */
  109. }
  110.  
  111. .text {
  112. width:493px;
  113. height:479px;
  114. padding:8px;
  115. border:1px solid #d8d8d8; /* CHANGE TEXT BORDER COLOUR */
  116. background-color:#fff; /* CHANGE TEXT BACKGROUND COLOUR */
  117. overflow:auto;
  118. }
  119.  
  120. .head1 {
  121. background-color:#ae3e3e; /* CHANGE HEADER 1 BACKGROUND COLOUR */
  122. color:#fff; /* CHANGE HEADER 1 COLOUR */
  123. font-size:14px;
  124. font-weight:bold;
  125. letter-spacing:-1px;
  126. text-align:center;
  127. padding:3px;
  128. margin-top:8px;
  129. margin-bottom:8px;
  130. }
  131.  
  132. .head2 {
  133. color:#ae3e3e; /* CHANGE HEADER 2 COLOUR */
  134. font-size:16px;
  135. font-weight:bold;
  136. letter-spacing:-1px;
  137. padding:3px;
  138. margin-top:8px;
  139. margin-bottom:8px;
  140. }
  141.  
  142. .links {
  143. margin: 25px auto;
  144. margin-left:-5px;
  145. font-size:20px;
  146. font-family:arial;
  147. font-weight:bold;
  148. letter-spacing:-1px;
  149. position:relative;
  150. text-align:center;
  151. }
  152.  
  153. .links a {
  154. text-align:center;
  155. text-decoration:none;
  156. padding:15px;
  157. color:#ae3e3e; /* CHANGE TABS COLOUR */
  158. }
  159.  
  160. .links a:hover {
  161. text-decoration: none;
  162. color:#874831; /* CHANGE TABS HOVER COLOUR */
  163. }
  164.  
  165. /* CREDIT - DO NOT TOUCH */
  166.  
  167. .credit {
  168. font-size:10px;
  169. font-family:arial;
  170. float:right;
  171. font-weight:bold;
  172. right:5px;
  173. bottom:5px;
  174. position:fixed;
  175. letter-spacing:-1px;
  176. }
  177.  
  178. .credit a {
  179. text-decoration:none;
  180. color:#ae3e3e;
  181. opacity:0.9;
  182. padding:5px;
  183. }
  184.  
  185. </style>
  186. </head>
  187. <body>
  188. <div id="body">
  189.  
  190. <div class="title">read all about it</div> <!--EDIT TITLE-->
  191.  
  192. <div class="container">
  193.  
  194. <!--SIDE PIC STARTS HERE, DO NOT CHANGE WIDTH OR HEIGHT-->
  195. <div class="pic">
  196. <img src="https://41.media.tumblr.com/83a7442f816de303cebb86eb931c882e/tumblr_inline_npi1g4L0cK1rfmsq0_540.png" width="150px" height="485px">
  197. </div>
  198. <!--SIDE PIC ENDS HERE-->
  199.  
  200.  
  201. <!--TEXT STARTS HERE, IF YOU DON'T WANT HEADERS DELETE THE <div class="head_">title</div> LINES-->
  202. <div class="text">
  203. <div class="head1" style="margin-top:0px">header one.</div>
  204. This is text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique vehicula mi sit amet iaculis. Curabitur pretium viverra sapien non hendrerit. Curabitur sapien mi, mattis quis nulla quis, vestibulum finibus nulla. Sed fermentum leo a placerat rutrum. Donec ut dui ut quam vehicula semper vel sit amet nibh. Cras sollicitudin tempus augue, sit amet rhoncus odio scelerisque sodales. </p>
  205. Curabitur et fermentum massa, in volutpat nulla. Quisque venenatis posuere lobortis. Sed eget lorem molestie, mollis velit ac, luctus nulla. Vestibulum lobortis dolor quam, et placerat nulla egestas a. Nunc hendrerit libero sed metus elementum, efficitur consequat nisi viverra. Phasellus fermentum sapien quis enim vestibulum vestibulum. Aliquam cursus semper neque lobortis pretium. Aliquam vel lorem eget nibh gravida dignissim accumsan in eros. Aliquam eget ipsum tellus. Vivamus eleifend odio et urna rutrum.
  206. <div class="head2">header two;</div>
  207. <blockquote>This is what a blockquote looks like. Fusce gravida eros ac aliquam lacinia. In pulvinar quam nec lectus cursus scelerisque. Integer lacinia nulla nec lacus vehicula egestas. Nam pretium sit amet neque non maximus. Mauris hendrerit metus libero, eget iaculis erat scelerisque ac. Fusce nec eleifend sapien.</p>
  208. Proin interdum nibh at odio placerat, id pretium ex congue. Curabitur maximus elit vitae purus aliquam vehicula. Phasellus sem lectus, posuere vel risus nec, hendrerit accumsan magna. Donec tristique, purus et rhoncus convallis, justo justo molestie mi, et rhoncus risus tortor a orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In convallis augue urna, in fermentum risus maximus ut.
  209. </blockquote>
  210. Vivamus dignissim lectus nec varius ullamcorper. Donec ac dapibus nunc. Aenean vitae enim massa. In vitae tempus sapien. In vel dignissim tellus, sed feugiat metus. Donec tempus dolor non augue efficitur, non dictum diam mollis. Vestibulum augue mi, volutpat sit amet dignissim rhoncus, vehicula ac tellus. Curabitur laoreet mi vitae nulla semper dignissim. Fusce gravida eros ac aliquam lacinia. In pulvinar quam nec lectus cursus scelerisque. Integer lacinia nulla nec lacus vehicula egestas. Nam pretium sit amet neque non maximus. Mauris hendrerit metus libero, eget iaculis erat scelerisque ac. </p>
  211. Curabitur maximus elit vitae purus aliquam vehicula. Phasellus sem lectus, posuere vel risus nec, hendrerit accumsan magna. Donec tristique, purus et rhoncus convallis, justo justo molestie mi, et rhoncus risus tortor a orci. Quisque venenatis posuere lobortis. Sed eget lorem molestie, mollis velit ac, luctus nulla. Vestibulum lobortis dolor quam, et placerat nulla egestas a. Nunc hendrerit libero sed metus elementum, efficitur consequat nisi viverra. Phasellus fermentum sapien quis enim vestibulum vestibulum. </p>
  212. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique vehicula mi sit amet iaculis. Curabitur pretium viverra sapien non hendrerit. Curabitur sapien mi, mattis quis nulla quis, vestibulum finibus nulla. Sed fermentum leo a placerat rutrum. Donec ut dui ut quam vehicula semper vel sit amet nibh. Cras sollicitudin tempus augue, sit amet rhoncus odio scelerisque sodales.
  213.  
  214.  
  215. </div>
  216. <!--TEXT ENDS HERE-->
  217.  
  218. <!--LINKS START HERE-->
  219. <div class="links">
  220. <a href="/">home</a>
  221. <a href="/ask">contact</a>
  222. <a href="/archive">archive</a>
  223. </div>
  224.  
  225.  
  226.  
  227. <!--CREDIT, DO NOT TOUCH-->
  228. <div class="credit">
  229. <a href="http://evansyhelp.tumblr.com/tagged/eh: theme">e</a>
  230. </div>
  231.  
  232. </div>
  233. </body>
  234. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement