API tools faq
paste
Guest User

Untitled

a guest
Apr 14th, 2019
36
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.45 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <meta name="credit" content="layout was put together by http://ary.insanejournal.com. if you use/edit it, please keep the credit information in tact and do not use the images!">
  3.  
  4. <html><head>
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11. <title>mood board: NAME</title>
  12.  
  13. <link rel="shortcut icon" href="https://codiefoster.neocities.org/pics/squirtle/007%20(1).png">
  14.  
  15. <link href="http://fonts.googleapis.com/css?family=Oswald|Unica+One" rel="stylesheet" type="text/css">
  16. <link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
  17. <link href="https://fonts.googleapis.com/css?family=Forum" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  19. <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
  20. <link href="https://codiefoster.neocities.org/fonts/gotcha.css" rel="stylesheet">
  21.  
  22. <link href="https://codiefoster.neocities.org/fonts/stardust.css" rel="stylesheet">
  23.  
  24.  
  25. <style>
  26.  
  27. #s-m-t-tooltip {max-width:200px; width:auto; padding:3px 5px; margin:5px 0px 0px 10px; background-color: #FFFFFF; font-family: calibri, arial; font-size:8px; line-height: 8px; letter-spacing:+1px; text-transform:uppercase; text-align: justify; color:#000000; z-index:999999999999999999; -moz-box-shadow: 1px 2px 1px rgba(0,0,0,.1); -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,.1);}
  28.  
  29. .header2 {
  30. font-family:Oswald;
  31. font-size:16px;
  32. position:relative;
  33. z-index:1;
  34. width:100%;
  35. padding: 20px 0px 25px 0px;
  36. padding-top:40px;
  37. text-align:center;
  38. letter-spacing:1px;
  39. background:#fff;
  40. }
  41.  
  42. .header2:before {
  43. position:absolute;
  44. z-index:-1;
  45. top:45px;
  46. right:0;
  47. bottom:0;
  48. left:0;
  49. width:95%;
  50. margin:0 auto;
  51. content:'';
  52. border-top:1px solid #000000;
  53. }
  54.  
  55. .header2 span {
  56. padding:0 15px;
  57. background:#fff;
  58. }
  59.  
  60.  
  61. a, a:visited, a:active {
  62. color: #B90303;
  63. text-decoration: none;
  64. }
  65.  
  66. body, td {
  67. font-family: 'Unica One';
  68. font-size: 10px;
  69. line-height: 16px;
  70. letter-spacing: 1px;
  71. font-weight: none;
  72. color: #000;
  73. text-shadow: 0px 0px 1px #000;
  74. text-transform: uppercase;
  75. background-color: #eee;
  76. background-image: url('https://www.transparenttextures.com/patterns/brushed-alum-dark.png');
  77. }
  78.  
  79. .bw:hover {-webkit-transition-duration: .3s; -webkit-filter: grayscale(100%);}
  80.  
  81. .title {
  82. font-family: 'architects daughter';
  83. font-size:50px; letter-spacing:-4px;
  84. line-height:30px;
  85. color:#000000;
  86. text-shadow: 0px 1px 1px #fff021;
  87. }
  88.  
  89.  
  90. .title2 {
  91. font-family: Great Vibes;
  92. font-size: 40px;
  93. line-height: 40px;
  94. letter-spacing:1px;
  95. color: #0789bf;
  96. text-shadow: 2px 1px 0px #fff, 3px 2px 2px #BBB;
  97. font-weight: lighter;
  98. text-transform: lowercase;
  99. }
  100.  
  101. .title3 {
  102. font-family: Megrim;
  103. font-size: 49px;
  104. line-height: 30px;
  105. letter-spacing: -1.5px;
  106. color: #BF0B0B;
  107. text-shadow: 0px 0px 2px #BF0B0B;
  108. font-weight: lighter;
  109. text-transform: lowercase;
  110. }
  111.  
  112. .etc {
  113. font-family: oswald;
  114. font-size:35px;
  115. letter-spacing:-4px;
  116. line-height:30px;
  117. color:#242424;
  118. text-shadow: 0px 1px 1px #fff021;
  119. }
  120.  
  121. #fade {
  122. display: none;
  123. background: #000;
  124. position: fixed;
  125. left: 0;
  126. top: 0;
  127. width: 100%;
  128. height: 100%;
  129. opacity: .8;
  130. z-index: 9999;
  131. }
  132.  
  133. .popup_block{
  134. display: none;
  135. background: #FFFFFF;
  136. padding: 20px;
  137. float: left;
  138. position: fixed;
  139. top: 53%;
  140. left: 51%;
  141. z-index: 99999;
  142. opacity: 1;
  143. }
  144.  
  145. *html #fade {
  146. position: absolute;
  147. }
  148.  
  149. *html .popup_block {
  150. position: absolute;
  151. }
  152.  
  153. #tt {
  154. position: absolute;
  155. display: block;
  156. background: #ffffff;
  157. color: #BF0B0B;
  158. border: 1px solid #D0D0D0;
  159. text-transform: uppercase;
  160. font-family: consolas;
  161. font-size: 8px;
  162. line-height: 5px;
  163. padding: 5px;
  164. z-index: 2;
  165. }
  166.  
  167. .play {font-size: 10pt;}
  168. .play:hover {color: #303030;}
  169.  
  170. .mbtipic1ben {
  171. z-index:1;
  172. display:inline-block;
  173. overflow:hidden;
  174. width:200px;
  175. height:200px;
  176. text-align:center;
  177. background-color:#acacac;
  178. background-image:url(https://codiefoster.neocities.org/pics/pokescreencaps/pokemon_traces_007_squirtle_by_riseagainstlife.jpg); /* replace image url with your own */
  179. background-position:center;
  180. background-size:auto 100%;
  181. }
  182.  
  183. .mbtitext {
  184. font-family:Oswald;
  185. /*mbti title font*/
  186. font-size:40px;
  187. margin-top:90px;
  188. margin-bottom:25px;
  189. -webkit-transition:ease-in-out .5s;
  190. -moz-transition:ease-in-out .5s;
  191. -o-transition:ease-in-out .5s;
  192. transition:ease-in-out .5s;
  193. text-align:center;
  194. letter-spacing:5px;
  195. color:#FFFFFF;
  196. -webkit-filter:blur(2px);
  197. }
  198.  
  199. .mbtihover {
  200. /*css literally for the word "hover" just so people know to hover*/
  201. font-size:9px;
  202. margin-top:-10px;
  203. -webkit-transition:ease-in-out .5s;
  204. -moz-transition:ease-in-out .5s;
  205. -o-transition:ease-in-out .5s;
  206. transition:ease-in-out .5s;
  207. letter-spacing:.5px;
  208. opacity:.8;
  209. color:#FFFFFF;
  210. }
  211.  
  212. .mbtipic1ben:hover .mbtitext {
  213. font-size:13px;
  214. margin-top:40px;
  215. margin-left:20px;
  216. letter-spacing:25px;
  217. -webkit-filter:blur(0px);
  218. }
  219.  
  220. .mbtipic1ben:hover .mbtihover {
  221. opacity:0;
  222. }
  223. /*-----------bar graph. theres no reason to really mess with this-----------*/
  224. .mbtitraits {
  225. font-size:8px;
  226. line-height:13px;
  227. top:-30px;
  228. height:100px;
  229. margin-top:-11px;
  230. -webkit-transition:ease-in-out .5s;
  231. -moz-transition:ease-in-out .5s;
  232. -o-transition:ease-in-out .5s;
  233. transition:ease-in-out .5s;
  234. text-align:right;
  235. letter-spacing:1px;
  236. text-transform:uppercase;
  237. opacity:0;
  238. color:#f5f5f5;
  239. }
  240.  
  241. .mbtitraits b {
  242. padding-left:3px;
  243. text-decoration:none;
  244. color:#fff;
  245. background-color:rgba(0,0,0,.2);
  246. }
  247.  
  248. .mbtipic1ben:hover .mbtitraits {
  249. opacity:1;
  250. }
  251.  
  252.  
  253. .bar {
  254. height:10px;
  255. padding-left:2px;
  256. text-align:left;
  257. }
  258.  
  259. .barsblock {
  260. display:inline-block;
  261. float:right;
  262. width:100px;
  263. margin-right:15px;
  264. }
  265.  
  266. .bars {
  267. font-size:10px;
  268. width:90px;
  269. height:10px;
  270. margin:3px;
  271. -webkit-transition:ease-in-out .5s;
  272. -moz-transition:ease-in-out .5s;
  273. transition:ease-in-out .5s;
  274. letter-spacing:1px;
  275. text-transform:uppercase;
  276. opacity:0;
  277. color:#f5f5f5;
  278. background-color:rgba(255,255,255,.3);
  279. }
  280.  
  281. .mbtipic1ben:hover .bars {
  282. z-index:99999;
  283. opacity:1;
  284. }
  285.  
  286.  
  287. /*----------------------strengths and weaknesses----------------------*/
  288. .strengthsweaknesses {
  289. float:right;
  290. width:270px;
  291. margin-top:10px;
  292. padding-left:25px;
  293. }
  294.  
  295. .swlist {
  296. font-size:10px;
  297. line-height:10px;
  298. display:inline-block;
  299. overflow:auto;
  300. overflow-x:hidden;
  301. width:120px;
  302. height:100px;
  303. padding-top:10px;
  304. text-align:center;
  305. text-transform:uppercase;
  306. background-color:transparent;
  307. }
  308.  
  309. .swlist b,bold,strong {
  310. font-family:Oswald; /*header font*/
  311. text-decoration:underline;
  312. letter-spacing:2px;
  313. }
  314.  
  315. .swhorizontalbar { /*white strip behind strengths and weaknesses*/
  316. float:right;
  317. width:300px;
  318. height:100px;
  319. margin-bottom:-110px;
  320. background-color:#fff; /*strip color*/
  321. }
  322.  
  323. .mbtipic2 {
  324. z-index:-999;
  325. float:right;
  326. overflow:hidden;
  327. width:280px;
  328. height:200px;
  329. margin-top:-10px;
  330. margin-bottom:-150px;
  331. background-color:#acacac;
  332. background-image:url(https://codiefoster.neocities.org/pics/backgrounds/background-repeat.jpg); /*picture behind strengths and weakness*/
  333. background-position:center;
  334. background-size: auto;
  335. -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  336. -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  337. box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  338. }
  339.  
  340. /*--------------------- MORAL ALIGNMENT CSS ---------------------*/
  341. .alignmentdesc {
  342. line-height:9px;
  343. float:left;
  344. width:180px;
  345. height:264px;
  346. margin-top:3px;
  347. padding:10px 10px 0;
  348. text-align:right;
  349. font-family:Oswald,sans-serif;
  350. font-size:10px;
  351. background-color:#fff;
  352. background-image:url(https://codiefoster.neocities.org/pics/backgrounds/free_canvas_texture-dark_brown.jpg); /*image behind list of alignment descriptions*/
  353. background-position:center;
  354. background-size:auto ;
  355. }
  356.  
  357. #selected {
  358. background-color:#879D55; /*color of the selected alignment*/
  359. }
  360.  
  361. .alignment {
  362. display:inline-block;
  363. width:279px;
  364. margin-left:17px;
  365. font-family:Oswald,sans-serif;
  366. font-size:9px;
  367. font-color: #fff;
  368. background-color:#acacac;
  369. background-image:url(https://codiefoster.neocities.org/pics/backgrounds/free_canvas_texture-dark_brown.jpg); /*image behind alignment squares*/
  370. background-position:center;
  371. background-size: auto;
  372. }
  373.  
  374. .alignmentblock {
  375. font-size:8px;
  376. line-height:100%;
  377. position:relative;
  378. display:block;
  379. font-family:Oswald,sans-serif;
  380. font-size:9px;
  381. font-color: #fff;
  382. float:left;
  383. width:67px;
  384. height:47px;
  385. padding:10px;
  386. padding-top: 30px;
  387. text-align:center;
  388. text-transform:uppercase;
  389. color:#000;
  390. border:3px solid #fff;
  391. }
  392.  
  393. .alignmentblock p {
  394. padding:0;
  395. }
  396.  
  397. /* ------------------------INSPIRATION CSS.-------------------------
  398.  
  399. ONLY MESS WITH THIS IF YOU KNOW WHAT YOURE DOING.
  400. THE COLUMN THING IS EASY TO CHANGE BUT THE REST CAN GET TRICKY
  401. YOU CAN CHANGE THE HEIGHT OF ".MASONRYBOX" TO ADD MORE IMAGES */
  402. .masonry2 {
  403. overflow:hidden;
  404. -moz-column-count:3;
  405. -moz-column-gap:0;
  406. -webkit-column-count:3;
  407. -webkit-column-gap:0;
  408. column-count:3;
  409. column-gap:0;
  410. -ms-column-count:3;
  411. -ms-column-gap:0;
  412. -moz-padding-start:0;
  413. -webkit-padding-start:0;
  414. }
  415.  
  416. .masonry2 img {
  417. display:inline-block;
  418. width:100%;
  419. margin-bottom:-4px;
  420. -webkit-transition:ease-in-out .3s;
  421. -moz-transition:ease-in-out .3s;
  422. -o-transition:ease-in-out .3s;
  423. transition:ease-in-out .3s;
  424. -webkit-filter:grayscale(100%);
  425. -webkit-backface-visibility:hidden;
  426. }
  427.  
  428. .masonry2 img:hover {
  429. -webkit-transform:scale(1.25);
  430. -moz-transform:scale(1.25);
  431. -ms-transform:scale(1.25);
  432. -o-transform:scale(1.25);
  433. transform:scale(1.25);
  434. -webkit-filter:grayscale(0%);
  435. }
  436.  
  437. .masonrybox2 {
  438. overflow:hidden;
  439. height:1090px; /*change the height here if you add more pictures*/
  440. }
  441.  
  442. .divTable{
  443. display: table;
  444. width: 500px;
  445. }
  446. .divTableRow {
  447. display: table-row;
  448. }
  449. .divTableHeading {
  450. background-color: #EEE;
  451. display: table-header-group;
  452. }
  453. .divTableCell, .divTableHead {
  454. border: 1px solid #FFFFFF;
  455. display: table-cell;
  456. padding: 3px 10px;
  457. text-align; left;
  458. }
  459. .divTableHeading {
  460. background-color: #EEE;
  461. display: table-header-group;
  462. font-weight: bold;
  463. }
  464. .divTableFoot {
  465. background-color: #EEE;
  466. display: table-footer-group;
  467. font-weight: bold;
  468. }
  469. .divTableBody {
  470. display: table-row-group;
  471. }
  472. </style>
  473.  
  474. <!-- Scripts -->
  475. <noframes></noframes><noscript></noscript><!-- -->
  476. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  477.  
  478. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  479. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  480. <script>
  481. (function($){
  482. $(document).ready(function(){
  483. $("a[title]").style_my_tooltips({
  484. tip_follows_cursor:true,
  485. tip_delay_time:90,
  486. tip_fade_speed:600,
  487. attribute:"title"
  488. });
  489. });
  490. })(jQuery);
  491. </script>
  492.  
  493. <script>
  494.  
  495. $(document).ready(function() {
  496.  
  497. //
  498.  
  499. //When you click on a link with class of poplight and the href starts with a #
  500.  
  501. $('a.poplight[href^=#]').click(function() {
  502.  
  503. var popID = $(this).attr('rel'); //Get Popup Name
  504.  
  505. var popURL = $(this).attr('href'); //Get Popup href to define size
  506.  
  507.  
  508.  
  509. //Pull Query & Variables from href URL
  510.  
  511. var query= popURL.split('?');
  512.  
  513. var dim= query[1].split('&');
  514.  
  515. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  516.  
  517.  
  518.  
  519. //Fade in the Popup and add close button
  520.  
  521. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();
  522.  
  523.  
  524. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  525.  
  526. var popMargTop = ($('#' + popID).height() + 80) / 2;
  527.  
  528. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  529.  
  530.  
  531.  
  532. //Apply Margin to Popup
  533.  
  534. $('#' + popID).css({
  535.  
  536. 'margin-top' : -popMargTop,
  537.  
  538. 'margin-left' : -popMargLeft
  539.  
  540. });
  541.  
  542.  
  543.  
  544. //Fade in Background
  545.  
  546. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  547.  
  548. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  549.  
  550.  
  551.  
  552. return false;
  553.  
  554. });
  555.  
  556.  
  557.  
  558. //Close Popups and Fade Layer
  559.  
  560. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  561.  
  562. $('#fade , .popup_block').fadeOut(function() {
  563.  
  564. $('#fade, a.close').remove(); //fade them both out
  565.  
  566. });
  567.  
  568. return false;
  569.  
  570. });
  571.  
  572.  
  573.  
  574.  
  575.  
  576. });
  577.  
  578. </script>
  579. </head>
  580.  
  581. <BR><BR><center><span style="text-transform:lowercase; letter-spacing:4px; margin-top: 5px; color: #879D55; text-shadow: 0px 3px 2px #000000; font-family: gotcha,sans-serif; font-size:60px;"><a title="image layout by ~marlovian, mood board info by YOUR USERNAME@INSANEJOURNAL, tweaks by ~interrogate & ~squirtle; credit if taking" style="color: #4B3831;">m o o d b o a r d</a></span></center><BR>
  582. <center><div style="width:500px; height: auto; background-color:#fff; -moz-box-shadow: -4px 6px 19px #767676; -webkit-box-shadow: -4px 6px 19px #767676; box-shadow: -4px 6px 19px #767676;"><div style="width:500px; height:150px;display: inline-flex;">
  583.  
  584.  
  585.  
  586. <a style="display: block" href="#?w=500" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="01" title="myers-briggs"><div style="border: solid 2px #ffffff; height:260px; width:300px; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/pokemon-tv-show-pikachu.jpg') no-repeat scroll 0 0 / cover; background-position:center;"><!-- MOOD 1 --></div></a>
  587.  
  588. <div style="border: solid 2px #fff; height:160px; width:192px; float:right; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/bm.jpg') no-repeat scroll 0 0 / cover; background-position:center;"><!-- MOOD 2 --></div></div>
  589.  
  590. <div style="border: solid 2px #fff; margin-top:10px; height: 100px; margin-left: 302px; width: 194px; background: #FFFFFF url('https://codiefoster.neocities.org/pics/squirtle/gifs/giphy%20(3).gif') no-repeat scroll 0 0 / cover; background-position: center;"><!-- MOOD 3 --></div>
  591.  
  592. <div style="width:500px; height:200px;display: inline-flex;">
  593.  
  594.  
  595. <a style="display: block" href="#?w=500" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="02" title="moral"><div style="border: solid 2px #fff; height:205px; width:100px; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/636043680074436294577590681_cute.jpg') no-repeat scroll 0 0 / cover; background-position:center;"><!-- MOOD 4 --></div></a>
  596.  
  597. <div style="border: solid 2px #fff; height:205px; width:200px; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/images.jpg') no-repeat scroll 0 0 / cover; background-position:center;"><!-- MOOD 5 --></div>
  598.  
  599. <a style="display: block" href="#?w=500" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="03" title="inspiration"><div style="border: solid 2px #fff; height:205px; width: 187px; float:right; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/article_post_width_Pikachu.jpg') no-repeat scroll 0 0 / cover; background-position: left;"><!-- MOOD 6 --></div></a>
  600.  
  601. </div><div style="left: 52px; position: relative !important; top: -280px; width: 155px;margin-bottom:-150px">
  602. <a style="display: block" href="#?w=700" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="04" title="playlist"><div style="width: 100px; height: 100px; margin: 25px; overflow: hidden; border: 4px solid #fff; border-radius:300px; background: #fff url('https://static1.squarespace.com/static/551ed270e4b07f2b9a28489c/t/59848e13f7e0ab6f61df1b05/1501859351405/') no-repeat scroll 0 0 / cover;"><!-- CIRCLE --></div></a></div><div style="width:500px; height:; display:flex; background-color:#fff; display: inline-block;"><div style="height:; width:500px;"><br><br><center><span style="text-transform:lowercase; letter-spacing:4px; margin-top: 5px; color: #000; text-shadow: 0px 1px 1px #879D55; font-family :shadows into light two,sans-serif; font-size:55px;"><a href="http://USERNAME.insanejournal.com" style="text-decoration: none; color: #000000;">FIRST LAST</a></span><br><span style="text-transform: uppercase; font-weight:100!important; font-family:calibri,Times New Roman,serif; font-size: 11px; letter-spacing: 2px; line-height:100%">SUB-INFO GOES HERE.</span><BR><BR></center></div></div><div style="width:500px; height:100px; display:flex; background-color:black;">
  603.  
  604. <div style="border: solid 2px #FFFFFF; height:100px; width:100px; background: #879D55 url('https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/64/94/83/6494839a-e779-c3bc-7922-1e24647f9e09/source/256x256bb.jpg') no-repeat scroll 0 0 / cover;"><!-- ICON 1 100X100 --></div>
  605. <div style="border: solid 2px #FFFFFF; height:100px; width:100px; background: #F3B453 url('https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/64/94/83/6494839a-e779-c3bc-7922-1e24647f9e09/source/256x256bb.jpg') no-repeat scroll 0 0 / cover;"><!-- ICON 2 100X100 --></div>
  606. <div style="border: solid 2px #FFFFFF; height:100px; width:100px; background: #FFFFFF url('https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/64/94/83/6494839a-e779-c3bc-7922-1e24647f9e09/source/256x256bb.jpg') no-repeat scroll 0 0 / cover;"><!-- ICON 3 100X100 --></div>
  607. <div style="border: solid 2px #FFFFFF; height:100px; width:100px; background: #745131 url('https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/64/94/83/6494839a-e779-c3bc-7922-1e24647f9e09/source/256x256bb.jpg') no-repeat scroll 0 0 / cover;"><!-- ICON 4 100X100 --></div>
  608. <div style="border: solid 2px #FFFFFF; height:100px; width:100px; background: #4B3831 url('https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/64/94/83/6494839a-e779-c3bc-7922-1e24647f9e09/source/256x256bb.jpg') no-repeat scroll 0 0 / cover;"><!-- ICON 5 100X100 --></div>
  609.  
  610. </div></div></center>
  611.  
  612. <div id="01" class="popup_block">
  613. <div class="header2"><span>MYERS-BRIGGS TYPE INDICATOR</span></div>
  614.  
  615. <div class="content">
  616.  
  617. <div class="mbtipic1ben">
  618. <div class="mbtitext"> INFP</div>
  619. <div class="mbtihover"> [ HOVER ] </div>
  620.  
  621. <!---make sure the percentages on each line match -->
  622.  
  623. <div class="barsblock">
  624. <div class="bars">
  625. <div class="bar" style="background-color: #879D55; width: 61%; text-shadow: 1px 1px 0px #000000;">50%</div></div>
  626. <div class="bars">
  627. <div class="bar" style="background-color: #F3B453; width: 75%;">61%</div></div>
  628. <div class="bars">
  629. <div class="bar" style="background-color: #fff; width: 72%;">70%</div></div>
  630. <div class="bars">
  631. <div class="bar" style="background-color: #745131; width: 93%;">53%</div></div>
  632. <div class="bars">
  633. <div class="bar" style="background-color: #4B3831; width: 76%;">65%</div></div>
  634.  
  635.  
  636. </div>
  637.  
  638. <!---make sure not to remove the <b></b> from around each word when editing-->
  639.  
  640. <div class="mbtitraits">
  641. <br><b>Introverted</b>
  642. <br><b>Observant</b>
  643. <br><b>Thinking</b>
  644. <br><b>Prospecting</b>
  645. <br><b>Assertive</b>
  646.  
  647. </div>
  648.  
  649. </div><!--end mbti pic-->
  650.  
  651.  
  652. <div class="strengthsweaknesses">
  653.  
  654. <div class="mbtipic2"></div>
  655. <div class="swhorizontalbar"></div>
  656.  
  657. <div class="swlist">
  658. <b> ISTP STRENGTHS</b> <br><br>
  659. Idealistic<br>
  660. Seek Value & Harmony<br>
  661. Open-Minded & Flexible<br>
  662. Very Creative<br>
  663. Passionate<BR>
  664. Energetic<BR>
  665. </div>
  666.  
  667. <div class="swlist">
  668. <b> ISTP WEAKNESSES</b><br><br>
  669. Too Idealistic<br>
  670. Impractical<br>
  671. Takes things Personal<br>
  672. Almost Too Private <br>
  673. Altruistic<br>
  674.  
  675.  
  676. </div><!--endswlist-->
  677. </div><!---end strengthsweaknesses-->
  678. </div>
  679. </div>
  680.  
  681. <div id="02" class="popup_block">
  682.  
  683. <!--MORAL ALIGNMENT STARTS HERE-->
  684.  
  685. <div class="header2"><span>MORAL ALIGNMENT</span></div>
  686.  
  687. <div class="content">
  688.  
  689. <div class="alignmentdesc">
  690.  
  691. <!---
  692.  
  693. to highlight your characters moral alignment, place <div id="selected> and </div> around the correct alignment as shown below.
  694.  
  695. EXAMPLE. if your moral alignment was neutral evil, it would look like this:
  696.  
  697. <div id="selected">
  698. represents pure evil without honor and without variation;<p></div>
  699.  
  700.  
  701. <!-lawful good--><font color="#fff">combines honor and compassion;</font><p>
  702. <!--neutral good--><font color="#fff">doing what is good without bias for or against order;</font><p>
  703. <!--chotic good--><font color="#fff">combines a good heart with a free spirit;</font><p>
  704. <!--lawful neutral--><font color="#fff">reliable and honorable without being a zealot;</font><p>
  705. <!--true neutral--><font color="#fff">act naturally, without prejudice or compulsion;</font><p>
  706. <!--chaotic nautral--><div id="selected"><font color="#fff">represents true freedom from society's restricitons and a do-gooders zeal;</div></font><p>
  707. <!--lawful evil--><font color="#fff">represents methodical, intentional, and frequently sucessful evil;</font><p>
  708. <!--neutral evil--> <font color="#fff">represents pure evil without honor and without variation;</font><p>
  709. <!--chaotic evil--><font color="#fff">destruction not only of beauty and life but also of the order on which beauty and life depend.</font></div> <!--end alignmentdesc-->
  710.  
  711.  
  712.  
  713.  
  714. <!-- for this one, you can just place id="selected next to the alignmentblock.
  715.  
  716. EXAMPLE. If your alignment is lawful neutral instead of this:
  717.  
  718. <div class="alignmentblock">LAWFUL NEUTRAL <p>"the judge"</div>
  719.  
  720. it would look like this:
  721.  
  722. <div class="alignmentblock" id="selected" >LAWFUL NEUTRAL <p>"the judge"</div>
  723.  
  724. -->
  725.  
  726. <div class="alignment">
  727. <div class="alignmentblock"><font color="#fff">LAWFUL GOOD<BR>"the crusader"</font></div>
  728. <div class="alignmentblock"><font color="#fff">NEUTRAL GOOD <BR>"the benefactor"</font></div>
  729. <div class="alignmentblock"><font color="#fff">CHAOTIC GOOD <BR>"the rebel"</font></div>
  730. <div class="alignmentblock"><font color="#fff">LAWFUL NEUTRAL <BR>"the judge"</font></div>
  731. <div class="alignmentblock"><font color="#fff">TRUE NEUTRAL <BR>"the undecided"</font> </div>
  732. <div class="alignmentblock" id="selected"><font color="#fff">CHAOTIC NEUTRAL <BR>"the free spirit"</font></div>
  733. <div class="alignmentblock"><font color="#fff">LAWFUL EVIL <BR>"the dominator"</font></div>
  734. <div class="alignmentblock"><font color="#fff">NEUTRAL EVIL <BR>"the malefactor"</font></div>
  735. <div class="alignmentblock"><font color="#fff">CHAOTIC EVIL <BR>"the destroyer"</font></div>
  736. </div>
  737.  
  738.  
  739.  
  740. </div><!--end content-->
  741.  
  742.  
  743. <!--MORAL ALIGNMENT ENDS HERE-->
  744. </div>
  745.  
  746. <div id="03" class="popup_block">
  747. <!--INSPO SECTION I GUESS???-->
  748.  
  749. <!--images stack in columns. you can see how they are ordered from the way they're numbered. as you can see, the images on the bottom get cut off unless you extend the height of the container. you can change the height by hitting ctrl+f and entering .masonrybox
  750.  
  751. you can make the images links by replacing "/" with "linkurl" -->
  752.  
  753.  
  754.  
  755.  
  756. <!-- ABOUT ENDS HERE -->
  757. <!--INSPO SECTION I GUESS???-->
  758.  
  759.  
  760. <div class="header2"><span>INSPIRATION</span></div>
  761. <div class="content">
  762. <div class="masonrybox2">
  763. <ul class="masonry2">
  764.  
  765. <!--images stack in columns. you can see how they are ordered from the way they're numbered. as you can see, the images on the bottom get cut off unless you extend the height of the container. you can change the height by hitting ctrl+f and entering .masonrybox
  766.  
  767. you can make the images links by replacing "/" with "linkurl" -->
  768.  
  769. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Pokemon_Pikachu.jpg"/>
  770.  
  771. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Snorlax_Pichu_Bros.png"/>
  772.  
  773. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/pokemon-tv-show-pikachu.jpg"/>
  774.  
  775. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/maxresdefault.jpg"/>
  776.  
  777. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/EP196_snorlax_feliz.png"/>
  778.  
  779. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/images.jpg"/>
  780.  
  781. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/IL001-_Pok%C3%A9mon_-_I_Choose_You_22.png"/>
  782.  
  783. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Ash_Bulbasaur.png"/>
  784.  
  785. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/article_post_width_Pikachu.jpg"/>
  786.  
  787. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/a9593ce9ab3547dacb985dda853932df.png"/>
  788.  
  789. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Pok%C3%A9mon-Pikachu-1280x720.jpg"/>
  790.  
  791. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Red's_Charmander_Ember_PO.png"/>
  792.  
  793. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Zippo_Slash.png"/>
  794.  
  795. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Pokemon-Sun-and-Moon-Eevee-Evolution-620x471.jpg"/>
  796.  
  797. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/Lara's_Growlithe_Flamethrower.jpg"/>
  798.  
  799. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/IL001-_Pok%C3%A9mon_-_I_Choose_You_22.png"/>
  800.  
  801. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/EP843_Bulbasaur_de_Xana.png"/>
  802.  
  803. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/CNFpK8XWEAA4BRG.jpg"/>
  804.  
  805. <img src="https://codiefoster.neocities.org/pics/pokescreencaps/33f127596be6cee06602fcdd23b68e09c4d8b3cd_00.jpg"/>
  806.  
  807. </ul>
  808. </div>
  809. </div>
  810.  
  811. <!-- ABOUT ENDS HERE -->
  812. </div>
  813.  
  814. <div id="04" class="popup_block">
  815. <div class="header2"><span>PLAYLIST</span></div>
  816. <div class="content">
  817. <center>
  818. <div class="divTable">
  819. <div class="divTableBody">
  820. <div class="divTableRow">
  821. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND </div>
  822. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  823. </div>
  824. <div class="divTableRow">
  825. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  826. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  827. </div>
  828. <div class="divTableRow">
  829. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  830. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  831. </div>
  832. <div class="divTableRow">
  833. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  834. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  835. </div>
  836. <div class="divTableRow">
  837. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  838. <div class="divTableCell" align="justify"><a href="LINK" style ="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
  839. </div>
  840. </div>
  841. </div>
  842. </center>
  843. </div>
  844. </div>
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!