API tools faq
paste
Advertisement
todekus

#01 MUSE PAGE — Base (v02)

todekus
Mar 4th, 2019
737
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 181.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-- ・‥ ━━━━━━━ CREDITS ━━━━━━━ ‥・ ☆
  5.  
  6.  
  7. @YONGQLN
  8. ///// BASE — PAGE 001 /////
  9.  
  10.  
  11. POPUP WINDOW @acuite
  12. ICONS @suiomi / @fontawesome / @simplelineicons
  13.  
  14.  
  15. ☾ ・‥ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ‥・ -->
  16.  
  17.  
  18.  
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24. <meta charset="utf-8">
  25. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  26.  
  27.  
  28.  
  29. <!-- ・・・・・・ F O N T S ・・・・・・ -->
  30.  
  31. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Lato:100,100i,300,300i,400,400i,700,900|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,700,800,900|Open+Sans:300,300i,400,400i,600,700,800|Roboto+Condensed:300,300i,400,400i,700|Roboto:100,100i,300,300i,400,500,700,900|Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,900|ABeeZee:400,400i" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Playfair+Display+SC:400,400i,700,700i,900,900i|Playfair+Display:400,400i,700,700i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  34.  
  35. <link href="https://fonts.googleapis.com/css?family=Cutive+Mono|Inconsolata|Roboto+Mono" rel="stylesheet">
  36.  
  37. <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Domine|Roboto+Slab" rel="stylesheet">
  38.  
  39. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"> <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  40.  
  41. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  42.  
  43. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  44.  
  45. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  46.  
  47.  
  48. <!-- ・‥ ━━━━━━━━━ ☆ TOOLTIP ☆ ━━━━━━━━━ ‥・ -->
  49.  
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  51.  
  52. <script>
  53. (function($){$(document).ready(function() {$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:40,tip_fade_speed:100,attribute:"title"});});})(jQuery);
  54. </script>
  55.  
  56. <!-- ・‥ ━━━━━━━━━ ☆ POPUP @ACUITE ☆ ━━━━━━━━━ ‥・ -->
  57. <script type="text/javascript"
  58. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  59. <script>
  60. $(document).ready(function() {
  61. //
  62. $('a.poplight[href^=#]').click(function() {
  63. var popID = $(this).attr('rel'); //Get Popup Name
  64. var popURL = $(this).attr('href'); //Get Popup href to define size
  65. var query= popURL.split('?');
  66. var dim= query[1].split('&');
  67. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  68. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  69. var popMargTop = ($('#' + popID).height() + 80) / 2;
  70. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  71. //Apply Margin to Popup
  72. $('#' + popID).css({
  73. 'margin-top' : -popMargTop,
  74. 'margin-left' : -popMargLeft
  75. });
  76. $('body').append('<div id="fade"></div>');
  77. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  78. return false;
  79. });
  80. $('a.close, #fade').live('click', function() {
  81. $('#fade , .popup_block').fadeOut(function() {
  82. $('#fade, a.close').remove(); //fade them both out
  83. });
  84. return false;
  85. });
  86. });
  87. </script>
  88.  
  89. </head>
  90. <style type="text/css">
  91.  
  92.  
  93. /* ◦ ◠ SCROLLBAR ◞ ◦ */
  94.  
  95. ::-webkit-scrollbar, ::-webkit-scrollbar-track,
  96. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
  97. width: 0px!important; background: transparent!important; }
  98.  
  99.  
  100. /* ◦ ◠ BODY ◞ ◦ */
  101.  
  102. html, body {
  103. width:100%;
  104. background:#d6d1cf; /* BACKGROUND COLOR */
  105. box-sizing: border-box; margin:0;
  106. color:#000;
  107. font: .8em 'Karla';
  108. -webkit-font-smoothing: antialiased;
  109. -moz-osx-font-smoothing: grayscale;
  110. text-rendering: auto;
  111. -webkit-font-smoothing: antialiased; }
  112.  
  113. /* ◦ ◠ BASICS ◞ ◦ */
  114.  
  115. a {
  116. text-decoration:none;
  117. color:#a8968d; /* LINKS COLOR */ }
  118.  
  119. a:hover {
  120. text-decoration:none; border:none;
  121. color:#000; /* LINKS HOVER COLOR */ }
  122.  
  123. ::selection { background:#a8968d; /* SELECTION BACKGROUND COLOR */ }
  124.  
  125. li, ul { list-style:none!important; }
  126.  
  127.  
  128. /* ◦ ◠ TOOLTIP ◞ ◦ */
  129. #s-m-t-tooltip {
  130. width:auto; max-width:300px;
  131. background: rgba(251, 251, 251, .8); /* TOOLTIP BACKGROUND COLOR */
  132. padding:5px 10px; margin:25px 0 5px -15px;
  133. position:absolute; z-index:calc(9*99999);
  134.  
  135. color:#000; /* TOOLTIP TEXT COLOR */
  136. font: .8em 'Karla'; word-break:break-word;
  137. text-transform:uppercase; text-align:justify;
  138.  
  139. border:1px solid rgba(186, 186, 186, .1); /* TOOLTIP BORDER COLOR */ }
  140.  
  141.  
  142.  
  143. /* ◦ ◠ CONTAINER ◞ ◦ */
  144.  
  145. #container {
  146. width:870px; height:600px;
  147. background:#eaeaea; /* CONTAINER BACKGROUND COLOR */
  148. padding:10px 0;
  149. margin:auto auto; overflow:hidden;
  150. position:absolute;
  151. top:0; right:0; bottom:0; left:0;
  152.  
  153. border-radius:3px;
  154. border-top:10px solid #eaeaea; /* CONTAINER BORDER COLOR */
  155. border-bottom:10px solid #eaeaea; /* CONTAINER BORDER COLOR */ }
  156.  
  157.  
  158.  
  159. /* ◦ ◠ UPPERBAR ◞ ◦ */
  160. .upperbar {
  161. width:100%; height:55px;
  162. background:#eaeaea; /* UPPERBAR BACKGROUND */
  163. padding:10px 20px; overflow:hidden; }
  164.  
  165.  
  166. /* ◦ ◠ ( UPPERBAR ) TITLE ◞ ◦ */
  167. .up_title {
  168. margin:-25px 10px; overflow:hidden;
  169. display:inline-block; float:left;
  170. vertical-align:middle; }
  171.  
  172. .up_title h1 {
  173. color:#111111; /** TITLE COLOR **/
  174. font: 700 1.4em 'Open Sans';
  175. text-transform:uppercase; letter-spacing:2px;
  176. padding:3px 0; display:inline-block;
  177. vertical-align:top; margin-right:20px;
  178. /** UPPERBAR TITLE BORDER COLOR **/
  179. border-bottom:2px solid #111111; }
  180.  
  181. .up_title h2 {
  182. color:#494949; /** DESC / SUB COLOR **/
  183. font: normal 0.9em/15px 'Open Sans';
  184. text-align:justify;
  185. width:200px; height:33px;
  186. margin:20px 0; overflow:hidden;
  187. display:inline-block; vertical-align:middle; }
  188.  
  189.  
  190. /* ◦ ◠ ( UPPERBAR ) LINKS ◞ ◦ */
  191. .up_links {
  192. width:300px; height:60px;
  193. padding:0; overflow:hidden;
  194. margin:0 -20px 0 0;
  195. display:inline-block; float:right; }
  196.  
  197.  
  198. .up_links li a {
  199. color:#777777; /* LINK COLOR */ }
  200.  
  201. .up_links li a b {
  202. color:#a59a93; /* NUMBER COLOR */ }
  203.  
  204. .up_links li {
  205. font: 600 0.8em 'Roboto';
  206. text-transform:uppercase; text-align:justify;
  207. letter-spacing:2px; overflow:hidden;
  208.  
  209. width:100px;
  210. margin:0 5px; display:inline-block; }
  211.  
  212. .up_links li b {
  213. font: bold 1.2em 'Cutive Mono';
  214. margin:0 3px; }
  215.  
  216.  
  217.  
  218. /* ◦ ◠ MAIN ◞ ◦ */
  219. .main {
  220. width:100%; height:430px;
  221. background:#938f8d; /* BACKGROUND */
  222. background-image:url('https://via.placeholder.com/870x430'); /* IMAGE */
  223. overflow:hidden; }
  224.  
  225.  
  226. /* ◦ ◠ ( MAIN ) MUSE TAB ◞ ◦ */
  227. .content {
  228. width:100%; height:430px;
  229. background:#e2e0de; /* BACKGROUND */
  230. display:none; overflow:hidden;
  231. position:absolute; z-index:calc(9*999); }
  232.  
  233. .leftie, .m_links, .rightie { display:inline-block; }
  234. .rightie { float:right; }
  235.  
  236. /* ◦ ◠ ( MUSE ) HEADER ◞ ◦ */
  237. .m_header {
  238. width:450px; height:110px;
  239. background:#e0dede; /* BACKGROUND */
  240. padding:5px 20px; overflow:hidden; }
  241.  
  242. .m_header h1 {
  243. color:#63605e; /* LABEL COLOR */
  244. font: 400 0.9em 'Roboto';
  245. text-transform:uppercase;
  246. letter-spacing:1px;
  247. margin:10px 0 -20px 0; }
  248.  
  249. .m_header h2 {
  250. color:#ada19d; /* NAME COLOR */
  251. font: 600 2.8em 'Playfair Display';
  252. text-transform:uppercase;
  253. margin:15px 0 0 0; }
  254.  
  255. .m_header p {
  256. color:#4c4c4c; /* QUOTE COLOR */
  257. font: normal 1em/20px 'Libre Baskerville';
  258. text-align:justify; letter-spacing:1px; }
  259.  
  260. /* ◦ ◠ ( MUSE ) BIOGRAPHY ◞ ◦ */
  261. .m_biography {
  262. width:450px; height:185px;
  263. padding:0; overflow:auto; }
  264.  
  265. /* ◦ ◠ ( BIOGRAPHY ) DEJABOO VER. ◞ ◦ */
  266. .b_dejaboo {
  267. width:450px;
  268. padding:0; margin:0 0 5px 0; }
  269.  
  270. .b_dejaboo p {
  271. color:#191919; /* TEXT COLOR */
  272. font: normal 1em/20px 'AbeeZee';
  273. text-align:justify;
  274.  
  275. width:450px;
  276. background:#d8d5d4; /* BACKGROUND */
  277. padding:15px 30px; margin:0 0 2px 0; }
  278.  
  279. .b_dejaboo tt {
  280. color:#a09b9a; /* TELETYPE COLOR */
  281. font: 500 1.3em 'Playfair Display';}
  282. .b_dejaboo b { color:#7a7675; /* BOLD COLOR */ }
  283. .b_dejaboo i { color:#63473d; /* ITALIC COLOR */ }
  284. .b_dejaboo strong { color:#000; /* STRONG COLOR */ }
  285. .b_dejaboo u {
  286. color:#564a46; /* UNDELINE COLOR */
  287. text-decoration:none;
  288. padding-bottom:2px;
  289. /* UNDELINE BORDER COLOR */
  290. border-bottom:1px solid #564a46; }
  291.  
  292. /* ◦ ◠ ( BIOGRAPHY ) ACE VER. ◞ ◦ */
  293. .b_ace { width:450px; margin:0 0 5px 0; }
  294.  
  295. .b_ace p {
  296. color:#5b5b5b; /* TEXT COLOR */
  297. font: normal 1em/20px 'AbeeZee';
  298. text-align:justify;
  299.  
  300. background:#d1ccca; /* BACKGROUND */
  301. padding:5px 10px; margin:0 0 2px 0;
  302. /* BORDER COLOR */
  303. border-left:5px solid #c1b9b6; }
  304.  
  305. .b_ace tt {
  306. color:#685d59; /* TELETYPE COLOR */
  307. font: 500 1.3em 'Playfair Display';}
  308. .b_ace b { color:#7a7675; /* BOLD COLOR */ }
  309. .b_ace i { color:#63473d; /* ITALIC COLOR */ }
  310. .b_ace strong { color:#000; /* STRONG COLOR */ }
  311. .b_ace u {
  312. color:#564a46; /* UNDELINE COLOR */
  313. text-decoration:none;
  314. padding-bottom:2px;
  315. /* UNDELINE BORDER COLOR */
  316. border-bottom:1px solid #564a46; }
  317.  
  318.  
  319. /* ◦ ◠ ( MUSE ) BASIC INFORMATION ◞ ◦ */
  320. .m_basics {
  321. width:450px; height:135px;
  322. background:#e0dede; /* BACKGROUND */
  323. overflow:auto; }
  324.  
  325. .m_basics::-webkit-scrollbar,
  326. .m_basics::-webkit-scrollbar-track {
  327. width: 3px!important; height:135px!important;
  328. position:absolute; background:transparent; }
  329. .m_basics::-webkit-scrollbar-thumb {
  330. background: #d1cfcc!important; }
  331.  
  332. .m_basics ul { width:100%; padding:15px 20px; }
  333.  
  334. .m_basics li {
  335. color:#7f7e7e; /* TEXT COLOR */
  336. font: normal 1em 'Karla';
  337. text-align:justify;
  338.  
  339. background:#d1ccca;
  340. border:1px solid #d8d5d4;
  341. width:190px; padding:5px 10px;
  342. margin:5px 5px; display:inline-block;
  343. border-radius:5px; }
  344.  
  345. .m_basics li b {
  346. color:#776b5f; /* BOLD TEXT */
  347. font: bold 0.9em 'Roboto';
  348. text-transform:uppercase;
  349. margin-right:5px; }
  350.  
  351. /* ◦ ◠ ( MUSE ) LINKS ◞ ◦ */
  352. .m_links {
  353. width:50px; height:430px;
  354. background:#a8a5a3; /** MUSE LINKS BG **/
  355. margin:0 -2px; overflow:hidden; }
  356.  
  357. .m_links ul { margin:130px -23px; }
  358.  
  359. .m_links li a, .m_links li { color:#dddddd; /* LINKS COLOR */ }
  360.  
  361. .m_links li {
  362. font-size:15px;
  363. margin:20px 0; cursor:pointer;
  364. vertical-align:middle; }
  365.  
  366. /* ◦ ◠ ( MUSE ) SPOTIFY ◞ ◦ */
  367. .m_spotify {
  368. width:370px; height:100px;
  369. background:#1e1e1e; /* BACKGROUND */
  370. padding:10px 20px; overflow:hidden; }
  371.  
  372. .m_spotify img {
  373. width:80px; height:80px;
  374. display:inline-block; float:left;
  375. border-radius:5px; }
  376.  
  377. .m_spotify ul { padding:5px 10px; display:inline-block; }
  378.  
  379. .m_spotify li {
  380. color:#dddcdb; /* DETAILS COLOR */
  381. text-transform:uppercase;
  382. width:180px; padding:3px 5px; }
  383.  
  384. .m_spotify li:nth-child(1) { font: bold 1.3em 'Open Sans'; }
  385. .m_spotify li:nth-child(2), .m_spotify li:nth-child(3) {
  386. font: normal 1.1em monospace;
  387. letter-spacing:1px; }
  388.  
  389. /* ◦ ◠ ( MUSE ) PICTURE ◞ ◦ */
  390. .m_picture {
  391. width:370px; height:330px;
  392. background:#dddddd; /* BACKGROUND */
  393. overflow:hidden; }
  394.  
  395. .m_picture img { width:370px; height:330px; }
  396.  
  397.  
  398. /* ◦ ◠ ( MUSE ) CONNECTIONS TAB ◞ ◦ */
  399. .popup_block{
  400. width:400px; max-height:350px;
  401. background:transparent; /** POPUP BOX BACKGROUND **/
  402. padding:0; overflow:hidden;
  403. position:fixed; top:50%;left:50%;
  404. display:none; float:left;
  405. z-index:calc(99*999); }
  406.  
  407. *html #fade {position: absolute;}
  408. *html .popup_block {position: absolute; }
  409.  
  410. #fade {
  411. width:100%; height:100%;
  412. position:fixed; left:0px; top:0px;
  413. display:none; z-index:9999;
  414. opacity:0; }
  415.  
  416. .connections {
  417. width:400px; height:350px;
  418. overflow:auto; margin:-10px 0; }
  419.  
  420. /* ◦ ◠ ( CONNECTIONS ) ◞ ◦ */
  421. .cont_cnn {
  422. width:400px; height:auto; min-height:100px;
  423. background:#eaeaea; /* BACKGROUND */
  424. padding:10px 20px 10px 20px;
  425. margin:10px 0; }
  426.  
  427. /* ◦ ◠ ( CONNECTIONS ) HEADER ◞ ◦ */
  428. .cont_hd {
  429. width:400px; height:110px;
  430. background:#e0dede; /* BACKGROUND */
  431. padding:10px 20px;
  432. margin:-10px 0 0 -20px; }
  433.  
  434. .cont_cnn img {
  435. width:80px; height:80px;
  436. display:inline-block; float:left;
  437. margin:5px 10px 0 0;
  438. border-radius:5px; }
  439.  
  440. .cont_cnn h1 {
  441. color:#b2a9a6; /* NAME COLOR */
  442. font: 600 0.9em 'Montserrat';
  443. text-transform:uppercase;
  444. margin:10px 0 -5px 0; display:inline-block; }
  445.  
  446. .cont_cnn h2 {
  447. color:#b2a9a6; /* NAME COLOR */
  448. font: 600 2em 'Playfair Display';
  449. text-transform:uppercase;
  450. margin:0 0 -5px 0; display:inline-block; }
  451.  
  452. .cont_cnn p {
  453. color:#7c7c7c; /* TEXT COLOR */
  454. font: normal 1em/20px 'Open Sans';
  455. text-align:justify;
  456. padding:10px 5px; margin:0; }
  457.  
  458. .cont_cnn p tt {
  459. color:#a09b9a; /* TELETYPE COLOR */
  460. font: 500 1.3em 'Playfair Display';}
  461. .cont_cnn p b { color:#7a7675; /* BOLD COLOR */ }
  462. .cont_cnn p i { color:#63473d; /* ITALIC COLOR */ }
  463. .cont_cnn p strong { color:#000; /* STRONG COLOR */ }
  464. .cont_cnn p u {
  465. color:#564a46; /* UNDELINE COLOR */
  466. text-decoration:none;
  467. padding-bottom:2px;
  468. /* UNDELINE BORDER COLOR */
  469. border-bottom:1px solid #564a46; }
  470.  
  471. /* ◦ ◠ ( CONNECTIONS ) LINKS ◞ ◦ */
  472. .cont_cnn ul { margin:10px 0; }
  473.  
  474. .cont_cnn li a { color:#c4af91; /* LINK COLOR */ }
  475.  
  476. .cont_cnn li {
  477. font-size:1em;
  478. padding:7px 7px; margin:0 5px;
  479. display:inline-block; border-radius:50%; }
  480.  
  481.  
  482. /* ◦ ◠ LOWERBAR ◞ ◦ */
  483. .lowerbar {
  484. width:100%; height:90px;
  485. background:#eaeaea; /* LOWERBAR BACKGROUND */
  486. padding:10px 20px; overflow:hidden; }
  487.  
  488.  
  489. /* ◦ ◠ ( LOWERBAR ) TITLE ◞ ◦ */
  490. .lw_title {
  491. width:250px; height:80px;
  492. margin:-15px 10px; overflow:hidden;
  493. display:inline-block; float:left; }
  494.  
  495. .lw_title h3 {
  496. color:#111111; /* TITLE COLOR */
  497. font: 900 2.8em/22px 'Montserrat';
  498. text-align:justify; text-transform:uppercase;
  499. word-break:break-word; padding:7px 0; }
  500.  
  501. /* ◦ ◠ ( LOWERBAR ) MUSE NAVIGATION ◞ ◦ */
  502. .lw_navi {
  503. width:280px; height:80px;
  504. overflow:auto; display:inline-block;
  505. float:right; }
  506.  
  507. .lw_navi li {
  508. width:25px; height:25px;
  509. background:#a09a98; /* BACKGROUND */
  510. cursor:pointer;
  511. margin:5px 5px; overflow:hidden;
  512. display:inline-block; border-radius:50%; }
  513.  
  514. .lw_navi li img { width:25px; height:25px; }
  515.  
  516.  
  517.  
  518. </style>
  519. <body>
  520.  
  521.  
  522.  
  523. <!-- ◦ ◠ CONTAINER ◞ ◦ -->
  524. <div id="container">
  525.  
  526.  
  527. <!-- ◦ ◠ UPPERBAR ◞ ◦ -->
  528. <div class="upperbar">
  529.  
  530.  
  531. <!-- ◦ ◠ ( UPPERBAR ) TITLE ◞ ◦ -->
  532. <article class="up_title">
  533.  
  534. <!-- TITLE --><h1>MUSES</h1>
  535.  
  536. <!-- DESC / SUBTITLE -->
  537. <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis elit, tempor sed vulputate vitae, consectetur in nisi. </h2>
  538.  
  539. </article>
  540.  
  541. <!-- ◦ ◠ ( UPPERBAR ) LINKS ◞ ◦ -->
  542. <div class="up_links"><ul>
  543.  
  544. <li><a href="URLHERE"><b>01.</b> GO BACK</a></li>
  545. <li><a href="URLHERE"><b>02.</b> LINK ONE</a></li>
  546. <li><a href="URLHERE"><b>03.</b> LINK TWO</a></li>
  547.  
  548. <!-- **** PLEASE, DON'T TOUCH **** -->
  549. <li><a href="http://yongqln.tumblr.com">
  550. <b>04.</b> CREDITS</a></li>
  551. <!-- **** PLEASE, DON'T TOUCH **** -->
  552. </ul></div>
  553.  
  554. </div>
  555.  
  556.  
  557.  
  558.  
  559.  
  560.  
  561.  
  562.  
  563.  
  564.  
  565. <!-- ◦ ◠ MAIN ◞ ◦ -->
  566. <div class="main">
  567.  
  568.  
  569. <!-- TO ADD MORE MUSES, JUST COPY EVERYTHING BETWEEN
  570.  
  571. ◦ ◠ MUSE #001 ◞ ◦ AND ◦ ◠ END OF MUSE 001 ◞ ◦
  572.  
  573. AND PASTE AFTER THE LAST MUSE + REMEMBER TO CHANGE
  574. THE "id=msxx" TO A NEW NUMBER AND TO ADD A NEW LINK
  575. IN THE MUSE NAVIGATION (changing the id there to the same
  576. you put in your new muse).
  577. TO DELETE ONE MUSE, JUST DELETE EVERYTHING BETWEEN
  578.  
  579. ◦ ◠ MUSE #001 ◞ ◦ AND ◦ ◠ END OF MUSE 001 ◞ ◦ -->
  580.  
  581.  
  582. <!-- ◦ ◠ MUSE #001 ◞ ◦ -->
  583. <div class="content" id="ms1">
  584.  
  585.  
  586. <div class="leftie">
  587. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  588. <div class="m_header">
  589. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  590. <!-- N A M E --> <h2> MUSE NAME </h2>
  591. <!-- Q U O T E -->
  592. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  593. </div>
  594.  
  595. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  596. <div class="m_biography">
  597.  
  598.  
  599.  
  600.  
  601. <!-- ( DEJABOO ) VERSION -->
  602. <!-- You can use this version for long biographs or more than one paragraph. -->
  603.  
  604. <article class="b_dejaboo">
  605. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  606.  
  607. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  608.  
  609. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  610. </article>
  611.  
  612.  
  613. <!-- ( A C E ) VERSION -->
  614. <!-- This is ideal when you want only short headcanons instead
  615. of a biography. -->
  616.  
  617. <article class="b_ace">
  618. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  619.  
  620. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  621.  
  622. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  623.  
  624. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  625.  
  626. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  627.  
  628. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  629.  
  630. </article>
  631.  
  632.  
  633. </div>
  634.  
  635. <!-- ( MUSE ) BASIC INFORMATION -->
  636. <div class="m_basics"><ul>
  637. <li><b>NAME</b>Lorem Ipsum</li>
  638. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  639. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  640. <li><b>AGE</b>Lorem Ipsum</li>
  641. <li><b>GENDER</b>Lorem Ipsum</li>
  642. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  643. </ul><ul>
  644. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  645. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  646. <li><b>STATUS</b>Lorem Ipsum</li>
  647. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  648. <li><b>LOCATION</b>Lorem Ipsum</li>
  649. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  650. </ul></div></div>
  651.  
  652. <!-- ( MUSE ) LINKS -->
  653. <div class="m_links"><ul>
  654.  
  655. <!-- --->
  656. <li><a href="LINKHERE" title="muse blog">
  657. <span class="icon-user"></span>
  658. </a></li>
  659.  
  660.  
  661. <!-- --->
  662. <li><a href="LINKHERE" title="musing tag">
  663. <span class="icon-tag"></span>
  664. </a></li>
  665.  
  666.  
  667. <!-- --->
  668. <li><a href="LINKHERE" title="opposite blog">
  669. <span class="icon-heart"></span>
  670. </a></li>
  671.  
  672.  
  673. <!-- --->
  674. <li title="relationships">
  675. <a href="#?w=auto" rel="cn1" class="poplight">
  676. <span class="icon-people"></span>
  677. </a></li>
  678.  
  679.  
  680. <!-- --->
  681. <li title="discord/tumblr">
  682. <span class="icon-settings"></span>
  683. </li>
  684.  
  685.  
  686. </ul></div>
  687.  
  688.  
  689. <div class="rightie">
  690. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  691. <div class="m_spotify">
  692. <!-- ALBUM IMAGE -->
  693. <img src="https://via.placeholder.com/80x80">
  694. <ul>
  695. <li>SONG NAME</li>
  696. <li>BAND</li>
  697. <li>ALBUM</li>
  698. </ul>
  699. </div>
  700.  
  701.  
  702. <!-- ( MUSE ) PICTURE -->
  703. <div class="m_picture">
  704. <!-- MUSE PICTURE -->
  705. <img src="https://via.placeholder.com/370x330">
  706. </div></div>
  707.  
  708.  
  709. </div> <!-- ◦ ◠ END OF MUSE 001 ◞ ◦ -->
  710.  
  711.  
  712.  
  713.  
  714.  
  715. <!-- ◦ ◠ MUSE #002 ◞ ◦ -->
  716. <div class="content" id="ms2">
  717.  
  718.  
  719. <div class="leftie">
  720. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  721. <div class="m_header">
  722. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  723. <!-- N A M E --> <h2> MUSE NAME </h2>
  724. <!-- Q U O T E -->
  725. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  726. </div>
  727.  
  728. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  729. <div class="m_biography">
  730.  
  731.  
  732.  
  733.  
  734. <!-- ( DEJABOO ) VERSION -->
  735. <!-- You can use this version for long biographs or more than one paragraph. -->
  736.  
  737. <article class="b_dejaboo">
  738. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  739.  
  740. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  741.  
  742. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  743. </article>
  744.  
  745.  
  746. <!-- ( A C E ) VERSION -->
  747. <!-- This is ideal when you want only short headcanons instead
  748. of a biography. -->
  749.  
  750. <article class="b_ace">
  751. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  752.  
  753. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  754.  
  755. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  756.  
  757. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  758.  
  759. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  760.  
  761. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  762.  
  763. </article>
  764.  
  765.  
  766. </div>
  767.  
  768. <!-- ( MUSE ) BASIC INFORMATION -->
  769. <div class="m_basics"><ul>
  770. <li><b>NAME</b>Lorem Ipsum</li>
  771. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  772. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  773. <li><b>AGE</b>Lorem Ipsum</li>
  774. <li><b>GENDER</b>Lorem Ipsum</li>
  775. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  776. </ul><ul>
  777. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  778. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  779. <li><b>STATUS</b>Lorem Ipsum</li>
  780. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  781. <li><b>LOCATION</b>Lorem Ipsum</li>
  782. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  783. </ul></div></div>
  784.  
  785. <!-- ( MUSE ) LINKS -->
  786. <div class="m_links"><ul>
  787.  
  788. <!-- --->
  789. <li><a href="LINKHERE" title="muse blog">
  790. <span class="icon-user"></span>
  791. </a></li>
  792.  
  793.  
  794. <!-- --->
  795. <li><a href="LINKHERE" title="musing tag">
  796. <span class="icon-tag"></span>
  797. </a></li>
  798.  
  799.  
  800. <!-- --->
  801. <li><a href="LINKHERE" title="opposite blog">
  802. <span class="icon-heart"></span>
  803. </a></li>
  804.  
  805.  
  806. <!-- --->
  807. <li title="relationships">
  808. <a href="#?w=auto" rel="cn2" class="poplight">
  809. <span class="icon-people"></span>
  810. </a></li>
  811.  
  812.  
  813. <!-- --->
  814. <li title="discord/tumblr">
  815. <span class="icon-settings"></span>
  816. </li>
  817.  
  818.  
  819. </ul></div>
  820.  
  821.  
  822. <div class="rightie">
  823. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  824. <div class="m_spotify">
  825. <!-- ALBUM IMAGE -->
  826. <img src="https://via.placeholder.com/80x80">
  827. <ul>
  828. <li>SONG NAME</li>
  829. <li>BAND</li>
  830. <li>ALBUM</li>
  831. </ul>
  832. </div>
  833.  
  834.  
  835. <!-- ( MUSE ) PICTURE -->
  836. <div class="m_picture">
  837. <!-- MUSE PICTURE -->
  838. <img src="https://via.placeholder.com/370x330">
  839. </div></div>
  840.  
  841.  
  842. </div> <!-- ◦ ◠ END OF MUSE 002 ◞ ◦ -->
  843.  
  844.  
  845.  
  846. <!-- ◦ ◠ MUSE #003 ◞ ◦ -->
  847. <div class="content" id="ms3">
  848.  
  849.  
  850. <div class="leftie">
  851. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  852. <div class="m_header">
  853. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  854. <!-- N A M E --> <h2> MUSE NAME </h2>
  855. <!-- Q U O T E -->
  856. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  857. </div>
  858.  
  859. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  860. <div class="m_biography">
  861.  
  862.  
  863.  
  864.  
  865. <!-- ( DEJABOO ) VERSION -->
  866. <!-- You can use this version for long biographs or more than one paragraph. -->
  867.  
  868. <article class="b_dejaboo">
  869. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  870.  
  871. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  872.  
  873. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  874. </article>
  875.  
  876.  
  877. <!-- ( A C E ) VERSION -->
  878. <!-- This is ideal when you want only short headcanons instead
  879. of a biography. -->
  880.  
  881. <article class="b_ace">
  882. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  883.  
  884. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  885.  
  886. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  887.  
  888. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  889.  
  890. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  891.  
  892. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  893.  
  894. </article>
  895.  
  896.  
  897. </div>
  898.  
  899. <!-- ( MUSE ) BASIC INFORMATION -->
  900. <div class="m_basics"><ul>
  901. <li><b>NAME</b>Lorem Ipsum</li>
  902. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  903. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  904. <li><b>AGE</b>Lorem Ipsum</li>
  905. <li><b>GENDER</b>Lorem Ipsum</li>
  906. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  907. </ul><ul>
  908. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  909. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  910. <li><b>STATUS</b>Lorem Ipsum</li>
  911. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  912. <li><b>LOCATION</b>Lorem Ipsum</li>
  913. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  914. </ul></div></div>
  915.  
  916. <!-- ( MUSE ) LINKS -->
  917. <div class="m_links"><ul>
  918.  
  919. <!-- --->
  920. <li><a href="LINKHERE" title="muse blog">
  921. <span class="icon-user"></span>
  922. </a></li>
  923.  
  924.  
  925. <!-- --->
  926. <li><a href="LINKHERE" title="musing tag">
  927. <span class="icon-tag"></span>
  928. </a></li>
  929.  
  930.  
  931. <!-- --->
  932. <li><a href="LINKHERE" title="opposite blog">
  933. <span class="icon-heart"></span>
  934. </a></li>
  935.  
  936.  
  937. <!-- --->
  938. <li title="relationships">
  939. <a href="#?w=auto" rel="cn3" class="poplight">
  940. <span class="icon-people"></span>
  941. </a></li>
  942.  
  943.  
  944. <!-- --->
  945. <li title="discord/tumblr">
  946. <span class="icon-settings"></span>
  947. </li>
  948.  
  949.  
  950. </ul></div>
  951.  
  952.  
  953. <div class="rightie">
  954. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  955. <div class="m_spotify">
  956. <!-- ALBUM IMAGE -->
  957. <img src="https://via.placeholder.com/80x80">
  958. <ul>
  959. <li>SONG NAME</li>
  960. <li>BAND</li>
  961. <li>ALBUM</li>
  962. </ul>
  963. </div>
  964.  
  965.  
  966. <!-- ( MUSE ) PICTURE -->
  967. <div class="m_picture">
  968. <!-- MUSE PICTURE -->
  969. <img src="https://via.placeholder.com/370x330">
  970. </div></div>
  971.  
  972.  
  973. </div> <!-- ◦ ◠ END OF MUSE 003 ◞ ◦ -->
  974.  
  975.  
  976.  
  977.  
  978. <!-- ◦ ◠ MUSE #004 ◞ ◦ -->
  979. <div class="content" id="ms4">
  980.  
  981.  
  982. <div class="leftie">
  983. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  984. <div class="m_header">
  985. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  986. <!-- N A M E --> <h2> MUSE NAME </h2>
  987. <!-- Q U O T E -->
  988. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  989. </div>
  990.  
  991. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  992. <div class="m_biography">
  993.  
  994.  
  995.  
  996.  
  997. <!-- ( DEJABOO ) VERSION -->
  998. <!-- You can use this version for long biographs or more than one paragraph. -->
  999.  
  1000. <article class="b_dejaboo">
  1001. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1002.  
  1003. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1004.  
  1005. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1006. </article>
  1007.  
  1008.  
  1009. <!-- ( A C E ) VERSION -->
  1010. <!-- This is ideal when you want only short headcanons instead
  1011. of a biography. -->
  1012.  
  1013. <article class="b_ace">
  1014. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1015.  
  1016. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1017.  
  1018. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1019.  
  1020. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1021.  
  1022. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1023.  
  1024. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1025.  
  1026. </article>
  1027.  
  1028.  
  1029. </div>
  1030.  
  1031. <!-- ( MUSE ) BASIC INFORMATION -->
  1032. <div class="m_basics"><ul>
  1033. <li><b>NAME</b>Lorem Ipsum</li>
  1034. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1035. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1036. <li><b>AGE</b>Lorem Ipsum</li>
  1037. <li><b>GENDER</b>Lorem Ipsum</li>
  1038. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1039. </ul><ul>
  1040. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1041. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1042. <li><b>STATUS</b>Lorem Ipsum</li>
  1043. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1044. <li><b>LOCATION</b>Lorem Ipsum</li>
  1045. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1046. </ul></div></div>
  1047.  
  1048. <!-- ( MUSE ) LINKS -->
  1049. <div class="m_links"><ul>
  1050.  
  1051. <!-- --->
  1052. <li><a href="LINKHERE" title="muse blog">
  1053. <span class="icon-user"></span>
  1054. </a></li>
  1055.  
  1056.  
  1057. <!-- --->
  1058. <li><a href="LINKHERE" title="musing tag">
  1059. <span class="icon-tag"></span>
  1060. </a></li>
  1061.  
  1062.  
  1063. <!-- --->
  1064. <li><a href="LINKHERE" title="opposite blog">
  1065. <span class="icon-heart"></span>
  1066. </a></li>
  1067.  
  1068.  
  1069. <!-- --->
  1070. <li title="relationships">
  1071. <a href="#?w=auto" rel="cn4" class="poplight">
  1072. <span class="icon-people"></span>
  1073. </a></li>
  1074.  
  1075.  
  1076. <!-- --->
  1077. <li title="discord/tumblr">
  1078. <span class="icon-settings"></span>
  1079. </li>
  1080.  
  1081.  
  1082. </ul></div>
  1083.  
  1084.  
  1085. <div class="rightie">
  1086. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1087. <div class="m_spotify">
  1088. <!-- ALBUM IMAGE -->
  1089. <img src="https://via.placeholder.com/80x80">
  1090. <ul>
  1091. <li>SONG NAME</li>
  1092. <li>BAND</li>
  1093. <li>ALBUM</li>
  1094. </ul>
  1095. </div>
  1096.  
  1097.  
  1098. <!-- ( MUSE ) PICTURE -->
  1099. <div class="m_picture">
  1100. <!-- MUSE PICTURE -->
  1101. <img src="https://via.placeholder.com/370x330">
  1102. </div></div>
  1103.  
  1104.  
  1105. </div> <!-- ◦ ◠ END OF MUSE 004 ◞ ◦ -->
  1106.  
  1107.  
  1108.  
  1109. <!-- ◦ ◠ MUSE #005 ◞ ◦ -->
  1110. <div class="content" id="ms5">
  1111.  
  1112.  
  1113. <div class="leftie">
  1114. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1115. <div class="m_header">
  1116. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1117. <!-- N A M E --> <h2> MUSE NAME </h2>
  1118. <!-- Q U O T E -->
  1119. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1120. </div>
  1121.  
  1122. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1123. <div class="m_biography">
  1124.  
  1125.  
  1126.  
  1127.  
  1128. <!-- ( DEJABOO ) VERSION -->
  1129. <!-- You can use this version for long biographs or more than one paragraph. -->
  1130.  
  1131. <article class="b_dejaboo">
  1132. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1133.  
  1134. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1135.  
  1136. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1137. </article>
  1138.  
  1139.  
  1140. <!-- ( A C E ) VERSION -->
  1141. <!-- This is ideal when you want only short headcanons instead
  1142. of a biography. -->
  1143.  
  1144. <article class="b_ace">
  1145. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1146.  
  1147. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1148.  
  1149. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1150.  
  1151. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1152.  
  1153. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1154.  
  1155. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1156.  
  1157. </article>
  1158.  
  1159.  
  1160. </div>
  1161.  
  1162. <!-- ( MUSE ) BASIC INFORMATION -->
  1163. <div class="m_basics"><ul>
  1164. <li><b>NAME</b>Lorem Ipsum</li>
  1165. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1166. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1167. <li><b>AGE</b>Lorem Ipsum</li>
  1168. <li><b>GENDER</b>Lorem Ipsum</li>
  1169. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1170. </ul><ul>
  1171. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1172. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1173. <li><b>STATUS</b>Lorem Ipsum</li>
  1174. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1175. <li><b>LOCATION</b>Lorem Ipsum</li>
  1176. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1177. </ul></div></div>
  1178.  
  1179. <!-- ( MUSE ) LINKS -->
  1180. <div class="m_links"><ul>
  1181.  
  1182. <!-- --->
  1183. <li><a href="LINKHERE" title="muse blog">
  1184. <span class="icon-user"></span>
  1185. </a></li>
  1186.  
  1187.  
  1188. <!-- --->
  1189. <li><a href="LINKHERE" title="musing tag">
  1190. <span class="icon-tag"></span>
  1191. </a></li>
  1192.  
  1193.  
  1194. <!-- --->
  1195. <li><a href="LINKHERE" title="opposite blog">
  1196. <span class="icon-heart"></span>
  1197. </a></li>
  1198.  
  1199.  
  1200. <!-- --->
  1201. <li title="relationships">
  1202. <a href="#?w=auto" rel="cn5" class="poplight">
  1203. <span class="icon-people"></span>
  1204. </a></li>
  1205.  
  1206.  
  1207. <!-- --->
  1208. <li title="discord/tumblr">
  1209. <span class="icon-settings"></span>
  1210. </li>
  1211.  
  1212.  
  1213. </ul></div>
  1214.  
  1215.  
  1216. <div class="rightie">
  1217. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1218. <div class="m_spotify">
  1219. <!-- ALBUM IMAGE -->
  1220. <img src="https://via.placeholder.com/80x80">
  1221. <ul>
  1222. <li>SONG NAME</li>
  1223. <li>BAND</li>
  1224. <li>ALBUM</li>
  1225. </ul>
  1226. </div>
  1227.  
  1228.  
  1229. <!-- ( MUSE ) PICTURE -->
  1230. <div class="m_picture">
  1231. <!-- MUSE PICTURE -->
  1232. <img src="https://via.placeholder.com/370x330">
  1233. </div></div>
  1234.  
  1235.  
  1236. </div> <!-- ◦ ◠ END OF MUSE 005 ◞ ◦ -->
  1237.  
  1238.  
  1239.  
  1240.  
  1241. <!-- ◦ ◠ MUSE #006 ◞ ◦ -->
  1242. <div class="content" id="ms6">
  1243.  
  1244.  
  1245. <div class="leftie">
  1246. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1247. <div class="m_header">
  1248. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1249. <!-- N A M E --> <h2> MUSE NAME </h2>
  1250. <!-- Q U O T E -->
  1251. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1252. </div>
  1253.  
  1254. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1255. <div class="m_biography">
  1256.  
  1257.  
  1258.  
  1259.  
  1260. <!-- ( DEJABOO ) VERSION -->
  1261. <!-- You can use this version for long biographs or more than one paragraph. -->
  1262.  
  1263. <article class="b_dejaboo">
  1264. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1265.  
  1266. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1267.  
  1268. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1269. </article>
  1270.  
  1271.  
  1272. <!-- ( A C E ) VERSION -->
  1273. <!-- This is ideal when you want only short headcanons instead
  1274. of a biography. -->
  1275.  
  1276. <article class="b_ace">
  1277. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1278.  
  1279. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1280.  
  1281. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1282.  
  1283. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1284.  
  1285. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1286.  
  1287. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1288.  
  1289. </article>
  1290.  
  1291.  
  1292. </div>
  1293.  
  1294. <!-- ( MUSE ) BASIC INFORMATION -->
  1295. <div class="m_basics"><ul>
  1296. <li><b>NAME</b>Lorem Ipsum</li>
  1297. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1298. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1299. <li><b>AGE</b>Lorem Ipsum</li>
  1300. <li><b>GENDER</b>Lorem Ipsum</li>
  1301. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1302. </ul><ul>
  1303. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1304. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1305. <li><b>STATUS</b>Lorem Ipsum</li>
  1306. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1307. <li><b>LOCATION</b>Lorem Ipsum</li>
  1308. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1309. </ul></div></div>
  1310.  
  1311. <!-- ( MUSE ) LINKS -->
  1312. <div class="m_links"><ul>
  1313.  
  1314. <!-- --->
  1315. <li><a href="LINKHERE" title="muse blog">
  1316. <span class="icon-user"></span>
  1317. </a></li>
  1318.  
  1319.  
  1320. <!-- --->
  1321. <li><a href="LINKHERE" title="musing tag">
  1322. <span class="icon-tag"></span>
  1323. </a></li>
  1324.  
  1325.  
  1326. <!-- --->
  1327. <li><a href="LINKHERE" title="opposite blog">
  1328. <span class="icon-heart"></span>
  1329. </a></li>
  1330.  
  1331.  
  1332. <!-- --->
  1333. <li title="relationships">
  1334. <a href="#?w=auto" rel="cn6" class="poplight">
  1335. <span class="icon-people"></span>
  1336. </a></li>
  1337.  
  1338.  
  1339. <!-- --->
  1340. <li title="discord/tumblr">
  1341. <span class="icon-settings"></span>
  1342. </li>
  1343.  
  1344.  
  1345. </ul></div>
  1346.  
  1347.  
  1348. <div class="rightie">
  1349. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1350. <div class="m_spotify">
  1351. <!-- ALBUM IMAGE -->
  1352. <img src="https://via.placeholder.com/80x80">
  1353. <ul>
  1354. <li>SONG NAME</li>
  1355. <li>BAND</li>
  1356. <li>ALBUM</li>
  1357. </ul>
  1358. </div>
  1359.  
  1360.  
  1361. <!-- ( MUSE ) PICTURE -->
  1362. <div class="m_picture">
  1363. <!-- MUSE PICTURE -->
  1364. <img src="https://via.placeholder.com/370x330">
  1365. </div></div>
  1366.  
  1367.  
  1368. </div> <!-- ◦ ◠ END OF MUSE 006 ◞ ◦ -->
  1369.  
  1370.  
  1371.  
  1372. <!-- ◦ ◠ MUSE #007 ◞ ◦ -->
  1373. <div class="content" id="ms7">
  1374.  
  1375.  
  1376. <div class="leftie">
  1377. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1378. <div class="m_header">
  1379. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1380. <!-- N A M E --> <h2> MUSE NAME </h2>
  1381. <!-- Q U O T E -->
  1382. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1383. </div>
  1384.  
  1385. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1386. <div class="m_biography">
  1387.  
  1388.  
  1389.  
  1390.  
  1391. <!-- ( DEJABOO ) VERSION -->
  1392. <!-- You can use this version for long biographs or more than one paragraph. -->
  1393.  
  1394. <article class="b_dejaboo">
  1395. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1396.  
  1397. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1398.  
  1399. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1400. </article>
  1401.  
  1402.  
  1403. <!-- ( A C E ) VERSION -->
  1404. <!-- This is ideal when you want only short headcanons instead
  1405. of a biography. -->
  1406.  
  1407. <article class="b_ace">
  1408. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1409.  
  1410. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1411.  
  1412. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1413.  
  1414. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1415.  
  1416. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1417.  
  1418. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1419.  
  1420. </article>
  1421.  
  1422.  
  1423. </div>
  1424.  
  1425. <!-- ( MUSE ) BASIC INFORMATION -->
  1426. <div class="m_basics"><ul>
  1427. <li><b>NAME</b>Lorem Ipsum</li>
  1428. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1429. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1430. <li><b>AGE</b>Lorem Ipsum</li>
  1431. <li><b>GENDER</b>Lorem Ipsum</li>
  1432. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1433. </ul><ul>
  1434. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1435. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1436. <li><b>STATUS</b>Lorem Ipsum</li>
  1437. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1438. <li><b>LOCATION</b>Lorem Ipsum</li>
  1439. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1440. </ul></div></div>
  1441.  
  1442. <!-- ( MUSE ) LINKS -->
  1443. <div class="m_links"><ul>
  1444.  
  1445. <!-- --->
  1446. <li><a href="LINKHERE" title="muse blog">
  1447. <span class="icon-user"></span>
  1448. </a></li>
  1449.  
  1450.  
  1451. <!-- --->
  1452. <li><a href="LINKHERE" title="musing tag">
  1453. <span class="icon-tag"></span>
  1454. </a></li>
  1455.  
  1456.  
  1457. <!-- --->
  1458. <li><a href="LINKHERE" title="opposite blog">
  1459. <span class="icon-heart"></span>
  1460. </a></li>
  1461.  
  1462.  
  1463. <!-- --->
  1464. <li title="relationships">
  1465. <a href="#?w=auto" rel="cn7" class="poplight">
  1466. <span class="icon-people"></span>
  1467. </a></li>
  1468.  
  1469.  
  1470. <!-- --->
  1471. <li title="discord/tumblr">
  1472. <span class="icon-settings"></span>
  1473. </li>
  1474.  
  1475.  
  1476. </ul></div>
  1477.  
  1478.  
  1479. <div class="rightie">
  1480. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1481. <div class="m_spotify">
  1482. <!-- ALBUM IMAGE -->
  1483. <img src="https://via.placeholder.com/80x80">
  1484. <ul>
  1485. <li>SONG NAME</li>
  1486. <li>BAND</li>
  1487. <li>ALBUM</li>
  1488. </ul>
  1489. </div>
  1490.  
  1491.  
  1492. <!-- ( MUSE ) PICTURE -->
  1493. <div class="m_picture">
  1494. <!-- MUSE PICTURE -->
  1495. <img src="https://via.placeholder.com/370x330">
  1496. </div></div>
  1497.  
  1498.  
  1499. </div> <!-- ◦ ◠ END OF MUSE 007 ◞ ◦ -->
  1500.  
  1501.  
  1502.  
  1503.  
  1504. <!-- ◦ ◠ MUSE #008 ◞ ◦ -->
  1505. <div class="content" id="ms8">
  1506.  
  1507.  
  1508. <div class="leftie">
  1509. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1510. <div class="m_header">
  1511. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1512. <!-- N A M E --> <h2> MUSE NAME </h2>
  1513. <!-- Q U O T E -->
  1514. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1515. </div>
  1516.  
  1517. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1518. <div class="m_biography">
  1519.  
  1520.  
  1521.  
  1522.  
  1523. <!-- ( DEJABOO ) VERSION -->
  1524. <!-- You can use this version for long biographs or more than one paragraph. -->
  1525.  
  1526. <article class="b_dejaboo">
  1527. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1528.  
  1529. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1530.  
  1531. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1532. </article>
  1533.  
  1534.  
  1535. <!-- ( A C E ) VERSION -->
  1536. <!-- This is ideal when you want only short headcanons instead
  1537. of a biography. -->
  1538.  
  1539. <article class="b_ace">
  1540. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1541.  
  1542. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1543.  
  1544. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1545.  
  1546. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1547.  
  1548. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1549.  
  1550. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1551.  
  1552. </article>
  1553.  
  1554.  
  1555. </div>
  1556.  
  1557. <!-- ( MUSE ) BASIC INFORMATION -->
  1558. <div class="m_basics"><ul>
  1559. <li><b>NAME</b>Lorem Ipsum</li>
  1560. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1561. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1562. <li><b>AGE</b>Lorem Ipsum</li>
  1563. <li><b>GENDER</b>Lorem Ipsum</li>
  1564. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1565. </ul><ul>
  1566. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1567. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1568. <li><b>STATUS</b>Lorem Ipsum</li>
  1569. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1570. <li><b>LOCATION</b>Lorem Ipsum</li>
  1571. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1572. </ul></div></div>
  1573.  
  1574. <!-- ( MUSE ) LINKS -->
  1575. <div class="m_links"><ul>
  1576.  
  1577. <!-- --->
  1578. <li><a href="LINKHERE" title="muse blog">
  1579. <span class="icon-user"></span>
  1580. </a></li>
  1581.  
  1582.  
  1583. <!-- --->
  1584. <li><a href="LINKHERE" title="musing tag">
  1585. <span class="icon-tag"></span>
  1586. </a></li>
  1587.  
  1588.  
  1589. <!-- --->
  1590. <li><a href="LINKHERE" title="opposite blog">
  1591. <span class="icon-heart"></span>
  1592. </a></li>
  1593.  
  1594.  
  1595. <!-- --->
  1596. <li title="relationships">
  1597. <a href="#?w=auto" rel="cn8" class="poplight">
  1598. <span class="icon-people"></span>
  1599. </a></li>
  1600.  
  1601.  
  1602. <!-- --->
  1603. <li title="discord/tumblr">
  1604. <span class="icon-settings"></span>
  1605. </li>
  1606.  
  1607.  
  1608. </ul></div>
  1609.  
  1610.  
  1611. <div class="rightie">
  1612. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1613. <div class="m_spotify">
  1614. <!-- ALBUM IMAGE -->
  1615. <img src="https://via.placeholder.com/80x80">
  1616. <ul>
  1617. <li>SONG NAME</li>
  1618. <li>BAND</li>
  1619. <li>ALBUM</li>
  1620. </ul>
  1621. </div>
  1622.  
  1623.  
  1624. <!-- ( MUSE ) PICTURE -->
  1625. <div class="m_picture">
  1626. <!-- MUSE PICTURE -->
  1627. <img src="https://via.placeholder.com/370x330">
  1628. </div></div>
  1629.  
  1630.  
  1631. </div> <!-- ◦ ◠ END OF MUSE 008 ◞ ◦ -->
  1632.  
  1633.  
  1634.  
  1635.  
  1636. <!-- ◦ ◠ MUSE #009 ◞ ◦ -->
  1637. <div class="content" id="ms9">
  1638.  
  1639.  
  1640. <div class="leftie">
  1641. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1642. <div class="m_header">
  1643. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1644. <!-- N A M E --> <h2> MUSE NAME </h2>
  1645. <!-- Q U O T E -->
  1646. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1647. </div>
  1648.  
  1649. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1650. <div class="m_biography">
  1651.  
  1652.  
  1653.  
  1654.  
  1655. <!-- ( DEJABOO ) VERSION -->
  1656. <!-- You can use this version for long biographs or more than one paragraph. -->
  1657.  
  1658. <article class="b_dejaboo">
  1659. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1660.  
  1661. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1662.  
  1663. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1664. </article>
  1665.  
  1666.  
  1667. <!-- ( A C E ) VERSION -->
  1668. <!-- This is ideal when you want only short headcanons instead
  1669. of a biography. -->
  1670.  
  1671. <article class="b_ace">
  1672. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1673.  
  1674. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1675.  
  1676. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1677.  
  1678. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1679.  
  1680. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1681.  
  1682. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1683.  
  1684. </article>
  1685.  
  1686.  
  1687. </div>
  1688.  
  1689. <!-- ( MUSE ) BASIC INFORMATION -->
  1690. <div class="m_basics"><ul>
  1691. <li><b>NAME</b>Lorem Ipsum</li>
  1692. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1693. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1694. <li><b>AGE</b>Lorem Ipsum</li>
  1695. <li><b>GENDER</b>Lorem Ipsum</li>
  1696. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1697. </ul><ul>
  1698. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1699. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1700. <li><b>STATUS</b>Lorem Ipsum</li>
  1701. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1702. <li><b>LOCATION</b>Lorem Ipsum</li>
  1703. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1704. </ul></div></div>
  1705.  
  1706. <!-- ( MUSE ) LINKS -->
  1707. <div class="m_links"><ul>
  1708.  
  1709. <!-- --->
  1710. <li><a href="LINKHERE" title="muse blog">
  1711. <span class="icon-user"></span>
  1712. </a></li>
  1713.  
  1714.  
  1715. <!-- --->
  1716. <li><a href="LINKHERE" title="musing tag">
  1717. <span class="icon-tag"></span>
  1718. </a></li>
  1719.  
  1720.  
  1721. <!-- --->
  1722. <li><a href="LINKHERE" title="opposite blog">
  1723. <span class="icon-heart"></span>
  1724. </a></li>
  1725.  
  1726.  
  1727. <!-- --->
  1728. <li title="relationships">
  1729. <a href="#?w=auto" rel="cn9" class="poplight">
  1730. <span class="icon-people"></span>
  1731. </a></li>
  1732.  
  1733.  
  1734. <!-- --->
  1735. <li title="discord/tumblr">
  1736. <span class="icon-settings"></span>
  1737. </li>
  1738.  
  1739.  
  1740. </ul></div>
  1741.  
  1742.  
  1743. <div class="rightie">
  1744. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1745. <div class="m_spotify">
  1746. <!-- ALBUM IMAGE -->
  1747. <img src="https://via.placeholder.com/80x80">
  1748. <ul>
  1749. <li>SONG NAME</li>
  1750. <li>BAND</li>
  1751. <li>ALBUM</li>
  1752. </ul>
  1753. </div>
  1754.  
  1755.  
  1756. <!-- ( MUSE ) PICTURE -->
  1757. <div class="m_picture">
  1758. <!-- MUSE PICTURE -->
  1759. <img src="https://via.placeholder.com/370x330">
  1760. </div></div>
  1761.  
  1762.  
  1763. </div> <!-- ◦ ◠ END OF MUSE 009 ◞ ◦ -->
  1764.  
  1765.  
  1766.  
  1767. <!-- ◦ ◠ MUSE #010 ◞ ◦ -->
  1768. <div class="content" id="ms10">
  1769.  
  1770.  
  1771. <div class="leftie">
  1772. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1773. <div class="m_header">
  1774. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1775. <!-- N A M E --> <h2> MUSE NAME </h2>
  1776. <!-- Q U O T E -->
  1777. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1778. </div>
  1779.  
  1780. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1781. <div class="m_biography">
  1782.  
  1783.  
  1784.  
  1785.  
  1786. <!-- ( DEJABOO ) VERSION -->
  1787. <!-- You can use this version for long biographs or more than one paragraph. -->
  1788.  
  1789. <article class="b_dejaboo">
  1790. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1791.  
  1792. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1793.  
  1794. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1795. </article>
  1796.  
  1797.  
  1798. <!-- ( A C E ) VERSION -->
  1799. <!-- This is ideal when you want only short headcanons instead
  1800. of a biography. -->
  1801.  
  1802. <article class="b_ace">
  1803. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1804.  
  1805. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1806.  
  1807. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1808.  
  1809. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1810.  
  1811. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1812.  
  1813. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1814.  
  1815. </article>
  1816.  
  1817.  
  1818. </div>
  1819.  
  1820. <!-- ( MUSE ) BASIC INFORMATION -->
  1821. <div class="m_basics"><ul>
  1822. <li><b>NAME</b>Lorem Ipsum</li>
  1823. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1824. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1825. <li><b>AGE</b>Lorem Ipsum</li>
  1826. <li><b>GENDER</b>Lorem Ipsum</li>
  1827. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1828. </ul><ul>
  1829. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1830. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1831. <li><b>STATUS</b>Lorem Ipsum</li>
  1832. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1833. <li><b>LOCATION</b>Lorem Ipsum</li>
  1834. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1835. </ul></div></div>
  1836.  
  1837. <!-- ( MUSE ) LINKS -->
  1838. <div class="m_links"><ul>
  1839.  
  1840. <!-- --->
  1841. <li><a href="LINKHERE" title="muse blog">
  1842. <span class="icon-user"></span>
  1843. </a></li>
  1844.  
  1845.  
  1846. <!-- --->
  1847. <li><a href="LINKHERE" title="musing tag">
  1848. <span class="icon-tag"></span>
  1849. </a></li>
  1850.  
  1851.  
  1852. <!-- --->
  1853. <li><a href="LINKHERE" title="opposite blog">
  1854. <span class="icon-heart"></span>
  1855. </a></li>
  1856.  
  1857.  
  1858. <!-- --->
  1859. <li title="relationships">
  1860. <a href="#?w=auto" rel="cn10" class="poplight">
  1861. <span class="icon-people"></span>
  1862. </a></li>
  1863.  
  1864.  
  1865. <!-- --->
  1866. <li title="discord/tumblr">
  1867. <span class="icon-settings"></span>
  1868. </li>
  1869.  
  1870.  
  1871. </ul></div>
  1872.  
  1873.  
  1874. <div class="rightie">
  1875. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1876. <div class="m_spotify">
  1877. <!-- ALBUM IMAGE -->
  1878. <img src="https://via.placeholder.com/80x80">
  1879. <ul>
  1880. <li>SONG NAME</li>
  1881. <li>BAND</li>
  1882. <li>ALBUM</li>
  1883. </ul>
  1884. </div>
  1885.  
  1886.  
  1887. <!-- ( MUSE ) PICTURE -->
  1888. <div class="m_picture">
  1889. <!-- MUSE PICTURE -->
  1890. <img src="https://via.placeholder.com/370x330">
  1891. </div></div>
  1892.  
  1893.  
  1894. </div> <!-- ◦ ◠ END OF MUSE 010 ◞ ◦ -->
  1895.  
  1896.  
  1897.  
  1898.  
  1899. <!-- ◦ ◠ MUSE #011 ◞ ◦ -->
  1900. <div class="content" id="ms11">
  1901.  
  1902.  
  1903. <div class="leftie">
  1904. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1905. <div class="m_header">
  1906. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1907. <!-- N A M E --> <h2> MUSE NAME </h2>
  1908. <!-- Q U O T E -->
  1909. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  1910. </div>
  1911.  
  1912. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1913. <div class="m_biography">
  1914.  
  1915.  
  1916.  
  1917.  
  1918. <!-- ( DEJABOO ) VERSION -->
  1919. <!-- You can use this version for long biographs or more than one paragraph. -->
  1920.  
  1921. <article class="b_dejaboo">
  1922. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1923.  
  1924. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1925.  
  1926. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  1927. </article>
  1928.  
  1929.  
  1930. <!-- ( A C E ) VERSION -->
  1931. <!-- This is ideal when you want only short headcanons instead
  1932. of a biography. -->
  1933.  
  1934. <article class="b_ace">
  1935. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1936.  
  1937. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1938.  
  1939. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1940.  
  1941. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1942.  
  1943. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  1944.  
  1945. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  1946.  
  1947. </article>
  1948.  
  1949.  
  1950. </div>
  1951.  
  1952. <!-- ( MUSE ) BASIC INFORMATION -->
  1953. <div class="m_basics"><ul>
  1954. <li><b>NAME</b>Lorem Ipsum</li>
  1955. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1956. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1957. <li><b>AGE</b>Lorem Ipsum</li>
  1958. <li><b>GENDER</b>Lorem Ipsum</li>
  1959. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1960. </ul><ul>
  1961. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1962. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1963. <li><b>STATUS</b>Lorem Ipsum</li>
  1964. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1965. <li><b>LOCATION</b>Lorem Ipsum</li>
  1966. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1967. </ul></div></div>
  1968.  
  1969. <!-- ( MUSE ) LINKS -->
  1970. <div class="m_links"><ul>
  1971.  
  1972. <!-- --->
  1973. <li><a href="LINKHERE" title="muse blog">
  1974. <span class="icon-user"></span>
  1975. </a></li>
  1976.  
  1977.  
  1978. <!-- --->
  1979. <li><a href="LINKHERE" title="musing tag">
  1980. <span class="icon-tag"></span>
  1981. </a></li>
  1982.  
  1983.  
  1984. <!-- --->
  1985. <li><a href="LINKHERE" title="opposite blog">
  1986. <span class="icon-heart"></span>
  1987. </a></li>
  1988.  
  1989.  
  1990. <!-- --->
  1991. <li title="relationships">
  1992. <a href="#?w=auto" rel="cn11" class="poplight">
  1993. <span class="icon-people"></span>
  1994. </a></li>
  1995.  
  1996.  
  1997. <!-- --->
  1998. <li title="discord/tumblr">
  1999. <span class="icon-settings"></span>
  2000. </li>
  2001.  
  2002.  
  2003. </ul></div>
  2004.  
  2005.  
  2006. <div class="rightie">
  2007. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  2008. <div class="m_spotify">
  2009. <!-- ALBUM IMAGE -->
  2010. <img src="https://via.placeholder.com/80x80">
  2011. <ul>
  2012. <li>SONG NAME</li>
  2013. <li>BAND</li>
  2014. <li>ALBUM</li>
  2015. </ul>
  2016. </div>
  2017.  
  2018.  
  2019. <!-- ( MUSE ) PICTURE -->
  2020. <div class="m_picture">
  2021. <!-- MUSE PICTURE -->
  2022. <img src="https://via.placeholder.com/370x330">
  2023. </div></div>
  2024.  
  2025.  
  2026. </div> <!-- ◦ ◠ END OF MUSE 011 ◞ ◦ -->
  2027.  
  2028.  
  2029.  
  2030.  
  2031. <!-- ◦ ◠ MUSE #012 ◞ ◦ -->
  2032. <div class="content" id="ms12">
  2033.  
  2034.  
  2035. <div class="leftie">
  2036. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  2037. <div class="m_header">
  2038. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  2039. <!-- N A M E --> <h2> MUSE NAME </h2>
  2040. <!-- Q U O T E -->
  2041. <p> You can put in here a quote, music lyrics or anything you would like. It looks better with two lines but you can just write one. </p>
  2042. </div>
  2043.  
  2044. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  2045. <div class="m_biography">
  2046.  
  2047.  
  2048.  
  2049.  
  2050. <!-- ( DEJABOO ) VERSION -->
  2051. <!-- You can use this version for long biographs or more than one paragraph. -->
  2052.  
  2053. <article class="b_dejaboo">
  2054. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  2055.  
  2056. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  2057.  
  2058. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  2059. </article>
  2060.  
  2061.  
  2062. <!-- ( A C E ) VERSION -->
  2063. <!-- This is ideal when you want only short headcanons instead
  2064. of a biography. -->
  2065.  
  2066. <article class="b_ace">
  2067. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  2068.  
  2069. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  2070.  
  2071. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  2072.  
  2073. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  2074.  
  2075. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim.</p>
  2076.  
  2077. <p><tt>Lorem ipsum dolor sit amet</tt> , consectetur adipiscing elit. <b>Fusce lobortis</b> arcu ac enim <i>malesuada dignissim</i>. Aenean sapien lorem, <strong>sagittis et sem</strong> a, congue lacinia nulla. Integer massa sapien, <u>maximus quis</u> magna at, euismod mattis enim. </p>
  2078.  
  2079. </article>
  2080.  
  2081.  
  2082. </div>
  2083.  
  2084. <!-- ( MUSE ) BASIC INFORMATION -->
  2085. <div class="m_basics"><ul>
  2086. <li><b>NAME</b>Lorem Ipsum</li>
  2087. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  2088. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  2089. <li><b>AGE</b>Lorem Ipsum</li>
  2090. <li><b>GENDER</b>Lorem Ipsum</li>
  2091. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  2092. </ul><ul>
  2093. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  2094. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  2095. <li><b>STATUS</b>Lorem Ipsum</li>
  2096. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  2097. <li><b>LOCATION</b>Lorem Ipsum</li>
  2098. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  2099. </ul></div></div>
  2100.  
  2101. <!-- ( MUSE ) LINKS -->
  2102. <div class="m_links"><ul>
  2103.  
  2104. <!-- --->
  2105. <li><a href="LINKHERE" title="muse blog">
  2106. <span class="icon-user"></span>
  2107. </a></li>
  2108.  
  2109.  
  2110. <!-- --->
  2111. <li><a href="LINKHERE" title="musing tag">
  2112. <span class="icon-tag"></span>
  2113. </a></li>
  2114.  
  2115.  
  2116. <!-- --->
  2117. <li><a href="LINKHERE" title="opposite blog">
  2118. <span class="icon-heart"></span>
  2119. </a></li>
  2120.  
  2121.  
  2122. <!-- --->
  2123. <li title="relationships">
  2124. <a href="#?w=auto" rel="cn12" class="poplight">
  2125. <span class="icon-people"></span>
  2126. </a></li>
  2127.  
  2128.  
  2129. <!-- --->
  2130. <li title="discord/tumblr">
  2131. <span class="icon-settings"></span>
  2132. </li>
  2133.  
  2134.  
  2135. </ul></div>
  2136.  
  2137.  
  2138. <div class="rightie">
  2139. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  2140. <div class="m_spotify">
  2141. <!-- ALBUM IMAGE -->
  2142. <img src="https://via.placeholder.com/80x80">
  2143. <ul>
  2144. <li>SONG NAME</li>
  2145. <li>BAND</li>
  2146. <li>ALBUM</li>
  2147. </ul>
  2148. </div>
  2149.  
  2150.  
  2151. <!-- ( MUSE ) PICTURE -->
  2152. <div class="m_picture">
  2153. <!-- MUSE PICTURE -->
  2154. <img src="https://via.placeholder.com/370x330">
  2155. </div></div>
  2156.  
  2157.  
  2158. </div> <!-- ◦ ◠ END OF MUSE 012 ◞ ◦ -->
  2159.  
  2160.  
  2161. </div>
  2162. <!-- --------- ◦ ◠ END OF MAIN ◞ ◦ ------------- -->
  2163.  
  2164.  
  2165.  
  2166.  
  2167.  
  2168.  
  2169.  
  2170.  
  2171. <!-- --------- ◦ ◠ LOWERBAR ◞ ◦ ------------- -->
  2172. <div class="lowerbar">
  2173.  
  2174.  
  2175. <!-- ( LOWERBAR ) TITLE -->
  2176. <article class="lw_title">
  2177. <!-- TITLE --><h3>Lorem ipsum dolor sit </h3>
  2178. </article>
  2179.  
  2180.  
  2181. <!-- ( LOWERBAR ) MUSE NAVIGATION -->
  2182. <div class="lw_navi"><ul>
  2183.  
  2184.  
  2185. <!-- MUSE 001 -->
  2186. <li title="MUSE NAME" onclick="widTab(event, 'ms1')">
  2187. <!-- MUSE ICON -->
  2188. <img src="https://via.placeholder.com/25x25">
  2189. </li>
  2190.  
  2191.  
  2192. <!-- MUSE 002 -->
  2193. <li title="MUSE NAME" onclick="widTab(event, 'ms2')">
  2194. <!-- MUSE ICON -->
  2195. <img src="https://via.placeholder.com/25x25">
  2196. </li>
  2197.  
  2198.  
  2199. <!-- MUSE 003 -->
  2200. <li title="MUSE NAME" onclick="widTab(event, 'ms3')">
  2201. <!-- MUSE ICON -->
  2202. <img src="https://via.placeholder.com/25x25">
  2203. </li>
  2204.  
  2205.  
  2206. <!-- MUSE 004 -->
  2207. <li title="MUSE NAME" onclick="widTab(event, 'ms4')">
  2208. <!-- MUSE ICON -->
  2209. <img src="https://via.placeholder.com/25x25">
  2210. </li>
  2211.  
  2212.  
  2213. <!-- MUSE 005 -->
  2214. <li title="MUSE NAME" onclick="widTab(event, 'ms5')">
  2215. <!-- MUSE ICON -->
  2216. <img src="https://via.placeholder.com/25x25">
  2217. </li>
  2218.  
  2219.  
  2220. <!-- MUSE 006 -->
  2221. <li title="MUSE NAME" onclick="widTab(event, 'ms6')">
  2222. <!-- MUSE ICON -->
  2223. <img src="https://via.placeholder.com/25x25">
  2224. </li>
  2225.  
  2226.  
  2227. <!-- MUSE 007 -->
  2228. <li title="MUSE NAME" onclick="widTab(event, 'ms7')">
  2229. <!-- MUSE ICON -->
  2230. <img src="https://via.placeholder.com/25x25">
  2231. </li>
  2232.  
  2233.  
  2234. <!-- MUSE 008 -->
  2235. <li title="MUSE NAME" onclick="widTab(event, 'ms8')">
  2236. <!-- MUSE ICON -->
  2237. <img src="https://via.placeholder.com/25x25">
  2238. </li>
  2239.  
  2240.  
  2241. <!-- MUSE 009 -->
  2242. <li title="MUSE NAME" onclick="widTab(event, 'ms9')">
  2243. <!-- MUSE ICON -->
  2244. <img src="https://via.placeholder.com/25x25">
  2245. </li>
  2246.  
  2247.  
  2248. <!-- MUSE 010 -->
  2249. <li title="MUSE NAME" onclick="widTab(event, 'ms10')">
  2250. <!-- MUSE ICON -->
  2251. <img src="https://via.placeholder.com/25x25">
  2252. </li>
  2253.  
  2254.  
  2255. <!-- MUSE 011 -->
  2256. <li title="MUSE NAME" onclick="widTab(event, 'ms11')">
  2257. <!-- MUSE ICON -->
  2258. <img src="https://via.placeholder.com/25x25">
  2259. </li>
  2260.  
  2261.  
  2262. <!-- MUSE 012 -->
  2263. <li title="MUSE NAME" onclick="widTab(event, 'ms12')">
  2264. <!-- MUSE ICON -->
  2265. <img src="https://via.placeholder.com/25x25">
  2266. </li>
  2267.  
  2268.  
  2269. </ul></div>
  2270.  
  2271.  
  2272.  
  2273. </div>
  2274.  
  2275.  
  2276.  
  2277.  
  2278.  
  2279.  
  2280.  
  2281.  
  2282.  
  2283. </div> <!-- ◦ ◠ END OF CONTAINER ◞ ◦ -->
  2284.  
  2285.  
  2286.  
  2287.  
  2288.  
  2289.  
  2290.  
  2291.  
  2292.  
  2293.  
  2294.  
  2295. </body>
  2296.  
  2297. <!-- CONNECTIONS TAB -->
  2298.  
  2299.  
  2300. <!-- MUSE 001 -->
  2301. <div id="cn1" class="popup_block">
  2302.  
  2303. <div class="connections">
  2304.  
  2305.  
  2306. <!-- CONNECTION #001 -->
  2307. <article class="cont_cnn">
  2308. <div class="cont_hd">
  2309. <!-- ( CNN ) MUSE PICTURE -->
  2310. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2311. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2312. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2313. <!-- ( CNN ) LINKS -->
  2314. <ul>
  2315. <li title="MUSE BLOG">
  2316. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2317.  
  2318. <li title="CONNECTION TAG">
  2319. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2320.  
  2321. <li title="LINKNAME">
  2322. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2323. </ul>
  2324.  
  2325. </div>
  2326. <!-- ( CNN ) DESCRIPTION -->
  2327. <p>
  2328. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2329. </p>
  2330. </article>
  2331.  
  2332.  
  2333.  
  2334. <!-- CONNECTION #002 -->
  2335. <article class="cont_cnn">
  2336. <div class="cont_hd">
  2337. <!-- ( CNN ) MUSE PICTURE -->
  2338. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2339. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2340. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2341. <!-- ( CNN ) LINKS -->
  2342. <ul>
  2343. <li title="MUSE BLOG">
  2344. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2345.  
  2346. <li title="CONNECTION TAG">
  2347. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2348.  
  2349. <li title="LINKNAME">
  2350. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2351. </ul>
  2352.  
  2353. </div>
  2354. <!-- ( CNN ) DESCRIPTION -->
  2355. <p>
  2356. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2357. </p>
  2358. </article>
  2359.  
  2360.  
  2361.  
  2362. <!-- CONNECTION #003 -->
  2363. <article class="cont_cnn">
  2364. <div class="cont_hd">
  2365. <!-- ( CNN ) MUSE PICTURE -->
  2366. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2367. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2368. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2369. <!-- ( CNN ) LINKS -->
  2370. <ul>
  2371. <li title="MUSE BLOG">
  2372. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2373.  
  2374. <li title="CONNECTION TAG">
  2375. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2376.  
  2377. <li title="LINKNAME">
  2378. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2379. </ul>
  2380.  
  2381. </div>
  2382. <!-- ( CNN ) DESCRIPTION -->
  2383. <p>
  2384. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2385. </p>
  2386. </article>
  2387.  
  2388.  
  2389.  
  2390. </div>
  2391.  
  2392. </div></div></div></div></div></div></div></div></div></div></div>
  2393.  
  2394.  
  2395.  
  2396.  
  2397.  
  2398. <!-- MUSE 002 -->
  2399. <div id="cn2" class="popup_block">
  2400.  
  2401. <div class="connections">
  2402.  
  2403.  
  2404. <!-- CONNECTION #001 -->
  2405. <article class="cont_cnn">
  2406. <div class="cont_hd">
  2407. <!-- ( CNN ) MUSE PICTURE -->
  2408. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2409. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2410. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2411. <!-- ( CNN ) LINKS -->
  2412. <ul>
  2413. <li title="MUSE BLOG">
  2414. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2415.  
  2416. <li title="CONNECTION TAG">
  2417. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2418.  
  2419. <li title="LINKNAME">
  2420. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2421. </ul>
  2422.  
  2423. </div>
  2424. <!-- ( CNN ) DESCRIPTION -->
  2425. <p>
  2426. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2427. </p>
  2428. </article>
  2429.  
  2430.  
  2431.  
  2432. <!-- CONNECTION #002 -->
  2433. <article class="cont_cnn">
  2434. <div class="cont_hd">
  2435. <!-- ( CNN ) MUSE PICTURE -->
  2436. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2437. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2438. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2439. <!-- ( CNN ) LINKS -->
  2440. <ul>
  2441. <li title="MUSE BLOG">
  2442. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2443.  
  2444. <li title="CONNECTION TAG">
  2445. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2446.  
  2447. <li title="LINKNAME">
  2448. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2449. </ul>
  2450.  
  2451. </div>
  2452. <!-- ( CNN ) DESCRIPTION -->
  2453. <p>
  2454. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2455. </p>
  2456. </article>
  2457.  
  2458.  
  2459.  
  2460. <!-- CONNECTION #003 -->
  2461. <article class="cont_cnn">
  2462. <div class="cont_hd">
  2463. <!-- ( CNN ) MUSE PICTURE -->
  2464. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2465. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2466. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2467. <!-- ( CNN ) LINKS -->
  2468. <ul>
  2469. <li title="MUSE BLOG">
  2470. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2471.  
  2472. <li title="CONNECTION TAG">
  2473. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2474.  
  2475. <li title="LINKNAME">
  2476. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2477. </ul>
  2478.  
  2479. </div>
  2480. <!-- ( CNN ) DESCRIPTION -->
  2481. <p>
  2482. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2483. </p>
  2484. </article>
  2485.  
  2486.  
  2487.  
  2488. </div>
  2489.  
  2490. </div></div></div></div></div></div></div></div></div></div></div>
  2491.  
  2492.  
  2493.  
  2494.  
  2495.  
  2496.  
  2497.  
  2498.  
  2499. <!-- MUSE 003 -->
  2500. <div id="cn3" class="popup_block">
  2501.  
  2502. <div class="connections">
  2503.  
  2504.  
  2505. <!-- CONNECTION #001 -->
  2506. <article class="cont_cnn">
  2507. <div class="cont_hd">
  2508. <!-- ( CNN ) MUSE PICTURE -->
  2509. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2510. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2511. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2512. <!-- ( CNN ) LINKS -->
  2513. <ul>
  2514. <li title="MUSE BLOG">
  2515. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2516.  
  2517. <li title="CONNECTION TAG">
  2518. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2519.  
  2520. <li title="LINKNAME">
  2521. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2522. </ul>
  2523.  
  2524. </div>
  2525. <!-- ( CNN ) DESCRIPTION -->
  2526. <p>
  2527. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2528. </p>
  2529. </article>
  2530.  
  2531.  
  2532.  
  2533. <!-- CONNECTION #002 -->
  2534. <article class="cont_cnn">
  2535. <div class="cont_hd">
  2536. <!-- ( CNN ) MUSE PICTURE -->
  2537. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2538. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2539. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2540. <!-- ( CNN ) LINKS -->
  2541. <ul>
  2542. <li title="MUSE BLOG">
  2543. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2544.  
  2545. <li title="CONNECTION TAG">
  2546. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2547.  
  2548. <li title="LINKNAME">
  2549. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2550. </ul>
  2551.  
  2552. </div>
  2553. <!-- ( CNN ) DESCRIPTION -->
  2554. <p>
  2555. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2556. </p>
  2557. </article>
  2558.  
  2559.  
  2560.  
  2561. <!-- CONNECTION #003 -->
  2562. <article class="cont_cnn">
  2563. <div class="cont_hd">
  2564. <!-- ( CNN ) MUSE PICTURE -->
  2565. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2566. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2567. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2568. <!-- ( CNN ) LINKS -->
  2569. <ul>
  2570. <li title="MUSE BLOG">
  2571. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2572.  
  2573. <li title="CONNECTION TAG">
  2574. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2575.  
  2576. <li title="LINKNAME">
  2577. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2578. </ul>
  2579.  
  2580. </div>
  2581. <!-- ( CNN ) DESCRIPTION -->
  2582. <p>
  2583. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2584. </p>
  2585. </article>
  2586.  
  2587.  
  2588.  
  2589.  
  2590. </div>
  2591.  
  2592. </div></div></div></div></div></div></div></div></div></div></div>
  2593.  
  2594.  
  2595.  
  2596.  
  2597.  
  2598.  
  2599. <!-- MUSE 004 -->
  2600. <div id="cn4" class="popup_block">
  2601.  
  2602. <div class="connections">
  2603.  
  2604.  
  2605. <!-- CONNECTION #001 -->
  2606. <article class="cont_cnn">
  2607. <div class="cont_hd">
  2608. <!-- ( CNN ) MUSE PICTURE -->
  2609. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2610. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2611. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2612. <!-- ( CNN ) LINKS -->
  2613. <ul>
  2614. <li title="MUSE BLOG">
  2615. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2616.  
  2617. <li title="CONNECTION TAG">
  2618. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2619.  
  2620. <li title="LINKNAME">
  2621. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2622. </ul>
  2623.  
  2624. </div>
  2625. <!-- ( CNN ) DESCRIPTION -->
  2626. <p>
  2627. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2628. </p>
  2629. </article>
  2630.  
  2631.  
  2632.  
  2633. <!-- CONNECTION #002 -->
  2634. <article class="cont_cnn">
  2635. <div class="cont_hd">
  2636. <!-- ( CNN ) MUSE PICTURE -->
  2637. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2638. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2639. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2640. <!-- ( CNN ) LINKS -->
  2641. <ul>
  2642. <li title="MUSE BLOG">
  2643. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2644.  
  2645. <li title="CONNECTION TAG">
  2646. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2647.  
  2648. <li title="LINKNAME">
  2649. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2650. </ul>
  2651.  
  2652. </div>
  2653. <!-- ( CNN ) DESCRIPTION -->
  2654. <p>
  2655. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2656. </p>
  2657. </article>
  2658.  
  2659.  
  2660.  
  2661. <!-- CONNECTION #003 -->
  2662. <article class="cont_cnn">
  2663. <div class="cont_hd">
  2664. <!-- ( CNN ) MUSE PICTURE -->
  2665. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2666. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2667. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2668. <!-- ( CNN ) LINKS -->
  2669. <ul>
  2670. <li title="MUSE BLOG">
  2671. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2672.  
  2673. <li title="CONNECTION TAG">
  2674. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2675.  
  2676. <li title="LINKNAME">
  2677. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2678. </ul>
  2679.  
  2680. </div>
  2681. <!-- ( CNN ) DESCRIPTION -->
  2682. <p>
  2683. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2684. </p>
  2685. </article>
  2686.  
  2687.  
  2688. </div>
  2689.  
  2690. </div></div></div></div></div></div></div></div></div></div></div>
  2691.  
  2692.  
  2693.  
  2694.  
  2695.  
  2696. <!-- MUSE 005 -->
  2697. <div id="cn5" class="popup_block">
  2698.  
  2699. <div class="connections">
  2700.  
  2701.  
  2702. <!-- CONNECTION #001 -->
  2703. <article class="cont_cnn">
  2704. <div class="cont_hd">
  2705. <!-- ( CNN ) MUSE PICTURE -->
  2706. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2707. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2708. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2709. <!-- ( CNN ) LINKS -->
  2710. <ul>
  2711. <li title="MUSE BLOG">
  2712. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2713.  
  2714. <li title="CONNECTION TAG">
  2715. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2716.  
  2717. <li title="LINKNAME">
  2718. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2719. </ul>
  2720.  
  2721. </div>
  2722. <!-- ( CNN ) DESCRIPTION -->
  2723. <p>
  2724. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2725. </p>
  2726. </article>
  2727.  
  2728.  
  2729.  
  2730. <!-- CONNECTION #002 -->
  2731. <article class="cont_cnn">
  2732. <div class="cont_hd">
  2733. <!-- ( CNN ) MUSE PICTURE -->
  2734. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2735. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2736. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2737. <!-- ( CNN ) LINKS -->
  2738. <ul>
  2739. <li title="MUSE BLOG">
  2740. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2741.  
  2742. <li title="CONNECTION TAG">
  2743. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2744.  
  2745. <li title="LINKNAME">
  2746. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2747. </ul>
  2748.  
  2749. </div>
  2750. <!-- ( CNN ) DESCRIPTION -->
  2751. <p>
  2752. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2753. </p>
  2754. </article>
  2755.  
  2756.  
  2757.  
  2758. <!-- CONNECTION #003 -->
  2759. <article class="cont_cnn">
  2760. <div class="cont_hd">
  2761. <!-- ( CNN ) MUSE PICTURE -->
  2762. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2763. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2764. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2765. <!-- ( CNN ) LINKS -->
  2766. <ul>
  2767. <li title="MUSE BLOG">
  2768. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2769.  
  2770. <li title="CONNECTION TAG">
  2771. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2772.  
  2773. <li title="LINKNAME">
  2774. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2775. </ul>
  2776.  
  2777. </div>
  2778. <!-- ( CNN ) DESCRIPTION -->
  2779. <p>
  2780. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2781. </p>
  2782. </article>
  2783.  
  2784.  
  2785. </div>
  2786.  
  2787. </div></div></div></div></div></div></div></div></div></div></div>
  2788.  
  2789.  
  2790.  
  2791.  
  2792.  
  2793. <!-- MUSE 006 -->
  2794. <div id="cn6" class="popup_block">
  2795.  
  2796. <div class="connections">
  2797.  
  2798.  
  2799. <!-- CONNECTION #001 -->
  2800. <article class="cont_cnn">
  2801. <div class="cont_hd">
  2802. <!-- ( CNN ) MUSE PICTURE -->
  2803. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2804. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2805. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2806. <!-- ( CNN ) LINKS -->
  2807. <ul>
  2808. <li title="MUSE BLOG">
  2809. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2810.  
  2811. <li title="CONNECTION TAG">
  2812. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2813.  
  2814. <li title="LINKNAME">
  2815. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2816. </ul>
  2817.  
  2818. </div>
  2819. <!-- ( CNN ) DESCRIPTION -->
  2820. <p>
  2821. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2822. </p>
  2823. </article>
  2824.  
  2825.  
  2826.  
  2827. <!-- CONNECTION #002 -->
  2828. <article class="cont_cnn">
  2829. <div class="cont_hd">
  2830. <!-- ( CNN ) MUSE PICTURE -->
  2831. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2832. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2833. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2834. <!-- ( CNN ) LINKS -->
  2835. <ul>
  2836. <li title="MUSE BLOG">
  2837. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2838.  
  2839. <li title="CONNECTION TAG">
  2840. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2841.  
  2842. <li title="LINKNAME">
  2843. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2844. </ul>
  2845.  
  2846. </div>
  2847. <!-- ( CNN ) DESCRIPTION -->
  2848. <p>
  2849. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2850. </p>
  2851. </article>
  2852.  
  2853.  
  2854.  
  2855. <!-- CONNECTION #003 -->
  2856. <article class="cont_cnn">
  2857. <div class="cont_hd">
  2858. <!-- ( CNN ) MUSE PICTURE -->
  2859. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2860. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2861. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2862. <!-- ( CNN ) LINKS -->
  2863. <ul>
  2864. <li title="MUSE BLOG">
  2865. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2866.  
  2867. <li title="CONNECTION TAG">
  2868. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2869.  
  2870. <li title="LINKNAME">
  2871. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2872. </ul>
  2873.  
  2874. </div>
  2875. <!-- ( CNN ) DESCRIPTION -->
  2876. <p>
  2877. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2878. </p>
  2879. </article>
  2880.  
  2881.  
  2882.  
  2883. </div>
  2884.  
  2885. </div></div></div></div></div></div></div></div></div></div></div>
  2886.  
  2887.  
  2888.  
  2889.  
  2890.  
  2891. <!-- MUSE 007 -->
  2892. <div id="cn7" class="popup_block">
  2893.  
  2894. <div class="connections">
  2895.  
  2896.  
  2897. <!-- CONNECTION #001 -->
  2898. <article class="cont_cnn">
  2899. <div class="cont_hd">
  2900. <!-- ( CNN ) MUSE PICTURE -->
  2901. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2902. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2903. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2904. <!-- ( CNN ) LINKS -->
  2905. <ul>
  2906. <li title="MUSE BLOG">
  2907. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2908.  
  2909. <li title="CONNECTION TAG">
  2910. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2911.  
  2912. <li title="LINKNAME">
  2913. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2914. </ul>
  2915.  
  2916. </div>
  2917. <!-- ( CNN ) DESCRIPTION -->
  2918. <p>
  2919. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2920. </p>
  2921. </article>
  2922.  
  2923.  
  2924.  
  2925. <!-- CONNECTION #002 -->
  2926. <article class="cont_cnn">
  2927. <div class="cont_hd">
  2928. <!-- ( CNN ) MUSE PICTURE -->
  2929. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2930. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2931. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2932. <!-- ( CNN ) LINKS -->
  2933. <ul>
  2934. <li title="MUSE BLOG">
  2935. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2936.  
  2937. <li title="CONNECTION TAG">
  2938. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2939.  
  2940. <li title="LINKNAME">
  2941. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2942. </ul>
  2943.  
  2944. </div>
  2945. <!-- ( CNN ) DESCRIPTION -->
  2946. <p>
  2947. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2948. </p>
  2949. </article>
  2950.  
  2951.  
  2952.  
  2953. <!-- CONNECTION #003 -->
  2954. <article class="cont_cnn">
  2955. <div class="cont_hd">
  2956. <!-- ( CNN ) MUSE PICTURE -->
  2957. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2958. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2959. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2960. <!-- ( CNN ) LINKS -->
  2961. <ul>
  2962. <li title="MUSE BLOG">
  2963. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2964.  
  2965. <li title="CONNECTION TAG">
  2966. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2967.  
  2968. <li title="LINKNAME">
  2969. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2970. </ul>
  2971.  
  2972. </div>
  2973. <!-- ( CNN ) DESCRIPTION -->
  2974. <p>
  2975. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  2976. </p>
  2977. </article>
  2978.  
  2979.  
  2980.  
  2981. </div>
  2982.  
  2983. </div></div></div></div></div></div></div></div></div></div></div>
  2984.  
  2985.  
  2986.  
  2987.  
  2988.  
  2989. <!-- MUSE 008 -->
  2990. <div id="cn8" class="popup_block">
  2991.  
  2992. <div class="connections">
  2993.  
  2994.  
  2995. <!-- CONNECTION #001 -->
  2996. <article class="cont_cnn">
  2997. <div class="cont_hd">
  2998. <!-- ( CNN ) MUSE PICTURE -->
  2999. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3000. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3001. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3002. <!-- ( CNN ) LINKS -->
  3003. <ul>
  3004. <li title="MUSE BLOG">
  3005. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3006.  
  3007. <li title="CONNECTION TAG">
  3008. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3009.  
  3010. <li title="LINKNAME">
  3011. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3012. </ul>
  3013.  
  3014. </div>
  3015. <!-- ( CNN ) DESCRIPTION -->
  3016. <p>
  3017. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3018. </p>
  3019. </article>
  3020.  
  3021.  
  3022.  
  3023. <!-- CONNECTION #002 -->
  3024. <article class="cont_cnn">
  3025. <div class="cont_hd">
  3026. <!-- ( CNN ) MUSE PICTURE -->
  3027. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3028. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3029. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3030. <!-- ( CNN ) LINKS -->
  3031. <ul>
  3032. <li title="MUSE BLOG">
  3033. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3034.  
  3035. <li title="CONNECTION TAG">
  3036. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3037.  
  3038. <li title="LINKNAME">
  3039. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3040. </ul>
  3041.  
  3042. </div>
  3043. <!-- ( CNN ) DESCRIPTION -->
  3044. <p>
  3045. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3046. </p>
  3047. </article>
  3048.  
  3049.  
  3050.  
  3051. <!-- CONNECTION #003 -->
  3052. <article class="cont_cnn">
  3053. <div class="cont_hd">
  3054. <!-- ( CNN ) MUSE PICTURE -->
  3055. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3056. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3057. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3058. <!-- ( CNN ) LINKS -->
  3059. <ul>
  3060. <li title="MUSE BLOG">
  3061. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3062.  
  3063. <li title="CONNECTION TAG">
  3064. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3065.  
  3066. <li title="LINKNAME">
  3067. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3068. </ul>
  3069.  
  3070. </div>
  3071. <!-- ( CNN ) DESCRIPTION -->
  3072. <p>
  3073. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3074. </p>
  3075. </article>
  3076.  
  3077.  
  3078.  
  3079. </div>
  3080.  
  3081. </div></div></div></div></div></div></div></div></div></div></div>
  3082.  
  3083.  
  3084.  
  3085.  
  3086.  
  3087.  
  3088. <!-- MUSE 009 -->
  3089. <div id="cn9" class="popup_block">
  3090.  
  3091. <div class="connections">
  3092.  
  3093.  
  3094. <!-- CONNECTION #001 -->
  3095. <article class="cont_cnn">
  3096. <div class="cont_hd">
  3097. <!-- ( CNN ) MUSE PICTURE -->
  3098. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3099. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3100. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3101. <!-- ( CNN ) LINKS -->
  3102. <ul>
  3103. <li title="MUSE BLOG">
  3104. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3105.  
  3106. <li title="CONNECTION TAG">
  3107. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3108.  
  3109. <li title="LINKNAME">
  3110. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3111. </ul>
  3112.  
  3113. </div>
  3114. <!-- ( CNN ) DESCRIPTION -->
  3115. <p>
  3116. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3117. </p>
  3118. </article>
  3119.  
  3120.  
  3121.  
  3122. <!-- CONNECTION #002 -->
  3123. <article class="cont_cnn">
  3124. <div class="cont_hd">
  3125. <!-- ( CNN ) MUSE PICTURE -->
  3126. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3127. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3128. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3129. <!-- ( CNN ) LINKS -->
  3130. <ul>
  3131. <li title="MUSE BLOG">
  3132. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3133.  
  3134. <li title="CONNECTION TAG">
  3135. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3136.  
  3137. <li title="LINKNAME">
  3138. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3139. </ul>
  3140.  
  3141. </div>
  3142. <!-- ( CNN ) DESCRIPTION -->
  3143. <p>
  3144. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3145. </p>
  3146. </article>
  3147.  
  3148.  
  3149.  
  3150. <!-- CONNECTION #003 -->
  3151. <article class="cont_cnn">
  3152. <div class="cont_hd">
  3153. <!-- ( CNN ) MUSE PICTURE -->
  3154. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3155. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3156. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3157. <!-- ( CNN ) LINKS -->
  3158. <ul>
  3159. <li title="MUSE BLOG">
  3160. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3161.  
  3162. <li title="CONNECTION TAG">
  3163. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3164.  
  3165. <li title="LINKNAME">
  3166. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3167. </ul>
  3168.  
  3169. </div>
  3170. <!-- ( CNN ) DESCRIPTION -->
  3171. <p>
  3172. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3173. </p>
  3174. </article>
  3175.  
  3176.  
  3177.  
  3178. </div>
  3179.  
  3180. </div></div></div></div></div></div></div></div></div></div></div>
  3181.  
  3182.  
  3183.  
  3184.  
  3185.  
  3186.  
  3187. <!-- MUSE 010 -->
  3188. <div id="cn10" class="popup_block">
  3189.  
  3190. <div class="connections">
  3191.  
  3192.  
  3193. <!-- CONNECTION #001 -->
  3194. <article class="cont_cnn">
  3195. <div class="cont_hd">
  3196. <!-- ( CNN ) MUSE PICTURE -->
  3197. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3198. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3199. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3200. <!-- ( CNN ) LINKS -->
  3201. <ul>
  3202. <li title="MUSE BLOG">
  3203. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3204.  
  3205. <li title="CONNECTION TAG">
  3206. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3207.  
  3208. <li title="LINKNAME">
  3209. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3210. </ul>
  3211.  
  3212. </div>
  3213. <!-- ( CNN ) DESCRIPTION -->
  3214. <p>
  3215. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3216. </p>
  3217. </article>
  3218.  
  3219.  
  3220.  
  3221. <!-- CONNECTION #002 -->
  3222. <article class="cont_cnn">
  3223. <div class="cont_hd">
  3224. <!-- ( CNN ) MUSE PICTURE -->
  3225. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3226. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3227. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3228. <!-- ( CNN ) LINKS -->
  3229. <ul>
  3230. <li title="MUSE BLOG">
  3231. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3232.  
  3233. <li title="CONNECTION TAG">
  3234. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3235.  
  3236. <li title="LINKNAME">
  3237. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3238. </ul>
  3239.  
  3240. </div>
  3241. <!-- ( CNN ) DESCRIPTION -->
  3242. <p>
  3243. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3244. </p>
  3245. </article>
  3246.  
  3247.  
  3248.  
  3249. <!-- CONNECTION #003 -->
  3250. <article class="cont_cnn">
  3251. <div class="cont_hd">
  3252. <!-- ( CNN ) MUSE PICTURE -->
  3253. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3254. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3255. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3256. <!-- ( CNN ) LINKS -->
  3257. <ul>
  3258. <li title="MUSE BLOG">
  3259. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3260.  
  3261. <li title="CONNECTION TAG">
  3262. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3263.  
  3264. <li title="LINKNAME">
  3265. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3266. </ul>
  3267.  
  3268. </div>
  3269. <!-- ( CNN ) DESCRIPTION -->
  3270. <p>
  3271. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3272. </p>
  3273. </article>
  3274.  
  3275.  
  3276.  
  3277. </div>
  3278.  
  3279. </div></div></div></div></div></div></div></div></div></div></div>
  3280.  
  3281.  
  3282.  
  3283.  
  3284.  
  3285. <!-- MUSE 011 -->
  3286. <div id="cn11" class="popup_block">
  3287.  
  3288. <div class="connections">
  3289.  
  3290.  
  3291. <!-- CONNECTION #001 -->
  3292. <article class="cont_cnn">
  3293. <div class="cont_hd">
  3294. <!-- ( CNN ) MUSE PICTURE -->
  3295. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3296. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3297. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3298. <!-- ( CNN ) LINKS -->
  3299. <ul>
  3300. <li title="MUSE BLOG">
  3301. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3302.  
  3303. <li title="CONNECTION TAG">
  3304. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3305.  
  3306. <li title="LINKNAME">
  3307. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3308. </ul>
  3309.  
  3310. </div>
  3311. <!-- ( CNN ) DESCRIPTION -->
  3312. <p>
  3313. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3314. </p>
  3315. </article>
  3316.  
  3317.  
  3318.  
  3319. <!-- CONNECTION #002 -->
  3320. <article class="cont_cnn">
  3321. <div class="cont_hd">
  3322. <!-- ( CNN ) MUSE PICTURE -->
  3323. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3324. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3325. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3326. <!-- ( CNN ) LINKS -->
  3327. <ul>
  3328. <li title="MUSE BLOG">
  3329. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3330.  
  3331. <li title="CONNECTION TAG">
  3332. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3333.  
  3334. <li title="LINKNAME">
  3335. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3336. </ul>
  3337.  
  3338. </div>
  3339. <!-- ( CNN ) DESCRIPTION -->
  3340. <p>
  3341. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3342. </p>
  3343. </article>
  3344.  
  3345.  
  3346.  
  3347. <!-- CONNECTION #003 -->
  3348. <article class="cont_cnn">
  3349. <div class="cont_hd">
  3350. <!-- ( CNN ) MUSE PICTURE -->
  3351. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3352. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3353. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3354. <!-- ( CNN ) LINKS -->
  3355. <ul>
  3356. <li title="MUSE BLOG">
  3357. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3358.  
  3359. <li title="CONNECTION TAG">
  3360. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3361.  
  3362. <li title="LINKNAME">
  3363. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3364. </ul>
  3365.  
  3366. </div>
  3367. <!-- ( CNN ) DESCRIPTION -->
  3368. <p>
  3369. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3370. </p>
  3371. </article>
  3372.  
  3373.  
  3374.  
  3375. </div>
  3376.  
  3377. </div></div></div></div></div></div></div></div></div></div></div>
  3378.  
  3379.  
  3380.  
  3381.  
  3382.  
  3383.  
  3384. <!-- MUSE 012 -->
  3385. <div id="cn12" class="popup_block">
  3386.  
  3387. <div class="connections">
  3388.  
  3389.  
  3390. <!-- CONNECTION #001 -->
  3391. <article class="cont_cnn">
  3392. <div class="cont_hd">
  3393. <!-- ( CNN ) MUSE PICTURE -->
  3394. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3395. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3396. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3397. <!-- ( CNN ) LINKS -->
  3398. <ul>
  3399. <li title="MUSE BLOG">
  3400. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3401.  
  3402. <li title="CONNECTION TAG">
  3403. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3404.  
  3405. <li title="LINKNAME">
  3406. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3407. </ul>
  3408.  
  3409. </div>
  3410. <!-- ( CNN ) DESCRIPTION -->
  3411. <p>
  3412. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3413. </p>
  3414. </article>
  3415.  
  3416.  
  3417.  
  3418. <!-- CONNECTION #002 -->
  3419. <article class="cont_cnn">
  3420. <div class="cont_hd">
  3421. <!-- ( CNN ) MUSE PICTURE -->
  3422. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3423. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3424. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3425. <!-- ( CNN ) LINKS -->
  3426. <ul>
  3427. <li title="MUSE BLOG">
  3428. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3429.  
  3430. <li title="CONNECTION TAG">
  3431. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3432.  
  3433. <li title="LINKNAME">
  3434. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3435. </ul>
  3436.  
  3437. </div>
  3438. <!-- ( CNN ) DESCRIPTION -->
  3439. <p>
  3440. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3441. </p>
  3442. </article>
  3443.  
  3444.  
  3445.  
  3446. <!-- CONNECTION #003 -->
  3447. <article class="cont_cnn">
  3448. <div class="cont_hd">
  3449. <!-- ( CNN ) MUSE PICTURE -->
  3450. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3451. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3452. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3453. <!-- ( CNN ) LINKS -->
  3454. <ul>
  3455. <li title="MUSE BLOG">
  3456. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3457.  
  3458. <li title="CONNECTION TAG">
  3459. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3460.  
  3461. <li title="LINKNAME">
  3462. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3463. </ul>
  3464.  
  3465. </div>
  3466. <!-- ( CNN ) DESCRIPTION -->
  3467. <p>
  3468. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3469. </p>
  3470. </article>
  3471.  
  3472.  
  3473. </div>
  3474.  
  3475. </div></div></div></div></div></div></div></div></div></div></div>
  3476.  
  3477.  
  3478.  
  3479.  
  3480.  
  3481.  
  3482.  
  3483.  
  3484. <!-- IF YOU WANT TO ADD MORE CONNECTIONS JUST COPY THIS:
  3485.  
  3486.  
  3487. <article class="cont_cnn">
  3488. <div class="cont_hd">
  3489.  
  3490. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3491. <h1>CONNECTION</h1>
  3492. <br><h2>MUSE NAME</h2>
  3493.  
  3494. <ul>
  3495. <li title="MUSE BLOG">
  3496. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3497.  
  3498. <li title="CONNECTION TAG">
  3499. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3500.  
  3501. <li title="LINKNAME">
  3502. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3503. </ul>
  3504.  
  3505. </div>
  3506.  
  3507. <p>
  3508. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mu
  3509. </p>
  3510. </article>
  3511.  
  3512. AND PAST UNDER THE LAST CONNECTION, AFTER </article> but before </div> ---->
  3513.  
  3514.  
  3515.  
  3516.  
  3517.  
  3518. <!-- ( D E J A B O O ) VERSION
  3519. COPY FROM <article class="b_dejaboo"> to </article>
  3520. AND PAST AFTER <div class="m_biography">
  3521.  
  3522. You may exclude the paragraphs (from <p> to </p>) that you won't use and if you want to add more just copy (from <p> to </p>) and paste under the last one. But always before </article>
  3523.  
  3524. <article class="b_dejaboo">
  3525.  
  3526. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. Praesent sollicitudin lorem eu ipsum aliquet, at maximus ligula dictum. In imperdiet vehicula eros ac placerat. Curabitur venenatis tellus non auctor blandit. Etiam eleifend elit ac nisl elementum vulputate ac vel lorem. Vestibulum rutrum dui felis, a faucibus ligula lobortis at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  3527.  
  3528. <p>Nam placerat non purus eu aliquet. Morbi tristique tristique mi, quis accumsan metus pulvinar condimentum. Sed sed lorem nec neque tempus vulputate. Curabitur pulvinar massa at odio eleifend vestibulum. Proin nisi tellus, suscipit vitae sodales eget, sagittis eget arcu. Sed sit amet elit a lacus laoreet mattis. Vestibulum id odio in diam feugiat sagittis. Proin nisl est, bibendum ut porttitor a, luctus euismod lorem. Nullam non viverra odio, sed luctus sem. Duis non neque sed diam bibendum lacinia a et urna. In venenatis mattis porta. Cras sapien odio, feugiat vitae nibh a, lobortis ornare nisi. Mauris feugiat pretium libero sed volutpat. Integer at sem sed libero blandit tempus sed in ex.</p>
  3529.  
  3530. <p>Etiam bibendum, ante ut sodales euismod, dui sem cursus nisi, eu pharetra quam nisl quis nisi. Vivamus tincidunt luctus nibh a imperdiet. Integer in ipsum non nibh porta suscipit. In hac habitasse platea dictumst. Aliquam interdum, nisi id vulputate porttitor, lorem ipsum rhoncus ante, ac interdum sapien lectus non justo. Donec lacinia, eros vel ornare porta, quam metus aliquet libero, eget porttitor erat magna sit amet lacus. Donec vel imperdiet libero. Nunc vulputate quis justo ut iaculis. Etiam feugiat tortor at neque suscipit, quis suscipit orci maximus. Proin rutrum finibus eros quis volutpat. Maecenas fermentum condimentum dui, vitae ultrices orci euismod eu.</p>
  3531. </article> -->
  3532.  
  3533.  
  3534.  
  3535.  
  3536.  
  3537.  
  3538. <!-- ( A C E ) VERSION
  3539. COPY FROM <article class="b_ace"> to </article>
  3540. AND PAST AFTER <div class="m_biography">
  3541.  
  3542. You may exclude the paragraphs (from <p> to </p>) that you won't use and if you want to add more just copy (from <p> to </p>) and paste under the last one. But always before </article>
  3543.  
  3544. <article class="b_ace">
  3545. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. </p>
  3546. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. </p>
  3547. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. </p>
  3548. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. </p>
  3549. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. </p>
  3550. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis arcu ac enim malesuada dignissim. Aenean sapien lorem, sagittis et sem a, congue lacinia nulla. Integer massa sapien, maximus quis magna at, euismod mattis enim. </p>
  3551.  
  3552. </article>
  3553. -->
  3554.  
  3555.  
  3556. <!-- ----------------- ---------------------- -------------------- --------->
  3557.  
  3558. <script>
  3559. function widTab(evt, tabNum) {
  3560. var i, tabcontent, tablinks;
  3561. tabcontent = document.getElementsByClassName("content");
  3562. for (i = 0; i < tabcontent.length; i++) {
  3563. tabcontent[i].style.display = "none";
  3564. }
  3565. tablinks = document.getElementsByClassName("lw_navi");
  3566. for (i = 0; i < tablinks.length; i++) {
  3567. tablinks[i].className = tablinks[i].className.replace(" check", "");
  3568. }
  3569. document.getElementById(tabNum).style.display = "block";
  3570. evt.currentTarget.className += " check"; }</script>
  3571.  
  3572.  
  3573. <!---- ---->
  3574.  
  3575. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.8/SmoothScroll.min.js"></script>
  3576.  
  3577.  
  3578. </html>
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!