API tools faq
paste
glenthemes

About Page [06]: Outcast

glenthemes
Oct 25th, 2018 (edited)
6,043
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.39 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [06]: Outcast
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/10/26
  6. Last updated: 2022/09/14
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the credit.
  10. 2) Do not remove parts of the code without my permission.
  11. 3) Do not claim my codes as your own.
  12. 4) Do not use my works as base codes.
  13. 5) You may add widgets to my themes and pages.
  14.  
  15. Please stick to the Terms! Thank you!
  16. Here is the help guide!
  17. ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
  18. //glenthemes.tumblr.com/outcast
  19. ------------------------------------------------------------------------>
  20.  
  21. <!DOCTYPE html>
  22. <html lang="en">
  23.  
  24. <head>
  25.  
  26. <title>{Title}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29.  
  30. <!--------------------JAVASCRIPTS-------------------->
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:25,
  39. tip_fade_speed:75,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46. <script src="//static.tumblr.com/2pnwama/pT3ph6hj0/hearts.js"></script>
  47.  
  48. <link href="//fonts.googleapis.com/css?family=Karla|Nunito|Quicksand:400,500" rel="stylesheet">
  49.  
  50. <!-------------------------------------------------------------------->
  51.  
  52. <style type="text/css">
  53.  
  54. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  55.  
  56. /*--------------------TOOLTIPS--------------------*/
  57. #s-m-t-tooltip {
  58. padding: 4px 9px;
  59. margin: 20px;
  60. background-color:#fefefe; /* tooltip background color */
  61. border:1px solid #edf1ec; /* tooltip border color */
  62. box-shadow:5px 5px #EAEFEB; /* tooltip solid shadow color */
  63. font-family: karla;
  64. font-size: calc(12px - 3px);
  65. letter-spacing: 1px;
  66. text-transform: uppercase;
  67. color: #777; /* tooltip text coloor */
  68. z-index:9999!important;
  69. max-width:275px;
  70. }
  71.  
  72.  
  73. /*--------------------TUMBLR CONTROLS--------------------*/
  74. iframe#tumblr_controls, .iframe-controls--desktop {
  75. top:5px!important;
  76. right:5px!important;
  77. position:fixed!important;
  78.  
  79. transform:scale(0.8,0.8);
  80. -webkit-transform:scale(0.8,0.8);
  81.  
  82. transform-origin:100% 0;
  83. z-index:999999!important;
  84. }
  85.  
  86. /*--------------------TEXT HIGHLIGHT--------------------*/
  87. ::selection {
  88. background:#fafafa; /* highlighted text background color */
  89. color:#555; /* highlighted text text color */
  90. }
  91.  
  92. ::-moz-selection {
  93. background:#fafafa; /* highlighted text background color */
  94. color:#555; /* highlighted text text color */
  95. }
  96.  
  97. /*--------------------BASICS--------------------*/
  98. body {
  99. background:#fff url('//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/1wspebb34/tumblr_static_3rkx4t9bgaqscw04kw440skgw.png');
  100. background-attachment:fixed;
  101. background-repeat:repeat;
  102. font-family:nunito;
  103. line-height:1.6em;
  104. font-size:12px; /* general font size */
  105. color:#888; /* general text color */
  106. text-align:left;
  107. overflow:hidden;
  108. }
  109.  
  110. blockquote {
  111. padding-left:10px;
  112. margin-left:5px;
  113. border-left:1px solid;
  114. border-color:#aaa; /* blockquote color */
  115. margin:10px;
  116. }
  117.  
  118. a {text-decoration:none;}
  119.  
  120. #bigbox a {
  121. color:#acc7b9; /* common links color */
  122. padding-bottom:1px;
  123. border-bottom:1px solid #eee; /* common links border color */
  124. -webkit-transition: all 0.4s ease-in-out;
  125. -moz-transition: all 0.4s ease-in-out;
  126. -o-transition: all 0.4s ease-in-out;
  127. }
  128.  
  129. b, strong {
  130. font-weight:bold;
  131. color:#b7c9c1; /* bolded text color */
  132. }
  133.  
  134. i, em {color:#99b686;} /* italicized text color */
  135.  
  136. hr {
  137. width:70%;
  138. border-width:0px;
  139. height:1px;
  140. background-color:#bbb; /* text divider color */
  141. }
  142.  
  143. pre, code {
  144. white-space:pre-wrap;
  145. display:block;
  146. }
  147.  
  148. /*--------------------CONTAINER--------------------*/
  149. #cont {
  150. position:fixed;
  151. top:50%;left:50%;
  152. transform:translate(-50%,-50%);
  153. width:702px;
  154. }
  155.  
  156. #bigbox {
  157. margin-top:-2px;
  158. padding:25px;
  159. background-color:#fff; /* box background color */
  160. border:1px solid #eee; /* box top, right, left border color */
  161. border-bottom:4px solid #EAEFEB; /* box bottom border color */
  162. border-radius:0px 10px 0px 10px;
  163. display:flex;
  164. }
  165.  
  166. /*--------------------TOP LINKS--------------------*/
  167. #toplinks {
  168. z-index:2;
  169. }
  170.  
  171. #toplinks a {
  172. display:inline-block;
  173. margin:0px 3px;
  174. min-width:60px;
  175. padding:4px 9px;
  176. background-color:#fff; /* top links background color */
  177. border-radius:10px 10px 0px 0px;
  178. border:1px solid #eee; /* top links border color */
  179. border-bottom:0px solid transparent;
  180. font-family:silkscreen;
  181. text-transform:uppercase;
  182. font-size:9px;
  183. color:#777; /* top links color */
  184. text-align:center;
  185. }
  186.  
  187. #toplinks a:first-child {margin-left:0px;}
  188.  
  189. /*--------------------LEFT--------------------*/
  190. #leftside {
  191. width:calc(180px + 30px + 2px);
  192. height:inherit;
  193. }
  194.  
  195. /* sidebar image */
  196. .sbimg {
  197. width:calc(100% - 30px - 2px);
  198. height:auto;
  199. padding:15px;
  200. border:1px solid #f5f5f5; /* sidebar image border color */
  201. }
  202.  
  203. /* info labels: underneath sidebar image */
  204. .sbinfo {
  205. margin-top:20px;
  206. font-size:9px;
  207. text-transform:uppercase;
  208. letter-spacing:1px;
  209. }
  210.  
  211. .sbinfo name {
  212. margin-right:7px;
  213. padding:5px 9px;
  214. background-color:#f5f8f3; /* info labels background color */
  215. color:#555; /* info labels text color */
  216. }
  217.  
  218. .sbinfo p {
  219. margin-block-start:1.2em;
  220. margin-block-end:1.2em;
  221. }
  222.  
  223. .sbinfo p:last-child {margin-bottom:0px;}
  224.  
  225. /*--------------------RIGHT--------------------*/
  226. #rightside {
  227. margin-left:20px;
  228. width:calc(100% - 180px - 30px - 2px - 20px);
  229. height:inherit;
  230. }
  231.  
  232. /* main title of box */
  233. .maintitle {
  234. margin-top:calc(15px + 1px);
  235. font-family:quicksand;
  236. font-size:15px;
  237. text-transform:uppercase;
  238. letter-spacing:3px;
  239. color:#666; /* main title color */
  240. }
  241.  
  242. /* main title underline / divider */
  243. .bar {
  244. margin-top:10px;
  245. margin-left:-20px;
  246. width:calc(100% + 20px);
  247. height:1px;
  248. background-color:#eee; /* main title underline color */
  249. }
  250.  
  251. /* info labels table area */
  252. #table {
  253. margin-top:20px;
  254. font-size:9px;
  255. text-transform:uppercase;
  256. letter-spacing:1px;
  257. display:flex;
  258. }
  259.  
  260. #table name {
  261. margin-right:7px;
  262. padding:5px 9px;
  263. background-color:#f5f8f3; /* info labels background color */
  264. color:#555; /* info labels text color */
  265. }
  266.  
  267. #table p {
  268. margin-block-start:1.2em;
  269. margin-block-end:1.2em;
  270. }
  271.  
  272. #table p:last-child {margin-bottom:0px;}
  273.  
  274. /* info labels: left column */
  275. .stats-left {}
  276.  
  277. /* info labels: right column */
  278. .stats-right {
  279. margin-left:20px; /* distance between left & right columns */
  280. }
  281.  
  282. /* quote line */
  283. .quote {
  284. margin-top:20px;
  285. border-left:10px solid #DFE7E0; /* quote left border color */
  286. padding:8px 10px;
  287. background-color:#f5f7f6; /* quote left background color */
  288. font-family:silkscreen;
  289. text-transform:uppercase;
  290. font-size:9px;
  291. color:#555; /* quote left text color */
  292. border-radius:5px;
  293. }
  294.  
  295. /* biography text section */
  296. .bio {
  297. margin-top:20px;
  298. text-align:justify;
  299. line-height:1.6em;
  300. overflow-x:hidden;
  301.  
  302. /* delete the next 2 lines if you do not need a scrollbar */
  303. overflow-y:auto;
  304. padding-right:10px;
  305.  
  306. /* you might need to adjust the next line if necessary */
  307. /* just play around with it until you get the perfect height :) */
  308. max-height:194px;
  309. }
  310.  
  311. /* biography text section scrollbar */
  312. .bio::-webkit-scrollbar {
  313. height:13px;
  314. width:13px;
  315. background-color:#fff; /* scrollbar background color */
  316. }
  317.  
  318. .bio::-webkit-scrollbar-thumb {
  319. background-color:#c2d1c4; /* ACTUAL scrollbar color */
  320.  
  321. border-top:3px solid #fff; /* scrollbar background color */
  322. border-right:6px solid #fff; /* scrollbar background color */
  323. border-bottom:3px solid #fff; /* scrollbar background color */
  324. border-left:6px solid #fff; /* scrollbar background color */
  325. }
  326.  
  327. .bio::-webkit-scrollbar-track {
  328. background-color:#fff;
  329. }
  330.  
  331. .bio p:last-child {margin-bottom:0px;}
  332.  
  333. .bio img {
  334. margin-left:50%;transform:translateX(-50%);
  335. width:100%;
  336. }
  337.  
  338. /*--------------------BOTTOM LINKS--------------------*/
  339. #botlinks {
  340. margin-top:-3px;
  341. text-align:right;
  342. z-index:2;
  343. }
  344.  
  345. #botlinks a {
  346. display:inline-block;
  347. margin:0px 3px;
  348. min-width:60px;
  349. padding:4px 9px;
  350. background-color:#EAEFEB; /* bottom custom links background color */
  351. border-radius:0px 0px 10px 10px;
  352. border:1px solid transparent;
  353. font-family:silkscreen;
  354. text-transform:uppercase;
  355. font-size:9px;
  356. color:#777; /* bottom custom links color */
  357. text-align:center;
  358. }
  359.  
  360. #botlinks a:last-child {margin-right:0px;}
  361.  
  362.  
  363. /*--------------------MUSIC PLAYER--------------------*/
  364. #glenjamin {
  365. position:absolute;
  366. left:100%;
  367. margin-top:calc(-36px - 29px);
  368. padding:12px;
  369. background-color:#eff3f0; /* music player background color */
  370. border-radius:0px 10px 10px 0px;
  371. line-height:1em;
  372. cursor:pointer;
  373. }
  374.  
  375. .playy, .pausee {
  376. font-size:13px;
  377. color:#777; /* music player buttons color */
  378. z-index:2;
  379. }
  380.  
  381. .pausee {
  382. display:none;
  383. font-size:9px;
  384. }
  385.  
  386.  
  387. </style>
  388.  
  389. </head>
  390.  
  391. <body>
  392.  
  393. <div id="cont">
  394.  
  395. <!----TOP CUSTOM LINKS---->
  396. <div id="toplinks">
  397. <a href="/">index</a>
  398. <a href="/ask">message</a>
  399. <a href="/archive">archive</a>
  400. <!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU :)-->
  401. <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  402. </div>
  403.  
  404.  
  405.  
  406.  
  407. <div id="bigbox">
  408. <div id="leftside">
  409.  
  410.  
  411. <!----SIDEBAR IMAGE---->
  412. <!--recommended dimensions: 180px by 282px-->
  413. <img class="sbimg" src="//66.media.tumblr.com/bd951156c22b90626e12706f89ba3227/tumblr_ph6cl5d9np1qg2f5co10_r1_400.png">
  414.  
  415.  
  416. <!--INFO LABELS: underneath sidebar image-->
  417. <div class="sbinfo">
  418. <name>name:</name>genji shimada
  419. <p>
  420. <name>occupation:</name>adventurer
  421. <p>
  422. <name>hometown:</name>hanamura
  423. </div>
  424. </div><!--leftside--><!--do not delete this line-->
  425.  
  426.  
  427.  
  428.  
  429.  
  430.  
  431. <div id="rightside">
  432.  
  433.  
  434. <!----MAIN TITLE---->
  435. <div class="maintitle">genji shimada</div>
  436.  
  437.  
  438. <div class="bar"></div>
  439.  
  440.  
  441. <div id="table">
  442.  
  443. <!----INFO LABELS: left column---->
  444. <div class="stats-left">
  445. <name>alias:</name>sparrow
  446. <p>
  447. <name>difficulty:</name>☆☆☆
  448. <p>
  449. <name>likes:</name>gaming, ramen
  450. </div><!--stats-left--><!--do not delete this line-->
  451.  
  452.  
  453. <!----INFO LABELS: right column---->
  454. <div class="stats-right">
  455. <name>ultimate:</name>dragonblade
  456. <p>
  457. <name>mbti:</name>ISFP (<a title="introverted, observant, feeling, perception">+</a>)
  458. <p>
  459. <name>alignment:</name>lawful good (<a title="controversial opinion">?</a>)
  460. </div><!--stats-right--><!--do not delete this line-->
  461. </div><!--table--><!--do not delete this line-->
  462.  
  463.  
  464.  
  465. <!--quote label line-->
  466. <div class="quote">The heart of a man still beats inside of me.</div>
  467.  
  468.  
  469.  
  470. <!----BIOGRAPHY TEXT SECTION---->
  471. <div class="bio">
  472.  
  473. Welcome to your biography area! Write your heart out.
  474. <p>
  475. <blockquote>This is what a blockquote looks like.</blockquote>
  476. <b>This is what bolded text looks like.</b>
  477. <br>
  478. <i>This is what italicized text looks like.</i>
  479. <br>
  480. <u>This is what underlined text looks like.</u>
  481. <br>
  482. <a href="/">This is what a link looks like.</a>
  483. <p>
  484. <a href="//theme-hunter.tumblr.com/post/36665898985/cheat-sheet" target="_blank">Here's</a> a HTML cheat sheet to help you out.
  485. <p>
  486. <!--optional divider image-->
  487. <img style="width:70%" src="//66.media.tumblr.com/85c896705d42a0d36c7d33e217e75acf/tumblr_ph6cl5d9np1qg2f5co7_r2_1280.png">
  488.  
  489. </div><!--bio--><!--do not delete this line-->
  490. </div><!--rightside--><!--do not delete this line-->
  491. </div><!--bigbox--><!--do not delete this line-->
  492.  
  493.  
  494.  
  495.  
  496. <!----BOTTOM CUSTOM LINKS---->
  497. <div id="botlinks">
  498. <a href="/">link 1</a>
  499. <a href="/">link 2</a>
  500. <a href="/">link 3</a>
  501. <a href="/">link 4</a>
  502. </div><!--botlinks-->
  503.  
  504.  
  505.  
  506.  
  507. <!----MUSIC PLAYER---->
  508. <!-- put the music name between the quotation marks of title="" -->
  509. <a id="glenjamin" title="This Silence is Mine (Chiptune cover by Emily Music)" onclick="kaishi();">
  510. <div class="playy">▷</div>
  511. <div class="pausee">⌷⌷</div>
  512. </a><!--glenjamin-->
  513.  
  514. <!--music URL-->
  515. <!-- pls read: linktr.ee/direct_file_links -->
  516. <audio id="tune" src="https://rhizo.gitlab.io/nier/This_Silence_is_Mine.mp3" onended="restart();" type="audio"></audio>
  517.  
  518. </div><!--cont--><!--do not delete this line-->
  519.  
  520. </body>
  521.  
  522. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!