glenthemes

Redirect Page [01]: Komorebi

May 20th, 2020 (edited)
6,315
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.90 KB | None | 0 0
  1. <!-----------------------------------------------------------------------
  2. Redirect Page [01]: Komorebi
  3. Made by glenthemes
  4.  
  5. Initial release: 2020/05/20
  6. Last updated: 2026/03/07
  7.  
  8. LATEST UPDATE:
  9. ❃ updated instructions
  10.  
  11. TERMS OF USE:
  12. 1) Do not remove the credit.
  13. 2) Do not remove parts of the code without my permission.
  14. 3) Do not claim my codes as your own.
  15. 4) Do not use my works as base codes.
  16. 5) You may add widgets to my themes and pages.
  17.  
  18. INSTALLATION & GUIDE:
  19. docs.google.com/document/d/18wRmcBsBUKIJvnddK97Dc1AyLppSaPqa6X-DTFLF9J4/edit?usp=sharing
  20.  
  21. Customization pointers:
  22. 🍎🍎🍎🍎🍎🍎🍎 = places to edit
  23.  
  24. Credits:
  25. glenthemes.tumblr.com/acnh-crd
  26. ------------------------------------------------------------------------>
  27.  
  28. <!DOCTYPE html>
  29. <html lang="en">
  30.  
  31. <head>
  32.  
  33. <title>{Title}</title>
  34.  
  35. <link rel="shortcut icon" href="{Favicon}">
  36.  
  37. <!--------------------JAVASCRIPTS-------------------->
  38. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  39. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  40. <script>
  41. (function($){
  42. $(document).ready(function(){
  43. $("a[title]").style_my_tooltips({
  44. tip_follows_cursor:true,
  45. tip_delay_time:50,
  46. tip_fade_speed:0,
  47. attribute:"title"
  48. });
  49. });
  50. })(jQuery);
  51. </script>
  52.  
  53. <link href="//fonts.googleapis.com/css?family=Nunito|Balsamiq+Sans" rel="stylesheet">
  54.  
  55. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
  56.  
  57. <script src="//glen-themes.gitlab.io/redirect-pages/01/komorebi.js"></script>
  58.  
  59. <!------------------------------------------------->
  60.  
  61. <style type="text/css">
  62.  
  63. /*--------------------TOOLTIPS--------------------*/
  64. #s-m-t-tooltip {
  65. padding:5px 10px;
  66. margin:20px;
  67. background-color:var(--Links-Blob-Background);
  68. border-radius:5px;
  69. font-family:nunito;
  70. font-size:calc(var(--Links-Font-Size) - 5px);
  71. text-transform:uppercase;
  72. letter-spacing:1px;
  73. color:var(--Links);
  74. z-index:99;
  75. max-width:40vw;
  76. }
  77.  
  78. /*--------------------TUMBLR CONTROLS--------------------*/
  79. iframe#tumblr_controls, .iframe-controls--desktop {
  80. top:8px!important;
  81. right:40px!important;
  82. position:fixed!important;
  83.  
  84. transform:scale(0.7,0.7);
  85. -webkit-transform:scale(0.7,0.7);
  86. -moz-transform:scale(0.7,0.7);
  87. -o-transform:scale(0.7,0.7);
  88. -ms-transform:scale(0.7,0.7);
  89.  
  90. transform-origin:100% 0;
  91. -webkit-transform-origin:100% 0;
  92. -moz-transform-origin:100% 0;
  93. -o-transform-origin:100% 0;
  94. -ms-transform-origin:100% 0;
  95. z-index:99!important;
  96. }
  97.  
  98. .glenjadot {
  99. position:fixed;
  100. display:flex;
  101. align-items:center;
  102. justify-content:center;
  103. top:0;margin-top:20px;
  104. right:0;margin-right:20px;
  105. width:12px;
  106. height:12px;
  107. border-radius:100%;
  108. border:1px solid var(--Links-Blob-Background);
  109. }
  110.  
  111. .bloop {
  112. width:9px;
  113. height:9px;
  114. background:var(--Links-Blob-Background);
  115. border-radius:100%;
  116. }
  117.  
  118. /*--------------------TEXT HIGHLIGHT--------------------*/
  119. ::selection {
  120. background:#BBD3FD;
  121. }
  122.  
  123. ::-moz-selection {
  124. background:#BBD3FD;
  125. }
  126.  
  127. /*--------------------BASICS--------------------*/
  128. body {
  129. background-attachment:fixed;
  130. font-family:Balsamiq Sans;
  131. line-height:1.6em;
  132. font-size:12px;
  133. text-align:left;
  134. }
  135.  
  136. blockquote {
  137. padding-left:10px;
  138. margin-left:5px;
  139. border-left:1px solid;
  140. border-color:#aaa;
  141. margin:10px;
  142. }
  143.  
  144. a {
  145. color:var(--Links);
  146. text-decoration:none;
  147. cursor:pointer;
  148. }
  149.  
  150. pre, code {
  151. white-space:pre-wrap;
  152. }
  153.  
  154. img {vertical-align:middle;}
  155.  
  156. /*---------- CUSTOMIZATION OPTIONS ----------*/
  157. /*--🍎🍎🍎🍎🍎🍎🍎--*/
  158.  
  159. body {
  160. background-color:#d69d80; /* background color edited here */
  161. }
  162.  
  163. .background-image {
  164. display:none;
  165. position:fixed;
  166. top:0;left:0;
  167. width:100%;
  168. height:100%;
  169.  
  170. /* background image is set here */
  171. background-image:url(https://static.tumblr.com/gtjt4bo/vu5s9jg34/acnh_fishing.png);
  172. /* put the url between brackets. do not remove semicolon */
  173.  
  174. background-repeat:no-repeat;
  175. background-size:cover;
  176. z-index:-1;
  177. }
  178.  
  179. /* ALL OTHER COLORS, SIZES ETC EDITED BELOW */
  180. /*--🍎🍎🍎🍎🍎🍎🍎--*/
  181.  
  182. :root {
  183.  
  184. /* clock [bottom left] */
  185. --Clock-Font-Size:15px;
  186. --Clock-Text:#fefae5;
  187. --Clock-Line:#fefae5;
  188. --Clock-Line-Gap:9px;
  189. --Weekday-Background:#fefae5;
  190. --Weekday-Padding:10px;
  191. --Weekday-Text:#3c3c3c;
  192.  
  193. /* main cloud/bubble [center] */
  194. --Bubble-Width:380px;
  195. --Bubble-Height:120px;
  196. --Bubble-Background:#fefae5;
  197. --Bubble-Border:#f5dabd;
  198. --Bubble-Border-Size:15.5px;
  199. --Bubble-Font-Size:15px;
  200. --Bubble-Text:#35323c;
  201. --Typewriter-Speed:36; /* number ONLY. in milliseconds
  202. if don't want a typewriter effect,
  203. ctrl+F typewriter="yes" and change yes to no
  204. */
  205.  
  206. /* cloud/bubble name [top left] */
  207. --Name-Font-Size:11px;
  208. --Name:#827562;
  209. --Name-Background:#fefae5;
  210. --Name-Padding:13px;
  211. --Name-Positioning-X:18px;
  212. --Name-Positioning-Y:-7px;
  213.  
  214. /* popup-ish links blob box */
  215. --Links-Blob-Width:auto;
  216. --Links-Blob-Background:#ffebd2;
  217. --Links-Blob-Padding:18px;
  218. --Links-Cursor-Size:28px;
  219. --Links:#4e474a;
  220. --Links-Font-Size:13px;
  221. --Links-Bottom-Border:#fdc690;
  222. --Links-Spacing:0px;
  223. --Links-Blob-Position-X:-30px;
  224. --Links-Blob-Position-Y:-12px;
  225.  
  226. /* custom links [bottom right] */
  227. --Corner-Links-Outer-Padding:7px;
  228. --Corner-Links-Background:#ffebd2;
  229.  
  230. --Corner-Links-Symbol-Size:13px;
  231. --Corner-Links-Symbol-Color:#ffebd2;
  232. --Corner-Links-Symbol-Background:#4e474a;
  233. --Corner-Links-Symbol-Padding:5px;
  234. --Corner-Links-Symbol-Right-Gap:7px;
  235. --Corner-Links-Font-Size:12px;
  236. --Corner-Links-Text:#4e474a;
  237. --Corner-Links-Spacing:12px;
  238.  
  239. --Corner-Links-Background-Hover:#6f5e68;
  240. --Corner-Links-Symbol-Hover:#6f5e68;
  241. --Corner-Links-Symbol-Background-Hover:#ffebd2;
  242. --Corner-Links-Text-Hover:#ffebd2;
  243.  
  244. /* other */
  245. --Window-Margin-Bottom:52px;
  246. --Window-Margin-Sides:42px;
  247. }
  248.  
  249. /*------------ CLOCK [BOTTOM LEFT] ------------*/
  250. .clock {
  251. display:none;
  252. position:fixed;
  253. bottom:0;margin-bottom:var(--Window-Margin-Bottom);
  254. left:0;margin-left:var(--Window-Margin-Sides);
  255. padding:0 3px;
  256. font-family:Balsamiq Sans!important;
  257. color:var(--Clock-Text);
  258. }
  259.  
  260. .clock > * {
  261. margin:auto;
  262. }
  263.  
  264. .timeandshit {
  265. padding:0 13px;
  266. font-size:calc(var(--Clock-Font-Size) + 5px);
  267. letter-spacing:2px;
  268. text-align:center;
  269. }
  270.  
  271. .am-pm {
  272. font-size:var(--Clock-Font-Size);
  273. }
  274.  
  275. .divider {
  276. margin:var(--Clock-Line-Gap) auto;
  277. width:100%;
  278. height:2px;
  279. border-radius:2px;
  280. background:var(--Clock-Line);
  281. }
  282.  
  283. .date {
  284. display:flex;
  285. align-items:center;
  286. justify-content:center;
  287. padding:0 3px;
  288. }
  289.  
  290. .weekday {
  291. display:inline-block;
  292. padding:var(--Weekday-Padding);
  293. background:var(--Weekday-Background);
  294. border-radius:var(--Clock-Font-Size);
  295. font-size:calc(var(--Clock-Font-Size) - 1px);
  296. color:var(--Weekday-Text);
  297. line-height:.9em;
  298. }
  299.  
  300. .monthday {
  301. margin-left:10px;
  302. font-size:calc(var(--Clock-Font-Size) + 1px);
  303. }
  304.  
  305. /*------------ BLOB CLOUDS ------------*/
  306. #cent-a {
  307. position:fixed;
  308. bottom:0;left:0;right:0;
  309. text-align:center;
  310. z-index:-1;
  311. }
  312.  
  313. #cent-b {
  314. display:inline-block;
  315. }
  316.  
  317. .thestuff {
  318. position:relative;
  319. margin-bottom:var(--Window-Margin-Bottom);
  320. animation:blorg 0.9s linear 0s;
  321. }
  322.  
  323. .blobsquad {
  324. position:relative;
  325. margin-bottom:-5px;
  326. }
  327.  
  328. /* top bubble */
  329. .bub-top {
  330. margin-bottom:calc(var(--Bubble-Height) * -0.6);
  331. width:var(--Bubble-Width);
  332. height:var(--Bubble-Height);
  333. background:var(--Bubble-Border);
  334. clip-path:ellipse(50% 50% at 50% 50%);
  335. display:flex;
  336. align-items:center;
  337. justify-content:center;
  338. }
  339.  
  340. .lemon {
  341. width:calc(var(--Bubble-Width) - (var(--Bubble-Border-Size) * 2));
  342. height:calc(var(--Bubble-Height) - (var(--Bubble-Border-Size) * 2));
  343. background:var(--Bubble-Background);
  344. clip-path:ellipse(50% 50% at 50% 50%);
  345. }
  346.  
  347. /* bottom bubble */
  348. .bub-bot {
  349. margin-left:auto;
  350. margin-right:10px;
  351. width:calc(var(--Bubble-Width) * 0.9);
  352. height:calc(var(--Bubble-Height) * 0.9);
  353. background:var(--Bubble-Border);
  354. clip-path:ellipse(50% 50% at 50% 50%);
  355. display:flex;
  356. justify-content:center;
  357. }
  358.  
  359. .cheese {
  360. margin-top:-5px;
  361. margin-left:-3px;
  362. width:calc((var(--Bubble-Width) * 0.9) - (var(--Bubble-Border-Size) * 1.5));
  363. height:calc((var(--Bubble-Height) * 0.9) - var(--Bubble-Border-Size) + 5px);
  364. background:var(--Bubble-Background);
  365. clip-path:ellipse(50% 50% at 50% 50%);
  366. }
  367.  
  368. /* bubble text container */
  369. .deja {
  370. position:absolute;
  371. top:0;margin-top:calc(var(--Bubble-Border-Size) * 2);
  372. margin-left:calc(var(--Bubble-Border-Size) * 5);
  373. width:calc(var(--Bubble-Width) - (var(--Bubble-Border-Size) * 10));
  374. height:calc((var(--Bubble-Height) * 1.3) - (var(--Bubble-Border-Size) * 4));
  375. display:table;
  376. overflow:hidden;
  377. }
  378.  
  379. .vu {
  380. display:table-cell;
  381. vertical-align:middle;
  382. }
  383.  
  384. /* bubble text */
  385. .bub-text {
  386. font-size:var(--Bubble-Font-Size);
  387. color:var(--Bubble-Text);
  388. line-height:1.7em;
  389. animation:appear 1s linear 0s;
  390. }
  391.  
  392. .text-area {
  393. position:absolute;
  394. visibility:hidden;
  395. }
  396.  
  397. .nt {
  398. position:relative;
  399. visibility:visible;
  400. }
  401.  
  402. /* name/badge (top left) */
  403. .potatoe {
  404. position:relative;
  405. text-align:left;
  406. z-index:1;
  407. }
  408.  
  409. .name-badge {
  410. position:absolute;
  411. margin-left:var(--Name-Positioning-X);
  412. bottom:0;margin-bottom:calc(((var(--Name-Font-Size) + var(--Name-Padding)) * -1) + var(--Name-Positioning-Y));
  413. padding:var(--Name-Padding);
  414. background:var(--Name-Background);
  415. clip-path:ellipse(50% 85% at 50% 50%);
  416. font-size:var(--Name-Font-Size);
  417. text-transform:uppercase;
  418. letter-spacing:1px;
  419. word-spacing:1px;
  420. color:var(--Name);
  421. line-height:1.05em;
  422. transform:rotate(-12deg);
  423. }
  424.  
  425. /*------------ [POPUP-ish] LINKS ------------*/
  426. .links-blob {
  427. display:none;
  428. position:absolute;
  429. bottom:0;
  430. margin-bottom:calc((var(--Bubble-Height) + (var(--Bubble-Border-Size) * 1)) + var(--Links-Blob-Position-Y));
  431. right:0;margin-right:calc((var(--Bubble-Border-Size) * -1) + var(--Links-Blob-Position-X));
  432. width:var(--Links-Blob-Width);
  433. padding:var(--Links-Blob-Padding);
  434. background:var(--Links-Blob-Background);
  435. border-radius:var(--Links-Blob-Padding);
  436. z-index:2;
  437. animation:blorg 0.5s linear 0s;
  438. }
  439.  
  440. @keyframes blorg {
  441. 0% {
  442. opacity:0;
  443. }
  444.  
  445. 25% {
  446. opacity:1;
  447. transform:scale(1.069);
  448. }
  449.  
  450. 69% {
  451. opacity:1;
  452. transform:scale(1);
  453. }
  454. }
  455.  
  456. .one-link {
  457. display:flex;
  458. align-items:center;
  459. margin:var(--Links-Spacing) 0;
  460. animation:appear .7s linear 0s;
  461. }
  462.  
  463. @keyframes appear {
  464. 0% {
  465. opacity:0;
  466. }
  467.  
  468. 69% {
  469. opacity:0;
  470. }
  471.  
  472. 100% {
  473. opacity:1;
  474. }
  475. }
  476.  
  477. .one-link:first-of-type {margin-top:0;}
  478. .one-link:last-of-type {margin-bottom:0;}
  479.  
  480. .c-hold {
  481. margin-top:2px;
  482. margin-left:calc((var(--Links-Blob-Padding) + (var(--Links-Cursor-Size) / 1.5)) * -1);
  483. margin-right:calc(var(--Links-Cursor-Size) * 0.5);
  484. width:calc(var(--Links-Cursor-Size) * 1.25);
  485. }
  486.  
  487. .cursor {
  488. width:var(--Links-Cursor-Size);
  489. opacity:0;
  490. }
  491.  
  492. @keyframes point {
  493. 50% {
  494. margin-left:calc(var(--Links-Cursor-Size) * 0.269);
  495. }
  496. }
  497.  
  498. .one-link:hover .cursor {
  499. opacity:1;
  500. animation:point 0.69s linear 0s infinite;
  501. }
  502.  
  503. .one-link span {
  504. padding:0 2px;
  505. margin-right:calc(var(--Links-Cursor-Size) * 0.5);
  506. font-size:var(--Links-Font-Size);
  507. color:var(--Links);
  508. line-height:1.7em;
  509. box-shadow:transparent 0px calc((var(--Links-Font-Size) * 1.7) / -2) 0px inset;
  510. }
  511.  
  512. .one-link:hover span {
  513. box-shadow:var(--Links-Bottom-Border) 0px calc((var(--Links-Font-Size) * 1.7) / -2) 0px inset;
  514. }
  515.  
  516. .one-link, .one-link span, .one-link:hover {
  517. -webkit-transition: box-shadow 0.25s ease-in-out;
  518. -moz-transition: box-shadow 0.25s ease-in-out;
  519. -o-transition: box-shadow 0.25s ease-in-out;
  520. }
  521.  
  522. /*------------ CUSTOM LINKS [BOTTOM RIGHT] ------------*/
  523. .corner-links {
  524. position:fixed;
  525. bottom:0;margin-bottom:var(--Window-Margin-Bottom);
  526. right:0;margin-right:var(--Window-Margin-Sides);
  527. display:flex;
  528. align-items:center;
  529. }
  530.  
  531. .one-cornerlink {
  532. display:flex;
  533. align-items:center;
  534. margin-left:var(--Corner-Links-Spacing);
  535. padding:var(--Corner-Links-Outer-Padding) calc(var(--Corner-Links-Outer-Padding) * 1.5);
  536. background:var(--Corner-Links-Background);
  537. border-radius:var(--Corner-Links-Outer-Padding);
  538. line-height:1em;
  539. }
  540.  
  541. .one-cornerlink, .one-cornerlink > *, .one-cornerlink > *:hover {
  542. -webkit-transition: all 0.1s ease-in-out;
  543. -moz-transition: all 0.1s ease-in-out;
  544. -o-transition: all 0.1s ease-in-out;
  545. }
  546.  
  547. .one-cornerlink:hover {
  548. background:var(--Corner-Links-Background-Hover);
  549. }
  550.  
  551. .one-cornerlink i {
  552. margin-right:var(--Corner-Links-Symbol-Right-Gap);
  553. padding:var(--Corner-Links-Symbol-Padding);
  554. background:var(--Corner-Links-Symbol-Background);
  555. border-radius:100%;
  556. font-size:var(--Corner-Links-Symbol-Size);
  557. width:var(--Corner-Links-Symbol-Size);
  558. height:var(--Corner-Links-Symbol-Size);
  559. color:var(--Corner-Links-Symbol-Color);
  560. }
  561.  
  562. .one-cornerlink:hover i {
  563. color:var(--Corner-Links-Symbol-Hover);
  564. background:var(--Corner-Links-Symbol-Background-Hover);
  565. }
  566.  
  567. .one-cornerlink span, .one-cornerlink span > * {
  568. font-size:var(--Corner-Links-Font-Size);
  569. color:var(--Corner-Links-Text);
  570. }
  571.  
  572. .one-cornerlink:hover span, .one-cornerlink:hover span > * {
  573. color:var(--Corner-Links-Text-Hover);
  574. }
  575.  
  576. </style>
  577.  
  578. </head>
  579.  
  580. <body>
  581.  
  582. <!-- background image is NOT edited here -->
  583. <!-- look for .background-image (go up) -->
  584. <div class="background-image"></div>
  585.  
  586. <a class="glenjadot" href="//glenthemes.tumblr.com" title="coded by glenthemes">
  587. <div class="bloop"></div>
  588. </a>
  589.  
  590.  
  591. <div class="clock">
  592. <div class="timeandshit">
  593.  
  594. <!--🍎🍎🍎🍎🍎🍎🍎-->
  595.  
  596. <!----------- TIME ----------->
  597. <!--
  598. Step 1: Go to 24timezones.com/clock-widget/text
  599. Step 2: choose your time zone
  600. Step 3: DO NOT touch the other options
  601. Step 4: in the "your website" box, just type google.com
  602. Step 5: click "Get Code"
  603. Step 6: click "Copy to Clipboard"
  604. Step 7: Replace the following. Done!
  605.  
  606. Note: if you use clocks from any other sites, they may break
  607. -->
  608.  
  609. <!--paste start point-->
  610. <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>
  611. <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
  612. <!--paste end point-->
  613.  
  614. </div><!--do not delete this line-->
  615.  
  616.  
  617. <div class="divider"></div>
  618.  
  619.  
  620. <div class="date">
  621. <div class="weekday">
  622.  
  623. <!--🍎🍎🍎🍎🍎🍎🍎-->
  624.  
  625. <!----------- WEEKDAY / DAY OF WEEK ----------->
  626. <!--
  627. Step 1: Go to + REFRESH 24timezones.com/clock-widget/text
  628. Step 2: choose your time zone
  629. Step 3: for "Show date", choose "Yes, show date"
  630. Step 4: DO NOT touch the other options
  631. Step 5: in the "your website" box, just type google.com
  632. Step 6: click "Get Code"
  633. Step 7: click "Copy to Clipboard"
  634. Step 8: Replace the following. Done!
  635.  
  636. Note: you CANNOT use the same code as you pasted above
  637. (the clock will disappear if you do)
  638. you must refresh the clock website and generate a new code
  639. -->
  640.  
  641. <!--paste start point-->
  642. <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>
  643. <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
  644. <!--paste end point-->
  645.  
  646. </div><!--do not delete this line-->
  647.  
  648.  
  649.  
  650. <div class="monthday">
  651. <!--🍎🍎🍎🍎🍎🍎🍎-->
  652.  
  653. <!----------- DATE NUMBER + MONTH ----------->
  654. <!--
  655. Step 1: Go to + REFRESH 24timezones.com/clock-widget/text
  656. Step 2: choose your time zone
  657. Step 3: for "Show date", choose "Yes, show date"
  658. Step 4: DO NOT touch the other options
  659. Step 5: in the "your website" box, just type google.com
  660. Step 6: click "Get Code"
  661. Step 7: click "Copy to Clipboard"
  662. Step 8: Replace the following. Done!
  663.  
  664. Note: you CANNOT use the same code as you pasted above
  665. (the clock will disappear if you do)
  666. you must refresh the clock website and generate a new code
  667. -->
  668.  
  669. <!--paste start point-->
  670. <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>
  671. <script type="text/javascript" src="//w.24timezones.com/l.js" async></script>
  672. <!--paste end point-->
  673.  
  674. </div><!--do not delete this line-->
  675. </div><!--date-->
  676. </div><!--clock-->
  677.  
  678.  
  679.  
  680.  
  681.  
  682. <div id="cent-a">
  683. <div id="cent-b">
  684. <div class="thestuff">
  685. <div class="potatoe">
  686.  
  687. <!--🍎🍎🍎🍎🍎🍎🍎-->
  688.  
  689. <!---------- YOUR NAME ---------->
  690. <!-- (topleft of cloud -->
  691. <div class="name-badge">your name</div>
  692.  
  693. </div>
  694.  
  695.  
  696.  
  697. <div class="blobsquad">
  698. <div class="bub-top">
  699. <div class="lemon"></div>
  700. </div>
  701. <div class="bub-bot">
  702. <div class="cheese"></div>
  703. </div>
  704.  
  705. <div class="deja">
  706. <div class="vu">
  707.  
  708. <!--🍎🍎🍎🍎🍎🍎🍎-->
  709.  
  710. <!---------- MAIN CLOUD/BUBBLE TEXT ---------->
  711. <!--
  712. Use <br> for a line break
  713.  
  714. To disable typewriter effect, change "yes" to "no"
  715.  
  716. Note: you may not see the text in the tumblr preview.
  717. open your blog page in a new tab to see the changes
  718. -->
  719.  
  720. <div class="text-area bub-text" typewriter="yes">This villager has moved!<br>What would you like to do?
  721.  
  722.  
  723. </div><!--do not delete this line-->
  724.  
  725. <div id="feed" class="bub-text"></div>
  726. </div>
  727. </div>
  728. </div><!--blobsquad-->
  729.  
  730.  
  731.  
  732.  
  733. <div class="links-blob">
  734.  
  735. <!--🍎🍎🍎🍎🍎🍎🍎-->
  736.  
  737. <!---------- CLOUD/BUBBLE LINKS ---------->
  738. <!--
  739. link url goes between quotes marks of href=""
  740.  
  741. display text goes between <span> </span>
  742. -->
  743.  
  744. <!--start one link-->
  745. <a class="one-link" href="">
  746. <div class="c-hold"><img class="cursor" src="https://static.tumblr.com/gtjt4bo/s82s9jg35/acnh_cursor.png"></div>
  747. <span>Blob link 1.</span>
  748. </a>
  749. <!--end one link-->
  750.  
  751. <!--start one link-->
  752. <a class="one-link" href="">
  753. <div class="c-hold"><img class="cursor" src="https://static.tumblr.com/gtjt4bo/s82s9jg35/acnh_cursor.png"></div>
  754. <span>Blob link 2.</span>
  755. </a>
  756. <!--end one link-->
  757.  
  758.  
  759. </div><!--links-blob-->
  760. </div><!--thestuff-->
  761. </div><!--bubble-end1-->
  762. </div><!--bubble-end2-->
  763.  
  764.  
  765.  
  766.  
  767. <div class="corner-links">
  768.  
  769. <!--🍎🍎🍎🍎🍎🍎🍎-->
  770.  
  771. <!-------- CUSTOM LINKS [BOTTOM RIGHT] -------->
  772.  
  773. <!--
  774. instructions for changing symbols/icons:
  775. Step 1: go to fontawesome.com/v5/search?ic=free-collection
  776. Step 2: search for an icon you want
  777. Step 3: click it; you will see something that starts with <i class
  778. Step 4: click it to copy, then paste it below
  779.  
  780. link url goes between quotes marks of href=""
  781. -->
  782.  
  783. <!--start one link-->
  784. <a class="one-cornerlink" href="">
  785. <i class="fab fa-steam-symbol"></i>
  786. <span>Link text</span>
  787. </a>
  788. <!--end one link-->
  789.  
  790. <!--start one link-->
  791. <a class="one-cornerlink" href="">
  792. <i class="fab fa-discord"></i>
  793. <span>Link text</span>
  794. </a>
  795. <!--end one link-->
  796.  
  797. </div><!--do not delete this line-->
  798.  
  799. </body>
  800. </html>
Advertisement
Add Comment
Please, Sign In to add comment