API tools faq
paste
tricksterkid

FRAMEWORK Page Theme DARK

tricksterkid
Feb 2nd, 2020
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.99 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: 700px;
  47. }
  48.  
  49. #menu {
  50. background-color: #c83454; /* color of top banner */
  51. border-radius: 5px;
  52. height: 50px;
  53. padding-top: 15px;
  54. padding-bottom: 15px;
  55. width: 700px;
  56. }
  57.  
  58. #content {
  59. margin-top: 20px;
  60. padding: 10px;
  61. width: 680px;
  62. }
  63.  
  64. #credit {
  65. background-color: #c83454;
  66. color: #313131;
  67. border-radius: 10px;
  68. bottom: 0;
  69. display: inline;
  70. margin: 10px;
  71. padding: 10px;
  72. position: fixed;
  73. right: 0;
  74. }
  75.  
  76. #credit:hover{
  77. background-color: #8a2037;
  78. -o-transition: all 0.4s ease;
  79. -moz-transition: all 0.4s ease;
  80. -webkit-transition: all 0.4s ease;
  81. }
  82.  
  83. button, .button {
  84. background-color: #313131; /* background color of buttons */
  85. border: none;
  86. color: #c83454; /* color of icon & text */
  87. border-radius: 5px;
  88. display: inline;
  89. /* change the next two if you want to add more filters in the menu! */
  90. margin: 0px 16px 0px;
  91. padding: 19px;
  92. }
  93.  
  94. .button.active {
  95. background-color: #8a2037;
  96. color:#313131;
  97. }
  98.  
  99. .button:hover {
  100. background-color: #8a2037;
  101. color:#313131;
  102. -o-transition: all 0.4s ease;
  103. -moz-transition: all 0.4s ease;
  104. -webkit-transition: all 0.4s ease;
  105. }
  106.  
  107. button:hover {
  108. cursor: pointer;
  109. }
  110.  
  111. .linkbox {
  112. background-color: #191919; /* background color of box */
  113. border-radius: 5px;
  114. display: none;
  115. float: left;
  116. height: 350px;
  117. margin: 0px 13px 10px;
  118. overflow: auto;
  119. padding: 0px;
  120. text-align: center;
  121. width: 200px;
  122. }
  123.  
  124. .links {
  125. border-radius: 5px;
  126. display: block;
  127. margin: 5px;
  128. padding: 8px;
  129. text-transform: uppercase;
  130. text-align: left;
  131. }
  132.  
  133. .sublinks {
  134. border-left: 1px solid #8a2037;
  135. border-radius: 5px;
  136. display: block;
  137. font-style: italic;
  138. margin: 5px 5px 5px 30px;
  139. padding: 5px;
  140. text-align: left;
  141. }
  142.  
  143. .links:hover {
  144. background-color: #c3c3c3;
  145. }
  146.  
  147. .show {
  148. display: block; /* don't delete this!! */
  149. }
  150.  
  151. h1 { /* main title */
  152. border-bottom: 1px solid #8a2037;
  153. color: #c83454;
  154. font-family: Bitter;
  155. font-size: 20px;
  156. padding-bottom: 20px;
  157. text-align: center;
  158. }
  159.  
  160. h2 { /* subheadings on each box */
  161. background-color: #c83454;
  162. border-radius: 5px;
  163. color: #191919;
  164. font-family: Overpass;
  165. font-size: 16px;
  166. margin: 0px;
  167. padding: 10px;
  168. text-align: center;
  169. }
  170.  
  171. a {
  172. color: #9e9e9e; /* link color */
  173. text-decoration: none;
  174. }
  175.  
  176. a:hover {
  177. color: #ffffff; /* link hover color */
  178. -o-transition: all 0.4s ease;
  179. -moz-transition: all 0.4s ease;
  180. -webkit-transition: all 0.4s ease;
  181. }
  182.  
  183. </style>
  184.  
  185. </head>
  186.  
  187. <body>
  188.  
  189. <div id="container">
  190.  
  191. <div id="menu">
  192.  
  193. <a href="/">
  194. <div class="button" style="text-align:center;">
  195. <i class="fa fa-home" style="font-size:15px"></i>
  196. </div>
  197. </a>
  198.  
  199. <!-- these are your filters, you can add more by copy pasting one of them! -->
  200.  
  201. <button class="button active" onclick="filterSelection('all')">ALL</button>
  202. <button class="button" onclick="filterSelection('filter1')">FILTER 1</button>
  203. <button class="button" onclick="filterSelection('filter2')">FILTER 2</button>
  204. <button class="button" onclick="filterSelection('filter3')">FILTER 3</button>
  205. <button class="button" onclick="filterSelection('filter4')">FILTER 4</button>
  206.  
  207. </div>
  208.  
  209. <br>
  210.  
  211. <h1>Framework</h1>
  212.  
  213. <div id="content">
  214.  
  215. <!-- LINKBOX START -->
  216.  
  217. <div class="linkbox filter1"> <!-- add a filter tag or multiple here! -->
  218.  
  219. <h2>title linkbox 1</h2>
  220.  
  221. <a class="links" href="">link number 1</a>
  222. <a class="sublinks" href="">sublink number 1</a>
  223. <a class="sublinks" href="">sublink number 2</a>
  224. <a class="sublinks" href="">sublink number 3</a>
  225. <a class="links" href="">link number 2</a>
  226. <a class="sublinks" href="">sublink number 4</a>
  227. <a class="sublinks" href="">sublink number 5</a>
  228. <a class="links" href="">link number 3</a>
  229. <a class="links" href="">link number 4</a>
  230.  
  231. </div>
  232.  
  233. <!-- LINKBOX END -->
  234.  
  235. <!-- LINKBOX START -->
  236.  
  237. <div class="linkbox filter2"> <!-- add a filter tag or multiple here! -->
  238.  
  239. <h2>title linkbox 2</h2>
  240.  
  241. <a class="links" href="">link number 1</a>
  242. <a class="sublinks" href="">sublink number 1</a>
  243. <a class="sublinks" href="">sublink number 2</a>
  244. <a class="sublinks" href="">sublink number 3</a>
  245. <a class="links" href="">link number 2</a>
  246. <a class="sublinks" href="">sublink number 4</a>
  247. <a class="sublinks" href="">sublink number 5</a>
  248. <a class="links" href="">link number 3</a>
  249. <a class="links" href="">link number 4</a>
  250.  
  251. </div>
  252.  
  253. <!-- LINKBOX END -->
  254.  
  255. <!-- LINKBOX START -->
  256.  
  257. <div class="linkbox filter2"> <!-- add a filter tag or multiple here! -->
  258.  
  259. <h2>title linkbox 3</h2>
  260.  
  261. <a class="links" href="">link number 1</a>
  262. <a class="sublinks" href="">sublink number 1</a>
  263. <a class="sublinks" href="">sublink number 2</a>
  264. <a class="sublinks" href="">sublink number 3</a>
  265. <a class="links" href="">link number 2</a>
  266. <a class="sublinks" href="">sublink number 4</a>
  267. <a class="sublinks" href="">sublink number 5</a>
  268. <a class="links" href="">link number 3</a>
  269. <a class="links" href="">link number 4</a>
  270.  
  271. </div>
  272.  
  273. <!-- LINKBOX END -->
  274.  
  275. <!-- LINKBOX START -->
  276.  
  277. <div class="linkbox filter3"> <!-- add a filter tag or multiple here! -->
  278.  
  279. <h2>title linkbox 4</h2>
  280.  
  281. <a class="links" href="">link number 1</a>
  282. <a class="sublinks" href="">sublink number 1</a>
  283. <a class="sublinks" href="">sublink number 2</a>
  284. <a class="sublinks" href="">sublink number 3</a>
  285. <a class="links" href="">link number 2</a>
  286. <a class="sublinks" href="">sublink number 4</a>
  287. <a class="sublinks" href="">sublink number 5</a>
  288. <a class="links" href="">link number 3</a>
  289. <a class="links" href="">link number 4</a>
  290.  
  291. </div>
  292.  
  293. <!-- LINKBOX END -->
  294.  
  295. <!-- LINKBOX START -->
  296.  
  297. <div class="linkbox filter1, filter4"> <!-- add a filter tag or multiple here! -->
  298.  
  299. <h2>title linkbox 5</h2>
  300.  
  301. <a class="links" href="">link number 1</a>
  302. <a class="sublinks" href="">sublink number 1</a>
  303. <a class="sublinks" href="">sublink number 2</a>
  304. <a class="sublinks" href="">sublink number 3</a>
  305. <a class="links" href="">link number 2</a>
  306. <a class="sublinks" href="">sublink number 4</a>
  307. <a class="sublinks" href="">sublink number 5</a>
  308. <a class="links" href="">link number 3</a>
  309. <a class="links" href="">link number 4</a>
  310.  
  311. </div>
  312.  
  313. <!-- LINKBOX END -->
  314.  
  315. <!-- LINKBOX START -->
  316.  
  317. <div class="linkbox filter4"> <!-- add a filter tag or multiple here! -->
  318.  
  319. <h2>title linkbox 6</h2>
  320.  
  321. <a class="links" href="">link number 1</a>
  322. <a class="sublinks" href="">sublink number 1</a>
  323. <a class="sublinks" href="">sublink number 2</a>
  324. <a class="sublinks" href="">sublink number 3</a>
  325. <a class="links" href="">link number 2</a>
  326. <a class="sublinks" href="">sublink number 4</a>
  327. <a class="sublinks" href="">sublink number 5</a>
  328. <a class="links" href="">link number 3</a>
  329. <a class="links" href="">link number 4</a>
  330.  
  331. </div>
  332.  
  333. <!-- LINKBOX END -->
  334.  
  335. </div>
  336.  
  337. </div>
  338.  
  339. <!-- script for the filters, i copied this from w3schools don't judge me -->
  340.  
  341. <script>
  342. filterSelection("all")
  343. function filterSelection(c) {
  344. var x, i;
  345. x = document.getElementsByClassName("linkbox");
  346. if (c == "all") c = "";
  347. for (i = 0; i < x.length; i++) {
  348. w3RemoveClass(x[i], "show");
  349. if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  350. }
  351. }
  352.  
  353. function w3AddClass(element, name) {
  354. var i, arr1, arr2;
  355. arr1 = element.className.split(" ");
  356. arr2 = name.split(" ");
  357. for (i = 0; i < arr2.length; i++) {
  358. if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  359. }
  360. }
  361.  
  362. function w3RemoveClass(element, name) {
  363. var i, arr1, arr2;
  364. arr1 = element.className.split(" ");
  365. arr2 = name.split(" ");
  366. for (i = 0; i < arr2.length; i++) {
  367. while (arr1.indexOf(arr2[i]) > -1) {
  368. arr1.splice(arr1.indexOf(arr2[i]), 1);
  369. }
  370. }
  371. element.className = arr1.join(" ");
  372. }
  373.  
  374. var btnContainer = document.getElementById("menu");
  375. var btns = btnContainer.getElementsByClassName("button");
  376. for (var i = 0; i < btns.length; i++) {
  377. btns[i].addEventListener("click", function(){
  378. var current = document.getElementsByClassName("active");
  379. current[0].className = current[0].className.replace(" active", "");
  380. this.className += " active";
  381. });
  382. }
  383. </script>
  384.  
  385. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  386.  
  387. <a target="blank" href="https://nuclearvessel.tumblr.com/"><div id="credit"><i class="fa fa-star" style="font-size:15px"></i></div></a>
  388.  
  389. </body>
  390.  
  391. </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!