API tools faq
paste
Advertisement
userbru

about page two.

userbru
Jan 16th, 2022 (edited)
290
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.  
  6.  
  7. <!-- credits:
  8.  
  9. THEME BY BRU
  10.  
  11. base maziekeen
  12. custom scroll by shythemes
  13. icons by cappuccicons
  14. tooltips by tippy
  15. carousel by yeoli themes
  16. calendar widget by felinum
  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.  
  40.  
  41. <link rel="preconnect" href="https://fonts.googleapis.com">
  42. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  43. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&family=Poppins&display=swap" rel="stylesheet">
  44. <link href="https://fonts.googleapis.com/css2?family=Andika&display=swap" rel="stylesheet">
  45. <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Shrikhand&display=swap" rel="stylesheet">
  46.  
  47.  
  48.  
  49.  
  50. <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700' rel='stylesheet' type='text/css'>
  51. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  52.  
  53. <meta name="color:Calendar Accent" content="#060606"/>
  54. <meta name="color:Calendar Icon" content="#000"/>
  55. <meta name="color:Calendar Month Year" content="#000"/>
  56. <meta name="color:Calendar Weekdays" content= "#Ee7979"/>
  57. <meta name="color:Calendar Dates" content= "#Ee7979"/>
  58.  
  59.  
  60.  
  61. <style>
  62.  
  63. /* TOOLTIPS */
  64. .tippy-tooltip.gradient-theme {
  65. background-image:linear-gradient(to right, #Ffafb0, #Ffa7a9);
  66. color:#282828;
  67. text-align:center;
  68. font-family:'Poppins', sans-serif;
  69. font-weight:bold;
  70. text-transform:uppercase;
  71. letter-spacing:1px;
  72. font-size:0.90em;
  73. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  74.  
  75. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  76. fill:var(--text);}
  77.  
  78. /*TUMBLR CONTROLS*/
  79.  
  80.  
  81. iframe.iframe-controls--desktop {
  82. top:15px!important;
  83. right:15px!important;
  84. z-index:12!important;
  85. transform:scale(0.7);
  86. position:fixed!important;
  87. -moz-transform:scale(0.7);
  88. transform-origin:right top;
  89. -webkit-transform:scale(0.7);
  90. -moz-transform-origin:right top;
  91. -webkit-transform-origin:right top;
  92. }
  93.  
  94.  
  95. .tmblr-iframe--follow-teaser, .tmblr-iframe--app-cta-button{display:none !important;}
  96.  
  97.  
  98. /*SCROLLBAR */
  99.  
  100. ::-webkit-scrollbar {
  101. width:17px;
  102. height:17px;
  103. }
  104. ::-webkit-scrollbar {
  105. background-color:#323232; /* background color */
  106. }
  107. ::-webkit-scrollbar-track {
  108. border:#323232; /* background color */
  109. background-color:#323232; /* light border color */
  110. }
  111. ::-webkit-scrollbar-thumb {
  112. border:#323232; /* background color */
  113. background-color:#323232; /* dark border color */
  114. min-height:24px;
  115. min-width:24px;
  116. }
  117.  
  118. * {
  119. margin: 0;
  120. padding: 0;
  121. box-sizing: border-box;
  122. }
  123.  
  124. body {
  125. width:700px;
  126. height:600px;
  127. font-family:'ABeeZee';
  128. font-size: 13px;
  129. line-height: 1.5em;
  130. text-align: justify;
  131. padding: 48px;
  132. color:#FFDEDE;
  133. background-color: #282828;
  134. margin-left:500px;
  135.  
  136. }
  137.  
  138. ::selection {
  139. color:#000;
  140. background-color:#C3EE79;
  141. }
  142.  
  143. a {
  144. position: relative;
  145. color:#C3EE79;
  146. text-decoration: none;
  147. }
  148.  
  149. a:hover {
  150. color:#F9a7a7;
  151. }
  152.  
  153. a::before {
  154. content: "";
  155. position: absolute;
  156. display: block;
  157. width: 100%;
  158. height:1px;
  159. bottom: 0;
  160. left: 0;
  161. background-color:#F9a7a7;
  162. transform: scaleX(0);
  163. transform-origin: top left;
  164. transition: transform 0.3s ease;
  165. }
  166.  
  167. a:hover::before {
  168. transform: scaleX(1);
  169. }
  170.  
  171.  
  172. h1, h2, h3 {
  173. font-family:'Shrikhand';
  174. text-transform:uppercase
  175. letter-spacing:5px;
  176. font-weight:400;
  177. color:#C3EE79;
  178. border-bottom:1px solid #434343;
  179. padding:15px;
  180. }
  181.  
  182. /* SIDEBAR */
  183.  
  184.  
  185. .sidebar {
  186. width:300px;
  187. height:100%;
  188. top:0px;
  189. border-radius:4px;
  190. background:#323232;
  191. margin-left:-400px;
  192. position:fixed;
  193.  
  194. }
  195.  
  196.  
  197. .icon {
  198. padding:50px;
  199.  
  200.  
  201. }
  202.  
  203. .icon img {
  204. width:128px;
  205. height:128px;
  206. border-radius:100%;
  207. display: block;
  208. margin-left: auto;
  209. margin-right: auto;
  210. margin-top:100px;
  211. border:5px solid #C7EEB5;
  212.  
  213. }
  214.  
  215. .sidetitle {
  216. font-size:20px;
  217. color:#fff;
  218. text-transform:uppercase;
  219. font-family:'Poppins';
  220. font-weight:bold;
  221. text-align:center;
  222. margin-bottom:10px;
  223. margin-top:-10px;
  224. }
  225.  
  226. .sidelinks {
  227.  
  228. font-family:'ABeeZee';
  229. font-size:15px;
  230. text-transform:normal;
  231. text-align:center;
  232. font-weight:bold;
  233. display:block;
  234. border-radius:0.1em;
  235. padding:10px;
  236. margin:auto 3em;
  237. margin-top:10px;
  238. word-spacing:10px;
  239.  
  240.  
  241. }
  242.  
  243.  
  244. .sidelinks a {
  245. margin:auto 0.3em;
  246. }
  247.  
  248.  
  249. .sidelinks a:hover {
  250. color:#F9a7a7;
  251. }
  252.  
  253.  
  254. /************************ calendar ************************/
  255. table.calendar {
  256. position:fixed;
  257. bottom:200px;
  258. left:180px;
  259. padding:10px;
  260. font:10px/1.8 'Work Sans', calibri, sans-serif;
  261. text-align:center;
  262. color:{color:Calendar Dates};
  263. background:#323232;
  264. }
  265. table.calendar td, table.calendar th {padding:0 5px;}
  266. /*** icon ***/
  267. .fa-calendar {
  268. margin-left:-5px;
  269. margin-right:7px;
  270. padding:6px 1px 7px 7px;
  271. font-size:9px;
  272. background:{color:Calendar Accent};
  273. color:#Ee7979;
  274. }
  275. table.calendar tr:nth-child(1) th:hover:after {
  276. position:absolute;
  277. top:0px;
  278. left:30px;
  279. content:'by felinum';
  280. width:180px;
  281. font:8px/1.8 'Work Sans', calibri, sans-serif;
  282. letter-spacing:2px;
  283. color:#Ee7979;
  284. background:#323232;
  285. }
  286. /*** month & year ***/
  287. table.calendar tr:nth-child(1) th {
  288. border-bottom:1px solid {color:Calendar Accent};
  289. letter-spacing:7px;
  290. font-size:8px;
  291. text-transform:uppercase;
  292. text-align:left;
  293. color:#C3EE79;
  294. }
  295. /*** weekdays ***/
  296. table.calendar tr:nth-child(2) {
  297. font-weight:bold;
  298. color:#Ee7979;
  299. }
  300. /*** message on hover ***/
  301. table.calendar tr td:hover:before {
  302. position:absolute;
  303. max-width:100px;
  304. margin-left:-9px;
  305. margin-top:2.7em;
  306. padding:2px 4px;
  307. background:#fff;
  308. border:1px solid #ccc;
  309. -webkit-box-shadow: 3px 3px 0px 0px {color:Calendar Accent};
  310. -moz-box-shadow: 3px 3px 0px 0px {color:Calendar Accent};
  311. box-shadow: 3px 3px 0px 0px {color:Calendar Accent};
  312. color:#000;
  313. }
  314.  
  315. /************************ calendar updates ************************/
  316. /*** update day ***/
  317. table.calendar tr:nth-child(row) td:nth-child(column) {
  318. border:1px solid #ccc;
  319. -webkit-box-shadow:3px 3px 0px 0px {color:Calendar Accent};
  320. -moz-box-shadow:3px 3px 0px 0px {color:Calendar Accent};
  321. box-shadow:3px 3px 0px 0px {color:Calendar Accent};
  322. color:#000;
  323. }
  324. /*** hover text on update day ***/
  325. table.calendar tr:nth-child(row) td:nth-child(column):hover:before {
  326. content:'my first update';
  327. }
  328.  
  329.  
  330.  
  331. /*CAROUSEL*/
  332.  
  333. #container {
  334. width:900px;
  335. display: flex;
  336. justify-content: center;
  337. align-items: center;
  338. margin-left:10px;
  339.  
  340. }
  341.  
  342. #carousel {
  343. flex: initial;
  344. overflow: hidden;
  345. width: 900px;
  346. height:700px;
  347. margin-top:40px;
  348. border-radius: 4px;
  349. display: block;
  350. background-color: #323232;
  351. }
  352.  
  353. .p-wrapper {
  354. position: relative;
  355. padding:10px;
  356. width: 100%;
  357. height: 100%;
  358. transition: transform 0.4s ease-in-out;
  359. }
  360.  
  361. #button_about:checked ~ #carousel .p-wrapper {
  362. -webkit-transform: translateY(0);
  363. transform: translateY(0);
  364. }
  365.  
  366. #button_navi:checked ~ #carousel .p-wrapper {
  367. -webkit-transform: translateY(-100%);
  368. transform: translateY(-100%);
  369. }
  370.  
  371. #button_blogs:checked ~ #carousel .p-wrapper {
  372. -webkit-transform: translateY(-200%);
  373. transform: translateY(-200%);
  374. }
  375.  
  376.  
  377. [class^="panel_"] {
  378. overflow: auto;
  379. position: relative;
  380. width: inherit;
  381. height: inherit;
  382. padding: 48px;
  383.  
  384. }
  385.  
  386. #navigation {
  387. margin: auto 0em;
  388. margin-top:40px;
  389. font-size:20px;
  390. font-weight:bold;
  391. text-align:center;
  392. width:300px;
  393. }
  394.  
  395. [class^="label_"] {
  396. display: inline-block;
  397. cursor: pointer;
  398. margin:0 8px;
  399. width: 32px;
  400. height: 32px;
  401. line-height: 32px;
  402. text-align: center;
  403. border-radius: 4px;
  404. color: #Ee7979;
  405. background-color: #323232;
  406. transition: all 0.3s ease;
  407. }
  408.  
  409. [class^="label_"]:hover {
  410. color: #000;
  411. background-color: #C3EE79;
  412. }
  413.  
  414. #button_about:checked ~ #navigation .label_about,
  415. #button_navi:checked ~ #navigation .label_navi,
  416. #button_blogs:checked ~ #navigation .label_blogs,
  417. cursor: default;
  418. color: #fff;
  419. background-color: #222;
  420. }
  421.  
  422.  
  423. /* ABOUT BOX */
  424.  
  425.  
  426. /* each profile box */
  427. .profile {
  428. margin-bottom: 10px;
  429. outline: 1px solid #f5f5f5;
  430. /* you'll have to change the color here, or delete this line if you don't want the border */
  431. }
  432.  
  433. /* each row wrapping the first info */
  434. .profile-row {
  435. display: flex;
  436. justify-content: center;
  437. }
  438.  
  439.  
  440. .profile-info {
  441. width: 100%;
  442. display: inline-block;
  443. margin: 5px 15px;
  444. }
  445.  
  446. .profile-title {
  447. font-weight: bold;
  448. font-family:'Poppins';
  449. color:#C3EE79;
  450. padding: 6px 5px 0;
  451. display: block;
  452. text-transform: uppercase;
  453. }
  454.  
  455. .profile-description {
  456. max-height: 200px;
  457. padding: 5px 5px 0;
  458. display: inline-block;
  459. overflow: auto;
  460. }
  461.  
  462. /* skills */
  463.  
  464.  
  465. .skills {
  466. text-align: right;
  467. padding:20px;
  468. margin-left:5px;
  469. font-size:12px;
  470. font-family:'Andika';
  471. font-weight:bold;
  472. padding-top:1px;
  473. Padding-bottom:1px;
  474. padding-right:4px;
  475. border-radius:3px;
  476. padding: 6px 5px 0;
  477. margin-bottom:10px;
  478. color:#000;
  479.  
  480. }
  481.  
  482.  
  483. /*--- to change the skill amounts by changing the width using %---*/
  484.  
  485. .sk1 {
  486. width: 100%;
  487. background:linear-gradient(to right, #Ffc3c3, #FFAFAF);
  488.  
  489. }
  490.  
  491. .sk2 {
  492. width: 95%;
  493. background:linear-gradient(to right, #Ffc3c3, #FFAFAF);
  494.  
  495.  
  496. }
  497.  
  498. .sk3 {
  499. width: 25%;
  500. background:linear-gradient(to right, #Ffc3c3, #FFAFAF);
  501.  
  502. }
  503.  
  504. .sk4 {
  505. width: 85%;
  506. background:linear-gradient(to right, #Ffc3c3, #FFAFAF);
  507.  
  508. }
  509.  
  510.  
  511.  
  512. /* --- skills titles */
  513. st {
  514. font-weight:600;
  515. font-size:18px;
  516. font:bold 1em 'Poppins', sans-serif;
  517. margin-left:5px;
  518. color:#C3EE79;
  519. letter-spacing:1px;}
  520.  
  521.  
  522. /* socials */
  523.  
  524. .social-media {
  525. display: block;
  526.  
  527. }
  528.  
  529. .social-wrap a {
  530. font-size: 26px;
  531. font-weight:400;
  532. color: #C3EE79;
  533. list-style-type: none;
  534. display: inline-block;
  535. padding: 15px 13px 10px;
  536. margin-right:25px;
  537. text-shadow:none;
  538. }
  539.  
  540. .social-wrap a:hover {
  541. color: #F9a7a7;
  542.  
  543. }
  544.  
  545.  
  546. /* NAVIGATION BOX */
  547.  
  548. .masonry-navigation {
  549. width: 100%;
  550. border-bottom: 0px solid #e2e2e2;
  551. margin-bottom:15px;
  552. }
  553.  
  554. .masonry-navigation:last-child {
  555. border:none;
  556. }
  557.  
  558. .masonry-navigation-item.one-column {
  559. width: 100%;
  560. padding: 0 5px;
  561. margin-bottom: 20px;
  562. }
  563.  
  564. .masonry-navigation-item.one-column ul {
  565. display: flex;
  566. flex-wrap: wrap;
  567. margin: 0;
  568. padding: 0;
  569. }
  570.  
  571. /* if you have any problem with one colum lists (ul li) you edit here */
  572. .masonry-navigation-item.one-column ul li {
  573. margin: 4px 15px;
  574. padding: 0;
  575. }
  576.  
  577. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  578. .masonry-navigation-item.two-columns {
  579. width: 240px;
  580. padding: 0 5px;
  581. margin-bottom: 10px;
  582. }
  583.  
  584. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  585. .masonry-navigation-item.three-columns {
  586. width: 160px;
  587. padding: 0 5px;
  588. margin-bottom: 10px;
  589. }
  590.  
  591. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  592. .masonry-navigation-item.scroll {
  593. height:215px;
  594. overflow-y: scroll;
  595. }
  596.  
  597.  
  598.  
  599.  
  600. /* BLOGS BOX */
  601.  
  602. .hover_list {
  603. margin-top:0px;
  604. padding:0px;
  605. width:100%;
  606. }
  607.  
  608.  
  609.  
  610. /* blogs container */
  611. .blogswrap {
  612. overflow:hidden;
  613. margin: 0 auto;
  614. width:850px;
  615. background: #323232;
  616. border:0px solid #434343;
  617.  
  618. }
  619.  
  620.  
  621. .blogsrow{
  622. margin: 0 5px 0;
  623. overflow:hidden;
  624. }
  625.  
  626.  
  627.  
  628. /* blogs individual boxes */
  629. .blogscontainer {
  630. position:relative;
  631. float:left;
  632. margin:10px;
  633. width: 250px;
  634. height: 150px;
  635. line-height:135%;
  636. background-color:#323232;
  637. border:1px solid #434343;
  638. border-radius:4px;
  639. margin-top:30px;
  640. margin-bottom:10px;
  641. margin-right:10px;
  642. overflow-x:hidden;
  643. }
  644.  
  645.  
  646. /* blogs icons */
  647. .blogsimage {
  648. position:absolute;
  649. margin-right:20px;
  650. margin-top:20px;
  651. margin-left:5px;
  652. vertical-align:middle;
  653. padding:3px 3px 3px 3px;
  654. width: 80px;
  655. height: 80px;
  656. border-radius:100%;
  657. border:1px solid #C3EE79;
  658. background: #fff;
  659. }
  660.  
  661. .blogsimage img {
  662. object-fit:cover;
  663. }
  664.  
  665.  
  666. /* blogs right info box */
  667. .blogsinfo {
  668. width: 150px;
  669. height: 130px;
  670. padding:5px;
  671. margin:10px 5px 5px 5px;
  672. margin-left:90px;
  673. background: #323232;
  674. border:1px solid #434343;
  675. }
  676.  
  677. .blogsinfo li {
  678. list-style:none;
  679. margin:0 px 0;
  680. padding: 0;
  681. }
  682.  
  683.  
  684. /* blog names */
  685. .blogsinfospan {
  686. display:inline-block;
  687. width: 140px;
  688. text-transform: normal;
  689. font-size:11.5px;
  690. padding-bottom:5px;
  691. margin:5px 5px;
  692. text-align: center;
  693. word-break:break-word;
  694. vertical-align:middle;
  695. }
  696.  
  697.  
  698. /* blogs links */
  699. .blogslinks {
  700. text-transform: lowercase;
  701. text-align: left;
  702. overflow:hidden;
  703. }
  704.  
  705.  
  706. .blogslinks ul {
  707. margin:0;
  708. padding:0;
  709. list-style:none;
  710. }
  711.  
  712. .blogslinks li {
  713. margin:0 auto;
  714. text-align:center;
  715. }
  716.  
  717.  
  718. .blogslinks ul li:before {
  719. content:none;
  720. }
  721.  
  722.  
  723.  
  724. /*credit */
  725. footer {
  726. width:100%;
  727. font-size:12px;
  728. font-family:'ABeeZee';
  729. font-weight:bold;
  730. margin:20px auto;
  731. text-align:center;
  732. }
  733.  
  734.  
  735.  
  736. </style>
  737.  
  738. </head>
  739. <body>
  740.  
  741.  
  742. <div class="sidebar">
  743.  
  744. <div class="icon">
  745. <!-- 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 -->
  746. <img src="{PortraitURL-128}">
  747. </div>
  748. <div class="sidetitle">{Title}</div>
  749. <div class="sidelinks">
  750. <a href="/" title="BACK">home</a>
  751. <a href="/ask" title="MESSAGE">msg</a>
  752. <a href="/" title="Link Title">link</a><br><br>
  753. <!-- CREDIT DO NOT REMOVE --> <a href="https://geminicodes.tumblr.com" title="THEME BY BRU"><i class="cp cp-moon"></i></a>
  754. </div>
  755.  
  756.  
  757.  
  758.  
  759. <div id="navigation">
  760. <label for="button_about" class="label_about" title="about"> <span> <i class="cp cp-planet"></i>
  761. </span> </label>
  762. <label for="button_navi" class="label_navi" title="navigation"> <span> <i class="cp cp-hashtag"></i>
  763. </span> </label>
  764. <label for="button_blogs" class="label_blogs" title="blogs"> <span> <i class="cp cp-app-o"></i>
  765. </span> </label>
  766.  
  767. </div> <!-- // #navigation -->
  768.  
  769.  
  770. <script type="text/javascript" src="https://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  771. <script type="text/javascript" src="https://cdn.rawgit.com/micaelis/tmblrnotes/master/felinumCal.js"></script>
  772. <div id="calendar"></div>
  773.  
  774. </div>
  775.  
  776.  
  777.  
  778. <!----- CAROUSEL ----->
  779.  
  780.  
  781.  
  782. <div class="container">
  783.  
  784. <input hidden type="radio" name="carousel-control" id="button_about" checked/>
  785. <input hidden type="radio" name="carousel-control" id="button_navi"/>
  786. <input hidden type="radio" name="carousel-control" id="button_blogs"/>
  787.  
  788.  
  789. <div id="carousel">
  790. <div class="p-wrapper">
  791.  
  792. <section class="panel_a">
  793. <h1>info.</h1>
  794. <div class="profile">
  795. <div class="profile-row">
  796. <div class="profile-info">
  797. <div class="profile-title"><i class="cp cp-user"></i> name.</div>
  798. <div class="profile-description">your name</div>
  799. </div> <!-- this closes the profile-info -->
  800.  
  801. <div class="profile-info">
  802. <div class="profile-title"><i class="cp cp-target-o"></i> tracked tag.</div>
  803. <div class="profile-description">your tracked tag</div>
  804. </div> <!-- this closes the profile-info -->
  805. </div><!--- this closes the profile row -->
  806.  
  807. <div class="profile-row">
  808. <div class="profile-info">
  809. <div class="profile-title"><i class="cp cp-cloud"></i> pronouns.</div>
  810. <div class="profile-description">your pronouns</div>
  811. </div> <!-- this closes the profile-info -->
  812.  
  813. <div class="profile-info">
  814. <div class="profile-title"><i class="cp cp-balloons"></i> age.</div>
  815. <div class="profile-description">your age</div>
  816. </div> <!-- this closes the profile-info -->
  817. </div> <!-- this closes the profile-row -->
  818.  
  819. <div class="profile-row">
  820. <div class="profile-info">
  821. <div class="profile-title"><i class="cp cp-rainbow"></i> sexuality.</div>
  822. <div class="profile-description">your sexuality</div>
  823. </div> <!-- this closes the profile-info -->
  824.  
  825. <div class="profile-info">
  826. <div class="profile-title"><i class="cp cp-ufo"></i> country.</div>
  827. <div class="profile-description">your country</div>
  828. </div> <!-- this closes the profile-info -->
  829. </div> <!-- this closes the profile-row -->
  830.  
  831. <div class="profile-row">
  832. <div class="profile-info">
  833. <div class="profile-title"><i class="cp cp-star"></i> race & ethnicity.</div>
  834. <div class="profile-description">your race/ethnicity here</div>
  835. </div> <!-- this closes the profile-info -->
  836.  
  837. <div class="profile-info">
  838. <div class="profile-title"><i class="cp cp-z-gemini"></i> zodiac.</div>
  839. <div class="profile-description">your signs here</div>
  840. </div> <!-- this closes the profile-info -->
  841. </div> <!-- this closes the profile-row -->
  842.  
  843. <div class="profile-row">
  844. <div class="profile-info">
  845. <div class="profile-title"><i class="cp cp-holly"></i> about me. </div>
  846. <div class="profile-description">
  847.  
  848. 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>
  849.  
  850. And you can add new paragraphs, too.</p>
  851.  
  852. </div>
  853. </div> <!-- this closes the profile-info -->
  854. </div> <!-- this closes the profile-row -->
  855. </div> <!-- this closes the profile -->
  856.  
  857.  
  858.  
  859. <h1>skills</h1>
  860.  
  861. <div class="profile">
  862.  
  863.  
  864. <div class="skillbox">
  865.  
  866. <br>
  867. <st>TITLE OF SKILL #1</st>
  868. <div class="skills sk1">100%</div> <!-- this is the number percentage showing on your skill gradient --->
  869.  
  870. <st>TITLE OF SKILL #2</st>
  871. <div class="skills sk2">95%</div>
  872.  
  873. <st>TITLE OF SKILL #3</st>
  874. <div class="skills sk3">25%</div>
  875. </div>
  876.  
  877. <st>TITLE OF SKILL #4</st>
  878. <div class="skills sk4">85%</div>
  879. </div>
  880.  
  881.  
  882. <h1>likes & dislikes</h1>
  883. <div class="profile">
  884. <div class="profile-row">
  885. <div class="profile-info">
  886. <div class="profile-title"><i class="cp cp-like"></i> likes </div>
  887. <div class="profile-description">
  888.  
  889. list here the things you like!
  890.  
  891. </div>
  892. </div> <!-- this closes the profile-info -->
  893. <div class="profile-info">
  894. <div class="profile-title"><i class="cp cp-forbidden"></i> dislikes</div>
  895. <div class="profile-description">
  896.  
  897. list here things you dislike!
  898.  
  899. </div>
  900. </div> <!-- this closes the profile-info -->
  901. </div> <!-- this closes the profile-row -->
  902.  
  903. </div> <!-- this closes the profile -->
  904.  
  905. <h1>socials</h1>
  906.  
  907. <div class="profile">
  908.  
  909. <div class="social-media">
  910.  
  911. <div class="social-wrap">
  912.  
  913. <a href="https://twitter.com/" title="twitter"><i class="cp cp-twitter"></i></a>
  914. <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>
  915. <a href="https://www.youtube.com/channel/" title="youtube"><i class="cp cp-youtube"></i></a>
  916. <a href="https://discord.com/users/" title="discord"><i class="cp cp-discord"></i></a>
  917. <a href="https://ko-fi.com/" title="ko-fi"><i class="cp cp-ko-fi"></i></a>
  918. <a href="https://redbubble.com/people/" title="redbubble"><i class="cp cp-shop-o"></i></a><br>
  919. <a href="https://www.paypal.com/paypalme/" title="paypal me"><i class="cp cp-paypal"></i></a>
  920. <a href="https://archiveofourown.org/users/" title="ao3"><i class="cp cp-ao3"></i></a>
  921. <a href="https://letterboxd.com/" title="letterboxd"><i class="cp cp-more"></i></a>
  922. <a href="https://weheartit.com/" title="we heart it"><i class="cp cp-weheartit-o"></i></a>
  923. <a href="https://br.pinterest.com/" title="pinterest"><i class="cp cp-pinterest"></i></a>
  924. <a href="https://www.deviantart.com/" title="deviantart"><i class="cp cp-deviantart"></i></a>
  925.  
  926.  
  927. </div>
  928.  
  929. </div>
  930. </section>
  931.  
  932.  
  933.  
  934.  
  935. <section class="panel_b"> <h2> navigation. </h2>
  936.  
  937. <div class="masonry-navigation"> <!-- separates each section, you can use only one and add a bunch of items inside too -->
  938. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  939.  
  940. <p><br><strong><i class="cp cp-pencil-o"></i> title. </strong></p>
  941. <ul>
  942. <li><a href="/tagged/" title="title">tag</a></li>
  943. <li><a href="/tagged/" title="title">tag</a></li>
  944. <li><a href="/tagged/" title="title">tag</a></li>
  945. <li><a href="/tagged/" title="title">tag</a></li>
  946. <li><a href="/tagged/" title="title">tag</a></li>
  947. <li><a href="/tagged/" title="title">tag</a></li>
  948. <li><a href="/tagged/" title="title">tag</a></li>
  949. <li><a href="/tagged/" title="title">tag</a></li>
  950. <li><a href="/tagged/" title="title">tag</a></li>
  951. <li><a href="/tagged/" title="title">tag</a></li>
  952. <li><a href="/tagged/" title="title">tag</a></li>
  953. </ul>
  954. </div></div>
  955.  
  956. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  957. <p><strong><i class="cp cp-tv"></i> title </strong></p>
  958. <ul>
  959. <li><a href="/tagged/" title="title">tag</a></li>
  960. <li><a href="/tagged/" title="title">tag</a></li>
  961. <li><a href="/tagged/" title="title">tag</a></li>
  962. <li><a href="/tagged/" title="title">tag</a></li>
  963. <li><a href="/tagged/" title="title">tag</a></li>
  964. <li><a href="/tagged/" title="title">tag</a></li>
  965. <li><a href="/tagged/" title="title">tag</a></li>
  966. <li><a href="/tagged/" title="title">tag</a></li>
  967. <li><a href="/tagged/" title="title">tag</a></li>
  968. <li><a href="/tagged/" title="title">tag</a></li>
  969. <li><a href="/tagged/" title="title">tag</a></li>
  970. </ul>
  971. </div>
  972.  
  973.  
  974. <div class="profile-title" style="border-bottom:none; margin-top:10px; margin-bottom:10px"> main tags.</div>
  975.  
  976. <div class="masonry-navigation">
  977. <div class="masonry-navigation-item two-columns">
  978. <p><strong><i class="cp cp-planet-o"></i> general blog tags</strong></p>
  979. <ul>
  980. <li><a href="/tagged/" title="title">tag</a></li>
  981. <li><a href="/tagged/" title="title">tag</a></li>
  982. <li><a href="/tagged/" title="title">tag</a></li>
  983. <li><a href="/tagged/" title="title">tag</a></li>
  984. <li><a href="/tagged/" title="title">tag</a></li>
  985. <li><a href="/tagged/" title="title">tag</a></li>
  986. <li><a href="/tagged/" title="title">tag</a></li>
  987. <li><a href="/tagged/" title="title">tag</a></li>
  988. <li><a href="/tagged/" title="title">tag</a></li>
  989. <li><a href="/tagged/" title="title">tag</a></li>
  990. <li><a href="/tagged/" title="title">tag</a></li>
  991. </ul>
  992. </div>
  993.  
  994.  
  995. <div class="masonry-navigation-item two-columns">
  996. <p><strong><i class="cp cp-movie"></i> favorite tv & film</strong></p>
  997. <ul>
  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. <li><a href="/tagged/" title="title">tag</a></li>
  1009. </ul>
  1010. </div>
  1011.  
  1012.  
  1013.  
  1014. <div class="masonry-navigation-item two-columns">
  1015. <p><strong><i class="cp cp-music-note"></i> favorite artists</strong></p>
  1016. <ul>
  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. <li><a href="/tagged/" title="title">tag</a></li>
  1026. <li><a href="/tagged/" title="title">tag</a></li>
  1027. <li><a href="/tagged/" title="title">tag</a></li>
  1028. </ul>
  1029. </div>
  1030.  
  1031.  
  1032. </section>
  1033.  
  1034.  
  1035.  
  1036.  
  1037. <section class="panel_c"> <h1>BLOGS I'M IN</h2>
  1038.  
  1039.  
  1040. <!-- TO ADD MORE
  1041.  
  1042. <div class="blogscontainer"><img class="blogsimage" src="https://api.tumblr.com/v2/blog/userbru.tumblr.com/avatar/40" />
  1043. <div class="blogsinfo">
  1044. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1045. <div class="blogslinks">
  1046. <ul>
  1047. <li><i>+ info about the blog</i></li>
  1048. </ul>
  1049. </div>
  1050. </div>
  1051. </div>
  1052.  
  1053. -->
  1054.  
  1055. <div class="blogswrap"><!-- BEGINNING OF FIRST ROW -->
  1056.  
  1057.  
  1058. <div class="blogsrow"><!-- START BLOG --->
  1059.  
  1060. <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-->
  1061. <div class="blogsinfo">
  1062. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1063. <div class="blogslinks">
  1064. <ul>
  1065. <li><i>+ info about the blog</i></li>
  1066. </ul>
  1067. </div>
  1068. </div>
  1069. </div>
  1070.  
  1071.  
  1072. <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-->
  1073. <div class="blogsinfo">
  1074. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1075. <div class="blogslinks">
  1076. <ul>
  1077. <li><i>+ info about the blog</i></li>
  1078. </ul>
  1079. </div>
  1080. </div>
  1081. </div>
  1082.  
  1083.  
  1084. <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-->
  1085. <div class="blogsinfo">
  1086. <div class="blogsinfospan"><strong><a href="/" title="title">blog url</a></strong></div>
  1087. <div class="blogslinks">
  1088. <ul>
  1089. <li><i>+ info about the blog</i></li>
  1090. </ul>
  1091. </div>
  1092. </div>
  1093. </div>
  1094.  
  1095.  
  1096. </div>
  1097. </div>
  1098. </section>
  1099.  
  1100.  
  1101.  
  1102. </div> <!-- // .p-wrapper -->
  1103. </div> <!-- // #carousel -->
  1104.  
  1105.  
  1106.  
  1107. </div> <!-- // #container -->
  1108. </div>
  1109.  
  1110.  
  1111.  
  1112.  
  1113.  
  1114.  
  1115. <script type="text/javascript">
  1116. // masonry navigation
  1117. var elements = document.getElementsByClassName('masonry-navigation');
  1118. var msnry;
  1119. var nElements = elements.length;
  1120. for(var i = 0; i < nElements; i++){
  1121. msnry = new Masonry( elements[i], {
  1122. // columnWidth: 268,
  1123. gutter: 10,
  1124. itemSelector: '.masonry-navigation-item',
  1125. });
  1126. }
  1127. </script>
  1128.  
  1129.  
  1130. </body>
  1131.  
  1132.  
  1133.  
  1134. <!--- TOOLTIPS --->
  1135.  
  1136. <script src="https://unpkg.com/popper.js@1"></script>
  1137. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1138. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1139.  
  1140.  
  1141.  
  1142. <script>
  1143.  
  1144. tippy('label', {
  1145. theme: 'gradient',
  1146. arrow: false,
  1147. zIndex: 9999999999,
  1148. maxWidth: 300,
  1149.  
  1150. content(reference) {
  1151. const title = reference.getAttribute('title');
  1152. reference.removeAttribute('title');
  1153. return title;
  1154. },
  1155. });
  1156.  
  1157. tippy('a[title]', {
  1158. theme: 'gradient',
  1159. arrow: false,
  1160. zIndex: 9999999999,
  1161. maxWidth: 300,
  1162.  
  1163. content(reference) {
  1164. const title = reference.getAttribute('title');
  1165. reference.removeAttribute('title');
  1166. return title;
  1167. },
  1168. });
  1169.  
  1170.  
  1171. </script>
  1172.  
  1173.  
  1174.  
  1175. </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!