Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-----------------------------------------------------------------------
- About Page [06]: Outcast
- Made by glenthemes
- Initial release: 2018/10/26
- Last updated: 2022/09/14
- TERMS OF USE:
- 1) Do not remove the theme credit.
- 2) Do not repost/redistribute my themes.
- 3) Do not take parts of the code and use it as your own.
- 4) Do not use my themes as a base code.
- 5) Do not mix my themes together.
- Please stick to the Terms! Thank you!
- Here is the help guide!
- ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
- //glenthemes.tumblr.com/outcast
- ------------------------------------------------------------------------>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <!--------------------JAVASCRIPTS-------------------->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="//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:25,
- tip_fade_speed:75,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script src="//static.tumblr.com/2pnwama/pT3ph6hj0/hearts.js"></script>
- <link href="//fonts.googleapis.com/css?family=Karla|Nunito|Quicksand:400,500" rel="stylesheet">
- <!-------------------------------------------------------------------->
- <style type="text/css">
- @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
- /*--------------------TOOLTIPS--------------------*/
- #s-m-t-tooltip {
- padding: 4px 9px;
- margin: 20px;
- background-color:#fefefe; /* tooltip background color */
- border:1px solid #edf1ec; /* tooltip border color */
- box-shadow:5px 5px #EAEFEB; /* tooltip solid shadow color */
- font-family: karla;
- font-size: calc(12px - 3px);
- letter-spacing: 1px;
- text-transform: uppercase;
- color: #777; /* tooltip text coloor */
- z-index:9999!important;
- max-width:275px;
- }
- /*--------------------TUMBLR CONTROLS--------------------*/
- iframe#tumblr_controls, .iframe-controls--desktop {
- top:5px!important;
- right:5px!important;
- position:fixed!important;
- transform:scale(0.8,0.8);
- -webkit-transform:scale(0.8,0.8);
- transform-origin:100% 0;
- z-index:999999!important;
- }
- /*--------------------TEXT HIGHLIGHT--------------------*/
- ::selection {
- background:#fafafa; /* highlighted text background color */
- color:#555; /* highlighted text text color */
- }
- ::-moz-selection {
- background:#fafafa; /* highlighted text background color */
- color:#555; /* highlighted text text color */
- }
- /*--------------------BASICS--------------------*/
- body {
- background:#fff url('//static.tumblr.com/c0a4e7cc4f5c2882a7779a37b63132bf/2pnwama/1wspebb34/tumblr_static_3rkx4t9bgaqscw04kw440skgw.png');
- background-attachment:fixed;
- background-repeat:repeat;
- font-family:nunito;
- line-height:1.6em;
- font-size:12px; /* general font size */
- color:#888; /* general text color */
- text-align:left;
- overflow:hidden;
- }
- blockquote {
- padding-left:10px;
- margin-left:5px;
- border-left:1px solid;
- border-color:#aaa; /* blockquote color */
- margin:10px;
- }
- a {text-decoration:none;}
- #bigbox a {
- color:#acc7b9; /* common links color */
- padding-bottom:1px;
- border-bottom:1px solid #eee; /* common links border color */
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- }
- b, strong {
- font-weight:bold;
- color:#b7c9c1; /* bolded text color */
- }
- i, em {color:#99b686;} /* italicized text color */
- hr {
- width:70%;
- border-width:0px;
- height:1px;
- background-color:#bbb; /* text divider color */
- }
- pre, code {
- white-space:pre-wrap;
- display:block;
- }
- /*--------------------CONTAINER--------------------*/
- #cont {
- position:fixed;
- top:50%;left:50%;
- transform:translate(-50%,-50%);
- width:702px;
- }
- #bigbox {
- margin-top:-2px;
- padding:25px;
- background-color:#fff; /* box background color */
- border:1px solid #eee; /* box top, right, left border color */
- border-bottom:4px solid #EAEFEB; /* box bottom border color */
- border-radius:0px 10px 0px 10px;
- display:flex;
- }
- /*--------------------TOP LINKS--------------------*/
- #toplinks {
- z-index:2;
- }
- #toplinks a {
- display:inline-block;
- margin:0px 3px;
- min-width:60px;
- padding:4px 9px;
- background-color:#fff; /* top links background color */
- border-radius:10px 10px 0px 0px;
- border:1px solid #eee; /* top links border color */
- border-bottom:0px solid transparent;
- font-family:silkscreen;
- text-transform:uppercase;
- font-size:9px;
- color:#777; /* top links color */
- text-align:center;
- }
- #toplinks a:first-child {margin-left:0px;}
- /*--------------------LEFT--------------------*/
- #leftside {
- width:calc(180px + 30px + 2px);
- height:inherit;
- }
- /* sidebar image */
- .sbimg {
- width:calc(100% - 30px - 2px);
- height:auto;
- padding:15px;
- border:1px solid #f5f5f5; /* sidebar image border color */
- }
- /* info labels: underneath sidebar image */
- .sbinfo {
- margin-top:20px;
- font-size:9px;
- text-transform:uppercase;
- letter-spacing:1px;
- }
- .sbinfo name {
- margin-right:7px;
- padding:5px 9px;
- background-color:#f5f8f3; /* info labels background color */
- color:#555; /* info labels text color */
- }
- .sbinfo p {
- margin-block-start:1.2em;
- margin-block-end:1.2em;
- }
- .sbinfo p:last-child {margin-bottom:0px;}
- /*--------------------RIGHT--------------------*/
- #rightside {
- margin-left:20px;
- width:calc(100% - 180px - 30px - 2px - 20px);
- height:inherit;
- }
- /* main title of box */
- .maintitle {
- margin-top:calc(15px + 1px);
- font-family:quicksand;
- font-size:15px;
- text-transform:uppercase;
- letter-spacing:3px;
- color:#666; /* main title color */
- }
- /* main title underline / divider */
- .bar {
- margin-top:10px;
- margin-left:-20px;
- width:calc(100% + 20px);
- height:1px;
- background-color:#eee; /* main title underline color */
- }
- /* info labels table area */
- #table {
- margin-top:20px;
- font-size:9px;
- text-transform:uppercase;
- letter-spacing:1px;
- display:flex;
- }
- #table name {
- margin-right:7px;
- padding:5px 9px;
- background-color:#f5f8f3; /* info labels background color */
- color:#555; /* info labels text color */
- }
- #table p {
- margin-block-start:1.2em;
- margin-block-end:1.2em;
- }
- #table p:last-child {margin-bottom:0px;}
- /* info labels: left column */
- .stats-left {}
- /* info labels: right column */
- .stats-right {
- margin-left:20px; /* distance between left & right columns */
- }
- /* quote line */
- .quote {
- margin-top:20px;
- border-left:10px solid #DFE7E0; /* quote left border color */
- padding:8px 10px;
- background-color:#f5f7f6; /* quote left background color */
- font-family:silkscreen;
- text-transform:uppercase;
- font-size:9px;
- color:#555; /* quote left text color */
- border-radius:5px;
- }
- /* biography text section */
- .bio {
- margin-top:20px;
- text-align:justify;
- line-height:1.6em;
- overflow-x:hidden;
- /* delete the next 2 lines if you do not need a scrollbar */
- overflow-y:auto;
- padding-right:10px;
- /* you might need to adjust the next line if necessary */
- /* just play around with it until you get the perfect height :) */
- max-height:194px;
- }
- /* biography text section scrollbar */
- .bio::-webkit-scrollbar {
- height:13px;
- width:13px;
- background-color:#fff; /* scrollbar background color */
- }
- .bio::-webkit-scrollbar-thumb {
- background-color:#c2d1c4; /* ACTUAL scrollbar color */
- border-top:3px solid #fff; /* scrollbar background color */
- border-right:6px solid #fff; /* scrollbar background color */
- border-bottom:3px solid #fff; /* scrollbar background color */
- border-left:6px solid #fff; /* scrollbar background color */
- }
- .bio::-webkit-scrollbar-track {
- background-color:#fff;
- }
- .bio p:last-child {margin-bottom:0px;}
- .bio img {
- margin-left:50%;transform:translateX(-50%);
- width:100%;
- }
- /*--------------------BOTTOM LINKS--------------------*/
- #botlinks {
- margin-top:-3px;
- text-align:right;
- z-index:2;
- }
- #botlinks a {
- display:inline-block;
- margin:0px 3px;
- min-width:60px;
- padding:4px 9px;
- background-color:#EAEFEB; /* bottom custom links background color */
- border-radius:0px 0px 10px 10px;
- border:1px solid transparent;
- font-family:silkscreen;
- text-transform:uppercase;
- font-size:9px;
- color:#777; /* bottom custom links color */
- text-align:center;
- }
- #botlinks a:last-child {margin-right:0px;}
- /*--------------------MUSIC PLAYER--------------------*/
- #glenjamin {
- position:absolute;
- left:100%;
- margin-top:calc(-36px - 29px);
- padding:12px;
- background-color:#eff3f0; /* music player background color */
- border-radius:0px 10px 10px 0px;
- line-height:1em;
- cursor:pointer;
- }
- .playy, .pausee {
- font-size:13px;
- color:#777; /* music player buttons color */
- z-index:2;
- }
- .pausee {
- display:none;
- font-size:9px;
- }
- </style>
- </head>
- <body>
- <div id="cont">
- <!----TOP CUSTOM LINKS---->
- <div id="toplinks">
- <a href="/">index</a>
- <a href="/ask">message</a>
- <a href="/archive">archive</a>
- <!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU :)-->
- <a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
- </div>
- <div id="bigbox">
- <div id="leftside">
- <!----SIDEBAR IMAGE---->
- <!--recommended dimensions: 180px by 282px-->
- <img class="sbimg" src="//66.media.tumblr.com/bd951156c22b90626e12706f89ba3227/tumblr_ph6cl5d9np1qg2f5co10_r1_400.png">
- <!--INFO LABELS: underneath sidebar image-->
- <div class="sbinfo">
- <name>name:</name>genji shimada
- <p>
- <name>occupation:</name>adventurer
- <p>
- <name>hometown:</name>hanamura
- </div>
- </div><!--leftside--><!--do not delete this line-->
- <div id="rightside">
- <!----MAIN TITLE---->
- <div class="maintitle">genji shimada</div>
- <div class="bar"></div>
- <div id="table">
- <!----INFO LABELS: left column---->
- <div class="stats-left">
- <name>alias:</name>sparrow
- <p>
- <name>difficulty:</name>☆☆☆
- <p>
- <name>likes:</name>gaming, ramen
- </div><!--stats-left--><!--do not delete this line-->
- <!----INFO LABELS: right column---->
- <div class="stats-right">
- <name>ultimate:</name>dragonblade
- <p>
- <name>mbti:</name>ISFP (<a title="introverted, observant, feeling, perception">+</a>)
- <p>
- <name>alignment:</name>lawful good (<a title="controversial opinion">?</a>)
- </div><!--stats-right--><!--do not delete this line-->
- </div><!--table--><!--do not delete this line-->
- <!--quote label line-->
- <div class="quote">The heart of a man still beats inside of me.</div>
- <!----BIOGRAPHY TEXT SECTION---->
- <div class="bio">
- Welcome to your biography area! Write your heart out.
- <p>
- <blockquote>This is what a blockquote looks like.</blockquote>
- <b>This is what bolded text looks like.</b>
- <br>
- <i>This is what italicized text looks like.</i>
- <br>
- <u>This is what underlined text looks like.</u>
- <br>
- <a href="/">This is what a link looks like.</a>
- <p>
- <a href="//theme-hunter.tumblr.com/post/36665898985/cheat-sheet" target="_blank">Here's</a> a HTML cheat sheet to help you out.
- <p>
- <!--optional divider image-->
- <img style="width:70%" src="//66.media.tumblr.com/85c896705d42a0d36c7d33e217e75acf/tumblr_ph6cl5d9np1qg2f5co7_r2_1280.png">
- </div><!--bio--><!--do not delete this line-->
- </div><!--rightside--><!--do not delete this line-->
- </div><!--bigbox--><!--do not delete this line-->
- <!----BOTTOM CUSTOM LINKS---->
- <div id="botlinks">
- <a href="/">link 1</a>
- <a href="/">link 2</a>
- <a href="/">link 3</a>
- <a href="/">link 4</a>
- </div><!--botlinks-->
- <!----MUSIC PLAYER---->
- <!-- put the music name between the quotation marks of title="" -->
- <a id="glenjamin" title="This Silence is Mine (Chiptune cover by Emily Music)" onclick="kaishi();">
- <div class="playy">▷</div>
- <div class="pausee">⌷⌷</div>
- </a><!--glenjamin-->
- <!--music URL-->
- <!-- pls read: linktr.ee/direct_file_links -->
- <audio id="tune" src="https://rhizo.gitlab.io/nier/This_Silence_is_Mine.mp3" onended="restart();" type="audio"></audio>
- </div><!--cont--><!--do not delete this line-->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement