API tools faq
paste
Advertisement
tangycode

hell page

tangycode
Jun 24th, 2019
199
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--hi this is a page by tangy!! please only edit the lines with annotations on it otherwise the page might die
  4. also please dont remove the credit, you can edit it but don't remove it thank you!!
  5. enjoy!! love you!!-->
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>hell page</title> <!-- here is where you change the title that shows up on the tab-->
  9. <link rel="shortcut icon" href="favicon url"> <!-- here is where you add your favicon, replace favicon url with the url-->
  10.  
  11. <style type="text/css">
  12.  
  13. body {
  14. background:#000; /*this is the background color*/
  15. background-image:url('url here'); /*if you want a tiled background, put the picture url where it says url here*/
  16. background-attachment:fixed;
  17. font-size:14px; /*here is where you can change the overall font size for the page*/
  18. font-family:monospace; /*here is where you can change the overall font type for the page*/
  19. color:#fff; /*here is where you can change the overall font color for the page*/
  20. }
  21.  
  22. a {
  23. color:red; /*you can change the color for the links you put in the about and music box*/
  24. text-decoration:underline; /*if you dont want the links underlined, remove this line*/
  25. text-transform:uppercase; /*if you dont want the links to become capitalized, remove this line*/
  26. -moz-transition-duration: 0.5s;
  27. -o-transition-duration: 0.5s;
  28. -webkit-transition-duration: 0.5s;
  29. transition-duration: 0.5s;
  30. }
  31.  
  32. a:hover {
  33. color:#000; /*this is the link hover color*/
  34. -moz-transition-duration: 0.5s;
  35. -o-transition-duration: 0.5s;
  36. -webkit-transition-duration: 0.5s;
  37. transition-duration: 0.5s;
  38. }
  39.  
  40. .container {
  41. width:1000px;
  42. height:550px;
  43. margin-left:auto;
  44. margin-right:auto;
  45. overflow:hidden;
  46. text-align:center;
  47. }
  48.  
  49. .title {
  50. margin-left:auto;
  51. margin-right:auto;
  52. padding-right:10px;
  53. padding-bottom:5px;
  54. width:725px;
  55. font-size:24px; /*change title font size*/
  56. color:#fff; /*change title color*/
  57. text-align:right;
  58. }
  59.  
  60. .topwrapper {
  61. width:725px;
  62. height:358px;
  63. display:inline-block;
  64. overflow:hidden;
  65. }
  66.  
  67. .sidebar {
  68. width:200px;
  69. height:350px;
  70. display:inline-block;
  71. overflow:hidden;
  72. background:orange; /*change the sidebar background color here*/
  73. border:1px dashed red; /*change the sidebar border width, style, and color here*/
  74. }
  75.  
  76. .sidebarpic {
  77. position:absolute;
  78. width:200px;
  79. height:200px;
  80. border-bottom:1px dashed red; /*change this to match the sidebar border*/
  81. }
  82.  
  83. .sidebartext {
  84. color:#000; /*change the answer text color here*/
  85. text-align:left;
  86. margin-left:15px;
  87. margin-top:200px;
  88. position:absolute;
  89. max-width:100%;
  90. }
  91.  
  92. .question {
  93. color:#000; /*change the question font color here*/
  94. background:red; /*change the highlight color here*/
  95. text-transform:uppercase; /*if you dont want the questions uppercase take out this line*/
  96. font-weight:bold; /*if you dont want the questions bold take out this line*/
  97. font-size:16px; /*change question font size here*/
  98. display:inline-block;
  99. }
  100.  
  101. .about {
  102. width:500px;
  103. height:350px;
  104. display:inline-block;
  105. overflow:hidden;
  106. background:orange; /*change about box background color*/
  107. border:1px dashed red; /*change about box border width, style, and color*/
  108. }
  109.  
  110. .bottomwrapper {
  111. width:725px;
  112. height:215px;
  113. display:inline-block;
  114. overflow:hidden;
  115. }
  116.  
  117. .links {
  118. width:200px;
  119. height:150px;
  120. display:inline-block;
  121. overflow:hidden;
  122. }
  123.  
  124. .links a {
  125. background:orange; /*change background for bottom links*/
  126. font-size:20px; /*link font size*/
  127. color:#000; /*link font color*/
  128. border:1px dashed red; /*link border width, style, color*/
  129. text-transform:uppercase; /*if you dont want the links uppercase remove this line*/
  130. text-decoration:none;
  131. padding:5px 5px 5px 5px;
  132. }
  133.  
  134. .links a:hover {
  135. background:red; /*bottom links hover background*/
  136. }
  137.  
  138. .music {
  139. width:500px;
  140. height:150px;
  141. display:inline-block;
  142. overflow:hidden;
  143. background:orange; /*change the background color for the music box*/
  144. border:1px dashed red; /*change the music box border width, style, color*/
  145. }
  146.  
  147. .text {
  148. color:#000; /*text for music box + about color*/
  149. margin-left:15px;
  150. margin-right:15px;
  151. word-break:normal;
  152. max-width:100%;
  153. }
  154.  
  155. .credit a {
  156. position:fixed;
  157. bottom:5px;
  158. right:5px;
  159. font-size:25px;
  160. }
  161.  
  162. </style>
  163. </head>
  164. <body>
  165. <div class="container">
  166. <div class="title">hell page</div> <!--change the title here-->
  167. <div class="topwrapper">
  168. <div class="sidebar">
  169. <div class="sidebarpic"><img src="https://cdn.discordapp.com/attachments/591377288898019395/592168069129043969/41046_HnDEnWv5.png" width="200px" height:"200px"></div> <!--replace the url here with your icon url-->
  170. <div class="sidebartext">
  171. <p><div class="question">name:</div> fnsdjf</p> <!--change the answers here, and questions if you want too-->
  172. <p><div class="question">age:</div> fjdsk</p>
  173. <p><div class="question">prns:</div> fklds</p>
  174. <p><div class="question">sign:</div> fjksd</p>
  175. </div>
  176. </div>
  177. <div class="about">
  178. <div class="text">
  179. <!--about info start-->
  180. <p>hi put info about yourself here between these two comments</p>
  181. <!--about info end-->
  182. </div>
  183. </div>
  184. </div>
  185. <div class="bottomwrapper">
  186. <div class="links">
  187. <table style="width:100%;height:100%;">
  188. <tr>
  189. <!--for each link, you can change the link name and put the url where it says url here-->
  190. <th><a href="url here">link 1</a></th>
  191. <th><a href="url here">link 2</a></th>
  192. </tr>
  193. <tr>
  194. <th><a href="url here">link 3</a></th>
  195. <th><a href="url here">link 4</a></th>
  196. </tr>
  197. </table>
  198. </div>
  199. <div class="music">
  200. <div class="text">
  201. <!--music box info start-->
  202. <p>put music here i guess or banners</p>
  203. <!--music box info end-->
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. <div class="credit"><a href="https://tangycode.tumblr.com">☀</a>
  209. </body>
  210. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!