API tools faq
paste
tricksterkid

tumblr page // solitude

tricksterkid
Aug 28th, 2020 (edited)
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Name} / solitude</title> <!-- add page title here -->
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link href="https://fonts.googleapis.com/css?family=Poppins: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. /* custom colors for selection */
  20.  
  21. ::-moz-selection {background: #7459cf; color: #f0f0f0;}
  22. ::selection {background: #7459cf; color: #f0f0f0;}
  23.  
  24. /* custom scrollbar */
  25.  
  26. ::-webkit-scrollbar-thumb {background: #7459cf;}
  27. ::-webkit-scrollbar {background: #ab98e8; width: 5px;}
  28.  
  29. * {margin:0; padding:0;}
  30.  
  31. body {
  32. background: #f0f0f0; /* change background color */
  33. color: #4a4a4a; /* change text color */
  34. font-family: Poppins; /* change font */
  35. font-size: 13px; /* change font size */
  36. text-align: justify;
  37. }
  38.  
  39. #container {
  40. background: #cbbff3; /* change container background color */
  41. border-radius: 10px;
  42. height: 600px;
  43. left: 50%;
  44. margin-bottom: 40px;
  45. overflow: auto;
  46. padding: 20px;
  47. position: absolute;
  48. top: 50%;
  49. transform: translate(-50%,-50%);
  50. width: 750px;
  51. -ms-overflow-style: none;
  52. }
  53.  
  54. #container::-webkit-scrollbar {
  55. display: none;
  56. }
  57.  
  58. h1 { /* page title */
  59. color: #7459cf;
  60. font-family: Poppins;
  61. font-size: 30px;
  62. margin-bottom: 10px;
  63. padding-bottom: 10px;
  64. text-align: right;
  65. text-transform: uppercase;
  66. }
  67.  
  68. h2 { /* story titles */
  69. color: #b5ffea;
  70. font-family: Poppins;
  71. font-size: 16px;
  72. margin: 2px;
  73. text-align: left;
  74. }
  75.  
  76. a {
  77. color: #7459cf; /* link color */
  78. text-decoration: none;
  79. }
  80.  
  81. a:hover {
  82. color: #b5ffea; /* link hover color */
  83. transition: 0.4s;
  84. }
  85.  
  86. #contentcontainer { /* bordered container for content */
  87. border: 1px solid #b5ffea;
  88. border-top: none;
  89. height: 470px;
  90. overflow: auto;
  91. padding: 6px 12px;
  92. -ms-overflow-style: none;
  93. }
  94.  
  95. #contentcontainer::-webkit-scrollbar {
  96. display: none;
  97. }
  98.  
  99. #topbanner { /* colored banner above content */
  100. background-color: #ab98e8;
  101. border: 1px solid #b5ffea;
  102. height: 48px;
  103. overflow: hidden;
  104. }
  105.  
  106. .chaptercontainers { /* story boxes */
  107. float: left;
  108. height: 160px;
  109. margin: 10px 10px 10px 5px;
  110. width: 347px;
  111. }
  112.  
  113. .numbers { /* number box */
  114. background-color: #b5ffea;
  115. border-radius: 10px 0px 0px 0px;
  116. border-right: 5px solid #ab98e8;
  117. float: left;
  118. font-size: 20px;
  119. font-weight: bold;
  120. height: 30px;
  121. padding: 3px 0px 0px 0px;
  122. text-align: center;
  123. width: 35px;
  124. }
  125.  
  126. .titles { /* title box */
  127. background-color: #7459cf;
  128. border-radius: 0px 10px 0px 0px;
  129. float: right;
  130. height: 30px;
  131. padding: 3px 0px 0px 5px;
  132. width: 302px;
  133. }
  134.  
  135. .chapterlist { /* linkbox */
  136. background-color: #ab98e8;
  137. border-radius: 0px 0px 10px 10px;
  138. float: left;
  139. height: 130px;
  140. overflow-y: scroll;
  141. width: 347px;
  142. }
  143.  
  144. .links { /* individual link boxes */
  145. border-radius: 5px;
  146. display: block;
  147. margin: 5px;
  148. padding: 8px;
  149. text-transform: uppercase;
  150. }
  151.  
  152. .links:hover { /* link box on hover */
  153. background-color: #7459cf;
  154. padding-left: 20px;
  155. transition: 0.4s;
  156. }
  157.  
  158. #home {
  159. background-color: #7459cf;
  160. border-radius: 10px;
  161. color: #cbbff3;
  162. display: inline;
  163. float: left;
  164. margin-right: 5px;
  165. padding: 15px;
  166. }
  167.  
  168. #credit {
  169. background-color: #7459cf;
  170. color: #cbbff3;
  171. border-radius: 12px;
  172. bottom: 0;
  173. display: inline;
  174. margin: 8px;
  175. padding: 8px;
  176. position: fixed;
  177. right: 0;
  178. }
  179.  
  180. #credit:hover, #home:hover {
  181. background-color: #b5ffea;
  182. transition: 0.4s;
  183. }
  184.  
  185. </style>
  186.  
  187. </head>
  188.  
  189. <body>
  190.  
  191. <div id="container">
  192.  
  193. <a href="/">
  194. <div id="home">
  195. <i class="fa fa-home" style="font-size:15px"></i>
  196. </div>
  197. </a>
  198.  
  199. <h1>solitude</h1> <!-- main title -->
  200.  
  201. <div id="topbanner"></div>
  202.  
  203. <div id="contentcontainer">
  204.  
  205. <!-- START BLOCKS -->
  206.  
  207. <div class="chaptercontainers">
  208.  
  209. <div class="numbers">1</div>
  210.  
  211. <div class="titles">
  212. <h2>Story Title</h2>
  213. </div>
  214.  
  215. <div class="chapterlist">
  216. <a class="links" href="/">chapter 1</a>
  217. <a class="links" href="/">chapter 2</a>
  218. <a class="links" href="/">chapter 3</a>
  219. <a class="links" href="/">chapter 4</a>
  220. <a class="links" href="/">chapter 5</a>
  221. </div>
  222.  
  223. </div>
  224.  
  225. <div class="chaptercontainers">
  226.  
  227. <div class="numbers">2</div>
  228.  
  229. <div class="titles">
  230. <h2>Story Title</h2>
  231. </div>
  232.  
  233. <div class="chapterlist">
  234. <a class="links" href="/">chapter 1</a>
  235. <a class="links" href="/">chapter 2</a>
  236. <a class="links" href="/">chapter 3</a>
  237. <a class="links" href="/">chapter 4</a>
  238. <a class="links" href="/">chapter 5</a>
  239. </div>
  240.  
  241. </div>
  242.  
  243. <div class="chaptercontainers">
  244.  
  245. <div class="numbers">3</div>
  246.  
  247. <div class="titles">
  248. <h2>Story Title</h2>
  249. </div>
  250.  
  251. <div class="chapterlist">
  252. <a class="links" href="/">chapter 1</a>
  253. <a class="links" href="/">chapter 2</a>
  254. <a class="links" href="/">chapter 3</a>
  255. <a class="links" href="/">chapter 4</a>
  256. <a class="links" href="/">chapter 5</a>
  257. </div>
  258.  
  259. </div>
  260.  
  261. <div class="chaptercontainers">
  262.  
  263. <div class="numbers">4</div>
  264.  
  265. <div class="titles">
  266. <h2>Story Title</h2>
  267. </div>
  268.  
  269. <div class="chapterlist">
  270. <a class="links" href="/">chapter 1</a>
  271. <a class="links" href="/">chapter 2</a>
  272. <a class="links" href="/">chapter 3</a>
  273. <a class="links" href="/">chapter 4</a>
  274. <a class="links" href="/">chapter 5</a>
  275. </div>
  276.  
  277. </div>
  278.  
  279. <div class="chaptercontainers">
  280.  
  281. <div class="numbers">5</div>
  282.  
  283. <div class="titles">
  284. <h2>Story Title</h2>
  285. </div>
  286.  
  287. <div class="chapterlist">
  288. <a class="links" href="/">chapter 1</a>
  289. <a class="links" href="/">chapter 2</a>
  290. <a class="links" href="/">chapter 3</a>
  291. <a class="links" href="/">chapter 4</a>
  292. <a class="links" href="/">chapter 5</a>
  293. </div>
  294.  
  295. </div>
  296.  
  297. <div class="chaptercontainers">
  298.  
  299. <div class="numbers">6</div>
  300.  
  301. <div class="titles">
  302. <h2>Story Title</h2>
  303. </div>
  304.  
  305. <div class="chapterlist">
  306. <a class="links" href="/">chapter 1</a>
  307. <a class="links" href="/">chapter 2</a>
  308. <a class="links" href="/">chapter 3</a>
  309. <a class="links" href="/">chapter 4</a>
  310. <a class="links" href="/">chapter 5</a>
  311. </div>
  312.  
  313. </div>
  314.  
  315. <!-- END BLOCKS -->
  316.  
  317. </div>
  318.  
  319. </div>
  320.  
  321. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  322.  
  323. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/"><i class="fa fa-anchor" style="font-size:15px"></i></a>
  324.  
  325. </body>
  326.  
  327. </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!