Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!--
- sugar on the rim + tw (gif pack page #3) by fakehelper
- credits
- - google fonts
- - adobe fonts
- - honeybee icon font
- - gradient background by shudesigns
- - tumblr controls by cyantists
- colors
- - gradient: #c1ddee,#a9d7f4
- - blue: #3467eb
- - pink: #da9698
- png
- - use ctrl+f to find png
- - should be 150x200
- -->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link href="https://static.tumblr.com/51fnf0s/BCoprzst5/style-my-tooltips.css" rel="stylesheet" type="text/css" />
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="https://static.tumblr.com/51fnf0s/lKGprzsse/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:300,
- tip_fade_speed:300,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <!--- fonts --->
- <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
- <link rel="stylesheet" href="https://use.typekit.net/ipc6xne.css">
- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Karla:400,700|Lato:400,700|Open+Sans:400,700|Roboto:400,700" />
- <style type="text/css">
- /* CHANGE THEME COLORS HERE */
- :root {
- --bg-color: #f1efef;
- --light-txt-color: #fff;
- --dark-txt-color: #222222;
- --accent: #da9698;
- --accent-two: #3467eb;
- --about-bg-color: #fff;
- /* CHANGE GIF SIZES HERE */
- --gif-width: 245px;
- --gif-height: 160px;
- --gif-icon-width: 100px;
- --gif-icon-height: 100px;
- --tw-background-color: #3467eb;
- /* if using gradient bg, change colors here */
- --gradient-colors: #f1efef,#f6f6f6,#ffffff
- }
- /* tumblr controls by cyantists */
- iframe.tmblr-iframe {
- z-index:99999999999999!important;
- top:0!important;
- right:0!important;
- opacity:0.4;
- /* delete invert(1) from here */
- filter:invert(1) contrast(150%);
- -webkit-filter:invert(1) contrast(150%);
- -o-filter:invert(1) contrast(150%);
- -moz-filter:invert(1) contrast(150%);
- -ms-filter:invert(1) contrast(150%);
- /* to here if your blog has a dark background */
- transform:scale(0.65);
- transform-origin:100% 0;
- -webkit-transform:scale(0.65);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.65);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.65);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.65);
- -ms-transform-origin:100% 0;}
- iframe.tmblr-iframe:hover {
- opacity:0.6!important;}
- #s-m-t-tooltip{
- /* basic */
- max-width:300px;
- z-index:10;
- padding:5px;
- background:#222;
- font-family:'karla';
- font-size:11px;
- text-transform:uppercase;
- color:var(--light-txt-color);
- border:none;
- box-shadow:none;
- }
- /* Scrollbar styles */
- ::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- }
- ::-webkit-scrollbar-track {
- border-radius: 5px;
- width: 2px;
- border: none;
- background-color:none;
- }
- ::-webkit-scrollbar-thumb {
- background-color: var(--accent);
- border-radius: 10px;
- }
- ::-webkit-scrollbar-thumb:hover {
- background: #fff;
- }
- body {
- color:var(--light-txt-color);
- overflow:hidden;
- }
- #background{
- position:fixed;
- top:0px;
- left:0px;
- width:100%;
- height:100%;
- z-index:-9999;
- background: var(--bg-color);
- /* change gradient here! on all of these guys tho bc they're for diff browsers */
- background: -webkit-linear-gradient(#c1ddee,#a9d7f4);
- background: -o-linear-gradient(#c1ddee,#a9d7f4);
- background: -moz-linear-gradient(#c1ddee,#a9d7f4);
- background: linear-gradient(#c1ddee,#a9d7f4);
- overflow:none;
- }
- p {
- color:var(--light-txt-color);
- font-family:'karla';
- font-size:12px;}
- a, b {
- color:var(--accent);
- text-decoration:none;
- font-weight:bold;}
- #berry {
- width:150px;
- height:200px;
- background:none;
- margin-left:75px;
- z-index:1;
- position:absolute;
- margin-top:-30px;
- border-radius:10px;
- }
- #fruit {
- width:140px;
- height:140px;
- background-color:var(--accent);
- margin-left:80px;
- margin-top:30px;
- border-radius:10px;
- z-index:99999;
- }
- #treetop {
- top:20%;
- left:45px;
- padding-bottom:0px;
- width:300px;
- height:500px;
- text-align;center;
- position:fixed;
- z-index:9999;
- }
- #treetop h1 {
- font-family: 'ohno-blazeface', sans-serif;
- font-weight: 700;
- font-style: normal;
- color:var(--accent-two);
- font-size:30px;
- margin-top:5px;
- margin-bottom:-10px;
- line-height:30px;
- text-transform:uppercase;
- letter-spacing:1px;
- z-index:1;
- }
- #treetop h2 {
- height:20px;
- color:var(--dark-txt-color);
- font-family:'karla';
- font-style:italic;
- font-weight:bold;
- font-size:13px;
- line-height:20px;
- text-transform:uppercase;
- margin-bottom:10px;
- border-radius:50px;
- }
- .roots p {
- padding:10px;
- color:var(--dark-txt-color);
- height:auto;
- width:auto;
- background-color:var(--about-bg-color);
- border-radius:10px;
- }
- /* container */
- #trunk {
- width:75%;
- height:90%;
- margin-top:25px;
- right:1.5%;
- padding:0px, 0px, -50px, 0px;
- text-align;center;
- display:inline-block;
- position:fixed;
- overflow:scroll;
- }
- #trunk img {
- padding-right:4px;
- padding-bottom:1px;
- }
- /* trigger warning gifs */
- a.tw {
- position: relative;
- width:100%;
- height:100%;
- text-decoration: none !important;
- text-align: center;
- }
- a.tw::after {
- content: attr(span);
- position: absolute;
- left: 0px;
- top: -147px;
- width: calc(var(--gif-width) - 2px);
- height:calc(var(--gif-height) / 2 + 9px);
- padding:1px;
- padding-top:70px;
- background: var(--tw-background-color);
- text-decoration: none !important;
- color:var(--light-txt-color);
- font-family:'lora';
- font-size:13px;
- line-height:20px;
- opacity: 1;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- -o-transition: 0.5s;
- -ms-transition: 0.5s;
- }
- a.tw:hover::after, a.tw:focus::after {
- opacity: 0;
- }
- a.tw-icon {
- position: relative;
- width:var(--gif-icon-width);
- height:var(--gif-icon-height);
- text-decoration: none !important;
- text-align: center;
- }
- a.tw-icon::after {
- content: attr(span);
- position: absolute;
- left: 3px;
- top: -87px;
- width: calc(var(--gif-icon-width) - 1px);
- height:calc(var(--gif-icon-height) - 30px);
- padding-right:1px;
- padding-top:30px;
- background: var(--tw-background-color);
- text-decoration: none !important;
- color:var(--light-txt-color);
- font-family:'lora';
- font-size:11px;
- line-height:20px;
- opacity: 1;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- -o-transition: 0.5s;
- -ms-transition: 0.5s;
- }
- a.tw-icon:hover::after, a.tw-icon:focus::after {
- opacity: 0;
- }
- /* episode titles */
- .branch {
- width:300px;
- height:28px;
- background-color:var(--accent);
- margin-bottom:20px;
- border-radius:50px;
- }
- .branch h3{
- color:var(--light-txt-color);
- padding-top:4px;
- font-family:'karla';
- font-size:13px;
- line-height:20px;
- font-weight:bold;
- text-transform:uppercase;
- }
- .branch h3:before {
- content:'\eb9d'; /* change icon here for footage/episode titles using honeybee font */
- font-family:'honeybee';
- font-size:12px;
- line-height:12px;
- font-weight:normal;
- padding-right:6px;
- padding-top:4px;
- }
- /* dont u do it */
- .credit {
- font:'honeybee';
- font-size:16px;
- bottom:1%;
- right:1%;
- position:fixed;
- z-index:111
- }
- .credit a {
- color:var(--accent);
- }
- .credit a:hover {
- color:var(--light-txt-color);
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s;
- }
- </style>
- </head>
- <body>
- <div class="credit"><a class="th th-leaf-1-o" title="page theme by fakehelper" href="https://fakehelper.tumblr.com/"></a></div><!--don't touch this pls it took me forever like plS donut do it-->
- <div id="background"></div>
- </div>
- <div id="treetop">
- <div id="berry"><img src="https://placehold.it/150X200"/></div><!-- insert png here! -->
- <div id="fruit"></div>
- <center><h1>Faceclaim Name</h1>
- <h2>• Footage (Year) •</h2>
- <div class="roots">
- <p>Sidebar info here.
- </p>
- </center>
- </div>
- </div>
- <div id="trunk"><center>
- <div class="branch"><h3>Episode Title: #000 gifs</h3></div>
- <img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><a class="tw" span="tw: trigger warning" target="blank"><img src="https://placehold.co/245x160" alt="image"></a><img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><img src="https://placehold.co/245x160" alt="image"><a class="tw" span="tw: trigger warning" target="blank"><img src="https://placehold.co/245x160" alt="image"></a><img src="https://placehold.co/245x160" alt="image">
- </p>
- </center>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement