API tools faq
paste
tricksterkid

NOTEBOOK Page Theme DARK

tricksterkid
Feb 1st, 2020
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.26 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: #191919;}
  20. ::selection {background: #c83454; color: #191919;}
  21.  
  22. ::-webkit-scrollbar-thumb {background: #8a2037;}
  23. ::-webkit-scrollbar {background: #191919; width: 5px;}
  24.  
  25. * {margin:0; padding:0;}
  26.  
  27. body {
  28. background: #191919; /* change background color */
  29. color: #f6f6f6; /* 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: #313131;
  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: 600px;
  47. }
  48.  
  49. #menu {
  50. background-color: #c83454; /* color of top banner */
  51. border-radius: 5px;
  52. height: 50px;
  53. padding-top: 30px;
  54. text-align: center;
  55. width: 600px;
  56. }
  57.  
  58. #info {
  59. border-bottom: 1px solid #8a2037;
  60. font-style: italic;
  61. padding: 10px;
  62. text-align: center;
  63. }
  64.  
  65. #text {
  66. padding: 10px;
  67. }
  68.  
  69. #credit {
  70. background-color: #c83454;
  71. color: #313131;
  72. border-radius: 10px;
  73. bottom: 0;
  74. display: inline;
  75. margin: 10px;
  76. padding: 10px;
  77. position: fixed;
  78. right: 0;
  79. }
  80.  
  81. #credit:hover{
  82. background-color: #8a2037;
  83. -o-transition: all 0.4s ease;
  84. -moz-transition: all 0.4s ease;
  85. -webkit-transition: all 0.4s ease;
  86. }
  87.  
  88. .button {
  89. background-color: #313131; /* background color of buttons */
  90. color: #c83454; /* color of icons */
  91. border-radius: 5px;
  92. display: inline;
  93. margin: 20px;
  94. padding: 20px;
  95. }
  96.  
  97. .button:hover {
  98. background-color: #8a2037;
  99. color:#191919;
  100. -o-transition: all 0.4s ease;
  101. -moz-transition: all 0.4s ease;
  102. -webkit-transition: all 0.4s ease;
  103. }
  104.  
  105. h1 {
  106. border-bottom: 1px solid #8a2037;
  107. color: #c83454;
  108. font-family: Bitter;
  109. font-size: 20px;
  110. padding-bottom: 20px;
  111. text-align: center;
  112. }
  113.  
  114. a {
  115. color: #9e9e9e; /* link color */
  116. text-decoration: none;
  117. }
  118.  
  119. a:hover {
  120. color: #ffffff; /* link hover color */
  121. -o-transition: all 0.4s ease;
  122. -moz-transition: all 0.4s ease;
  123. -webkit-transition: all 0.4s ease;
  124. }
  125.  
  126. </style>
  127.  
  128. </head>
  129.  
  130. <body>
  131.  
  132. <div id="container">
  133.  
  134. <div id="menu">
  135. <!-- first button, previous chapter -->
  136.  
  137. <a href=""> <!-- add your link here! -->
  138. <div class="button">
  139. <i class="fa fa-arrow-left" style="font-size:15px"></i>
  140. </div>
  141. </a>
  142.  
  143. <!-- second button, home -->
  144.  
  145. <a href="/">
  146. <div class="button">
  147. <i class="fa fa-home" style="font-size:15px"></i>
  148. </div>
  149. </a>
  150.  
  151. <!-- third button, next chapter -->
  152.  
  153. <a href=""> <!-- add your link here! -->
  154. <div class="button">
  155. <i class="fa fa-arrow-right" style="font-size:15px"></i>
  156. </div>
  157. </a>
  158. </div>
  159.  
  160. <br>
  161.  
  162. <h1>Notebook</h1> <!-- title of the page / chapter title -->
  163.  
  164. <div id="info">
  165.  
  166. <b>Summary:</b> this is a page for everyone who loves to write stuff! This is <b>bold</b> text, this is <u>underlined</u> text, and this is a <a href="">link</a>! Have fun writing :)
  167.  
  168. <br><br>
  169.  
  170. <b>Trigger warnings:</b> include your trigger warnings here!
  171.  
  172. </div>
  173.  
  174. <!-- paste your story below! in order to make separate paragraphs, add <br><br> between the parts you'd like to separate -->
  175.  
  176. <div id="text">
  177.  
  178. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  179.  
  180. <br><br>
  181.  
  182. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  183.  
  184. <br><br>
  185.  
  186. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Netus et malesuada fames ac turpis. Blandit aliquam etiam erat velit. Tempor orci dapibus ultrices in iaculis nunc sed. In eu mi bibendum neque egestas congue quisque egestas. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Varius duis at consectetur lorem donec. Dolor purus non enim praesent elementum facilisis leo vel. Ipsum faucibus vitae aliquet nec. Sit amet purus gravida quis blandit. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Quisque sagittis purus sit amet volutpat consequat mauris. Diam maecenas sed enim ut sem. Pharetra magna ac placerat vestibulum lectus. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Eleifend donec pretium vulputate sapien nec sagittis.
  187.  
  188. <br><br>
  189.  
  190. Donec ac odio tempor orci dapibus ultrices in. At in tellus integer feugiat scelerisque varius morbi. Odio ut sem nulla pharetra diam. Eget magna fermentum iaculis eu non diam phasellus. Quis ipsum suspendisse ultrices gravida dictum. Viverra mauris in aliquam sem. Neque aliquam vestibulum morbi blandit cursus risus at. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Nunc mattis enim ut tellus elementum sagittis vitae. Tortor at risus viverra adipiscing at in tellus. Pellentesque sit amet porttitor eget dolor morbi non arcu. Vitae turpis massa sed elementum tempus egestas sed sed risus.
  191.  
  192. </div>
  193.  
  194. </div>
  195.  
  196. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  197.  
  198. <a target="blank" href="https://nuclearvessel.tumblr.com/"><div id="credit"><i class="fa fa-star" style="font-size:15px"></i></div></a>
  199.  
  200. </body>
  201.  
  202. </html>
Advertisement
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!