API tools faq
paste
amboise

cherry bomb

amboise
May 20th, 2020
5,668
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.91 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. page cherry bomb by amboise n.n
  4.  
  5. IMPORTANT:
  6.  
  7. - i left as many notes as i thought necessary to avoid confussion, especially regarding the links on the pop up menu. so please read that part carefully.
  8.  
  9. - i wouldn't recommend changing sizes of any kind (only font size) so if you really want to do it i won't provide you help with it.
  10.  
  11. - responsiveness cannot be removed.
  12.  
  13. - make sure you follow the terms of use.
  14.  
  15. - on this page credit can be moved according as how many tabs you use, just please be super nice with me and don't remove it and don't place it outside of the pop up menu either.
  16.  
  17.  
  18. -->
  19. <!DOCTYPE html>
  20. <head>
  21.  
  22. <link rel="shortcut icon" href="{favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27. <!-- font -->
  28.  
  29. <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  30.  
  31. <style type="text/css">
  32.  
  33. /* your customization begins here customization */
  34.  
  35. .hcontrols svg {
  36. color:#000; /* tumblr controls icon color */
  37. }
  38.  
  39. ::-webkit-scrollbar-thumb {
  40. background:#cccccc; /* scrollbar color */
  41. }
  42.  
  43. /* tooltips */
  44.  
  45. #s-m-t-tooltip {
  46. background-color:#ffffff;
  47. border:1px solid #eee;
  48. color:#666;
  49. }
  50.  
  51. /* body */
  52.  
  53. body {
  54. color:#888;
  55. font-size:13px;
  56. font-family: 'Balsamiq Sans', cursive; /* font */
  57. background:#f9e9e2;
  58. }
  59.  
  60. /* container */
  61.  
  62. section {
  63. background:#ffffff;
  64. /* you should only change the number between the parentheses */
  65. box-shadow: 0 19px 38px rgba(0,0,0,0.05), 0 15px 12px rgba(0,0,0,0.05);
  66. }
  67.  
  68. /* dotted line - please just change the color */
  69.  
  70. h1 .line {
  71. border-top:4px dotted #f9e5d8;
  72. }
  73.  
  74. /* sidebar post */
  75.  
  76. .post {
  77. background:#f8f8f8;
  78. background-image:url('https://66.media.tumblr.com/818ed3e33430bd4b3028f4d506fdc347/tumblr_mt67noIbPl1ru3nbdo5_r1_100.png');
  79. }
  80.  
  81. /* both name and pop up icon */
  82.  
  83. .name {
  84. color:; /* if you want it to be a different color than text */
  85. background:#ffffff;
  86. }
  87.  
  88. /* little border between text */
  89.  
  90. .post li {
  91. border-bottom:1px solid white;
  92. }
  93.  
  94. /* first text on sidebar */
  95.  
  96. li.bubble {
  97. background:#ffffff;
  98. }
  99.  
  100. /* your links */
  101.  
  102. .side a {
  103. color:#000;
  104. box-shadow:inset 0 -.4em 0 0 #f9e5d8;
  105. }
  106.  
  107. /* your icon */
  108.  
  109. .avatar {
  110. border:10px solid;
  111. border-color:white; /* only change the color of the border please */
  112. background-color:#f9e9e2;
  113. background-image:url('your url goes here');
  114. }
  115.  
  116. /* pop up */
  117.  
  118. /* lightgbox - you should only change the number between the parentheses */
  119.  
  120. nav {
  121. background-color:rgb(247, 244, 234,.5);
  122. background-image: radial-gradient(rgb(247, 244, 234, 1) 20%, transparent 0), radial-gradient(rgb(247, 244, 234, 1) 20%, transparent 0); /* polka dots */
  123. }
  124.  
  125. nav .pop, .close {
  126. color:; /* if you want the icon to be different than text color */
  127. background:white;
  128. box-shadow: 0 19px 38px rgba(0,0,0,0.05), 0 15px 12px rgba(0,0,0,0.05);
  129. }
  130.  
  131. /* pop up icons color */
  132.  
  133. nav .pop svg {
  134. color:; /* if you want the icon to be different than text color */
  135. background:#eee;
  136. }
  137.  
  138. nav .pop svg:hover {
  139. color:white;
  140. background:#f9e5d8;
  141. transform:rotate(360deg); /* how much it rotates */
  142. }
  143.  
  144. /* little dots at bottom of links */
  145.  
  146. label.tab {
  147. background:#bebebe;
  148. }
  149.  
  150. .tabwrap {
  151. height:240px; /* change this height to 205px only if you are NOT going to inlcude more than 9 links in your pop up, and already deleted both little dots div */
  152. }
  153.  
  154. /* little dots when clicked */
  155.  
  156. [type=radio]:checked + label {
  157. background:gray;
  158. }
  159.  
  160. /* your customization ends here */
  161.  
  162. /* don't change anything from here on please, go straight to the html part by doing the following ctrl + f html begins here */
  163.  
  164. iframe.tmblr-iframe {
  165. z-index:25!important;
  166. top:19px!important;
  167. right:17.5px!important;
  168. opacity:0;
  169. padding-right:38px;
  170. /* delete invert(1) from here */
  171. filter:invert(1) contrast(150%);
  172. -webkit-filter:invert(1) contrast(150%);
  173. -o-filter:invert(1) contrast(150%);
  174. -moz-filter:invert(1) contrast(150%);
  175. -ms-filter:invert(1) contrast(150%);
  176. /* to here if your blog has a dark background */
  177. transform:scale(0.65);
  178. transform-origin:100% 0;
  179. -webkit-transform:scale(0.65);
  180. -webkit-transform-origin:100% 0;
  181. -o-transform:scale(0.65);
  182. -o-transform-origin:100% 0;
  183. -moz-transform:scale(0.65);
  184. -moz-transform-origin:100% 0;
  185. -ms-transform:scale(0.65);
  186. -ms-transform-origin:100% 0;
  187. }
  188.  
  189. iframe.tmblr-iframe:hover {
  190. opacity:0.6!important;
  191. }
  192.  
  193. .hcontrols {
  194. position:fixed;
  195. top:21px!important;
  196. right:17.5px!important;
  197. z-index:25;
  198. }
  199.  
  200. .hcontrols svg {
  201. width:14px;
  202. height:14px;
  203. padding:9px;
  204. }
  205.  
  206. ::-webkit-scrollbar {
  207. width:.3em;
  208. }
  209.  
  210. ::-webkit-scrollbar,
  211. ::-webkit-scrollbar-thumb {
  212. overflow:visible;
  213. border-radius:4px;
  214. }
  215.  
  216. #s-m-t-tooltip {
  217. max-width:300px;
  218. z-index:100;
  219. margin:0 14px 0 12px;
  220. padding:5px 10px 5px 10px;
  221. border-radius:.9em;
  222. font-size:12px;
  223. text-transform:lowercase;
  224. letter-spacing:1px;
  225. line-height:16px;
  226. }
  227.  
  228. body {
  229. line-height:1.5em;
  230. font-weight:400;
  231. letter-spacing:.75px;
  232. word-wrap:break-word;
  233. text-align:left;
  234. margin:0;
  235. -moz-osx-font-smoothing:grayscale;
  236. -webkit-font-smoothing:antialiased;
  237. font-smoothing:antialiased;
  238. }
  239.  
  240. b, strong {
  241. font-weight:700;
  242. }
  243.  
  244. a {
  245. color:inherit;
  246. text-decoration:none;
  247. transition:all .3s linear;
  248. -webkit-transition:all .3s linear;
  249. -o-transition:all .3s linear;
  250. -moz-transition:all .3s linear;
  251. }
  252.  
  253. a, a img {
  254. cursor:pointer;
  255. }
  256.  
  257. a:hover {
  258. text-decoration:none;
  259. }
  260.  
  261. img {
  262. opacity:1;
  263. border:0;
  264. text-decoration:none;
  265. max-width:100%;
  266. height:auto;
  267. display:block;
  268. }
  269.  
  270. section {
  271. position:fixed;
  272. top:50%;
  273. width:55%;
  274. height:80vh;
  275. padding-bottom:25px;
  276. left:50%;
  277. transform:translate(-50%,-50%);
  278. overflow:hidden;
  279. border-radius:4em;
  280. }
  281.  
  282. h1 {
  283. text-align:center;
  284. width:calc(90% - 30px);
  285. margin:25px auto 25px auto;
  286. }
  287.  
  288. h1 .line {
  289. width:calc((50% / 3) * 1.5);
  290. }
  291.  
  292. h1 .line.one {
  293. float:left;
  294. margin:8px -30px 0 30px;
  295. }
  296.  
  297. h1 .line.two {
  298. float:right;
  299. margin:8px 30px 0 -30px;
  300. }
  301.  
  302. .post {
  303. padding:35px 15px 15px 15px;
  304. width:calc(90% - 30px);
  305. height:calc(90% - 90px);
  306. margin:0 auto 0 auto;
  307. }
  308.  
  309. .avatar {
  310. width:150px;
  311. height:150px;
  312. overflow:hidden;
  313. border-radius:2em;
  314. background-size:cover;
  315. float:left;
  316. display:block;
  317. margin:0px 40px 25px 25px;
  318. }
  319.  
  320. .name {
  321. font-size:14px;
  322. text-align:left;
  323. display:inline;
  324. overflow:hidden;
  325. border-radius:1em;
  326. padding:10px;
  327. position:absolute;
  328. margin:170px 0 0 0;
  329. }
  330.  
  331. .name.two {
  332. margin-top:220px;
  333. padding:10px 10px 5px 10px;
  334. }
  335.  
  336. .name svg {
  337. width:16px;
  338. height:16px;
  339. }
  340.  
  341. .post .side {
  342. margin:0 30px 0 195px;
  343. max-height:calc(100% - 25px);
  344. padding-right:25px;
  345. overflow-x:hidden;
  346. overflow-y:scroll;
  347. -webkit-overflow-scrolling: touch;
  348. }
  349.  
  350. .post p:last-of-type {
  351. margin-bottom:0;
  352. }
  353.  
  354. .post li {
  355. list-style-type:none;
  356. padding:10px;
  357. }
  358.  
  359. li.bubble {
  360. display:inline-block;
  361. overflow:hidden;
  362. border-radius:1em;
  363. padding:15px;
  364. }
  365.  
  366. .post li svg {
  367. float:left;
  368. margin-top:2px;
  369. margin-right:10px;
  370. width:14px;
  371. height:14px;
  372. }
  373.  
  374. .open {
  375. cursor:pointer;
  376. font-size:13px;
  377. }
  378.  
  379. .close {
  380. position:absolute;
  381. top:25px;
  382. right:25px;
  383. width:15px;
  384. height:15px;
  385. padding:5px;
  386. overflow:hidden;
  387. border-radius:50%;
  388. cursor:pointer;
  389. }
  390.  
  391. .close svg {
  392. width:15px;
  393. height:15px;
  394. margin:0;
  395. }
  396.  
  397. nav {
  398. position:fixed;
  399. z-index:50;
  400. top:0;
  401. left:0;
  402. right:0;
  403. bottom:0;
  404. height:100%;
  405. width:100%;
  406. display:none;
  407. background-size: 1em 1em;
  408. background-position: 0 0, .5em .5em;
  409. overflow-x:hidden!important;
  410. }
  411.  
  412. nav .pop {
  413. padding:25px 25px 40px 25px;
  414. width:17.5%;
  415. height:auto;
  416. min-height:100px;
  417. overflow:hidden;
  418. border-radius:4em;
  419. position:absolute;
  420. top:50%;
  421. left:50%;
  422. transform:translate(-50%,-50%);
  423. }
  424.  
  425. nav .pop h1 {
  426. font-size:14px;
  427. }
  428.  
  429. nav .pop h1 .line {
  430. width:calc((50% / 4) * 1.5);
  431. }
  432.  
  433. nav .pop h1 .line.one {
  434. float:left;
  435. margin:8px -10px 0 10px;
  436. }
  437.  
  438. nav .pop h1 .line.two {
  439. float:right;
  440. margin:8px 10px 0 -10px;
  441. }
  442.  
  443. nav .pop ul {
  444. position:relative;
  445. width:calc(100% - 50px);
  446. margin:auto;
  447. padding:0 0 0 2vw;
  448. list-style-type:none;
  449. }
  450.  
  451. nav .pop li {
  452. margin:0 0 1vh 0;
  453. padding:0;
  454. width:calc(100% / 3);
  455. float:left;
  456. display:inline-block;
  457. }
  458.  
  459. nav .pop svg {
  460. width:16px;
  461. height:16px;
  462. padding:15px;
  463. border-radius:1em;
  464. overflow:hidden;
  465. transition:.75s ease-in;
  466. }
  467.  
  468. input.tab {
  469. opacity:0;
  470. }
  471.  
  472. label.tab {
  473. position:absolute;
  474. bottom:50px;
  475. left:50%;
  476. transform:translate(-50%,0);
  477. z-index:100;
  478. float:left;
  479. overflow:hidden;
  480. cursor:pointer;
  481. width:9px;
  482. height:9px;
  483. border-radius:50%;
  484. }
  485.  
  486. label.tab1 {
  487. margin-left:-12.5px;
  488. }
  489.  
  490. label.tab2 {
  491. margin-left:12.5px;
  492. }
  493.  
  494. .tabwrap {
  495. overflow:hidden;
  496. width:100%;
  497. margin-top:-15px;
  498. }
  499.  
  500. .tabs {
  501. display:table;
  502. width:100%;
  503. white-space:nowrap;
  504. clear:both;
  505. }
  506.  
  507. .content {
  508. position:absolute;
  509. display:inline-block;
  510. white-space:normal;
  511. width:100%;
  512. }
  513.  
  514. .content1, .content2 {
  515. margin-left:-1vw;
  516. }
  517.  
  518. .tab[type=radio] ~ .tabs .content .content-inner {
  519. opacity:0;
  520. position:absolute;
  521. right:-100%;
  522. width:100%;
  523. -webkit-transition: all 0.6s ease;
  524. -moz-transition: all 0.6s ease;
  525. -ms-transition: all 0.6s ease;
  526. -o-transition: all 0.6s ease;
  527. transition: all 0.6s ease;
  528. }
  529.  
  530. .tab1[type=radio]:checked ~ .tabs .content1 .content-inner,
  531. .tab2[type=radio]:checked ~ .tabs .content2 .content-inner {
  532. opacity:1;
  533. position:absolute;
  534. right:0;
  535. width:100%;
  536. }
  537.  
  538. /* queries - don't touch please n.n */
  539.  
  540. @media only screen and (max-width:1100px) {
  541. section {
  542. width:75%;
  543. }
  544.  
  545. .avatar {
  546. width:25%;
  547. height:0;
  548. padding-bottom:25%;
  549. }
  550.  
  551. .name {
  552. margin:25% 0 0 0;
  553. }
  554.  
  555. .name.two {
  556. margin-top:calc(25% + 50px);
  557. }
  558.  
  559. nav .pop {
  560. width:25%;
  561. }
  562.  
  563. nav .pop ul {
  564. padding-left:2.5vw;
  565. }
  566. }
  567.  
  568. @media only screen and (max-width:900px) {
  569. iframe.tmblr-iframe, .hcontrols {display:none!important;}
  570.  
  571. .name {
  572. margin:0 0 0 calc(25% + 30px);
  573. }
  574.  
  575. .name.two {
  576. margin-top:50px;
  577. }
  578.  
  579. .post {
  580. width:calc(100% - 90px);
  581. height:calc(90% - 90px);
  582. }
  583.  
  584. .post .side {
  585. margin:calc(25% + 50px) 30px 0 30px;
  586. max-height:calc(100% - (25% + 100px));
  587. }
  588.  
  589. nav .pop {
  590. width:35%;
  591. }
  592.  
  593. nav .pop ul {
  594. margin-left:2.6vw;
  595. }
  596. }
  597.  
  598. @media only screen and (max-width:540px) {
  599. section {
  600. width:95%;
  601. height:calc(95% - 25px);
  602. }
  603.  
  604. .avatar {
  605. width:80%;
  606. height:0;
  607. padding-bottom:80%;
  608. margin:0px 7.5% 25px 7.5%;
  609. }
  610.  
  611. .name {
  612. position:relative;
  613. display:inline-block;
  614. margin:-10px 0 0 10px;
  615. }
  616.  
  617. .name.two {
  618. margin-top:10px;
  619. }
  620.  
  621. .post {
  622. width:calc(100% - 90px);
  623. max-height:100%;
  624. overflow-x:hidden;
  625. overflow-y:scroll;
  626. -webkit-overflow-scrolling: touch;
  627. }
  628.  
  629. .post .side {
  630. margin:calc(25% + 50px) 7.5% 50px 7.5%;
  631. width:calc(80% + 20px);
  632. height:100%;
  633. overflow:visible;
  634. padding-right:0!important;
  635. }
  636.  
  637. .post li:last-of-type {
  638. margin-bottom:35px;
  639. }
  640.  
  641. nav .pop {
  642. width:65%;
  643. }
  644.  
  645. nav .pop ul {
  646. width:100%;
  647. margin-left:2.5vw;
  648. }
  649. }
  650.  
  651. @media only screen and (min-width:1899px) {
  652. nav .pop ul {
  653. padding-left:2.75vw!important;
  654. }
  655. }
  656.  
  657. @media only screen and (min-width:1400px) {
  658. nav .pop ul {
  659. padding-left:2.5vw;
  660. }
  661. }
  662.  
  663. @media only screen and (max-width:320px) {
  664. nav .pop ul {
  665. margin-left:1.75vw;
  666. }
  667. }
  668.  
  669. </style>
  670. </head>
  671.  
  672. <body>
  673. <section>
  674.  
  675. <!-- html begins here -->
  676.  
  677. <title>cherry bomb</title> <!-- window title -->
  678.  
  679. <h1>
  680. <div class="line one"></div>
  681.  
  682. hmmmm <!-- this is your title -->
  683.  
  684. <div class="line two"></div>
  685. </h1>
  686.  
  687. <!-- post begins -->
  688. <div class="post">
  689.  
  690. <div class="avatar">
  691.  
  692. <!-- ultra short and sweet name goes here -->
  693. <div class="name">named</div>
  694.  
  695. <div class="name two open">
  696.  
  697. <i data-feather="command"></i><!-- pop up icon -->
  698.  
  699. </div>
  700.  
  701. </div>
  702.  
  703.  
  704. <!-- sidebar -->
  705. <div class="side">
  706.  
  707. <!-- this text will stand out more -->
  708. <li class="bubble">examples below</li>
  709.  
  710. <!-- format is as follows, you can add as many as you like.
  711.  
  712. <!-- with icon
  713. <li><i data-feather="home"></i> icon goes first
  714. you can write your text here
  715. </li> -->
  716.  
  717. <!-- without icon
  718. <li>you can write your text here</li> -->
  719.  
  720. <!-- to change an icon go here https://feathericons.com/ and replace the word map-pin in the following text <i data-feather="map-pin"> with the name of the icon you choose, please don't include any of these icons in between sentences or it will not look good -->
  721.  
  722. <li> <i data-feather="info"></i>
  723. icon goes first, you can write your text next to it or below it doesn't matter. and you can write as much as you like i mean it. oh yeah right links look like <a href="your-link">this</a> and well i think you already know about <b>bold</b> and <i>italics</i> right? good.
  724. </li>
  725.  
  726. <li>if you don't want any icons you just remove that bit and done :).</li>
  727.  
  728. </div>
  729. <!-- sidebar end -->
  730.  
  731. </div>
  732. <!-- post end -->
  733.  
  734. </section>
  735.  
  736. <!-- menu begins here-->
  737.  
  738. <nav>
  739.  
  740. <div class="close">
  741.  
  742. <!-- close pop up icon-->
  743. <i data-feather="x"></i>
  744.  
  745. </div>
  746.  
  747. <div class="pop">
  748.  
  749. <h1>
  750. <div class="line one"></div>
  751.  
  752. links<!-- pop up title -->
  753.  
  754. <div class="line two"></div>
  755. </h1>
  756.  
  757.  
  758. <!-- tabs -->
  759.  
  760. <div class="tabwrap">
  761.  
  762. <!-- 1IMPORTANT, PLEASE READ -->
  763.  
  764. <!-- you only need this part if the number of links you want to add is larger than nine, if it's not please delete both divs marked as little dots. my advice would be to make use of both available tabs mainly for aesthetic purposes -->
  765.  
  766. <input class="tab tab1" type="radio" checked id="tab1" name="tabs">
  767. <!-- little dots begin -->
  768. <label class="tab tab1" for="tab1"> <i></i> </label>
  769. <!-- little dots end -->
  770. <input class="tab tab2" type="radio" id="tab2" name="tabs">
  771. <!-- little dots begin -->
  772. <label class="tab tab2" for="tab2"> <i></i> </label>
  773. <!-- little dots end -->
  774.  
  775. <div class="tabs">
  776.  
  777. <ul class="links">
  778.  
  779. <!-- tab one begins -->
  780.  
  781. <!-- please only include 9 links here, if you want to add more it should be done below where tab two begins -->
  782. <div class="content content1">
  783. <div class="content-inner">
  784.  
  785. <li><a href="/" title="home"> <i data-feather="home"></i> </a></li>
  786. <li><a href="/ask" title="mail"> <i data-feather="mail"></i> </a></li>
  787. <li><a href="/archive" title="grid"> <i data-feather="grid"></i> </a></li>
  788.  
  789. <!-- link format is as follows, again : please keep 9 links per tab
  790.  
  791. <li>
  792. <a href="your link" title="optional">
  793. <i data-feather="name of icon">
  794. </a>
  795. </li>
  796.  
  797. -->
  798.  
  799.  
  800. </div>
  801. </div>
  802. <!-- tab one ends -->
  803.  
  804.  
  805. <!-- tab two begins -->
  806.  
  807. <!-- i'll just say it one more time, please keep the number of links to 9. keep in mind there won't be a tab three, this is the last one -->
  808. <div class="content content2">
  809. <div class="content-inner tab-2">
  810.  
  811. <!-- link format is as follows
  812.  
  813. <li>
  814. <a href="your link" title="optional">
  815. <i data-feather="name of icon">
  816. </a>
  817. </li>
  818.  
  819. -->
  820.  
  821. <!-- please read the notes i left at the begginig of the code regarding the placement of the credit on this page-->
  822. <li><a href="https://amboise.tumblr.com" title="credit"> <i data-feather="power"></i> </a></li>
  823.  
  824. </div>
  825. </div>
  826. <!-- tab two ends -->
  827.  
  828. </ul>
  829.  
  830. </div></div>
  831.  
  832. </nav>
  833.  
  834. <!-- pop up ends here -->
  835.  
  836. <div class="hcontrols">
  837.  
  838. <!-- icon for tumblr controls -->
  839. <i data-feather="more-vertical"></i>
  840.  
  841. </div>
  842.  
  843. <!-- customizable stuff ends here -->
  844.  
  845. <!-- jquery - no need to touch -->
  846. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  847. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  848. <script type="text/javascript" src="https://static.tumblr.com/cqvi50o/VSzox2ncv/style-my-tooltips.js"></script>
  849.  
  850. <script>
  851. feather.replace()
  852. $(document).ready(function(){
  853. $("[title]").style_my_tooltips({
  854. tip_follows_cursor: true,
  855. tip_delay_time: 100,
  856. tip_fade_speed: 300
  857. });
  858. $('.open').click(function(){
  859. $('nav').fadeIn('200');
  860. $('body').addClass('overflow');
  861. });
  862. $('.close').click(function(event) {
  863. $('nav').fadeOut('100');
  864. $('body').removeClass('overflow');
  865. });
  866. $(document).on('keydown', function(e) {
  867. if (e.keyCode === 27) { // ESC
  868. $('nav').hide();
  869. $('body').removeClass('overflow');
  870. }
  871. });
  872. });
  873. </script>
  874.  
  875. </body>
  876. </html>
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!