API tools faq
paste
Advertisement
Guest User

theme

a guest
Jun 22nd, 2018
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.35 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. 1) Theme, background e banner montados exclusivamente por JOC
  3. 2) Design de fonte feito por Sabrina Mariela Lopez
  4. 3) As imagens individuais das personagens foram retiradas de behance.net, feitas pelo artista Dorgel Chunge e editadas por Aline Garcia
  5. 4) Páginas individuais e javascript montados por glenthemes
  6.  
  7. Reutilização proibida
  8.  
  9. ------------------------------------------------------------------------>
  10.  
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  13.  
  14. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  15.  
  16. <title>Guardiãs Estelares</title>
  17.  
  18. <style>figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}.tmblr-iframe--amp-cta-button{visibility:hidden;position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:100}.tmblr-iframe--amp-cta-button.tmblr-iframe--loaded{visibility:visible;animation:iframe-app-cta-transition .2s ease-out}</style><link rel="shortcut icon" href="https://assets.tumblr.com/images/default_avatar/cube_closed_128.png">
  19.  
  20. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  21.  
  22. <!--------------------TOOLTIP-------------------->
  23. <script src="ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  24. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:100,
  31. tip_fade_speed:100,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!--------------------POPUP-------------------->
  39. <script type="text/javascript"
  40. src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  41. <script>
  42. $(document).ready(function() {
  43. //
  44. $('a.poplight[href^=#]').click(function() {
  45. var popID = $(this).attr('rel'); //Get Popup Name
  46. var popURL = $(this).attr('href'); //Get Popup href to define size
  47. var query= popURL.split('?');
  48. var dim= query[1].split('&');
  49. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  50. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  51. var popMargTop = ($('#' + popID).height() + 80) / 2;
  52. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  53. //Apply Margin to Popup
  54. $('body').append('<div id="fade"></div>');
  55. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  56. return false;
  57. });
  58. $('a.close, .closewin').live('click', function() {
  59. $('#fade, .popup_block').fadeOut(function() {
  60. $('a.close').remove(); //fade them both out
  61. });
  62. return false;
  63. });
  64. });
  65. </script>
  66.  
  67. <!--------------------FONTS------------------->
  68. <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  69.  
  70. <style type="text/css">
  71.  
  72. @font-face { font-family: "montserrat"; src: url('https://dl.dropboxusercontent.com/s/neq454mx5vhfhpq/Montserrat-UltraLight.otf'); }
  73.  
  74. /*--------------------TOOLTIPS--------------------*/
  75. #s-m-t-tooltip {
  76. padding: 2px 9px;
  77. margin: 26px 9px 0px 15px;
  78. background-color: #fbfbfc; /* tooltip background color */
  79. font-family: karla;
  80. font-size: 8.5px;
  81. letter-spacing: 1px;
  82. text-transform: uppercase;
  83. color: #646464; /* tooltip color */
  84. border:0.5px solid rgba(224,224,224,0.6); /* tooltip border */
  85. z-index:9999999!important;
  86. max-width:400px;
  87. }
  88.  
  89. /*--------------------SCROLLBAR--------------------*/
  90. ::-webkit-scrollbar {
  91. width: 2.5px;
  92. height: 2.5px;
  93. }
  94.  
  95. ::-webkit-scrollbar-thumb {
  96. background-color: #d6d1d1; /* scrollbar */
  97. }
  98.  
  99. ::-webkit-scrollbar-track {
  100. background-color: #f9f9f9; /* scrollbar background */
  101. }
  102.  
  103. /*--------------------SCROLLBAR--------------------*/
  104. ::selection {
  105. background: #f8f8f9; /* highlighted background */
  106. color:#777; /* highlighted text */
  107. }
  108.  
  109. ::-moz-selection {
  110. background: #f8f8f9; /* highlighted background */
  111. color:#777; /* highlighted text */
  112. }
  113.  
  114. /*--------------------BASICS--------------------*/
  115. body {
  116. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#231b4e+6,291b56+16,563968+38,7a4771+50,965272+60,b46477+71,c96778+83,de7677+95 */
  117. background: #231b4e; /* Old browsers */
  118. background: -moz-linear-gradient(top, #231b4e 6%, #291b56 16%, #563968 38%, #7a4771 50%, #965272 60%, #b46477 71%, #c96778 83%, #de7677 95%); /* FF3.6-15 */
  119. background: -webkit-linear-gradient(top, #231b4e 6%,#291b56 16%,#563968 38%,#7a4771 50%,#965272 60%,#b46477 71%,#c96778 83%,#de7677 95%); /* Chrome10-25,Safari5.1-6 */
  120. background: linear-gradient(to bottom, #231b4e 6%,#291b56 16%,#563968 38%,#7a4771 50%,#965272 60%,#b46477 71%,#c96778 83%,#de7677 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  121. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231b4e', endColorstr='#de7677',GradientType=0 ); /* IE6-9 */
  122. background-attachment:fixed;
  123. background-repeat:no-repeat; /* delete "no-" for tiled background */
  124. background-size:cover; /* delete this line for tiled background */
  125. background-position:top right; /* delete this line for tiled background */
  126. cursor:normal;
  127. text-transform:uppercase;
  128. line-height:16px;
  129. font-size:7.5px;
  130. letter-spacing:1px;
  131. }
  132.  
  133. /*--------------------LINKS--------------------*/
  134. a {
  135. text-decoration:none;
  136. -webkit-transition: all 0.4s ease-in-out;
  137. -moz-transition: all 0.4s ease-in-out;
  138. -o-transition: all 0.4s ease-in-out;
  139. }
  140.  
  141. a:hover {
  142. text-decoration:none;
  143. -webkit-transition: all 0.4s ease-in-out;
  144. -moz-transition: all 0.4s ease-in-out;
  145. -o-transition: all 0.4s ease-in-out;
  146. }
  147.  
  148. .lnr {
  149. -webkit-transition: all 0.4s ease-in-out;
  150. -moz-transition: all 0.4s ease-in-out;
  151. -o-transition: all 0.4s ease-in-out;
  152. }
  153.  
  154. /*--------------------TUMBLR BUTTONS--------------------*/
  155. iframe#tumblr_controls, .iframe-controls--desktop {
  156. top:1px!important;
  157. right:1px!important;
  158. position:fixed!important;
  159. opacity:0.3;
  160. z-index:99999!important;
  161. -webkit-transition: all 0.4s ease-in-out;
  162. -moz-transition: all 0.4s ease-in-out;
  163. -o-transition: all 0.4s ease-in-out;
  164. }
  165.  
  166. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  167. opacity:0.6;
  168. }
  169.  
  170. /*---------------------------MAIN TITLE TEXT---------------------------*/
  171. #maintitle {
  172. position:fixed;
  173. margin:0 auto;
  174. left:-750px;right:0;
  175. bottom:250px; /* distance from the bottom, change if necessary */
  176. width:100px; /* width of title, change if necessary */
  177. padding:25px;
  178. height:auto;
  179. background-color:transparent;
  180. font-family:montserrat;
  181. text-transform:uppercase;
  182. color:#aaa; /* main title color */
  183. font-size:20px;
  184. letter-spacing:5px;
  185. line-height:1;
  186. text-align:center;
  187. z-index:1000;
  188. }
  189.  
  190. /*-----------------------BOTTOM BAR-----------------------*/
  191. #botbar {
  192. position:fixed;
  193. margin:0 auto;
  194. left:0;right:0;bottom:0;
  195. width:100%;
  196. height:80px;
  197. background-color:#130f1a; /* bottom title background color */
  198. display:table;
  199. z-index:1000;
  200. }
  201.  
  202. #botmid {
  203. display:table-cell;
  204. vertical-align:middle;
  205. }
  206.  
  207. .bottext {
  208. font-family: montserrat, "KaiTi", "楷体", STKaiti, "华文楷体", serif;
  209. text-align:center;
  210. font-size:30px;
  211. color:#b4adb8; /* bottom title text color */
  212. letter-spacing:4px;
  213. padding:0px 100px 0px 100px;
  214. }
  215.  
  216. /*-----------------------MAIN CHARACTER IMAGES-----------------------*/
  217. #image1 {
  218. position:fixed;
  219. margin:0 auto;
  220. left:0;right:0;bottom:-40px;
  221. width:100%;
  222. text-align:center;
  223. white-space:nowrap;
  224. height:auto;
  225.  
  226. }
  227.  
  228. #image1 img {
  229. margin-left:-60px; /* distance between character images */
  230. margin-right:-60px; /* distance between character images */
  231. width:120px;
  232. height:auto;
  233. cursor:pointer;
  234. -webkit-transition: all 0.4s ease-in-out;
  235. -moz-transition: all 0.4s ease-in-out;
  236. -o-transition: all 0.4s ease-in-out;
  237.  
  238. }
  239.  
  240. #image1:hover img {
  241. /* fade/opacity amount of other images when ONE image is hovered */
  242. opacity:0.8;
  243. /* blur amount on other images when ONE image is hovered */
  244. /* remember to make all numbers the same */
  245. -webkit-filter:blur(8px);
  246. -moz-filter:blur(8px);
  247. -o-filter:blur(8px);
  248. filter:blur(8px);
  249. }
  250.  
  251. #image1:hover img:hover {
  252. opacity:1;
  253. -webkit-filter:blur(0px);
  254. -moz-filter:blur(0px);
  255. -o-filter:blur(0px);
  256. filter:blur(0px);
  257. }
  258.  
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265. /*-----------------------STATISTICS BARS-----------------------*/
  266. .statbar {
  267. margin-left:6px;
  268. height:8px;
  269. width:100px;
  270. background-color:#f4f4f4; /* statistics background color */
  271. overflow:hidden;
  272. border-radius:4px;
  273. display:inline-block;
  274. }
  275.  
  276. .statfill {
  277. height:100%;
  278. width:0%;
  279. background-color:#d6d1d1; /* statistcs bar fill color */
  280. border-radius:4px 0px 0px 4px;
  281. }
  282.  
  283. /*-----------------------POPUP-----------------------*/
  284. .popup_block{
  285. display:none;
  286. background:#fff; /* popup box background color */
  287. padding:20px;
  288. float:left;
  289. position:fixed;
  290. top:50%;left:50%;
  291. transform: translate(-50%, -50%);
  292. z-index: 99999;
  293. font-family:karla;
  294. font-size:11px;
  295. text-transform:none;
  296. letter-spacing:0px;
  297. color:#aaa; /* popup box text color */
  298. }
  299.  
  300. *html #fade {position: absolute;}
  301. *html .popup_block {position: absolute;}
  302. #fade {
  303. display:none;
  304. position:fixed;
  305. left:0px;
  306. top:0px;
  307. width:100%;
  308. height:100%;
  309. z-index:9999;
  310. background:#fff; /* popup box overlay color */
  311. opacity:0.4; /* popup box overlay opacity */
  312. }
  313.  
  314. .boximage {
  315. opacity:1;
  316. }
  317.  
  318. .boximage img {
  319. float:left;
  320. width:215px;
  321. height:400px;
  322. border-right:15px solid transparent;
  323. }
  324.  
  325. .popup_block h1 {
  326. font-family:montserrat;
  327. font-size:14px;
  328. color:#aaa; /* popup box title color */
  329. text-transform:uppercase;
  330. letter-spacing:2px;
  331. padding-bottom:10px;
  332. margin-top:0px;
  333. margin-bottom:15px;
  334. border-bottom:1px solid #f1f1f1; /* popup box title underline color */
  335. }
  336.  
  337. .popup_block h2 {
  338. font-family:montserrat;
  339. font-size:11px;
  340. text-transform:uppercase;
  341. text-align:center;
  342. padding-top:5px;
  343. padding-bottom:5px;
  344. letter-spacing:1px;
  345. font-weight:bold;
  346. }
  347.  
  348. .popup_block h2::first-letter {
  349. color:#d6d1d1; /* popup box subtitle first letter color */
  350. }
  351.  
  352. .popup_block table {
  353. border-spacing:1px;
  354. margin-left:-2px;
  355. }
  356.  
  357. .popup_block stat {
  358. font-family:montserrat;
  359. font-size:10px;
  360. text-transform:uppercase;
  361. letter-spacing:1px;
  362. font-weight:bold;
  363. }
  364.  
  365. .popup_block .lnr {
  366. padding:6px;
  367. background-color:#d6d1d1; /* popup box "basic info" icon background color */
  368. color:#fff; /* popup box "basic info" icon color */
  369. margin-right:5px;
  370. margin-top:1.5px;
  371. margin-bottom:1.5px;
  372. }
  373.  
  374. .content {
  375. max-height:115px; /* maximum height of "about biography" text */
  376. overflow:auto; /* this line enables the scrollbar in your text */
  377. text-align:justify;
  378. padding-right:10px;
  379. }
  380.  
  381. .popup_block b {
  382. color:#d6d1d1; /* popup box bold text color */
  383. }
  384.  
  385. .closewin {
  386. float:right;
  387. margin-top:-15px;
  388. margin-right:-25px;
  389. cursor:pointer;
  390. }
  391.  
  392. .closewin .lnr {
  393. font-size:9px;
  394. padding:6px 16px;
  395. background-color:#f3f1f1; /* popup box close button background color */
  396. color:#5f5e5c; /* popup box close button color */
  397. }
  398.  
  399. #popcorn{position:fixed;display:block;bottom:90px;right:7px;z-index:7999;}
  400. #popcorn a{font-family:times;font-size:8px;text-transform:uppercase;color:#cecece;background-color:#111;letter-spacing:1.5px;padding:5px 7px;margin-left:5px;margin-right:5px;}
  401.  
  402. /*-----------------------CUSTOM LINKS-----------------------*/
  403. #customlinks {
  404. position:fixed;
  405. bottom:0;left:0;
  406. margin-bottom:90px;
  407. margin-left:10px;
  408. width:50px;
  409. height:auto;
  410. z-index:3000;
  411. }
  412.  
  413. #customlinks .lnr {
  414. font-size:12px;
  415. padding:9px 8px 10px 10px;
  416. background-color:#1f182a; /* custom links background color */
  417. color:#eee; /* custom links color */
  418. display:inline-block;
  419. margin-top:3px;
  420. margin-bottom:3px;
  421. border-radius:100%;
  422. }
  423.  
  424. #customlinks .lnr:hover {
  425. background-color:#dcd4cf; /* custom links hover background color */
  426. color:#424446; /* custom links hover color */
  427. }
  428.  
  429.  
  430. /*-----------------------CREDIT. DO NOT REMOVE-----------------------*/
  431. #c {
  432. position:fixed;
  433. display:block;
  434. bottom:90px;
  435. right:7px;
  436. z-index:8000;
  437. }
  438.  
  439. #c a {
  440. font-family:montserrat;
  441. font-size:8px;
  442. text-transform:uppercase;
  443. color:#cecece; /* credit color */
  444. background-color:#111; /* credit background color */
  445. letter-spacing:1.5px;
  446. padding:5px 7px;
  447. margin-left:5px;
  448. margin-right:5px;
  449. }
  450.  
  451. /*-----------------------FADE-IN EFFECTS-----------------------*/
  452. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  453. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  454. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  455.  
  456. .fade-in {
  457. opacity:0;
  458. -webkit-animation:fadeIn ease-in 1;
  459. -moz-animation:fadeIn ease-in 1;
  460. animation:fadeIn ease-in 1;
  461. -webkit-animation-fill-mode:forwards;
  462. -moz-animation-fill-mode:forwards;
  463. animation-fill-mode:forwards;
  464. -webkit-animation-duration:1s;
  465. -moz-animation-duration:1s; animation-duration:1s; }
  466.  
  467. .fade-in.one { -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; animation-delay: 1.3s; }
  468.  
  469. .fade-in.two { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }
  470.  
  471. .fade-in.three { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
  472.  
  473.  
  474.  
  475. </style>
  476.  
  477. <link rel="alternate" href="android-app://com.tumblr/tumblr/x-callback-url/blog?blogName=barretinhoemarcuspisam" /><link rel="alternate" href="ios-app://305343404/tumblr/x-callback-url/blog?blogName=barretinhoemarcuspisam" /><script src="https://assets.tumblr.com/assets/scripts/tumblelog_post_message_queue.js?_v=8a635a4514a95df9615127e354b374d0"></script><link rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/gibson/stylesheet.css?v=3"><!-- BEGIN TUMBLR FACEBOOK OPENGRAPH TAGS --><!-- If you'd like to specify your own Open Graph tags, define the og:url and og:title tags in your theme's HTML. --><!-- Read more: http://ogp.me/ --><meta property="fb:app_id" content="48119224995" /><meta property="og:title" content="Guardi&atilde;s Estelares" /><meta property="og:url" content="https://barretinhoemarcuspisam.tumblr.com/?og=1" /><meta property="og:description" content="" /><meta property="og:type" content="tumblr-feed:tumblelog" /><meta property="og:image" content="https://assets.tumblr.com/images/default_avatar/cube_closed_128.png" /><meta property="al:ios:url" content="tumblr://x-callback-url/blog?blogName=barretinhoemarcuspisam" /><meta property="al:ios:app_name" content="Tumblr" /><meta property="al:ios:app_store_id" content="305343404" /><meta property="al:android:url" content="tumblr://x-callback-url/blog?blogName=barretinhoemarcuspisam" /><meta property="al:android:app_name" content="Tumblr" /><meta property="al:android:package" content="com.tumblr" /><!-- END TUMBLR FACEBOOK OPENGRAPH TAGS --><!-- TWITTER TAGS --><meta charset="utf-8"><meta name="twitter:site" content="tumblr" /><meta name="twitter:card" content="app" /><meta name="twitter:description" content="barretinhoemarcuspisam" /><meta name="twitter:title" content="barretinhoemarcuspisam" /><meta name="twitter:app:name:iphone" content="Tumblr" /><meta name="twitter:app:name:ipad" content="Tumblr" /><meta name="twitter:app:name:googleplay" content="Tumblr" /><meta name="twitter:app:id:iphone" content="305343404" /><meta name="twitter:app:id:ipad" content="305343404" /><meta name="twitter:app:id:googleplay" content="com.tumblr" /><meta name="twitter:app:url:iphone" content="tumblr://x-callback-url/blog?blogName=barretinhoemarcuspisam&amp;referrer=twitter-cards" /><meta name="twitter:app:url:ipad" content="tumblr://x-callback-url/blog?blogName=barretinhoemarcuspisam&amp;referrer=twitter-cards" /><meta name="twitter:app:url:googleplay" content="tumblr://x-callback-url/blog?blogName=barretinhoemarcuspisam&amp;referrer=twitter-cards" /><link rel="canonical" href="https://barretinhoemarcuspisam.tumblr.com" /></head>
  478.  
  479. <body>
  480.  
  481. <img src="https://i.imgur.com/bxA71dS.png" style="margin-top: 0px";>
  482.  
  483.  
  484.  
  485.  
  486. <div id="maintitle" class="box fade-in three">
  487. <img src="https://i.imgur.com/QXyNan6.png" style="width:870px">
  488.  
  489. </div>
  490.  
  491.  
  492.  
  493. <div id="image1" class="box fade-in one">
  494.  
  495. <!-----TO ADD ANOTHER CHARACTER, COPY & PASTE THE LINES BELOW----->
  496.  
  497. <!-----*START COPY*----->
  498. <a href="#?w=475" title="Sailor Moon" rel="box1" class="poplight"><img src="https://media.discordapp.net/attachments/454478142271258634/456193844606795787/1.png?width=516&height=413" style="width:
  499. 240px;"></a>
  500. <!-----*END COPY*---->
  501.  
  502.  
  503.  
  504. <!-----*START COPY*----->
  505. <a href="#?w=475" title="Sailor Mercury" rel="box1" class="poplight"><img src="
  506. https://media.discordapp.net/attachments/454478142271258634/456193845227552779/2.png?width=516&height=413" style="width:240px;"></a>
  507. <!-----*END COPY*---->
  508.  
  509.  
  510.  
  511.  
  512.  
  513. <!-----*START COPY*----->
  514. <a href="#?w=475" title="Sailor Mars" rel="box1" class="poplight"><img src="
  515. https://media.discordapp.net/attachments/454478142271258634/456193850600325140/3.png?width=518&height=415" style="width:240px; position: relative; left: 10px;"></a>
  516. <!-----*END COPY*---->
  517.  
  518.  
  519. <!-----*START COPY*----->
  520. <a href="#?w=475" title="Sailor Jupiter" rel="box1" class="poplight"><img src="https://media.discordapp.net/attachments/454478142271258634/456193854656348161/4.png?width=516&height=413" style="width:240px;"></a>
  521. <!-----*END COPY*---->
  522.  
  523.  
  524.  
  525. <!-----*START COPY*----->
  526. <a href="#?w=475" title="first character" rel="box1" class="poplight"><img src="
  527. https://media.discordapp.net/attachments/454478142271258634/458799314806898698/6.png?width=516&height=413" style="width:240px; position: relative; left: 20px;"></a>
  528. <!-----*END COPY*---->
  529.  
  530.  
  531.  
  532. <!-----*START COPY*----->
  533. <a href="#?w=475" title="first character" rel="box1" class="poplight"><img src="
  534.  
  535. https://media.discordapp.net/attachments/454478142271258634/456193863518781441/9.png?width=516&height=413" style="width:240px; position: relative; left: 15px"></a>
  536. <!-----*END COPY*---->
  537.  
  538.  
  539.  
  540.  
  541. <!-----*START COPY*----->
  542. <a href="#?w=475" title="first character" rel="box1" class="poplight"><img src="
  543.  
  544. https://media.discordapp.net/attachments/454478142271258634/456193859026812928/5.png?width=518&height=415" style="width:240px; position: relative; left: 45px"></a>
  545. <!-----*END COPY*---->
  546.  
  547.  
  548. <!-----*START COPY*----->
  549. <a href="#?w=475" title="first character" rel="box1" class="poplight"><img src="
  550. https://media.discordapp.net/attachments/454478142271258634/456193862931578880/7.png?width=516&height=413" style="width:240px; position: relative; left: 35px"></a>
  551. <!-----*END COPY*---->
  552.  
  553.  
  554. <!-----*START COPY*----->
  555. <a href="#?w=475" title="first character" rel="box1" class="poplight"><img src="
  556. https://media.discordapp.net/attachments/454478142271258634/456193862860406790/8.png?width=516&height=413" style="width:240px; position: relative; left: 25px"></a>
  557. <!-----*END COPY*---->
  558.  
  559.  
  560.  
  561. <!-----*START COPY*----->
  562. <a href="#?w=475" title="first character" rel="box1" class="poplight"><img src="
  563. https://media.discordapp.net/attachments/454478142271258634/456194459777105923/10.png?width=375&height=300" style="width:240px;"></a>
  564. <!-----*END COPY*---->
  565.  
  566. 3
  567. </div>
  568.  
  569.  
  570.  
  571.  
  572.  
  573. <!-----"first character" IS THE TOOLTIP TEXT THAT SHOWS UP WHEN YOU HOVER THE CHARACTER IMAGE---->
  574.  
  575. <!-----REPLACE THE IMAGE URL WITH YOUR OWN IMAGE URLS---->
  576.  
  577. <!-----YOU CAN CHANGE THE WIDTHS OF EACH IMAGE BY CHANGING "120px"---->
  578.  
  579. <!-----REMEMBER TO CHANGE THE NUMBER IN "box1" TO THE CORRECT NUMBER OF YOUR CHARACTER ORDER. FOR EXAMPLE, IF YOU HAVE 4 CHARACTERS, CHANGE THE 4TH CHARACTER TO "box4"----->
  580.  
  581.  
  582.  
  583. <!-----*START BIOGRAPHY BOX*----->
  584. <div id="box1" class="popup_block">
  585.  
  586. <a title="back to characters"><div class="closewin"><span class="lnr lnr-cross"></span></div></a>
  587.  
  588. <!-----POPUPBOX TITLE----->
  589. <h1>Character name #1</h1>
  590.  
  591. <!-----IMAGE INSIDE POPUP BOX----->
  592. <div class="boximage"><img src="//i.imgur.com/AKJxC7g.png"></div>
  593.  
  594. <!-----POPUP BOX SUBTITLE----->
  595. <h2>basic info</h2>
  596.  
  597. <span class="lnr lnr-pencil"></span>
  598. <b>Name:</b> Your name here
  599. <p>
  600.  
  601. <span class="lnr lnr-user"></span>
  602. <b>Age:</b> Your age here
  603. <p>
  604.  
  605. <span class="lnr lnr-calendar-full"></span>
  606. <b>Birthday:</b> Your birthday here
  607. <p>
  608.  
  609. <!-----POPUP BOX SUBTITLE----->
  610. <h2>statistics</h2>
  611.  
  612. <!-----POPUP BOX STATISTICS----->
  613. <table><tbody>
  614. <tr>
  615. <!-----STATSTICS 1 NAME----->
  616. <td><stat>stat 1</stat></td>
  617.  
  618. <td>
  619. <div class="statbar">
  620. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  621. <div class="statfill" style="width:80%"></div></div>
  622. </td>
  623. </tr>
  624.  
  625. <tr>
  626. <!-----STATSTICS 2 NAME----->
  627. <td><stat>stat 2</stat></td>
  628.  
  629. <td>
  630. <div class="statbar">
  631. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  632. <div class="statfill" style="width:100%"></div></div>
  633. </td>
  634. </tr>
  635.  
  636. <tr>
  637. <!-----STATSTICS 3 NAME----->
  638. <td><stat>stat 3</stat></td>
  639.  
  640. <td>
  641. <div class="statbar">
  642. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  643. <div class="statfill" style="width:60%"></div></div>
  644. </td>
  645. </tr>
  646.  
  647. <tr>
  648. <!-----STATSTICS 4 NAME----->
  649. <td><stat>stat 4</stat></td>
  650.  
  651. <td>
  652. <div class="statbar">
  653. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  654. <div class="statfill" style="width:80%"></div></div>
  655. </td>
  656. </tr>
  657.  
  658. <tr>
  659. <!-----STATSTICS 5 NAME----->
  660. <td><stat>stat 5</stat></td>
  661.  
  662. <td>
  663. <div class="statbar">
  664. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  665. <div class="statfill" style="width:60%"></div></div>
  666. </td>
  667. </tr>
  668. </tbody></table>
  669.  
  670. <!-----POPUP BOX SUBTITLE----->
  671. <h2>about</h2>
  672.  
  673. <div class="content">
  674. Your biography text goes here.
  675. </div>
  676. </div>
  677. <!-----*END BIOGRAPHY BOX*----->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!