destinatia

PAGE 001: ✧ * º • ☾ MUSE PAGE. ❜ — destinatiia

Apr 19th, 2016
4,130
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. ✧ * ☾ destinatiia.tumblr.com * ✧
  8.  
  9. - you're allowed edit as much as you want, but don't repost and claim as your own afterwards.
  10. - don't move the credit or put it in another page
  11. - don't take fragments from this code and paste it on your own.
  12. - base code made by neonbikethemes as always,,,, absolutely blessed for their existence thank u
  13. -the icons in the preview were NOT made by me so credit to their rightful owners
  14. -enjoy !! and if you have any questions and/or problems just hmu
  15.  
  16. -->
  17.  
  18. <title>your title</title>
  19.  
  20. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  21.  
  22. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  23.  
  24. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  25.  
  26. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  27.  
  28. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  29.  
  30.  
  31. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  32.  
  33. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  34. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  35. <script>
  36. (function($){
  37. $(document).ready(function(){
  38. $("a[title]").style_my_tooltips({
  39. tip_follows_cursor:true,
  40. tip_delay_time:90,
  41. tip_fade_speed:600,
  42. attribute:"title"
  43. });
  44. });
  45. })(jQuery);
  46. </script>
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51. /* ---------------------------- GENERAL ----------------------------- */
  52.  
  53. /* -------- SELECTION TOOL ------- */
  54.  
  55. ::-moz-selection {
  56. background: {color:text};
  57. color: {color:background};
  58. }
  59.  
  60. ::selection {
  61. background: {color:text};
  62. color: {color:background};
  63. }
  64.  
  65. /* -------- SCROLLBAR ------- */
  66.  
  67. ::-webkit-scrollbar {
  68. width: 9px;
  69. }
  70.  
  71. /* Track */
  72. ::-webkit-scrollbar-track {
  73. background:{color:background};
  74. }
  75.  
  76. /* Handle */
  77. ::-webkit-scrollbar-thumb {
  78. background:{color:text};
  79. }
  80. ::-webkit-scrollbar-thumb:window-inactive {
  81. background: transparent;
  82. }
  83.  
  84. /* ------- TOOLTIPS ------ */
  85.  
  86. #s-m-t-tooltip {
  87. max-width:300px;
  88. margin:10px 0px 0px 10px;
  89. background-color:{color:bakground};
  90. font-family:helvetica;
  91. font-size:12px;
  92. color:{color:text};
  93. z-index:999999999999999999999999999999999999;
  94. }
  95.  
  96. /* -------- BASICS ------- */
  97.  
  98. body {
  99. background: #ccc; /*-- you can change the background color here !! and if you're planning on using a background image, use the following: background:url('bg url'); --*/
  100. color: #aaa; /*-- text color --*/
  101. font-family: helvetica, arial;
  102. letter-spacing:0.5px;
  103. text-shadow: 2px 2px 2px #eee;
  104. font-size: 10px;
  105. font-family:calibri;
  106. margin: 0;
  107. padding: 0;
  108. overflow-y:hidden;
  109. overflow-x:auto;
  110. word-wrap: break-word;
  111. line-height:150%;
  112. }
  113.  
  114. h1 {
  115. font-family:'montserrat', sans serif;
  116. font-size:24px;
  117. padding-bottom:15px;
  118. border-bottom:1px solid #8ecbc4;
  119. color: #8ecbc4; /*-- change the color of the h1 text here --*/
  120. }
  121.  
  122.  
  123. h2 {
  124. font-family:'montserrat', sans serif;
  125. font-size:15px;
  126. font-style:italic;
  127. color: #ddbfa8; /*-- change the color of the h2 text here --*/
  128. }
  129.  
  130.  
  131. a {
  132. color: #ddbfa8; /*-- change the color of the links here --*/
  133. text-decoration: none;
  134. -webkit-transition: all .7s;
  135. -moz-transition: all .7s;
  136. -o-transition: all .7s;
  137. -ms-transition: all .7s;
  138. transition: all .7s;
  139. }
  140.  
  141. sup, sub, small {
  142. color: #ddbfa8; /*-- change the color of the sub n smol text yeh --*/
  143. font-family:'montserrat', sans serif;
  144. }
  145.  
  146. b, strong {
  147. color: #8ecbc4; /*-- change the color of the bold text --*/
  148. font-family:'montserrat', sans serif;
  149. }
  150.  
  151. i, em {
  152. color: #8ecbc4; /*-- change the color of the italic text here --*/
  153. font-family:'montserrat', sans serif;
  154. }
  155.  
  156. a:hover{
  157. color:#f5f5f5; /*-- change the color of the links hover text here --*/
  158. -webkit-transition: all .7s;
  159. -moz-transition: all .7s;
  160. -o-transition: all .7s;
  161. -ms-transition: all .7s;
  162. transition: all .7s;
  163. }
  164.  
  165. #bigcon{
  166. width:520px;
  167. margin-left:auto;
  168. margin-right:auto;
  169. }
  170.  
  171. .tabcontent {
  172. position:static;
  173. margin-left:auto;
  174. margin-right:auto;
  175. width: 500px;
  176. margin-top:-50px;
  177. height:500px;
  178. padding:10px;
  179. background:#f5f5f5; /*-- this is the tab content bg color,, make sure it's the same as the container div --*/
  180. overflow:auto;
  181. text-align:center;
  182. margin-bottom:150px;
  183. }
  184.  
  185. #container {
  186. position:static;
  187. margin-left:auto;
  188. margin-right:auto;
  189. width: 500px;
  190. margin-top:-50px;
  191. height:500px;
  192. padding:10px;
  193. background:#f5f5f5; /*-- this is the this is the container bg color,, make sure it's the same as the tabcontent div --*/
  194. overflow:auto;
  195. text-align:center;
  196. margin-bottom:150px;
  197. }
  198.  
  199. #box {
  200. background:#f5f5f5; /*-- just make sure it's the same color as both the tabcontent and container so it looks neat --*/
  201. width: 520px;
  202. margin-top:-50px;
  203. height:520px;
  204. position:fixed;
  205. margin-left:0px;
  206. z-index:-99;
  207. box-shadow: 3px 3px 5px #ccc;
  208. }
  209.  
  210. #topbar{
  211. position:static;
  212. margin-top:60px;
  213. margin-bottom:50px;
  214. text-align:center;
  215. }
  216.  
  217. .blogtitle{
  218. margin-bottom:20px;
  219. text-transform:uppercase;
  220. font-size:24px;
  221. position:fixed;
  222. z-index:-9999;
  223. width:500px;
  224. margin-top:-40px;
  225. background-color:#fff; /*-- this is the muse page section and has the same color as the navbar div so yeah u got it luv --*/
  226. height:200px;
  227. padding-left:10px;
  228. padding-right:10px;
  229. padding-bottom:10px;
  230. padding-top:18px;
  231. letter-spacing:2px;
  232. font-weight:bold;
  233. }
  234.  
  235. #navbar{
  236. display:inline-block;
  237. background-color:#fff;
  238. text-align:center;
  239. }
  240.  
  241. #yo {
  242. color: #fff;
  243. font-size:7.5px;
  244. float:right;
  245. right:0;
  246. text-shadow:none;
  247. bottom:0;
  248. margin-right:10px;
  249. margin-bottom:10px;
  250. padding:10px;
  251. position:fixed;
  252. font-weight:bold;
  253. text-align:center;
  254.  
  255. }
  256.  
  257.  
  258. /* ------------------------------ TABS ------------------------------ */
  259.  
  260. .tabs {
  261. width:100%;
  262. margin-left:0px;
  263. display:inline-block;
  264. }
  265.  
  266. /*----- Tab Links -----*/
  267.  
  268. /* Clearfix */
  269. .tab-links:after {
  270. display:block;
  271. clear:both;
  272. content:'';
  273. }
  274.  
  275. .tab-links li {
  276. margin-right:5px;
  277. display:inline-block;
  278. list-style:none;
  279. text-transform:uppercase;
  280. }
  281.  
  282. .tab-links a {
  283. padding:7px;
  284. display:inline-block;
  285. width:1px;
  286. box-shadow: 3px 3px 5px #999;
  287. background:#ddd; /*-- this is the lil circle's bg color --*/
  288. height:1px;
  289. border-radius:15px;
  290. border: 3px solid #ddd; /*-- this is the lil circle's border color when it's active --*/
  291. transition:all linear 0.15s;
  292. }
  293.  
  294. .tab-links a:hover { /*-- if u want it to look the same as the preview just copy the settings you put before--*/
  295. text-decoration:none;
  296. width:-1px;
  297. height:-1px;
  298. border-radius:15px;
  299. background-color:#ddd;
  300. border: 3px solid #ddd;
  301. }
  302.  
  303. li.active a, li.active a:hover {
  304. background-color:transparent;
  305. border-radius:15px;
  306. -webkit-transition: all .7s;
  307. -moz-transition: all .7s;
  308. -o-transition: all .7s;
  309. -ms-transition: all .7s;
  310. transition: all .7s;
  311. }
  312.  
  313. /*----- Content of Tabs -----*/
  314. .tab-content {
  315. }
  316.  
  317. .tab {
  318. display:none;
  319. }
  320.  
  321. .tab.active {
  322. display:block;
  323. }
  324.  
  325. /* ----- muse css ----- */
  326.  
  327. .icons {
  328. width:auto;
  329. z-index:999999999;
  330. height:200px;
  331. font-family:'montserrat', sans serif;
  332. font-size:24px;
  333. line-height:40px;
  334. float:left;
  335. text-align:center;
  336. color: #8ecbc4; /* -- you can change the name color here ! --*/
  337. padding:10px;
  338. margin-left:8px;
  339. }
  340.  
  341. .header {
  342. background-color:#fff;
  343. width:480px;
  344. height:180px;
  345. padding:10px;
  346. box-shadow: 3px 3px 5px #ccc;
  347. margin-top:0px;
  348. margin-left:0px;
  349. }
  350.  
  351. .mdesc {
  352. width:200px;
  353. z-index:9999999999;
  354. height:140px;
  355. overflow:auto;
  356. float:right;
  357. padding:10px;
  358. font-size:11px;
  359. text-align:justify;
  360. margin-left:73px;
  361. margin-top:-215px;
  362. }
  363.  
  364. .label {
  365. position:fixed;
  366. background-color:#fff;
  367. width:197px;
  368. padding:20px;
  369. box-shadow: 3px 3px 5px #ccc;
  370. text-align:center;
  371. font-weight:bold;
  372. z-index:99999;
  373. color:#8ecbc4; /*-- change the label text color here ! --*/
  374. font-family:'montserrat', sans serif;
  375. font-size:14px;
  376. height:auto;
  377. margin-top:20px;
  378. position:fixed;
  379. }
  380.  
  381. .stats {
  382. position:fixed;
  383. background:#fff;
  384. text-align:justify;
  385. overflow:auto;
  386. height:96px;
  387. padding:15px;
  388. font-size:10px;
  389. width:207px;
  390. box-shadow: 3px 3px 5px #ccc;
  391. margin-top:85px;
  392. }
  393.  
  394. .bio {
  395. width:213px;
  396. z-index:99;
  397. height:150px;
  398. position:fixed;
  399. overflow:auto;
  400. padding:20px;
  401. font-size:11px;
  402. text-align:justify;
  403. margin-top:20px;
  404. background-color:#fff;
  405. margin-left:248px;
  406. box-shadow: 3px 3px 5px #ccc;
  407. }
  408.  
  409. .iconlinks {
  410. margin-top:236px;
  411. text-shadow: 3px 3px #fff;
  412. }
  413.  
  414.  
  415.  
  416. /* --------------------------- Custom CSS -------------------------- */
  417. </style>
  418. </head>
  419. <body>
  420.  
  421.  
  422. <div id="bigcon">
  423.  
  424.  
  425. <!--TOPBAR-->
  426.  
  427. <div id="topbar">
  428.  
  429. <div class="blogtitle">
  430. <a href="/"style="font-family:'montserrat', sans serif;">✰ * º ❛ MUSE PAGE. ❜</a>
  431. </div>
  432.  
  433. <div id="navbar">
  434. <div class="tabs">
  435. <ul class="tab-links">
  436. <li class="active" style="margin-left:-30px">
  437. <a href="#tab1"></a></li>
  438. <li><a href="#tab2"></a></li>
  439. <li><a href="#tab3"></a></li>
  440. <li><a href="#tab4"></a></li>
  441. <li><a href="#tab5"></a></li>
  442. </ul>
  443. </div>
  444. </div>
  445.  
  446. </div>
  447.  
  448.  
  449. <!-- --------------------------- TABS -------------------------- -->
  450. <div id="box"></div>
  451.  
  452. <div class="tabs">
  453.  
  454. <!-- --------------------------- TAB 1 -------------------------- -->
  455.  
  456. <div class="tab-content">
  457. <div id="tab1" class="tab active">
  458. <div id="container">
  459.  
  460.  
  461.  
  462.  
  463. <div class="header">
  464. <div class="icons">
  465.  
  466. first middle last
  467.  
  468. <br><img src="http://40.media.tumblr.com/334fc8b35783c5e6b742ad83b60125de/tumblr_inline_o2h9htsCNa1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />&nbsp;
  469. <img src="http://41.media.tumblr.com/e4699e8620d4e3bfabb9d34a62d1fd8e/tumblr_inline_o2h9hoaDxJ1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />
  470.  
  471. </div>
  472.  
  473. <div class="mdesc"> <!-- you can put wtv you want here tbh,, i'd suggest you to not exceed the text, however, it overflows automatically so its ok though -->
  474. i can <b>HARDLY</b> remember, just the <s>smell</s> of your hands
  475. as they <i>danced</i> on my body, <sup>running</sup> over my pores
  476. with the <b>+</b> force <b>+</b> of steering wheel <b>crushing</b> my bones,
  477. i said you <u>smell</u> like the devil but you <sub>feel</sub> like the lord
  478. and when i think of <b>✰</b> <i>perfection </i><b>✰</b> you know i’m thinking of your
  479. <b><sup>voice</sup></b>
  480. </div></div>
  481.  
  482.  
  483. <div style="margin-top:-10px;">
  484. <div class="label">THE HALCYON</div>
  485. <div class="stats">
  486. <h1>stats</h1>
  487. you can put your stats here or wtv you want obviously,,, and i just got in mind that maybe you could....... yk even place the verses here <b><i>!!</i></b> cool, innit <b>??</b><br>
  488. <br><br>
  489.  
  490. </div>
  491.  
  492.  
  493. <div class="bio">
  494. <h1>biography</h1>
  495. you can put the biography here that'd b cute,, or maybe even more stats<b><i>¿¿</i></b> dunno<b><i>¿¿</i></b> <br><br>song lyrics wouldn't be a bad idea either <b><i>!!</i></b> and dnt worry about how long your text is,, there is always an overflow to back u up <b><i>!!</i></b>
  496. </p>
  497.  
  498. </div></div>
  499.  
  500. <div class="iconlinks">
  501. <a href="FIRSTLINK"><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i></a>
  502. &nbsp;&nbsp;&nbsp;&nbsp;
  503. <a href="SECONDLINK"><i class="fa fa-commenting fa-5x" aria-hidden="true"></i></a>
  504. &nbsp;&nbsp;&nbsp;&nbsp;
  505. <a href="THIRDLINK"><i class="fa fa-quote-left fa-5x" aria-hidden="true"></i></a>
  506. &nbsp;&nbsp;&nbsp;&nbsp;
  507. <a href="FOURTHLINK"><i class="fa fa-heartbeat fa-5x" aria-hidden="true"></i></a>
  508. &nbsp;&nbsp;&nbsp;&nbsp;
  509. <a href="FIFTHLINK"><i class="fa fa-diamond fa-5x" aria-hidden="true"></i></a>
  510.  
  511. </div>
  512.  
  513.  
  514. </div>
  515. </div>
  516.  
  517. <!-- -------------------------- TAB 2 -------------------------- -->
  518.  
  519. <div id="tab2" class="tab">
  520. <div class="tabcontent">
  521.  
  522.  
  523.  
  524.  
  525. <div class="header">
  526. <div class="icons">
  527.  
  528. first middle last
  529.  
  530. <!-- this is where your muse pic goes --><br><img src="http://41.media.tumblr.com/5488bf44be2d5ee12104ff1038c6e789/tumblr_inline_o2h9hxFNIT1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />&nbsp;
  531. <img src="http://41.media.tumblr.com/25f7aec0ff40c700e6a4ef3c2141af69/tumblr_inline_o2h9hcOLWp1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />
  532.  
  533. </div>
  534.  
  535. <div class="mdesc"> <!-- you can put wtv you want here tbh,, i'd suggest you to not exceed the text, however, it overflows automatically so its ok though -->
  536. i can <b>HARDLY</b> remember, just the <s>smell</s> of your hands as they <i>danced</i> on my body, <sup>running</sup> over my pores with the <b>+</b> force <b>+</b> of steering wheel <b>crushing</b> my bones, i said you <u>smell</u> like the devil but you <sub>feel</sub> like the lord and when i think of <b>✰</b> <i>perfection </i><b>✰</b> you know i’m thinking of your <b><sup>voice</sup></b>
  537. </div></div>
  538.  
  539.  
  540. <div style="margin-top:-10px;">
  541. <div class="label">THE HALCYON</div>
  542. <div class="stats">
  543. <h1>stats</h1>
  544. you can put your stats here or wtv you want obviously,,, and i just got in mind that maybe you could....... yk even place the verses here <b><i>!!</i></b> cool, innit <b>??</b><br>
  545. <br><br>
  546.  
  547. </div>
  548.  
  549.  
  550. <div class="bio">
  551. <h1>biography</h1>
  552. you can put the biography here that'd b cute,, or maybe even more stats<b><i>¿¿</i></b> dunno<b><i>¿¿</i></b> <br><br>song lyrics wouldn't be a bad idea either <b><i>!!</i></b> and dnt worry about how long your text is,, there is always an overflow to back u up <b><i>!!</i></b>
  553. <br><br> the following links
  554. </p>
  555.  
  556. </div></div>
  557.  
  558. <div class="iconlinks">
  559. <a href="FIRSTLINK"><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i></a>
  560. &nbsp;&nbsp;&nbsp;&nbsp;
  561. <a href="SECONDLINK"><i class="fa fa-commenting fa-5x" aria-hidden="true"></i></a>
  562. &nbsp;&nbsp;&nbsp;&nbsp;
  563. <a href="THIRDLINK"><i class="fa fa-quote-left fa-5x" aria-hidden="true"></i></a>
  564. &nbsp;&nbsp;&nbsp;&nbsp;
  565. <a href="FOURTHLINK"><i class="fa fa-heartbeat fa-5x" aria-hidden="true"></i></a>
  566. &nbsp;&nbsp;&nbsp;&nbsp;
  567. <a href="FIFTHLINK"><i class="fa fa-diamond fa-5x" aria-hidden="true"></i></a>
  568.  
  569. </div>
  570.  
  571. </div>
  572. </div>
  573.  
  574.  
  575. <!-- -------------------------- TAB 3 -------------------------- -->
  576.  
  577. <div id="tab3" class="tab">
  578. <div class="tabcontent">
  579.  
  580.  
  581.  
  582. <div class="header">
  583. <div class="icons">
  584.  
  585. first middle last
  586.  
  587. <!-- this is where your muse pic goes --><br><img src="http://41.media.tumblr.com/3f0a61858f231e4f19bdad6135c3c7df/tumblr_inline_o2h9hr2p001skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />&nbsp;
  588. <img src="http://40.media.tumblr.com/c561cc285d4d0a8798ca095fb3a9431f/tumblr_inline_o2h9h6JjK71skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />
  589.  
  590. </div>
  591.  
  592. <div class="mdesc"> <!-- you can put wtv you want here tbh,, i'd suggest you to not exceed the text, however, it overflows automatically so its ok though -->
  593. i can <b>HARDLY</b> remember, just the <s>smell</s> of your hands as they <i>danced</i> on my body, <sup>running</sup> over my pores with the <b>+</b> force <b>+</b> of steering wheel <b>crushing</b> my bones, i said you <u>smell</u> like the devil but you <sub>feel</sub> like the lord and when i think of <b>✰</b> <i>perfection </i><b>✰</b> you know i’m thinking of your <b><sup>voice</sup></b>
  594. </div></div>
  595.  
  596.  
  597. <div style="margin-top:-10px;">
  598. <div class="label">THE HALCYON</div>
  599. <div class="stats">
  600. <h1>stats</h1>
  601. you can put your stats here or wtv you want obviously,,, and i just got in mind that maybe you could....... yk even place the verses here <b><i>!!</i></b> cool, innit <b>??</b><br>
  602. <br><br>
  603.  
  604. </div>
  605.  
  606.  
  607. <div class="bio">
  608. <h1>biography</h1>
  609. you can put the biography here that'd b cute,, or maybe even more stats<b><i>¿¿</i></b> dunno<b><i>¿¿</i></b> <br><br>song lyrics wouldn't be a bad idea either <b><i>!!</i></b> and dnt worry about how long your text is,, there is always an overflow to back u up <b><i>!!</i></b>
  610. <br><br> the following links
  611. </p>
  612.  
  613. </div></div>
  614.  
  615. <div class="iconlinks">
  616. <a href="FIRSTLINK"><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i></a>
  617. &nbsp;&nbsp;&nbsp;&nbsp;
  618. <a href="SECONDLINK"><i class="fa fa-commenting fa-5x" aria-hidden="true"></i></a>
  619. &nbsp;&nbsp;&nbsp;&nbsp;
  620. <a href="THIRDLINK"><i class="fa fa-quote-left fa-5x" aria-hidden="true"></i></a>
  621. &nbsp;&nbsp;&nbsp;&nbsp;
  622. <a href="FOURTHLINK"><i class="fa fa-heartbeat fa-5x" aria-hidden="true"></i></a>
  623. &nbsp;&nbsp;&nbsp;&nbsp;
  624. <a href="FIFTHLINK"><i class="fa fa-diamond fa-5x" aria-hidden="true"></i></a>
  625.  
  626. </div>
  627.  
  628.  
  629. </div>
  630. </div>
  631.  
  632.  
  633. <!-- -------------------------- TAB 4 -------------------------- -->
  634.  
  635. <div id="tab4" class="tab">
  636. <div class="tabcontent">
  637.  
  638.  
  639.  
  640. <div class="header">
  641. <div class="icons">
  642.  
  643. first middle last
  644.  
  645. <!-- this is where your muse pic goes --><br><img src="http://40.media.tumblr.com/334fc8b35783c5e6b742ad83b60125de/tumblr_inline_o2h9htsCNa1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />&nbsp;
  646. <img src="http://41.media.tumblr.com/e4699e8620d4e3bfabb9d34a62d1fd8e/tumblr_inline_o2h9hoaDxJ1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />
  647.  
  648. </div>
  649.  
  650. <div class="mdesc"> <!-- you can put wtv you want here tbh,, i'd suggest you to not exceed the text, however, it overflows automatically so its ok though -->
  651. i can <b>HARDLY</b> remember, just the <s>smell</s> of your hands as they <i>danced</i> on my body, <sup>running</sup> over my pores with the <b>+</b> force <b>+</b> of steering wheel <b>crushing</b> my bones, i said you <u>smell</u> like the devil but you <sub>feel</sub> like the lord and when i think of <b>✰</b> <i>perfection </i><b>✰</b> you know i’m thinking of your <b><sup>voice</sup></b>
  652. </div></div>
  653.  
  654.  
  655. <div style="margin-top:-10px;">
  656. <div class="label">THE HALCYON</div>
  657. <div class="stats">
  658. <h1>stats</h1>
  659. you can put your stats here or wtv you want obviously,,, and i just got in mind that maybe you could....... yk even place the verses here <b><i>!!</i></b> cool, innit <b>??</b><br>
  660. <br><br>
  661.  
  662. </div>
  663.  
  664.  
  665. <div class="bio">
  666. <h1>biography</h1>
  667. you can put the biography here that'd b cute,, or maybe even more stats<b><i>¿¿</i></b> dunno<b><i>¿¿</i></b> <br><br>song lyrics wouldn't be a bad idea either <b><i>!!</i></b> and dnt worry about how long your text is,, there is always an overflow to back u up <b><i>!!</i></b>
  668. <br><br> the following links
  669. </p>
  670.  
  671. </div></div>
  672.  
  673. <div class="iconlinks">
  674. <a href="FIRSTLINK"><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i></a>
  675. &nbsp;&nbsp;&nbsp;&nbsp;
  676. <a href="SECONDLINK"><i class="fa fa-commenting fa-5x" aria-hidden="true"></i></a>
  677. &nbsp;&nbsp;&nbsp;&nbsp;
  678. <a href="THIRDLINK"><i class="fa fa-quote-left fa-5x" aria-hidden="true"></i></a>
  679. &nbsp;&nbsp;&nbsp;&nbsp;
  680. <a href="FOURTHLINK"><i class="fa fa-heartbeat fa-5x" aria-hidden="true"></i></a>
  681. &nbsp;&nbsp;&nbsp;&nbsp;
  682. <a href="FIFTHLINK"><i class="fa fa-diamond fa-5x" aria-hidden="true"></i></a>
  683.  
  684. </div>
  685.  
  686.  
  687. </div>
  688. </div>
  689.  
  690.  
  691. <!-- -------------------------- TAB 5 -------------------------- -->
  692.  
  693. <div id="tab5" class="tab">
  694. <div class="tabcontent">
  695.  
  696.  
  697.  
  698. <div class="header">
  699. <div class="icons">
  700.  
  701. first middle last
  702.  
  703. <!-- this is where your muse pic goes --><br><img src="http://40.media.tumblr.com/334fc8b35783c5e6b742ad83b60125de/tumblr_inline_o2h9htsCNa1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />&nbsp;
  704. <img src="http://41.media.tumblr.com/e4699e8620d4e3bfabb9d34a62d1fd8e/tumblr_inline_o2h9hoaDxJ1skwjzs_100.jpg" style="border-radius:50px;box-shadow: 3px 3px #999;" />
  705.  
  706. </div>
  707.  
  708. <div class="mdesc"> <!-- you can put wtv you want here tbh,, i'd suggest you to not exceed the text, however, it overflows automatically so its ok though -->
  709. i can <b>HARDLY</b> remember, just the <s>smell</s> of your hands as they <i>danced</i> on my body, <sup>running</sup> over my pores with the <b>+</b> force <b>+</b> of steering wheel <b>crushing</b> my bones, i said you <u>smell</u> like the devil but you <sub>feel</sub> like the lord and when i think of <b>✰</b> <i>perfection </i><b>✰</b> you know i’m thinking of your <b><sup>voice</sup></b>
  710. </div></div>
  711.  
  712.  
  713. <div style="margin-top:-10px;">
  714. <div class="label">THE HALCYON</div>
  715. <div class="stats">
  716. <h1>stats</h1>
  717. you can put your stats here or wtv you want obviously,,, and i just got in mind that maybe you could....... yk even place the verses here <b><i>!!</i></b> cool, innit <b>??</b><br>
  718. <br><br>
  719.  
  720. </div>
  721.  
  722.  
  723. <div class="bio">
  724. <h1>biography</h1>
  725. you can put the biography here that'd b cute,, or maybe even more stats<b><i>¿¿</i></b> dunno<b><i>¿¿</i></b> <br><br>song lyrics wouldn't be a bad idea either <b><i>!!</i></b> and dnt worry about how long your text is,, there is always an overflow to back u up <b><i>!!</i></b>
  726. <br><br> the following links
  727. </p>
  728.  
  729. </div></div>
  730.  
  731. <div class="iconlinks">
  732. <a href="FIRSTLINK"><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i></a>
  733. &nbsp;&nbsp;&nbsp;&nbsp;
  734. <a href="SECONDLINK"><i class="fa fa-commenting fa-5x" aria-hidden="true"></i></a>
  735. &nbsp;&nbsp;&nbsp;&nbsp;
  736. <a href="THIRDLINK"><i class="fa fa-quote-left fa-5x" aria-hidden="true"></i></a>
  737. &nbsp;&nbsp;&nbsp;&nbsp;
  738. <a href="FOURTHLINK"><i class="fa fa-heartbeat fa-5x" aria-hidden="true"></i></a>
  739. &nbsp;&nbsp;&nbsp;&nbsp;
  740. <a href="FIFTHLINK"><i class="fa fa-diamond fa-5x" aria-hidden="true"></i></a>
  741.  
  742. </div>
  743.  
  744.  
  745.  
  746. </div>
  747. </div>
  748.  
  749.  
  750.  
  751.  
  752. <!-- END OF TABS -->
  753.  
  754. </div>
  755. </div>
  756. </div>
  757. </div>
  758. </div>
  759. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  760.  
  761. <script>
  762. $(document).ready(function() {
  763. $('.tabs .tab-links a').on('click', function(e) {
  764. var currentAttrValue = $(this).attr('href');
  765.  
  766. // Show/Hide Tabs
  767. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  768.  
  769. // Change/remove current tab to active
  770. $(this).parent('li').addClass('active').siblings().removeClass('active');
  771.  
  772. e.preventDefault();
  773. });
  774. });
  775. </script>
  776.  
  777. <script>
  778. $(document).ready(function() {
  779. $('#filterOptions li a').click(function() {
  780. // fetch the class of the clicked item
  781. var ourClass = $(this).attr('class');
  782.  
  783. // reset the active class on all the buttons
  784. $('#filterOptions li').removeClass('active');
  785. // update the active state on our clicked button
  786. $(this).parent().addClass('active');
  787.  
  788. if(ourClass == 'all') {
  789. // show all our items
  790. $('#ourHolder').children('div.item').show();
  791. }
  792. else {
  793. // hide all elements that don't share ourClass
  794. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  795. // show all elements that do share ourClass
  796. $('#ourHolder').children('div.' + ourClass).show();
  797. }
  798. return false;
  799. });
  800. });
  801. </script>
  802.  
  803. <!--dont remove !!-->
  804. <div id="yo">
  805. <a href="http://destinatiia.tumblr.com/"target="_blank"> <i class="fa fa-paint-brush fa-4x"style="color:#fff;"></i> </a>
  806. </div>
  807.  
  808.  
  809. </body>
  810. </html>
RAW Paste Data