Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-----------------------------------------------------------------------
- Redirect Page [01]: Komorebi
- Made by glenthemes
- Initial release: 2020/05/20
- Last updated: 2026/03/07
- LATEST UPDATE:
- ❃ updated instructions
- TERMS OF USE:
- 1) Do not remove the credit.
- 2) Do not remove parts of the code without my permission.
- 3) Do not claim my codes as your own.
- 4) Do not use my works as base codes.
- 5) You may add widgets to my themes and pages.
- INSTALLATION & GUIDE:
- docs.google.com/document/d/18wRmcBsBUKIJvnddK97Dc1AyLppSaPqa6X-DTFLF9J4/edit?usp=sharing
- Customization pointers:
- 🍎🍎🍎🍎🍎🍎🍎 = places to edit
- Credits:
- glenthemes.tumblr.com/acnh-crd
- ------------------------------------------------------------------------>
- <!DOCTYPE html>
- <html 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:50,
- tip_fade_speed:0,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <link href="//fonts.googleapis.com/css?family=Nunito|Balsamiq+Sans" rel="stylesheet">
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
- <script src="//glen-themes.gitlab.io/redirect-pages/01/komorebi.js"></script>
- <!------------------------------------------------->
- <style type="text/css">
- /*--------------------TOOLTIPS--------------------*/
- #s-m-t-tooltip {
- padding:5px 10px;
- margin:20px;
- background-color:var(--Links-Blob-Background);
- border-radius:5px;
- font-family:nunito;
- font-size:calc(var(--Links-Font-Size) - 5px);
- text-transform:uppercase;
- letter-spacing:1px;
- color:var(--Links);
- z-index:99;
- max-width:40vw;
- }
- /*--------------------TUMBLR CONTROLS--------------------*/
- iframe#tumblr_controls, .iframe-controls--desktop {
- top:8px!important;
- right:40px!important;
- position:fixed!important;
- transform:scale(0.7,0.7);
- -webkit-transform:scale(0.7,0.7);
- -moz-transform:scale(0.7,0.7);
- -o-transform:scale(0.7,0.7);
- -ms-transform:scale(0.7,0.7);
- transform-origin:100% 0;
- -webkit-transform-origin:100% 0;
- -moz-transform-origin:100% 0;
- -o-transform-origin:100% 0;
- -ms-transform-origin:100% 0;
- z-index:99!important;
- }
- .glenjadot {
- position:fixed;
- display:flex;
- align-items:center;
- justify-content:center;
- top:0;margin-top:20px;
- right:0;margin-right:20px;
- width:12px;
- height:12px;
- border-radius:100%;
- border:1px solid var(--Links-Blob-Background);
- }
- .bloop {
- width:9px;
- height:9px;
- background:var(--Links-Blob-Background);
- border-radius:100%;
- }
- /*--------------------TEXT HIGHLIGHT--------------------*/
- ::selection {
- background:#BBD3FD;
- }
- ::-moz-selection {
- background:#BBD3FD;
- }
- /*--------------------BASICS--------------------*/
- body {
- background-attachment:fixed;
- font-family:Balsamiq Sans;
- line-height:1.6em;
- font-size:12px;
- text-align:left;
- }
- blockquote {
- padding-left:10px;
- margin-left:5px;
- border-left:1px solid;
- border-color:#aaa;
- margin:10px;
- }
- a {
- color:var(--Links);
- text-decoration:none;
- cursor:pointer;
- }
- pre, code {
- white-space:pre-wrap;
- }
- img {vertical-align:middle;}
- /*---------- CUSTOMIZATION OPTIONS ----------*/
- /*--🍎🍎🍎🍎🍎🍎🍎--*/
- body {
- background-color:#d69d80; /* background color edited here */
- }
- .background-image {
- display:none;
- position:fixed;
- top:0;left:0;
- width:100%;
- height:100%;
- /* background image is set here */
- background-image:url(https://static.tumblr.com/gtjt4bo/vu5s9jg34/acnh_fishing.png);
- /* put the url between brackets. do not remove semicolon */
- background-repeat:no-repeat;
- background-size:cover;
- z-index:-1;
- }
- /* ALL OTHER COLORS, SIZES ETC EDITED BELOW */
- /*--🍎🍎🍎🍎🍎🍎🍎--*/
- :root {
- /* clock [bottom left] */
- --Clock-Font-Size:15px;
- --Clock-Text:#fefae5;
- --Clock-Line:#fefae5;
- --Clock-Line-Gap:9px;
- --Weekday-Background:#fefae5;
- --Weekday-Padding:10px;
- --Weekday-Text:#3c3c3c;
- /* main cloud/bubble [center] */
- --Bubble-Width:380px;
- --Bubble-Height:120px;
- --Bubble-Background:#fefae5;
- --Bubble-Border:#f5dabd;
- --Bubble-Border-Size:15.5px;
- --Bubble-Font-Size:15px;
- --Bubble-Text:#35323c;
- --Typewriter-Speed:36; /* number ONLY. in milliseconds
- if don't want a typewriter effect,
- ctrl+F typewriter="yes" and change yes to no
- */
- /* cloud/bubble name [top left] */
- --Name-Font-Size:11px;
- --Name:#827562;
- --Name-Background:#fefae5;
- --Name-Padding:13px;
- --Name-Positioning-X:18px;
- --Name-Positioning-Y:-7px;
- /* popup-ish links blob box */
- --Links-Blob-Width:auto;
- --Links-Blob-Background:#ffebd2;
- --Links-Blob-Padding:18px;
- --Links-Cursor-Size:28px;
- --Links:#4e474a;
- --Links-Font-Size:13px;
- --Links-Bottom-Border:#fdc690;
- --Links-Spacing:0px;
- --Links-Blob-Position-X:-30px;
- --Links-Blob-Position-Y:-12px;
- /* custom links [bottom right] */
- --Corner-Links-Outer-Padding:7px;
- --Corner-Links-Background:#ffebd2;
- --Corner-Links-Symbol-Size:13px;
- --Corner-Links-Symbol-Color:#ffebd2;
- --Corner-Links-Symbol-Background:#4e474a;
- --Corner-Links-Symbol-Padding:5px;
- --Corner-Links-Symbol-Right-Gap:7px;
- --Corner-Links-Font-Size:12px;
- --Corner-Links-Text:#4e474a;
- --Corner-Links-Spacing:12px;
- --Corner-Links-Background-Hover:#6f5e68;
- --Corner-Links-Symbol-Hover:#6f5e68;
- --Corner-Links-Symbol-Background-Hover:#ffebd2;
- --Corner-Links-Text-Hover:#ffebd2;
- /* other */
- --Window-Margin-Bottom:52px;
- --Window-Margin-Sides:42px;
- }
- /*------------ CLOCK [BOTTOM LEFT] ------------*/
- .clock {
- display:none;
- position:fixed;
- bottom:0;margin-bottom:var(--Window-Margin-Bottom);
- left:0;margin-left:var(--Window-Margin-Sides);
- padding:0 3px;
- font-family:Balsamiq Sans!important;
- color:var(--Clock-Text);
- }
- .clock > * {
- margin:auto;
- }
- .timeandshit {
- padding:0 13px;
- font-size:calc(var(--Clock-Font-Size) + 5px);
- letter-spacing:2px;
- text-align:center;
- }
- .am-pm {
- font-size:var(--Clock-Font-Size);
- }
- .divider {
- margin:var(--Clock-Line-Gap) auto;
- width:100%;
- height:2px;
- border-radius:2px;
- background:var(--Clock-Line);
- }
- .date {
- display:flex;
- align-items:center;
- justify-content:center;
- padding:0 3px;
- }
- .weekday {
- display:inline-block;
- padding:var(--Weekday-Padding);
- background:var(--Weekday-Background);
- border-radius:var(--Clock-Font-Size);
- font-size:calc(var(--Clock-Font-Size) - 1px);
- color:var(--Weekday-Text);
- line-height:.9em;
- }
- .monthday {
- margin-left:10px;
- font-size:calc(var(--Clock-Font-Size) + 1px);
- }
- /*------------ BLOB CLOUDS ------------*/
- #cent-a {
- position:fixed;
- bottom:0;left:0;right:0;
- text-align:center;
- z-index:-1;
- }
- #cent-b {
- display:inline-block;
- }
- .thestuff {
- position:relative;
- margin-bottom:var(--Window-Margin-Bottom);
- animation:blorg 0.9s linear 0s;
- }
- .blobsquad {
- position:relative;
- margin-bottom:-5px;
- }
- /* top bubble */
- .bub-top {
- margin-bottom:calc(var(--Bubble-Height) * -0.6);
- width:var(--Bubble-Width);
- height:var(--Bubble-Height);
- background:var(--Bubble-Border);
- clip-path:ellipse(50% 50% at 50% 50%);
- display:flex;
- align-items:center;
- justify-content:center;
- }
- .lemon {
- width:calc(var(--Bubble-Width) - (var(--Bubble-Border-Size) * 2));
- height:calc(var(--Bubble-Height) - (var(--Bubble-Border-Size) * 2));
- background:var(--Bubble-Background);
- clip-path:ellipse(50% 50% at 50% 50%);
- }
- /* bottom bubble */
- .bub-bot {
- margin-left:auto;
- margin-right:10px;
- width:calc(var(--Bubble-Width) * 0.9);
- height:calc(var(--Bubble-Height) * 0.9);
- background:var(--Bubble-Border);
- clip-path:ellipse(50% 50% at 50% 50%);
- display:flex;
- justify-content:center;
- }
- .cheese {
- margin-top:-5px;
- margin-left:-3px;
- width:calc((var(--Bubble-Width) * 0.9) - (var(--Bubble-Border-Size) * 1.5));
- height:calc((var(--Bubble-Height) * 0.9) - var(--Bubble-Border-Size) + 5px);
- background:var(--Bubble-Background);
- clip-path:ellipse(50% 50% at 50% 50%);
- }
- /* bubble text container */
- .deja {
- position:absolute;
- top:0;margin-top:calc(var(--Bubble-Border-Size) * 2);
- margin-left:calc(var(--Bubble-Border-Size) * 5);
- width:calc(var(--Bubble-Width) - (var(--Bubble-Border-Size) * 10));
- height:calc((var(--Bubble-Height) * 1.3) - (var(--Bubble-Border-Size) * 4));
- display:table;
- overflow:hidden;
- }
- .vu {
- display:table-cell;
- vertical-align:middle;
- }
- /* bubble text */
- .bub-text {
- font-size:var(--Bubble-Font-Size);
- color:var(--Bubble-Text);
- line-height:1.7em;
- animation:appear 1s linear 0s;
- }
- .text-area {
- position:absolute;
- visibility:hidden;
- }
- .nt {
- position:relative;
- visibility:visible;
- }
- /* name/badge (top left) */
- .potatoe {
- position:relative;
- text-align:left;
- z-index:1;
- }
- .name-badge {
- position:absolute;
- margin-left:var(--Name-Positioning-X);
- bottom:0;margin-bottom:calc(((var(--Name-Font-Size) + var(--Name-Padding)) * -1) + var(--Name-Positioning-Y));
- padding:var(--Name-Padding);
- background:var(--Name-Background);
- clip-path:ellipse(50% 85% at 50% 50%);
- font-size:var(--Name-Font-Size);
- text-transform:uppercase;
- letter-spacing:1px;
- word-spacing:1px;
- color:var(--Name);
- line-height:1.05em;
- transform:rotate(-12deg);
- }
- /*------------ [POPUP-ish] LINKS ------------*/
- .links-blob {
- display:none;
- position:absolute;
- bottom:0;
- margin-bottom:calc((var(--Bubble-Height) + (var(--Bubble-Border-Size) * 1)) + var(--Links-Blob-Position-Y));
- right:0;margin-right:calc((var(--Bubble-Border-Size) * -1) + var(--Links-Blob-Position-X));
- width:var(--Links-Blob-Width);
- padding:var(--Links-Blob-Padding);
- background:var(--Links-Blob-Background);
- border-radius:var(--Links-Blob-Padding);
- z-index:2;
- animation:blorg 0.5s linear 0s;
- }
- @keyframes blorg {
- 0% {
- opacity:0;
- }
- 25% {
- opacity:1;
- transform:scale(1.069);
- }
- 69% {
- opacity:1;
- transform:scale(1);
- }
- }
- .one-link {
- display:flex;
- align-items:center;
- margin:var(--Links-Spacing) 0;
- animation:appear .7s linear 0s;
- }
- @keyframes appear {
- 0% {
- opacity:0;
- }
- 69% {
- opacity:0;
- }
- 100% {
- opacity:1;
- }
- }
- .one-link:first-of-type {margin-top:0;}
- .one-link:last-of-type {margin-bottom:0;}
- .c-hold {
- margin-top:2px;
- margin-left:calc((var(--Links-Blob-Padding) + (var(--Links-Cursor-Size) / 1.5)) * -1);
- margin-right:calc(var(--Links-Cursor-Size) * 0.5);
- width:calc(var(--Links-Cursor-Size) * 1.25);
- }
- .cursor {
- width:var(--Links-Cursor-Size);
- opacity:0;
- }
- @keyframes point {
- 50% {
- margin-left:calc(var(--Links-Cursor-Size) * 0.269);
- }
- }
- .one-link:hover .cursor {
- opacity:1;
- animation:point 0.69s linear 0s infinite;
- }
- .one-link span {
- padding:0 2px;
- margin-right:calc(var(--Links-Cursor-Size) * 0.5);
- font-size:var(--Links-Font-Size);
- color:var(--Links);
- line-height:1.7em;
- box-shadow:transparent 0px calc((var(--Links-Font-Size) * 1.7) / -2) 0px inset;
- }
- .one-link:hover span {
- box-shadow:var(--Links-Bottom-Border) 0px calc((var(--Links-Font-Size) * 1.7) / -2) 0px inset;
- }
- .one-link, .one-link span, .one-link:hover {
- -webkit-transition: box-shadow 0.25s ease-in-out;
- -moz-transition: box-shadow 0.25s ease-in-out;
- -o-transition: box-shadow 0.25s ease-in-out;
- }
- /*------------ CUSTOM LINKS [BOTTOM RIGHT] ------------*/
- .corner-links {
- position:fixed;
- bottom:0;margin-bottom:var(--Window-Margin-Bottom);
- right:0;margin-right:var(--Window-Margin-Sides);
- display:flex;
- align-items:center;
- }
- .one-cornerlink {
- display:flex;
- align-items:center;
- margin-left:var(--Corner-Links-Spacing);
- padding:var(--Corner-Links-Outer-Padding) calc(var(--Corner-Links-Outer-Padding) * 1.5);
- background:var(--Corner-Links-Background);
- border-radius:var(--Corner-Links-Outer-Padding);
- line-height:1em;
- }
- .one-cornerlink, .one-cornerlink > *, .one-cornerlink > *:hover {
- -webkit-transition: all 0.1s ease-in-out;
- -moz-transition: all 0.1s ease-in-out;
- -o-transition: all 0.1s ease-in-out;
- }
- .one-cornerlink:hover {
- background:var(--Corner-Links-Background-Hover);
- }
- .one-cornerlink i {
- margin-right:var(--Corner-Links-Symbol-Right-Gap);
- padding:var(--Corner-Links-Symbol-Padding);
- background:var(--Corner-Links-Symbol-Background);
- border-radius:100%;
- font-size:var(--Corner-Links-Symbol-Size);
- width:var(--Corner-Links-Symbol-Size);
- height:var(--Corner-Links-Symbol-Size);
- color:var(--Corner-Links-Symbol-Color);
- }
- .one-cornerlink:hover i {
- color:var(--Corner-Links-Symbol-Hover);
- background:var(--Corner-Links-Symbol-Background-Hover);
- }
- .one-cornerlink span, .one-cornerlink span > * {
- font-size:var(--Corner-Links-Font-Size);
- color:var(--Corner-Links-Text);
- }
- .one-cornerlink:hover span, .one-cornerlink:hover span > * {
- color:var(--Corner-Links-Text-Hover);
- }
- </style>
- </head>
- <body>
- <!-- background image is NOT edited here -->
- <!-- look for .background-image (go up) -->
- <div class="background-image"></div>
- <a class="glenjadot" href="//glenthemes.tumblr.com" title="coded by glenthemes">
- <div class="bloop"></div>
- </a>
- <div class="clock">
- <div class="timeandshit">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!----------- TIME ----------->
- <!--
- Step 1: Go to 24timezones.com/clock-widget/text
- Step 2: choose your time zone
- Step 3: DO NOT touch the other options
- Step 4: in the "your website" box, just type google.com
- Step 5: click "Get Code"
- Step 6: click "Copy to Clipboard"
- Step 7: Replace the following. Done!
- Note: if you use clocks from any other sites, they may break
- -->
- <!--paste start point-->
- <a href="//24timezones.com/London/time" style="text-decoration: none" class="clock24" id="tz24-1772922865-c1136-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMCIsInNob3dzZWNvbmRzIjoiMCIsInNob3d0aW1lem9uZSI6IjEiLCJ0eXBlIjoiZCIsImxhbmciOiJlbiJ9" title="time zone London" target="_blank" rel="nofollow">London</a>
- <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
- <!--paste end point-->
- </div><!--do not delete this line-->
- <div class="divider"></div>
- <div class="date">
- <div class="weekday">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!----------- WEEKDAY / DAY OF WEEK ----------->
- <!--
- Step 1: Go to + REFRESH 24timezones.com/clock-widget/text
- Step 2: choose your time zone
- Step 3: for "Show date", choose "Yes, show date"
- Step 4: DO NOT touch the other options
- Step 5: in the "your website" box, just type google.com
- Step 6: click "Get Code"
- Step 7: click "Copy to Clipboard"
- Step 8: Replace the following. Done!
- Note: you CANNOT use the same code as you pasted above
- (the clock will disappear if you do)
- you must refresh the clock website and generate a new code
- -->
- <!--paste start point-->
- <a href="//24timezones.com/London/time" style="text-decoration: none" class="clock24" id="tz24-1772921834-c1136-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMSIsInNob3dzZWNvbmRzIjoiMCIsInNob3d0aW1lem9uZSI6IjEiLCJ0eXBlIjoiZCIsImxhbmciOiJlbiJ9" title="London clock" target="_blank" rel="nofollow">Current time in London</a>
- <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
- <!--paste end point-->
- </div><!--do not delete this line-->
- <div class="monthday">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!----------- DATE NUMBER + MONTH ----------->
- <!--
- Step 1: Go to + REFRESH 24timezones.com/clock-widget/text
- Step 2: choose your time zone
- Step 3: for "Show date", choose "Yes, show date"
- Step 4: DO NOT touch the other options
- Step 5: in the "your website" box, just type google.com
- Step 6: click "Get Code"
- Step 7: click "Copy to Clipboard"
- Step 8: Replace the following. Done!
- Note: you CANNOT use the same code as you pasted above
- (the clock will disappear if you do)
- you must refresh the clock website and generate a new code
- -->
- <!--paste start point-->
- <a href="//24timezones.com/London/time" style="text-decoration: none" class="clock24" id="tz24-1772922603-c1136-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMSIsInNob3dzZWNvbmRzIjoiMCIsInNob3d0aW1lem9uZSI6IjEiLCJ0eXBlIjoiZCIsImxhbmciOiJlbiJ9" title="London current time" target="_blank" rel="nofollow">London</a>
- <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
- <!--paste end point-->
- </div><!--do not delete this line-->
- </div><!--date-->
- </div><!--clock-->
- <div id="cent-a">
- <div id="cent-b">
- <div class="thestuff">
- <div class="potatoe">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!---------- YOUR NAME ---------->
- <!-- (topleft of cloud -->
- <div class="name-badge">your name</div>
- </div>
- <div class="blobsquad">
- <div class="bub-top">
- <div class="lemon"></div>
- </div>
- <div class="bub-bot">
- <div class="cheese"></div>
- </div>
- <div class="deja">
- <div class="vu">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!---------- MAIN CLOUD/BUBBLE TEXT ---------->
- <!--
- Use <br> for a line break
- To disable typewriter effect, change "yes" to "no"
- Note: you may not see the text in the tumblr preview.
- open your blog page in a new tab to see the changes
- -->
- <div class="text-area bub-text" typewriter="yes">This villager has moved!<br>What would you like to do?
- </div><!--do not delete this line-->
- <div id="feed" class="bub-text"></div>
- </div>
- </div>
- </div><!--blobsquad-->
- <div class="links-blob">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!---------- CLOUD/BUBBLE LINKS ---------->
- <!--
- link url goes between quotes marks of href=""
- display text goes between <span> </span>
- -->
- <!--start one link-->
- <a class="one-link" href="">
- <div class="c-hold"><img class="cursor" src="https://static.tumblr.com/gtjt4bo/s82s9jg35/acnh_cursor.png"></div>
- <span>Blob link 1.</span>
- </a>
- <!--end one link-->
- <!--start one link-->
- <a class="one-link" href="">
- <div class="c-hold"><img class="cursor" src="https://static.tumblr.com/gtjt4bo/s82s9jg35/acnh_cursor.png"></div>
- <span>Blob link 2.</span>
- </a>
- <!--end one link-->
- </div><!--links-blob-->
- </div><!--thestuff-->
- </div><!--bubble-end1-->
- </div><!--bubble-end2-->
- <div class="corner-links">
- <!--🍎🍎🍎🍎🍎🍎🍎-->
- <!-------- CUSTOM LINKS [BOTTOM RIGHT] -------->
- <!--
- instructions for changing symbols/icons:
- Step 1: go to fontawesome.com/v5/search?ic=free-collection
- Step 2: search for an icon you want
- Step 3: click it; you will see something that starts with <i class
- Step 4: click it to copy, then paste it below
- link url goes between quotes marks of href=""
- -->
- <!--start one link-->
- <a class="one-cornerlink" href="">
- <i class="fab fa-steam-symbol"></i>
- <span>Link text</span>
- </a>
- <!--end one link-->
- <!--start one link-->
- <a class="one-cornerlink" href="">
- <i class="fab fa-discord"></i>
- <span>Link text</span>
- </a>
- <!--end one link-->
- </div><!--do not delete this line-->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment