Advertisement
allebyu

abby

Mar 25th, 2020
1,953
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.27 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12. <!--- ♡ THEME: 001.2 - JOON by LOVESJOON. ♡
  13.  
  14.  
  15. ♡ READ ME ♡
  16.  
  17.  
  18. + base code by @borntobewildcodes, edited by lovesjoon
  19.  
  20. + pretty please dont recreate / steal parts of this code / remove credit
  21.  
  22. + feel free to reach out if there are any bugs or questions ♡
  23.  
  24.  
  25. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34. <title>{Title}</title>
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. <link rel="shortcut icon" href="{Favicon}">
  37. {block:Description}
  38. <meta name="description" content="{MetaDescription}">
  39. {/block:Description}
  40.  
  41.  
  42.  
  43.  
  44. <meta name="image:background" content="1"/>
  45. <meta name="image:sidebar" content="1"/>
  46. <meta name="image:sticker1" content="1"/>
  47. <meta name="image:sticker2" content="1"/>
  48.  
  49. <meta name="color:background" content="#eee"/>
  50. <meta name="color:container" content="#fff"/>
  51. <meta name="color:posts" content="#fff"/>
  52. <meta name="color:post container" content="#fff"/>
  53. <meta name="color:borders" content="#ddd"/>
  54. <meta name="color:accent" content="#dee1d6"/>
  55. <meta name="color:accent2" content="#979797"/>
  56. <meta name="color:title" content="#dfada4"/>
  57. <meta name="color:text" content="#acacac"/>
  58. <meta name="color:links" content="#b99680"/>
  59. <meta name="color:hover" content="#98a3a9"/>
  60. <meta name="color:bold" content="#d8d6d7"/>
  61. <meta name="color:italic" content="#98a3a9"/>
  62.  
  63. <meta name="if:400px posts" content="0" />
  64. <meta name="if:no muse tab" content="1" />
  65.  
  66. <meta name="text:title" content="Bloom;"/>
  67. <meta name="text:description" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis."/>
  68. <meta name="text:ooc info" content="keep it short !"/>
  69. <meta name="text:starlight" content="starlight.exe"/>
  70. <meta name="text:gif1" content="love"/>
  71. <meta name="text:gif2" content="bunny"/>
  72.  
  73.  
  74.  
  75.  
  76. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  77.  
  78.  
  79.  
  80.  
  81. <!--- JQUERY SCRIPTS --->
  82.  
  83. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  84. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  85.  
  86.  
  87.  
  88. <!--- TOOLTIP SCRIPT ---->
  89.  
  90. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  91. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  92.  
  93. <script> (function($){ $(document).ready(function(){ $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:50, tip_fade_speed:600, attribute:"title" }); }); })(jQuery); </script>
  94.  
  95.  
  96.  
  97. <!--- GOOGLE + ICON FONTS ---->
  98.  
  99. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  100. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  101.  
  102. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  103.  
  104. <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Source+Sans+Pro&display=swap" rel="stylesheet">
  105.  
  106.  
  107.  
  108.  
  109. <!--- TAB SCRIPT ---->
  110.  
  111. <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
  112.  
  113.  
  114.  
  115.  
  116.  
  117. <style type="text/css">
  118.  
  119.  
  120.  
  121.  
  122. /*--- FONTS HOSTED BY @LOVESJOON ---*/
  123.  
  124. @font-face{ font-family:"amalfi"; src: url('https://dl.dropboxusercontent.com/s/u826utwnrqcstlm/Amalfi%20Coast.ttf’)'); }
  125.  
  126.  
  127.  
  128.  
  129. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  130.  
  131.  
  132.  
  133.  
  134. /*TOOLTIP*/
  135.  
  136. #s-m-t-tooltip { max-width:auto; max-height:auto; padding:6px 10px 6px 10px; margin:20px 20px 20px 20px; z-index:9999999999; background-color:{color:posts}; color:{color:text}; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family:"lato"; font-size:8px; border-radius:5px; }
  137.  
  138.  
  139. /*SCROLLBAR*/
  140.  
  141. ::-webkit-scrollbar-thumb { display:none; }
  142.  
  143. ::-webkit-scrollbar { display:none; }
  144.  
  145.  
  146. /*SELECTION*/
  147.  
  148. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  149.  
  150. ::selection { background:{color:accent}; color:{color:posts}; }
  151.  
  152.  
  153.  
  154.  
  155. /*---PT. 3: BODY + TEXT STYLING---*/
  156.  
  157.  
  158.  
  159.  
  160. /*BODY*/
  161.  
  162. body { margin:0; padding:0; width:100%; height:100%; color:{color:text}; font-family:'Open Sans',sans-serif; font-size:10px; {block:if400pxPosts} font-size:12px; line-height:17px; {/block:if400pxPosts} line-height:15px; background-color:{color:background}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; }
  163.  
  164.  
  165.  
  166. /*FIX*/
  167.  
  168. iframe, img, embed, object { margin:auto; max-width:100%; border:none; }
  169.  
  170. img { margin:auto; max-width:100%; border:none; height:auto; }
  171.  
  172.  
  173.  
  174. /*TEXT STYLING*/
  175.  
  176. select, textarea, input, a { outline:none; }
  177.  
  178. p { margin-top:5px; margin-bottom:5px; }
  179.  
  180. small, sub, sup { font-size:100%; }
  181.  
  182. big { font-size:110%; }
  183.  
  184. h1 { font-size:25px; font-family:"amalfi"; text-align:center; line-height:28px; background:transparent; color:{color:title}; text-transform:none; margin-top:20px; text-transform:lowercase; }
  185.  
  186. h2 { font-size:13px; font-family:'lato', sans-serif; color:{color:accent2}; line-height:18px; background:transparent; text-align:center; letter-spacing:2px; font-weight:lighter; text-transform:uppercase; }
  187.  
  188. a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; text-decoration:none; }
  189.  
  190. a:hover { color:{color:hover};
  191.  
  192. -webkit-transition: all .3s;
  193. -moz-transition: all .3s;
  194. -o-transition: all .3s;
  195. -ms-transition: all .3s;
  196. transition: all .3s; }
  197.  
  198. ul, ol, li { margin:5px 10px; padding:0px; }
  199.  
  200. b, strong { color:{color:bold}; }
  201.  
  202. i, em { color:{color:italic}; }
  203.  
  204. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  205.  
  206.  
  207.  
  208. /*TUMBLR CONTROLS*/
  209.  
  210. iframe.tmblr-iframe { top:0px!important; right:0px!important; opacity:0.8; transform:scale(0.6); transform-origin:100% 0; -webkit-transform:scale(0.8); -webkit-transform-origin:100% 0; -o-transform:scale(0.8); -o-transform-origin:100% 0; -moz-transform:scale(0.8); -moz-transform-origin:100% 0; -ms-transform:scale(0.8); -ms-transform-origin:100% 0; z-index:100000!important; }
  211.  
  212. iframe.tmblr-iframe:hover { opacity:1!important; }
  213.  
  214.  
  215.  
  216.  
  217. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  218.  
  219.  
  220.  
  221.  
  222. /*CONTAINER*/
  223.  
  224. #wrapper { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:transparent; width:1000px; height:480px; overflow:hidden; border-radius:0px; }
  225.  
  226. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:{color:container}; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:480px; overflow:hidden; border-radius:0px; }
  227.  
  228.  
  229. /*SIDEBAR*/
  230.  
  231. #conbox { position:absolute; left:50px; top:50px; background-color:{color:accent}; width:675px; {block:if400pxPosts} width:775px; {/block:if400pxPosts} height:350px; border-radius:30px; }
  232.  
  233. .desctitle { position:absolute; left:70px; bottom:85px; width:auto; height:auto; font-family:"amalfi"; font-size:40px; color:{color:text}; text-align:center; z-index:9999; }
  234.  
  235. .desctxt { position:absolute; font-size:7px; padding:10px; text-align:justify; text-transform:uppercase; letter-spacing:2px; z-index:99; color:{color:text}; bottom:15px; left:65px; width:40%; {block:if400pxPosts} width:30%; left:85px; {/block:if400pxPosts} height:35px; line-height:15px; overflow:scroll; }
  236.  
  237.  
  238. /*--- SIDEBAR BOX ---*/
  239.  
  240. #sbbox { position:absolute; width:250px; height:240px; left:125px; top:100px; background-color:{color:posts}; border-radius:10px; border:1px solid {color:borders}; }
  241.  
  242. .sbtext { margin-top:0px; height:20px; width:220px; color:{color:text}; font-size:10px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:15px; border-bottom:1px solid {color:borders}; padding:0px 15px 0px 15px; }
  243.  
  244. .sb img { position:absolute; width:200px; height:165px; background-color:black; z-index:999999; left:25px; bottom:25px; z-index:999; border-radius:15px; }
  245.  
  246. #grid { border-collapse:collapse; background-color:{color:shadow}; width: auto; height:auto; opacity:0.5; position:absolute; left:0px; bottom:60px; }
  247. #grid td, #grid3 th { border: 1px solid {color:borders}; width:15px; height:15px; }
  248.  
  249. #grid2 { border-collapse:collapse; background-color:{color:shadow}; width: auto; height:auto; opacity:0.5; position:absolute; top:25px; right:40px; }
  250. #grid2 td, #grid th { border: 1px solid {color:borders}; width:15px; height:15px; }
  251.  
  252. #grid3 { border-collapse:collapse; background-color:{color:shadow}; width: auto; height:auto; opacity:0.5; position:absolute; right:0px; bottom:0px; }
  253. #grid3 td, #grid3 th { border: 1px solid {color:borders}; width:15px; height:15px; }
  254.  
  255.  
  256. /*--- GIF 1 ---*/
  257.  
  258. #gif1 { position:absolute; width:50px; height:50px; left:135px; top:275px; background-color:{color:posts}; z-index:999; border-radius:10px; border:1px solid {color:borders}; }
  259.  
  260. .gif1text { margin-top:0px; margin-left:0px; height:8px; width:50px; color:{color:text}; font-size:5px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:12px; text-align:center; line-height:10px; }
  261.  
  262. .gif1boxie { margin-top:0px; margin-left:0px; height:40px; width:50px; border-top:1px solid {color:borders}; }
  263.  
  264. .gif1boxie img { width:30px; height:30px; margin-left:10px; margin-top:7px; }
  265.  
  266.  
  267. /*--- GIF 2 ---*/
  268.  
  269. #gif2 { position:absolute; width:70px; height:70px; left:320px; top:170px; background-color:{color:posts}; z-index:999; border-radius:10px; border:1px solid {color:borders}; }
  270.  
  271. .gif2text { margin-top:-5px; margin-left:6px; height:10px; width:59px; color:{color:text}; font-size:6px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:12px; }
  272.  
  273. .gif2text2 { margin-top:-1.5px; margin-left:0px; height:10px; width:70px; color:{color:text}; font-size:6px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; text-align:center; line-height:11px; }
  274.  
  275. .gif2boxie { margin-top:0px; margin-left:0px; height:50px; width:70px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; }
  276.  
  277. .gif2boxie img { width:40px; height:40px; margin-left:15px; }
  278.  
  279.  
  280.  
  281.  
  282. /*--- PT.5: POSTS + ENTRIES ---*/
  283.  
  284.  
  285.  
  286.  
  287. /*POST CONTAINER*/
  288.  
  289. #postcon { position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:480px; background-color:transparent; margin:auto; bottom:0px; right:0px; }
  290.  
  291.  
  292. /*POSTS*/
  293.  
  294. #posts { position:absolute; width:360px; {block:if400pxPosts} width:460px; {/block:if400pxPosts} height:440px; background-color:transparent; overflow:scroll; z-index:1000; top:0px; left:20px; padding:20px 0px 20px 0px; }
  295.  
  296.  
  297. /*ENTRY STYLING*/
  298.  
  299. .entry { display: inline-block; float: left; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding:10px 10px 0px 10px; height:auto; background:{color:posts}; border: 1px solid {color:borders}; border-radius:0px; overflow: hidden; margin:20px; }
  300.  
  301. .entry img { margin:0px; padding:0px; }
  302.  
  303.  
  304.  
  305.  
  306. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  307.  
  308.  
  309.  
  310.  
  311. /*TOP POST INFO*/
  312.  
  313. .topinfo { margin-top:0px; margin-left:-10px; margin-bottom:15px; padding: 0px 10px 10px 10px; width: 100%; height: 20px; line-height: 22px; border-bottom:1px solid {color:borders}; background:{color:posts}; }
  314.  
  315. .topinfo a { margin-left: 5px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  316.  
  317. .preblog { float:right; margin-top: 0px; width: auto; height: 26px; line-height:22px; z-index: 100; list-style: none; margin-right:5px; }
  318.  
  319.  
  320. /*BOTTOM POST INFO*/
  321.  
  322. .bottominfo { margin-top: 15px; margin-left:-10px; width: 100%; height:auto; min-height: 20px; padding: 10px 15px; font-size: 12px; line-height: 22px; color: {color:text}; border-top:1px solid {color:borders}; background:{color:posts}; overflow:hidden; }
  323.  
  324. .bottominfo a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  325.  
  326. .psource { float:right; margin-top: 0px; width: auto; height: 25px; line-height:22px; z-index: 100; list-style: none; margin-right:10px; }
  327.  
  328.  
  329. /*TAGS*/
  330.  
  331. .tags { {block:IndexPage} text-align:left; line-height:10px; margin-top:5px; {/block:IndexPage} }
  332.  
  333. .tags a { font-family: 'Source Sans Pro', sans-serif; color:{color:text}; font-size:8px; }
  334.  
  335. .tags a:hover { font-weight:bold; color:{color:hover}; }
  336.  
  337.  
  338. /*POST NOTES*/
  339.  
  340. .note c { float:left; }
  341.  
  342. #notes { margin:0px; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} font-size:12px; color:{color:text}; }
  343.  
  344. ol.notes { padding:0px; margin:0px; list-style-type:none; }
  345.  
  346. ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
  347.  
  348. ol.notes li.note img.avatar { float:left; vertical-align:-5px; margin-left:0px; margin-right:10px; width:20px; height:20px; }
  349.  
  350. li.more_notes_link_container { font-size: 12px; }
  351.  
  352.  
  353.  
  354. /*PAGINATION*/
  355.  
  356. .pagination { width:100%; text-align:center; }
  357.  
  358. .pagination a { padding:8px; word-spacing:2px; }
  359.  
  360. .pagination a:hover { color:{color:links}; }
  361.  
  362. .pagination i { color:{color:links}; }
  363.  
  364.  
  365.  
  366. /*CREDIT*/
  367.  
  368. #cred { position:fixed; background-color:{color:posts}; width:auto; height:auto; right:15px; bottom:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; }
  369.  
  370. #cred span { padding:10px; font-size:18px; background: -webkit-linear-gradient({color:accent}, {color:accent2});
  371.  
  372. -webkit-background-clip: text;
  373. -webkit-text-fill-color: transparent; }
  374.  
  375.  
  376.  
  377.  
  378. /*--- PT.7: POST STYLING ---*/
  379.  
  380.  
  381.  
  382.  
  383. /*CHATS*/
  384.  
  385. .lines { margin:0px; padding:5px; line-height:20px; }
  386.  
  387.  
  388.  
  389. /*QUOTES*/
  390.  
  391. .quote { margin:10px; padding:5px; font-size:15px; line-height:25px; color:{color:italic}; text-align:center; letter-spacing:2px; font-family:"amalfi"; word-spacing:5px; text-transform:lowercase; }
  392.  
  393. .source { text-align:right; font-size:12px; line-height:20px; }
  394.  
  395.  
  396.  
  397. /*ASKS*/
  398.  
  399. .asker { position:relative; margin:5px; height:auto; width:auto; margin-top:8px; z-index:9999; font-size:13px; text-transform:uppercase; color:{color:links}; font-weight:bold; font-family: "lato"; letter-spacing:1px; }
  400.  
  401. .asker img { max-width:30px; border:1px solid {color:borders}; border-radius:2px; z-index:1000; opacity:1; background-color:{color:posts}; }
  402.  
  403. .answer { margin:10px; margin-bottom:0; }
  404.  
  405. .bubble { padding:5px 25px 20px 25px; text-align:center; height:auto; margin-top:-5px; font-style:italic; border:1px solid {color:borders}; width:210px; {block:if400pxPosts} width:310px; {/block:if400pxPosts} margin-left:20px; }
  406.  
  407.  
  408.  
  409. /*LINKS*/
  410.  
  411. .linktitle { margin:0; margin-top:30px; margin-bottom:10px; color:{color:title}; font-weight:normal; font-size:15px; line-height:20px; text-transform:lowercase; }
  412.  
  413.  
  414.  
  415. /*AUDIO*/
  416.  
  417. .playbutton { position:relative; margin-top:40px; margin-left:30px; z-index:9; width:33px; height:38px; overflow:hidden; opacity:0.6; }
  418.  
  419. .albumart img { position:relative; margin-top:-70px; margin-left:0px; height:70px; width:70px; border:1px solid {color:borders}; padding:10px; }
  420.  
  421. .trackinfo { margin-bottom:10px; background:{color:posts}; color:{color:text}; top:-1px; position:relative; margin-left:100px; height:70px; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} margin-top:-95px; border:1px solid {color:borders}; padding:10px 5px 10px 5px; }
  422.  
  423. .trackname { position:relative; padding-top:15px; text-align:center; font-size:8px; line-height:12px; text-transform:uppercase; font-weight: bold; letter-spacing:2px; }
  424.  
  425. .artist { text-align:center; font-size:7.5px; text-transform:uppercase; letter-spacing:4px; }
  426.  
  427.  
  428.  
  429.  
  430. /*--- PT.8: TABS ---*/
  431.  
  432.  
  433.  
  434.  
  435. /*TAB LINKS*/
  436.  
  437. .tab { position:absolute; overflow: hidden; height:auto; float:right; top:70px; left:15px; z-index:9999; width:60px; padding:10px; background:transparent; }
  438.  
  439. .tab li { display:inline-block; margin:5px; background:{color:container}; border-radius:100%; width:50px; height:50px; }
  440.  
  441. .tab span { width:25px; height:25px; }
  442.  
  443. .tab a { color:{color:accent2}; background-color:{color:container}; font-size:20px; border-radius:100%; padding:5px; text-align:center; line-height:50px; border:2px solid {color:accent}; margin-left:5px; }
  444.  
  445.  
  446.  
  447. /*TAB CONTENT*/
  448.  
  449. .tabcontent { position:absolute; width:480px; height:480px; background-color:transparent; z-index:9999; right:0px; top:0px; }
  450.  
  451.  
  452.  
  453. /*ASK TAB*/
  454.  
  455. #askbox { position:absolute; margin:auto; left:0px; top:40px; right:-80px; bottom:0px; width:320px; {block:if400pxPosts} width:420px; right:20px; {/block:if400pxPosts} }
  456.  
  457.  
  458.  
  459. /*NAVI TAB*/
  460.  
  461. .nbox1 { position:absolute; width:200px; {block:if400pxPosts} width:250px; {/block:if400pxPosts} height:100px; background:{color:container}; bottom:30px; right:30px; border-radius:20px; }
  462.  
  463. .nbox2 { width:180px; {block:if400pxPosts} width:230px; {/block:if400pxPosts} height:80px; background:{color:accent}; margin-top:10px; margin-left:10px; border-radius:10px; }
  464.  
  465. .ntxt { margin-top:0px; margin-left:0px; height:20px; width:auto; color:{color:container}; font-size:10px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:80px; text-align:center; font-style:italic;
  466.  
  467. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  468. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  469. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  470.  
  471. .links { position:absolute; top:120px; left:90px; width:420px; height:300px; {block:if400pxPosts} width:450px; left:20px; {/block:if400pxPosts} }
  472.  
  473. .links li { display:inline-block; width:80px; height:25px; border:10px; background-color:{color:container}; padding:10px; border-radius:10px; margin:10px; text-align:center; {block:if400pxPosts} width:100px; {/block:if400pxPosts}
  474.  
  475. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  476. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  477. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  478.  
  479. .links a { color:{color:text}; line-height:25px; }
  480.  
  481.  
  482.  
  483. /*MUSE TAB*/
  484.  
  485. .muses { position:absolute; top:80px; right:10px; width:370px; height:300px; background:transparent; overflow:scroll; {block:if400pxPosts} width:470px; {/block:if400pxPosts} }
  486.  
  487. .muses li { display:inline-block; width:85px; height:70px; background-color:{color:container}; margin:15px; border-radius:10px;
  488.  
  489. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  490. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  491. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  492.  
  493. .muses img { width:85px; height:70px; border-radius:10px; }
  494.  
  495.  
  496.  
  497.  
  498.  
  499. /*--- PT.9: CUSTUM CSS ---*/
  500.  
  501.  
  502.  
  503.  
  504. {CustomCSS}
  505. </style></head><body>
  506.  
  507.  
  508.  
  509. <div id="wrapper">
  510. <div id="container">
  511.  
  512.  
  513.  
  514.  
  515. <!--- SIDEBAR + LINKS! --->
  516.  
  517.  
  518.  
  519.  
  520. <div class="tab">
  521.  
  522. <li><a href="#" class="tablinks" onclick="openCity(event, 'home')" title="posts"> <span class="th th-bird-house-o"></span> </a></li>
  523. <li><a href="#" class="tablinks" onclick="openCity(event, 'ask')" title="contact"> <span class="th th-wave-o"></span> </a></li>
  524. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> <span class="th th-flower-o"></span> </a></li>
  525. <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="muses"> <span class="th th-sunset-o"></span> </a></li>
  526.  
  527. </div>
  528.  
  529. <div id="conbox"> </div>
  530.  
  531. <div class="desctitle">Bloom;</div>
  532. <div class="desctxt"><strong>carlisle cullen , freya mikaelson , stiles stilinski , emily fitch , richie tozie , holly fax , alaric saltzman , annie cresta , & james potter 𝕒𝕤 𝕡𝕖𝕟𝕟𝕖𝕕 𝕓𝕪 𝕒𝕓𝕓𝕪 .</strong></div>
  533.  
  534. <div id="sbbox">
  535.  
  536. <div class="sbtext"><p style="text-align:left;">starlight.exe <span style="float:right;"> x </p></div>
  537.  
  538. <table id="grid">
  539.  
  540. <tr><td></td><td></td><td></td></tr>
  541. <tr><td></td><td></td><td></td></tr>
  542. <tr><td></td><td></td><td></td></tr>
  543. <tr><td></td><td></td><td></td></tr>
  544. <tr><td></td><td></td><td></td></tr>
  545. <tr><td></td><td></td><td></td></tr>
  546.  
  547. </table>
  548.  
  549. <table id="grid2">
  550.  
  551. <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  552. <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  553.  
  554.  
  555. </table>
  556.  
  557. <table id="grid3">
  558.  
  559.  
  560. <tr><td></td><td></td><td></td></tr>
  561. <tr><td></td><td></td><td></td></tr>
  562. <tr><td></td><td></td><td></td></tr>
  563. <tr><td></td><td></td><td></td></tr>
  564. <tr><td></td><td></td><td></td></tr>
  565. <tr><td></td><td></td><td></td></tr>
  566.  
  567. </table>
  568.  
  569. <div class="sb"> <img src="https://66.media.tumblr.com/2e903077140b8c7ca3fd2edbfe9d5de8/3231ef786881333a-ae/s540x810/16c76ea71dd0b9b58220adb1d6307818c2c306aa.png"></div>
  570.  
  571. </div>
  572.  
  573.  
  574.  
  575. <div id="gif1">
  576.  
  577. <div class="gif1text">break.gif</div>
  578. <div class="gif1boxie"><img src="https://66.media.tumblr.com/18e59bca95669f09c0aa7beceb59bee2/3231ef786881333a-fa/s540x810/20d780672d375cd6684447a583e3bc79e7998cb3.gif"></div>
  579.  
  580. </div>
  581.  
  582. <div id="gif2">
  583.  
  584. <div class="gif2text"><p style="text-align:left;">hello.gif <span style="float:right; font-size:5px;">x</span></p></div>
  585. <div class="gif2boxie"><img src="https://66.media.tumblr.com/c9f386fb99c68463a6880af3dbbd4d90/3231ef786881333a-31/s540x810/19a1f9ee5a58b61d955f9ea7173cc86c37f7bb0e.gif"></div>
  586. <div class="gif2text2">2020</div>
  587.  
  588. </div>
  589.  
  590.  
  591.  
  592.  
  593. <!--- ASK TAB ! --->
  594.  
  595.  
  596.  
  597.  
  598. <div id="ask" class="tabcontent" style="display:none">
  599.  
  600. <div id="askbox">
  601.  
  602. {block:ifNot400pxPosts}<iframe frameborder="0" border="0" scrolling="no" width="100%" height="260px" allowtransparency="true" src="https://www.tumblr.com/ask_form/fvllenangels.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>{/block:ifNot400pxPosts}
  603.  
  604. {block:if400pxPosts} <iframe frameborder="0" border="0" scrolling="no" width="100%" height="190px" allowtransparency="true" src="https://www.tumblr.com/ask_form/fvllenangels.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe> {/block:if400pxPosts}
  605.  
  606. </div>
  607.  
  608. </div>
  609.  
  610.  
  611.  
  612.  
  613. <!--- NAVI TAB ! --->
  614.  
  615.  
  616.  
  617.  
  618. <div id="navi" class="tabcontent" style="display:none">
  619.  
  620. <div class="links">
  621.  
  622. <li> <a href="/"> link 1 </a> </li>
  623. <li> <a href="/"> link 2 </a> </li>
  624. <li> <a href="/"> link 3 </a> </li>
  625.  
  626. <li> <a href="/"> link 4 </a> </li>
  627. <li> <a href="/"> link 5 </a> </li>
  628. <li> <a href="/"> link 6 </a> </li>
  629.  
  630. <li> <a href="/"> link 7</a> </li>
  631. <li> <a href="/"> link 8</a> </li>
  632. <li> <a href="/"> link 9</a> </li>
  633.  
  634. </div>
  635.  
  636. <div class="nbox1">
  637.  
  638. <div class="nbox2"> <div class="ntxt"> hello ! </div> </div>
  639.  
  640. </div>
  641.  
  642. </div>
  643.  
  644.  
  645.  
  646.  
  647. <!--- MUSE TAB ! --->
  648.  
  649.  
  650.  
  651.  
  652. <div id="muses" class="tabcontent" style="display:none">
  653.  
  654.  
  655. <div class="muses">
  656.  
  657. <!--- copy for a new row of muses from here --->
  658.  
  659. <li><a href="/" title="carlisle cullen"><img src="https://66.media.tumblr.com/34cb9e2055c09c9f1fb4b0d55aa51f97/4d050fc8295e0a3b-06/s540x810/8a8fb6a12a55afab638392f9007b11b45d1a10ae.png"></a></li>
  660. <li><a href="/" title="freya mikaelson"><img src="https://66.media.tumblr.com/9bb97df5e6ffb3d2584a5a1ebcb32405/4d050fc8295e0a3b-01/s540x810/28565441f1bf052a339d3f6825871be9a2436614.png"></a></li>
  661. <li><a href="/" title="stiles stilinski"><img src="https://66.media.tumblr.com/fbd4d151a17d9451c329c387ecd29703/4d050fc8295e0a3b-78/s540x810/0ecfe0e98b8193ea82b50df85b5f0f84c7e1259a.png"></a></li>
  662.  
  663. <!--- to here !! --->
  664.  
  665. <li><a href="/" title="emily fitch"><img src="https://66.media.tumblr.com/09d96511a0ebd3df29cea6f3e42bf3a0/4d050fc8295e0a3b-d3/s540x810/4de40e5ce4b353925950f33991038855abcab1e7.png"></a></li>
  666. <li><a href="/" title="richie tozien"><img src="https://66.media.tumblr.com/29075e83632602f6ba70cf4858483c9b/4d050fc8295e0a3b-c4/s540x810/998b91115476696a51a398f5235c3575f7c9ea46.png"></a></li>
  667. <li><a href="/" title="holly fax"><img src="https://66.media.tumblr.com/f645aee8705e58f2272574f7fade3029/4d050fc8295e0a3b-97/s540x810/952608dd40a6a0730fd75a097e93af09b1e0eae7.png"></a></li>
  668.  
  669. <li><a href="/" title="alaric saltzman"><img src="https://66.media.tumblr.com/8ab83908866531e8497f9031f28993e1/4d050fc8295e0a3b-b6/s540x810/57af34fa3a49f653fb2e9811e31eefe1c164d55d.png"></a></li>
  670. <li><a href="/" title="annie cresta"><img src="https://66.media.tumblr.com/3f0b5b59cbe92f69053830b9d49d61a2/4d050fc8295e0a3b-f0/s540x810/5092ee56f708afc917bfff933310976d04646d3c.png"></a></li>
  671. <li><a href="/" title="james potter"><img src="https://66.media.tumblr.com/7754c2c6137daad25a52c693a0ddd75e/4d050fc8295e0a3b-73/s540x810/27c348c0dcbce7324681f9baea459a9d621befa9.png"></a></li>
  672.  
  673.  
  674. </div>
  675.  
  676.  
  677. </div>
  678.  
  679.  
  680.  
  681. <!--- POSTS TAB ! --->
  682.  
  683.  
  684.  
  685.  
  686. <div id="home" class="tabcontent">
  687.  
  688. <div id="postcon">
  689.  
  690. <div id="posts">
  691. {block:Posts}
  692. <div class="entry">
  693.  
  694. {block:Date} <div class="topinfo"><a href="{Permalink}">{Month} {Year}</a>
  695. <div class="preblog"><a href="{ReblogURL}" target="_blank" >reblog</a></div></div>{/block:Date}
  696.  
  697. {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
  698.  
  699. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  700.  
  701. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  702.  
  703. {block:Chat} <div class="chat"> {block:Title} <h2>{Title}</h2> {/block:Title} {block:Lines} <div class="lines"> {block:Label} <b>{Label}</b> {/block:Label} {Line}</div> {/block:Lines} </div> {/block:Chat}
  704.  
  705. {block:Quote} <div class="quote"> "{Quote}" </div> <div class="source"> — {Source} </div> {/block:Quote}
  706.  
  707. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  708. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  709.  
  710. {block:ifNot400pxPosts}{block:Video}<div class="video" style="margin-left:25px;">{Video-250}</div>{/block:Video}{/block:ifNot400pxPosts}
  711.  
  712. {block:if400pxPosts}{block:Video}<div class="video">{Video-400}</div>{/block:Video}{/block:if400pxPosts}
  713.  
  714. {block:Audio} {block:AudioPlayer} <div class="playbutton">{AudioPlayerGrey}</div> {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt} <div class="trackinfo"> <div class="trackname"> {block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist"> {block:Artist}{Artist}{/block:Artist} </div></div> {/block:AudioPlayer}{/block:Audio}
  715.  
  716. {block:Answer}<div class="asker"><img src="{AskerPortraitURL-48}"><div class="ask" style="margin-top:-30px; margin-left:35px;">{Asker}:</div></div><div class="bubble"><br>{Question}</div><div class="answer"> {Answer} </div>{/block:Answer}
  717.  
  718. {block:Caption}{Caption}{/block:Caption}
  719.  
  720. <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}</div>
  721.  
  722. {block:NoteCount}<a href="{Permalink}"> {NoteCountWithLabel}</a>{/block:NoteCount}
  723.  
  724. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}</div>
  725.  
  726. {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  727.  
  728. </div>
  729. {/block:Posts}
  730.  
  731. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <i class="fas fa-arrow-left"></i> prev </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> next <i class="fas fa-arrow-right"></i> </a> {/block:nextpage} </div> {/block:pagination}
  732.  
  733. </div>
  734. </div>
  735. </div>
  736.  
  737.  
  738. </div>
  739. </div>
  740.  
  741.  
  742. <div id="cred">
  743. <a href="http://lovesjoon.tumblr.com"><span class="th th-holly-o"></span></a>
  744. </div>
  745.  
  746.  
  747. </body>
  748. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement