API tools faq
paste
Advertisement
scftlcves

#14 (v1) / joy (page)

scftlcves
May 8th, 2019
3,383
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>{Title}</title> <!--- AUTOMATICALLY SHOWS YOUR BLOG TITLE. IF YOU WISH TO HAVE SOMETHING DIFFERENT, TAKE OUT {Title} AND REPLACE IT WITH YOUR DESIRED PAGE TITLE. --->
  6. <link rel="shortcut icon" href="{Favicon}"/>
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  8.  
  9. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Biryani|Comfortaa|Karla|M+PLUS+Rounded+1c|Quicksand|Ubuntu|Varela+Round" rel="stylesheet">
  10.  
  11. <link href="https://fonts.googleapis.com/css?family=Raleway:400" rel="stylesheet">
  12. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  13.  
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  15.  
  16. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  17.  
  18. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  19.  
  20. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  21.  
  22. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  23. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  24. var $grid = $("#contain_mason").masonry({
  25. itemSelector: ".main_entry",
  26. initLayout: 1
  27. });
  28. $grid.on("layoutComplete", function(o, r) {
  29. console.log(r.length)
  30. }), $grid.masonry({
  31. fitWidth: 1,
  32. horizontalOrder: 1,
  33. gutter: 0,
  34. resize: 1
  35. }), $grid.imagesLoaded().progress(function() {
  36. $grid.masonry("layout")
  37. });
  38. });</script>
  39.  
  40. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  41.  
  42. <script>
  43. (function($){
  44. $(document).ready(function(){
  45. $("[title]").style_my_tooltips({
  46. tip_follows_cursor:true,
  47. tip_delay_time:90,
  48. tip_fade_speed:600,
  49. attribute:"title"
  50. });
  51. });
  52. })(jQuery);
  53. </script>
  54.  
  55. <script>
  56. $(document).ready(function() {
  57. //
  58. $('a.poplight[href^=#]').click(function() {
  59. var popID = $(this).attr('rel');
  60. var popURL = $(this).attr('href');
  61. var query= popURL.split('?');
  62. var dim= query[1].split('&');
  63. var popWidth = dim[0].split('=')[1];
  64. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  65. var popMargTop = ($('#' + popID).height() + 0) / 2;
  66. var popMargLeft = ($('#' + popID).width() + 0) / 2;
  67. $('#' + popID).css({
  68. 'margin-top' : -popMargTop,
  69. 'margin-left' : -popMargLeft
  70. });
  71. $('body').append('<div id="fade"></div>');
  72. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  73. return false;
  74. });
  75. $('a.close, #fade').live('click', function() {
  76. $('#fade , .popup_block').fadeOut(function() {
  77. $('#fade, a.close').remove();
  78. });
  79. return false;
  80. });
  81. });
  82. </script>
  83.  
  84. <style type="text/css">
  85.  
  86. body {
  87. background-color:#f8f8f8;
  88. color:#5a5a5a;
  89. font-family:karla;
  90. /* pre-loaded fonts that are used in my themes are below if you wish to change it! */
  91. font-size:10px;
  92. line-height:16px;
  93. letter-spacing:.25px; /* change to zero for no letter spacing */
  94. }
  95.  
  96. /* PRE-LOADED GOOGLE FONTS:
  97. - ABeeZee
  98. - Biryani
  99. - Comfortaa
  100. - Karla
  101. - M PLUS Rounded 1c
  102. - Quicksand
  103. - Ubuntu
  104. - Varela Round
  105. */
  106.  
  107. a {
  108. text-decoration:none;
  109. color:#313131;
  110. }
  111.  
  112. a:hover {
  113. color:#5a5a5a;
  114. }
  115.  
  116. b,strong {
  117. color:#dbb1db;
  118. }
  119.  
  120. i,em {
  121. color:#baded1;
  122. }
  123.  
  124. ::-webkit-scrollbar {
  125. width: 5px;
  126. background: #f3f3f3;
  127. }
  128.  
  129. ::-webkit-scrollbar-track {
  130. background:#f8f8f8;
  131. }
  132.  
  133. ::-webkit-scrollbar-thumb {
  134. background-color:#e5c4c4;
  135. }
  136.  
  137.  
  138. #s-m-t-tooltip { /* TOOLTIPS AKA TITLES FOUND WHEN HOVERING */
  139. background-color:#f8f8f8;
  140. color:#e5c4c4;
  141. font-weight:bold;
  142. text-transform:uppercase;
  143. font-size:8px;
  144. letter-spacing:2px;
  145. padding:10px 15px 10px 15px;
  146. margin:20px 0px 0px 20px;
  147. z-index:9999999999999999999999;
  148. border:1px solid #e7e7e7;
  149. }
  150.  
  151. #contain {
  152. width:805px;
  153. margin:100px auto;
  154. padding-bottom:50px;
  155. text-align:center;
  156. }
  157.  
  158. #contain_mason {
  159. text-align:center;
  160. width:805px;
  161. }
  162.  
  163. .main_entry {
  164. margin-right:15px;
  165. margin-bottom:20px;
  166. border-radius:6px;
  167. float:left;
  168. width:250px;
  169. background-color:#fbfbfb;
  170. border:1px solid #e7e7e7;
  171. }
  172.  
  173. .muse {
  174. display:block;
  175. text-align:center;
  176. font-size:22px;
  177. letter-spacing:-.5px;
  178. text-transform:lowercase;
  179. font-family: quicksand;
  180. color:#5a5a5a;
  181. padding:15px;
  182. }
  183.  
  184. .muse_etc {
  185. text-transform:uppercase;
  186. font-family:karla;
  187. font-weight:none;
  188. font-size:8px;
  189. letter-spacing:2px;
  190. color:#5a5a5a;
  191. }
  192.  
  193. .muse_navigation {
  194. display:block;
  195. width:250px;
  196. padding-bottom:15px;
  197. }
  198.  
  199. .muse_navigation a {
  200. display:inline-block;
  201. width:25px;
  202. height:25px;
  203. line-height:25px;
  204. text-align:center;
  205. font-size:11px;
  206. color:#c6e5f5;
  207. margin-left:5px;
  208. margin-right:5px;
  209. -webkit-transition: -webkit-transform .8s ease-in-out;
  210. transition: .8s ease-in-out;
  211. }
  212.  
  213. .muse_navigation a:hover {
  214. color:#fbe0e0;
  215. -webkit-transform: rotate(360deg);
  216. transform: rotate(360deg);
  217. }
  218.  
  219. .info {
  220. display:block;
  221. padding:10px;
  222. text-align:justify;
  223. }
  224.  
  225. .icon {
  226. display:inline-block;
  227. float:left;
  228. width:55px;
  229. height:55px;
  230. margin-right:20px;
  231. }
  232.  
  233. .icon img {
  234. width:55px;
  235. height:55px;
  236. border-radius:50%;
  237. padding:3px;
  238. border:1px solid #e7e7e7;
  239. -webkit-transition: -webkit-transform .8s ease-in-out;
  240. transition: .8s ease-in-out;
  241. }
  242.  
  243. .icon img:hover {
  244. background-color:#fbe0e0;
  245. -webkit-transform: rotate(360deg);
  246. transform: rotate(360deg);
  247. }
  248.  
  249. .photo {
  250. width:250px;
  251. height:100px;
  252. display:block;
  253. }
  254.  
  255. .photo img {
  256. width:250px;
  257. height:100px;
  258. display:block;
  259. }
  260.  
  261. #bottom {
  262. bottom:-1px;
  263. left:-1px;
  264. right:-1px;
  265. position:fixed;
  266. display:block;
  267. text-align:center;
  268. font-size:11px;
  269. letter-spacing:1px;
  270. text-transform:uppercase;
  271. font-weight:bold;
  272. border-top:;
  273. color:#f1bb87;
  274. padding:15px;
  275. height:45px;
  276. line-height:45px;
  277. background-color:#fbfbfb;
  278. border:1px solid #e7e7e7;
  279. }
  280.  
  281. #bottom_navigation {
  282. margin-top:5px;
  283. margin-left:10px;
  284. float:left;
  285. font-size:16px;
  286. color:#dbb1db;
  287. display:inline-block;
  288. }
  289.  
  290. #bottom_navigation a {
  291. color:#dbb1db;
  292. margin-right:15px;
  293. }
  294.  
  295. #bottom_credit {
  296. margin-top:5px;
  297. float:right;
  298. font-size:20px;
  299. color:#e5c4c4;
  300. display:inline-block;
  301. }
  302.  
  303. #bottom_credit a {
  304. color:#e5c4c4;
  305. margin-right:15px;
  306. }
  307.  
  308. .clearfix:before,.clearfix:after{content:'';display:table;}
  309. .clearfix:after{clear:both;}
  310. .clearfix{zoom:1;}
  311.  
  312. .popup_block{
  313. display:none;
  314. background:#f8f8f8; /* POPUP BACKGROUND COLOR */
  315. position:fixed;
  316. top:50%;
  317. left:50%;
  318. z-index: 99999;
  319. }
  320.  
  321. *html #fade {position: absolute;}
  322. *html .popup_block {position: absolute;}
  323. #fade {
  324. display:none;
  325. position:fixed;
  326. left:0px;
  327. top:0px;
  328. width:100%;
  329. height:100%;
  330. z-index:9999;
  331. background:#f8f8f8; /* POPUP BACKGROUND COLOR */
  332. opacity:1;
  333. }
  334.  
  335. #connect_popup {
  336. width:400px;
  337. text-align:center;
  338. }
  339.  
  340. .connect_popups {
  341. display:inline-block;
  342. width:410px;
  343. max-height:550px;
  344. overflow:auto;
  345. padding-right:15px;
  346. margin-left:-15px;
  347. }
  348.  
  349. .connect_section {
  350. display:block;
  351. margin-bottom:15px;
  352. display:inline-block;
  353. width:400px;
  354. height:90px;
  355. background-color:#fbfbfb;
  356. border:1px solid #e7e7e7;
  357. }
  358.  
  359. .connect_photo {
  360. width:120px;
  361. height:90px;
  362. display:inline-block;
  363. float:right;
  364. background-color:#e5c4c4;
  365. }
  366.  
  367. .connect_photo img {
  368. width:120px;
  369. height:90px;
  370. -webkit-transition: -webkit-transform .8s ease-in-out;
  371. transition: .8s ease-in-out;
  372. }
  373.  
  374. .connect_photo img:hover {
  375. text-align:center;
  376. margin-top:10px;
  377. width:100px;
  378. height:70px;
  379. -webkit-transition: -webkit-transform .8s ease-in-out;
  380. transition: .8s ease-in-out;
  381. }
  382.  
  383. .connect_info {
  384. width:250px;
  385. height:60px;
  386. overflow:auto;
  387. float:left;
  388. text-align:justify;
  389. padding:15px;
  390. }
  391.  
  392. .connect_info imp {
  393. font-size:14px;
  394. letter-spacing:-.5px;
  395. text-transform:lowercase;
  396. font-family: quicksand;
  397. color:#dbb1db;
  398. }
  399.  
  400. #about_popup {
  401. width:400px;
  402. text-align:center;
  403. }
  404.  
  405. .about_popups {
  406. display:inline-block;
  407. width:400px;
  408. max-height:500px;
  409. overflow:auto;
  410. background-color:#fbfbfb;
  411. border:1px solid #e7e7e7;
  412. }
  413.  
  414. .about_photo {
  415. width:400px;
  416. height:140px;
  417. display:block;
  418. }
  419.  
  420. .about_photo img {
  421. width:400px;
  422. height:140px;
  423. }
  424.  
  425. .about_bullets {
  426. padding-bottom:10px;
  427. margin-top:10px;
  428. display:inline-block;
  429. width:300px;
  430. float:left;
  431. font-family:karla;
  432. letter-spacing:1px;
  433. font-weight:bold;
  434. font-size:8px;
  435. text-transform:uppercase;
  436. line-height:16px;
  437. text-align:justify;
  438. }
  439.  
  440. .about_bullets b,strong {
  441. background-color:#e5c4c4;
  442. text-align:justify;
  443. color:#f7f7f7;
  444. padding:5px;
  445. margin-right:5px;
  446. }
  447.  
  448. .about_bullets ul {
  449. list-style-type: circle;
  450. line-height:17px;
  451. text-align:left;
  452. }
  453.  
  454. .about_bullets li {
  455. text-align:left;
  456. width:250px;
  457. display:block;
  458. padding-left: 0px;
  459. margin-bottom: 0px;
  460. list-style: none;
  461. padding-bottom:2px;
  462. margin-bottom:5px;
  463. }
  464.  
  465. .about_bullets li:before {
  466. content: "";
  467. position: absolute;
  468. background-color:#e7e7e7;
  469. height:1px;
  470. width:20px;
  471. margin-top:7px;
  472. margin-left:-20px;
  473. }
  474.  
  475. .about_icons {
  476. float:right;
  477. width:80px;
  478. margin-left:10px;
  479. margin-top:10px;
  480. margin-right:10px;
  481. padding-bottom:10px;
  482. display:inline-block;
  483. }
  484.  
  485. .about_icons img {
  486. margin-bottom:0px;
  487. width:65px;
  488. height:65px;
  489. border-radius:50%;
  490. padding:3px;
  491. border:1px solid #e7e7e7;
  492. -webkit-transition: -webkit-transform .8s ease-in-out;
  493. transition: .8s ease-in-out;
  494. }
  495.  
  496. .about_icons img:hover {
  497. background-color:#fbe0e0;
  498. -webkit-transform: rotate(360deg);
  499. transform: rotate(360deg);
  500. }
  501.  
  502. </style>
  503. </head>
  504.  
  505. <body>
  506.  
  507. <div id="contain">
  508. <div id="contain_mason">
  509.  
  510. <!---------- START OF MUSES ---------->
  511.  
  512. <!--- START OF MUSE ONE --->
  513.  
  514. <div class="main_entry">
  515. <div class="muse">muse name <!--- muse name --->
  516. <div class="muse_etc">faceclaim &mdash; label &mdash; that stuff</div> <!--- label, fc, hometown, depends on what you wanna use the page for! --->
  517. </div>
  518.  
  519. <div class="photo"><img src="https://via.placeholder.com/250x100"></div> <!--- replace with the url for your photo --->
  520.  
  521. <div class="info">
  522. <div class="icon">
  523. <img src="https://via.placeholder.com/55x55"></div> <!--- replace with the url for your photo --->
  524. add as much information as you'd like - it has masonry so it'll flow very nicely. i suggest having enough text here for next to the icon tho. enjoy. don't enjoy. idc. <!--- text next to icon underneath character section --->
  525. </div>
  526.  
  527. <div class="muse_navigation">
  528.  
  529. <a href="#?w=400" rel="one_about" title="ABOUT" class="poplight"><span class="th th-user-o"></span></a> <!--- ABOUT POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  530.  
  531. <a href="#?w=400" rel="one_connect" title="CONNECTIONS" class="poplight"><span class="th th-heart-1-o"></span></a> <!--- CONNECTION POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  532.  
  533. <!--- this is where you'd want to add in your own links!! --->
  534. <a href="/" title="BLOG"><span class="th th-earth-o"></span></a>
  535. <a href="/" title="TAG"><span class="th th-hashtag"></span></a>
  536. <a href="/" title="SPOTIFY"><span class="th th-spotify"></span></a>
  537. <a href="/" title="PINTEREST"><span class="th th-pinterest-o"></span></a>
  538. <!--- icon font is honeybee. if you'd like to change the icons then please visit here: https://honeybee.suiomi.com/ --->
  539. </div>
  540.  
  541. </div>
  542.  
  543. <!--- END OF MUSE ONE --->
  544.  
  545. <!--- START OF MUSE TWO --->
  546.  
  547. <div class="main_entry">
  548. <div class="muse">muse name <!--- muse name --->
  549. <div class="muse_etc">faceclaim &mdash; label &mdash; that stuff</div> <!--- label, fc, hometown, depends on what you wanna use the page for! --->
  550. </div>
  551.  
  552. <div class="photo"><img src="https://via.placeholder.com/250x100"></div> <!--- replace with the url for your photo --->
  553.  
  554. <div class="info">
  555. <div class="icon">
  556. <img src="https://via.placeholder.com/55x55"></div> <!--- replace with the url for your photo --->
  557. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. <!--- text next to icon underneath character section --->
  558. </div>
  559.  
  560. <div class="muse_navigation">
  561.  
  562. <a href="#?w=400" rel="two_about" title="ABOUT" class="poplight"><span class="th th-user-o"></span></a> <!--- ABOUT POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  563.  
  564. <a href="#?w=400" rel="two_connect" title="CONNECTIONS" class="poplight"><span class="th th-heart-1-o"></span></a> <!--- CONNECTION POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  565.  
  566. <!--- this is where you'd want to add in your own links!! --->
  567. <a href="/" title="BLOG"><span class="th th-earth-o"></span></a>
  568. <a href="/" title="TAG"><span class="th th-hashtag"></span></a>
  569. <a href="/" title="SPOTIFY"><span class="th th-spotify"></span></a>
  570. <a href="/" title="PINTEREST"><span class="th th-pinterest-o"></span></a>
  571. <!--- icon font is honeybee. if you'd like to change the icons then please visit here: https://honeybee.suiomi.com/ --->
  572. </div>
  573.  
  574. </div>
  575.  
  576. <!--- END OF MUSE TWO --->
  577.  
  578. <!--- START OF MUSE THREE --->
  579.  
  580. <div class="main_entry">
  581. <div class="muse">muse name <!--- muse name --->
  582. <div class="muse_etc">faceclaim &mdash; label &mdash; that stuff</div> <!--- label, fc, hometown, depends on what you wanna use the page for! --->
  583. </div>
  584.  
  585. <div class="photo"><img src="https://via.placeholder.com/250x100"></div> <!--- replace with the url for your photo --->
  586.  
  587. <div class="info">
  588. <div class="icon">
  589. <img src="https://via.placeholder.com/55x55"></div> <!--- replace with the url for your photo --->
  590. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <!--- text next to icon underneath character section --->
  591. </div>
  592.  
  593. <div class="muse_navigation">
  594.  
  595. <a href="#?w=400" rel="three_about" title="ABOUT" class="poplight"><span class="th th-user-o"></span></a> <!--- ABOUT POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  596.  
  597. <a href="#?w=400" rel="three_connect" title="CONNECTIONS" class="poplight"><span class="th th-heart-1-o"></span></a> <!--- CONNECTION POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  598.  
  599. <!--- this is where you'd want to add in your own links!! --->
  600. <a href="/" title="BLOG"><span class="th th-earth-o"></span></a>
  601. <a href="/" title="TAG"><span class="th th-hashtag"></span></a>
  602. <a href="/" title="SPOTIFY"><span class="th th-spotify"></span></a>
  603. <a href="/" title="PINTEREST"><span class="th th-pinterest-o"></span></a>
  604. <!--- icon font is honeybee. if you'd like to change the icons then please visit here: https://honeybee.suiomi.com/ --->
  605. </div>
  606.  
  607. </div>
  608.  
  609. <!--- END OF MUSE THREE --->
  610.  
  611. <!--- START OF MUSE FOUR --->
  612.  
  613. <div class="main_entry">
  614. <div class="muse">muse name <!--- muse name --->
  615. <div class="muse_etc">faceclaim &mdash; label &mdash; that stuff</div> <!--- label, fc, hometown, depends on what you wanna use the page for! --->
  616. </div>
  617.  
  618. <div class="photo"><img src="https://via.placeholder.com/250x100"></div> <!--- replace with the url for your photo --->
  619.  
  620. <div class="info">
  621. <div class="icon">
  622. <img src="https://via.placeholder.com/55x55"></div> <!--- replace with the url for your photo --->
  623. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. <!--- text next to icon underneath character section --->
  624. </div>
  625.  
  626. <div class="muse_navigation">
  627.  
  628. <a href="#?w=400" rel="four_about" title="ABOUT" class="poplight"><span class="th th-user-o"></span></a> <!--- ABOUT POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  629.  
  630. <a href="#?w=400" rel="four_connect" title="CONNECTIONS" class="poplight"><span class="th th-heart-1-o"></span></a> <!--- CONNECTION POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  631.  
  632. <!--- this is where you'd want to add in your own links!! --->
  633. <a href="/" title="BLOG"><span class="th th-earth-o"></span></a>
  634. <a href="/" title="TAG"><span class="th th-hashtag"></span></a>
  635. <a href="/" title="SPOTIFY"><span class="th th-spotify"></span></a>
  636. <a href="/" title="PINTEREST"><span class="th th-pinterest-o"></span></a>
  637. <!--- icon font is honeybee. if you'd like to change the icons then please visit here: https://honeybee.suiomi.com/ --->
  638. </div>
  639.  
  640. </div>
  641.  
  642. <!--- END OF MUSE FOUR --->
  643.  
  644. <!--- START OF MUSE FIVE --->
  645.  
  646. <div class="main_entry">
  647. <div class="muse">muse name <!--- muse name --->
  648. <div class="muse_etc">faceclaim &mdash; label &mdash; that stuff</div> <!--- label, fc, hometown, depends on what you wanna use the page for! --->
  649. </div>
  650.  
  651. <div class="photo"><img src="https://via.placeholder.com/250x100"></div> <!--- replace with the url for your photo --->
  652.  
  653. <div class="info">
  654. <div class="icon">
  655. <img src="https://via.placeholder.com/55x55"></div> <!--- replace with the url for your photo --->
  656. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat.. <!--- text next to icon underneath character section --->
  657. </div>
  658.  
  659. <div class="muse_navigation">
  660.  
  661. <a href="#?w=400" rel="five_about" title="ABOUT" class="poplight"><span class="th th-user-o"></span></a> <!--- ABOUT POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  662.  
  663. <a href="#?w=400" rel="five_connect" title="CONNECTIONS" class="poplight"><span class="th th-heart-1-o"></span></a> <!--- CONNECTION POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  664.  
  665. <!--- this is where you'd want to add in your own links!! --->
  666. <a href="/" title="BLOG"><span class="th th-earth-o"></span></a>
  667. <a href="/" title="TAG"><span class="th th-hashtag"></span></a>
  668. <a href="/" title="SPOTIFY"><span class="th th-spotify"></span></a>
  669. <a href="/" title="PINTEREST"><span class="th th-pinterest-o"></span></a>
  670. <!--- icon font is honeybee. if you'd like to change the icons then please visit here: https://honeybee.suiomi.com/ --->
  671. </div>
  672.  
  673. </div>
  674.  
  675. <!--- END OF MUSE FIVE --->
  676.  
  677. <!--- START OF MUSE SIX --->
  678.  
  679. <div class="main_entry">
  680. <div class="muse">muse name <!--- muse name --->
  681. <div class="muse_etc">faceclaim &mdash; label &mdash; that stuff</div> <!--- label, fc, hometown, depends on what you wanna use the page for! --->
  682. </div>
  683.  
  684. <div class="photo"><img src="https://via.placeholder.com/250x100"></div> <!--- replace with the url for your photo --->
  685.  
  686. <div class="info">
  687. <div class="icon">
  688. <img src="https://via.placeholder.com/55x55"></div> <!--- replace with the url for your photo --->
  689. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <!--- text next to icon underneath character section --->
  690. </div>
  691.  
  692. <div class="muse_navigation">
  693.  
  694. <a href="#?w=400" rel="six_about" title="ABOUT" class="poplight"><span class="th th-user-o"></span></a> <!--- ABOUT POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  695.  
  696. <a href="#?w=400" rel="six_connect" title="CONNECTIONS" class="poplight"><span class="th th-heart-1-o"></span></a> <!--- CONNECTION POP-UP. UNLESS REMOVING PLEASE DO NOT TOUCH. --->
  697.  
  698. <!--- this is where you'd want to add in your own links!! --->
  699. <a href="/" title="BLOG"><span class="th th-earth-o"></span></a>
  700. <a href="/" title="TAG"><span class="th th-hashtag"></span></a>
  701. <a href="/" title="SPOTIFY"><span class="th th-spotify"></span></a>
  702. <a href="/" title="PINTEREST"><span class="th th-pinterest-o"></span></a>
  703. <!--- icon font is honeybee. if you'd like to change the icons then please visit here: https://honeybee.suiomi.com/ --->
  704. </div>
  705.  
  706. </div>
  707.  
  708. <!--- END OF MUSE SIX --->
  709.  
  710.  
  711. <!---- ADDING ADDITIONAL MUSES
  712.  
  713. to add additional muses, all you need to do is copy and paste any of the above coding from START OF to END OF. after that, you need to find where it says NUMBER_about and NUMBER_connect (for example, six_about or six_connect) and change it to the next number. for example, when installing, the next number would be seven.
  714.  
  715. please remember the number you're changing it to because you'll need that to add pop-ups!!
  716.  
  717. V V V V V V V
  718.  
  719. SEE END OF POP-UP SECTION FOR DETAILS ON ADDING POP-UPS
  720.  
  721. ---->
  722.  
  723. <!---------- END OF MUSES ---------->
  724. </div></div>
  725.  
  726. <div id="bottom">
  727. <div id="bottom_navigation">
  728. <a href="/" title="INDEX"><span class="th th-home-o"></span></a>
  729. <a href="/ask" title="MESSAGE"><span class="th th-chat-bubbles"></span></a>
  730. <a href="/archive" title="ARCHIVE"><span class="th th-calendar-1-o"></span></a>
  731. <a href="/" title="BIOGRAPHY"><span class="th th-star-o"></span></a>
  732. </div>
  733. <div id="bottom_credit">
  734. <a href="https://scftlcves.tumblr.com" title="THEME CREDIT"><span class="th th-heart-1-o"></span></a>
  735. </div>
  736. </div>
  737.  
  738. </body>
  739.  
  740.  
  741. <!----- START OF MUSE ONE POP-UPS ----->
  742.  
  743. <!---- START OF CONNECTIONS POP-UP ---->
  744.  
  745. <!--------
  746.  
  747. IMPORTANT INFORMATION FOR CONNECTIONS POP-UP
  748.  
  749. - you can have as much information in the connections as you'd like.
  750. - you can add as many connections as you'd like.
  751. - to add additional connections outside of the four that are there when you install, all you need to do is go to the last connection (connection four, in this case) and copy and paste from start of connection four to end of connection four.
  752.  
  753. -------->
  754.  
  755. <div id="one_connect" class="popup_block">
  756. <div id="connect_popup">
  757.  
  758. <div class="connect_popups">
  759.  
  760. <!-- start of connection one -->
  761.  
  762. <div class="connect_section">
  763.  
  764. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  765. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  766.  
  767. <!-- connection info / replace with connection description, a quote, whatever. -->
  768.  
  769. <div class="connect_info">
  770. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  771. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!</b>
  772. </div>
  773. </div>
  774.  
  775. <!-- end of connection one -->
  776.  
  777. <!-- start of connection two -->
  778.  
  779. <div class="connect_section">
  780.  
  781. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  782. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  783.  
  784. <!-- connection info / replace with connection description, a quote, whatever. -->
  785.  
  786. <div class="connect_info">
  787. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  788. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!</b>
  789. </div>
  790. </div>
  791.  
  792. <!-- end of connection two -->
  793.  
  794. <!-- start of connection three -->
  795.  
  796. <div class="connect_section">
  797.  
  798. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  799. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  800.  
  801. <!-- connection info / replace with connection description, a quote, whatever. -->
  802.  
  803. <div class="connect_info">
  804. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  805. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!
  806. </div>
  807. </div>
  808.  
  809. <!-- end of connection three -->
  810.  
  811. <!-- start of connection four -->
  812.  
  813. <div class="connect_section">
  814.  
  815. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  816. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  817.  
  818. <!-- connection info / replace with connection description, a quote, whatever. -->
  819.  
  820. <div class="connect_info">
  821. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  822. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!
  823. </div>
  824. </div>
  825.  
  826. <!-- end of connection four -->
  827.  
  828.  
  829. <!---- END OF CONNECTIONS POP-UP ---->
  830.  
  831. </div></div></div>
  832.  
  833. <!---- START OF ABOUT POP-UP ---->
  834.  
  835.  
  836.  
  837. <div id="one_about" class="popup_block">
  838. <div id="about_popup">
  839. <div class="about_popups">
  840.  
  841. <!-- about photo / replace with url of muse, aesthetic, remove it, etc -->
  842. <div class="about_photo"><img src="https://via.placeholder.com/400x140"></div>
  843.  
  844. <!-- about bullets / bulleted style list for muse information -->
  845. <div class="about_bullets">
  846. <ul>
  847. <li><b>NAME:</b> this is a bullet!
  848. <li><b>DOB:</b> this is another bullet!
  849. <li><b>ZODIAC:</b> another bullet
  850. <li><b>HOMETOWN:</b> keep them at one line pls
  851. <li><b>POSITIVES:</b> it'll look really bad
  852. <li><b>NEGATIVES</b> six is the max amount!!
  853. </ul>
  854. </div>
  855.  
  856. <!-- about icons / replace with url of mumse, aesthetic, etc -->
  857.  
  858. <div class="about_icons">
  859. <img src="https://via.placeholder.com/65x65"> <!---- icon one ---->
  860. <img src="https://via.placeholder.com/65x65"> <!---- icon two ---->
  861. </div>
  862.  
  863.  
  864. <!---- END OF ABOUT POP-UP ---->
  865.  
  866. </div></div></div>
  867.  
  868. <!------ END OF MUSE ONE POP-UPS ----->
  869.  
  870. <!----- START OF MUSE TWO POP-UPS ----->
  871.  
  872. <!---- START OF CONNECTIONS POP-UP ---->
  873.  
  874. <!--------
  875.  
  876. IMPORTANT INFORMATION FOR CONNECTIONS POP-UP
  877.  
  878. - you can have as much information in the connections as you'd like.
  879. - you can add as many connections as you'd like.
  880. - to add additional connections outside of the four that are there when you install, all you need to do is go to the last connection (connection four, in this case) and copy and paste from start of connection four to end of connection four.
  881.  
  882. -------->
  883.  
  884. <div id="two_connect" class="popup_block">
  885. <div id="connect_popup">
  886.  
  887. <div class="connect_popups">
  888.  
  889. <!-- start of connection one -->
  890.  
  891. <div class="connect_section">
  892.  
  893. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  894. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  895.  
  896. <!-- connection info / replace with connection description, a quote, whatever. -->
  897.  
  898. <div class="connect_info">
  899. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  900. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!</b>
  901. </div>
  902. </div>
  903.  
  904. <!-- end of connection one -->
  905.  
  906. <!-- start of connection two -->
  907.  
  908. <div class="connect_section">
  909.  
  910. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  911. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  912.  
  913. <!-- connection info / replace with connection description, a quote, whatever. -->
  914.  
  915. <div class="connect_info">
  916. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  917. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!</b>
  918. </div>
  919. </div>
  920.  
  921. <!-- end of connection two -->
  922.  
  923. <!-- start of connection three -->
  924.  
  925. <div class="connect_section">
  926.  
  927. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  928. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  929.  
  930. <!-- connection info / replace with connection description, a quote, whatever. -->
  931.  
  932. <div class="connect_info">
  933. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  934. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!
  935. </div>
  936. </div>
  937.  
  938. <!-- end of connection three -->
  939.  
  940. <!-- start of connection four -->
  941.  
  942. <div class="connect_section">
  943.  
  944. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  945. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  946.  
  947. <!-- connection info / replace with connection description, a quote, whatever. -->
  948.  
  949. <div class="connect_info">
  950. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  951. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!
  952. </div>
  953. </div>
  954.  
  955. <!-- end of connection four -->
  956.  
  957.  
  958. <!---- END OF CONNECTIONS POP-UP ---->
  959.  
  960. </div></div></div>
  961.  
  962.  
  963. <!---- START OF ABOUT POP-UP ---->
  964.  
  965.  
  966.  
  967. <div id="two_about" class="popup_block">
  968. <div id="about_popup">
  969. <div class="about_popups">
  970.  
  971. <!-- about photo / replace with url of muse, aesthetic, remove it, etc -->
  972. <div class="about_photo"><img src="https://via.placeholder.com/400x140"></div>
  973.  
  974. <!-- about bullets / bulleted style list for muse information -->
  975. <div class="about_bullets">
  976. <ul>
  977. <li><b>NAME:</b> this is a bullet!
  978. <li><b>DOB:</b> this is another bullet!
  979. <li><b>ZODIAC:</b> another bullet
  980. <li><b>HOMETOWN:</b> keep them at one line pls
  981. <li><b>POSITIVES:</b> it'll look really bad
  982. <li><b>NEGATIVES</b> six is the max amount!!
  983. </ul>
  984. </div>
  985.  
  986. <!-- about icons / replace with url of mumse, aesthetic, etc -->
  987.  
  988. <div class="about_icons">
  989. <img src="https://via.placeholder.com/65x65"> <!---- icon one ---->
  990. <img src="https://via.placeholder.com/65x65"> <!---- icon two ---->
  991. </div>
  992.  
  993.  
  994. <!---- END OF ABOUT POP-UP ---->
  995.  
  996. </div></div></div>
  997.  
  998. <!------ END OF MUSE TWO POP-UPS ----->
  999.  
  1000. <!----- START OF MUSE THREE POP-UPS ----->
  1001.  
  1002. <!---- START OF CONNECTIONS POP-UP ---->
  1003.  
  1004. <!--------
  1005.  
  1006. IMPORTANT INFORMATION FOR CONNECTIONS POP-UP
  1007.  
  1008. - you can have as much information in the connections as you'd like.
  1009. - you can add as many connections as you'd like.
  1010. - to add additional connections outside of the four that are there when you install, all you need to do is go to the last connection (connection four, in this case) and copy and paste from start of connection four to end of connection four.
  1011.  
  1012. -------->
  1013.  
  1014. <div id="three_connect" class="popup_block">
  1015. <div id="connect_popup">
  1016.  
  1017. <div class="connect_popups">
  1018.  
  1019. <!-- start of connection one -->
  1020.  
  1021. <div class="connect_section">
  1022.  
  1023. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1024. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1025.  
  1026. <!-- connection info / replace with connection description, a quote, whatever. -->
  1027.  
  1028. <div class="connect_info">
  1029. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1030. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!</b>
  1031. </div>
  1032. </div>
  1033.  
  1034. <!-- end of connection one -->
  1035.  
  1036. <!-- start of connection two -->
  1037.  
  1038. <div class="connect_section">
  1039.  
  1040. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1041. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1042.  
  1043. <!-- connection info / replace with connection description, a quote, whatever. -->
  1044.  
  1045. <div class="connect_info">
  1046. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1047. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!</b>
  1048. </div>
  1049. </div>
  1050.  
  1051. <!-- end of connection two -->
  1052.  
  1053. <!-- start of connection three -->
  1054.  
  1055. <div class="connect_section">
  1056.  
  1057. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1058. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1059.  
  1060. <!-- connection info / replace with connection description, a quote, whatever. -->
  1061.  
  1062. <div class="connect_info">
  1063. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1064. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!
  1065. </div>
  1066. </div>
  1067.  
  1068. <!-- end of connection three -->
  1069.  
  1070. <!-- start of connection four -->
  1071.  
  1072. <div class="connect_section">
  1073.  
  1074. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1075. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1076.  
  1077. <!-- connection info / replace with connection description, a quote, whatever. -->
  1078.  
  1079. <div class="connect_info">
  1080. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1081. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!
  1082. </div>
  1083. </div>
  1084.  
  1085. <!-- end of connection four -->
  1086.  
  1087.  
  1088. <!---- END OF CONNECTIONS POP-UP ---->
  1089.  
  1090. </div></div></div>
  1091.  
  1092.  
  1093. <!---- START OF ABOUT POP-UP ---->
  1094.  
  1095.  
  1096.  
  1097. <div id="three_about" class="popup_block">
  1098. <div id="about_popup">
  1099. <div class="about_popups">
  1100.  
  1101. <!-- about photo / replace with url of muse, aesthetic, remove it, etc -->
  1102. <div class="about_photo"><img src="https://via.placeholder.com/400x140"></div>
  1103.  
  1104. <!-- about bullets / bulleted style list for muse information -->
  1105. <div class="about_bullets">
  1106. <ul>
  1107. <li><b>NAME:</b> this is a bullet!
  1108. <li><b>DOB:</b> this is another bullet!
  1109. <li><b>ZODIAC:</b> another bullet
  1110. <li><b>HOMETOWN:</b> keep them at one line pls
  1111. <li><b>POSITIVES:</b> it'll look really bad
  1112. <li><b>NEGATIVES</b> six is the max amount!!
  1113. </ul>
  1114. </div>
  1115.  
  1116. <!-- about icons / replace with url of mumse, aesthetic, etc -->
  1117.  
  1118. <div class="about_icons">
  1119. <img src="https://via.placeholder.com/65x65"> <!---- icon one ---->
  1120. <img src="https://via.placeholder.com/65x65"> <!---- icon two ---->
  1121. </div>
  1122.  
  1123.  
  1124. <!---- END OF ABOUT POP-UP ---->
  1125.  
  1126. </div></div></div>
  1127.  
  1128. <!------ END OF MUSE THREE POP-UPS ----->
  1129.  
  1130. <!----- START OF MUSE FOUR POP-UPS ----->
  1131.  
  1132. <!---- START OF CONNECTIONS POP-UP ---->
  1133.  
  1134. <!--------
  1135.  
  1136. IMPORTANT INFORMATION FOR CONNECTIONS POP-UP
  1137.  
  1138. - you can have as much information in the connections as you'd like.
  1139. - you can add as many connections as you'd like.
  1140. - to add additional connections outside of the four that are there when you install, all you need to do is go to the last connection (connection four, in this case) and copy and paste from start of connection four to end of connection four.
  1141.  
  1142. -------->
  1143.  
  1144. <div id="four_connect" class="popup_block">
  1145. <div id="connect_popup">
  1146.  
  1147. <div class="connect_popups">
  1148.  
  1149. <!-- start of connection one -->
  1150.  
  1151. <div class="connect_section">
  1152.  
  1153. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1154. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1155.  
  1156. <!-- connection info / replace with connection description, a quote, whatever. -->
  1157.  
  1158. <div class="connect_info">
  1159. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1160. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!</b>
  1161. </div>
  1162. </div>
  1163.  
  1164. <!-- end of connection one -->
  1165.  
  1166. <!-- start of connection two -->
  1167.  
  1168. <div class="connect_section">
  1169.  
  1170. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1171. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1172.  
  1173. <!-- connection info / replace with connection description, a quote, whatever. -->
  1174.  
  1175. <div class="connect_info">
  1176. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1177. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!</b>
  1178. </div>
  1179. </div>
  1180.  
  1181. <!-- end of connection two -->
  1182.  
  1183. <!-- start of connection three -->
  1184.  
  1185. <div class="connect_section">
  1186.  
  1187. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1188. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1189.  
  1190. <!-- connection info / replace with connection description, a quote, whatever. -->
  1191.  
  1192. <div class="connect_info">
  1193. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1194. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!
  1195. </div>
  1196. </div>
  1197.  
  1198. <!-- end of connection three -->
  1199.  
  1200. <!-- start of connection four -->
  1201.  
  1202. <div class="connect_section">
  1203.  
  1204. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1205. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1206.  
  1207. <!-- connection info / replace with connection description, a quote, whatever. -->
  1208.  
  1209. <div class="connect_info">
  1210. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1211. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!
  1212. </div>
  1213. </div>
  1214.  
  1215. <!-- end of connection four -->
  1216.  
  1217. <!---- END OF CONNECTIONS POP-UP ---->
  1218.  
  1219. </div></div></div>
  1220.  
  1221. <!---- START OF ABOUT POP-UP ---->
  1222.  
  1223.  
  1224.  
  1225. <div id="four_about" class="popup_block">
  1226. <div id="about_popup">
  1227. <div class="about_popups">
  1228.  
  1229. <!-- about photo / replace with url of muse, aesthetic, remove it, etc -->
  1230. <div class="about_photo"><img src="https://via.placeholder.com/400x140"></div>
  1231.  
  1232. <!-- about bullets / bulleted style list for muse information -->
  1233. <div class="about_bullets">
  1234. <ul>
  1235. <li><b>NAME:</b> this is a bullet!
  1236. <li><b>DOB:</b> this is another bullet!
  1237. <li><b>ZODIAC:</b> another bullet
  1238. <li><b>HOMETOWN:</b> keep them at one line pls
  1239. <li><b>POSITIVES:</b> it'll look really bad
  1240. <li><b>NEGATIVES</b> six is the max amount!!
  1241. </ul>
  1242. </div>
  1243.  
  1244. <!-- about icons / replace with url of mumse, aesthetic, etc -->
  1245.  
  1246. <div class="about_icons">
  1247. <img src="https://via.placeholder.com/65x65"> <!---- icon one ---->
  1248. <img src="https://via.placeholder.com/65x65"> <!---- icon two ---->
  1249. </div>
  1250.  
  1251.  
  1252. <!---- END OF ABOUT POP-UP ---->
  1253.  
  1254. </div></div></div>
  1255.  
  1256. <!------ END OF MUSE FOUR POP-UPS ----->
  1257.  
  1258. <!----- START OF MUSE FIVE POP-UPS ----->
  1259.  
  1260. <!---- START OF CONNECTIONS POP-UP ---->
  1261.  
  1262. <!--------
  1263.  
  1264. IMPORTANT INFORMATION FOR CONNECTIONS POP-UP
  1265.  
  1266. - you can have as much information in the connections as you'd like.
  1267. - you can add as many connections as you'd like.
  1268. - to add additional connections outside of the four that are there when you install, all you need to do is go to the last connection (connection four, in this case) and copy and paste from start of connection four to end of connection four.
  1269.  
  1270. -------->
  1271.  
  1272. <div id="five_connect" class="popup_block">
  1273. <div id="connect_popup">
  1274.  
  1275. <div class="connect_popups">
  1276.  
  1277. <!-- start of connection one -->
  1278.  
  1279. <div class="connect_section">
  1280.  
  1281. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1282. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1283.  
  1284. <!-- connection info / replace with connection description, a quote, whatever. -->
  1285.  
  1286. <div class="connect_info">
  1287. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1288. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!</b>
  1289. </div>
  1290. </div>
  1291.  
  1292. <!-- end of connection one -->
  1293.  
  1294. <!-- start of connection two -->
  1295.  
  1296. <div class="connect_section">
  1297.  
  1298. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1299. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1300.  
  1301. <!-- connection info / replace with connection description, a quote, whatever. -->
  1302.  
  1303. <div class="connect_info">
  1304. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1305. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!</b>
  1306. </div>
  1307. </div>
  1308.  
  1309. <!-- end of connection two -->
  1310.  
  1311. <!-- start of connection three -->
  1312.  
  1313. <div class="connect_section">
  1314.  
  1315. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1316. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1317.  
  1318. <!-- connection info / replace with connection description, a quote, whatever. -->
  1319.  
  1320. <div class="connect_info">
  1321. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1322. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!
  1323. </div>
  1324. </div>
  1325.  
  1326. <!-- end of connection three -->
  1327.  
  1328. <!-- start of connection four -->
  1329.  
  1330. <div class="connect_section">
  1331.  
  1332. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1333. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1334.  
  1335. <!-- connection info / replace with connection description, a quote, whatever. -->
  1336.  
  1337. <div class="connect_info">
  1338. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1339. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!
  1340. </div>
  1341. </div>
  1342.  
  1343. <!-- end of connection four -->
  1344.  
  1345.  
  1346. <!---- END OF CONNECTIONS POP-UP ---->
  1347.  
  1348. </div></div></div>
  1349.  
  1350. <!---- START OF ABOUT POP-UP ---->
  1351.  
  1352.  
  1353.  
  1354. <div id="five_about" class="popup_block">
  1355. <div id="about_popup">
  1356. <div class="about_popups">
  1357.  
  1358. <!-- about photo / replace with url of muse, aesthetic, remove it, etc -->
  1359. <div class="about_photo"><img src="https://via.placeholder.com/400x140"></div>
  1360.  
  1361. <!-- about bullets / bulleted style list for muse information -->
  1362. <div class="about_bullets">
  1363. <ul>
  1364. <li><b>NAME:</b> this is a bullet!
  1365. <li><b>DOB:</b> this is another bullet!
  1366. <li><b>ZODIAC:</b> another bullet
  1367. <li><b>HOMETOWN:</b> keep them at one line pls
  1368. <li><b>POSITIVES:</b> it'll look really bad
  1369. <li><b>NEGATIVES</b> six is the max amount!!
  1370. </ul>
  1371. </div>
  1372.  
  1373. <!-- about icons / replace with url of mumse, aesthetic, etc -->
  1374.  
  1375. <div class="about_icons">
  1376. <img src="https://via.placeholder.com/65x65"> <!---- icon one ---->
  1377. <img src="https://via.placeholder.com/65x65"> <!---- icon two ---->
  1378. </div>
  1379.  
  1380.  
  1381. <!---- END OF ABOUT POP-UP ---->
  1382.  
  1383. </div></div></div>
  1384.  
  1385. <!------ END OF MUSE FIVE POP-UPS ----->
  1386.  
  1387. <!----- START OF MUSE SIX POP-UPS ----->
  1388.  
  1389. <!---- START OF CONNECTIONS POP-UP ---->
  1390.  
  1391. <!--------
  1392.  
  1393. IMPORTANT INFORMATION FOR CONNECTIONS POP-UP
  1394.  
  1395. - you can have as much information in the connections as you'd like.
  1396. - you can add as many connections as you'd like.
  1397. - to add additional connections outside of the four that are there when you install, all you need to do is go to the last connection (connection four, in this case) and copy and paste from start of connection four to end of connection four.
  1398.  
  1399. -------->
  1400.  
  1401. <div id="six_connect" class="popup_block">
  1402. <div id="connect_popup">
  1403.  
  1404. <div class="connect_popups">
  1405.  
  1406. <!-- start of connection one -->
  1407.  
  1408. <div class="connect_section">
  1409.  
  1410. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1411. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1412.  
  1413. <!-- connection info / replace with connection description, a quote, whatever. -->
  1414.  
  1415. <div class="connect_info">
  1416. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1417. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!</b>
  1418. </div>
  1419. </div>
  1420.  
  1421. <!-- end of connection one -->
  1422.  
  1423. <!-- start of connection two -->
  1424.  
  1425. <div class="connect_section">
  1426.  
  1427. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1428. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1429.  
  1430. <!-- connection info / replace with connection description, a quote, whatever. -->
  1431.  
  1432. <div class="connect_info">
  1433. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1434. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!</b>
  1435. </div>
  1436. </div>
  1437.  
  1438. <!-- end of connection two -->
  1439.  
  1440. <!-- start of connection three -->
  1441.  
  1442. <div class="connect_section">
  1443.  
  1444. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1445. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1446.  
  1447. <!-- connection info / replace with connection description, a quote, whatever. -->
  1448.  
  1449. <div class="connect_info">
  1450. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1451. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!! you can add as many connections as you'd like!
  1452. </div>
  1453. </div>
  1454.  
  1455. <!-- end of connection three -->
  1456.  
  1457. <!-- start of connection four -->
  1458.  
  1459. <div class="connect_section">
  1460.  
  1461. <!-- connection photo / replace with url of other muse, aesthetic, etc -->
  1462. <div class="connect_photo"><img src="https://via.placeholder.com/120x90"></div>
  1463.  
  1464. <!-- connection info / replace with connection description, a quote, whatever. -->
  1465.  
  1466. <div class="connect_info">
  1467. <imp>this is a connection</imp> <!--- coded with having the connection or muse name in mind, but use for whatever you want! --->
  1468. this is your connection space. it <b>will</b> eventually scroll for you, so you don't have to worry about a thing!!!
  1469. </div>
  1470. </div>
  1471.  
  1472. <!-- end of connection four -->
  1473.  
  1474.  
  1475. <!---- END OF CONNECTIONS POP-UP ---->
  1476.  
  1477. </div></div></div>
  1478.  
  1479. <!---- START OF ABOUT POP-UP ---->
  1480.  
  1481.  
  1482.  
  1483. <div id="six_about" class="popup_block">
  1484. <div id="about_popup">
  1485. <div class="about_popups">
  1486.  
  1487. <!-- about photo / replace with url of muse, aesthetic, remove it, etc -->
  1488. <div class="about_photo"><img src="https://via.placeholder.com/400x140"></div>
  1489.  
  1490. <!-- about bullets / bulleted style list for muse information -->
  1491. <div class="about_bullets">
  1492. <ul>
  1493. <li><b>NAME:</b> this is a bullet!
  1494. <li><b>DOB:</b> this is another bullet!
  1495. <li><b>ZODIAC:</b> another bullet
  1496. <li><b>HOMETOWN:</b> keep them at one line pls
  1497. <li><b>POSITIVES:</b> it'll look really bad
  1498. <li><b>NEGATIVES</b> six is the max amount!!
  1499. </ul>
  1500. </div>
  1501.  
  1502. <!-- about icons / replace with url of mumse, aesthetic, etc -->
  1503.  
  1504. <div class="about_icons">
  1505. <img src="https://via.placeholder.com/65x65"> <!---- icon one ---->
  1506. <img src="https://via.placeholder.com/65x65"> <!---- icon two ---->
  1507. </div>
  1508.  
  1509.  
  1510. <!---- END OF ABOUT POP-UP ---->
  1511.  
  1512. </div></div></div>
  1513.  
  1514. <!------ END OF MUSE SIX POP-UPS ----->
  1515.  
  1516.  
  1517. <!---- TO ADD MORE POP-UPS FOR MUSES ADDED
  1518.  
  1519. you need to copy and paste the entire section of coding for each muse from START OF MUSE NUMBER POP-UPS to END OF MUSE NUMBER POP-UPS. i suggest going from six and using that, so copy from START OF MUSE SIX POP-UPS to END OF MUSE SIX POP-UPS and paste it above where it says END OF MUSE SIX POP-UPS and repeat however many times you want!
  1520.  
  1521. after that, you need to change the number of the following:
  1522.  
  1523. <div id="six_connect" class="popup_block">
  1524. <div id="six_about" class="popup_block">
  1525.  
  1526. so, you'd want to change these to WHAT YOU CHANGED ABOVE WHEN ADDING ADDITIONAL MUSES. i suggest going in numerical order, so the next would be seven!
  1527.  
  1528. ---->
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!