Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!--- ♡ THEME: 07 - JUNGKOOK (26,98%) by TWENTYS (rmon). ♡
- ♡ READ ME ♡
- + base code by @borntobewildcodes, edited by twentys
- + updated post styling by @hixtapes, tysm love you lots juju !!! <3
- + pretty please dont recreate / steal parts of this code / remove credit
- + feel free to reach out if there are any bugs or questions ♡
- hope you enjoy this code !! ♡( ◡‿◡ ) --->
- <title>{Title}</title>
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link rel="shortcut icon" href="{Favicon}">
- {block:Description}
- <meta name="description" content="{MetaDescription}">
- {/block:Description}
- <meta name="image:background" content="1"/>
- <meta name="image:graphic" content="1"/>
- <meta name="image:icon1" content="1"/>
- <meta name="image:icon2" content="1"/>
- <meta name="image:icon3" content="1"/>
- <meta name="image:icon4" content="1"/>
- <meta name="image:navi" content="1"/>
- <meta name="image:navi icon" content="1"/>
- <meta name="color:background" content="#0f0f0f"/>
- <meta name="color:container" content="#181818"/>
- <meta name="color:posts" content="#181818"/>
- <meta name="color:borders" content="#363636"/>
- <meta name="color:shadow" content="#0f0f0f"/>
- <meta name="color:accent" content="#d0b695"/>
- <meta name="color:accent2" content="#dcdcdc"/>
- <meta name="color:text" content="#acacac"/>
- <meta name="color:links" content="#b99680"/>
- <meta name="color:hover" content="#fff"/>
- <meta name="color:bold" content="#e0e0e0"/>
- <meta name="color:italic" content="#98a3a9"/>
- <meta name="if:400px posts" content="1"/>
- <meta name="if:muse tab" content="1" />
- <meta name="text:ask icon hover" content="have a great day ♡"/>
- <meta name="text:optional link" content="link."/>
- <meta name="text:optional link url" content="link url"/>
- <meta name="text:alias" content="penned by name"/>
- <meta name="text:error 404" content="error 404_not found"/>
- <meta name="text:username" content="koocore_97"/>
- <meta name="text:detail1" content="<b>A0125:</b> piercings."/>
- <meta name="text:detail2" content="<b>C0426:</b> bucket hat."/>
- <meta name="text:detail3" content="<b>C0925:</b> balenciaga."/>
- <meta name="text:detail4" content="<b>A0558:</b> tattoos."/>
- <meta name="text:link1" content="/"/>
- <meta name="text:link1title" content="hover title"/>
- <meta name="text:link2" content="/"/>
- <meta name="text:link2title" content="hover title"/>
- <meta name="text:link3" content="/"/>
- <meta name="text:link3title" content="hover title"/>
- <meta name="text:link4" content="/"/>
- <meta name="text:link4title" content="hover title"/>
- <meta name="text:link5" content="/"/>
- <meta name="text:link5title" content="hover title"/>
- <meta name="text:link6" content="/"/>
- <meta name="text:link6title" content="hover title"/>
- <meta name="text:navi" content="Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi."/>
- <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
- <!--- JQUERY SCRIPTS --->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
- <!--- TOOLTIP SCRIPT ---->
- <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>
- <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>
- <!--- GOOGLE + ICON FONTS ---->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
- <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
- <script src="https://unpkg.com/feather-icons"></script>
- <link href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather:ital@1&family=Open+Sans&display=swap" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap" rel="stylesheet">
- <link href="css/hover.css" rel="stylesheet" media="all">
- <!--- VIDEO SCRIPT BY SHYTHEMES ---->
- <script> $(document).ready(function(){ $('.video iframe').each(function(){ var scale = $(this).parents('.video').width() / 500; $(this).attr({ width: Math.floor($(this).attr('width') * scale), height: Math.floor($(this).attr('height') * scale) });});}); </script>
- <!--- TAB SCRIPT ---->
- <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>
- <!--- CLOCK SCRIPT ---->
- <script> function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('txt').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 500); } function checkTime(i) { if (i < 10) {i = "0" + i}; return i; } </script>
- <style type="text/css">
- /*--- FONTS HOSTED BY TWENTYS ---*/
- @font-face{ font-family:"joystix"; src: url('https://dl.dropboxusercontent.com/s/vatvxdzc0oevq0n/joystix%20monospace.ttf’)'); }
- /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
- /*TOOLTIP*/
- #s-m-t-tooltip { max-width:auto; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px 20px 20px 20px; padding:6px 10px 6px 10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:"lato"; font-size:8px; font-weight:bold; text-transform:uppercase; font-weight:bold; letter-spacing:1px; }
- /*SCROLLBAR*/
- ::-webkit-scrollbar-thumb { display:none; }
- ::-webkit-scrollbar { display:none; }
- /*SELECTION*/
- ::-moz-selection { background:{color:accent}; color:{color:posts}; }
- ::selection { background:{color:accent}; color:{color:posts}; }
- /*---PT. 3: BODY + TEXT STYLING---*/
- /*BODY*/
- body { width:100%; height:100%; background:{color:background}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; color:{color:text}; margin:0; padding:0; font-family:'open sans', sans-serif; font-size:10px; line-height:20px; {block:if400pxPosts} font-size:12px; {/block:if400pxPosts} }
- /*FIX*/
- iframe, img, embed, object { max-width:100%; margin:auto; border:none; }
- img { max-width:100%; height:auto; margin:auto; border:none; }
- /*TEXT STYLING*/
- select, textarea, input, a { outline:none; }
- p { margin-top:5px; margin-bottom:5px; }
- small, sub, sup { font-size:100%; }
- big { font-size:110%; }
- h1 { background:transparent; color:{color:accent2}; margin-top:20px; font-family:'merriweather', serif; font-size:25px; text-transform:lowercase; text-align:center; line-height:28px; letter-spacing:1px; }
- h2 { color:{color:accent}; font-family:'lato', sans-serif; font-size:12px; text-transform:uppercase; text-align:center; line-height:18px; letter-spacing:2px; }
- a { color:{color:links}; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px; }
- a:hover { color:{color:hover};
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s; }
- ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
- b, strong { color:{color:bold}; }
- i, em { color:{color:italic}; }
- blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
- /*TUMBLR CONTROLS*/
- 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; }
- iframe.tmblr-iframe:hover { opacity:1!important; }
- /*--- PT. 4: CONTAINER + SIDEBAR ---*/
- /*CONTAINER*/
- #wrapper { position:absolute; width:1000px; height:560px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow:hidden; }
- #container { position:absolute; width:850px; height:540px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; background:{color:container}; overflow:hidden; {block:if400pxPosts} width:950px; {/block:if400pxPosts} }}
- .vertical { position:absolute; width:850px; height:440px; top:50px; left:0px; }
- .vertical li { width:106px; height:440px; display:inline-block; list-style-type:none; margin:-2px; border-right:1px solid {color:borders}; opacity:.2; }
- /*BAR STYLING*/
- .bordertop { position:absolute; width:850px; height:50px; top:0px; left:0px; background:{color:container}; border-bottom:1px solid {color:borders}; z-index:999; {block:if400pxPosts} width:950px; {/block:if400pxPosts} }
- .borderbottom { position:absolute; width:850px; height:50px; bottom:0px; left:0px; background:{color:container}; border-top:1px solid {color:borders}; z-index:999; {block:if400pxPosts} width:950px; {/block:if400pxPosts} }
- /*TOP BAR*/
- .pagi { position:absolute; width:207px; height:50px; bottom:0px; left:0px; background:{color:container}; border-right:1px solid {color:borders}; z-index:999; line-height:50px; }
- .topicon { position:absolute; width:101px; height:50px; top:0px; right:0px; background:{color:container}; border-left:1px solid {color:borders}; z-index:999; }
- .tab { position:absolute; width:502px; height:50px; bottom:0px; left:248px; overflow:hidden; text-align:center; {block:if400pxPosts} width:602px; {/block:if400pxPosts} }
- .tab li { display:inline-block; margin-right:50px; {block:if400pxPosts} margin-right:60px; {/block:if400pxPosts} }
- .tab a { width:auto; height:50px; background:transparent; color:{color:accent2}; font-size:10px; line-height:40px; letter-spacing:1px; font-weight:normal; }
- .tab a:hover { font-style:italic; }
- .tab a:focus { font-style:italic; }
- /*BOTTOM BAR*/
- .alias { position:absolute; width:207px; height:50px; bottom:0px; left:0px; background:{color:container}; border-right:1px solid {color:borders}; z-index:999; line-height:50px; font-size:9px; text-transform:uppercase; text-align:center; letter-spacing:1px; color:{color:accent}; font-weight:bold; }
- .digits { position:absolute; width:217px; height:50px; top:0px; right:0px; padding-top:2px; background:{color:container}; border-left:1px solid {color:borders}; z-index:999; {block:if400pxPosts} font-size:10px; {/block:if400pxPosts} }
- .bottomtxt { position:absolute; width:426px; height:50px; left:207px; top:0px; color:{color:accent2}; font-family:"joystix"; font-size:11px; letter-spacing:2px; line-height:50px; text-align:center; {block:if400pxPosts} width:526px; {/block:if400pxPosts} }
- .blinking { animation:blinkingText 2.5s infinite; }
- @keyframes blinkingText { 0%{color:{color:accent2};} 49%{color:{color:accent2};} 60%{color:transparent;} 99%{color:transparent;} 100%{color:{color:accent2};} }
- #txt { position:absolute; width:60px; height:15px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; font-size:11px; text-align:center; line-height:15px; }
- .digi1 { position:absolute; width:60px; height:15px; top:0px; right:110px; bottom:0px; left:0px; margin:auto; line-height:15px; }
- .digi2 { position:absolute; width:60px; height:15px; top:0px; right:0px; bottom:0px; left:80px; margin:auto; line-height:15px; text-align:right; }
- /*SIDEBAR*/
- #sidebar { position:absolute; width:490px; height:438px; top:50px; left:0px;}
- #window1 { position:absolute; width:260px; height:300px; top:0px; left:-70px; bottom:30px; right:40px; margin:auto; background:{color:container}; border:1px solid {color:borders}; z-index:999;
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- #window1:hover { z-index:9999; }
- .w1bar { position:absolute; width:230px; height:30px; top:0px; left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; border-top-left-radius:10px; border-top-right-radius:10px; font-size:13px; font-weight:bold; text-transform:uppercase; border-bottom:1px solid {color:borders}; }
- .w1bar i { color:{color:accent2}; font-size:13px; }
- .w1search { position:absolute; width:220px; height:20px; top:45px; left:20px; border-radius:10px; border:1px solid {color:borders}; color:{color:text}; line-height:20px; {block:if400pxPosts} font-size:10px; {/block:if400pxPosts} }
- .w1search i { color:{color:accent2}; font-size:9px; }
- .w1body { position:absolute; width:220px; height:220px; bottom:0px; left:20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; {block:if400pxPosts} font-size:10px; {/block:if400pxPosts} }
- .w1body b { color:{color:accent}; }
- .w1body li { display:inline-block; width:90px; height:90px; margin-right:5px; list-style-type:none; overflow:hidden; text-align:center; }
- .w1body img { width:90px; height:60px; border-radius:5px; }
- #window2 { position:absolute; width:200px; height:220px; bottom:40px; left:235px; background:{color:container}; border:1px solid {color:borders}; z-index:999;
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- #window2 img { position:absolute; width:200px; height:190px; bottom:0px; left:0px; }
- .w2bar { position:absolute; width:170px; height:29px; top:0px; left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; border-top-left-radius:10px; border-top-right-radius:10px; font-size:11px; font-weight:bold; text-transform:uppercase; border-bottom:1px solid {color:borders}; }
- .w2bar i { color:{color:accent2}; font-size:10px; }
- .hvr-grow { display:inline-block; vertical-align:middle; transform:translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -moz-osx-font-smoothing: grayscale; backface-visibility:hidden; transition-duration:0.3s; transition-property:transform; }
- .hvr-grow:hover,
- .hvr-grow:focus,
- .hvr-grow:active { transform: scale(1.1); }
- /*--- PT.5: POSTS + ENTRIES ---*/
- /*POST CONTAINER*/
- #postcon { position:absolute; width:400px; height:498px; right:0px; top:0px; margin:auto; {block:if400pxPosts} width:500px; {/block:if400pxPosts} }
- /*POSTS*/
- #posts { position:absolute; width:360px; height:408px; top:51px; left:20px; padding:20px 0px 10px 0px; z-index:1000; overflow-x:hidden; overflow-y:scroll; {block:if400pxPosts} width:460px; {/block:if400pxPosts} }
- /*ENTRY STYLING*/
- .entry { width:300px; height:auto; margin:20px; padding:10px 10px 0px 10px; background:{color:posts}; border:1px solid {color:borders}; display:inline-block; overflow:hidden; {block:if400pxPosts} width:400px; {/block:if400pxPosts} }
- .entry img { margin:0px; padding:0px; }
- /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
- /*TOP POST INFO*/
- .topinfo { width:100%; height:20px; margin-top:0px; margin-bottom:15px; margin-left:-10px; padding: 0px 10px 10px 10px; background:{color:posts}; border-bottom:1px solid {color:borders}; line-height:22px; }
- .topinfo a { margin-left:5px; color:{color:links}; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
- .preblog { width:auto; height:26px; margin-top:0px; margin-right:5px; list-style:none; z-index:100; float:right; line-height:22px; }
- /*BOTTOM POST INFO*/
- .bottominfo { width:100%; height:auto; min-height:20px; margin-top:15px; margin-left:-10px; padding:10px 15px; background:{color:posts}; color:{color:text}; border-top:1px solid {color:borders}; overflow:hidden; font-size:12px; line-height:22px; }
- .bottominfo a { color:{color:links}; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
- .psource { width:auto; height:25px; margin-top:0px; margin-right:10px; list-style:none; z-index:100; float:right; line-height:22px; }
- /*TAGS*/
- .tags { {block:IndexPage} width:290px; {block:if400pxPosts} width:390px; {/block:if400pxPosts} margin-top:0px; text-align:justify; line-height:14px; {/block:IndexPage} }
- .tags a { color:{color:text}; font-family:'lato', sans-serif; font-size:7px; }
- .tags a:hover { color:{color:hover}; font-weight:bold; }
- /*POST NOTES*/
- .note c { float:left; }
- #notes { width:300px; margin:0px; color:{color:text}; font-size:12px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} }
- ol.notes { margin:0px; padding:0px; list-style-type:none; }
- ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
- ol.notes li.note img.avatar { width:20px; height:20px; margin-right:10px; margin-left:0px; float:left; vertical-align:-5px; }
- li.more_notes_link_container { font-size: 12px; }
- /*PAGINATION*/
- .pagination { width:100%; text-align:center; font-size:11px; color:{color:borders}; }
- .pagination a { padding:8px; word-spacing:2px; font-size:12px; }
- .pagination a:hover { color:{color:accent}; }
- /*CREDIT*/
- #cred { position:fixed; width:auto; height:auto; bottom:15px; right:15px; background-color:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; }
- #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
- -webkit-background-clip:text;
- -webkit-text-fill-color:transparent; }
- /*--- PT.7: POST STYLING ---*/
- /*CHATS*/
- .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
- .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
- .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{ content:""; position:absolute; width:.5em; height:1em; left:-.5em; bottom:0; border-right:.9em solid #e6e6e6; border-bottom-right-radius:1em .5em; }
- .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
- .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{ content:""; position:absolute; width:.5em; height:1em; right:-.5em; bottom:0; border-left:.9em solid #147efb; border-bottom-left-radius:1em .5em; }
- .me p,.answer,.asked span{ margin:0; padding:0; }
- .answer{ overflow:hidden; }
- .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:12px; text-align:left; line-height:0px; }
- .footerright .viasrc { float:left; }
- .asked a { margin:0; padding:0; }
- .user_3{ background-color:#e6e6e6; color:#555555; }
- .user_3::after{ border-color:#e6e6e6; }
- .user_4{ background-color:#147efb; color:white; }
- .user_4::after{ border-color:#147efb; }
- .user_5{ background-color:#e6e6e6; color:#555555; }
- .user_5::after{ border-color:#e6e6e6; }
- .user_6{ background-color:#147efb; color:white; }
- .user_6::after{ border-color:#147efb; }
- .user_7{ background-color:#e6e6e6; color:#555555; }
- .user_7::after{ border-color:#e6e6e6; }
- .user_8{ background-color:#147efb; color:white; }
- .user_8::after{ border-color:#147efb; }
- .user_9{ background-color:#e6e6e6; color:#555555; }
- .user_9::after{ border-color:#e6e6e6; }
- .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
- /*QUOTES*/
- .quote { margin:10px; padding:5px; color:{color:italic}; font-family:'merriweather', serif; font-size:18px; text-align:center; text-transform:lowercase; line-height:25px; letter-spacing:1px; word-spacing:3px; }
- .source { font-size:12px; text-align:right; line-height:20px; }
- /*ASKS*/
- .asker { position:relative; color:{color:container}; font-size:9px; text-transform:lowercase; text-decoration:none; }
- .asker a { color:{color:container}; font-family:'lato', sans-serif; font-style:italic; text-transform:uppercase; letter-spacing:1px; }
- .asker b { padding:0px 6px 0px 6px; color:{color:container}; font-family:'lato', sans-serif; font-weight:bold; font-style:italic; text-transform:uppercase; letter-spacing:1px; }
- .ask { width:247px; {block:if400pxPosts} width:347px; {/block:if400pxPosts} height:auto; margin-left:20px; padding:5px 5px 5px 10px; background:{color:accent}; border-top-left-radius:10px; border-top-right-radius:10px; }
- .answer { margin:10px; }
- .bubble { width:210px; {block:if400pxPosts} width:310px; {/block:if400pxPosts} height:auto; margin-top:-10px; margin-left:20px; padding:0px 25px 10px 25px; border:1px solid {color:borders}; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-family:'lato', sans-serif; font-size:7px; text-transform:uppercase; text-align:justify; letter-spacing:1px; }
- .bubble span { position:absolute; width:auto; height:auto; margin-top:-5px; margin-left:225px; {block:if400pxPosts} margin-left:325px; {/block:if400pxPosts} background:{color:posts}; font-size:18px; }
- /*LINKS*/
- .linktitle { margin:0; margin-top:30px; margin-bottom:30px; color:{color:accent2}; font-size:15px; font-weight:normal; text-transform:lowercase; line-height:20px; }
- /*AUDIO*/
- .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:30px; overflow:hidden; opacity:0.6; z-index:9; }
- .albumart img { position:relative; width:65px; height:65px; margin-top:-65px; margin-left:0px; padding:10px; border:1px solid {color:borders}; }
- .trackinfo { position:relative; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} height:65px; top:2.5px; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; background:{color:posts}; color:{color:text}; border:1px solid {color:borders}; }
- .trackname { position:relative; padding-top:15px; font-size:8px; font-weight:bold; text-transform:uppercase; text-align:center; line-height:12px; letter-spacing:2px; }
- .artist { font-size:7.5px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
- /*VIDEOS*/
- .tumblr_video_container { width:auto!important; height:auto!important; }
- /*--- PT.8: TABS ---*/
- /*TAB + CLOSE CONTENT*/
- .tabcontent { position:absolute; width:850px; {block:if400pxPosts} width:950px; {/block:if400pxPosts} height:438px; top:51px; right:0px; background:{color:container}; overflow:hidden; z-index:9999; display:none; animation: fadeEffect 1s; }
- @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
- .close { position:absolute; right:0px; padding:15px 15px; color:{color:links}; z-index:999999; font-size:11px; }
- .close:hover { cursor:pointer; }
- /*NAVI TAB*/
- #nbox1 { position:absolute; width:420px; height:250px; top:0px; left:0px; bottom:0px; right:0px; margin:auto; background:{color:container}; border:1px solid {color:borders};
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- #nbox1 img { width:420px; height:220px; bottom:0px; left:0px; margin-top:30px; }
- .nb1bar { position:absolute; width:390px; height:30px; top:0px; left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; border-top-left-radius:10px; border-top-right-radius:10px; font-size:13px; font-weight:bold; text-transform:uppercase; border-bottom:1px solid {color:borders}; }
- .nb1bar i { color:{color:accent2}; font-size:13px; }
- #nbox2 { position:absolute; width:230px; height:160px; left:80px; bottom:50px; background:{color:container}; border:1px solid {color:borders};
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- .nb2bar { position:absolute; width:200px; height:30px; top:0px; left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; border-top-left-radius:10px; border-top-right-radius:10px; font-size:13px; font-weight:bold; text-transform:uppercase; border-bottom:1px solid {color:borders}; }
- .nb2bar i { color:{color:accent2}; font-size:13px }
- .links { position:absolute; top:48px; left:20px; overflow: hidden; height:auto; word-spacing:10px; width:190px; height:110px; }
- .links li { display:inline-block; margin:0px; height:40px; width:40px; line-height:40px; margin:5px 10px 5px 10px; float:left; }
- .links a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:container}; background-color:{color:accent2}; letter-spacing:1px; font-style:italic; font-size:9px; padding:13px; border:1px solid {color:borders}; border-radius:5px; text-align:center; }
- .links a:hover { color:{color:sidebar}; background-color:{color:accent}; border:1px solid {color:accent};
- -webkit-transition: all 0.8s ease;
- -moz-transition: all 0.8s ease;
- -o-transition: all 0.8s ease;
- -ms-transition: all 0.8s ease;
- transition: all 0.8s ease; }
- #nbox3 { position:absolute; width:100px; height:100px; right:160px; {block:if400pxPosts} right:200px; {/block:if400pxPosts} top:50px; background:{color:container}; border:1px solid {color:borders};
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- .nb3bar { position:absolute; width:70px; height:29px; top:0px; left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; text-align:center; letter-spacing:1px; border-bottom:1px solid {color:borders}; {block:if400pxPosts} font-size:10px; {/block:if400pxPosts} }
- .nb3bar i { color:{color:accent2}; font-size:10px; }
- .nb3bar img { width:30px; height:70px; margin-top:30px; }
- .nb3txt { position:absolute; width:100px; height:30px; bottom:5px; left:0px; text-align:center; line-height:15px; {block:if400pxPosts} font-size:10px; {/block:if400pxPosts} }
- #nbox4 { position:absolute; width:230px; height:90px; right:80px; {block:if400pxPosts} right:120px; {/block:if400pxPosts} bottom:70px; background:{color:container}; border:1px solid {color:borders};
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- .nb4bar { position:absolute; width:200px; height:30px; top:0px; left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; text-align:center; letter-spacing:1px; border-bottom:1px solid {color:borders}; }
- .nb4bar i { color:{color:accent2}; font-size:10px; }
- .nb4txt { font-size:9px; margin-top:30px; width:200px; height:35px; text-align:center; padding:10px 15px 10px 15px; line-height:20px; overflow:scroll; }
- /*MUSE TAB*/
- #bgmuses { position:absolute; width:790px; height:380px; bottom:20px; right:0px; overflow:scroll; {block:if400pxPosts} right:50px; {/block:if400pxPosts} }
- .mbox { display:inline-block; width:200px; height:130px; margin:25px 25px 25px 20px; background:{color:container}; float:left; border:1px solid {color:borders}; }
- .mboxbar { width:170px; height:25px; margin-top:0px; margin-left:0px; padding:0px 15px 0px 15px; background:{color:container}; color:{color:accent}; text-align:center; letter-spacing:1px; {block:if400pxPosts} font-size:10px; {/block:if400pxPosts} }
- .mbox img { width:200px; height:80px; margin-top:0px; background:black; }
- .msearch { position:absolute; width:160px; height:20px; margin-top:-20px; margin-left:20px; border-radius:10px; color:{color:container}; background:{color:accent2}; line-height:20px; font-weight:bold; letter-spacing:1px; font-size:8px;
- -webkit-box-shadow: 10px 10px 16px 0px {color:shadow};
- -moz-box-shadow: 10px 10px 16px 0px {color:shadow};
- box-shadow: 10px 10px 16px 0px {color:shadow}; }
- .msearch i { color:{color:container}; font-size:9px; }
- /*--- PT.9: CUSTOM CSS ---*/
- {CustomCSS}
- </style></head><body onload="startTime()">
- <div id="wrapper">
- <div id="container">
- <div class="bordertop">
- <div class="pagi"> {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> return </a> / {/block:previouspage} {block:nextpage} <a href="{nextpage}"> next </a> {/block:nextpage} </div> {/block:pagination} </div>
- <div class="tab">
- <li><a href="/"> home. </a></li>
- <li><a href="/ask"> message. </a></li>
- <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')"> navigation. </a></li>
- {block:ifmusetab} <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')"> characters. </a></li> {/block:ifmusetab}
- {block:ifNotmusetab} <li><a href="{text:optional link url}"> {text:optional link} </a></li> {/block:ifNotmusetab} </div>
- <div class="topicon"> <i width="22px" height="22px" style="position:absolute; margin:auto; top:0px; right:0px; bottom:0px; left:0px; color:{color:accent};" data-feather="alert-triangle"></i> </div>
- </div>
- <div class="borderbottom">
- <div class="alias"> {text:alias} </div>
- <div class="bottomtxt"><span class="blinking"> {text:error 404} </span></div>
- <div class="digits"> <div class="digi1"> 82% <i width="14px" height="14px" style="position:absolute; padding-left:3px;" data-feather="battery-charging"></i> </div> <div id="txt"> 00:00:00 </div> <div class="digi2"> 25°c <i width="14px" height="14px" style="position:absolute; top:2px; padding-left:5px;" data-feather="cloud-lightning"></i> </div> </div>
- </div>
- <div class="vertical">
- <li> </li><li> </li><li> </li>
- <li> </li><li> </li><li> </li>
- <li> </li><li> </li><li> </li>
- </div>
- <!--- SIDEBAR --->
- <div id="sidebar">
- <div id="window1" class="hvr-grow"> <div class="w1bar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-lock"></i> </p> <p style="margin-top:-25px; text-align:center"> @{text:username}
- </div> <div class="w1search"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p></div>
- <div class="w1body">
- <li> <img src="{image:icon1}" draggable="false"> {text:detail1} </li>
- <li> <img src="{image:icon2}" draggable="false"> {text:detail2} </li>
- <p>
- <li> <img src="{image:icon3}" draggable="false"> {text:detail3} </li>
- <li> <img src="{image:icon4}" draggable="false"> {text:detail4} </li>
- </div>
- </div>
- <div id="window2" class="hvr-grow"> <div class="w2bar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-lock"></i> </p> <p style="margin-top:-25px; text-align:center"> @{text:username} </div> <img src="{image:graphic}" draggable="false">
- </div>
- </div>
- <!--- NAVIGATION TAB --->
- <div id="navi" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
- <div id="nbox1"> <div class="nb1bar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-lock"></i> <p style="margin-top:-25px; text-align:center"> still with you. </p> </div> <img src="{image:navi}" draggable="false"> </div>
- <div id="nbox2" class="hvr-grow"> <div class="nb2bar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-lock"></i> <p style="margin-top:-25px; text-align:center"> lost or found ? </p> </div>
- <div class="links">
- <li><a href="{text:link1}" title="{text:link1title}">.o1</a></li>
- <li><a href="{text:link2}" title="{text:link2title}">.o2</a></li>
- <li><a href="{text:link3}" title="{text:link3title}">.o3</a></li>
- <li><a href="{text:link4}" title="{text:link4title}">.o4</a></li>
- <li><a href="{text:link5}" title="{text:link5title}">.o5</a></li>
- <li><a href="{text:link6}" title="{text:link6title}">.o6</a></li>
- </div>
- </div>
- <div id="nbox3" class="hvr-grow"> <div class="nb3bar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-lock"></i> <p style="margin-top:-25px; text-align:center; padding-left:10px;"> 0901 </p> </div> <i width="22px" height="22px" style="position:absolute; margin:auto; top:0px; right:0px; bottom:0px; left:0px; color:{color:accent2};" data-feather="wifi-off"></i>
- <!---- UPDATE YOUR DRAFTS + INBOX HERE !! ---->
- <div class="nb3txt">
- <b>inbox:</b> +00. <br>
- <b>drafts:</b> +00.
- </div>
- </div>
- <div id="nbox4" class="hvr-grow"> <div class="nb4bar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-lock"></i> <p style="margin-top:-25px; text-align:center; padding-left:10px;"> +1 new notifcation! </p> </div> <div class="nb4txt"> {text:navi} </div>
- </div>
- </div>
- <!--- MUSES TAB --->
- <div id="muses" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
- <div id="bgmuses">
- <!--- TO ADD A NEW ROW OF MUSES COPY FROM HERE --->
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_01</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_02</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_03</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <!--- TO HERE !! --->
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_04</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_05</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_06</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_07</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_08</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- <div class="mbox">
- <div class="mboxbar"> <p style="text-align:left;"> <i class="fas fa-bars"></i> <span style="float:right;"> <i class="fas fa-user-plus"></i> </p>
- <p style="margin-top:-25px; text-align:center"> <a href="/">@muse_09</a> </p> </div>
- <img src="https://i.postimg.cc/LsvvFJRG/jungkook-muse.png">
- <div class="msearch"> <p style="text-align:left; margin-top:0px; margin-left:8px;"> SEARCH... <span style="float:right; margin-top:-1px; margin-right:8px;"> <i class="fas fa-search"></i> </p> </div>
- </div>
- </div>
- </div>
- <!--- POSTS --->
- <div id="postcon">
- <div id="posts">
- {block:Posts}
- <div class="entry">
- {block:Date} <div class="topinfo"><a href="{Permalink}" title="posted {TimeAgo}.">{Month} {Year}</a> <div class="preblog"><a href="{ReblogURL}" target="_blank" title="reblog this post?">reblog</a></div></div>{/block:Date}
- <!--- TEXTS --->
- {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
- <!--- PHOTOS --->
- {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
- {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
- <!--- CHATS --->
- {block:Chat} <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label" style="text-transform:uppercase; font-weight:bold;">@{Label} </span>{/block:Label}
- {Line}</li>{/block:Lines}</ul><div style="font-size:7px; color:{color:text}; margin-top:-10px; margin-left:240px; {block:if400pxPosts} margin-left:340px; {/block:if400pxPosts} letter-spacing:1px; text-transform:uppercase"><span class="fas fa-check"></span> delivered.</div>{/block:Chat}
- <!--- QUOTES --->
- {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
- <!--- LINKS --->
- {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
- {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
- <!--- VIDEOS --->
- {block:Video}<div class="video">{Video-500}</div>{/block:Video}
- <!--- AUDIOS --->
- {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}
- <!--- ASKS --->
- {block:Answer}<div style="margin-top:25px;" class="asker"><div class="ask">({TimeAgo}) <b>{Asker}</b> said:</div></div><div class="bubble"><br>{Question} <a href="/" title="{text:ask icon hover}"><span class="th th-plant-vase-o"></span></a></div><div class="answer"> {Answer} </div>{/block:Answer}
- {block:Caption}{Caption}{/block:Caption}
- <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}" title="posted by {SourceTitle}.">source</a>{/block:ContentSource}</div>
- {block:NoteCount}<a href="{Permalink}" title="view the notes."> {NoteCountWithLabel}</a>{/block:NoteCount}
- {block:HasTags} <div class="tags"> <span style="font-size:7px; color:{color:links}; letter-spacing:1px; text-transform:uppercase; font-weight:bold;"> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}<br></div>{/block:HasTags}</div>
- {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
- </div>
- {/block:Posts}
- </div>
- </div>
- </div>
- </div>
- <div id="cred">
- <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
- </div>
- <script> feather.replace() </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement