API tools faq
paste
fatalst

3d glasses network

fatalst
Apr 19th, 2018
560
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. THE FATALST'S 3D GLASSES NETWORK PAGE
  8.  
  9. PLEASE DONT DELETE CREDIT. MESSAGE ME AT FATALST.TUMBLR.COM/ASK
  10.  
  11. LAST UPDATED: APR 2018
  12.  
  13. -->
  14.  
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <title>{TITLE}</title>
  17. <link rel="alternate" type="application/rss+xml" href="https://fatalst.tumblr.com/rss">
  18.  
  19. <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
  20. <link href="https://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet">
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  22. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  23.  
  24.  
  25. <style type="text/css">
  26.  
  27. /*
  28. VARIABLES. CHANGE THE COLORS AT WILL.
  29. accent-1 is defaulted at red. it's used when the tabs are hovered over.
  30. accent-2 is defaulted at black. it's used in outlines, the scrollbar, and the tab bars.
  31. accent-10 is defaulted at light blue. it's used in italics and the hover of box links.
  32. accent-20 is defaulted at light red. it's used bold and the box links.
  33. */
  34. :root {
  35. --accent-1: rgb(246,5,10);
  36. --accent-2: #000000;
  37. --accent-10: rgb(204, 255, 255);
  38. --accent-20: rgb(255, 229, 230);
  39. --text: #000000;
  40. --bkgd: #ffffff;
  41. }
  42.  
  43. /* SCROLLBAR */
  44. ::-webkit-scrollbar {
  45. width: 2px;
  46. height: 2px;
  47. }
  48.  
  49. ::-webkit-scrollbar-button {
  50. width: 0px;
  51. height: 0px;
  52. }
  53.  
  54. ::-webkit-scrollbar-thumb {
  55. background: var(--accent-2);
  56. border: 0px none #ffffff;
  57. border-radius: 0px;
  58. }
  59.  
  60. ::-webkit-scrollbar-thumb:hover {
  61. background: var(--accent-2);
  62. }
  63.  
  64. ::-webkit-scrollbar-thumb:active {
  65. background: transparent;
  66. }
  67.  
  68. ::-webkit-scrollbar-track {
  69. background: transparent;
  70. border: 0px none #ffffff;
  71. border-radius: 0px;
  72. }
  73.  
  74. ::-webkit-scrollbar-track:hover {
  75. background: transparent;
  76. }
  77.  
  78. ::-webkit-scrollbar-track:active {
  79. background: transparent;
  80. }
  81.  
  82. ::-webkit-scrollbar-corner {
  83. background: transparent;
  84. }
  85.  
  86. body{
  87. background-color: var(--bkgd);
  88. font-family: 'VT323', monospace;
  89. color: var(--text);
  90. font-size: 13px;
  91. text-align: center;
  92. max-width: 100%;
  93. overflow-x: hidden;
  94. }
  95.  
  96. /* NORMAL LINKS */
  97. a:link, a:visited{
  98. font-style: normal;
  99. color: var(--accent-2);
  100. text-decoration: underline;
  101. letter-spacing: 1.5px;
  102. }
  103.  
  104. a:hover, a:active{
  105. color: var(--text);
  106. font-weight: bolder;
  107. text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10);
  108. letter-spacing: 1.5px;
  109. text-decoration: none;
  110. }
  111.  
  112. /* NAME/PAGE TITLE */
  113. #title{
  114. position: relative;
  115. height: auto;
  116. margin-top: -40px;
  117. width: auto;
  118. float: center;
  119. text-align: center;
  120. }
  121.  
  122. h1{
  123. font-family: 'VT323', monospace;
  124. font-size: 100px;
  125. color: var(--text);
  126. letter-spacing: 2px;
  127. text-align: center;
  128. float: center;
  129. margin-bottom: -10px;
  130. text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ;
  131. }
  132.  
  133. /*
  134. ALL THE CONTENTS IN DIVS.
  135. don't mess too much with these or it's gonna get all wonky.
  136. */
  137. #container{
  138. top: 2%;
  139. position: relative;
  140. height: auto;
  141. width: 1170px;
  142. float: bottom;
  143. margin-top: 30px;
  144. padding: 0px;
  145. display: inline-block;
  146. }
  147.  
  148. .ImageContainer{
  149. width: 130px;
  150. height: 190px;
  151. float: top;
  152. margin-right: 10px;
  153. margin-left: 5px;
  154. margin-top: 5px;
  155. position: relative;
  156. display: inline-block;
  157. float: left;
  158. outline: solid 1px var(--accent-2);
  159. }
  160.  
  161. img{
  162. width: 130px;
  163. height: 190px;
  164. box-shadow: -3px -3px 3px rgb(246,5,10) , 3px 3px 3px rgb(30,242,241) ;
  165. }
  166.  
  167. #tabs{
  168. width: 100%;
  169. position: relative;
  170. display: block;
  171. margin-top: 10px;
  172. margin-bottom: -20px;
  173. float: center;
  174. }
  175.  
  176. .tab button {
  177. font-family: 'VT323', monospace;
  178. font-size: 16px;
  179. background-color: inherit;
  180. float: center;
  181. border: none;
  182. outline: none;
  183. cursor: pointer;
  184. padding: 14px 16px;
  185. padding-bottom: 5px;
  186. transition: 0.3s;
  187. margin-right: 15px;
  188. display: inline-block;
  189. margin-bottom: 5px;
  190. color: var(--text);
  191. border-bottom: var(--bkgd) solid 4px;
  192. }
  193.  
  194. .tab button:hover {
  195. color: var(--accent-1);
  196. }
  197.  
  198. .tab button.active {
  199. border-bottom: solid 4px var(--accent-2);
  200. text-shadow: -2px 0 1px rgb(30,242,241) , 2px 0 1px rgb(246,5,10) ;
  201. }
  202.  
  203. .tabcontent {
  204. display: none;
  205. padding: 6px 12px;
  206. border-top: none;
  207. animation: fadeEffect 1s; /* Fading effect takes 1 second */
  208. }
  209.  
  210. /* Go from zero to full opacity */
  211. @keyframes fadeEffect {
  212. from {opacity: 0;}
  213. to {opacity: 1;}
  214. }
  215.  
  216. /* CHARACTER BOX */
  217. .per{
  218. width: 350px;
  219. height: 200px;
  220. position: relative;
  221. display: inline-block;
  222. float: center;
  223. padding: 10px;
  224. margin: 0px;
  225. margin-left: 8px;
  226. margin-right: 8px;
  227. margin-bottom: 16px;
  228. outline: solid 1px var(--accent-2);
  229. overflow: scroll;
  230. box-shadow: -3px -3px 3px rgb(30,242,241) , 3px 3px 3px rgb(246,5,10) ;
  231. }
  232.  
  233. .content{
  234. width: 200px;
  235. display: inline-block;
  236. }
  237.  
  238. .quote{
  239. text-align: center;
  240. color: var(--accent-1);
  241. font-style: oblique;
  242. font-size: 14px;
  243. line-height: 10px;
  244. margin-top: 10px;
  245. margin-bottom: 5px;
  246. padding: 5px;
  247. width: auto;
  248. float: center;
  249. letter-spacing: 1.5px;
  250. }
  251.  
  252. p{
  253. margin-bottom: 5px;
  254. text-align: justify;
  255. padding: 5px;
  256. padding-top: 0px;
  257. height: 82px;
  258. overflow-y: hidden;
  259. }
  260.  
  261. /* CONTENT HEADERS */
  262. h2{
  263. color: var(--text);
  264. text-transform: uppercase;
  265. font-size: 24px;
  266. margin-top: 5px;
  267. margin-bottom: -10px;
  268. padding-bottom: 4px;
  269. text-align: center;
  270. }
  271.  
  272. h2:hover{
  273. text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ;
  274. }
  275.  
  276. /*
  277. I messed with bold/italics.
  278. Feel free to alter it as you want.
  279. */
  280.  
  281. b{
  282. color: var(--text);
  283. font-weight:900;
  284. background: var(--accent-20);
  285. padding-left:5px;
  286. padding-right:5px;
  287. }
  288.  
  289. i{
  290. padding-left:5px;
  291. padding-right:5px;
  292. background: var(--accent-10);
  293. color: var(--text);
  294. letter-spacing: 1.5px;
  295. }
  296.  
  297. s{
  298. padding-left: 5px;
  299. padding-right: 5px;
  300. text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ;
  301. }
  302.  
  303. /* BOX LINKS */
  304. .links{
  305. height: 12px;
  306. width: 100%;
  307. float: bottom;
  308. display: block;
  309. margin-top: 8px;
  310. margin-right: 8px;
  311. }
  312.  
  313. .links a:link, a:visited{
  314. font-style: normal;
  315. text-decoration: none;
  316. letter-spacing: 1px;
  317. color: var(--text);
  318. font-weight:900;
  319. background: var(--accent-20);
  320. padding-left:8px;
  321. padding-right:8px;
  322. padding-top: 2px;
  323. padding-bottom: 2px;
  324. margin-left: 5px;
  325. margin-right: 5px;
  326. }
  327.  
  328. .links a:hover, a:active{
  329. color: var(--accent-10);
  330. font-weight: bolder;
  331. text-shadow: none;
  332. letter-spacing: 1px;
  333. text-decoration: none;
  334. background: var(--text);
  335. }
  336.  
  337. #punk{
  338. font-size: 8px;
  339. width: 25px;
  340. height: 25px;
  341. top: 97%;
  342. left: 1%;
  343. position: fixed;
  344. font-family: Helvetica, sans-serif;
  345. }
  346.  
  347. </style>
  348.  
  349. </head>
  350. <body>
  351.  
  352. <!--
  353.  
  354. CTRL + F or CMMD + F AND SEARCH THE WORDS "EDIT HERE"
  355. TO FIND ALL THE PLACES YOU NEED TO CHANGE THE LINKS
  356. OR THE IMAGES
  357.  
  358. -->
  359.  
  360. <!-- NAME & LINKS -->
  361. <div id="title">
  362. <h1>title</h1>
  363.  
  364. <a href="/">link</a> / <!-- EDIT HERE -->
  365. <a href="/">link</a> / <!-- EDIT HERE -->
  366. <a href="/">return</a>
  367. </div>
  368.  
  369. <!-- EACH CHARACTER IS HEADED BY <div class="per"> feel free to copy and paste at will.-->
  370.  
  371. <div id="tabs">
  372.  
  373. <!--
  374.  
  375. the tags used currently are "act" and "hia" for active and hiatus, just as base examples. change the tag below in the <button> to whatever tag you want to use, then add it to the <div class="per [TAG]"> part of the character. this is how you can sort them. adding more buttons should work as well.
  376.  
  377. feel free to send me an ask at fatalst.tumblr.com/ask if you need more help with this.
  378.  
  379. -->
  380.  
  381. <div class="tab">
  382. <button class="tablinks active" id="per">./all</button>
  383. <button class="tablinks" id="act">./active</button> <!-- EDIT HERE -->
  384. <button class="tablinks" id="hia">./hiatus</button> <!-- EDIT HERE -->
  385. </div>
  386.  
  387. </div>
  388.  
  389. <div id="container">
  390.  
  391. <!-- the <p> description will cut off at some point. feel free to change this in the css, i just thought it looked better this way. -->
  392. <div class="per act">
  393.  
  394. <div class="ImageContainer"><img src="/"></div> <!-- EDIT HERE -->
  395.  
  396. <div class="content">
  397.  
  398. <h2>name</h2>
  399.  
  400. <div class="quote">quote</div>
  401.  
  402. <p>Description or maybe a little intro paragraph.</p>
  403.  
  404. <div class="links">
  405. <!-- EDIT HERE -->
  406. <a href="#">./read_more</a>
  407. <a href="#">./tag</a>
  408. </div>
  409.  
  410. </div>
  411.  
  412. </div>
  413.  
  414. </div>
  415.  
  416. <!-- please don't touch this!! -->
  417. <div id="punk">
  418. <a href="https://www.fatalst.tumblr.com">&copy;</a>
  419. </div>
  420.  
  421.  
  422. <!-- code for sorting the characters -->
  423. <script>
  424.  
  425. $( document ).ready(function() {
  426.  
  427. var $items = $('.per');
  428. var $btns = $('.tablinks').click(function() {
  429. if (this.id == 'all') {
  430. $items.show(1000);
  431. } else {
  432. var $el = $('.' + this.id).show(1000);
  433. $items.not($el).hide(1000);
  434. }
  435. $btns.removeClass('active');
  436. $(this).addClass('active');
  437. });
  438.  
  439. });
  440.  
  441. </script>
  442.  
  443. </body>
  444. </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!