API tools faq
paste
Advertisement
userbru

about page (theme 23)

userbru
Feb 15th, 2022
785
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10.  
  11. <!----===== ICONS AND FONTS ===== -->
  12. <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
  13.  
  14. <link rel="preconnect" href="https://fonts.googleapis.com">
  15. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  16. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
  18. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  19. <script src="//pull.cappuccicons.com/cpf.js"></script>
  20. <script src="https://unpkg.com/phosphor-icons"></script>
  21.  
  22.  
  23. <!-- scripts -->
  24. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  25.  
  26.  
  27. <title>{Title} / about.</title>
  28.  
  29. <style>
  30.  
  31. * {
  32. margin: 0;
  33. padding: 0;
  34. box-sizing: border-box;
  35. font-family: 'Poppins', sans-serif;
  36. }
  37.  
  38.  
  39.  
  40. ::-webkit-scrollbar {
  41. width:7px;
  42. height:7px;
  43. }
  44. ::-webkit-scrollbar {
  45. background-color:#fff;
  46. }
  47. ::-webkit-scrollbar-track {
  48. border:8px solid #fff;
  49. background-color:#fff;
  50. }
  51. ::-webkit-scrollbar-thumb {
  52. border:3px solid #fff;
  53. background-color:#e2e2e2;
  54. min-height:24px;
  55. min-width:24px;
  56. }
  57.  
  58.  
  59. /* TOOLTIPS */
  60. .tippy-tooltip.gradient-theme {
  61. background-image:linear-gradient(to right, #ffb3b3, #ffdada);
  62. color:var(--boxes);
  63. text-align:center;
  64. font-family:'Public Sans', sans-serif;
  65. font-weight:bold;
  66. text-transform:uppercase;
  67. letter-spacing:1px;
  68. font-size:0.90em;
  69. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  70.  
  71. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  72. fill:var(--text);}
  73.  
  74.  
  75. /* ----- TUMBLR CONTROLS ---- */
  76.  
  77.  
  78. iframe.tmblr-iframe {
  79. z-index:99999999999999!important;
  80. top: 15px!important;
  81. right: 15px!important;
  82. opacity:0;
  83. color:white!important;
  84. padding-right:38px;
  85. -webkit-transform:scale(0.75);
  86. -ms-transform:scale(0.75);
  87. transform:scale(0.75);
  88. -webkit-transform-origin:100% 0;
  89. -ms-transform-origin:100% 0;
  90. transform-origin:100% 0;
  91.  
  92. cursor: pointer;
  93. }
  94. iframe.tmblr-iframe:hover {
  95. opacity:1!important;
  96. }
  97. .tumblrcontrols {
  98. position:fixed;
  99. top:23px;
  100. right:15px;
  101. z-index:999999999;
  102. cursor: pointer;
  103. color:#9e90c3;
  104. }
  105.  
  106.  
  107. .tumblrcontrols:hover {
  108. stroke: var(--bodyLinkHoverColor);
  109. }
  110.  
  111.  
  112.  
  113. /* SIDE MENU */
  114. :root{
  115. /* ===== Colors ===== */
  116. --body-color: #E4E9F7;
  117. --sidemenu-color: #FFF;
  118. --primary-color:#9e90c3;
  119. --primary-color-light: #F6F5FF;
  120. --toggle-color: #DDD;
  121. --text-color: #707070;
  122.  
  123. /* ====== Transition ====== */
  124. --tran-03: all 0.2s ease;
  125. --tran-03: all 0.3s ease;
  126. --tran-04: all 0.3s ease;
  127. --tran-05: all 0.3s ease;
  128. }
  129.  
  130. body {
  131. min-height: 100vh;
  132. background-color: #f3f3f3;
  133. transition: var(--tran-05);
  134. opacity: 1;
  135. transition: 1s opacity;
  136. }
  137.  
  138. body.fade-out {
  139. opacity: 0;
  140. transition: none;
  141. }
  142.  
  143. html {
  144. background-color: #f3f3f3;
  145. }
  146.  
  147. ::selection {
  148. background-color: var(--primary-color);
  149. color: #fff;
  150. }
  151.  
  152.  
  153. a {
  154. color:#c3909c;
  155. text-decoration:none;
  156. position:relative;
  157. cursor:pointer;
  158. -webkit-transition:all 0.2s;
  159. -moz-transition:all 0.2s;
  160. -ms-transition:all 0.2s;
  161. -o-transition:all 0.2s;
  162. transition:all 0.2s;
  163. }
  164.  
  165. a:hover {
  166. text-decoration:none;
  167. color:#59516e;
  168. -webkit-transition:all 0.2s;
  169. -moz-transition:all 0.2s;
  170. -ms-transition:all 0.2s;
  171. -o-transition:all 0.2s;
  172. transition:all 0.2s;
  173. }
  174.  
  175.  
  176. a::before {
  177. content: "";
  178. position: absolute;
  179. display: block;
  180. width: 100%;
  181. height: 2px;
  182. bottom: 0;
  183. left: 0;
  184. background-image:linear-gradient(to right, #9e90c3, #c3909c);
  185. transform: scaleX(0);
  186. transition: transform 0.3s ease;
  187. }
  188.  
  189. a:hover::before {
  190. transform: scaleX(1);
  191. }
  192.  
  193.  
  194. /*--- side menu --*/
  195.  
  196. .sidemenu{
  197. position: fixed;
  198. top: -10px;
  199. left: 0;
  200. height: 100%;
  201. width: 250px;
  202. padding: 10px 14px;
  203. background: var(--sidemenu-color);
  204. transition: var(--tran-05);
  205. z-index: 100;
  206. }
  207. .sidemenu.close{
  208. width: 80px;
  209. }
  210.  
  211. /* ===== Reusable code - Here ===== */
  212. .sidemenu li{
  213. height: 50px;
  214. list-style: none;
  215. display: flex;
  216. align-items: center;
  217. margin-top: 10px;
  218. }
  219.  
  220. .sidemenu header .image,
  221. .sidemenu .icon{
  222. min-width: 60px;
  223. border-radius: 6px;
  224. }
  225.  
  226. .sidemenu .icon{
  227. min-width: 60px;
  228. border-radius: 6px;
  229. height: 100%;
  230. display: flex;
  231. align-items: center;
  232. justify-content: center;
  233. font-size: 20px;
  234. }
  235.  
  236. .sidemenu .text,
  237. .sidemenu .icon{
  238. color: var(--text-color);
  239. transition: var(--tran-03);
  240. }
  241.  
  242. .sidemenu .text{
  243. font-size: 17px;
  244. font-weight: 500;
  245. white-space: nowrap;
  246. opacity: 1;
  247. }
  248. .sidemenu.close .text{
  249. opacity: 0;
  250. }
  251. /* =========================== */
  252.  
  253. .sidemenu header{
  254. position: relative;
  255. }
  256.  
  257. .sidemenu header .image-text{
  258. display: flex;
  259. align-items: center;
  260. margin-top:10px;
  261. }
  262. .sidemenu header .logo-text{
  263. display: flex;
  264. flex-direction: column;
  265. }
  266. header .image-text .title {
  267. margin-top: 2px;
  268. font-size: 15px;
  269. font-weight: 600;
  270. }
  271.  
  272. header .image-text .user {
  273. font-size: 13px;
  274. margin-top: -2px;
  275. display: block;
  276. }
  277.  
  278. .sidemenu header .image{
  279. display: flex;
  280. align-items: center;
  281. justify-content: center;
  282. }
  283.  
  284. .sidemenu header .image img{
  285. width: 40px;
  286. border-radius: 6px;
  287. }
  288.  
  289. .sidemenu header .toggle{
  290. position: absolute;
  291. top: 50%;
  292. right: -25px;
  293. transform: translateY(-50%) rotate(180deg);
  294. height: 25px;
  295. width: 25px;
  296. background-color: var(--primary-color);
  297. color: var(--sidemenu-color);
  298. border-radius: 50%;
  299. display: flex;
  300. align-items: center;
  301. justify-content: center;
  302. font-size: 22px;
  303. cursor: pointer;
  304. transition: var(--tran-05);
  305. }
  306.  
  307. .sidemenu.close .toggle{
  308. transform: translateY(-50%) rotate(0deg);
  309. }
  310.  
  311. .sidemenu .menu{
  312. margin-top: 40px;
  313. }
  314.  
  315. .sidemenu li.search-box{
  316. border-radius: 6px;
  317. background-color: var(--primary-color-light);
  318. cursor: pointer;
  319. transition: var(--tran-05);
  320. }
  321.  
  322. .sidemenu li.search-box input{
  323. height: 100%;
  324. width: 100%;
  325. outline: none;
  326. border: none;
  327. background-color: var(--primary-color-light);
  328. color: var(--text-color);
  329. border-radius: 6px;
  330. font-size: 17px;
  331. font-weight: 500;
  332. transition: var(--tran-05);
  333. }
  334. .sidemenu li a{
  335. list-style: none;
  336. height: 100%;
  337. background-color: transparent;
  338. display: flex;
  339. align-items: center;
  340. height: 100%;
  341. width: 100%;
  342. border-radius: 6px;
  343. text-decoration: none;
  344. transition: var(--tran-03);
  345. }
  346.  
  347. .sidemenu li a:hover{
  348. background-color: var(--primary-color);
  349. }
  350. .sidemenu li a:hover .icon,
  351. .sidemenu li a:hover .text{
  352. color: var(--sidemenu-color);
  353. }
  354.  
  355.  
  356. .sidemenu .menu-bar{
  357. height: calc(100% - 55px);
  358. display: flex;
  359. flex-direction: column;
  360. justify-content: space-between;
  361. overflow-y: scroll;
  362. }
  363. .menu-bar::-webkit-scrollbar{
  364. display: none;
  365. }
  366. .sidemenu .menu-bar .mode{
  367. border-radius: 6px;
  368. background-color: var(--primary-color-light);
  369. position: relative;
  370. transition: var(--tran-05);
  371. }
  372.  
  373. .menu-bar .mode .sun-moon{
  374. height: 50px;
  375. width: 60px;
  376. }
  377.  
  378. .mode .sun-moon i{
  379. position: absolute;
  380. }
  381. .mode .sun-moon i.sun{
  382. opacity: 0;
  383. }
  384.  
  385.  
  386. .menu-bar .bottom-content .toggle-switch{
  387. position: absolute;
  388. right: 0;
  389. top:-20px;
  390. height: 100%;
  391. min-width: 60px;
  392. display: flex;
  393. align-items: center;
  394. justify-content: center;
  395. border-radius: 6px;
  396. cursor: pointer;
  397. }
  398. .toggle-switch .switch{
  399. position: relative;
  400. height: 22px;
  401. width: 40px;
  402. border-radius: 25px;
  403. background-color: var(--toggle-color);
  404. transition: var(--tran-05);
  405. }
  406.  
  407. .switch::before{
  408. content: '';
  409. position: absolute;
  410. height: 15px;
  411. width: 15px;
  412. border-radius: 50%;
  413. top: 50%;
  414. left: 5px;
  415. transform: translateY(-50%);
  416. background-color: var(--sidemenu-color);
  417. transition: var(--tran-04);
  418. }
  419.  
  420.  
  421. .home{
  422. position: absolute;
  423. top: 0;
  424. top: 0;
  425. left: 250px;
  426. height: 100vh;
  427. width: calc(100% - 250px);
  428. background-color: var(--body-color);
  429. transition: var(--tran-05);
  430. }
  431. .home .text{
  432. font-size: 30px;
  433. font-weight: 500;
  434. color: var(--text-color);
  435. padding: 12px 60px;
  436. }
  437.  
  438. .sidemenu.close ~ .home{
  439. left: 78px;
  440. height: 100vh;
  441. width: calc(100% - 78px);
  442. }
  443.  
  444.  
  445. #container {
  446. display: flex;
  447. justify-content: center;
  448. align-items: center;
  449. min-height: 100vh;
  450. margin-top:-100px;
  451. }
  452.  
  453. #carousel, #navigation {
  454. flex: initial;
  455. display: block;
  456. }
  457.  
  458. #carousel {
  459. overflow: hidden;
  460. width: 990px;
  461. height:800px;
  462. border-radius: 4px;
  463. background-color:#fff;
  464. margin-top:100px;
  465. }
  466.  
  467. .p-wrapper {
  468. position: relative;
  469. width: 100%;
  470. height: 100%;
  471. transition: transform 0.4s ease-in-out;
  472. }
  473.  
  474. #button_a:checked ~ #carousel .p-wrapper {
  475. -webkit-transform: translateY(0);
  476. transform: translateY(0);
  477. }
  478.  
  479. #button_b:checked ~ #carousel .p-wrapper {
  480. -webkit-transform: translateY(-100%);
  481. transform: translateY(-100%);
  482. }
  483.  
  484. #button_c:checked ~ #carousel .p-wrapper {
  485. -webkit-transform: translateY(-200%);
  486. transform: translateY(-200%);
  487. }
  488.  
  489. #button_d:checked ~ #carousel .p-wrapper {
  490. -webkit-transform: translateY(-300%);
  491. transform: translateY(-300%);
  492. }
  493.  
  494. [class^="panel_"] {
  495. overflow: auto;
  496. position: relative;
  497. width: inherit;
  498. height: inherit;
  499. padding: 48px;
  500. }
  501.  
  502. #navigation {
  503. margin-left: 24px;
  504. }
  505.  
  506. [class^="label_"] {
  507. display: block;
  508. cursor: pointer;
  509. margin: 8px 0;
  510. width: 32px;
  511. height: 32px;
  512. line-height: 32px;
  513. text-align: center;
  514. border-radius: 4px;
  515. color: #aaa;
  516. background-color: #fff;
  517. transition: all 0.3s ease;
  518. }
  519.  
  520. [class^="label_"]:hover {
  521. color: #444;
  522. background-color: #ffeed9;
  523. }
  524.  
  525. #button_a:checked ~ #navigation .label_a,
  526. #button_b:checked ~ #navigation .label_b,
  527. #button_c:checked ~ #navigation .label_c,
  528. #button_d:checked ~ #navigation .label_d {
  529. cursor: default;
  530. color: #fff;
  531. background-color: #9e90c3;
  532. }
  533.  
  534.  
  535. /* ABOUT BOX */
  536.  
  537.  
  538. /* each profile box */
  539. .profile {
  540. margin-bottom:20px;
  541. padding:10px;
  542. /* you'll have to change the color here, or delete this line if you don't want the border */
  543. }
  544.  
  545. /* each row wrapping the first info */
  546. .profile-row {
  547. display: flex;
  548. justify-content: center;
  549. }
  550.  
  551.  
  552. .profile-info {
  553. width: 100%;
  554. display: inline-block;
  555. margin: 5px 15px;
  556. }
  557.  
  558. .profile-title {
  559. font-weight: bold;
  560. font-family:'Poppins';
  561. color:#9e90c3;
  562. padding: 6px 5px 0;
  563. display: block;
  564. text-transform: uppercase;
  565. }
  566.  
  567. .profile-description {
  568. max-height: 200px;
  569. padding: 5px 5px 0;
  570. display: inline-block;
  571. overflow: auto;
  572. }
  573.  
  574. .profile-description li {
  575. list-style-type:circle;
  576. }
  577.  
  578. /* skills */
  579.  
  580.  
  581. .skills {
  582. text-align: right;
  583. padding:20px;
  584. margin-left:5px;
  585. font-size:12px;
  586. font-family:'Roboto';
  587. font-weight:bold;
  588. padding-top:1px;
  589. padding:10px;
  590. Padding-bottom:1px;
  591. padding-right:4px;
  592. border-radius:3px;
  593. padding: 6px 5px 0;
  594. margin-bottom:10px;
  595. color:#000;
  596.  
  597. }
  598.  
  599.  
  600. /*--- to change the skill amounts etc---*/
  601.  
  602. .sk1 {
  603. width: 100%;
  604. background:linear-gradient(to right, #d2c1fe, #8172aa);
  605.  
  606. }
  607.  
  608. .sk2 {
  609. width: 95%;
  610. background:linear-gradient(to right, #d2c1fe, #8172aa);
  611.  
  612.  
  613. }
  614.  
  615. .sk3 {
  616. width: 25%;
  617. background:linear-gradient(to right, #d2c1fe, #8172aa);
  618.  
  619. }
  620.  
  621. .sk4 {
  622. width: 85%;
  623. background:linear-gradient(to right, #d2c1fe, #8172aa);
  624.  
  625. }
  626.  
  627.  
  628.  
  629. /* --- skills titles */
  630. st {
  631. font-weight:600;
  632. font-size:18px;
  633. font:bold 1em 'Poppins', sans-serif;
  634. margin-left:5px;
  635. color:#9e90c3;
  636. letter-spacing:1px;}
  637.  
  638.  
  639. /* socials */
  640.  
  641. .social-media {
  642. display: block;
  643. text-decoration:none;
  644.  
  645. }
  646.  
  647. .social-wrap a {
  648. font-size: 26px;
  649. font-weight:400;
  650. color: #000;
  651. list-style-type: none;
  652. display: inline-block;
  653. padding: 15px 13px 10px;
  654. margin-right:10px;
  655. text-shadow:none;
  656. margin-left:20px;
  657. margin-right:10px;
  658. background-color:#8172aa
  659. padding:10px;
  660. margin-top:10px;
  661. border-radius:10px 10px 10px 10px;
  662. }
  663.  
  664.  
  665. .social-wrap a:hover {
  666. color:#000000!important;
  667. }
  668.  
  669.  
  670. /* NAVIGATION BOX */
  671.  
  672. .masonry-navigation {
  673. width: 100%;
  674. border-bottom: 0px solid #e2e2e2;
  675. margin-bottom:15px;
  676. }
  677.  
  678. .masonry-navigation:last-child {
  679. border:none;
  680. }
  681.  
  682. .masonry-navigation-item.one-column {
  683. width: 100%;
  684. padding: 0 5px;
  685. margin-bottom: 20px;
  686. }
  687.  
  688. .masonry-navigation-item.one-column ul {
  689. display: flex;
  690. flex-wrap: wrap;
  691. margin: 0;
  692. padding: 0;
  693. }
  694.  
  695. /* if you have any problem with one colum lists (ul li) you edit here */
  696. .masonry-navigation-item.one-column ul li {
  697. margin: 4px 15px;
  698. padding: 0;
  699. list-style-type:circle;
  700. }
  701.  
  702. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  703. .masonry-navigation-item.two-columns {
  704. width: 240px;
  705. padding: 0 5px;
  706. margin-bottom: 10px;
  707. }
  708.  
  709. .masonry-navigation-item.two-columns ul li {
  710. margin: 4px 15px;
  711. padding: 0;
  712. list-style-type:circle;
  713. }
  714.  
  715. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  716. .masonry-navigation-item.three-columns {
  717. width: 160px;
  718. padding: 0 5px;
  719. margin-bottom: 10px;
  720. }
  721.  
  722. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  723. .masonry-navigation-item.scroll {
  724. height:215px;
  725. overflow-y: scroll;
  726. }
  727.  
  728.  
  729.  
  730.  
  731. /* BLOGS BOX */
  732.  
  733. .hover_list {
  734. margin-top:0px;
  735. padding:0px;
  736. width:100%;
  737. }
  738.  
  739.  
  740.  
  741. /* blogs container */
  742. .blogswrap {
  743. overflow:hidden;
  744. margin: 0 auto;
  745. width:560px;
  746. background: #fff;
  747. border:0px solid #434343;
  748.  
  749. }
  750.  
  751.  
  752. .blogsrow{
  753. margin: 0 5px 0;
  754. overflow:hidden;
  755. }
  756.  
  757.  
  758.  
  759. /* blogs individual boxes */
  760. .blogscontainer {
  761. position:relative;
  762. float:left;
  763. margin:10px;
  764. width: 250px;
  765. height: 150px;
  766. line-height:135%;
  767. background-color:#fff;
  768. border:1px solid #efefef;
  769. border-radius:4px;
  770. margin-top:30px;
  771. margin-bottom:10px;
  772. margin-right:10px;
  773. overflow-x:hidden;
  774. }
  775.  
  776.  
  777. /* blogs icons */
  778. .blogsimage {
  779. position:absolute;
  780. margin-right:20px;
  781. margin-top:20px;
  782. margin-left:5px;
  783. vertical-align:middle;
  784. padding:3px 3px 3px 3px;
  785. width: 80px;
  786. height: 80px;
  787. border-radius:100%;
  788. border:1px solid #C3EE79;
  789. background: #fff;
  790. }
  791.  
  792. .blogsimage img {
  793. object-fit:cover;
  794. }
  795.  
  796.  
  797. /* blogs right info box */
  798. .blogsinfo {
  799. width: 150px;
  800. height: 130px;
  801. padding:5px;
  802. margin:10px 5px 5px 5px;
  803. margin-left:90px;
  804. background: #fff;
  805. border:1px solid #efefef;
  806. }
  807.  
  808. .blogsinfo li {
  809. list-style-type:circle;
  810. margin:0 px 0;
  811. padding: 0;
  812. }
  813.  
  814.  
  815. /* blog names */
  816. .blogsinfospan {
  817. display:inline-block;
  818. width: 250px;
  819. text-transform: normal;
  820. font-size:10px;
  821. padding-bottom:5px;
  822. margin:5px 5px;
  823. text-align: left;
  824. word-break:break-word;
  825. vertical-align:middle;
  826. }
  827.  
  828.  
  829. /* blogs links */
  830. .blogslinks {
  831. text-transform: lowercase;
  832. text-align: left;
  833. overflow:hidden;
  834. font-size:10px;
  835. }
  836.  
  837.  
  838. .blogslinks ul {
  839. margin:0;
  840. padding:0;
  841. list-style:none;
  842. }
  843.  
  844.  
  845. .blogslinks li {
  846. margin:0 auto;
  847. text-align:center;
  848. }
  849.  
  850.  
  851. .blogslinks ul li:before {
  852. content:none;
  853. }
  854.  
  855. </style>
  856.  
  857.  
  858. </head>
  859. <body>
  860. <nav class="sidemenu close">
  861.  
  862. <header>
  863. <div class="image-text">
  864. <span class="image">
  865. <img src="{PortraitURL-128}" alt="">
  866. </span>
  867.  
  868. <div class="text logo-text">
  869. <span class="title">{Title}</span>
  870. <span class="user"><a href="https://tumblr.com/follow/{name}">@{name}</a></span>
  871. </div>
  872. </div>
  873.  
  874. <i class='bx bx-chevron-right toggle'></i>
  875. </header>
  876.  
  877. <div class="menu-bar">
  878.  
  879. <div class="menu">
  880.  
  881.  
  882. <ul class="menu-links">
  883. <li class="nav-link">
  884. <a href="/">
  885. <i class='bx bx-home-alt icon' ></i>
  886. <span class="text nav-text">Refresh</span>
  887. </a>
  888. </li>
  889.  
  890. <li class="nav-link">
  891. <a href="https://tumblr.com/message/{name}">
  892. <i class='bx bx-message-square-dots icon' ></i>
  893. <span class="text nav-text">Direct message</span>
  894. </a>
  895. </li>
  896.  
  897. <li class="nav-link">
  898. <a href="/">
  899. <i class='bx bx-code-alt icon' ></i>
  900. <span class="text nav-text">Link One</span>
  901. </a>
  902. </li>
  903.  
  904. <li class="nav-link">
  905. <a href="/">
  906. <i class='bx bx-coffee icon' ></i>
  907. <span class="text nav-text">Link Two</span>
  908. </a>
  909. </li>
  910.  
  911. <li class="nav-link">
  912. <a href="/">
  913. <i class='bx bx-folder icon' ></i>
  914. <span class="text nav-text">Link Three</span>
  915. </a>
  916. </li>
  917.  
  918. </ul>
  919. </div>
  920.  
  921. <div class="bottom-content">
  922.  
  923. <li class="">
  924. <a href="https://userbru.tumblr.com/">
  925. <i class='bx bx-moon icon'></i>
  926. <span class="text nav-text">Theme by userbru</span>
  927. </a>
  928. </li>
  929.  
  930. <li class="">
  931. <a href="https://tumblr.com/dashboard">
  932. <i class='bx bx-log-out icon' ></i>
  933. <span class="text nav-text">Back to Dash</span>
  934. </a>
  935. </li>
  936.  
  937.  
  938.  
  939. </div>
  940. </div>
  941.  
  942. </nav>
  943.  
  944. <div id="container">
  945.  
  946. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  947. <input hidden type="radio" name="carousel-control" id="button_b"/>
  948. <input hidden type="radio" name="carousel-control" id="button_c"/>
  949.  
  950. <div id="carousel">
  951. <div class="p-wrapper">
  952. <section class="panel_about">
  953. <h1>info.</h1>
  954. <div class="profile">
  955. <div class="profile-row">
  956. <div class="profile-info">
  957. <div class="profile-title"><i class="cp cp-user"></i> name.</div>
  958. <div class="profile-description">your name here</div>
  959. </div> <!-- this closes the profile-info -->
  960. <div class="profile-info">
  961. <div class="profile-title"><i class="cp cp-target-o"></i> tracked tag.</div>
  962. <div class="profile-description">your tracked tag here</div>
  963. </div> <!-- this closes the profile-info -->
  964. </div><!--- this closes the profile row -->
  965. <div class="profile-row">
  966. <div class="profile-info">
  967. <div class="profile-title"><i class="cp cp-cloud"></i> pronouns.</div>
  968. <div class="profile-description">your pronouns here</div>
  969. </div> <!-- this closes the profile-info -->
  970. <div class="profile-info">
  971. <div class="profile-title"><i class="cp cp-balloons"></i> age.</div>
  972. <div class="profile-description">your age here</div>
  973. </div> <!-- this closes the profile-info -->
  974. </div> <!-- this closes the profile-row -->
  975. <div class="profile-row">
  976. <div class="profile-info">
  977. <div class="profile-title"><i class="cp cp-rainbow"></i> sexuality.</div>
  978. <div class="profile-description">your sexuality here</div>
  979. </div> <!-- this closes the profile-info -->
  980. <div class="profile-info">
  981. <div class="profile-title"><i class="cp cp-ufo"></i> country.</div>
  982. <div class="profile-description">your country here</div>
  983. </div> <!-- this closes the profile-info -->
  984. </div> <!-- this closes the profile-row -->
  985. <div class="profile-row">
  986. <div class="profile-info">
  987. <div class="profile-title"><i class="cp cp-star"></i> race & ethnicity.</div>
  988. <div class="profile-description">your race/ethnicity here</div>
  989. </div> <!-- this closes the profile-info -->
  990. <div class="profile-info">
  991. <div class="profile-title"><i class="cp cp-z-gemini"></i> zodiac.</div>
  992. <div class="profile-description">your sign here</div>
  993. </div> <!-- this closes the profile-info -->
  994. </div> <!-- this closes the profile-row -->
  995. <div class="profile-row">
  996. <div class="profile-info">
  997. <div class="profile-title"><i class="cp cp-holly"></i> about me. </div>
  998. <div class="profile-description">
  999.  
  1000. You can write whatever you want here and it can have any length you want, you can also add <a href="/">links</a>, and you can add <b>bold</b>, <i>italics</i>, <strike>strike</strike> and <u>underline</u> text as well. <p>
  1001.  
  1002. You can make another paragraph, and you can also:
  1003. <li>add</li>
  1004. <li>lists</li>
  1005.  
  1006. </div>
  1007. </div> <!-- this closes the profile-info -->
  1008. </div> <!-- this closes the profile-row -->
  1009. </div> <!-- this closes the profile -->
  1010.  
  1011.  
  1012.  
  1013. <h1>skills</h1>
  1014.  
  1015. <div class="profile">
  1016.  
  1017.  
  1018. <div class="skillbox">
  1019.  
  1020. <br>
  1021. <st>TITLE OF SKILL #1</st>
  1022. <div class="skills sk1">100%</div>
  1023.  
  1024. <st>TITLE OF SKILL #2</st>
  1025. <div class="skills sk2">95%</div>
  1026.  
  1027. <st>TITLE OF SKILL #3</st>
  1028. <div class="skills sk3">25%</div>
  1029. </div>
  1030.  
  1031. <st>TITLE OF SKILL #4</st>
  1032. <div class="skills sk4">85%</div>
  1033. </div>
  1034.  
  1035.  
  1036. <h1>likes & dislikes</h1>
  1037. <div class="profile">
  1038. <div class="profile-row">
  1039. <div class="profile-info">
  1040. <div class="profile-title"><i class="cp cp-like"></i> likes </div>
  1041. <div class="profile-description">list the things you like here!
  1042. </div>
  1043. </div> <!-- this closes the profile-info -->
  1044.  
  1045. <div class="profile-info">
  1046. <div class="profile-title"><i class="cp cp-forbidden"></i> dislikes</div>
  1047. <div class="profile-description">list the things you dislike here!
  1048. </div>
  1049. </div> <!-- this closes the profile-info -->
  1050. </div> <!-- this closes the profile-row -->
  1051.  
  1052. </div> <!-- this closes the profile -->
  1053.  
  1054. <h1>socials</h1>
  1055.  
  1056. <div class="profile">
  1057.  
  1058. <div class="social-media">
  1059.  
  1060. <div class="social-wrap">
  1061.  
  1062. <!-- if you want to add a specific social media on here, you can go on cappuccicons.com and find the icon of the social media you want and then copy paste one of the lines of code below and replace the name of the social media icon (ex: cp cp-twitter) with whatever one you want! -->
  1063.  
  1064. <a href="https://twitter.com/" title="twitter"><i class="cp cp-twitter" style="color:#000;"></i></a>
  1065.  
  1066. <a href="https://instagram.com/" title="instagram"><i class="cp cp-instagram-o" style="color:#000;"></i></a>
  1067.  
  1068. <a href="https://open.spotify.com/user/" title="spotify"><i class="cp cp-spotify" style="color:#000;"></i></a>
  1069.  
  1070. <a href="https://ko-fi.com/" title="ko-fi"><i class="cp cp-ko-fi" style="color:#000;"></i></a>
  1071.  
  1072. <a href="https://archiveofourown.org/users/" title="ao3"><i class="cp cp-ao3" style="color:#000;"></i></a>
  1073.  
  1074. <a href="https://letterboxd.com/" title="letterboxd"><i class="cp cp-more" style="color:#000;"></i></a>
  1075.  
  1076. <a href="https://en.pinterest.com/" title="pinterest"><i class="cp cp-pinterest" style="color:#000;"></i></a>
  1077.  
  1078. </div>
  1079.  
  1080. </div>
  1081.  
  1082. </section>
  1083.  
  1084.  
  1085.  
  1086. <section class="panel_nav">
  1087.  
  1088. <h2> navigation. </h2><br>
  1089.  
  1090. <div class="masonry-navigation"> <!-- separates each section, you can use only one and add a bunch of items inside too -->
  1091. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  1092.  
  1093. <p><br><strong><i class="cp cp-pencil-o"></i> creations </strong></p><br>
  1094. <ul>
  1095. <li><a href="/tagged/" title="">link</a></li>
  1096. <li><a href="/tagged/" title="">link</a></li>
  1097. <li><a href="/tagged/" title="">link</a></li>
  1098. <li><a href="/tagged/" title="">link</a></li>
  1099. <li><a href="/tagged/" title="">link</a></li>
  1100. <li><a href="/tagged/" title="">link</a></li>
  1101. <li><a href="/tagged/" title="">link</a></li>
  1102. <li><a href="/tagged/" title="">link</a></li>
  1103. </ul>
  1104. </div></div>
  1105.  
  1106. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  1107. <p><strong><i class="cp cp-tv"></i> fandoms i edit the most </strong></p><br>
  1108. <ul>
  1109. <li><a href="/tagged/" title="">link</a></li>
  1110. <li><a href="/tagged/" title="">link</a></li>
  1111. <li><a href="/tagged/" title="">link</a></li>
  1112. <li><a href="/tagged/" title="">link</a></li>
  1113. </ul>
  1114. </div>
  1115.  
  1116.  
  1117. <div class="profile-title" style="border-bottom:none; margin-top:10px; margin-bottom:10px"> main tags.</div><br>
  1118.  
  1119. <div class="masonry-navigation">
  1120. <div class="masonry-navigation-item two-columns">
  1121. <p><strong><i class="cp cp-planet-o"></i> general blog tags</strong></p><br>
  1122. <ul>
  1123. <li><a href="/tagged/" title="">link</a></li>
  1124. <li><a href="/tagged/" title="">link</a></li>
  1125. <li><a href="/tagged/" title="">link</a></li>
  1126. <li><a href="/tagged/" title="">link</a></li>
  1127. </ul>
  1128. </div>
  1129.  
  1130.  
  1131. <div class="masonry-navigation-item two-columns"><br>
  1132. <p><strong><i class="cp cp-movie"></i> favorite tv & film</strong></p><br>
  1133. <ul>
  1134. <li><a href="/tagged/" title="">link</a></li>
  1135. <li><a href="/tagged/" title="">link</a></li>
  1136. <li><a href="/tagged/" title="">link</a></li>
  1137. <li><a href="/tagged/" title="">link</a></li>
  1138. </ul>
  1139. </div>
  1140.  
  1141. <div class="masonry-navigation-item two-columns">
  1142. <p><strong><i class="cp cp-music-note"></i> favorite artists/people</strong></p><br>
  1143. <ul>
  1144. <li><a href="/tagged/" title="">link</a></li>
  1145. <li><a href="/tagged/" title="">link</a></li>
  1146. <li><a href="/tagged/" title="">link</a></li>
  1147. <li><a href="/tagged/" title="">link</a></li>
  1148. <li><a href="/tagged/" title="">link</a></li>
  1149. <li><a href="/tagged/" title="">link</a></li>
  1150. <li><a href="/tagged/" title="">link</a></li>
  1151. <li><a href="/tagged/" title="">link</a></li>
  1152. </ul>
  1153. </div>
  1154.  
  1155. <div class="masonry-navigation-item two-columns">
  1156. <p><strong><i class="cp cp-heart-o"></i> favorite ships</strong></p><br>
  1157. <ul>
  1158. <li><a href="/tagged/" title="">link</a></li>
  1159. <li><a href="/tagged/" title="">link</a></li>
  1160. <li><a href="/tagged/" title="">link</a></li>
  1161. <li><a href="/tagged/" title="">link</a></li>
  1162. </ul>
  1163.  
  1164.  
  1165.  
  1166.  
  1167. </section>
  1168.  
  1169.  
  1170.  
  1171.  
  1172. <section class="panel_blogs">
  1173. <h2> blogs i'm in. </h2>
  1174.  
  1175. <div class="blogswrap"><!-- BEGINNING OF FIRST ROW -->
  1176.  
  1177.  
  1178. <div class="blogsrow"><!-- START BLOG --->
  1179.  
  1180. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1181. <div class="blogsinfo">
  1182. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1183. <div class="blogslinks">
  1184. <ul>
  1185. <li><i>+ info about the blog</i></li>
  1186. </ul>
  1187. </div>
  1188. </div>
  1189. </div>
  1190.  
  1191. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1192. <div class="blogsinfo">
  1193. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1194. <div class="blogslinks">
  1195. <ul>
  1196. <li><i>+ info about the blog</i></li>
  1197. </ul>
  1198. </div>
  1199. </div>
  1200. </div>
  1201.  
  1202.  
  1203. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1204. <div class="blogsinfo">
  1205. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1206. <div class="blogslinks">
  1207. <ul>
  1208. <li><i>+ info about the blog</i></li>
  1209. </ul>
  1210. </div>
  1211. </div>
  1212. </div>
  1213.  
  1214. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1215. <div class="blogsinfo">
  1216. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1217. <div class="blogslinks">
  1218. <ul>
  1219. <li><i>+ info about the blog</i></li>
  1220. </ul>
  1221. </div>
  1222. </div>
  1223. </div>
  1224.  
  1225. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1226. <div class="blogsinfo">
  1227. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1228. <div class="blogslinks">
  1229. <ul>
  1230. <li><i>+ info about the blog</i></li>
  1231. </ul>
  1232. </div>
  1233. </div>
  1234. </div>
  1235.  
  1236. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1237. <div class="blogsinfo">
  1238. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1239. <div class="blogslinks">
  1240. <ul>
  1241. <li><i>+ info about the blog</i></li>
  1242. </ul>
  1243. </div>
  1244. </div>
  1245. </div>
  1246.  
  1247.  
  1248. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1249. <div class="blogsinfo">
  1250. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1251. <div class="blogslinks">
  1252. <ul>
  1253. <li><i>+ info about the blog</i></li>
  1254. </ul>
  1255. </div>
  1256. </div>
  1257. </div>
  1258.  
  1259. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" /> <!-- replace userbru with the url of the blog you're adding here -->
  1260. <div class="blogsinfo">
  1261. <div class="blogsinfospan"><strong><a href="/" title="blog title">blog title</a></strong></div>
  1262. <div class="blogslinks">
  1263. <ul>
  1264. <li><i>+ info about the blog</i></li>
  1265. </ul>
  1266. </div>
  1267. </div>
  1268. </div>
  1269.  
  1270.  
  1271.  
  1272. </div>
  1273. </div>
  1274.  
  1275. </section>
  1276.  
  1277.  
  1278.  
  1279.  
  1280.  
  1281. </div> <!-- // .p-wrapper -->
  1282. </div> <!-- // #carousel -->
  1283.  
  1284. <div id="navigation">
  1285. <label for="button_a" class="label_a"> <span> 1 </span> </label>
  1286. <label for="button_b" class="label_b"> <span> 2 </span> </label>
  1287. <label for="button_c" class="label_c"> <span> 3 </span> </label>
  1288. </div> <!-- // #navigation -->
  1289.  
  1290. </div> <!-- // #container -->
  1291.  
  1292.  
  1293. <div class="tumblrcontrols"><i class="fas fa-cog fa-spin"></i></div>
  1294.  
  1295. <script>
  1296.  
  1297. const body = document.querySelector('body'),
  1298. sidemenu = body.querySelector('nav'),
  1299. toggle = body.querySelector(".toggle"),
  1300. searchBtn = body.querySelector(".search-box"),
  1301. modeSwitch = body.querySelector(".toggle-switch"),
  1302. modeText = body.querySelector(".mode-text");
  1303.  
  1304.  
  1305. toggle.addEventListener("click" , () =>{
  1306. sidemenu.classList.toggle("close");
  1307. })
  1308.  
  1309. searchBtn.addEventListener("click" , () =>{
  1310. sidemenu.classList.remove("close");
  1311. })
  1312.  
  1313. modeSwitch.addEventListener("click" , () =>{
  1314. body.classList.toggle("dark");
  1315.  
  1316. if(body.classList.contains("dark")){
  1317. modeText.innerText = "Light mode";
  1318. }else{
  1319. modeText.innerText = "Dark mode";
  1320.  
  1321. }
  1322. });
  1323.  
  1324. </script>
  1325.  
  1326. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  1327.  
  1328. <script>
  1329. $(document).ready(function(){
  1330. $('.controls-button').click(function(){
  1331. $('body').toggleClass('controls-click');
  1332. });
  1333. });
  1334. </script>
  1335.  
  1336. <script src="https://unpkg.com/popper.js@1"></script>
  1337. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1338. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1339.  
  1340.  
  1341.  
  1342.  
  1343. <script>
  1344. $(document).ready(function(){
  1345.  
  1346. //Click event to scroll to top
  1347. $('.scrollToTop').click(function(){
  1348. $('html, body').animate({scrollTop : 0},800);
  1349. return false;
  1350. });
  1351.  
  1352. });
  1353. </script>
  1354.  
  1355. <script>
  1356.  
  1357. tippy('a[title]', {
  1358. theme: 'gradient',
  1359. arrow: false,
  1360. zIndex: 9999999999,
  1361. maxWidth: 300,
  1362.  
  1363. content(reference) {
  1364. const title = reference.getAttribute('title');
  1365. reference.removeAttribute('title');
  1366. return title;
  1367. },
  1368. });
  1369.  
  1370.  
  1371. </script>
  1372.  
  1373. <script type="text/javascript">
  1374. // masonry navigation
  1375. var elements = document.getElementsByClassName('masonry-navigation');
  1376. var msnry;
  1377. var nElements = elements.length;
  1378. for(var i = 0; i < nElements; i++){
  1379. msnry = new Masonry( elements[i], {
  1380. // columnWidth: 268,
  1381. gutter: 10,
  1382. itemSelector: '.masonry-navigation-item',
  1383. });
  1384. }
  1385. </script>
  1386.  
  1387. <script>
  1388. document.body.classList.add('fade-out');
  1389. window.addEventListener('DOMContentLoaded', () => {
  1390. document.body.classList.remove('fade-out');
  1391. });
  1392. </script>
  1393.  
  1394.  
  1395. </body>
  1396. </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!