API tools faq
paste
especiallygold

profiled

especiallygold
Jul 25th, 2019
6,454
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.89 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. © erika-writes
  3.  
  4. special thanks to painthemes.tumblr.com for their pop-up box!
  5.  
  6. you can find all instructions for this page here: https://erika-writes.tumblr.com/post/186551187662
  7. -->
  8.  
  9. <head>
  10.  
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13.  
  14. <link href="https://fonts.googleapis.com/css?family=League+Script|Playfair+Display:900&display=swap" rel="stylesheet">
  15.  
  16. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  17.  
  18. <script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script>
  21. $(document).ready(function() {
  22. //
  23. $('a.poplight[href^=#]').click(function() {
  24. var popID = $(this).attr('rel'); //Get Popup Name
  25. var popURL = $(this).attr('href'); //Get Popup href to define size
  26. var query= popURL.split('?');
  27. var dim= query[1].split('&');
  28. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  29. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  30. var popMargTop = ($('#' + popID).height() + 80) / 2;
  31. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  32. //Apply Margin to Popup
  33. $('#' + popID).css({
  34. 'margin-top' : -popMargTop,
  35. 'margin-left' : -popMargLeft
  36. });
  37. $('body').append('<div id="fade"></div>');
  38. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  39. return false;
  40. });
  41. $('a.close, #fade').live('click', function() {
  42. $('#fade , .popup_block').fadeOut(function() {
  43. $('#fade, a.close').remove(); //fade them both out
  44. });
  45. return false;
  46. });
  47. });
  48. </script>
  49.  
  50. <style type="text/css">
  51.  
  52. body {
  53. font-family:avenir;
  54. font-size:10px;
  55. letter-spacing:.5px;
  56. line-height:15px;
  57. -webkit-font-smoothing: antialiased;
  58. -moz-osx-font-smoothing: grayscale;
  59. }
  60.  
  61. a {
  62. color:#000;
  63. }
  64.  
  65. #title {
  66. font-family: 'League Script', cursive;
  67. font-size:50px;
  68. font-weight:bold;
  69. text-transform:lowercase;
  70. text-align:left;
  71. margin:7px;
  72. margin-top:75px;
  73. margin-left:420px;
  74. transform:rotate(-3deg);
  75. }
  76.  
  77. #container {
  78. width:468px;
  79. margin: 0 auto;
  80. overflow:hidden;
  81. border:0px solid #000;
  82. padding:3px;
  83. padding-left:18px;
  84. margin-top:50px;
  85. margin-bottom:30px;
  86. }
  87.  
  88. #box {
  89. width:150px;
  90. margin: 0 auto;
  91. overflow:hidden;
  92. border:0px solid #000;
  93. padding:3px;
  94. margin-bottom:10px;
  95. float:left;
  96. }
  97.  
  98. #info {
  99. font-family:avenir;
  100. font-size:11px;
  101. font-weight:bold;
  102. text-transform:lowercase;
  103. letter-spacing:1.5px;
  104. line-height:14px;
  105. margin-top:5px;
  106. padding:3px;
  107. width:120px;
  108. height:40px;
  109. text-align:center;
  110. }
  111.  
  112. hr {
  113. border:.5px solid #000;
  114. width:175px;
  115. margin-top:15px;
  116. margin-bottom:15px;
  117. }
  118.  
  119. .img {
  120. padding:3px;
  121. width:120px;
  122. height:auto;
  123. border-radius:10px;
  124. }
  125.  
  126. #nav {
  127. position:fixed;
  128. left:25px;
  129. top:20px;
  130. font-family:avenir;
  131. font-size:9px;
  132. font-weight:500;
  133. text-transform:lowercase;
  134. letter-spacing:1px;
  135. height:45px;
  136. border-left:1px solid #000;
  137. padding-left:15px;
  138. }
  139.  
  140. #nav a {
  141. text-decoration:none;
  142. }
  143.  
  144. /*POP UP BOX STUFF*/
  145.  
  146. .largeimg {
  147. width:250px;
  148. height:500px;
  149. border-radius:10px;
  150. }
  151.  
  152. #name {
  153. width:260px;
  154. font-family: 'League Script', cursive;
  155. font-size:35px;
  156. font-weight:bold;
  157. text-transform:lowercase;
  158. float:right;
  159. text-align:center;
  160. padding:20px;
  161. margin-top:5px;
  162. transform:rotate(-3deg);
  163. }
  164.  
  165. table {
  166. border-collapse:collapse;
  167. }
  168.  
  169. table, th, td {
  170. width:265px;
  171. font-size:9.5px;
  172. font-weight:normal;
  173. text-align:left;
  174. letter-spacing:.5px;
  175. background:#eee;
  176. border: 3px solid white;
  177. padding:7px;
  178. margin-left:268px;
  179. margin-top:-440px;
  180. }
  181.  
  182. #aesthetic {
  183. width:260px;
  184. height:80px;
  185. font-family: courier;
  186. font-size:14px;
  187. letter-spacing:0px;
  188. line-height:14px;
  189. margin-top:25px;
  190. padding:5px;
  191. margin-left:268px;
  192. text-align:center;
  193. overflow:auto;
  194. }
  195.  
  196. .leftimg {
  197. width:110px;
  198. height:150px;
  199. border-radius:10px;
  200. transform:rotate(3deg);
  201. }
  202.  
  203. .rightimg {
  204. width:110px;
  205. height:150px;
  206. border-radius:10px;
  207. transform:rotate(-4deg);
  208. margin-left:-5px;
  209. margin-top:5px;
  210. z-index:9999999;
  211. position:fixed;
  212. }
  213.  
  214. #photos {
  215. width:260px;
  216. margin-top:25px;
  217. margin-left:290px;
  218. }
  219.  
  220. /*CODES BY PAINTHEMES.TUMBLR.COM*/
  221. .popup_block{
  222. height:500px;
  223. display:none;
  224. background:#fff; /*change the color of your background*/
  225. padding:5px;
  226. border:1px solid #d6d6d6; /*change the color of your border*/
  227. border-radius:10px;
  228. float:left;
  229. position:fixed;
  230. top:50%;left:50%;
  231. z-index: 99999;
  232. }
  233.  
  234. #fade {
  235. display:none;
  236. position:fixed;
  237. left:0px;
  238. top:0px;
  239. width:100%;
  240. height:100%;
  241. z-index:9999;
  242. background:{color:background}; /* change the color of the background below the box */
  243. opacity:.5; /* change the opacity */
  244. }
  245.  
  246. *html #fade {position: absolute;}
  247. *html .popup_block {position: absolute;}
  248. /*CODES BY PAINTHEMES.TUMBLR.COM*/
  249.  
  250. </style>
  251. </head>
  252.  
  253. <body>
  254.  
  255. <div id="nav">
  256. <a href="/">back to blog</a>
  257. <br><a href="https://tumblr.com/dashboard">go to dashboard</a>
  258. <br><a href="https://erika-writes.tumblr.com">credit</a>
  259. </div>
  260.  
  261. <div id="title">muses</div>
  262.  
  263. <div id="container">
  264.  
  265. <!-- BOX 1 -->
  266.  
  267. <a href="#?w=550" rel="box1" class="poplight">
  268.  
  269. <div id="box">
  270.  
  271. <img src="IMG URL HERE" class="img">
  272.  
  273. <div id="info">name</div>
  274.  
  275. </div>
  276.  
  277. </a>
  278.  
  279. <!-- BOX 2 -->
  280.  
  281. <a href="#?w=550" rel="box2" class="poplight">
  282.  
  283. <div id="box">
  284.  
  285. <img src="IMG URL HERE" class="img">
  286.  
  287. <div id="info">name</div>
  288.  
  289. </div>
  290.  
  291. </a>
  292.  
  293. <!-- BOX 3 -->
  294.  
  295. <a href="#?w=550" rel="box3" class="poplight">
  296.  
  297. <div id="box">
  298.  
  299. <img src="IMG URL HERE" class="img">
  300.  
  301. <div id="info">name</div>
  302.  
  303. </div>
  304.  
  305. </a>
  306.  
  307. <!-- BOX 4 -->
  308.  
  309. <a href="#?w=550" rel="box4" class="poplight">
  310.  
  311. <div id="box">
  312.  
  313. <img src="IMG URL HERE" class="img">
  314.  
  315. <div id="info">name</div>
  316.  
  317. </div>
  318.  
  319. </a>
  320.  
  321. <!-- BOX 5 -->
  322.  
  323. <a href="#?w=550" rel="box5" class="poplight">
  324.  
  325. <div id="box">
  326.  
  327. <img src="IMG URL HERE" class="img">
  328.  
  329. <div id="info">name</div>
  330.  
  331. </div>
  332.  
  333. </a>
  334.  
  335. <!-- BOX 6 -->
  336.  
  337. <a href="#?w=550" rel="box6" class="poplight">
  338.  
  339. <div id="box">
  340.  
  341. <img src="IMG URL HERE" class="img">
  342.  
  343. <div id="info">name</div>
  344.  
  345. </div>
  346.  
  347. </a>
  348.  
  349. </div>
  350.  
  351. <!-- YOUR LAST BOX SHOULD END WITH </DIV>, THE ONES ABOVE THAT SHOULD END WITH </A> -->
  352.  
  353. <!-- POP UP BOX 1 -->
  354.  
  355. <div id="box1" class="popup_block">
  356.  
  357. <img src="IMG URL HERE" class="largeimg">
  358.  
  359. <div id="name">name</div>
  360.  
  361. <table>
  362. <tr><th><i class="fas fa-portrait"></i> <b>faceclaim:</b> text here</th>
  363. <th><i class="fas fa-birthday-cake"></i> <b>age:</b> text here</th></tr>
  364.  
  365. <tr><th><i class="fas fa-venus-mars"></i> <b>gender:</b> text here</th>
  366. <th><i class="fas fa-heart"></i> <b>sexuality:</b> text here</th></tr>
  367.  
  368. <tr><th><i class="fas fa-briefcase"></i> <b>job:</b> text here</th>
  369. <th><i class="fas fa-home"></i> <b>residency:</b> text here</th></tr>
  370.  
  371. <tr><th><i class="fas fa-star"></i> <b>zodiac:</b> text here</th>
  372. <th><i class="fas fa-chart-pie"></i> <b>mbti:</b> text here</th>
  373.  
  374. </tr>
  375. </table>
  376.  
  377. <div id="photos">
  378.  
  379. <img src="IMG URL HERE" class="leftimg">
  380. <img src="IMG URL HERE" class="rightimg">
  381.  
  382. </div>
  383.  
  384. <div id="aesthetic">text here</div>
  385.  
  386. </div></div></div></div></div></div></div></div></div></div></div>
  387.  
  388. <!-- POP UP BOX 2 -->
  389.  
  390. <div id="box2" class="popup_block">
  391.  
  392. <img src="IMG URL HERE" class="largeimg">
  393.  
  394. <div id="name">name</div>
  395.  
  396. <table>
  397. <tr><th><i class="fas fa-portrait"></i> <b>faceclaim:</b> text here</th>
  398. <th><i class="fas fa-birthday-cake"></i> <b>age:</b> text here</th></tr>
  399.  
  400. <tr><th><i class="fas fa-venus-mars"></i> <b>gender:</b> text here</th>
  401. <th><i class="fas fa-heart"></i> <b>sexuality:</b> text here</th></tr>
  402.  
  403. <tr><th><i class="fas fa-briefcase"></i> <b>job:</b> text here</th>
  404. <th><i class="fas fa-home"></i> <b>residency:</b> text here</th></tr>
  405.  
  406. <tr><th><i class="fas fa-star"></i> <b>zodiac:</b> text here</th>
  407. <th><i class="fas fa-chart-pie"></i> <b>mbti:</b> text here</th>
  408.  
  409. </tr>
  410. </table>
  411.  
  412. <div id="photos">
  413.  
  414. <img src="IMG URL HERE" class="leftimg">
  415. <img src="IMG URL HERE" class="rightimg">
  416.  
  417. </div>
  418.  
  419. <div id="aesthetic">text here</div>
  420.  
  421. </div></div></div></div></div></div></div></div></div></div></div>
  422.  
  423. <!-- POP UP BOX 3 -->
  424.  
  425. <div id="box3" class="popup_block">
  426.  
  427. <img src="IMG URL HERE" class="largeimg">
  428.  
  429. <div id="name">name</div>
  430.  
  431. <table>
  432. <tr><th><i class="fas fa-portrait"></i> <b>faceclaim:</b> text here</th>
  433. <th><i class="fas fa-birthday-cake"></i> <b>age:</b> text here</th></tr>
  434.  
  435. <tr><th><i class="fas fa-venus-mars"></i> <b>gender:</b> text here</th>
  436. <th><i class="fas fa-heart"></i> <b>sexuality:</b> text here</th></tr>
  437.  
  438. <tr><th><i class="fas fa-briefcase"></i> <b>job:</b> text here</th>
  439. <th><i class="fas fa-home"></i> <b>residency:</b> text here</th></tr>
  440.  
  441. <tr><th><i class="fas fa-star"></i> <b>zodiac:</b> text here</th>
  442. <th><i class="fas fa-chart-pie"></i> <b>mbti:</b> text here</th>
  443.  
  444. </tr>
  445. </table>
  446.  
  447. <div id="photos">
  448.  
  449. <img src="IMG URL HERE" class="leftimg">
  450. <img src="IMG URL HERE" class="rightimg">
  451.  
  452. </div>
  453.  
  454. <div id="aesthetic">text here</div>
  455.  
  456. </div></div></div></div></div></div></div></div></div></div></div>
  457.  
  458. <!-- POP UP BOX 4 -->
  459.  
  460. <div id="box4" class="popup_block">
  461.  
  462. <img src="IMG URL HERE" class="largeimg">
  463.  
  464. <div id="name">name</div>
  465.  
  466. <table>
  467. <tr><th><i class="fas fa-portrait"></i> <b>faceclaim:</b> text here</th>
  468. <th><i class="fas fa-birthday-cake"></i> <b>age:</b> text here</th></tr>
  469.  
  470. <tr><th><i class="fas fa-venus-mars"></i> <b>gender:</b> text here</th>
  471. <th><i class="fas fa-heart"></i> <b>sexuality:</b> text here</th></tr>
  472.  
  473. <tr><th><i class="fas fa-briefcase"></i> <b>job:</b> text here</th>
  474. <th><i class="fas fa-home"></i> <b>residency:</b> text here</th></tr>
  475.  
  476. <tr><th><i class="fas fa-star"></i> <b>zodiac:</b> text here</th>
  477. <th><i class="fas fa-chart-pie"></i> <b>mbti:</b> text here</th>
  478.  
  479. </tr>
  480. </table>
  481.  
  482. <div id="photos">
  483.  
  484. <img src="IMG URL HERE" class="leftimg">
  485. <img src="IMG URL HERE" class="rightimg">
  486.  
  487. </div>
  488.  
  489. <div id="aesthetic">text here</div>
  490.  
  491. </div></div></div></div></div></div></div></div></div></div></div>
  492.  
  493. <!-- POP UP BOX 5 -->
  494.  
  495. <div id="box5" class="popup_block">
  496.  
  497. <img src="IMG URL HERE" class="largeimg">
  498.  
  499. <div id="name">name</div>
  500.  
  501. <table>
  502. <tr><th><i class="fas fa-portrait"></i> <b>faceclaim:</b> text here</th>
  503. <th><i class="fas fa-birthday-cake"></i> <b>age:</b> text here</th></tr>
  504.  
  505. <tr><th><i class="fas fa-venus-mars"></i> <b>gender:</b> text here</th>
  506. <th><i class="fas fa-heart"></i> <b>sexuality:</b> text here</th></tr>
  507.  
  508. <tr><th><i class="fas fa-briefcase"></i> <b>job:</b> text here</th>
  509. <th><i class="fas fa-home"></i> <b>residency:</b> text here</th></tr>
  510.  
  511. <tr><th><i class="fas fa-star"></i> <b>zodiac:</b> text here</th>
  512. <th><i class="fas fa-chart-pie"></i> <b>mbti:</b> text here</th>
  513.  
  514. </tr>
  515. </table>
  516.  
  517. <div id="photos">
  518.  
  519. <img src="IMG URL HERE" class="leftimg">
  520. <img src="IMG URL HERE" class="rightimg">
  521.  
  522. </div>
  523.  
  524. <div id="aesthetic">text here</div>
  525.  
  526. </div></div></div></div></div></div></div></div></div></div></div>
  527.  
  528. <!-- POP UP BOX 6 -->
  529.  
  530. <div id="box6" class="popup_block">
  531.  
  532. <img src="IMG URL HERE" class="largeimg">
  533.  
  534. <div id="name">name</div>
  535.  
  536. <table>
  537. <tr><th><i class="fas fa-portrait"></i> <b>faceclaim:</b> text here</th>
  538. <th><i class="fas fa-birthday-cake"></i> <b>age:</b> text here</th></tr>
  539.  
  540. <tr><th><i class="fas fa-venus-mars"></i> <b>gender:</b> text here</th>
  541. <th><i class="fas fa-heart"></i> <b>sexuality:</b> text here</th></tr>
  542.  
  543. <tr><th><i class="fas fa-briefcase"></i> <b>job:</b> text here</th>
  544. <th><i class="fas fa-home"></i> <b>residency:</b> text here</th></tr>
  545.  
  546. <tr><th><i class="fas fa-star"></i> <b>zodiac:</b> text here</th>
  547. <th><i class="fas fa-chart-pie"></i> <b>mbti:</b> text here</th>
  548.  
  549. </tr>
  550. </table>
  551.  
  552. <div id="photos">
  553.  
  554. <img src="IMG URL HERE" class="leftimg">
  555. <img src="IMG URL HERE" class="rightimg">
  556.  
  557. </div>
  558.  
  559. <div id="aesthetic">text here</div>
  560.  
  561. </div></div></div></div></div></div></div></div></div></div></div>
  562.  
  563. </body>
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!