API tools faq
paste
tricksterkid

STICKY NOTES Page Theme COLORFUL

tricksterkid
Feb 2nd, 2020
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARVESSEL ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>title</title> <!-- add page title here -->
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link href="https://fonts.googleapis.com/css?family=Bitter:400,400i,700|Overpass:400,400i,700,700i" rel="stylesheet">
  14.  
  15. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  16.  
  17. <style type="text/css">
  18.  
  19. ::-moz-selection{background: #c83454; color: #f6f6f6;}
  20. ::selection {background: #c83454; color: #f6f6f6;}
  21.  
  22. ::-webkit-scrollbar-thumb {background: #8a2037;}
  23. ::-webkit-scrollbar {background: #f6f6f6; width: 5px;}
  24.  
  25. * {margin:0; padding:0;}
  26.  
  27. body {
  28. background: #f6f6f6; /* change background color */
  29. color: #444444; /* change text color */
  30. font-family: Overpass; /* change font */
  31. font-size: 13px; /* change font size */
  32. text-align: justify;
  33. }
  34.  
  35. #container {
  36. background: #dccbe7;
  37. border-radius: 5px;
  38. height: 600px;
  39. left: 50%;
  40. margin-bottom: 40px;
  41. overflow: auto;
  42. padding: 20px;
  43. position: absolute;
  44. top: 50%;
  45. transform: translate(-50%,-50%);
  46. width: 1000px;
  47. }
  48.  
  49. #draw {
  50. background-color: #f6f6f6;
  51. border-radius: 5px;
  52. float: left;
  53. height: 500px; /* change if you need more/less space */
  54. margin-top: 17px;
  55. padding: 10px;
  56. width: 200px;
  57. }
  58.  
  59. #status {
  60. background-color: #f6f6f6;
  61. border-radius: 5px;
  62. float: left;
  63. height: 150px;
  64. margin-left: 45px;
  65. margin-top: 17px;
  66. padding: 10px;
  67. text-align: center;
  68. width: 450px;
  69. }
  70.  
  71. #information {
  72. background-color: #f6f6f6;
  73. border-radius: 5px;
  74. float: left;
  75. height: 310px;
  76. margin-top: 20px;
  77. margin-left: 45px;
  78. overflow: auto;
  79. padding: 10px;
  80. width: 450px;
  81. }
  82.  
  83. #rules {
  84. background-color: #f6f6f6;
  85. border-radius: 5px;
  86. float: right;
  87. height: 500px; /* change if you need more/less space */
  88. margin-top: 17px;
  89. padding: 10px;
  90. width: 200px;
  91. }
  92.  
  93. #credit {
  94. background-color: #c83454;
  95. color: #dccbe7;
  96. border-radius: 10px;
  97. bottom: 0;
  98. display: inline;
  99. margin: 10px;
  100. padding: 10px;
  101. position: fixed;
  102. right: 0;
  103. }
  104.  
  105. .home {
  106. background-color: #c83454; /* background color of home button */
  107. color: #dccbe7; /* color of icon */
  108. border-radius: 5px;
  109. display: inline;
  110. float: left;
  111. padding: 15px;
  112. }
  113.  
  114. .home:hover, #credit:hover {
  115. background-color: #8a2037;
  116. -o-transition: all 0.4s ease;
  117. -moz-transition: all 0.4s ease;
  118. -webkit-transition: all 0.4s ease;
  119. }
  120.  
  121. h1 {
  122. border-bottom: 1px solid #8a2037;
  123. color: #c83454;
  124. font-family: Bitter;
  125. font-size: 20px;
  126. margin-top: 15px;
  127. padding-bottom: 20px;
  128. text-align: center;
  129. }
  130.  
  131. h2 {
  132. border-bottom: 1px solid #8a2037;
  133. border-radius: 5px;
  134. color: #c83454;
  135. font-family: Bitter;
  136. font-size: 16px;
  137. margin-bottom: 10px;
  138. padding: 5px;
  139. text-align: center;
  140. }
  141.  
  142. a {
  143. color: #9e9e9e; /* link color */
  144. text-decoration: none;
  145. }
  146.  
  147. a:hover {
  148. color: #222222; /* link hover color */
  149. -o-transition: all 0.4s ease;
  150. -moz-transition: all 0.4s ease;
  151. -webkit-transition: all 0.4s ease;
  152. }
  153.  
  154. </style>
  155.  
  156. </head>
  157.  
  158. <body>
  159.  
  160. <div id="container">
  161.  
  162. <a href="/">
  163. <div class="home">
  164. <i class="fa fa-home" style="font-size:15px"></i>
  165. </div>
  166. </a>
  167.  
  168. <h1>Sticky Notes</h1>
  169.  
  170. <!-- first box, left -->
  171.  
  172. <div id="draw">
  173.  
  174. <h2>I Will Draw...</h2>
  175. <i class="fa fa-check" style="font-size:15px"></i>
  176. Point 1
  177. <br>
  178. <i class="fa fa-check" style="font-size:15px"></i>
  179. Point 2
  180. <br>
  181. <i class="fa fa-check" style="font-size:15px"></i>
  182. Point 3
  183. <br>
  184. <i class="fa fa-check" style="font-size:15px"></i>
  185. Point 4
  186. <br>
  187. <i class="fa fa-check" style="font-size:15px"></i>
  188. Point 5
  189. <br>
  190. <i class="fa fa-check" style="font-size:15px"></i>
  191. Point 6
  192. <br>
  193. <i class="fa fa-check" style="font-size:15px"></i>
  194. Point 7
  195. <br>
  196. <i class="fa fa-check" style="font-size:15px"></i>
  197. Point 8
  198. <br>
  199.  
  200. <h2>I Might Draw...</h2>
  201. <i class="fa fa-question" style="font-size:15px"></i>
  202. Point 1
  203. <br>
  204. <i class="fa fa-question" style="font-size:15px"></i>
  205. Point 2
  206. <br>
  207. <i class="fa fa-question" style="font-size:15px"></i>
  208. Point 3
  209. <br>
  210. <i class="fa fa-question" style="font-size:15px"></i>
  211. Point 4
  212. <br>
  213. <i class="fa fa-question" style="font-size:15px"></i>
  214. Point 5
  215. <br>
  216. <i class="fa fa-question" style="font-size:15px"></i>
  217. Point 6
  218. <br>
  219.  
  220. <h2>I Will Not Draw...</h2>
  221. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  222. Point 1
  223. <br>
  224. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  225. Point 2
  226. <br>
  227. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  228. Point 3
  229. <br>
  230. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  231. Point 4
  232. <br>
  233. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  234. Point 5
  235. <br>
  236. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  237. Point 6
  238. <br>
  239. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  240. Point 7
  241. <br>
  242. <i class="fa fa-thumbs-down" style="font-size:15px"></i>
  243. Point 8
  244. <br>
  245.  
  246. </div>
  247.  
  248. <!-- second box, middle top -->
  249.  
  250. <div id="status">
  251.  
  252. <h2>Status</h2>
  253.  
  254. <b>COMMISSIONS STATUS:</b> text goes here. <br><br>
  255. <b>SLOTS OPEN:</b> text goes here. <br><br>
  256.  
  257. <a href="">LINK 1</a>
  258. <i class="fa fa-star" style="font-size:15px"></i>
  259. <a href="">LINK 2</a>
  260. <i class="fa fa-star" style="font-size:15px"></i>
  261. <a href="">LINK 3</a>
  262. <i class="fa fa-star" style="font-size:15px"></i>
  263. <a href="">LINK 4</a>
  264. <i class="fa fa-star" style="font-size:15px"></i>
  265. <a href="">LINK 5</a>
  266.  
  267. </div>
  268.  
  269. <!-- third box, right -->
  270.  
  271. <div id="rules">
  272.  
  273. <h2>Rules</h2>
  274. <i class="fa fa-rocket" style="font-size:15px"></i>
  275. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  276. <br><br>
  277. <i class="fa fa-rocket" style="font-size:15px"></i>
  278. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
  279. <br><br>
  280. <i class="fa fa-rocket" style="font-size:15px"></i>
  281. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec.
  282. <br><br>
  283. <i class="fa fa-rocket" style="font-size:15px"></i>
  284. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada.
  285. <br><br>
  286. <i class="fa fa-rocket" style="font-size:15px"></i>
  287. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  288.  
  289. </div>
  290.  
  291. <!-- fourth box, middle bottom -->
  292.  
  293. <div id="information">
  294.  
  295. <h2>Details & Prices</h2>
  296.  
  297. <h3>Type of Commission // $10</h3>
  298.  
  299. <i>Here you can put a short description of what you're selling. This is <b>bold text</b>, this is <u>underlined text</u> and this is <a href="">a link</a>.</i>
  300.  
  301. <br><br>
  302.  
  303. <h3>Type of Commission // $10</h3>
  304.  
  305. <i>Here you can put a short description of what you're selling. This is <b>bold text</b>, this is <u>underlined text</u> and this is <a href="">a link</a>.</i>
  306.  
  307. <br><br>
  308.  
  309. <h3>Type of Commission // $10</h3>
  310.  
  311. <i>Here you can put a short description of what you're selling. This is <b>bold text</b>, this is <u>underlined text</u> and this is <a href="">a link</a>.</i>
  312.  
  313. <br><br>
  314.  
  315. <h3>Type of Commission // $10</h3>
  316.  
  317. <i>Here you can put a short description of what you're selling. This is <b>bold text</b>, this is <u>underlined text</u> and this is <a href="">a link</a>.</i>
  318.  
  319. <br><br>
  320.  
  321. <h3>Type of Commission // $10</h3>
  322.  
  323. <i>Here you can put a short description of what you're selling. This is <b>bold text</b>, this is <u>underlined text</u> and this is <a href="">a link</a>.</i>
  324.  
  325. <br><br>
  326.  
  327. </div>
  328.  
  329. </div>
  330.  
  331. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  332.  
  333. <a target="blank" href="https://nuclearvessel.tumblr.com/"><div id="credit"><i class="fa fa-star" style="font-size:15px"></i></div></a>
  334.  
  335. </body>
  336.  
  337. </html>
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!