API tools faq
paste
Advertisement
todekus

#01 MUSE PAGE — Base (v01)

todekus
Mar 4th, 2019
2,185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 181.78 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. /* ◦ ◠ CONTAINER ◞ ◦ */
  142.  
  143. #container {
  144. width:870px; height:570px;
  145. background:#eaeaea; /* CONTAINER BACKGROUND COLOR */
  146. padding:10px 0;
  147. margin:auto auto; overflow:hidden;
  148. position:absolute;
  149. top:0; right:0; bottom:0; left:0;
  150.  
  151. border-radius:3px;
  152. border-top:10px solid #eaeaea; /* CONTAINER BORDER COLOR */
  153. border-bottom:10px solid #eaeaea; /* CONTAINER BORDER COLOR */ }
  154.  
  155.  
  156.  
  157. /* ◦ ◠ UPPERBAR ◞ ◦ */
  158. .upperbar {
  159. width:100%; height:55px;
  160. background:#eaeaea; /* UPPERBAR BACKGROUND */
  161. padding:10px 20px; overflow:hidden; }
  162.  
  163.  
  164. /* ◦ ◠ ( UPPERBAR ) TITLE ◞ ◦ */
  165. .up_title {
  166. margin:-25px 10px; overflow:hidden;
  167. display:inline-block; float:left;
  168. vertical-align:middle; }
  169.  
  170. .up_title h1 {
  171. color:#111111; /** TITLE COLOR **/
  172. font: 700 1.4em 'Open Sans';
  173. text-transform:uppercase; letter-spacing:2px;
  174. padding:3px 0; display:inline-block;
  175. vertical-align:top; margin-right:20px;
  176. /** UPPERBAR TITLE BORDER COLOR **/
  177. border-bottom:2px solid #111111; }
  178.  
  179. .up_title h2 {
  180. color:#494949; /** DESC / SUB COLOR **/
  181. font: normal 0.9em/15px 'Open Sans';
  182. text-align:justify;
  183. width:200px; height:33px;
  184. margin:20px 0; overflow:hidden;
  185. display:inline-block; vertical-align:middle; }
  186.  
  187.  
  188. /* ◦ ◠ ( UPPERBAR ) LINKS ◞ ◦ */
  189. .up_links {
  190. width:300px; height:60px;
  191. padding:0; overflow:hidden;
  192. margin:0 -20px 0 0;
  193. display:inline-block; float:right; }
  194.  
  195.  
  196. .up_links li a {
  197. color:#777777; /* LINK COLOR */ }
  198.  
  199. .up_links li a b {
  200. color:#a59a93; /* NUMBER COLOR */ }
  201.  
  202. .up_links li {
  203. font: 600 0.8em 'Roboto';
  204. text-transform:uppercase; text-align:justify;
  205. letter-spacing:2px; overflow:hidden;
  206.  
  207. width:100px;
  208. margin:0 5px; display:inline-block; }
  209.  
  210. .up_links li b {
  211. font: bold 1.2em 'Cutive Mono';
  212. margin:0 3px; }
  213.  
  214.  
  215.  
  216. /* ◦ ◠ MAIN ◞ ◦ */
  217. .main {
  218. width:100%; height:400px;
  219. background:#938f8d; /* BACKGROUND */
  220. background-image:url('https://via.placeholder.com/870x400'); /* IMAGE */
  221. overflow:hidden; }
  222.  
  223.  
  224. /* ◦ ◠ ( MAIN ) MUSE TAB ◞ ◦ */
  225. .content {
  226. width:100%; height:400px;
  227. background:#e2e0de; /* BACKGROUND */
  228. display:none; overflow:hidden;
  229. position:absolute; z-index:calc(9*999); }
  230.  
  231. .leftie, .m_links, .rightie { display:inline-block; }
  232. .rightie { float:right; }
  233.  
  234. /* ◦ ◠ ( MUSE ) HEADER ◞ ◦ */
  235. .m_header {
  236. width:450px; height:110px;
  237. background:#e0dede; /* BACKGROUND */
  238. padding:5px 20px; overflow:hidden; }
  239.  
  240. .m_header h1 {
  241. color:#63605e; /* LABEL COLOR */
  242. font: 400 0.9em 'Roboto';
  243. text-transform:uppercase;
  244. letter-spacing:1px;
  245. margin:10px 0 -20px 0; }
  246.  
  247. .m_header h2 {
  248. color:#ada19d; /* NAME COLOR */
  249. font: 600 2.8em 'Playfair Display';
  250. text-transform:uppercase;
  251. margin:15px 0 0 0; }
  252.  
  253. .m_header p {
  254. color:#4c4c4c; /* QUOTE COLOR */
  255. font: normal 1em/20px 'Libre Baskerville';
  256. text-align:justify; letter-spacing:1px; }
  257.  
  258. /* ◦ ◠ ( MUSE ) BIOGRAPHY ◞ ◦ */
  259. .m_biography {
  260. width:450px; height:150px;
  261. padding:0; overflow:auto; }
  262.  
  263. /* ◦ ◠ ( BIOGRAPHY ) DEJABOO VER. ◞ ◦ */
  264. .b_dejaboo {
  265. width:450px;
  266. padding:0; margin:0 0 5px 0; }
  267.  
  268. .b_dejaboo p {
  269. color:#191919; /* TEXT COLOR */
  270. font: normal 1em/20px 'AbeeZee';
  271. text-align:justify;
  272.  
  273. width:450px;
  274. background:#d8d5d4; /* BACKGROUND */
  275. padding:15px 30px; margin:0 0 2px 0; }
  276.  
  277. .b_dejaboo tt {
  278. color:#a09b9a; /* TELETYPE COLOR */
  279. font: 500 1.3em 'Playfair Display';}
  280. .b_dejaboo b { color:#7a7675; /* BOLD COLOR */ }
  281. .b_dejaboo i { color:#63473d; /* ITALIC COLOR */ }
  282. .b_dejaboo strong { color:#000; /* STRONG COLOR */ }
  283. .b_dejaboo u {
  284. color:#564a46; /* UNDELINE COLOR */
  285. text-decoration:none;
  286. padding-bottom:2px;
  287. /* UNDELINE BORDER COLOR */
  288. border-bottom:1px solid #564a46; }
  289.  
  290. /* ◦ ◠ ( BIOGRAPHY ) ACE VER. ◞ ◦ */
  291. .b_ace { width:450px; margin:0 0 5px 0; }
  292.  
  293. .b_ace p {
  294. color:#5b5b5b; /* TEXT COLOR */
  295. font: normal 1em/20px 'AbeeZee';
  296. text-align:justify;
  297.  
  298. background:#d1ccca; /* BACKGROUND */
  299. padding:5px 10px; margin:0 0 2px 0;
  300. /* BORDER COLOR */
  301. border-left:5px solid #c1b9b6; }
  302.  
  303. .b_ace tt {
  304. color:#685d59; /* TELETYPE COLOR */
  305. font: 500 1.3em 'Playfair Display';}
  306. .b_ace b { color:#7a7675; /* BOLD COLOR */ }
  307. .b_ace i { color:#63473d; /* ITALIC COLOR */ }
  308. .b_ace strong { color:#000; /* STRONG COLOR */ }
  309. .b_ace u {
  310. color:#564a46; /* UNDELINE COLOR */
  311. text-decoration:none;
  312. padding-bottom:2px;
  313. /* UNDELINE BORDER COLOR */
  314. border-bottom:1px solid #564a46; }
  315.  
  316.  
  317. /* ◦ ◠ ( MUSE ) BASIC INFORMATION ◞ ◦ */
  318. .m_basics {
  319. width:450px; height:135px;
  320. background:#e0dede; /* BACKGROUND */
  321. overflow:auto; }
  322.  
  323. .m_basics::-webkit-scrollbar,
  324. .m_basics::-webkit-scrollbar-track {
  325. width: 3px!important; height:135px!important;
  326. position:absolute; background:transparent; }
  327. .m_basics::-webkit-scrollbar-thumb {
  328. background: #d1cfcc!important; }
  329.  
  330. .m_basics ul { width:100%; padding:15px 20px; }
  331.  
  332. .m_basics li {
  333. color:#7f7e7e; /* TEXT COLOR */
  334. font: normal 1em 'Karla';
  335. text-align:justify;
  336.  
  337. background:#d1ccca;
  338. border:1px solid #d8d5d4;
  339. width:190px; padding:5px 10px;
  340. margin:5px 5px; display:inline-block;
  341. border-radius:5px; }
  342.  
  343. .m_basics li b {
  344. color:#776b5f; /* BOLD TEXT */
  345. font: bold 0.9em 'Roboto';
  346. text-transform:uppercase;
  347. margin-right:5px; }
  348.  
  349. /* ◦ ◠ ( MUSE ) LINKS ◞ ◦ */
  350. .m_links {
  351. width:50px; height:400px;
  352. background:#a8a5a3; /** MUSE LINKS BG **/
  353. margin:0 -2px; overflow:hidden; }
  354.  
  355. .m_links ul { margin:130px -23px; }
  356.  
  357. .m_links li a, .m_links li { color:#dddddd; /* LINKS COLOR */ }
  358.  
  359. .m_links li {
  360. font-size:15px;
  361. margin:20px 0; cursor:pointer;
  362. vertical-align:middle; }
  363.  
  364. /* ◦ ◠ ( MUSE ) SPOTIFY ◞ ◦ */
  365. .m_spotify {
  366. width:370px; height:100px;
  367. background:#1e1e1e; /* BACKGROUND */
  368. padding:10px 20px; overflow:hidden; }
  369.  
  370. .m_spotify img {
  371. width:80px; height:80px;
  372. display:inline-block; float:left;
  373. border-radius:5px; }
  374.  
  375. .m_spotify ul { padding:5px 10px; display:inline-block; }
  376.  
  377. .m_spotify li {
  378. color:#dddcdb; /* DETAILS COLOR */
  379. text-transform:uppercase;
  380. width:180px; padding:3px 5px; }
  381.  
  382. .m_spotify li:nth-child(1) { font: bold 1.3em 'Open Sans'; }
  383. .m_spotify li:nth-child(2), .m_spotify li:nth-child(3) {
  384. font: normal 1.1em monospace;
  385. letter-spacing:1px; }
  386.  
  387. /* ◦ ◠ ( MUSE ) PICTURE ◞ ◦ */
  388. .m_picture {
  389. width:370px; height:300px;
  390. background:#dddddd; /* BACKGROUND */
  391. overflow:hidden; }
  392.  
  393. .m_picture img { width:370px; height:300px; }
  394.  
  395.  
  396. /* ◦ ◠ ( MUSE ) CONNECTIONS TAB ◞ ◦ */
  397. .popup_block{
  398. width:400px; max-height:350px;
  399. background:transparent; /** POPUP BOX BACKGROUND **/
  400. padding:0; overflow:hidden;
  401. position:fixed; top:50%;left:50%;
  402. display:none; float:left;
  403. z-index:calc(99*999); }
  404.  
  405. *html #fade {position: absolute;}
  406. *html .popup_block {position: absolute; }
  407.  
  408. #fade {
  409. width:100%; height:100%;
  410. position:fixed; left:0px; top:0px;
  411. display:none; z-index:9999;
  412. opacity:0; }
  413.  
  414. .connections {
  415. width:400px; height:350px;
  416. overflow:auto; margin:-10px 0; }
  417.  
  418. /* ◦ ◠ ( CONNECTIONS ) ◞ ◦ */
  419. .cont_cnn {
  420. width:400px; height:auto; min-height:100px;
  421. background:#eaeaea; /* BACKGROUND */
  422. padding:10px 20px 10px 20px;
  423. margin:10px 0; }
  424.  
  425. /* ◦ ◠ ( CONNECTIONS ) HEADER ◞ ◦ */
  426. .cont_hd {
  427. width:400px; height:110px;
  428. background:#e0dede; /* BACKGROUND */
  429. padding:10px 20px;
  430. margin:-10px 0 0 -20px; }
  431.  
  432. .cont_cnn img {
  433. width:80px; height:80px;
  434. display:inline-block; float:left;
  435. margin:5px 10px 0 0;
  436. border-radius:5px; }
  437.  
  438. .cont_cnn h1 {
  439. color:#b2a9a6; /* NAME COLOR */
  440. font: 600 0.9em 'Montserrat';
  441. text-transform:uppercase;
  442. margin:10px 0 -5px 0; display:inline-block; }
  443.  
  444. .cont_cnn h2 {
  445. color:#b2a9a6; /* NAME COLOR */
  446. font: 600 2em 'Playfair Display';
  447. text-transform:uppercase;
  448. margin:0 0 -5px 0; display:inline-block; }
  449.  
  450. .cont_cnn p {
  451. color:#7c7c7c; /* TEXT COLOR */
  452. font: normal 1em/20px 'Open Sans';
  453. text-align:justify;
  454. padding:10px 5px; margin:0; }
  455.  
  456. .cont_cnn p tt {
  457. color:#a09b9a; /* TELETYPE COLOR */
  458. font: 500 1.3em 'Playfair Display';}
  459. .cont_cnn p b { color:#7a7675; /* BOLD COLOR */ }
  460. .cont_cnn p i { color:#63473d; /* ITALIC COLOR */ }
  461. .cont_cnn p strong { color:#000; /* STRONG COLOR */ }
  462. .cont_cnn p u {
  463. color:#564a46; /* UNDELINE COLOR */
  464. text-decoration:none;
  465. padding-bottom:2px;
  466. /* UNDELINE BORDER COLOR */
  467. border-bottom:1px solid #564a46; }
  468.  
  469. /* ◦ ◠ ( CONNECTIONS ) LINKS ◞ ◦ */
  470. .cont_cnn ul { margin:10px 0; }
  471.  
  472. .cont_cnn li a { color:#c4af91; /* LINK COLOR */ }
  473.  
  474. .cont_cnn li {
  475. font-size:1em;
  476. padding:7px 7px; margin:0 5px;
  477. display:inline-block; border-radius:50%; }
  478.  
  479.  
  480. /* ◦ ◠ LOWERBAR ◞ ◦ */
  481. .lowerbar {
  482. width:100%; height:90px;
  483. background:#eaeaea; /* LOWERBAR BACKGROUND */
  484. padding:10px 20px; overflow:hidden; }
  485.  
  486.  
  487. /* ◦ ◠ ( LOWERBAR ) TITLE ◞ ◦ */
  488. .lw_title {
  489. width:250px; height:80px;
  490. margin:-15px 10px; overflow:hidden;
  491. display:inline-block; float:left; }
  492.  
  493. .lw_title h3 {
  494. color:#111111; /* TITLE COLOR */
  495. font: 900 2.8em/22px 'Montserrat';
  496. text-align:justify; text-transform:uppercase;
  497. word-break:break-word; padding:7px 0; }
  498.  
  499. /* ◦ ◠ ( LOWERBAR ) MUSE NAVIGATION ◞ ◦ */
  500. .lw_navi {
  501. width:280px; height:80px;
  502. overflow:auto; display:inline-block;
  503. float:right; }
  504.  
  505. .lw_navi li {
  506. width:25px; height:25px;
  507. background:#a09a98; /* BACKGROUND */
  508. cursor:pointer;
  509. margin:5px 5px; overflow:hidden;
  510. display:inline-block; border-radius:50%; }
  511.  
  512. .lw_navi li img { width:25px; height:25px; }
  513.  
  514.  
  515.  
  516. </style>
  517. <body>
  518.  
  519.  
  520.  
  521. <!-- ◦ ◠ CONTAINER ◞ ◦ -->
  522. <div id="container">
  523.  
  524.  
  525. <!-- ◦ ◠ UPPERBAR ◞ ◦ -->
  526. <div class="upperbar">
  527.  
  528.  
  529. <!-- ◦ ◠ ( UPPERBAR ) TITLE ◞ ◦ -->
  530. <article class="up_title">
  531.  
  532. <!-- TITLE --><h1>MUSES</h1>
  533.  
  534. <!-- DESC / SUBTITLE -->
  535. <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis elit, tempor sed vulputate vitae, consectetur in nisi. </h2>
  536.  
  537. </article>
  538.  
  539. <!-- ◦ ◠ ( UPPERBAR ) LINKS ◞ ◦ -->
  540. <div class="up_links"><ul>
  541.  
  542. <li><a href="URLHERE"><b>01.</b> GO BACK</a></li>
  543. <li><a href="URLHERE"><b>02.</b> LINK ONE</a></li>
  544. <li><a href="URLHERE"><b>03.</b> LINK TWO</a></li>
  545.  
  546. <!-- **** PLEASE, DON'T TOUCH **** -->
  547. <li><a href="http://yongqln.tumblr.com">
  548. <b>04.</b> CREDITS</a></li>
  549. <!-- **** PLEASE, DON'T TOUCH **** -->
  550. </ul></div>
  551.  
  552. </div>
  553.  
  554.  
  555.  
  556.  
  557.  
  558.  
  559.  
  560.  
  561.  
  562.  
  563. <!-- ◦ ◠ MAIN ◞ ◦ -->
  564. <div class="main">
  565.  
  566.  
  567. <!-- TO ADD MORE MUSES, JUST COPY EVERYTHING BETWEEN
  568.  
  569. ◦ ◠ MUSE #001 ◞ ◦ AND ◦ ◠ END OF MUSE 001 ◞ ◦
  570.  
  571. AND PASTE AFTER THE LAST MUSE + REMEMBER TO CHANGE
  572. THE "id=msxx" TO A NEW NUMBER AND TO ADD A NEW LINK
  573. IN THE MUSE NAVIGATION (changing the id there to the same
  574. you put in your new muse).
  575. TO DELETE ONE MUSE, JUST DELETE EVERYTHING BETWEEN
  576.  
  577. ◦ ◠ MUSE #001 ◞ ◦ AND ◦ ◠ END OF MUSE 001 ◞ ◦ -->
  578.  
  579.  
  580. <!-- ◦ ◠ MUSE #001 ◞ ◦ -->
  581. <div class="content" id="ms1">
  582.  
  583.  
  584. <div class="leftie">
  585. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  586. <div class="m_header">
  587. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  588. <!-- N A M E --> <h2> MUSE NAME </h2>
  589. <!-- Q U O T E -->
  590. <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>
  591. </div>
  592.  
  593. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  594. <div class="m_biography">
  595.  
  596.  
  597.  
  598.  
  599. <!-- ( DEJABOO ) VERSION -->
  600. <!-- You can use this version for long biographs or more than one paragraph. -->
  601.  
  602. <article class="b_dejaboo">
  603. <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>
  604.  
  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. </article>
  609.  
  610.  
  611. <!-- ( A C E ) VERSION -->
  612. <!-- This is ideal when you want only short headcanons instead
  613. of a biography. -->
  614.  
  615. <article class="b_ace">
  616. <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>
  617.  
  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. </article>
  629.  
  630.  
  631. </div>
  632.  
  633. <!-- ( MUSE ) BASIC INFORMATION -->
  634. <div class="m_basics"><ul>
  635. <li><b>NAME</b>Lorem Ipsum</li>
  636. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  637. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  638. <li><b>AGE</b>Lorem Ipsum</li>
  639. <li><b>GENDER</b>Lorem Ipsum</li>
  640. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  641. </ul><ul>
  642. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  643. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  644. <li><b>STATUS</b>Lorem Ipsum</li>
  645. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  646. <li><b>LOCATION</b>Lorem Ipsum</li>
  647. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  648. </ul></div></div>
  649.  
  650. <!-- ( MUSE ) LINKS -->
  651. <div class="m_links"><ul>
  652.  
  653. <!-- --->
  654. <li><a href="LINKHERE" title="muse blog">
  655. <span class="icon-user"></span>
  656. </a></li>
  657.  
  658.  
  659. <!-- --->
  660. <li><a href="LINKHERE" title="musing tag">
  661. <span class="icon-tag"></span>
  662. </a></li>
  663.  
  664.  
  665. <!-- --->
  666. <li><a href="LINKHERE" title="opposite blog">
  667. <span class="icon-heart"></span>
  668. </a></li>
  669.  
  670.  
  671. <!-- --->
  672. <li title="relationships">
  673. <a href="#?w=auto" rel="cn1" class="poplight">
  674. <span class="icon-people"></span>
  675. </a></li>
  676.  
  677.  
  678. <!-- --->
  679. <li title="discord/tumblr">
  680. <span class="icon-settings"></span>
  681. </li>
  682.  
  683.  
  684. </ul></div>
  685.  
  686.  
  687. <div class="rightie">
  688. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  689. <div class="m_spotify">
  690. <!-- ALBUM IMAGE -->
  691. <img src="https://via.placeholder.com/80x80">
  692. <ul>
  693. <li>SONG NAME</li>
  694. <li>BAND</li>
  695. <li>ALBUM</li>
  696. </ul>
  697. </div>
  698.  
  699.  
  700. <!-- ( MUSE ) PICTURE -->
  701. <div class="m_picture">
  702. <!-- MUSE PICTURE -->
  703. <img src="https://via.placeholder.com/370x300">
  704. </div></div>
  705.  
  706.  
  707. </div> <!-- ◦ ◠ END OF MUSE 001 ◞ ◦ -->
  708.  
  709.  
  710.  
  711.  
  712.  
  713. <!-- ◦ ◠ MUSE #002 ◞ ◦ -->
  714. <div class="content" id="ms2">
  715.  
  716.  
  717. <div class="leftie">
  718. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  719. <div class="m_header">
  720. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  721. <!-- N A M E --> <h2> MUSE NAME </h2>
  722. <!-- Q U O T E -->
  723. <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>
  724. </div>
  725.  
  726. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  727. <div class="m_biography">
  728.  
  729.  
  730.  
  731.  
  732. <!-- ( DEJABOO ) VERSION -->
  733. <!-- You can use this version for long biographs or more than one paragraph. -->
  734.  
  735. <article class="b_dejaboo">
  736. <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>
  737.  
  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. </article>
  742.  
  743.  
  744. <!-- ( A C E ) VERSION -->
  745. <!-- This is ideal when you want only short headcanons instead
  746. of a biography. -->
  747.  
  748. <article class="b_ace">
  749. <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>
  750.  
  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. </article>
  762.  
  763.  
  764. </div>
  765.  
  766. <!-- ( MUSE ) BASIC INFORMATION -->
  767. <div class="m_basics"><ul>
  768. <li><b>NAME</b>Lorem Ipsum</li>
  769. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  770. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  771. <li><b>AGE</b>Lorem Ipsum</li>
  772. <li><b>GENDER</b>Lorem Ipsum</li>
  773. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  774. </ul><ul>
  775. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  776. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  777. <li><b>STATUS</b>Lorem Ipsum</li>
  778. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  779. <li><b>LOCATION</b>Lorem Ipsum</li>
  780. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  781. </ul></div></div>
  782.  
  783. <!-- ( MUSE ) LINKS -->
  784. <div class="m_links"><ul>
  785.  
  786. <!-- --->
  787. <li><a href="LINKHERE" title="muse blog">
  788. <span class="icon-user"></span>
  789. </a></li>
  790.  
  791.  
  792. <!-- --->
  793. <li><a href="LINKHERE" title="musing tag">
  794. <span class="icon-tag"></span>
  795. </a></li>
  796.  
  797.  
  798. <!-- --->
  799. <li><a href="LINKHERE" title="opposite blog">
  800. <span class="icon-heart"></span>
  801. </a></li>
  802.  
  803.  
  804. <!-- --->
  805. <li title="relationships">
  806. <a href="#?w=auto" rel="cn2" class="poplight">
  807. <span class="icon-people"></span>
  808. </a></li>
  809.  
  810.  
  811. <!-- --->
  812. <li title="discord/tumblr">
  813. <span class="icon-settings"></span>
  814. </li>
  815.  
  816.  
  817. </ul></div>
  818.  
  819.  
  820. <div class="rightie">
  821. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  822. <div class="m_spotify">
  823. <!-- ALBUM IMAGE -->
  824. <img src="https://via.placeholder.com/80x80">
  825. <ul>
  826. <li>SONG NAME</li>
  827. <li>BAND</li>
  828. <li>ALBUM</li>
  829. </ul>
  830. </div>
  831.  
  832.  
  833. <!-- ( MUSE ) PICTURE -->
  834. <div class="m_picture">
  835. <!-- MUSE PICTURE -->
  836. <img src="https://via.placeholder.com/370x300">
  837. </div></div>
  838.  
  839.  
  840. </div> <!-- ◦ ◠ END OF MUSE 002 ◞ ◦ -->
  841.  
  842.  
  843.  
  844. <!-- ◦ ◠ MUSE #003 ◞ ◦ -->
  845. <div class="content" id="ms3">
  846.  
  847.  
  848. <div class="leftie">
  849. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  850. <div class="m_header">
  851. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  852. <!-- N A M E --> <h2> MUSE NAME </h2>
  853. <!-- Q U O T E -->
  854. <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>
  855. </div>
  856.  
  857. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  858. <div class="m_biography">
  859.  
  860.  
  861.  
  862.  
  863. <!-- ( DEJABOO ) VERSION -->
  864. <!-- You can use this version for long biographs or more than one paragraph. -->
  865.  
  866. <article class="b_dejaboo">
  867. <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>
  868.  
  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. </article>
  873.  
  874.  
  875. <!-- ( A C E ) VERSION -->
  876. <!-- This is ideal when you want only short headcanons instead
  877. of a biography. -->
  878.  
  879. <article class="b_ace">
  880. <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>
  881.  
  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. </article>
  893.  
  894.  
  895. </div>
  896.  
  897. <!-- ( MUSE ) BASIC INFORMATION -->
  898. <div class="m_basics"><ul>
  899. <li><b>NAME</b>Lorem Ipsum</li>
  900. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  901. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  902. <li><b>AGE</b>Lorem Ipsum</li>
  903. <li><b>GENDER</b>Lorem Ipsum</li>
  904. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  905. </ul><ul>
  906. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  907. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  908. <li><b>STATUS</b>Lorem Ipsum</li>
  909. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  910. <li><b>LOCATION</b>Lorem Ipsum</li>
  911. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  912. </ul></div></div>
  913.  
  914. <!-- ( MUSE ) LINKS -->
  915. <div class="m_links"><ul>
  916.  
  917. <!-- --->
  918. <li><a href="LINKHERE" title="muse blog">
  919. <span class="icon-user"></span>
  920. </a></li>
  921.  
  922.  
  923. <!-- --->
  924. <li><a href="LINKHERE" title="musing tag">
  925. <span class="icon-tag"></span>
  926. </a></li>
  927.  
  928.  
  929. <!-- --->
  930. <li><a href="LINKHERE" title="opposite blog">
  931. <span class="icon-heart"></span>
  932. </a></li>
  933.  
  934.  
  935. <!-- --->
  936. <li title="relationships">
  937. <a href="#?w=auto" rel="cn3" class="poplight">
  938. <span class="icon-people"></span>
  939. </a></li>
  940.  
  941.  
  942. <!-- --->
  943. <li title="discord/tumblr">
  944. <span class="icon-settings"></span>
  945. </li>
  946.  
  947.  
  948. </ul></div>
  949.  
  950.  
  951. <div class="rightie">
  952. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  953. <div class="m_spotify">
  954. <!-- ALBUM IMAGE -->
  955. <img src="https://via.placeholder.com/80x80">
  956. <ul>
  957. <li>SONG NAME</li>
  958. <li>BAND</li>
  959. <li>ALBUM</li>
  960. </ul>
  961. </div>
  962.  
  963.  
  964. <!-- ( MUSE ) PICTURE -->
  965. <div class="m_picture">
  966. <!-- MUSE PICTURE -->
  967. <img src="https://via.placeholder.com/370x300">
  968. </div></div>
  969.  
  970.  
  971. </div> <!-- ◦ ◠ END OF MUSE 003 ◞ ◦ -->
  972.  
  973.  
  974.  
  975.  
  976. <!-- ◦ ◠ MUSE #004 ◞ ◦ -->
  977. <div class="content" id="ms4">
  978.  
  979.  
  980. <div class="leftie">
  981. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  982. <div class="m_header">
  983. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  984. <!-- N A M E --> <h2> MUSE NAME </h2>
  985. <!-- Q U O T E -->
  986. <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>
  987. </div>
  988.  
  989. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  990. <div class="m_biography">
  991.  
  992.  
  993.  
  994.  
  995. <!-- ( DEJABOO ) VERSION -->
  996. <!-- You can use this version for long biographs or more than one paragraph. -->
  997.  
  998. <article class="b_dejaboo">
  999. <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>
  1000.  
  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. </article>
  1005.  
  1006.  
  1007. <!-- ( A C E ) VERSION -->
  1008. <!-- This is ideal when you want only short headcanons instead
  1009. of a biography. -->
  1010.  
  1011. <article class="b_ace">
  1012. <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>
  1013.  
  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. </article>
  1025.  
  1026.  
  1027. </div>
  1028.  
  1029. <!-- ( MUSE ) BASIC INFORMATION -->
  1030. <div class="m_basics"><ul>
  1031. <li><b>NAME</b>Lorem Ipsum</li>
  1032. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1033. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1034. <li><b>AGE</b>Lorem Ipsum</li>
  1035. <li><b>GENDER</b>Lorem Ipsum</li>
  1036. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1037. </ul><ul>
  1038. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1039. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1040. <li><b>STATUS</b>Lorem Ipsum</li>
  1041. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1042. <li><b>LOCATION</b>Lorem Ipsum</li>
  1043. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1044. </ul></div></div>
  1045.  
  1046. <!-- ( MUSE ) LINKS -->
  1047. <div class="m_links"><ul>
  1048.  
  1049. <!-- --->
  1050. <li><a href="LINKHERE" title="muse blog">
  1051. <span class="icon-user"></span>
  1052. </a></li>
  1053.  
  1054.  
  1055. <!-- --->
  1056. <li><a href="LINKHERE" title="musing tag">
  1057. <span class="icon-tag"></span>
  1058. </a></li>
  1059.  
  1060.  
  1061. <!-- --->
  1062. <li><a href="LINKHERE" title="opposite blog">
  1063. <span class="icon-heart"></span>
  1064. </a></li>
  1065.  
  1066.  
  1067. <!-- --->
  1068. <li title="relationships">
  1069. <a href="#?w=auto" rel="cn4" class="poplight">
  1070. <span class="icon-people"></span>
  1071. </a></li>
  1072.  
  1073.  
  1074. <!-- --->
  1075. <li title="discord/tumblr">
  1076. <span class="icon-settings"></span>
  1077. </li>
  1078.  
  1079.  
  1080. </ul></div>
  1081.  
  1082.  
  1083. <div class="rightie">
  1084. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1085. <div class="m_spotify">
  1086. <!-- ALBUM IMAGE -->
  1087. <img src="https://via.placeholder.com/80x80">
  1088. <ul>
  1089. <li>SONG NAME</li>
  1090. <li>BAND</li>
  1091. <li>ALBUM</li>
  1092. </ul>
  1093. </div>
  1094.  
  1095.  
  1096. <!-- ( MUSE ) PICTURE -->
  1097. <div class="m_picture">
  1098. <!-- MUSE PICTURE -->
  1099. <img src="https://via.placeholder.com/370x300">
  1100. </div></div>
  1101.  
  1102.  
  1103. </div> <!-- ◦ ◠ END OF MUSE 004 ◞ ◦ -->
  1104.  
  1105.  
  1106.  
  1107. <!-- ◦ ◠ MUSE #005 ◞ ◦ -->
  1108. <div class="content" id="ms5">
  1109.  
  1110.  
  1111. <div class="leftie">
  1112. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1113. <div class="m_header">
  1114. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1115. <!-- N A M E --> <h2> MUSE NAME </h2>
  1116. <!-- Q U O T E -->
  1117. <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>
  1118. </div>
  1119.  
  1120. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1121. <div class="m_biography">
  1122.  
  1123.  
  1124.  
  1125.  
  1126. <!-- ( DEJABOO ) VERSION -->
  1127. <!-- You can use this version for long biographs or more than one paragraph. -->
  1128.  
  1129. <article class="b_dejaboo">
  1130. <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>
  1131.  
  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. </article>
  1136.  
  1137.  
  1138. <!-- ( A C E ) VERSION -->
  1139. <!-- This is ideal when you want only short headcanons instead
  1140. of a biography. -->
  1141.  
  1142. <article class="b_ace">
  1143. <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>
  1144.  
  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. </article>
  1156.  
  1157.  
  1158. </div>
  1159.  
  1160. <!-- ( MUSE ) BASIC INFORMATION -->
  1161. <div class="m_basics"><ul>
  1162. <li><b>NAME</b>Lorem Ipsum</li>
  1163. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1164. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1165. <li><b>AGE</b>Lorem Ipsum</li>
  1166. <li><b>GENDER</b>Lorem Ipsum</li>
  1167. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1168. </ul><ul>
  1169. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1170. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1171. <li><b>STATUS</b>Lorem Ipsum</li>
  1172. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1173. <li><b>LOCATION</b>Lorem Ipsum</li>
  1174. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1175. </ul></div></div>
  1176.  
  1177. <!-- ( MUSE ) LINKS -->
  1178. <div class="m_links"><ul>
  1179.  
  1180. <!-- --->
  1181. <li><a href="LINKHERE" title="muse blog">
  1182. <span class="icon-user"></span>
  1183. </a></li>
  1184.  
  1185.  
  1186. <!-- --->
  1187. <li><a href="LINKHERE" title="musing tag">
  1188. <span class="icon-tag"></span>
  1189. </a></li>
  1190.  
  1191.  
  1192. <!-- --->
  1193. <li><a href="LINKHERE" title="opposite blog">
  1194. <span class="icon-heart"></span>
  1195. </a></li>
  1196.  
  1197.  
  1198. <!-- --->
  1199. <li title="relationships">
  1200. <a href="#?w=auto" rel="cn5" class="poplight">
  1201. <span class="icon-people"></span>
  1202. </a></li>
  1203.  
  1204.  
  1205. <!-- --->
  1206. <li title="discord/tumblr">
  1207. <span class="icon-settings"></span>
  1208. </li>
  1209.  
  1210.  
  1211. </ul></div>
  1212.  
  1213.  
  1214. <div class="rightie">
  1215. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1216. <div class="m_spotify">
  1217. <!-- ALBUM IMAGE -->
  1218. <img src="https://via.placeholder.com/80x80">
  1219. <ul>
  1220. <li>SONG NAME</li>
  1221. <li>BAND</li>
  1222. <li>ALBUM</li>
  1223. </ul>
  1224. </div>
  1225.  
  1226.  
  1227. <!-- ( MUSE ) PICTURE -->
  1228. <div class="m_picture">
  1229. <!-- MUSE PICTURE -->
  1230. <img src="https://via.placeholder.com/370x300">
  1231. </div></div>
  1232.  
  1233.  
  1234. </div> <!-- ◦ ◠ END OF MUSE 005 ◞ ◦ -->
  1235.  
  1236.  
  1237.  
  1238.  
  1239. <!-- ◦ ◠ MUSE #006 ◞ ◦ -->
  1240. <div class="content" id="ms6">
  1241.  
  1242.  
  1243. <div class="leftie">
  1244. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1245. <div class="m_header">
  1246. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1247. <!-- N A M E --> <h2> MUSE NAME </h2>
  1248. <!-- Q U O T E -->
  1249. <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>
  1250. </div>
  1251.  
  1252. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1253. <div class="m_biography">
  1254.  
  1255.  
  1256.  
  1257.  
  1258. <!-- ( DEJABOO ) VERSION -->
  1259. <!-- You can use this version for long biographs or more than one paragraph. -->
  1260.  
  1261. <article class="b_dejaboo">
  1262. <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>
  1263.  
  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. </article>
  1268.  
  1269.  
  1270. <!-- ( A C E ) VERSION -->
  1271. <!-- This is ideal when you want only short headcanons instead
  1272. of a biography. -->
  1273.  
  1274. <article class="b_ace">
  1275. <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>
  1276.  
  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. </article>
  1288.  
  1289.  
  1290. </div>
  1291.  
  1292. <!-- ( MUSE ) BASIC INFORMATION -->
  1293. <div class="m_basics"><ul>
  1294. <li><b>NAME</b>Lorem Ipsum</li>
  1295. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1296. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1297. <li><b>AGE</b>Lorem Ipsum</li>
  1298. <li><b>GENDER</b>Lorem Ipsum</li>
  1299. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1300. </ul><ul>
  1301. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1302. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1303. <li><b>STATUS</b>Lorem Ipsum</li>
  1304. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1305. <li><b>LOCATION</b>Lorem Ipsum</li>
  1306. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1307. </ul></div></div>
  1308.  
  1309. <!-- ( MUSE ) LINKS -->
  1310. <div class="m_links"><ul>
  1311.  
  1312. <!-- --->
  1313. <li><a href="LINKHERE" title="muse blog">
  1314. <span class="icon-user"></span>
  1315. </a></li>
  1316.  
  1317.  
  1318. <!-- --->
  1319. <li><a href="LINKHERE" title="musing tag">
  1320. <span class="icon-tag"></span>
  1321. </a></li>
  1322.  
  1323.  
  1324. <!-- --->
  1325. <li><a href="LINKHERE" title="opposite blog">
  1326. <span class="icon-heart"></span>
  1327. </a></li>
  1328.  
  1329.  
  1330. <!-- --->
  1331. <li title="relationships">
  1332. <a href="#?w=auto" rel="cn6" class="poplight">
  1333. <span class="icon-people"></span>
  1334. </a></li>
  1335.  
  1336.  
  1337. <!-- --->
  1338. <li title="discord/tumblr">
  1339. <span class="icon-settings"></span>
  1340. </li>
  1341.  
  1342.  
  1343. </ul></div>
  1344.  
  1345.  
  1346. <div class="rightie">
  1347. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1348. <div class="m_spotify">
  1349. <!-- ALBUM IMAGE -->
  1350. <img src="https://via.placeholder.com/80x80">
  1351. <ul>
  1352. <li>SONG NAME</li>
  1353. <li>BAND</li>
  1354. <li>ALBUM</li>
  1355. </ul>
  1356. </div>
  1357.  
  1358.  
  1359. <!-- ( MUSE ) PICTURE -->
  1360. <div class="m_picture">
  1361. <!-- MUSE PICTURE -->
  1362. <img src="https://via.placeholder.com/370x300">
  1363. </div></div>
  1364.  
  1365.  
  1366. </div> <!-- ◦ ◠ END OF MUSE 006 ◞ ◦ -->
  1367.  
  1368.  
  1369.  
  1370. <!-- ◦ ◠ MUSE #007 ◞ ◦ -->
  1371. <div class="content" id="ms7">
  1372.  
  1373.  
  1374. <div class="leftie">
  1375. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1376. <div class="m_header">
  1377. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1378. <!-- N A M E --> <h2> MUSE NAME </h2>
  1379. <!-- Q U O T E -->
  1380. <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>
  1381. </div>
  1382.  
  1383. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1384. <div class="m_biography">
  1385.  
  1386.  
  1387.  
  1388.  
  1389. <!-- ( DEJABOO ) VERSION -->
  1390. <!-- You can use this version for long biographs or more than one paragraph. -->
  1391.  
  1392. <article class="b_dejaboo">
  1393. <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>
  1394.  
  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. </article>
  1399.  
  1400.  
  1401. <!-- ( A C E ) VERSION -->
  1402. <!-- This is ideal when you want only short headcanons instead
  1403. of a biography. -->
  1404.  
  1405. <article class="b_ace">
  1406. <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>
  1407.  
  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. </article>
  1419.  
  1420.  
  1421. </div>
  1422.  
  1423. <!-- ( MUSE ) BASIC INFORMATION -->
  1424. <div class="m_basics"><ul>
  1425. <li><b>NAME</b>Lorem Ipsum</li>
  1426. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1427. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1428. <li><b>AGE</b>Lorem Ipsum</li>
  1429. <li><b>GENDER</b>Lorem Ipsum</li>
  1430. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1431. </ul><ul>
  1432. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1433. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1434. <li><b>STATUS</b>Lorem Ipsum</li>
  1435. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1436. <li><b>LOCATION</b>Lorem Ipsum</li>
  1437. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1438. </ul></div></div>
  1439.  
  1440. <!-- ( MUSE ) LINKS -->
  1441. <div class="m_links"><ul>
  1442.  
  1443. <!-- --->
  1444. <li><a href="LINKHERE" title="muse blog">
  1445. <span class="icon-user"></span>
  1446. </a></li>
  1447.  
  1448.  
  1449. <!-- --->
  1450. <li><a href="LINKHERE" title="musing tag">
  1451. <span class="icon-tag"></span>
  1452. </a></li>
  1453.  
  1454.  
  1455. <!-- --->
  1456. <li><a href="LINKHERE" title="opposite blog">
  1457. <span class="icon-heart"></span>
  1458. </a></li>
  1459.  
  1460.  
  1461. <!-- --->
  1462. <li title="relationships">
  1463. <a href="#?w=auto" rel="cn7" class="poplight">
  1464. <span class="icon-people"></span>
  1465. </a></li>
  1466.  
  1467.  
  1468. <!-- --->
  1469. <li title="discord/tumblr">
  1470. <span class="icon-settings"></span>
  1471. </li>
  1472.  
  1473.  
  1474. </ul></div>
  1475.  
  1476.  
  1477. <div class="rightie">
  1478. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1479. <div class="m_spotify">
  1480. <!-- ALBUM IMAGE -->
  1481. <img src="https://via.placeholder.com/80x80">
  1482. <ul>
  1483. <li>SONG NAME</li>
  1484. <li>BAND</li>
  1485. <li>ALBUM</li>
  1486. </ul>
  1487. </div>
  1488.  
  1489.  
  1490. <!-- ( MUSE ) PICTURE -->
  1491. <div class="m_picture">
  1492. <!-- MUSE PICTURE -->
  1493. <img src="https://via.placeholder.com/370x300">
  1494. </div></div>
  1495.  
  1496.  
  1497. </div> <!-- ◦ ◠ END OF MUSE 007 ◞ ◦ -->
  1498.  
  1499.  
  1500.  
  1501.  
  1502. <!-- ◦ ◠ MUSE #008 ◞ ◦ -->
  1503. <div class="content" id="ms8">
  1504.  
  1505.  
  1506. <div class="leftie">
  1507. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1508. <div class="m_header">
  1509. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1510. <!-- N A M E --> <h2> MUSE NAME </h2>
  1511. <!-- Q U O T E -->
  1512. <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>
  1513. </div>
  1514.  
  1515. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1516. <div class="m_biography">
  1517.  
  1518.  
  1519.  
  1520.  
  1521. <!-- ( DEJABOO ) VERSION -->
  1522. <!-- You can use this version for long biographs or more than one paragraph. -->
  1523.  
  1524. <article class="b_dejaboo">
  1525. <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>
  1526.  
  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. </article>
  1531.  
  1532.  
  1533. <!-- ( A C E ) VERSION -->
  1534. <!-- This is ideal when you want only short headcanons instead
  1535. of a biography. -->
  1536.  
  1537. <article class="b_ace">
  1538. <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>
  1539.  
  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. </article>
  1551.  
  1552.  
  1553. </div>
  1554.  
  1555. <!-- ( MUSE ) BASIC INFORMATION -->
  1556. <div class="m_basics"><ul>
  1557. <li><b>NAME</b>Lorem Ipsum</li>
  1558. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1559. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1560. <li><b>AGE</b>Lorem Ipsum</li>
  1561. <li><b>GENDER</b>Lorem Ipsum</li>
  1562. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1563. </ul><ul>
  1564. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1565. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1566. <li><b>STATUS</b>Lorem Ipsum</li>
  1567. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1568. <li><b>LOCATION</b>Lorem Ipsum</li>
  1569. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1570. </ul></div></div>
  1571.  
  1572. <!-- ( MUSE ) LINKS -->
  1573. <div class="m_links"><ul>
  1574.  
  1575. <!-- --->
  1576. <li><a href="LINKHERE" title="muse blog">
  1577. <span class="icon-user"></span>
  1578. </a></li>
  1579.  
  1580.  
  1581. <!-- --->
  1582. <li><a href="LINKHERE" title="musing tag">
  1583. <span class="icon-tag"></span>
  1584. </a></li>
  1585.  
  1586.  
  1587. <!-- --->
  1588. <li><a href="LINKHERE" title="opposite blog">
  1589. <span class="icon-heart"></span>
  1590. </a></li>
  1591.  
  1592.  
  1593. <!-- --->
  1594. <li title="relationships">
  1595. <a href="#?w=auto" rel="cn8" class="poplight">
  1596. <span class="icon-people"></span>
  1597. </a></li>
  1598.  
  1599.  
  1600. <!-- --->
  1601. <li title="discord/tumblr">
  1602. <span class="icon-settings"></span>
  1603. </li>
  1604.  
  1605.  
  1606. </ul></div>
  1607.  
  1608.  
  1609. <div class="rightie">
  1610. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1611. <div class="m_spotify">
  1612. <!-- ALBUM IMAGE -->
  1613. <img src="https://via.placeholder.com/80x80">
  1614. <ul>
  1615. <li>SONG NAME</li>
  1616. <li>BAND</li>
  1617. <li>ALBUM</li>
  1618. </ul>
  1619. </div>
  1620.  
  1621.  
  1622. <!-- ( MUSE ) PICTURE -->
  1623. <div class="m_picture">
  1624. <!-- MUSE PICTURE -->
  1625. <img src="https://via.placeholder.com/370x300">
  1626. </div></div>
  1627.  
  1628.  
  1629. </div> <!-- ◦ ◠ END OF MUSE 008 ◞ ◦ -->
  1630.  
  1631.  
  1632.  
  1633.  
  1634. <!-- ◦ ◠ MUSE #009 ◞ ◦ -->
  1635. <div class="content" id="ms9">
  1636.  
  1637.  
  1638. <div class="leftie">
  1639. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1640. <div class="m_header">
  1641. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1642. <!-- N A M E --> <h2> MUSE NAME </h2>
  1643. <!-- Q U O T E -->
  1644. <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>
  1645. </div>
  1646.  
  1647. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1648. <div class="m_biography">
  1649.  
  1650.  
  1651.  
  1652.  
  1653. <!-- ( DEJABOO ) VERSION -->
  1654. <!-- You can use this version for long biographs or more than one paragraph. -->
  1655.  
  1656. <article class="b_dejaboo">
  1657. <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>
  1658.  
  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. </article>
  1663.  
  1664.  
  1665. <!-- ( A C E ) VERSION -->
  1666. <!-- This is ideal when you want only short headcanons instead
  1667. of a biography. -->
  1668.  
  1669. <article class="b_ace">
  1670. <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>
  1671.  
  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. </article>
  1683.  
  1684.  
  1685. </div>
  1686.  
  1687. <!-- ( MUSE ) BASIC INFORMATION -->
  1688. <div class="m_basics"><ul>
  1689. <li><b>NAME</b>Lorem Ipsum</li>
  1690. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1691. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1692. <li><b>AGE</b>Lorem Ipsum</li>
  1693. <li><b>GENDER</b>Lorem Ipsum</li>
  1694. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1695. </ul><ul>
  1696. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1697. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1698. <li><b>STATUS</b>Lorem Ipsum</li>
  1699. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1700. <li><b>LOCATION</b>Lorem Ipsum</li>
  1701. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1702. </ul></div></div>
  1703.  
  1704. <!-- ( MUSE ) LINKS -->
  1705. <div class="m_links"><ul>
  1706.  
  1707. <!-- --->
  1708. <li><a href="LINKHERE" title="muse blog">
  1709. <span class="icon-user"></span>
  1710. </a></li>
  1711.  
  1712.  
  1713. <!-- --->
  1714. <li><a href="LINKHERE" title="musing tag">
  1715. <span class="icon-tag"></span>
  1716. </a></li>
  1717.  
  1718.  
  1719. <!-- --->
  1720. <li><a href="LINKHERE" title="opposite blog">
  1721. <span class="icon-heart"></span>
  1722. </a></li>
  1723.  
  1724.  
  1725. <!-- --->
  1726. <li title="relationships">
  1727. <a href="#?w=auto" rel="cn9" class="poplight">
  1728. <span class="icon-people"></span>
  1729. </a></li>
  1730.  
  1731.  
  1732. <!-- --->
  1733. <li title="discord/tumblr">
  1734. <span class="icon-settings"></span>
  1735. </li>
  1736.  
  1737.  
  1738. </ul></div>
  1739.  
  1740.  
  1741. <div class="rightie">
  1742. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1743. <div class="m_spotify">
  1744. <!-- ALBUM IMAGE -->
  1745. <img src="https://via.placeholder.com/80x80">
  1746. <ul>
  1747. <li>SONG NAME</li>
  1748. <li>BAND</li>
  1749. <li>ALBUM</li>
  1750. </ul>
  1751. </div>
  1752.  
  1753.  
  1754. <!-- ( MUSE ) PICTURE -->
  1755. <div class="m_picture">
  1756. <!-- MUSE PICTURE -->
  1757. <img src="https://via.placeholder.com/370x300">
  1758. </div></div>
  1759.  
  1760.  
  1761. </div> <!-- ◦ ◠ END OF MUSE 009 ◞ ◦ -->
  1762.  
  1763.  
  1764.  
  1765. <!-- ◦ ◠ MUSE #010 ◞ ◦ -->
  1766. <div class="content" id="ms10">
  1767.  
  1768.  
  1769. <div class="leftie">
  1770. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1771. <div class="m_header">
  1772. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1773. <!-- N A M E --> <h2> MUSE NAME </h2>
  1774. <!-- Q U O T E -->
  1775. <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>
  1776. </div>
  1777.  
  1778. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1779. <div class="m_biography">
  1780.  
  1781.  
  1782.  
  1783.  
  1784. <!-- ( DEJABOO ) VERSION -->
  1785. <!-- You can use this version for long biographs or more than one paragraph. -->
  1786.  
  1787. <article class="b_dejaboo">
  1788. <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>
  1789.  
  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. </article>
  1794.  
  1795.  
  1796. <!-- ( A C E ) VERSION -->
  1797. <!-- This is ideal when you want only short headcanons instead
  1798. of a biography. -->
  1799.  
  1800. <article class="b_ace">
  1801. <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>
  1802.  
  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. </article>
  1814.  
  1815.  
  1816. </div>
  1817.  
  1818. <!-- ( MUSE ) BASIC INFORMATION -->
  1819. <div class="m_basics"><ul>
  1820. <li><b>NAME</b>Lorem Ipsum</li>
  1821. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1822. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1823. <li><b>AGE</b>Lorem Ipsum</li>
  1824. <li><b>GENDER</b>Lorem Ipsum</li>
  1825. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1826. </ul><ul>
  1827. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1828. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1829. <li><b>STATUS</b>Lorem Ipsum</li>
  1830. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1831. <li><b>LOCATION</b>Lorem Ipsum</li>
  1832. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1833. </ul></div></div>
  1834.  
  1835. <!-- ( MUSE ) LINKS -->
  1836. <div class="m_links"><ul>
  1837.  
  1838. <!-- --->
  1839. <li><a href="LINKHERE" title="muse blog">
  1840. <span class="icon-user"></span>
  1841. </a></li>
  1842.  
  1843.  
  1844. <!-- --->
  1845. <li><a href="LINKHERE" title="musing tag">
  1846. <span class="icon-tag"></span>
  1847. </a></li>
  1848.  
  1849.  
  1850. <!-- --->
  1851. <li><a href="LINKHERE" title="opposite blog">
  1852. <span class="icon-heart"></span>
  1853. </a></li>
  1854.  
  1855.  
  1856. <!-- --->
  1857. <li title="relationships">
  1858. <a href="#?w=auto" rel="cn10" class="poplight">
  1859. <span class="icon-people"></span>
  1860. </a></li>
  1861.  
  1862.  
  1863. <!-- --->
  1864. <li title="discord/tumblr">
  1865. <span class="icon-settings"></span>
  1866. </li>
  1867.  
  1868.  
  1869. </ul></div>
  1870.  
  1871.  
  1872. <div class="rightie">
  1873. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  1874. <div class="m_spotify">
  1875. <!-- ALBUM IMAGE -->
  1876. <img src="https://via.placeholder.com/80x80">
  1877. <ul>
  1878. <li>SONG NAME</li>
  1879. <li>BAND</li>
  1880. <li>ALBUM</li>
  1881. </ul>
  1882. </div>
  1883.  
  1884.  
  1885. <!-- ( MUSE ) PICTURE -->
  1886. <div class="m_picture">
  1887. <!-- MUSE PICTURE -->
  1888. <img src="https://via.placeholder.com/370x300">
  1889. </div></div>
  1890.  
  1891.  
  1892. </div> <!-- ◦ ◠ END OF MUSE 010 ◞ ◦ -->
  1893.  
  1894.  
  1895.  
  1896.  
  1897. <!-- ◦ ◠ MUSE #011 ◞ ◦ -->
  1898. <div class="content" id="ms11">
  1899.  
  1900.  
  1901. <div class="leftie">
  1902. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  1903. <div class="m_header">
  1904. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  1905. <!-- N A M E --> <h2> MUSE NAME </h2>
  1906. <!-- Q U O T E -->
  1907. <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>
  1908. </div>
  1909.  
  1910. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  1911. <div class="m_biography">
  1912.  
  1913.  
  1914.  
  1915.  
  1916. <!-- ( DEJABOO ) VERSION -->
  1917. <!-- You can use this version for long biographs or more than one paragraph. -->
  1918.  
  1919. <article class="b_dejaboo">
  1920. <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>
  1921.  
  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. </article>
  1926.  
  1927.  
  1928. <!-- ( A C E ) VERSION -->
  1929. <!-- This is ideal when you want only short headcanons instead
  1930. of a biography. -->
  1931.  
  1932. <article class="b_ace">
  1933. <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>
  1934.  
  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. </article>
  1946.  
  1947.  
  1948. </div>
  1949.  
  1950. <!-- ( MUSE ) BASIC INFORMATION -->
  1951. <div class="m_basics"><ul>
  1952. <li><b>NAME</b>Lorem Ipsum</li>
  1953. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  1954. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  1955. <li><b>AGE</b>Lorem Ipsum</li>
  1956. <li><b>GENDER</b>Lorem Ipsum</li>
  1957. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  1958. </ul><ul>
  1959. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  1960. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  1961. <li><b>STATUS</b>Lorem Ipsum</li>
  1962. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  1963. <li><b>LOCATION</b>Lorem Ipsum</li>
  1964. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  1965. </ul></div></div>
  1966.  
  1967. <!-- ( MUSE ) LINKS -->
  1968. <div class="m_links"><ul>
  1969.  
  1970. <!-- --->
  1971. <li><a href="LINKHERE" title="muse blog">
  1972. <span class="icon-user"></span>
  1973. </a></li>
  1974.  
  1975.  
  1976. <!-- --->
  1977. <li><a href="LINKHERE" title="musing tag">
  1978. <span class="icon-tag"></span>
  1979. </a></li>
  1980.  
  1981.  
  1982. <!-- --->
  1983. <li><a href="LINKHERE" title="opposite blog">
  1984. <span class="icon-heart"></span>
  1985. </a></li>
  1986.  
  1987.  
  1988. <!-- --->
  1989. <li title="relationships">
  1990. <a href="#?w=auto" rel="cn11" class="poplight">
  1991. <span class="icon-people"></span>
  1992. </a></li>
  1993.  
  1994.  
  1995. <!-- --->
  1996. <li title="discord/tumblr">
  1997. <span class="icon-settings"></span>
  1998. </li>
  1999.  
  2000.  
  2001. </ul></div>
  2002.  
  2003.  
  2004. <div class="rightie">
  2005. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  2006. <div class="m_spotify">
  2007. <!-- ALBUM IMAGE -->
  2008. <img src="https://via.placeholder.com/80x80">
  2009. <ul>
  2010. <li>SONG NAME</li>
  2011. <li>BAND</li>
  2012. <li>ALBUM</li>
  2013. </ul>
  2014. </div>
  2015.  
  2016.  
  2017. <!-- ( MUSE ) PICTURE -->
  2018. <div class="m_picture">
  2019. <!-- MUSE PICTURE -->
  2020. <img src="https://via.placeholder.com/370x300">
  2021. </div></div>
  2022.  
  2023.  
  2024. </div> <!-- ◦ ◠ END OF MUSE 011 ◞ ◦ -->
  2025.  
  2026.  
  2027.  
  2028.  
  2029. <!-- ◦ ◠ MUSE #012 ◞ ◦ -->
  2030. <div class="content" id="ms12">
  2031.  
  2032.  
  2033. <div class="leftie">
  2034. <!-- ◦ ◠ ( HEADER ) ◞ ◦ -->
  2035. <div class="m_header">
  2036. <!-- L A B E L --> <h1> MUSE LABEL </h1>
  2037. <!-- N A M E --> <h2> MUSE NAME </h2>
  2038. <!-- Q U O T E -->
  2039. <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>
  2040. </div>
  2041.  
  2042. <!-- ◦ ◠ ( BIOGRAPHY ) ◞ ◦ -->
  2043. <div class="m_biography">
  2044.  
  2045.  
  2046.  
  2047.  
  2048. <!-- ( DEJABOO ) VERSION -->
  2049. <!-- You can use this version for long biographs or more than one paragraph. -->
  2050.  
  2051. <article class="b_dejaboo">
  2052. <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>
  2053.  
  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. </article>
  2058.  
  2059.  
  2060. <!-- ( A C E ) VERSION -->
  2061. <!-- This is ideal when you want only short headcanons instead
  2062. of a biography. -->
  2063.  
  2064. <article class="b_ace">
  2065. <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>
  2066.  
  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. </article>
  2078.  
  2079.  
  2080. </div>
  2081.  
  2082. <!-- ( MUSE ) BASIC INFORMATION -->
  2083. <div class="m_basics"><ul>
  2084. <li><b>NAME</b>Lorem Ipsum</li>
  2085. <li><b>BIRTHPLACE</b>Lorem Ipsum</li>
  2086. <li><b>BIRTHDATE</b>Lorem Ipsum</li>
  2087. <li><b>AGE</b>Lorem Ipsum</li>
  2088. <li><b>GENDER</b>Lorem Ipsum</li>
  2089. <li><b>SEXUALITY</b>Lorem Ipsum</li>
  2090. </ul><ul>
  2091. <li><b>ETHNICITY</b>Lorem Ipsum</li>
  2092. <li><b>ZODIAC SIGN</b>Lorem Ipsum</li>
  2093. <li><b>STATUS</b>Lorem Ipsum</li>
  2094. <li><b>OCCUPATION</b>Lorem Ipsum</li>
  2095. <li><b>LOCATION</b>Lorem Ipsum</li>
  2096. <li><b>FACECLAIM</b>Lorem Ipsum</li>
  2097. </ul></div></div>
  2098.  
  2099. <!-- ( MUSE ) LINKS -->
  2100. <div class="m_links"><ul>
  2101.  
  2102. <!-- --->
  2103. <li><a href="LINKHERE" title="muse blog">
  2104. <span class="icon-user"></span>
  2105. </a></li>
  2106.  
  2107.  
  2108. <!-- --->
  2109. <li><a href="LINKHERE" title="musing tag">
  2110. <span class="icon-tag"></span>
  2111. </a></li>
  2112.  
  2113.  
  2114. <!-- --->
  2115. <li><a href="LINKHERE" title="opposite blog">
  2116. <span class="icon-heart"></span>
  2117. </a></li>
  2118.  
  2119.  
  2120. <!-- --->
  2121. <li title="relationships">
  2122. <a href="#?w=auto" rel="cn12" class="poplight">
  2123. <span class="icon-people"></span>
  2124. </a></li>
  2125.  
  2126.  
  2127. <!-- --->
  2128. <li title="discord/tumblr">
  2129. <span class="icon-settings"></span>
  2130. </li>
  2131.  
  2132.  
  2133. </ul></div>
  2134.  
  2135.  
  2136. <div class="rightie">
  2137. <!-- ( MUSE ) SPOTIFY / THEME SONG -->
  2138. <div class="m_spotify">
  2139. <!-- ALBUM IMAGE -->
  2140. <img src="https://via.placeholder.com/80x80">
  2141. <ul>
  2142. <li>SONG NAME</li>
  2143. <li>BAND</li>
  2144. <li>ALBUM</li>
  2145. </ul>
  2146. </div>
  2147.  
  2148.  
  2149. <!-- ( MUSE ) PICTURE -->
  2150. <div class="m_picture">
  2151. <!-- MUSE PICTURE -->
  2152. <img src="https://via.placeholder.com/370x300">
  2153. </div></div>
  2154.  
  2155.  
  2156. </div> <!-- ◦ ◠ END OF MUSE 012 ◞ ◦ -->
  2157.  
  2158.  
  2159.  
  2160.  
  2161.  
  2162. </div>
  2163. <!-- --------- ◦ ◠ END OF MAIN ◞ ◦ ------------- -->
  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.  
  2301. <!-- MUSE 001 -->
  2302. <div id="cn1" class="popup_block">
  2303.  
  2304. <div class="connections">
  2305.  
  2306.  
  2307. <!-- CONNECTION #001 -->
  2308. <article class="cont_cnn">
  2309. <div class="cont_hd">
  2310. <!-- ( CNN ) MUSE PICTURE -->
  2311. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2312. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2313. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2314. <!-- ( CNN ) LINKS -->
  2315. <ul>
  2316. <li title="MUSE BLOG">
  2317. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2318.  
  2319. <li title="CONNECTION TAG">
  2320. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2321.  
  2322. <li title="LINKNAME">
  2323. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2324. </ul>
  2325.  
  2326. </div>
  2327. <!-- ( CNN ) DESCRIPTION -->
  2328. <p>
  2329. 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
  2330. </p>
  2331. </article>
  2332.  
  2333.  
  2334.  
  2335. <!-- CONNECTION #002 -->
  2336. <article class="cont_cnn">
  2337. <div class="cont_hd">
  2338. <!-- ( CNN ) MUSE PICTURE -->
  2339. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2340. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2341. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2342. <!-- ( CNN ) LINKS -->
  2343. <ul>
  2344. <li title="MUSE BLOG">
  2345. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2346.  
  2347. <li title="CONNECTION TAG">
  2348. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2349.  
  2350. <li title="LINKNAME">
  2351. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2352. </ul>
  2353.  
  2354. </div>
  2355. <!-- ( CNN ) DESCRIPTION -->
  2356. <p>
  2357. 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
  2358. </p>
  2359. </article>
  2360.  
  2361.  
  2362.  
  2363. <!-- CONNECTION #003 -->
  2364. <article class="cont_cnn">
  2365. <div class="cont_hd">
  2366. <!-- ( CNN ) MUSE PICTURE -->
  2367. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2368. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2369. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2370. <!-- ( CNN ) LINKS -->
  2371. <ul>
  2372. <li title="MUSE BLOG">
  2373. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2374.  
  2375. <li title="CONNECTION TAG">
  2376. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2377.  
  2378. <li title="LINKNAME">
  2379. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2380. </ul>
  2381.  
  2382. </div>
  2383. <!-- ( CNN ) DESCRIPTION -->
  2384. <p>
  2385. 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
  2386. </p>
  2387. </article>
  2388.  
  2389.  
  2390.  
  2391. </div>
  2392.  
  2393. </div></div></div></div></div></div></div></div></div></div></div>
  2394.  
  2395.  
  2396.  
  2397.  
  2398.  
  2399. <!-- MUSE 002 -->
  2400. <div id="cn2" class="popup_block">
  2401.  
  2402. <div class="connections">
  2403.  
  2404.  
  2405. <!-- CONNECTION #001 -->
  2406. <article class="cont_cnn">
  2407. <div class="cont_hd">
  2408. <!-- ( CNN ) MUSE PICTURE -->
  2409. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2410. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2411. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2412. <!-- ( CNN ) LINKS -->
  2413. <ul>
  2414. <li title="MUSE BLOG">
  2415. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2416.  
  2417. <li title="CONNECTION TAG">
  2418. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2419.  
  2420. <li title="LINKNAME">
  2421. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2422. </ul>
  2423.  
  2424. </div>
  2425. <!-- ( CNN ) DESCRIPTION -->
  2426. <p>
  2427. 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
  2428. </p>
  2429. </article>
  2430.  
  2431.  
  2432.  
  2433. <!-- CONNECTION #002 -->
  2434. <article class="cont_cnn">
  2435. <div class="cont_hd">
  2436. <!-- ( CNN ) MUSE PICTURE -->
  2437. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2438. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2439. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2440. <!-- ( CNN ) LINKS -->
  2441. <ul>
  2442. <li title="MUSE BLOG">
  2443. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2444.  
  2445. <li title="CONNECTION TAG">
  2446. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2447.  
  2448. <li title="LINKNAME">
  2449. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2450. </ul>
  2451.  
  2452. </div>
  2453. <!-- ( CNN ) DESCRIPTION -->
  2454. <p>
  2455. 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
  2456. </p>
  2457. </article>
  2458.  
  2459.  
  2460.  
  2461. <!-- CONNECTION #003 -->
  2462. <article class="cont_cnn">
  2463. <div class="cont_hd">
  2464. <!-- ( CNN ) MUSE PICTURE -->
  2465. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2466. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2467. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2468. <!-- ( CNN ) LINKS -->
  2469. <ul>
  2470. <li title="MUSE BLOG">
  2471. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2472.  
  2473. <li title="CONNECTION TAG">
  2474. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2475.  
  2476. <li title="LINKNAME">
  2477. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2478. </ul>
  2479.  
  2480. </div>
  2481. <!-- ( CNN ) DESCRIPTION -->
  2482. <p>
  2483. 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
  2484. </p>
  2485. </article>
  2486.  
  2487.  
  2488.  
  2489. </div>
  2490.  
  2491. </div></div></div></div></div></div></div></div></div></div></div>
  2492.  
  2493.  
  2494.  
  2495.  
  2496.  
  2497.  
  2498.  
  2499.  
  2500. <!-- MUSE 003 -->
  2501. <div id="cn3" class="popup_block">
  2502.  
  2503. <div class="connections">
  2504.  
  2505.  
  2506. <!-- CONNECTION #001 -->
  2507. <article class="cont_cnn">
  2508. <div class="cont_hd">
  2509. <!-- ( CNN ) MUSE PICTURE -->
  2510. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2511. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2512. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2513. <!-- ( CNN ) LINKS -->
  2514. <ul>
  2515. <li title="MUSE BLOG">
  2516. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2517.  
  2518. <li title="CONNECTION TAG">
  2519. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2520.  
  2521. <li title="LINKNAME">
  2522. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2523. </ul>
  2524.  
  2525. </div>
  2526. <!-- ( CNN ) DESCRIPTION -->
  2527. <p>
  2528. 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
  2529. </p>
  2530. </article>
  2531.  
  2532.  
  2533.  
  2534. <!-- CONNECTION #002 -->
  2535. <article class="cont_cnn">
  2536. <div class="cont_hd">
  2537. <!-- ( CNN ) MUSE PICTURE -->
  2538. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2539. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2540. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2541. <!-- ( CNN ) LINKS -->
  2542. <ul>
  2543. <li title="MUSE BLOG">
  2544. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2545.  
  2546. <li title="CONNECTION TAG">
  2547. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2548.  
  2549. <li title="LINKNAME">
  2550. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2551. </ul>
  2552.  
  2553. </div>
  2554. <!-- ( CNN ) DESCRIPTION -->
  2555. <p>
  2556. 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
  2557. </p>
  2558. </article>
  2559.  
  2560.  
  2561.  
  2562. <!-- CONNECTION #003 -->
  2563. <article class="cont_cnn">
  2564. <div class="cont_hd">
  2565. <!-- ( CNN ) MUSE PICTURE -->
  2566. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2567. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2568. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2569. <!-- ( CNN ) LINKS -->
  2570. <ul>
  2571. <li title="MUSE BLOG">
  2572. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2573.  
  2574. <li title="CONNECTION TAG">
  2575. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2576.  
  2577. <li title="LINKNAME">
  2578. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2579. </ul>
  2580.  
  2581. </div>
  2582. <!-- ( CNN ) DESCRIPTION -->
  2583. <p>
  2584. 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
  2585. </p>
  2586. </article>
  2587.  
  2588.  
  2589.  
  2590.  
  2591. </div>
  2592.  
  2593. </div></div></div></div></div></div></div></div></div></div></div>
  2594.  
  2595.  
  2596.  
  2597.  
  2598.  
  2599.  
  2600. <!-- MUSE 004 -->
  2601. <div id="cn4" class="popup_block">
  2602.  
  2603. <div class="connections">
  2604.  
  2605.  
  2606. <!-- CONNECTION #001 -->
  2607. <article class="cont_cnn">
  2608. <div class="cont_hd">
  2609. <!-- ( CNN ) MUSE PICTURE -->
  2610. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2611. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2612. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2613. <!-- ( CNN ) LINKS -->
  2614. <ul>
  2615. <li title="MUSE BLOG">
  2616. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2617.  
  2618. <li title="CONNECTION TAG">
  2619. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2620.  
  2621. <li title="LINKNAME">
  2622. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2623. </ul>
  2624.  
  2625. </div>
  2626. <!-- ( CNN ) DESCRIPTION -->
  2627. <p>
  2628. 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
  2629. </p>
  2630. </article>
  2631.  
  2632.  
  2633.  
  2634. <!-- CONNECTION #002 -->
  2635. <article class="cont_cnn">
  2636. <div class="cont_hd">
  2637. <!-- ( CNN ) MUSE PICTURE -->
  2638. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2639. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2640. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2641. <!-- ( CNN ) LINKS -->
  2642. <ul>
  2643. <li title="MUSE BLOG">
  2644. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2645.  
  2646. <li title="CONNECTION TAG">
  2647. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2648.  
  2649. <li title="LINKNAME">
  2650. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2651. </ul>
  2652.  
  2653. </div>
  2654. <!-- ( CNN ) DESCRIPTION -->
  2655. <p>
  2656. 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
  2657. </p>
  2658. </article>
  2659.  
  2660.  
  2661.  
  2662. <!-- CONNECTION #003 -->
  2663. <article class="cont_cnn">
  2664. <div class="cont_hd">
  2665. <!-- ( CNN ) MUSE PICTURE -->
  2666. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2667. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2668. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2669. <!-- ( CNN ) LINKS -->
  2670. <ul>
  2671. <li title="MUSE BLOG">
  2672. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2673.  
  2674. <li title="CONNECTION TAG">
  2675. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2676.  
  2677. <li title="LINKNAME">
  2678. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2679. </ul>
  2680.  
  2681. </div>
  2682. <!-- ( CNN ) DESCRIPTION -->
  2683. <p>
  2684. 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
  2685. </p>
  2686. </article>
  2687.  
  2688.  
  2689. </div>
  2690.  
  2691. </div></div></div></div></div></div></div></div></div></div></div>
  2692.  
  2693.  
  2694.  
  2695.  
  2696.  
  2697. <!-- MUSE 005 -->
  2698. <div id="cn5" class="popup_block">
  2699.  
  2700. <div class="connections">
  2701.  
  2702.  
  2703. <!-- CONNECTION #001 -->
  2704. <article class="cont_cnn">
  2705. <div class="cont_hd">
  2706. <!-- ( CNN ) MUSE PICTURE -->
  2707. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2708. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2709. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2710. <!-- ( CNN ) LINKS -->
  2711. <ul>
  2712. <li title="MUSE BLOG">
  2713. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2714.  
  2715. <li title="CONNECTION TAG">
  2716. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2717.  
  2718. <li title="LINKNAME">
  2719. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2720. </ul>
  2721.  
  2722. </div>
  2723. <!-- ( CNN ) DESCRIPTION -->
  2724. <p>
  2725. 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
  2726. </p>
  2727. </article>
  2728.  
  2729.  
  2730.  
  2731. <!-- CONNECTION #002 -->
  2732. <article class="cont_cnn">
  2733. <div class="cont_hd">
  2734. <!-- ( CNN ) MUSE PICTURE -->
  2735. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2736. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2737. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2738. <!-- ( CNN ) LINKS -->
  2739. <ul>
  2740. <li title="MUSE BLOG">
  2741. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2742.  
  2743. <li title="CONNECTION TAG">
  2744. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2745.  
  2746. <li title="LINKNAME">
  2747. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2748. </ul>
  2749.  
  2750. </div>
  2751. <!-- ( CNN ) DESCRIPTION -->
  2752. <p>
  2753. 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
  2754. </p>
  2755. </article>
  2756.  
  2757.  
  2758.  
  2759. <!-- CONNECTION #003 -->
  2760. <article class="cont_cnn">
  2761. <div class="cont_hd">
  2762. <!-- ( CNN ) MUSE PICTURE -->
  2763. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2764. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2765. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2766. <!-- ( CNN ) LINKS -->
  2767. <ul>
  2768. <li title="MUSE BLOG">
  2769. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2770.  
  2771. <li title="CONNECTION TAG">
  2772. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2773.  
  2774. <li title="LINKNAME">
  2775. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2776. </ul>
  2777.  
  2778. </div>
  2779. <!-- ( CNN ) DESCRIPTION -->
  2780. <p>
  2781. 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
  2782. </p>
  2783. </article>
  2784.  
  2785.  
  2786. </div>
  2787.  
  2788. </div></div></div></div></div></div></div></div></div></div></div>
  2789.  
  2790.  
  2791.  
  2792.  
  2793.  
  2794. <!-- MUSE 006 -->
  2795. <div id="cn6" class="popup_block">
  2796.  
  2797. <div class="connections">
  2798.  
  2799.  
  2800. <!-- CONNECTION #001 -->
  2801. <article class="cont_cnn">
  2802. <div class="cont_hd">
  2803. <!-- ( CNN ) MUSE PICTURE -->
  2804. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2805. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2806. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2807. <!-- ( CNN ) LINKS -->
  2808. <ul>
  2809. <li title="MUSE BLOG">
  2810. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2811.  
  2812. <li title="CONNECTION TAG">
  2813. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2814.  
  2815. <li title="LINKNAME">
  2816. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2817. </ul>
  2818.  
  2819. </div>
  2820. <!-- ( CNN ) DESCRIPTION -->
  2821. <p>
  2822. 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
  2823. </p>
  2824. </article>
  2825.  
  2826.  
  2827.  
  2828. <!-- CONNECTION #002 -->
  2829. <article class="cont_cnn">
  2830. <div class="cont_hd">
  2831. <!-- ( CNN ) MUSE PICTURE -->
  2832. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2833. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2834. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2835. <!-- ( CNN ) LINKS -->
  2836. <ul>
  2837. <li title="MUSE BLOG">
  2838. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2839.  
  2840. <li title="CONNECTION TAG">
  2841. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2842.  
  2843. <li title="LINKNAME">
  2844. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2845. </ul>
  2846.  
  2847. </div>
  2848. <!-- ( CNN ) DESCRIPTION -->
  2849. <p>
  2850. 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
  2851. </p>
  2852. </article>
  2853.  
  2854.  
  2855.  
  2856. <!-- CONNECTION #003 -->
  2857. <article class="cont_cnn">
  2858. <div class="cont_hd">
  2859. <!-- ( CNN ) MUSE PICTURE -->
  2860. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2861. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2862. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2863. <!-- ( CNN ) LINKS -->
  2864. <ul>
  2865. <li title="MUSE BLOG">
  2866. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2867.  
  2868. <li title="CONNECTION TAG">
  2869. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2870.  
  2871. <li title="LINKNAME">
  2872. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2873. </ul>
  2874.  
  2875. </div>
  2876. <!-- ( CNN ) DESCRIPTION -->
  2877. <p>
  2878. 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
  2879. </p>
  2880. </article>
  2881.  
  2882.  
  2883.  
  2884. </div>
  2885.  
  2886. </div></div></div></div></div></div></div></div></div></div></div>
  2887.  
  2888.  
  2889.  
  2890.  
  2891.  
  2892. <!-- MUSE 007 -->
  2893. <div id="cn7" class="popup_block">
  2894.  
  2895. <div class="connections">
  2896.  
  2897.  
  2898. <!-- CONNECTION #001 -->
  2899. <article class="cont_cnn">
  2900. <div class="cont_hd">
  2901. <!-- ( CNN ) MUSE PICTURE -->
  2902. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2903. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2904. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2905. <!-- ( CNN ) LINKS -->
  2906. <ul>
  2907. <li title="MUSE BLOG">
  2908. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2909.  
  2910. <li title="CONNECTION TAG">
  2911. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2912.  
  2913. <li title="LINKNAME">
  2914. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2915. </ul>
  2916.  
  2917. </div>
  2918. <!-- ( CNN ) DESCRIPTION -->
  2919. <p>
  2920. 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
  2921. </p>
  2922. </article>
  2923.  
  2924.  
  2925.  
  2926. <!-- CONNECTION #002 -->
  2927. <article class="cont_cnn">
  2928. <div class="cont_hd">
  2929. <!-- ( CNN ) MUSE PICTURE -->
  2930. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2931. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2932. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2933. <!-- ( CNN ) LINKS -->
  2934. <ul>
  2935. <li title="MUSE BLOG">
  2936. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2937.  
  2938. <li title="CONNECTION TAG">
  2939. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2940.  
  2941. <li title="LINKNAME">
  2942. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2943. </ul>
  2944.  
  2945. </div>
  2946. <!-- ( CNN ) DESCRIPTION -->
  2947. <p>
  2948. 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
  2949. </p>
  2950. </article>
  2951.  
  2952.  
  2953.  
  2954. <!-- CONNECTION #003 -->
  2955. <article class="cont_cnn">
  2956. <div class="cont_hd">
  2957. <!-- ( CNN ) MUSE PICTURE -->
  2958. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  2959. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  2960. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  2961. <!-- ( CNN ) LINKS -->
  2962. <ul>
  2963. <li title="MUSE BLOG">
  2964. <a href="URLHERE"><span class="icon-user"></span></a></li>
  2965.  
  2966. <li title="CONNECTION TAG">
  2967. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  2968.  
  2969. <li title="LINKNAME">
  2970. <a href="URLHERE"><span class="icon-link"></span></a></li>
  2971. </ul>
  2972.  
  2973. </div>
  2974. <!-- ( CNN ) DESCRIPTION -->
  2975. <p>
  2976. 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
  2977. </p>
  2978. </article>
  2979.  
  2980.  
  2981.  
  2982. </div>
  2983.  
  2984. </div></div></div></div></div></div></div></div></div></div></div>
  2985.  
  2986.  
  2987.  
  2988.  
  2989.  
  2990. <!-- MUSE 008 -->
  2991. <div id="cn8" class="popup_block">
  2992.  
  2993. <div class="connections">
  2994.  
  2995.  
  2996. <!-- CONNECTION #001 -->
  2997. <article class="cont_cnn">
  2998. <div class="cont_hd">
  2999. <!-- ( CNN ) MUSE PICTURE -->
  3000. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3001. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3002. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3003. <!-- ( CNN ) LINKS -->
  3004. <ul>
  3005. <li title="MUSE BLOG">
  3006. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3007.  
  3008. <li title="CONNECTION TAG">
  3009. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3010.  
  3011. <li title="LINKNAME">
  3012. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3013. </ul>
  3014.  
  3015. </div>
  3016. <!-- ( CNN ) DESCRIPTION -->
  3017. <p>
  3018. 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
  3019. </p>
  3020. </article>
  3021.  
  3022.  
  3023.  
  3024. <!-- CONNECTION #002 -->
  3025. <article class="cont_cnn">
  3026. <div class="cont_hd">
  3027. <!-- ( CNN ) MUSE PICTURE -->
  3028. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3029. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3030. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3031. <!-- ( CNN ) LINKS -->
  3032. <ul>
  3033. <li title="MUSE BLOG">
  3034. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3035.  
  3036. <li title="CONNECTION TAG">
  3037. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3038.  
  3039. <li title="LINKNAME">
  3040. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3041. </ul>
  3042.  
  3043. </div>
  3044. <!-- ( CNN ) DESCRIPTION -->
  3045. <p>
  3046. 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
  3047. </p>
  3048. </article>
  3049.  
  3050.  
  3051.  
  3052. <!-- CONNECTION #003 -->
  3053. <article class="cont_cnn">
  3054. <div class="cont_hd">
  3055. <!-- ( CNN ) MUSE PICTURE -->
  3056. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3057. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3058. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3059. <!-- ( CNN ) LINKS -->
  3060. <ul>
  3061. <li title="MUSE BLOG">
  3062. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3063.  
  3064. <li title="CONNECTION TAG">
  3065. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3066.  
  3067. <li title="LINKNAME">
  3068. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3069. </ul>
  3070.  
  3071. </div>
  3072. <!-- ( CNN ) DESCRIPTION -->
  3073. <p>
  3074. 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
  3075. </p>
  3076. </article>
  3077.  
  3078.  
  3079.  
  3080. </div>
  3081.  
  3082. </div></div></div></div></div></div></div></div></div></div></div>
  3083.  
  3084.  
  3085.  
  3086.  
  3087.  
  3088.  
  3089. <!-- MUSE 009 -->
  3090. <div id="cn9" class="popup_block">
  3091.  
  3092. <div class="connections">
  3093.  
  3094.  
  3095. <!-- CONNECTION #001 -->
  3096. <article class="cont_cnn">
  3097. <div class="cont_hd">
  3098. <!-- ( CNN ) MUSE PICTURE -->
  3099. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3100. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3101. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3102. <!-- ( CNN ) LINKS -->
  3103. <ul>
  3104. <li title="MUSE BLOG">
  3105. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3106.  
  3107. <li title="CONNECTION TAG">
  3108. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3109.  
  3110. <li title="LINKNAME">
  3111. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3112. </ul>
  3113.  
  3114. </div>
  3115. <!-- ( CNN ) DESCRIPTION -->
  3116. <p>
  3117. 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
  3118. </p>
  3119. </article>
  3120.  
  3121.  
  3122.  
  3123. <!-- CONNECTION #002 -->
  3124. <article class="cont_cnn">
  3125. <div class="cont_hd">
  3126. <!-- ( CNN ) MUSE PICTURE -->
  3127. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3128. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3129. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3130. <!-- ( CNN ) LINKS -->
  3131. <ul>
  3132. <li title="MUSE BLOG">
  3133. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3134.  
  3135. <li title="CONNECTION TAG">
  3136. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3137.  
  3138. <li title="LINKNAME">
  3139. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3140. </ul>
  3141.  
  3142. </div>
  3143. <!-- ( CNN ) DESCRIPTION -->
  3144. <p>
  3145. 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
  3146. </p>
  3147. </article>
  3148.  
  3149.  
  3150.  
  3151. <!-- CONNECTION #003 -->
  3152. <article class="cont_cnn">
  3153. <div class="cont_hd">
  3154. <!-- ( CNN ) MUSE PICTURE -->
  3155. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3156. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3157. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3158. <!-- ( CNN ) LINKS -->
  3159. <ul>
  3160. <li title="MUSE BLOG">
  3161. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3162.  
  3163. <li title="CONNECTION TAG">
  3164. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3165.  
  3166. <li title="LINKNAME">
  3167. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3168. </ul>
  3169.  
  3170. </div>
  3171. <!-- ( CNN ) DESCRIPTION -->
  3172. <p>
  3173. 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
  3174. </p>
  3175. </article>
  3176.  
  3177.  
  3178.  
  3179. </div>
  3180.  
  3181. </div></div></div></div></div></div></div></div></div></div></div>
  3182.  
  3183.  
  3184.  
  3185.  
  3186.  
  3187.  
  3188. <!-- MUSE 010 -->
  3189. <div id="cn10" class="popup_block">
  3190.  
  3191. <div class="connections">
  3192.  
  3193.  
  3194. <!-- CONNECTION #001 -->
  3195. <article class="cont_cnn">
  3196. <div class="cont_hd">
  3197. <!-- ( CNN ) MUSE PICTURE -->
  3198. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3199. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3200. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3201. <!-- ( CNN ) LINKS -->
  3202. <ul>
  3203. <li title="MUSE BLOG">
  3204. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3205.  
  3206. <li title="CONNECTION TAG">
  3207. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3208.  
  3209. <li title="LINKNAME">
  3210. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3211. </ul>
  3212.  
  3213. </div>
  3214. <!-- ( CNN ) DESCRIPTION -->
  3215. <p>
  3216. 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
  3217. </p>
  3218. </article>
  3219.  
  3220.  
  3221.  
  3222. <!-- CONNECTION #002 -->
  3223. <article class="cont_cnn">
  3224. <div class="cont_hd">
  3225. <!-- ( CNN ) MUSE PICTURE -->
  3226. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3227. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3228. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3229. <!-- ( CNN ) LINKS -->
  3230. <ul>
  3231. <li title="MUSE BLOG">
  3232. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3233.  
  3234. <li title="CONNECTION TAG">
  3235. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3236.  
  3237. <li title="LINKNAME">
  3238. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3239. </ul>
  3240.  
  3241. </div>
  3242. <!-- ( CNN ) DESCRIPTION -->
  3243. <p>
  3244. 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
  3245. </p>
  3246. </article>
  3247.  
  3248.  
  3249.  
  3250. <!-- CONNECTION #003 -->
  3251. <article class="cont_cnn">
  3252. <div class="cont_hd">
  3253. <!-- ( CNN ) MUSE PICTURE -->
  3254. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3255. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3256. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3257. <!-- ( CNN ) LINKS -->
  3258. <ul>
  3259. <li title="MUSE BLOG">
  3260. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3261.  
  3262. <li title="CONNECTION TAG">
  3263. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3264.  
  3265. <li title="LINKNAME">
  3266. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3267. </ul>
  3268.  
  3269. </div>
  3270. <!-- ( CNN ) DESCRIPTION -->
  3271. <p>
  3272. 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
  3273. </p>
  3274. </article>
  3275.  
  3276.  
  3277.  
  3278. </div>
  3279.  
  3280. </div></div></div></div></div></div></div></div></div></div></div>
  3281.  
  3282.  
  3283.  
  3284.  
  3285.  
  3286. <!-- MUSE 011 -->
  3287. <div id="cn11" class="popup_block">
  3288.  
  3289. <div class="connections">
  3290.  
  3291.  
  3292. <!-- CONNECTION #001 -->
  3293. <article class="cont_cnn">
  3294. <div class="cont_hd">
  3295. <!-- ( CNN ) MUSE PICTURE -->
  3296. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3297. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3298. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3299. <!-- ( CNN ) LINKS -->
  3300. <ul>
  3301. <li title="MUSE BLOG">
  3302. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3303.  
  3304. <li title="CONNECTION TAG">
  3305. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3306.  
  3307. <li title="LINKNAME">
  3308. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3309. </ul>
  3310.  
  3311. </div>
  3312. <!-- ( CNN ) DESCRIPTION -->
  3313. <p>
  3314. 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
  3315. </p>
  3316. </article>
  3317.  
  3318.  
  3319.  
  3320. <!-- CONNECTION #002 -->
  3321. <article class="cont_cnn">
  3322. <div class="cont_hd">
  3323. <!-- ( CNN ) MUSE PICTURE -->
  3324. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3325. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3326. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3327. <!-- ( CNN ) LINKS -->
  3328. <ul>
  3329. <li title="MUSE BLOG">
  3330. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3331.  
  3332. <li title="CONNECTION TAG">
  3333. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3334.  
  3335. <li title="LINKNAME">
  3336. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3337. </ul>
  3338.  
  3339. </div>
  3340. <!-- ( CNN ) DESCRIPTION -->
  3341. <p>
  3342. 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
  3343. </p>
  3344. </article>
  3345.  
  3346.  
  3347.  
  3348. <!-- CONNECTION #003 -->
  3349. <article class="cont_cnn">
  3350. <div class="cont_hd">
  3351. <!-- ( CNN ) MUSE PICTURE -->
  3352. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3353. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3354. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3355. <!-- ( CNN ) LINKS -->
  3356. <ul>
  3357. <li title="MUSE BLOG">
  3358. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3359.  
  3360. <li title="CONNECTION TAG">
  3361. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3362.  
  3363. <li title="LINKNAME">
  3364. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3365. </ul>
  3366.  
  3367. </div>
  3368. <!-- ( CNN ) DESCRIPTION -->
  3369. <p>
  3370. 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
  3371. </p>
  3372. </article>
  3373.  
  3374.  
  3375.  
  3376. </div>
  3377.  
  3378. </div></div></div></div></div></div></div></div></div></div></div>
  3379.  
  3380.  
  3381.  
  3382.  
  3383.  
  3384.  
  3385. <!-- MUSE 012 -->
  3386. <div id="cn12" class="popup_block">
  3387.  
  3388. <div class="connections">
  3389.  
  3390.  
  3391. <!-- CONNECTION #001 -->
  3392. <article class="cont_cnn">
  3393. <div class="cont_hd">
  3394. <!-- ( CNN ) MUSE PICTURE -->
  3395. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3396. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3397. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3398. <!-- ( CNN ) LINKS -->
  3399. <ul>
  3400. <li title="MUSE BLOG">
  3401. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3402.  
  3403. <li title="CONNECTION TAG">
  3404. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3405.  
  3406. <li title="LINKNAME">
  3407. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3408. </ul>
  3409.  
  3410. </div>
  3411. <!-- ( CNN ) DESCRIPTION -->
  3412. <p>
  3413. 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
  3414. </p>
  3415. </article>
  3416.  
  3417.  
  3418.  
  3419. <!-- CONNECTION #002 -->
  3420. <article class="cont_cnn">
  3421. <div class="cont_hd">
  3422. <!-- ( CNN ) MUSE PICTURE -->
  3423. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3424. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3425. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3426. <!-- ( CNN ) LINKS -->
  3427. <ul>
  3428. <li title="MUSE BLOG">
  3429. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3430.  
  3431. <li title="CONNECTION TAG">
  3432. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3433.  
  3434. <li title="LINKNAME">
  3435. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3436. </ul>
  3437.  
  3438. </div>
  3439. <!-- ( CNN ) DESCRIPTION -->
  3440. <p>
  3441. 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
  3442. </p>
  3443. </article>
  3444.  
  3445.  
  3446.  
  3447. <!-- CONNECTION #003 -->
  3448. <article class="cont_cnn">
  3449. <div class="cont_hd">
  3450. <!-- ( CNN ) MUSE PICTURE -->
  3451. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3452. <!-- ( CNN ) TYPE --> <h1>CONNECTION</h1>
  3453. <!-- ( CNN ) MUSE NAME --><br><h2>MUSE NAME</h2>
  3454. <!-- ( CNN ) LINKS -->
  3455. <ul>
  3456. <li title="MUSE BLOG">
  3457. <a href="URLHERE"><span class="icon-user"></span></a></li>
  3458.  
  3459. <li title="CONNECTION TAG">
  3460. <a href="URLHERE"><span class="icon-heart"></span></a></li>
  3461.  
  3462. <li title="LINKNAME">
  3463. <a href="URLHERE"><span class="icon-link"></span></a></li>
  3464. </ul>
  3465.  
  3466. </div>
  3467. <!-- ( CNN ) DESCRIPTION -->
  3468. <p>
  3469. 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
  3470. </p>
  3471. </article>
  3472.  
  3473.  
  3474. </div>
  3475.  
  3476. </div></div></div></div></div></div></div></div></div></div></div>
  3477.  
  3478.  
  3479.  
  3480.  
  3481.  
  3482.  
  3483.  
  3484.  
  3485. <!-- IF YOU WANT TO ADD MORE CONNECTIONS JUST COPY THIS:
  3486.  
  3487.  
  3488. <article class="cont_cnn">
  3489. <div class="cont_hd">
  3490.  
  3491. <img src="https://via.placeholder.com/80x80" class="cn_picture">
  3492. <h1>CONNECTION</h1>
  3493. <br><h2>MUSE NAME</h2>
  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!