API tools faq
paste
Advertisement
userbru

about page one.

userbru
Aug 20th, 2021 (edited)
1,197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.  
  6.  
  7. <!-- ABOUT PAGE BY BRU
  8.  
  9. credits:
  10.  
  11. masonry navigation by maziekeen
  12. custom scroll by shythemes
  13. icons by cappuccicons & fontawesome
  14. tooltips by tippy
  15. carousel by yeoli themes
  16. sticky notes by yukoki
  17.  
  18. --->
  19.  
  20. <title>{Title} / about.</title>
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25.  
  26. <!-- FONTS, ICONS, ETC -->
  27.  
  28. <link rel="stylesheet" href="https://static.tumblr.com/svdghan/wUSr83npl/tempcf.css">
  29.  
  30. <script src="https://unpkg.com/feather-icons"></script>
  31. <!-- masonry navigation -->
  32. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  33.  
  34. <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
  35. rel="stylesheet">
  36. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
  37.  
  38.  
  39. <link rel="preconnect" href="https://fonts.googleapis.com">
  40. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  41. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&family=Poppins&display=swap" rel="stylesheet">
  42. <link href="https://fonts.googleapis.com/css2?family=Andika&display=swap" rel="stylesheet">
  43. <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Shrikhand&display=swap" rel="stylesheet">
  44.  
  45.  
  46. <!--yukoki sticky note scripts-->
  47.  
  48.  
  49. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  51. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  52. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  53. <script>
  54. $(function() {
  55. $( "#stickynote1" ).draggable({ handle: "div.dragstickynote1" });
  56. $(".closestickynote1").click(function(){$("#stickynote1").fadeOut();});
  57. });
  58. </script>
  59.  
  60. <script>
  61. $(function() {
  62. $( "#stickynote2" ).draggable({ handle: "div.dragstickynote2" });
  63. $(".closestickynote2").click(function(){$("#stickynote2").fadeOut();});
  64. });
  65. </script>
  66.  
  67.  
  68. <script>
  69. $(function() {
  70. $( "#stickynote3" ).draggable({ handle: "div.dragstickynote3" });
  71. $(".closestickynote3").click(function(){$("#stickynote3").fadeOut();});
  72. });
  73. </script>
  74.  
  75.  
  76. <!--yukoki sticky note scripts end-->
  77.  
  78.  
  79.  
  80. <style>
  81.  
  82. /* TOOLTIPS */
  83. .tippy-tooltip.gradient-theme {
  84. background-image:linear-gradient(to right, #ffb5b9, #d8c5ed);
  85. color:var(--boxes);
  86. text-align:center;
  87. font-family:'Poppins', sans-serif;
  88. font-weight:bold;
  89. text-transform:uppercase;
  90. letter-spacing:1px;
  91. font-size:0.90em;
  92. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  93.  
  94. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  95. fill:var(--text);}
  96.  
  97. /*TUMBLR CONTROLS*/
  98.  
  99.  
  100. .iframe-controls--desktop {
  101. position:fixed;
  102. top:0px;
  103. right:0px;
  104. z-index:214748364789123456789;
  105. filter:invert(100%);
  106. -webkit-filter:invert(100%);
  107. -webkit-transform:scale(0.6,0.6);
  108. -webkit-transform-origin: 100% 0%;
  109. -ms-transform-origin:100% 0%;
  110. -ms-transform:scale(0.6,0.6);
  111. transform:scale(0.6,0.6);
  112. transform-origin:100% 0%;
  113. }
  114.  
  115. /*SCROLLBAR */
  116.  
  117. ::-webkit-scrollbar {
  118. width:17px;
  119. height:17px;
  120. }
  121. ::-webkit-scrollbar {
  122. background-color:rgb(255,255,255); /* background color */
  123. }
  124. ::-webkit-scrollbar-track {
  125. border:8px solid rgb(255,255,255); /* background color */
  126. background-color:rgb(230,230,230); /* light border color */
  127. }
  128. ::-webkit-scrollbar-thumb {
  129. border:8px solid rgb(255,255,255); /* background color */
  130. background-color:rgb(144,144,144); /* dark border color */
  131. min-height:24px;
  132. min-width:24px;
  133. }
  134.  
  135. * {
  136. margin: 0;
  137. padding: 0;
  138. box-sizing: border-box;
  139. }
  140.  
  141. body {
  142. width:700px;
  143. height:600px;
  144. font-family:'ABeeZee';
  145. font-size: 13px;
  146. line-height: 1.5em;
  147. text-align: justify;
  148. padding: 48px;
  149. color:#707070;
  150. background-color: #cabcd1;
  151. text-shadow:1px 1px #c8c1d4;
  152. margin-left:500px;
  153.  
  154. }
  155.  
  156. ::selection {
  157. color:#000;
  158. background-color:#cabcd1;
  159. }
  160.  
  161. a {
  162. color:#833fd1;
  163. text-decoration:none;
  164. -webkit-transition: all 0.3s;
  165. -moz-transition: all 0.3s;
  166. -ms-transition: all 0.3s;
  167. -o-transition: all 0.3s;
  168. transition: all 0.3s;
  169. }
  170.  
  171. a:hover{
  172. color:#000;
  173. -webkit-transition: all 0.3s;
  174. -moz-transition: all 0.3s;
  175. -ms-transition: all 0.3s;
  176. -o-transition: all 0.3s;
  177. transition: all 0.3s;
  178. }
  179.  
  180.  
  181. h1, h2, h3 {
  182. font-family:'Shrikhand';
  183. text-transform:uppercase
  184. letter-spacing:5px;
  185. font-weight:400;
  186. color:#9e91b5;
  187. text-shadow:2px 2px #c8c1d4;
  188. border-bottom:1px solid #eee;
  189. padding:15px;
  190. }
  191.  
  192. /* SIDEBAR */
  193.  
  194.  
  195. .sidebar {
  196. width:300px;
  197. height:320px;
  198. vertical-align:middle;
  199. margin-top:160px;
  200. border-radius:4px;
  201. background:#fff;
  202. margin-left:-400px;
  203. position:fixed;
  204. box-shadow:10px 10px #ebe4ed;
  205. }
  206.  
  207.  
  208. .icon {
  209. padding:50px;
  210.  
  211.  
  212. }
  213.  
  214. .icon img {
  215. width:128px;
  216. height:128px;
  217. border-radius:100%;
  218. display: block;
  219. margin-left: auto;
  220. margin-right: auto;
  221. margin-top:-10px;
  222. border:5px solid #ae8aed;
  223.  
  224. }
  225.  
  226. .sidetitle {
  227. font-size:20px;
  228. text-transform:uppercase;
  229. font-family:'Poppins';
  230. font-weight:bold;
  231. text-align:center;
  232. margin-bottom:10px;
  233. margin-top:-10px;
  234. }
  235.  
  236. .sidelinks {
  237.  
  238. font-family:'ABeeZee';
  239. font-size:20px;
  240. text-transform:uppercase;
  241. text-align:center;
  242. display:block;
  243. border-bottom:1px solid #eee;
  244. border-radius:0.1em;
  245. padding:10px;
  246. margin:auto 3em;
  247. margin-top:10px;
  248. word-spacing:20px;
  249.  
  250.  
  251. }
  252.  
  253.  
  254. .sidelinks a {
  255. margin:auto 0.3em;
  256. }
  257.  
  258.  
  259.  
  260.  
  261.  
  262. /*CAROUSEL*/
  263.  
  264. #container {
  265. width:700px;
  266. display: flex;
  267. justify-content: center;
  268. align-items: center;
  269. margin-left:10px;
  270.  
  271. }
  272.  
  273. #carousel {
  274. flex: initial;
  275. overflow: hidden;
  276. width: 700px;
  277. height: 600px;
  278. margin-top:40px;
  279. border-radius: 4px;
  280. display: block;
  281. background-color: #fff;
  282. box-shadow:10px 10px #ebe4ed;
  283. }
  284.  
  285. .p-wrapper {
  286. position: relative;
  287. padding:10px;
  288. width: 100%;
  289. height: 100%;
  290. transition: transform 0.4s ease-in-out;
  291. }
  292.  
  293. #button_about:checked ~ #carousel .p-wrapper {
  294. -webkit-transform: translateY(0);
  295. transform: translateY(0);
  296. }
  297.  
  298. #button_navi:checked ~ #carousel .p-wrapper {
  299. -webkit-transform: translateY(-100%);
  300. transform: translateY(-100%);
  301. }
  302.  
  303. #button_blogs:checked ~ #carousel .p-wrapper {
  304. -webkit-transform: translateY(-200%);
  305. transform: translateY(-200%);
  306. }
  307.  
  308.  
  309. [class^="panel_"] {
  310. overflow: auto;
  311. position: relative;
  312. width: inherit;
  313. height: inherit;
  314. padding: 48px;
  315.  
  316. }
  317.  
  318. #navigation {
  319. margin-left:0px;
  320. font-size:20px;
  321. font-weight:bold;
  322. text-align:center;
  323. width:700px;
  324. }
  325.  
  326. [class^="label_"] {
  327. display: inline-block;
  328. cursor: pointer;
  329. margin:0 8px;
  330. width: 32px;
  331. height: 32px;
  332. line-height: 32px;
  333. text-align: center;
  334. border-radius: 4px;
  335. color: #aaa;
  336. background-color: #fff;
  337. transition: all 0.3s ease;
  338. }
  339.  
  340. [class^="label_"]:hover {
  341. color: #444;
  342. background-color: #ffeed9;
  343. }
  344.  
  345. #button_about:checked ~ #navigation .label_about,
  346. #button_navi:checked ~ #navigation .label_navi,
  347. #button_blogs:checked ~ #navigation .label_blogs,
  348. cursor: default;
  349. color: #fff;
  350. background-color: #222;
  351. }
  352.  
  353.  
  354. /* ABOUT BOX */
  355.  
  356.  
  357. /* each profile box */
  358. .profile {
  359. margin-bottom: 10px;
  360. outline: 1px solid #f5f5f5;
  361. }
  362.  
  363. /* each row wrapping the first info */
  364. .profile-row {
  365. display: flex;
  366. justify-content: center;
  367. }
  368.  
  369.  
  370. .profile-info {
  371. width: 100%;
  372. display: inline-block;
  373. margin: 5px 15px;
  374. }
  375.  
  376. .profile-title {
  377. font-weight: bold;
  378. font-family:'Poppins';
  379. color:#9e91b5;
  380. text-shadow:1px 1px #c8c1d4;
  381. border-bottom:1px solid #eee;
  382. padding: 6px 5px 0;
  383. display: block;
  384. text-transform: uppercase;
  385. }
  386.  
  387. .profile-description {
  388. max-height: 200px;
  389. padding: 5px 5px 0;
  390. display: inline-block;
  391. overflow: auto;
  392. text-shadow:1px 1px #c8c1d4;
  393. }
  394.  
  395. /* skills */
  396.  
  397.  
  398. .skills {
  399. text-align: right;
  400. margin-left:5px;
  401. font-size:12px;
  402. font-family:'Andika';
  403. font-weight:bold;
  404. padding-top:1px;
  405. Padding-bottom:1px;
  406. padding-right:4px;
  407. border-radius:3px;
  408. margin-bottom:10px;
  409. color:#817c8a;
  410.  
  411. }
  412.  
  413.  
  414. /*--- to change the skill amounts, colors & etc---*/
  415.  
  416. .sk1 {
  417. width: 100%;
  418. background:linear-gradient(to right, #ffb5b9, #d8c5ed);
  419.  
  420. }
  421.  
  422. .sk2 {
  423. width: 95%;
  424. background:linear-gradient(to right, #ffb5b9, #d8c5ed);
  425.  
  426.  
  427. }
  428.  
  429. .sk3 {
  430. width: 25%;
  431. background:linear-gradient(to right, #ffb5b9, #d8c5ed);
  432.  
  433. }
  434.  
  435. .sk4 {
  436. width: 85%;
  437. background:linear-gradient(to right, #ffb5b9, #d8c5ed);
  438.  
  439. }
  440.  
  441.  
  442.  
  443. /* --- skills titles customization */
  444. st {
  445. font-weight:600;
  446. font-size:18px;
  447. font:bold 1em 'Poppins', sans-serif;
  448. margin-left:5px;
  449. letter-spacing:1px;}
  450.  
  451.  
  452. /* social media buttons */
  453.  
  454. .social-media {
  455. display: block;
  456.  
  457. }
  458.  
  459. .social-wrap a {
  460. font-size: 26px;
  461. font-weight:400;
  462. color: #a099ad;
  463. list-style-type: none;
  464. display: inline-block;
  465. padding: 15px 13px 10px;
  466. margin-right:25px;
  467. text-shadow:none;
  468. }
  469.  
  470. .social-wrap a:hover {
  471. color: #ffb5b9;
  472.  
  473. }
  474.  
  475.  
  476. /* NAVIGATION BOX */
  477.  
  478. .masonry-navigation {
  479. width: 100%;
  480. border-bottom: 0px solid #e2e2e2;
  481. margin-bottom:15px;
  482. }
  483.  
  484. .masonry-navigation:last-child {
  485. border:none;
  486. }
  487.  
  488. .masonry-navigation-item.one-column {
  489. width: 100%;
  490. padding: 0 5px;
  491. margin-bottom: 20px;
  492. }
  493.  
  494. .masonry-navigation-item.one-column ul {
  495. display: flex;
  496. flex-wrap: wrap;
  497. margin: 0;
  498. padding: 0;
  499. }
  500.  
  501. /* if you have any problem with one colum lists (ul li) you edit here */
  502. .masonry-navigation-item.one-column ul li {
  503. margin: 4px 15px;
  504. padding: 0;
  505. }
  506.  
  507. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  508. .masonry-navigation-item.two-columns {
  509. width: 240px;
  510. padding: 0 5px;
  511. margin-bottom: 10px;
  512. }
  513.  
  514. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  515. .masonry-navigation-item.three-columns {
  516. width: 160px;
  517. padding: 0 5px;
  518. margin-bottom: 10px;
  519. }
  520.  
  521. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  522. .masonry-navigation-item.scroll {
  523. height:215px;
  524. overflow-y: scroll;
  525. }
  526.  
  527.  
  528.  
  529.  
  530. /* BLOGS BOX */
  531.  
  532. .hover_list {
  533. margin-top:0px;
  534. padding:0px;
  535. width:100%;
  536. }
  537.  
  538.  
  539.  
  540. /* blogs container */
  541. .blogswrap {
  542. overflow:hidden;
  543. margin: 0 auto;
  544. width:560px;
  545. background: #fff;
  546. border:0px solid #efefef;
  547.  
  548. }
  549.  
  550.  
  551. .blogsrow{
  552. margin: 0 5px 0;
  553. overflow:hidden;
  554. }
  555.  
  556.  
  557.  
  558. /* blogs individual boxes */
  559. .blogscontainer {
  560. position:relative;
  561. float:left;
  562. margin:10px;
  563. width: 250px;
  564. height: 150px;
  565. line-height:135%;
  566. background-color:#fcfcfc;
  567. border:1px solid #efefef;
  568. border-radius:4px;
  569. margin-top:30px;
  570. margin-bottom:10px;
  571. margin-right:10px;
  572. overflow-x:hidden;
  573. }
  574.  
  575.  
  576. /* blogs icons */
  577. .blogsimage {
  578. position:absolute;
  579. margin-right:20px;
  580. margin-top:20px;
  581. margin-left:5px;
  582. vertical-align:middle;
  583. padding:3px 3px 3px 3px;
  584. width: 80px;
  585. height: 80px;
  586. border-radius:100%;
  587. border:1px solid #ae8aed;
  588. background: #fff;
  589. }
  590.  
  591. .blogsimage img {
  592. object-fit:cover;
  593. }
  594.  
  595.  
  596. /* blogs right info box */
  597. .blogsinfo {
  598. width: 150px;
  599. height: 130px;
  600. padding:5px;
  601. margin:10px 5px 5px 5px;
  602. margin-left:90px;
  603. background: #fff;
  604. border:1px solid #efefef;
  605. }
  606.  
  607. .blogsinfo li {
  608. list-style:none;
  609. margin:0 px 0;
  610. padding: 0;
  611. }
  612.  
  613.  
  614. /* blog names */
  615. .blogsinfospan {
  616. display:inline-block;
  617. width: 140px;
  618. text-transform: uppercase;
  619. padding-bottom:5px;
  620. margin:5px 5px;
  621. text-align: left;
  622. border-bottom: solid 1px #efefef;
  623. word-break:break-word;
  624. vertical-align:middle;
  625. }
  626.  
  627.  
  628. /* blogs links */
  629. .blogslinks {
  630. text-transform: lowercase;
  631. text-align: left;
  632. overflow:hidden;
  633. }
  634.  
  635.  
  636. .blogslinks ul {
  637. margin:0;
  638. padding:0;
  639. list-style:none;
  640. }
  641.  
  642. .blogslinks li {
  643. margin:0 auto;
  644. }
  645.  
  646.  
  647. .blogslinks ul li:before {
  648. content:none;
  649. }
  650.  
  651.  
  652. /*** STICKY NOTES **/
  653.  
  654.  
  655. #stickynote1 {
  656. width: 200px;
  657. margin-bottom: 20px;
  658. position: fixed;
  659. border-radius:2px;
  660. z-index: 100000000000;
  661. top: 80px; /** position from top of screen **/
  662. right: 100px; /** position from left of screen **/
  663. }
  664.  
  665. #stickynote1 {
  666. width: 200px; /** width of your sticky note **/
  667. background-color: #f0d1ff; /** background colour **/
  668. }
  669.  
  670. .dragstickynote1 {
  671. font-family: 'ABeezee';
  672. font-size: 13px;
  673. text-transform: uppercase;
  674. letter-spacing: 1px;
  675. padding: 10px;
  676. color:#7c7785;
  677. background-color:#ffb5b9;
  678. }
  679.  
  680. .closestickynote1 {
  681. cursor: pointer;
  682. margin-left: 168px;
  683. width: 32px;
  684. height: 32px;
  685. line-height: 32px;
  686. font-family: arial;
  687. font-size: 10px;
  688. position: absolute;
  689. text-align: center;
  690. float: right;
  691. background-color: #ff96af;
  692. }
  693.  
  694. #stickynote2 {
  695. width: 300px;
  696. margin-bottom: 20px;
  697. position: fixed;
  698. border-radius:2px;
  699. z-index: 100000000000;
  700. top: 180px; /** position from top of screen **/
  701. right: 300px; /** position from left of screen **/
  702. }
  703.  
  704. #stickynote2 {
  705. width: 300px; /** width of your sticky note **/
  706. background-color: #f0d1ff; /** background colour **/
  707. }
  708.  
  709. .dragstickynote2 {
  710. font-family: 'ABeezee';
  711. font-size: 13px;
  712. text-transform: uppercase;
  713. letter-spacing: 1px;
  714. padding: 10px;
  715. color:#7c7785;
  716. background-color:#ffb5b9;
  717. }
  718.  
  719. .closestickynote2 {
  720. cursor: pointer;
  721. margin-left: 268px;
  722. width: 32px;
  723. height: 32px;
  724. line-height: 32px;
  725. font-family: arial;
  726. font-size: 10px;
  727. position: absolute;
  728. text-align: center;
  729. float: right;
  730. background-color: #ff96af;
  731. }
  732.  
  733.  
  734. #stickynote3 {
  735. width: 300px;
  736. margin-bottom: 20px;
  737. position: fixed;
  738. border-radius:2px;
  739. z-index: 100000000000;
  740. top: 380px; /** position from top of screen **/
  741. right: 150px; /** position from left of screen **/
  742. }
  743.  
  744. #stickynote3 {
  745. width: 300px; /** width of your sticky note **/
  746. background-color: #f0d1ff; /** background colour **/
  747. }
  748.  
  749. .dragstickynote3 {
  750. font-family: 'ABeezee';
  751. font-size: 13px;
  752. text-transform: uppercase;
  753. letter-spacing: 1px;
  754. padding: 10px;
  755. color:#7c7785;
  756. background-color:#ffb5b9;
  757. }
  758.  
  759. .closestickynote3 {
  760. cursor: pointer;
  761. margin-left: 268px;
  762. width: 32px;
  763. height: 32px;
  764. line-height: 32px;
  765. font-family: arial;
  766. font-size: 10px;
  767. position: absolute;
  768. text-align: center;
  769. float: right;
  770. background-color: #ff96af;
  771. }
  772. .stickynotecontent {
  773. padding: 10px;
  774. font-family: 'ABeeZee';
  775. font-size: 10px;
  776. }
  777.  
  778. .stickynotecontent b,strong {
  779. color: #000000; /** colour of bolded text **/
  780. }
  781.  
  782. .stickynotecontent i,em {
  783. color: #666666; /** colour of italic text **/
  784. }
  785.  
  786. .stickynotecontent a {
  787. text-decoration: underline;
  788. color: #666666; /** colour of linked text **/
  789. }
  790.  
  791. .stickynotecontent a:hover {
  792. color: #aaaaaa; /** colour of hovered linked text **/
  793. }
  794.  
  795.  
  796. /*credit */
  797. footer {
  798. width:100%;
  799. font-size:12px;
  800. font-family:'ABeeZee';
  801. font-weight:bold;
  802. margin:20px auto;
  803. text-align:center;
  804. }
  805.  
  806.  
  807.  
  808. </style>
  809.  
  810. </head>
  811. <body>
  812.  
  813.  
  814. <div class="sidebar">
  815.  
  816. <div class="icon">
  817. <!-- your tumblr icon will show up here, don't worry if it doesn't show up in the customize tab, when you save the page it will show up. if you want to change it to a speciic picture, replace {PortrailtURL-128} with the image link you want. The best size is 128px-128px unless you customize it -->
  818. <img src="{PortraitURL-128}">
  819. </div>
  820. <div class="sidetitle">{Title}</div>
  821. <div class="sidelinks">
  822. <a href="/" title="BACK"><i class="cp cp-home-o"></i></a>
  823. <a href="/ask" title="MESSAGE"><i class="cp cp-envelope-o"></i></a>
  824. <a href="/archive" title="ARCHIVE"><i class="cp cp-folder-o"></i></a>
  825. </div>
  826.  
  827. </div>
  828.  
  829.  
  830.  
  831. <!-- IF YOU WOULD LIKE TO CHANGE THE ICON ON ANY OF THESE, HEAD TO CAPPUCCICONS.COM AND BROWSE THROUGH THEIR LIST TO FIND ONES YOU LIKE! -->
  832.  
  833. <!----- CAROUSEL ----->
  834.  
  835.  
  836.  
  837. <div class="container">
  838.  
  839.  
  840.  
  841. <input hidden type="radio" name="carousel-control" id="button_about" checked/>
  842. <input hidden type="radio" name="carousel-control" id="button_navi"/>
  843. <input hidden type="radio" name="carousel-control" id="button_blogs"/>
  844.  
  845.  
  846. <div id="navigation">
  847. <label for="button_about" class="label_about" title="about"> <span> <i class="cp cp-sunflower-o"></i>
  848. </span> </label>
  849. <label for="button_navi" class="label_navi" title="navigation"> <span> <i class="cp cp-pikachu"></i>
  850. </span> </label>
  851. <label for="button_blogs" class="label_blogs" title="blogs"> <span> <i class="cp cp-app-o"></i>
  852. </span> </label>
  853.  
  854. </div> <!-- // #navigation -->
  855.  
  856. <div id="carousel">
  857. <div class="p-wrapper">
  858.  
  859.  
  860. <!-- ABOUT BOX -->
  861.  
  862. <section class="panel_a">
  863. <h1>info.</h1>
  864. <div class="profile">
  865. <div class="profile-row">
  866. <div class="profile-info">
  867. <div class="profile-title"><i class="cp cp-stars-o"></i> name.</div>
  868. <div class="profile-description">your name here</div>
  869. </div> <!-- this closes the profile-info -->
  870. <div class="profile-info">
  871. <div class="profile-title"><i class="cp cp-ufo-o"></i> nickname.</div>
  872. <div class="profile-description">your nickname here</div>
  873. </div> <!-- this closes the profile-info -->
  874. </div><!--- this closes the profile row -->
  875. <div class="profile-row">
  876. <div class="profile-info">
  877. <div class="profile-title"><i class="cp cp-cloud-o"></i> pronouns.</div>
  878. <div class="profile-description">your pronouns here</div>
  879. </div> <!-- this closes the profile-info -->
  880. <div class="profile-info">
  881. <div class="profile-title"><i class="cp cp-cake-o"></i> age.</div>
  882. <div class="profile-description">your age here</div>
  883. </div> <!-- this closes the profile-info -->
  884. </div> <!-- this closes the profile-row -->
  885. <div class="profile-row">
  886. <div class="profile-info">
  887. <div class="profile-title"><i class="cp cp-rainbow-o"></i> sexuality.</div>
  888. <div class="profile-description">your sexuality here</div>
  889. </div> <!-- this closes the profile-info -->
  890. <div class="profile-info">
  891. <div class="profile-title"><i class="cp cp-earth-o"></i> country.</div>
  892. <div class="profile-description">your country here</div>
  893. </div> <!-- this closes the profile-info -->
  894. </div> <!-- this closes the profile-row -->
  895. <div class="profile-row">
  896. <div class="profile-info">
  897. <div class="profile-title"><i class="cp cp-star-o"></i> race & ethnicity.</div>
  898. <div class="profile-description">your race & ethnicity here</div>
  899. </div> <!-- this closes the profile-info -->
  900. <div class="profile-info">
  901. <div class="profile-title"><i class="cp cp-z-gemini"></i> zodiac.</div>
  902. <div class="profile-description">your zodiac info here</div>
  903. </div> <!-- this closes the profile-info -->
  904. </div> <!-- this closes the profile-row -->
  905. <div class="profile-row">
  906. <div class="profile-info">
  907. <div class="profile-title"><i class="cp cp-holly-o"></i> about me. </div>
  908. <div class="profile-description">You can write whatever you want here. <b>You can bold texts</b>, <i>italicize them</i>, you can <a href="/">add links</a>, <strike>strike them</strike>, <u>underline them</u>... <p>
  909.  
  910. And you can add new paragraphs, too.</p>
  911.  
  912. </div>
  913. </div> <!-- this closes the profile-info -->
  914. </div> <!-- this closes the profile-row -->
  915. </div> <!-- this closes the profile -->
  916.  
  917.  
  918.  
  919. <h1>skills</h1>
  920.  
  921. <div class="profile">
  922.  
  923.  
  924. <div class="skillbox">
  925.  
  926. <br>
  927. <st>SKILL TITLE NUMBER ONE GOES HERE</st>
  928. <div class="skills sk1">100%</div>
  929.  
  930. <st>SKILL TITLE NUMBER TWO GOES HERE</st>
  931. <div class="skills sk2">95%</div>
  932.  
  933. <st>SKILL TITLE NUMBER 3 GOES HERE</st>
  934. <div class="skills sk3">25%</div>
  935. </div>
  936.  
  937. <st>SKILL TITLE NUMBER 4 GOES HERE</st>
  938. <div class="skills sk4">85%</div>
  939. </div>
  940.  
  941.  
  942. <h1>likes & dislikes</h1>
  943. <div class="profile">
  944. <div class="profile-row">
  945. <div class="profile-info">
  946. <div class="profile-title"><i class="cp cp-heart-o"></i> likes </div>
  947. <div class="profile-description">List things you like here.
  948. </div>
  949. </div> <!-- this closes the profile-info -->
  950. <div class="profile-info">
  951. <div class="profile-title"><i class="cp cp-forbidden"></i> dislikes</div>
  952. <div class="profile-description">And things you dislike go here. </div>
  953. </div> <!-- this closes the profile-info -->
  954. </div> <!-- this closes the profile-row -->
  955.  
  956. </div> <!-- this closes the profile -->
  957.  
  958. <h1>socials</h1>
  959.  
  960. <div class="profile">
  961.  
  962. <div class="social-media">
  963.  
  964. <div class="social-wrap">
  965.  
  966. <a href="https://twitter.com/" title="twitter"><i class="cp cp-twitter"></i></a>
  967. <a href="https://instagram.com/" title="instagram"><i class="cp cp-instagram-o"></i></a> <a href="https://open.spotify.com/user/" title="spotify"><i class="cp cp-spotify"></i></a>
  968. <a href="https://www.youtube.com/channel/" title="youtube"><i class="cp cp-youtube"></i></a>
  969. <a href="https://discord.com/users/" title="discord"><i class="cp cp-discord"></i></a>
  970. <a href="https://ko-fi.com/" title="ko-fi"><i class="cp cp-ko-fi"></i></a>
  971. <a href="https://redbubble.com/people/" title="redbubble a"><i class="cp cp-shop-o"></i></a><br>
  972. <a href="https://www.paypal.com/paypalme/" title="paypal me"><i class="cp cp-paypal"></i></a>
  973. <a href="https://archiveofourown.org/users/" title="ao3"><i class="cp cp-ao3"></i></a>
  974. <a href="https://letterboxd.com/" title="letterboxd"><i class="cp cp-more"></i></a>
  975. <a href="https://weheartit.com/" title="we heart it"><i class="cp cp-weheartit-o"></i></a>
  976. <a href="https://br.pinterest.com/" title="pinterest"><i class="cp cp-pinterest"></i></a>
  977. <a href="https://www.deviantart.com/" title="deviantart"><i class="cp cp-deviantart"></i></a>
  978.  
  979.  
  980. </div>
  981.  
  982. </div>
  983. </section>
  984.  
  985.  
  986. <!-- END ABOUT BOX -->
  987.  
  988. <!-- BEGINNING NAVIGATION BOX -->
  989.  
  990. <section class="panel_b"> <h2> navigation. </h2>
  991.  
  992. <div class="masonry-navigation">
  993. <div class="masonry-navigation-item one-column">
  994.  
  995. <p><br><strong><i class="cp cp-pencil-o"></i> title. </strong></p>
  996. <ul>
  997. <li><a href="/tagged/" title="title">tag</a></li>
  998. <li><a href="/tagged/" title="title">tag</a></li>
  999. <li><a href="/tagged/" title="title">tag</a></li>
  1000. <li><a href="/tagged/" title="title">tag</a></li>
  1001. <li><a href="/tagged/" title="title">tag</a></li>
  1002. <li><a href="/tagged/" title="title">tag</a></li>
  1003. <li><a href="/tagged/" title="title">tag</a></li>
  1004. <li><a href="/tagged/" title="title">tag</a></li>
  1005. <li><a href="/tagged/" title="title">tag</a></li>
  1006. <li><a href="/tagged/" title="title">tag</a></li>
  1007. <li><a href="/tagged/" title="title">tag</a></li>
  1008. </ul>
  1009. </div></div>
  1010.  
  1011. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  1012. <p><strong><i class="cp cp-tv"></i> title </strong></p>
  1013. <ul>
  1014. <li><a href="/tagged/" title="title">tag</a></li>
  1015. <li><a href="/tagged/" title="title">tag</a></li>
  1016. <li><a href="/tagged/" title="title">tag</a></li>
  1017. <li><a href="/tagged/" title="title">tag</a></li>
  1018. <li><a href="/tagged/" title="title">tag</a></li>
  1019. <li><a href="/tagged/" title="title">tag</a></li>
  1020. <li><a href="/tagged/" title="title">tag</a></li>
  1021. <li><a href="/tagged/" title="title">tag</a></li>
  1022. <li><a href="/tagged/" title="title">tag</a></li>
  1023. <li><a href="/tagged/" title="title">tag</a></li>
  1024. <li><a href="/tagged/" title="title">tag</a></li>
  1025. </ul>
  1026. </div>
  1027.  
  1028.  
  1029. <div class="profile-title" style="border-bottom:none; margin-top:10px; margin-bottom:10px"> main tags.</div>
  1030.  
  1031. <div class="masonry-navigation">
  1032. <div class="masonry-navigation-item two-columns">
  1033. <p><strong><i class="cp cp-planet-o"></i> general blog tags</strong></p>
  1034. <ul>
  1035. <li><a href="/tagged/" title="title">tag</a></li>
  1036. <li><a href="/tagged/" title="title">tag</a></li>
  1037. <li><a href="/tagged/" title="title">tag</a></li>
  1038. <li><a href="/tagged/" title="title">tag</a></li>
  1039. <li><a href="/tagged/" title="title">tag</a></li>
  1040. <li><a href="/tagged/" title="title">tag</a></li>
  1041. <li><a href="/tagged/" title="title">tag</a></li>
  1042. <li><a href="/tagged/" title="title">tag</a></li>
  1043. <li><a href="/tagged/" title="title">tag</a></li>
  1044. <li><a href="/tagged/" title="title">tag</a></li>
  1045. <li><a href="/tagged/" title="title">tag</a></li>
  1046. </ul>
  1047. </div>
  1048.  
  1049.  
  1050. <div class="masonry-navigation-item two-columns">
  1051. <p><strong><i class="cp cp-movie"></i> favorite tv & film</strong></p>
  1052. <ul>
  1053. <li><a href="/tagged/" title="title">tag</a></li>
  1054. <li><a href="/tagged/" title="title">tag</a></li>
  1055. <li><a href="/tagged/" title="title">tag</a></li>
  1056. <li><a href="/tagged/" title="title">tag</a></li>
  1057. <li><a href="/tagged/" title="title">tag</a></li>
  1058. <li><a href="/tagged/" title="title">tag</a></li>
  1059. <li><a href="/tagged/" title="title">tag</a></li>
  1060. <li><a href="/tagged/" title="title">tag</a></li>
  1061. <li><a href="/tagged/" title="title">tag</a></li>
  1062. <li><a href="/tagged/" title="title">tag</a></li>
  1063. <li><a href="/tagged/" title="title">tag</a></li>
  1064. </ul>
  1065. </div>
  1066. <div class="masonry-navigation-item two-columns">
  1067. <p><strong><i class="cp cp-music-note"></i> favorite artists</strong></p>
  1068. <ul>
  1069. <li><a href="/tagged/" title="title">tag</a></li>
  1070. <li><a href="/tagged/" title="title">tag</a></li>
  1071. <li><a href="/tagged/" title="title">tag</a></li>
  1072. <li><a href="/tagged/" title="title">tag</a></li>
  1073. <li><a href="/tagged/" title="title">tag</a></li>
  1074. <li><a href="/tagged/" title="title">tag</a></li>
  1075. <li><a href="/tagged/" title="title">tag</a></li>
  1076. <li><a href="/tagged/" title="title">tag</a></li>
  1077. <li><a href="/tagged/" title="title">tag</a></li>
  1078. <li><a href="/tagged/" title="title">tag</a></li>
  1079. <li><a href="/tagged/" title="title">tag</a></li>
  1080. </ul>
  1081. </div>
  1082. <div class="masonry-navigation-item two-columns">
  1083. <p><strong><i class="cp cp-ship-o"></i> favorite ships</strong></p>
  1084. <ul>
  1085. <li><a href="/tagged/" title="title">tag</a></li>
  1086. <li><a href="/tagged/" title="title">tag</a></li>
  1087. <li><a href="/tagged/" title="title">tag</a></li>
  1088. <li><a href="/tagged/" title="title">tag</a></li>
  1089. <li><a href="/tagged/" title="title">tag</a></li>
  1090. <li><a href="/tagged/" title="title">tag</a></li>
  1091. <li><a href="/tagged/" title="title">tag</a></li>
  1092. <li><a href="/tagged/" title="title">tag</a></li>
  1093. <li><a href="/tagged/" title="title">tag</a></li>
  1094. <li><a href="/tagged/" title="title">tag</a></li>
  1095. <li><a href="/tagged/" title="title">tag</a></li>
  1096. </ul>
  1097.  
  1098.  
  1099. </section>
  1100.  
  1101.  
  1102. <!-- END NAVIGATION BOX -->
  1103.  
  1104. <!-- BEGINNING BLOGS BOX -->
  1105.  
  1106. <section class="panel_c"> <h1>BLOGS I'M IN</h2>
  1107.  
  1108. <!-- TO ADD MORE
  1109.  
  1110. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" />
  1111. <div class="blogsinfo">
  1112. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1113. <div class="blogslinks">
  1114. <ul>
  1115. <li><i>+ info about the blog</i></li>
  1116. </ul>
  1117. </div>
  1118. </div>
  1119. </div>
  1120.  
  1121. -->
  1122.  
  1123. <div class="blogswrap"><!-- BEGINNING OF FIRST ROW -->
  1124.  
  1125.  
  1126. <div class="blogsrow"><!-- START BLOG --->
  1127.  
  1128. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- REPLACE USERBRU WITH THE URL OF YOUR BLOG-->
  1129. <div class="blogsinfo">
  1130. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1131. <div class="blogslinks">
  1132. <ul>
  1133. <li><i>+ info about the blog</i></li>
  1134. </ul>
  1135. </div>
  1136. </div>
  1137. </div>
  1138.  
  1139.  
  1140. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- REPLACE USERBRU WITH THE URL OF YOUR BLOG-->
  1141. <div class="blogsinfo">
  1142. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1143. <div class="blogslinks">
  1144. <ul>
  1145. <li><i>+ info about the blog</i></li>
  1146. </ul>
  1147. </div>
  1148. </div>
  1149. </div>
  1150.  
  1151.  
  1152. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- REPLACE USERBRU WITH THE URL OF YOUR BLOG-->
  1153. <div class="blogsinfo">
  1154. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1155. <div class="blogslinks">
  1156. <ul>
  1157. <li><i>+ info about the blog</i></li>
  1158. </ul>
  1159. </div>
  1160. </div>
  1161. </div>
  1162.  
  1163. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- REPLACE USERBRU WITH THE URL OF YOUR BLOG-->
  1164. <div class="blogsinfo">
  1165. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1166. <div class="blogslinks">
  1167. <ul>
  1168. <li><i>+ info about the blog</i></li>
  1169. </ul>
  1170. </div>
  1171. </div>
  1172. </div>
  1173.  
  1174.  
  1175. </div>
  1176. </div>
  1177. </section>
  1178.  
  1179. <!-- END OF BLOGS SECTION -->
  1180.  
  1181.  
  1182.  
  1183. </div> <!-- // .p-wrapper -->
  1184. </div> <!-- // #carousel -->
  1185.  
  1186.  
  1187.  
  1188. </div> <!-- // #container -->
  1189. </div>
  1190.  
  1191. <!-- sticky notes -->
  1192.  
  1193. <div id="stickynote1">
  1194. <div class="closestickynote1">X</div>
  1195. <div class="dragstickynote1">> sticky note #1</div>
  1196. <div class="stickynotecontent">
  1197. Write whatever you want here!
  1198. </div>
  1199. </div><!--stickynote1 end-->
  1200.  
  1201.  
  1202. <div id="stickynote2">
  1203. <div class="closestickynote2">X</div>
  1204. <div class="dragstickynote2">> sticky note #2</div>
  1205. <div class="stickynotecontent">
  1206. You can:<br>
  1207. <li>Add lists!</li>
  1208. <li><b>Bold</b> and <i>italicize</i> and <strike>strike</strike> and <u>underline</u> text, too!</li>
  1209. </div>
  1210. </div><!--stickynote1 end-->
  1211.  
  1212.  
  1213. <div id="stickynote3">
  1214. <div class="closestickynote3">X</div>
  1215. <div class="dragstickynote3">> sticky note #3</div>
  1216. <div class="stickynotecontent">
  1217. You can also <a href="/">add links</a>!
  1218. </div>
  1219. </div><!--stickynote1 end-->
  1220.  
  1221.  
  1222.  
  1223.  
  1224.  
  1225.  
  1226.  
  1227. <script type="text/javascript">
  1228. // masonry navigation
  1229. var elements = document.getElementsByClassName('masonry-navigation');
  1230. var msnry;
  1231. var nElements = elements.length;
  1232. for(var i = 0; i < nElements; i++){
  1233. msnry = new Masonry( elements[i], {
  1234. // columnWidth: 268,
  1235. gutter: 10,
  1236. itemSelector: '.masonry-navigation-item',
  1237. });
  1238. }
  1239. </script>
  1240.  
  1241. <!-- CREDIT DO NOT REMOVE!!!!!!!! -->
  1242.  
  1243. <footer><a href="https://geminicodes.tumblr.com/">code by bru. <i class="cp cp-moon-o"></i></a> </footer>
  1244.  
  1245. </body>
  1246.  
  1247.  
  1248.  
  1249. <!--- TOOLTIPS --->
  1250.  
  1251. <script src="https://unpkg.com/popper.js@1"></script>
  1252. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1253. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1254.  
  1255.  
  1256.  
  1257. <script>
  1258.  
  1259. tippy('label', {
  1260. theme: 'gradient',
  1261. arrow: false,
  1262. zIndex: 9999999999,
  1263. maxWidth: 300,
  1264.  
  1265. content(reference) {
  1266. const title = reference.getAttribute('title');
  1267. reference.removeAttribute('title');
  1268. return title;
  1269. },
  1270. });
  1271.  
  1272. tippy('a[title]', {
  1273. theme: 'gradient',
  1274. arrow: false,
  1275. zIndex: 9999999999,
  1276. maxWidth: 300,
  1277.  
  1278. content(reference) {
  1279. const title = reference.getAttribute('title');
  1280. reference.removeAttribute('title');
  1281. return title;
  1282. },
  1283. });
  1284.  
  1285.  
  1286. </script>
  1287.  
  1288.  
  1289.  
  1290. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!