API tools faq
paste
fruitzys

BETTER DAYS CHARACTER PAGE

fruitzys
Feb 17th, 2021 (edited)
1,334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.27 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!-- theme made by FRUITZYS
  4.  
  5. this theme is made possible due to the template i made on my indie !
  6. i hope you find this theme useful since i had lots of fun making it !!
  7.  
  8. now, here are a few terms i have!
  9.  
  10. - DO NOT steal / claim it as your own.
  11. - DO NOT mix the codes used here to other themes.
  12. - DO NOT remove the credit.
  13.  
  14. i used various coding sites to help me with some elements of this theme,
  15. but i do have to credit these blogs to some parts / codes used, especially
  16. for scripts!
  17.  
  18. - tooltip : htmlqueens / eruhption
  19. - favicon : yukoki
  20. - icons : https://iconify.design/
  21. - animations : https://animista.net/ & https://www.w3schools.com/
  22. - digital clock : http://talkerscode.com/
  23.  
  24. ANOTHER NOTE:
  25.  
  26. feel free to make this personalized by changing the colors /
  27. icons / fonts ! just do not remove the credit.
  28.  
  29. HELPFUL TIP:
  30.  
  31. - if you wanna look for a specific code of the theme, click CTRL+F.
  32. - some graphics / images can be changed in the css code. look for the
  33. 'background-image:url('placeholder link')' and replace the link there
  34. with the link of your png / jpeg / gif file !
  35. - if you have any other questions regarding the theme or if you need
  36. some help, do not hesitate to approach me !
  37.  
  38. -->
  39.  
  40. <head>
  41.  
  42. <link rel="shortcut icon" href="https://64.media.tumblr.com/tumblr_lkl6n9q74A1qfamg6.gif" />
  43.  
  44. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
  45. <script>
  46. $(document).ready(function(){
  47. $(".tabzclose").click(function(){
  48. $(".tabzcon").fadeOut("slow");
  49. });
  50. });
  51. </script>
  52.  
  53. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  54. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  55.  
  56. <script type="text/javascript">
  57. window.onload = setInterval(clock,1000);
  58.  
  59. function clock()
  60. {
  61. var d = new Date();
  62.  
  63. var date = d.getDate();
  64.  
  65. var month = d.getMonth();
  66. var montharr =["Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
  67. month=montharr[month];
  68.  
  69. var year = d.getFullYear();
  70.  
  71. var day = d.getDay();
  72. var dayarr =["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"];
  73. day=dayarr[day];
  74.  
  75. var hour =d.getHours();
  76. var min = d.getMinutes();
  77. var sec = d.getSeconds();
  78.  
  79. document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year;
  80. document.getElementById("time").innerHTML=hour+":"+min+":"+sec;
  81. }
  82. </script>
  83.  
  84. <title>CHARACTER PAGE</title>
  85.  
  86. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  87.  
  88. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  89. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
  90. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  91.  
  92. <style>
  93.  
  94. @font-face{ font-family:"coco"; src: url('https://dl.dropboxusercontent.com/s/8wrlemolu4y15y8/coco.ttf’)'); }
  95.  
  96. #s-m-t-tooltip {
  97.  
  98. max-width:300px;
  99. padding:4px 4px 4px 4px;
  100. margin:20px 0px 0px 20px;
  101. background: #fff;
  102. border:1px solid #ffd9d9;
  103. font-family: poppins;
  104. font-size:10px;
  105. letter-spacing:1px;
  106. text-transform:uppercase;
  107. color:#888888;
  108. text-align:center;
  109. z-index:999999999999999999999999999999999999; }
  110.  
  111. ::-webkit-scrollbar {
  112. display: none;
  113. }
  114.  
  115. body {
  116. background-color: #dadada;
  117. font-family:poppins;
  118. }
  119.  
  120. a {
  121. text-decoration:none;
  122. }
  123.  
  124. a:hover {
  125. text-decoration:none;
  126. -webkit-transition: all 0.2s linear;
  127. -moz-transition: all 0.2s linear;
  128. transition: all 0.2s linear;
  129. }
  130.  
  131. #holder {
  132. width:800px;
  133. height:450px;
  134. background-color:#ededed;
  135. margin:auto;
  136. position:fixed;
  137. border-radius:20px;
  138. box-shadow: 10px 10px #a4bd9d;
  139. top:0px;
  140. bottom:0px;
  141. left:0px;
  142. right:0px;
  143. overflow:hidden;
  144. -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  145. animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  146. }
  147.  
  148. @-webkit-keyframes scale-in-center {
  149. 0% {
  150. -webkit-transform: scale(0);
  151. transform: scale(0);
  152. opacity: 1;
  153. }
  154. 100% {
  155. -webkit-transform: scale(1);
  156. transform: scale(1);
  157. opacity: 1;
  158. }
  159. }
  160. @keyframes scale-in-center {
  161. 0% {
  162. -webkit-transform: scale(0);
  163. transform: scale(0);
  164. opacity: 1;
  165. }
  166. 100% {
  167. -webkit-transform: scale(1);
  168. transform: scale(1);
  169. opacity: 1;
  170. }
  171. }
  172.  
  173. /* OUTER PART OF THE THEME */
  174.  
  175. #topbar {
  176. width:800px;
  177. height:30px;
  178. background-color:#e7e7e7;
  179. border-bottom:1px solid #d2c3d6;
  180. }
  181.  
  182. #topbar .iconify {
  183. color:#d2c3d6;
  184. font-size:20px;
  185. padding:5px;
  186. margin-left: 10px;
  187. font-weight:bold;
  188. }
  189.  
  190. #bottombar {
  191. width:800px;
  192. height:40px;
  193. background-color:#bbd2b5;
  194. border-top:1px solid #d2c3d6;
  195. margin-top:378px;
  196. }
  197.  
  198. #bottombar .iconify {
  199. color:#ffffff;
  200. font-size: 40px;
  201. margin-left: 10px;
  202. }
  203.  
  204. #desktopsearch {
  205. background-color:#ffffff;
  206. height: 28px;
  207. width: 200px;
  208. margin-top: -34px;
  209. margin-left: 60px;
  210. border-radius: 10px;
  211. }
  212.  
  213. #desktopsearch .iconify {
  214. color:#d2c3d6;
  215. font-size: 25px;
  216. margin-left: 5px;
  217. margin-top: 1px;
  218. }
  219.  
  220. #searchtext {
  221. color:#d2c3d6;
  222. font-size: 15px;
  223. margin-top: -24px;
  224. margin-left: 35px;
  225. }
  226.  
  227. #blogurl {
  228. font-family:coco;
  229. font-size:20px;
  230. color:#ffffff;
  231. margin-top: -27px;
  232. margin-right: 190px;
  233. text-align: right;
  234. }
  235.  
  236. #divider {
  237. background-color:#fff;
  238. height: 18px;
  239. width: 3px;
  240. margin-left: 10px;
  241. display: inline-block;
  242. }
  243.  
  244. #date {
  245. margin-top: -40px;
  246. color: #ffffff;
  247. font-size: 10px;
  248. padding: 10px;
  249. width: 300px;
  250. margin-left: 396px;
  251. font-family: 'Poppins';
  252. text-transform: uppercase;
  253. }
  254.  
  255. #time {
  256. margin-top: -36px;
  257. font-size: 15px;
  258. color: #ffffff;
  259. font-family: 'Poppins';
  260. padding: 10px;
  261. width: 300px;
  262. margin-left: 386px;
  263. }
  264.  
  265. /* INNER PART OF THE THEME */
  266.  
  267. #desktopicons {
  268. color:#d2c3d6;
  269. padding: 20px;
  270. font-size: 80px;
  271. margin-top: -420px;
  272. -webkit-animation: fade-in-fwd 1.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  273. animation: fade-in-fwd 1.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  274. }
  275.  
  276. @-webkit-keyframes fade-in-fwd {
  277. 0% {
  278. -webkit-transform: translateZ(-80px);
  279. transform: translateZ(-80px);
  280. opacity: 0;
  281. }
  282. 100% {
  283. -webkit-transform: translateZ(0);
  284. transform: translateZ(0);
  285. opacity: 1;
  286. }
  287. }
  288. @keyframes fade-in-fwd {
  289. 0% {
  290. -webkit-transform: translateZ(-80px);
  291. transform: translateZ(-80px);
  292. opacity: 0;
  293. }
  294. 100% {
  295. -webkit-transform: translateZ(0);
  296. transform: translateZ(0);
  297. opacity: 1;
  298. }
  299. }
  300.  
  301. #desktopicons a {
  302. color:#bbd2b5;
  303. }
  304.  
  305. #desktopicons a:hover {
  306. color:#d2c3d6;
  307. }
  308.  
  309. #browser {
  310. height: 310px;
  311. width: 540px;
  312. background-color: #f2f2f2;
  313. left: 80px;
  314. right: 0px;
  315. top: -10px;
  316. bottom: 0px;
  317. margin: auto;
  318. position: fixed;
  319. border-radius:15px;
  320. border:1px solid #d2c3d6;
  321. box-shadow: 10px 10px #d2c3d6;
  322. -webkit-animation: shadow-pop-br 0.9s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  323. animation: shadow-pop-br 0.9s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  324. }
  325.  
  326. @-webkit-keyframes shadow-pop-br {
  327. 0% {
  328. -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
  329. box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
  330. -webkit-transform: translateX(0) translateY(0);
  331. transform: translateX(0) translateY(0);
  332. }
  333. 100% {
  334. -webkit-box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
  335. box-shadow: 1px 1px #3e3e3e, 2px 2px #3e3e3e, 3px 3px #3e3e3e, 4px 4px #3e3e3e, 5px 5px #3e3e3e, 6px 6px #3e3e3e, 7px 7px #3e3e3e, 8px 8px #3e3e3e;
  336. -webkit-transform: translateX(-8px) translateY(-8px);
  337. transform: translateX(-8px) translateY(-8px);
  338. }
  339. }
  340. @keyframes shadow-pop-br {
  341. 0% {
  342. -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
  343. box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
  344. -webkit-transform: translateX(0) translateY(0);
  345. transform: translateX(0) translateY(0);
  346. }
  347.  
  348. /* to change the color of the shadows, replace all the
  349. '#d2c3d6' color codes BELOW THIS to your chosen color ! */
  350.  
  351. 100% {
  352. -webkit-box-shadow: 1px 1px #d2c3d6, 2px 2px #d2c3d6, 3px 3px #d2c3d6, 4px 4px #d2c3d6, 5px 5px #d2c3d6, 6px 6px #d2c3d6, 7px 7px #d2c3d6, 8px 8px #d2c3d6;
  353. box-shadow: 1px 1px #d2c3d6, 2px 2px #d2c3d6, 3px 3px #d2c3d6, 4px 4px #d2c3d6, 5px 5px #d2c3d6, 6px 6px #d2c3d6, 7px 7px #d2c3d6, 8px 8px #d2c3d6;
  354. -webkit-transform: translateX(-8px) translateY(-8px);
  355. transform: translateX(-8px) translateY(-8px);
  356. }
  357. }
  358.  
  359. #sidebar {
  360. background-color:#f7f7f7;
  361. left:0px;
  362. right:0px;
  363. top:0px;
  364. bottom:0px;
  365. height: 310px;
  366. width:220px;
  367. border-top-left-radius:15px;
  368. border-bottom-left-radius:15px;
  369. border-right:1px solid #d2c3d6;
  370. }
  371.  
  372. #toptab {
  373. background-color:#bbd2b5;
  374. width:220px;
  375. height:35px;
  376. left:0px;
  377. right:0px;
  378. top:0px;
  379. bottom:0px;
  380. border-top-left-radius:15px;
  381. }
  382.  
  383. #sitetitle {
  384. color:#ffffff;
  385. font-family:coco;
  386. font-size:20px;
  387. padding:5px;
  388. margin-left:5px;
  389. }
  390.  
  391. #sitetitle .iconify {
  392. margin-left:3px;
  393. }
  394.  
  395. #searchbar {
  396. background-color:#e8d7ec;
  397. width:220px;
  398. height:35px;
  399. left:0px;
  400. right:0px;
  401. top:0px;
  402. bottom:0px;
  403. }
  404.  
  405. #minisearch {
  406. background-color:#ffffff;
  407. height: 20px;
  408. width: 170px;
  409. margin-top: -28px;
  410. margin-left: 33px;
  411. }
  412.  
  413. #minisearch .iconify {
  414. margin-left: -25px;
  415. font-size:20px;
  416. color:#ffffff;
  417. }
  418.  
  419. #taburl {
  420. font-family: poppins;
  421. text-transform: uppercase;
  422. font-size: 8px;
  423. color: #666666;
  424. margin-top: -20px;
  425. margin-left: 8px;
  426. letter-spacing:1px;
  427. }
  428.  
  429. /* replace your png graphic here !! */
  430.  
  431. #png {
  432. width:220px;
  433. height: 240px;
  434. margin-top: 8px;
  435. border-bottom-left-radius:15px;
  436. background-image:url('https://via.placeholder.com/220x240');
  437. }
  438.  
  439. #name {
  440. background-color:#ffffff;
  441. width:150px;
  442. height:45px;
  443. border-radius:20px;
  444. margin-top: -100px;
  445. margin-left: -60px;
  446. box-shadow: 1px 1px #d2c3d6, 2px 2px #d2c3d6, 3px 3px #d2c3d6, 4px 4px #d2c3d6, 5px 5px #d2c3d6, 6px 6px #d2c3d6, 7px 7px #d2c3d6, 8px 8px #d2c3d6;
  447. transition: transform .8s;
  448. }
  449.  
  450. #name:hover {
  451. transform: scale(1.1);
  452. }
  453.  
  454. #at {
  455. font-family: poppins;
  456. font-size: 14px;
  457. font-weight: bold;
  458. text-transform: uppercase;
  459. color: #bbd2b5;
  460. padding: 10px;
  461. text-align: center;
  462. letter-spacing: 2px;
  463. -webkit-animation: tracking-in-contract 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  464. animation: tracking-in-contract 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  465. }
  466.  
  467. @-webkit-keyframes tracking-in-contract {
  468. 0% {
  469. letter-spacing: 1em;
  470. opacity: 0;
  471. }
  472. 40% {
  473. opacity: 0.6;
  474. }
  475. 100% {
  476. letter-spacing: 2px;
  477. opacity: 1;
  478. }
  479. }
  480. @keyframes tracking-in-contract {
  481. 0% {
  482. letter-spacing: 1em;
  483. opacity: 0;
  484. }
  485. 40% {
  486. opacity: 0.6;
  487. }
  488. 100% {
  489. letter-spacing: 2px;
  490. opacity: 1;
  491. }
  492. }
  493.  
  494. #at a {
  495. color: #bbd2b5;
  496. }
  497.  
  498. #at a:hover {
  499. color: #d2c3d6;
  500. }
  501.  
  502.  
  503. #post {
  504. background-color: transparent;
  505. margin: auto;
  506. margin-top: -304px;
  507. margin-left: 217px;
  508. height: 260px;
  509. width: 285px;
  510. border-top-right-radius: 15px;
  511. border-bottom-right-radius: 15px;
  512. overflow: scroll;
  513. padding: 20px;
  514. }
  515.  
  516. #post a {
  517. font-family:coco;
  518. color:#a4bd9d;
  519. text-transform:lowercase;
  520. margin-left: 70px;
  521. }
  522.  
  523. #instamain {
  524. height:230px;
  525. width:285px;
  526. border-radius:10px;
  527. background-color:transparent;
  528. margin-top: 10px;
  529. margin-bottom: 30px;
  530. box-shadow: 5px 5px #a4bd9d;
  531. -webkit-animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  532. animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  533. }
  534.  
  535. @-webkit-keyframes scale-in-center {
  536. 0% {
  537. -webkit-transform: scale(0);
  538. transform: scale(0);
  539. opacity: 1;
  540. }
  541. 100% {
  542. -webkit-transform: scale(1);
  543. transform: scale(1);
  544. opacity: 1;
  545. }
  546. }
  547. @keyframes scale-in-center {
  548. 0% {
  549. -webkit-transform: scale(0);
  550. transform: scale(0);
  551. opacity: 1;
  552. }
  553. 100% {
  554. -webkit-transform: scale(1);
  555. transform: scale(1);
  556. opacity: 1;
  557. }
  558. }
  559.  
  560. #instatop {
  561. height:30px;
  562. width:285px;
  563. background-color:#ffffff;
  564. border-top-right-radius: 10px;
  565. border-top-left-radius: 10px;
  566. }
  567.  
  568. #instatop .iconify {
  569. color:#d2c3d6;
  570. font-size: 30px;
  571. margin-left: 250px;
  572. }
  573.  
  574. /* replace your small insta icon here !! */
  575.  
  576. #instaicon {
  577. height:20px;
  578. width:20px;
  579. border-radius:50%;
  580. margin-top: -224px;
  581. margin-left: 10px;
  582. background-image:url('https://via.placeholder.com/20');
  583. }
  584.  
  585. #username {
  586. font-family:poppins;
  587. font-size:15px;
  588. color:#d2c3d6;
  589. font-weight:bolder;
  590. text-transform:uppercase;
  591. margin-top: -25px;
  592. margin-left: 35px;
  593. }
  594.  
  595. #instabottom {
  596. height:30px;
  597. width:285px;
  598. background-color:#ffffff;
  599. border-bottom-right-radius: 10px;
  600. border-bottom-left-radius: 10px;
  601. margin-top: 170px;
  602. }
  603.  
  604. #instabottom .iconify {
  605. color:#d2c3d6;
  606. font-size: 20px;
  607. margin-left: 10px;
  608. margin-top: 5px;
  609. }
  610.  
  611. #instapost {
  612. width 285px;
  613. height: 170px;
  614. margin-top: 4px;
  615. background-color:#d2c3d6;
  616. }
  617.  
  618.  
  619.  
  620.  
  621. /* TABS STYLING-- BASE CODE BY ALYOFRP. DO NOT REMOVE THIS CREDIT! */
  622.  
  623.  
  624.  
  625.  
  626. .tabz {
  627. margin-top:0px;
  628. margin-left:0px;
  629. padding:10px;
  630. position:fixed;
  631. width:205px;
  632. background-color:#c6b19a;
  633. overflow:hidden;
  634.  
  635. }
  636.  
  637. .tabzcon {
  638. margin-top: -306px;
  639. margin-left: 221px;
  640. padding: 10px;
  641. position: absolute;
  642. width: 299px;
  643. height: 290px;
  644. background-color:#ffffff;
  645. color:#6c4b45;
  646. border-top-right-radius:15px;
  647. border-bottom-right-radius:15px;
  648. -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  649. animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  650. }
  651.  
  652. @-webkit-keyframes scale-up-center {
  653. 0% {
  654. -webkit-transform: scale(0.5);
  655. transform: scale(0.5);
  656. }
  657. 100% {
  658. -webkit-transform: scale(1);
  659. transform: scale(1);
  660. }
  661. }
  662. @keyframes scale-up-center {
  663. 0% {
  664. -webkit-transform: scale(0.5);
  665. transform: scale(0.5);
  666. }
  667. 100% {
  668. -webkit-transform: scale(1);
  669. transform: scale(1);
  670. }
  671. }
  672.  
  673. .tabzclose {
  674. text-transform:uppercase;
  675. font-weight:bold;
  676. font-size:10px;
  677. padding:3px;
  678. color:#a4bd9d;
  679. margin-top:-8px;
  680. margin-right:-5px;
  681. float:right;
  682. }
  683.  
  684. .tabzclose:hover {
  685. cursor:pointer;
  686. }
  687.  
  688. /* IG TAB */
  689.  
  690. #instasearch {
  691. background-color:#f2f2f2;
  692. height: 28px;
  693. width: 130px;
  694. position:fixed;
  695. left:10px;
  696. right:0px;
  697. top:10px;
  698. bottom:0px;
  699. border-radius: 10px;
  700. }
  701.  
  702. #instasearch .iconify {
  703. color:#d2c3d6;
  704. font-size: 25px;
  705. margin-left: 5px;
  706. margin-top: 1px;
  707. }
  708.  
  709. #instasearchtext {
  710. color:#d2c3d6;
  711. font-size: 15px;
  712. margin-top: -24px;
  713. margin-left: 35px;
  714. }
  715.  
  716. #mail .iconify {
  717. color:#d2c3d6;
  718. font-size: 25px;
  719. position:fixed;
  720. left:270px;
  721. right:0px;
  722. top:10px;
  723. bottom:0px;
  724. }
  725.  
  726. #igiconholder {
  727. height:80px;
  728. width:80px;
  729. background-image: linear-gradient(180deg, #d2c3d6, #bbd2b5);
  730. position:fixed;
  731. left:120px;
  732. right:0px;
  733. top:70px;
  734. bottom:0px;
  735. border-radius:50%;
  736. }
  737.  
  738. /* replace your small insta icon here !! */
  739.  
  740. #igicon {
  741. height: 68px;
  742. width: 68px;
  743. margin-left: 4px;
  744. margin-top: 4px;
  745. border-radius: 50%;
  746. background-image: url('https://via.placeholder.com/68');
  747. border: 2px solid #ffffff;
  748. }
  749.  
  750.  
  751. #igname {
  752. font-family:coco;
  753. font-size:20px;
  754. color:#bbd2b5;
  755. position:fixed;
  756. text-align:center;
  757. left:-5px;
  758. right:0px;
  759. top:160px;
  760. bottom:0px;
  761. text-transform:lowercase;
  762. }
  763.  
  764. #igat {
  765. font-family:poppins;
  766. font-size:12px;
  767. text-transform:lowercase;
  768. color:#7d7d7d;
  769. position:fixed;
  770. text-align:center;
  771. left:-5px;
  772. right:0px;
  773. top:185px;
  774. bottom:0px;
  775. letter-spacing:1px;
  776. }
  777.  
  778. #info {
  779. width:240px;
  780. height:80px;
  781. overflow:scroll;
  782. font-size:9px;
  783. color:#7d7d7d;
  784. position:fixed;
  785. left:40px;
  786. right:0px;
  787. top:215px;
  788. bottom:0px;
  789. text-align:justify;
  790. }
  791.  
  792. /* END IG TAB */
  793.  
  794.  
  795. /* START WEB TAB */
  796.  
  797. #newtab {
  798. height:25px;
  799. width:150px;
  800. margin-top:-10px;
  801. margin-left:-10px;
  802. border-top-left-radius:8px;
  803. border-top-right-radius:8px;
  804. background-color:#e8d7ec;
  805. position:fixed;
  806. }
  807.  
  808. #newtab .iconify {
  809. color:#ffffff;
  810. position:fixed;
  811. left:0px;
  812. right:0px;
  813. top:0px;
  814. bottom:0px;
  815. font-size:25px;
  816. }
  817.  
  818. #tabtext {
  819. font-family:poppins;
  820. font-size:12px;
  821. color:#ffffff;
  822. padding: 3px;
  823. margin-left: 30px;
  824. font-weight:bold;
  825. letter-spacing:2px;
  826. text-transform:uppercase;
  827. }
  828.  
  829. #searchbase {
  830. background-color:#d2c3d6;
  831. height:35px;
  832. width:319px;
  833. position:fixed;
  834. margin-left:-10px;
  835. margin-top:15px;
  836. }
  837.  
  838. #searchbase .iconify {
  839. color:#ffffff;
  840. margin-top: 7px;
  841. margin-left: 5px;
  842. font-size:20px;
  843. }
  844.  
  845. #gsearchbar {
  846. background-color:#ffffff;
  847. height: 18px;
  848. width: 230px;
  849. margin-left: 85px;
  850. margin-top: -18px;
  851. }
  852.  
  853. #gurl {
  854. color:#7d7d7d;
  855. font-size:7px;
  856. text-transform:uppercase;
  857. letter-spacing:7px;
  858. padding:5px;
  859. margin-left:8px;
  860. }
  861.  
  862. /* you can change the background color / add a background image */
  863.  
  864. #gbg {
  865. background-color:#f5f5f5;
  866. /*background-image:url('https://via.placeholder.com/250x319')*/
  867. height:250px;
  868. width:319px;
  869. position:fixed;
  870. left:0px;
  871. right:0px;
  872. top:60px;
  873. bottom:0px;
  874. border-bottom-right-radius:15px;
  875. }
  876.  
  877. #gname {
  878. font-family:coco;
  879. font-size:35px;
  880. color:#bbd2b5;
  881. text-align:center;
  882. margin-top:70px;
  883. -webkit-animation: text-shadow-pop-bottom 1.6s both;
  884. animation: text-shadow-pop-bottom 1.6s both;
  885. }
  886.  
  887. @-webkit-keyframes text-shadow-pop-bottom {
  888. 0% {
  889. text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
  890. -webkit-transform: translateY(0);
  891. transform: translateY(0);
  892. }
  893. 100% {
  894. text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
  895. -webkit-transform: translateY(-8px);
  896. transform: translateY(-8px);
  897. }
  898. }
  899. @keyframes text-shadow-pop-bottom {
  900. 0% {
  901. text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
  902. -webkit-transform: translateY(0);
  903. transform: translateY(0);
  904. }
  905. 100% {
  906. text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
  907. -webkit-transform: translateY(-8px);
  908. transform: translateY(-8px);
  909. }
  910. }
  911.  
  912. #gsearch {
  913. background-color:#ffffff;
  914. border:1px solid #d2c3d6;
  915. height:25px;
  916. width:270px;
  917. border-radius:25px;
  918. position:fixed;
  919. left:25px;
  920. box-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
  921. }
  922.  
  923. #gsearch .iconify {
  924. font-size:15px;
  925. color:#7d7d7d;
  926. margin-top:5px;
  927. }
  928.  
  929. #gtext {
  930. font-size:10px;
  931. color:#7d7d7d;
  932. letter-spacing:1px;
  933. margin-left:30px;
  934. margin-top:-15px;
  935. }
  936.  
  937. .blinking {
  938. animation:blinkingText 1s infinite;
  939. }
  940.  
  941. @keyframes blinkingText {
  942. 0%{ color: #d2c3d6; }
  943. 50%{ color: transparent; }
  944. 100%{ color: #d2c3d6; }
  945. }
  946.  
  947. /* END WEB TAB */
  948.  
  949.  
  950. /* START FOLDER TAB */
  951.  
  952. #filesbase {
  953. background-color:#bbd2b5;
  954. height:35px;
  955. width:319px;
  956. position:fixed;
  957. margin-left:-10px;
  958. margin-top:15px;
  959. }
  960.  
  961. #filesbase .iconify {
  962. color:#ffffff;
  963. margin-top: 7px;
  964. margin-left: 5px;
  965. font-size:20px;
  966. }
  967.  
  968. #filesbar {
  969. background-color:#ffffff;
  970. height: 18px;
  971. width: 230px;
  972. margin-left: 85px;
  973. margin-top: -18px;
  974. }
  975.  
  976. #filesbar .iconify {
  977. color:#a4bd9d;
  978. font-size:10px;
  979. margin-top: -15px;
  980. margin-left: 215px;
  981. }
  982.  
  983. #filesearch {
  984. color:#7d7d7d;
  985. font-size:7px;
  986. text-transform:uppercase;
  987. letter-spacing:7px;
  988. padding:5px;
  989. margin-left:8px;
  990. }
  991.  
  992. #folder .iconify {
  993. font-size:70px;
  994. color:#d2c3d6;
  995. padding:15px;
  996. margin-top:15px;
  997. }
  998.  
  999. #foldernames {
  1000. color:#7d7d7d;
  1001. font-size:10px;
  1002. font-family:coco;
  1003. margin-left:42px;
  1004. margin-top:-140px;
  1005. }
  1006.  
  1007. #foldernames li {
  1008. display:inline-block;
  1009. line-height:142px;
  1010. margin-top:-36px;
  1011. margin-left:-70px;
  1012. width:162px;
  1013. text-align:center;
  1014. }
  1015.  
  1016.  
  1017. /* END FOLDER TAB */
  1018.  
  1019.  
  1020. #credit {
  1021. width:40px;
  1022. height:40px;
  1023. border-radius:25px;
  1024. border:1px solid #bbd2b5;
  1025. text-align:center;
  1026. font-size:15px;
  1027. background-color:#ffffff;
  1028. bottom:10px;
  1029. left:20px;
  1030. position:absolute;
  1031. box-shadow:2px 2px #bbd2b5;
  1032. }
  1033.  
  1034. #credit span {
  1035. font-size:18px;
  1036. color:#d2c3d6;
  1037. margin-top:10px;
  1038. }
  1039.  
  1040.  
  1041. </style>
  1042.  
  1043. </head>
  1044.  
  1045. <body>
  1046.  
  1047. <div id="holder">
  1048.  
  1049. <div id="topbar">
  1050.  
  1051. <span class="iconify" data-icon="system-uicons:drag-circle"></span>
  1052.  
  1053. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1054.  
  1055. <span class="iconify" data-icon="system-uicons:battery-charging"></span>
  1056. <span class="iconify" data-icon="system-uicons:alarm-clock"></span>
  1057. <span class="iconify" data-icon="system-uicons:download"></span>
  1058.  
  1059. </div>
  1060.  
  1061. <div id="bottombar">
  1062.  
  1063. <span class="iconify" data-icon="system-uicons:grid"></span>
  1064.  
  1065. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1066.  
  1067. <span class="iconify" data-icon="system-uicons:folder-closed"></span>
  1068. <span class="iconify" data-icon="system-uicons:mail"></span>
  1069. <span class="iconify" data-icon="system-uicons:newspaper"></span>
  1070.  
  1071. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1072.  
  1073. <span class="iconify" data-icon="system-uicons:side-menu"></span>
  1074.  
  1075. <div id="desktopsearch">
  1076.  
  1077. <span class="iconify" data-icon="fluent:search-20-regular"></span>
  1078. <div id="searchtext">Type here to search</div>
  1079.  
  1080. </div>
  1081.  
  1082. <div id="blogurl"> FRUITZYS
  1083.  
  1084. <div id="divider"></div>
  1085.  
  1086. <p id="date"></p>
  1087. <p id="time"></p>
  1088.  
  1089. </div>
  1090.  
  1091. </div>
  1092.  
  1093. <div id="desktopicons">
  1094.  
  1095. <span class="iconify" data-icon="fluent:globe-20-filled"></span>
  1096. <br>
  1097. <p style="font-size:12px; font-family: coco; text-transform:uppercase; margin-left:22px; letter-spacing:2px; margin-top:-3px;"> <a href="javascript:void(0)" class="tablink" onclick="openAlytut(event, 'TabzTwo');">web</a> </p>
  1098. <br>
  1099. <span class="iconify" data-icon="fluent:folder-48-filled" style="margin-top:-120px;"></span>
  1100. <br>
  1101. <p style="font-size:12px; font-family: coco; text-transform:uppercase; margin-left:20px; letter-spacing:2px; margin-top:-50px;"> <a href="javascript:void(0)" class="tablink" onclick="openAlytut(event, 'TabzThree');">files</a> </p>
  1102.  
  1103. </div>
  1104.  
  1105. <div id="browser">
  1106.  
  1107. <!-- START OF SIDEBAR -->
  1108.  
  1109. <div id="sidebar">
  1110.  
  1111. <div id="toptab">
  1112.  
  1113. <div id="sitetitle">
  1114.  
  1115. <span class="iconify" data-icon="cib:instagram"></span>
  1116. INSTAGRAM
  1117. <span class="iconify" data-icon="system-uicons:cross" style="margin-left:20px;"></span>
  1118.  
  1119. </div>
  1120.  
  1121. </div>
  1122.  
  1123. <div id="searchbar"></div>
  1124. <div id="minisearch">
  1125.  
  1126. <span class="iconify" data-icon="fluent:arrow-clockwise-24-filled"></span>
  1127.  
  1128. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1129.  
  1130. <span class="iconify" data-icon="bx:bx-dots-horizontal-rounded" style="color:#666666"></span>
  1131.  
  1132. <div id="taburl">instagram.com/fruitzys</div>
  1133.  
  1134. </div>
  1135.  
  1136. <div id="png"></div>
  1137. <div id="name">
  1138. <div id="at"><a href="javascript:void(0)" class="tablink tabzact" onclick="openAlytut(event, 'TabzOne');">@fruitzys</a></div>
  1139. </div>
  1140.  
  1141. </div>
  1142.  
  1143. <!-- END OF SIDEBAR -->
  1144.  
  1145.  
  1146. <!-- START OF POST -->
  1147.  
  1148. <div id="post">
  1149.  
  1150. <!-- INSTA ONE START -->
  1151.  
  1152. <div id="instamain">
  1153.  
  1154. <div id="instatop">
  1155.  
  1156. <span class="iconify" data-icon="mdi:dots-horizontal"></span>
  1157. <div id="username">username</div>
  1158.  
  1159. </div>
  1160.  
  1161. <div id="instabottom">
  1162.  
  1163. <span class="iconify" data-icon="ant-design:heart-filled"></span>
  1164. <span class="iconify" data-icon="uil:comment"></span>
  1165. <span class="iconify" data-icon="uil:location-arrow"></span>
  1166. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1167.  
  1168. <span class="iconify" data-icon="eva:bookmark-fill"></span>
  1169.  
  1170. </div>
  1171.  
  1172. <div id="instaicon"></div>
  1173.  
  1174. <div id="instapost">
  1175. <img src="https://via.placeholder.com/285x170" draggable="false">
  1176. </div>
  1177.  
  1178. </div>
  1179.  
  1180. <!-- INSTA ONE END -->
  1181.  
  1182.  
  1183. <!-- INSTA TWO START -->
  1184.  
  1185. <div id="instamain">
  1186.  
  1187. <div id="instatop">
  1188.  
  1189. <span class="iconify" data-icon="mdi:dots-horizontal"></span>
  1190. <div id="username">username</div>
  1191.  
  1192. </div>
  1193.  
  1194. <div id="instabottom">
  1195.  
  1196. <span class="iconify" data-icon="ant-design:heart-filled"></span>
  1197. <span class="iconify" data-icon="uil:comment"></span>
  1198. <span class="iconify" data-icon="uil:location-arrow"></span>
  1199. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1200.  
  1201. <span class="iconify" data-icon="eva:bookmark-fill"></span>
  1202.  
  1203. </div>
  1204.  
  1205. <div id="instaicon"></div>
  1206.  
  1207. <div id="instapost">
  1208. <img src="https://via.placeholder.com/285x170" draggable="false">
  1209. </div>
  1210.  
  1211. </div>
  1212.  
  1213. <!-- INSTA TWO END -->
  1214.  
  1215. <!--
  1216.  
  1217. you can add more insta post , just copy paste
  1218. the code above and paste below
  1219.  
  1220. -->
  1221.  
  1222.  
  1223. </div>
  1224.  
  1225. <!-- END OF POST -->
  1226.  
  1227. <!--
  1228.  
  1229. *TABS BASE CODE BY ALYOFRP. DO NOT REMOVE THIS CREDIT!
  1230.  
  1231.  
  1232. <!-- BEGIN OF IG TAB -->
  1233.  
  1234.  
  1235. <div id="TabzOne" class="tabzcon alytut" style="display:none">
  1236. <span class="tabzclose"> x </span>
  1237.  
  1238. <div id="mail">
  1239.  
  1240. <span class="iconify" data-icon="fluent:mail-unread-20-filled"></span>
  1241.  
  1242. </div>
  1243.  
  1244. <div id="instasearch">
  1245.  
  1246. <span class="iconify" data-icon="fluent:search-20-regular"></span>
  1247.  
  1248. <div id="instasearchtext">Search . . .</div>
  1249.  
  1250. </div>
  1251.  
  1252. <div id="igiconholder">
  1253. <div id="igicon">
  1254. </div>
  1255. </div>
  1256.  
  1257. <div id="igname">NAME HERE</div>
  1258. <div id="igat">@username</div>
  1259. <div id="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan, mi ut suscipit ultrices, enim leo viverra est, eu suscipit nunc purus eu sem. Aenean vestibulum ipsum at tellus pulvinar, vel sollicitudin urna dignissim. Nulla semper congue magna, sed condimentum nisi convallis vitae. In bibendum sapien ac lacus iaculis accumsan sed imperdiet orci. Maecenas viverra velit mi, a feugiat nibh egestas vel. Etiam feugiat velit felis, hendrerit euismod eros ultrices vel. Fusce molestie augue faucibus, laoreet tortor nec, laoreet lacus. Nam pharetra, arcu dictum bibendum fringilla, orci ipsum euismod lacus, a tristique erat dui nec tellus. Fusce gravida dignissim erat. Quisque a purus posuere, placerat odio nec, elementum ex. Maecenas vitae felis dolor. Nunc vestibulum lobortis risus sed ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam leo erat, venenatis eget ornare eget, porttitor in ipsum.</div>
  1260.  
  1261. </div>
  1262.  
  1263.  
  1264. <!-- END OF IG TAB -->
  1265.  
  1266.  
  1267. <!-- START OF WEB TAB -->
  1268.  
  1269.  
  1270. <div id="TabzTwo" class="tabzcon alytut" style="display:none">
  1271. <span class="tabzclose"> x </span>
  1272.  
  1273. <div id="newtab">
  1274.  
  1275. <div id="tabtext">Google</div>
  1276.  
  1277. <span class="iconify" data-icon="bx:bxl-google"></span>
  1278.  
  1279. <span class="iconify" data-icon="gridicons:cross-small" style="margin-left:125px;"></span>
  1280.  
  1281. </div>
  1282.  
  1283. <div id="searchbase">
  1284.  
  1285. <span class="iconify" data-icon="akar-icons:arrow-left"></span>
  1286. <span class="iconify" data-icon="akar-icons:arrow-right"></span>
  1287. <span class="iconify" data-icon="akar-icons:arrow-clockwise"></span>
  1288.  
  1289. <div id="gsearchbar">
  1290.  
  1291. <div id="gurl">https://google.com/</div>
  1292.  
  1293. </div>
  1294.  
  1295. <div id="gbg">
  1296.  
  1297. <div id="gname">Muse's</div>
  1298. <div id="gsearch">
  1299.  
  1300. <span class="iconify" data-icon="bx:bx-search"></span>
  1301. <span class="iconify" data-icon="ph:microphone-fill" style="margin-left:225px;"></span>
  1302.  
  1303. <div id="gtext">how to get away with <span class="blinking">|</span></div>
  1304.  
  1305. </div>
  1306.  
  1307. </div>
  1308.  
  1309. </div>
  1310.  
  1311. </div>
  1312.  
  1313. <!-- END OF WEB TAB -->
  1314.  
  1315.  
  1316. <!-- START OF FILES TAB -->
  1317.  
  1318.  
  1319. <div id="TabzThree" class="tabzcon alytut" style="display:none">
  1320. <span class="tabzclose"> x </span>
  1321.  
  1322. <div id="filesbase">
  1323.  
  1324. <span class="iconify" data-icon="akar-icons:arrow-left"></span>
  1325. <span class="iconify" data-icon="akar-icons:arrow-right"></span>
  1326. <span class="iconify" data-icon="akar-icons:arrow-clockwise"></span>
  1327.  
  1328. <div id="filesbar">
  1329.  
  1330. <div id="filesearch">QUICK ACCESS</div>
  1331.  
  1332. <span class="iconify" data-icon="dashicons:arrow-down-alt2"></span>
  1333.  
  1334. </div>
  1335.  
  1336. <!-- NOTE: i know this part might look weird in the customize section but i can reassure you that it's working fine on web!! -->
  1337.  
  1338. <div id="folder">
  1339.  
  1340. <a href="/"><span class="iconify" data-icon="entypo:folder"></span></a>
  1341. <a href="/"><span class="iconify" data-icon="entypo:folder"></span></a>
  1342. <a href="/"><span class="iconify" data-icon="entypo:folder"></span></a> <br>
  1343. <a href="/"><span class="iconify" data-icon="entypo:folder"></span></a>
  1344. <a href="/"><span class="iconify" data-icon="entypo:folder"></span></a>
  1345. <a href="/"><span class="iconify" data-icon="entypo:folder"></span></a>
  1346.  
  1347. </div>
  1348.  
  1349. <div id="foldernames">
  1350.  
  1351. <p style="text-align:center; margin-left:-250px;">ONE</p>
  1352. <p style="text-align:center; margin-left:-40px; margin-top:-25px;">TWO</p>
  1353. <p style="text-align:center; margin-left:170px; margin-top:-24px">THREE</p>
  1354. <br>
  1355. <p style="text-align:center; margin-left:-250px; margin-top:80px">FOUR</p>
  1356. <p style="text-align:center; margin-left:-40px; margin-top:-25px">FIVE</p>
  1357. <p style="text-align:center; margin-left:170px; margin-top:-25px">SIX</p>
  1358.  
  1359. </div>
  1360.  
  1361. </div>
  1362.  
  1363.  
  1364. </div>
  1365.  
  1366. <!-- END OF FILES TAB -->
  1367.  
  1368. </div>
  1369. </div>
  1370.  
  1371. <!-- DON'T REMOVE THE CREDITS. THANK YOU. -->
  1372.  
  1373. <div id="credit">
  1374.  
  1375. <a href="https://fruitzys.tumblr.com/" title="credit"><span class="th th-cloud-3-o"></span></a>
  1376.  
  1377. </div>
  1378.  
  1379.  
  1380. </body>
  1381.  
  1382. <script>
  1383. function openAlytut(evt, alytutName) {
  1384. var i, x, tablinks;
  1385. x = document.getElementsByClassName("alytut");
  1386. for (i = 0; i < x.length; i++) {
  1387. x[i].style.display = "none";
  1388. }
  1389. tablinks = document.getElementsByClassName("tablink");
  1390. for (i = 0; i < x.length; i++) {
  1391. tablinks[i].className = tablinks[i].className.replace(" tabzact", "");
  1392. }
  1393. document.getElementById(alytutName).style.display = "block";
  1394. evt.currentTarget.className += " tabzact";
  1395. }
  1396. </script>
  1397.  
  1398.  
  1399.  
  1400. </html>
Advertisement
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!