API tools faq
paste
Advertisement
Imyan

Page 10 about tangerine {CSS Tumblr}

Imyan
Aug 7th, 2022
1,205
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 33.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!----
  10.                   _________
  11.                 /           \
  12.                |   __    __  |
  13.                |  |__|  |__| |   TANGERINE ABOUT PAGE BY SAGE / DEMONTIMES
  14.                |             |   https://demontimes.tumblr.com
  15.                |  _   _   _  |
  16.                |_| |_| |_| |_|
  17.  
  18. SEARCH 'EDIT HERE'
  19.  
  20. CREDITS:
  21.     - phosphor icons / phosphoricons.com
  22.     - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  23.     - google fonts / https://fonts.google.com/
  24.  
  25. ---->
  26.  
  27. <!---- JQUERY ---->
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  29.  
  30. <!----- GOOGLE FONTS ---->
  31. <link rel="preconnect" href="https://fonts.googleapis.com">
  32. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  33. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  34. <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  35.  
  36. <!---- ICONS ---->
  37. <script src="https://unpkg.com/phosphor-icons"></script>
  38. <script src="https://unpkg.com/phosphor-icons@1.4.0"></script>
  39.  
  40. <!---- TOOLTIPS ---->
  41. <script src="https://unpkg.com/popper.js@1"></script>
  42. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  43.  
  44. <!----- CSS ----->
  45.  
  46. <style type="text/css">
  47.  
  48. /*--- EDIT HERE ----*/
  49. :root {
  50.    
  51.     /*---- DEFAULT COLORS -----*/
  52.     --background:#eee;
  53.     --content:#fff;
  54.     --title:#666;
  55.     --text:#888;
  56.     --link:#ff8873;
  57.     --accent:#ff9b84;
  58.     --accent-two:#ff99a8;
  59.     --borders:#ddd;
  60.     --shadow:#eed2c7;
  61.     --gradient-one:#ff8d5f;
  62.     --gradient-two:#ff769b;
  63.     --gradient-text:#fff;
  64.  
  65.     /*---- VARIABLES ---*/
  66.     --border-radius:5px; /*-- 0px, 5px, or 10px recommended --*/
  67.     --glow: 0 0 10px; /*-- change to 0 if you don't want the glow --*/
  68.  
  69.     /*---- FONT STYLE -----*/
  70.     --body-font:'Poppins'; /*-- lmk if you need help changing the fonts --*/
  71.     --title-font:'Montserrat Alternates';
  72.     --font-size:14px;
  73. }
  74.  
  75. /*----- TOOLTIPS -----*/
  76.  
  77. .tippy-tooltip.custom-theme {
  78.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  79.     color:var(--gradient-text);
  80.     text-shadow:var(--glow);
  81.     text-align:center;
  82.     text-transform:uppercase;
  83.     letter-spacing:.1em;
  84.     font-size:.95em;
  85.     border-radius:var(--border-radius);
  86.     margin-bottom:.5em;
  87. }
  88.  
  89. /*--- SCROLLBAR ---*/
  90. ::-webkit-scrollbar {
  91.     width:5px;
  92.     height:5px;
  93.     background:var(--background);
  94. }
  95.  
  96. ::-webkit-scrollbar-track {
  97.     background:var(--background);
  98.     border-radius: 5px;
  99. }
  100.  
  101. ::-webkit-scrollbar-thumb {
  102.     background:linear-gradient(to bottom, var(--gradient-one), var(--gradient-two));
  103.     border-radius: 5px;
  104. }
  105.  
  106. /*--- TEXT SELECTION ---*/
  107. ::-moz-selection { /* Code for Firefox */
  108.   color:var(--gradient-text);
  109.     background:var(--accent);
  110. }
  111.  
  112. ::selection {
  113.   color:var(--gradient-text);
  114.     background:var(--accent);
  115. }
  116.  
  117. /*----- BASIC STYLING -----*/
  118.  
  119. body {
  120.     font-family: var(--body-font), sans-serif;
  121.     font-size: var(--font-size);
  122.     color: var(--text);
  123.     background:var(--background);
  124.     line-height:140%;
  125.     word-wrap: break-word;
  126.     letter-spacing:.04em;
  127.     margin:0;
  128.     padding:0;
  129.     transition:.5s;
  130. }
  131.  
  132. a {
  133.     color:var(--link);
  134.     text-decoration: none;
  135.     -webkit-transition: all 0.3s;
  136.     -moz-transition: all 0.3s;
  137.     -ms-transition: all 0.3s;
  138.     -o-transition: all 0.3s;
  139.     transition: all 0.3s;
  140. }
  141.  
  142. a:hover {
  143.     color: var(--accent);
  144.     -webkit-transition: all 0.3s;
  145.     -moz-transition: all 0.3s;
  146.     -ms-transition: all 0.3s;
  147.     -o-transition: all 0.3s;
  148.     transition: all 0.3s;
  149. }
  150.  
  151. #hua {
  152.   display: inline-block;
  153.   position: relative;
  154. }
  155.  
  156. #hua:after {
  157.   content: '';
  158.   position: absolute;
  159.   width: 100%;
  160.   transform: scaleX(0);
  161.   height: 2px;
  162.   bottom: 0;
  163.   left: 0;
  164.   background-color: var(--link);
  165.   transform-origin: bottom right;
  166.   transition: transform 0.25s ease-out;
  167. }
  168.  
  169. #hua:hover:after {
  170.   transform: scaleX(1);
  171.   transform-origin: bottom left;
  172. }
  173.        
  174. blockquote {
  175.     border-left:2px solid var(--borders);
  176.     padding-left:.75em;
  177.     margin-left:1em;
  178. }
  179.  
  180. li {list-style-type:circle;}
  181. li::marker {color:var(--accent)}
  182.  
  183. h1, h1 a, h2, h3, h4, h5 {
  184.     font-family:var(--title-font), sans-serif;
  185.     letter-spacing:.1em;
  186.     color:var(--title);
  187. }
  188.  
  189. h1 {font-size:1.3em;}
  190. h2 {font-size:1.2em;}
  191. h3 {font-size:1.15em;}
  192. h4 {font-size:1.1em;}
  193. h5 {font-size:1.05em;}
  194. h1 a:hover {color:var(--accent);}
  195.  
  196. small {font-size: 0.95em;}
  197. big {font-size: 1.1em;}
  198.  
  199. hr {
  200.     height: 1px;
  201.     border: none;
  202.     box-shadow: none;
  203.     background-color: var(--borders);
  204. }
  205.  
  206. pre {
  207.     line-height: inherit;
  208.     font-size: inherit;
  209.     white-space: pre-wrap;
  210.     white-space: -moz-pre-wrap;
  211.     white-space: -pre-wrap;
  212.     white-space: -o-pre-wrap;
  213.     word-wrap: break-word;
  214. }
  215.  
  216. b, strong {
  217.     color:var(--title);
  218.     font-weight:800;
  219. }
  220.  
  221. b a:hover {
  222.     color:var(--accent);
  223.     -webkit-transition: all 0.3s;
  224.     -moz-transition: all 0.3s;
  225.     -ms-transition: all 0.3s;
  226.     -o-transition: all 0.3s;
  227.     transition: all 0.3s;
  228. }
  229.  
  230. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  231.     z-index: 999999999!important;
  232.     margin-top:60px;
  233.     opacity:0;
  234.     -webkit-transition: all 0.4s;
  235.     -moz-transition: all 0.4s;
  236.     -ms-transition: all 0.4s;
  237.     -o-transition: all 0.4s;
  238.     transition: all 0.4s;
  239. }
  240.  
  241. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  242.     opacity:1;
  243.     -webkit-transition: all 0.4s;
  244.     -moz-transition: all 0.4s;
  245.     -ms-transition: all 0.4s;
  246.     -o-transition: all 0.4s;
  247.     transition: all 0.4s;
  248. }
  249.  
  250. /*---- HEADER ----*/
  251.  
  252. header {
  253.     position:fixed;
  254.     top:0;
  255.     left:0;
  256.     right:0;
  257.     height:50px;
  258.     padding:.5em 1em .5em 1em;
  259.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  260.     display:flex;
  261.     justify-content:space-between;
  262.     align-items:center;
  263.     z-index:999999;
  264.     -webkit-transition: all 0.4s;
  265.     -moz-transition: all 0.4s;
  266.     -ms-transition: all 0.4s;
  267.     -o-transition: all 0.4s;
  268.     transition: all 0.4s;
  269. }
  270.  
  271. .topicon {
  272.     display:flex;
  273.     justify-content:flex-end;
  274.     align-items:center;
  275.     gap:.5em;
  276. }
  277.  
  278. .topicon img {
  279.     width:40px;
  280.     height:40px;
  281.     padding:4px;
  282.     border-radius:100%;
  283.     background:var(--accent-one);
  284.     box-shadow:2px 8px 8px rgba(0,0,0,.1);
  285. }
  286.  
  287. .topicon a {
  288.     font-family:var(--title-font), sans-serif;
  289.     color:var(--gradient-text);
  290.     letter-spacing:.1em;
  291.     display:flex;
  292.     flex-direction:column;
  293. }
  294. .topicon b {
  295.     color:var(--gradient-text);
  296.     text-shadow:var(--glow);
  297.     font-size:1.3em;
  298.     font-weight:600;
  299.     -webkit-transition: all 0.4s;
  300.     -moz-transition: all 0.4s;
  301.     -ms-transition: all 0.4s;
  302.     -o-transition: all 0.4s;
  303.     transition: all 0.4s;
  304. }
  305. .topicon span {font-size:.9em;}
  306.  
  307. .headicons {
  308.     display:flex;
  309.     align-items:center;
  310.     gap:.5em;
  311. }
  312.  
  313. #totop a {cursor:help;}
  314.  
  315. #totop a, .headicons a {
  316.     border-radius:100%;
  317.     border:2px solid var(--accent-two);
  318.     display:flex;
  319.     justify-content:center;
  320.     align-items:center;
  321.     box-shadow:2px 8px 8px rgba(0,0,0,.05);
  322. }
  323.  
  324. #totop i, .headicons i {
  325.     font-size:1.5em;
  326.     padding:.4em;
  327.     border-radius:100%;
  328.     color:var(--gradient-text);
  329.     background:var(--accent-two);
  330.     text-shadow:var(--glow);
  331.     -webkit-transition: all 0.4s;
  332.     -moz-transition: all 0.4s;
  333.     -ms-transition: all 0.4s;
  334.     -o-transition: all 0.4s;
  335.     transition: all 0.4s;
  336. }
  337.  
  338. #totop a:hover, .headicons a:hover {box-shadow:2px 8px 8px transparent;}
  339. #totop a:hover i {
  340.     background:transparent;
  341.     -webkit-transition: all 0.4s;
  342.     -moz-transition: all 0.4s;
  343.     -ms-transition: all 0.4s;
  344.     -o-transition: all 0.4s;
  345.     transition: all 0.4s;
  346.     -webkit-animation-duration: 2s;
  347.     animation-duration: 2s;
  348.     -webkit-animation-fill-mode: both;
  349.     animation-fill-mode: both;
  350.     -webkit-animation-timing-function: ease-in-out;
  351.     animation-timing-function: ease-in-out;
  352.     animation-iteration-count:1;
  353.     -webkit-animation-iteration-count:1;
  354.     animation-name: totop;
  355.     -moz-animation-name: totop;
  356. }
  357. .headicons a:hover i {
  358.     background:transparent;
  359.     -webkit-transition: all 0.4s;
  360.     -moz-transition: all 0.4s;
  361.     -ms-transition: all 0.4s;
  362.     -o-transition: all 0.4s;
  363.     transition: all 0.4s;
  364. }
  365.  
  366. /*----- COMMON -----*/
  367.  
  368. main {
  369.     position: relative;
  370.     width:80%;
  371.     margin:80px auto 2em auto;
  372. }
  373.  
  374. section {
  375.     display:flex;
  376.     flex-wrap:wrap;
  377.     gap:1.5em;
  378.     padding:1em;
  379.     border-radius:var(--border-radius);
  380.     background:var(--content);
  381. }
  382.  
  383. article {
  384.     width:100%;
  385.     position:relative;
  386. }
  387.  
  388. .subtitle {
  389.     width:calc(100% - 2em);
  390.     display:flex;
  391.     justify-content:space-between;
  392.     align-items:center;
  393.     padding:.4em 1em .4em 1em;
  394.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  395.     border-radius:30px;
  396.     margin-bottom:1em;
  397. }
  398.  
  399. .subtitle i {
  400.     font-size:1.4em;
  401.     color:var(--gradient-text);
  402.     text-shadow:var(--glow);
  403. }
  404.  
  405. .subtitle span {
  406.     font-family:var(--title-font), sans-serif;
  407.     color:var(--gradient-text);
  408.     font-size:1.1em;
  409.     letter-spacing:.1em;
  410.     font-weight:600;
  411. }
  412.  
  413. .description a {
  414.     display:inline-block;
  415.     position:relative;
  416.     border-bottom:2px solid var(--borders);
  417. }
  418.  
  419. .description a:after {
  420.     content: '';
  421.     position:absolute;
  422.     width:100%;
  423.     transform:scaleX(0);
  424.     height:2px;
  425.     bottom:-2px;
  426.     left:0;
  427.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  428.     transform-origin:middle;
  429.     transition: transform 0.25s ease-out;
  430. }
  431.  
  432. .description a:hover:after {
  433.     transform: scaleX(1);
  434.     transform-origin: middle;
  435. }
  436.  
  437. /*---- BASIC INFO SECTION ----*/
  438.  
  439. article.stats {
  440.     width:25%;
  441.     display:flex;
  442.     flex-direction:column;
  443.     gap:1em;
  444. }
  445.  
  446. .stats img {
  447.     width:calc(100% - 8px);
  448.     border-radius:var(--border-radius);
  449.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  450.     padding:4px;
  451.     box-shadow:2px 8px 8px var(--shadow);
  452. }
  453.  
  454. .infostats {
  455.     display:flex;
  456.     justify-content:flex-start;
  457.     align-items:center;
  458.     flex-wrap:wrap;
  459.     gap:.5em;
  460. }
  461.  
  462. .infostats li {
  463.     width:calc(50% - 2.25em);
  464.     display:flex;
  465.     justify-content:flex-start;
  466.     align-items:center;
  467.     gap:.5em;
  468.     padding:.25em 1em .25em 1em;
  469.     border-radius:30px;
  470.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  471. }
  472.  
  473. .infostats i {
  474.     font-size:1.3em;
  475.     color:var(--gradient-text);
  476.     text-shadow:var(--glow);
  477. }
  478.  
  479. .infostats span {
  480.     font-size:.85em;
  481.     text-transform:uppercase;
  482.     letter-spacing:.1em;
  483.     color:var(--gradient-text);
  484. }
  485.  
  486. /*---- DESCRIPTION SECTION ----*/
  487.  
  488. article.description {width:calc(50% - 2.5em);}
  489.  
  490. #text {padding:0 .5em 0 .5em;}
  491. .description li {margin-left:1em;}
  492.  
  493. /*--- BLOGS SECTION ----*/
  494.  
  495. article.blogswrap {
  496.     width:calc(25% - .5em);
  497.     position:relative;
  498. }
  499.  
  500. .imagesec {
  501.     position:absolute;
  502.     top:0;
  503.     right:-4em;
  504.     width:calc(100% + 4em);
  505.     padding:2px;
  506.     border-radius:var(--border-radius);
  507.     background:linear-gradient(to top right, var(--gradient-one), var(--gradient-two));
  508.     box-shadow:2px 8px 8px var(--shadow);
  509.     -webkit-transition: all 0.4s;
  510.     -moz-transition: all 0.4s;
  511.     -ms-transition: all 0.4s;
  512.     -o-transition: all 0.4s;
  513.     transition: all 0.4s;
  514. }
  515.  
  516. .imagesec a:hover {
  517.     background:var(--content);
  518.     border-radius:var(--border-radius);
  519.     -webkit-transition: all 0.4s;
  520.     -moz-transition: all 0.4s;
  521.     -ms-transition: all 0.4s;
  522.     -o-transition: all 0.4s;
  523.     transition: all 0.4s;
  524. }
  525.  
  526. .imagesec a:hover b {
  527.     color:var(--title);
  528.     -webkit-transition: all 0.4s;
  529.     -moz-transition: all 0.4s;
  530.     -ms-transition: all 0.4s;
  531.     -o-transition: all 0.4s;
  532.     transition: all 0.4s;
  533. }
  534. .imagesec a:hover span {
  535.     color:var(--accent);
  536.     -webkit-transition: all 0.4s;
  537.     -moz-transition: all 0.4s;
  538.     -ms-transition: all 0.4s;
  539.     -o-transition: all 0.4s;
  540.     transition: all 0.4s;
  541. }
  542.  
  543. .imagesec a {
  544.     padding:.5em 2em .5em 2em;
  545.     display:flex;
  546.     justify-content:flex-start;
  547.     align-items:center;
  548.     gap:.5em;
  549. }
  550.  
  551. .imgsec img {
  552.     width:5em;
  553.     height:5em;
  554.     padding:4px;
  555.     object-fit:cover;
  556.     background:linear-gradient(to right, var(--accent), var(--accent-two));
  557.     border-radius:100%;
  558.     -webkit-transition: all 0.4s;
  559.     -moz-transition: all 0.4s;
  560.     -ms-transition: all 0.4s;
  561.     -o-transition: all 0.4s;
  562.     transition: all 0.4s;
  563. }
  564.  
  565. .imagesec li {
  566.     display:flex;
  567.     flex-direction:column;
  568.     color:var(--gradient-text);
  569. }
  570.  
  571. .imagesec b {
  572.     color:var(--gradient-text);
  573.     -webkit-transition: all 0.4s;
  574.     -moz-transition: all 0.4s;
  575.     -ms-transition: all 0.4s;
  576.     -o-transition: all 0.4s;
  577.     transition: all 0.4s;
  578. }
  579. .imagesec a:hover img {
  580.     transform:rotate(10deg);
  581.     -webkit-transition: all 0.4s;
  582.     -moz-transition: all 0.4s;
  583.     -ms-transition: all 0.4s;
  584.     -o-transition: all 0.4s;
  585.     transition: all 0.4s;
  586. }
  587.  
  588. .blogs a {
  589.     display:flex;
  590.     justify-content:flex-start;
  591.     align-items:center;
  592.     gap:.5em;
  593. }
  594.  
  595. .blogs {
  596.     margin-top:9em;
  597.     display:flex;
  598.     flex-direction:column;
  599.     justify-content:flex-start;
  600.     gap:1em;
  601. }
  602.  
  603. .blog-img {
  604.     width:41px;
  605.     height:41px;
  606.     padding:4px;
  607.     border-radius:100%;
  608.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  609. }
  610.  
  611. .blogs a:hover img {
  612.     transform:rotate(15deg);
  613.     -webkit-transition: all 0.4s;
  614.     -moz-transition: all 0.4s;
  615.     -ms-transition: all 0.4s;
  616.     -o-transition: all 0.4s;
  617.     transition: all 0.4s;
  618. }
  619.  
  620. .blog-img img {
  621.     width:41px;
  622.     height:41px;
  623.     border-radius:100%;
  624.     -webkit-transition: all 0.4s;
  625.     -moz-transition: all 0.4s;
  626.     -ms-transition: all 0.4s;
  627.     -o-transition: all 0.4s;
  628.     transition: all 0.4s;
  629. }
  630.  
  631. .blog-desc {
  632.     display:flex;
  633.     flex-direction:column;
  634.     align-items:flex-start;
  635. }
  636.  
  637. .blog-desc b {
  638.     -webkit-transition: all 0.4s;
  639.     -moz-transition: all 0.4s;
  640.     -ms-transition: all 0.4s;
  641.     -o-transition: all 0.4s;
  642.     transition: all 0.4s;
  643. }
  644.  
  645. .blog-desc span {
  646.     font-size:.9em;
  647.     color:var(--accent);
  648.     -webkit-transition: all 0.4s;
  649.     -moz-transition: all 0.4s;
  650.     -ms-transition: all 0.4s;
  651.     -o-transition: all 0.4s;
  652.     transition: all 0.4s;
  653. }
  654.  
  655. .blogs a:hover b {
  656.     color:var(--accent);
  657.     -webkit-transition: all 0.4s;
  658.     -moz-transition: all 0.4s;
  659.     -ms-transition: all 0.4s;
  660.     -o-transition: all 0.4s;
  661.     transition: all 0.4s;
  662. }
  663. .blogs a:hover span {
  664.     color:var(--title);
  665.     -webkit-transition: all 0.4s;
  666.     -moz-transition: all 0.4s;
  667.     -ms-transition: all 0.4s;
  668.     -o-transition: all 0.4s;
  669.     transition: all 0.4s;
  670. }
  671.  
  672. /*--- LIKES/DISLIKES SECTION ---*/
  673.  
  674. article.dis-likes {
  675.     width:calc(20% - 2.5em);
  676.     display:flex;
  677.     justify-content:space-between;
  678.     gap:.5em;
  679. }
  680.  
  681. .likes, .dislikes {
  682.     display:flex;
  683.     flex-direction:column;
  684.     align-items:flex-start;
  685.     width:100%;
  686. }
  687.  
  688. .likes li, .dislikes li {
  689.     width:calc(100% - 2em);
  690.     display:flex;
  691.     justify-content:space-between;
  692.     align-items:center;
  693.     gap:1em;
  694.     padding:0 1em .5em 1em;
  695. }
  696.  
  697. .likes li:last-of-type, .dislikes li:last-of-type {padding-bottom:0;}
  698.  
  699. .likes li i, .dislikes li i {
  700.     font-size:1.3em;
  701.     text-shadow:var(--glow);
  702. }
  703. .likes li i {color:var(--accent);}
  704. .dislikes li i {color:var(--accent-two);}
  705.  
  706. .likes span, .dislikes span {
  707.     text-align:right;
  708. }
  709.  
  710. /*--- TO DO SECTION ---*/
  711.  
  712. article.todo {
  713.     width:25%;
  714.     display:flex;
  715.     flex-direction:column;
  716.     gap:1em;
  717. }
  718. .todo .subtitle {margin-bottom:0;}
  719.  
  720. .todo li {
  721.     display:flex;
  722.     justify-content:space-between;
  723.     align-items:center;
  724.     gap:.5em;
  725. }
  726.  
  727. .todo i {
  728.     font-size:1.5em;
  729.     text-shadow:var(--glow);
  730. }
  731. .todo span {text-align:right;}
  732. .todo li:nth-of-type(odd) i {color:var(--gradient-one);}
  733. .todo li:nth-of-type(even) i {color:var(--gradient-two);}
  734.  
  735. /*--- SKILLS SECTION ---*/
  736.  
  737. article.skills {
  738.     width:calc(50% - 2.5em);
  739. }
  740.  
  741. .skill {
  742.     display:flex;
  743.     flex-direction:column;
  744.     gap:.2em;
  745.     padding-bottom:1em;
  746. }
  747. .skill:last-of-type {padding-bottom:0;}
  748.  
  749. .skill-title {
  750.     text-transform:uppercase;
  751.     letter-spacing:.1em;
  752.     font-size:.9em;
  753.     color:var(--title);
  754. }
  755.  
  756. .skill-line {
  757.     position:relative;
  758.     width:100%;
  759.     height:5px;
  760.     padding:2px;
  761.     background:var(--background);
  762.     border-radius:30px;
  763. }
  764.  
  765. .progressline {
  766.     position:absolute;
  767.     height:5px;
  768.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  769.     border-radius:30px;
  770. }
  771.  
  772. /*--- LINKS SECTION ---*/
  773.  
  774. article.linkwrap {width:calc(25% - .5em);}
  775.  
  776. .links {
  777.     display:flex;
  778.     flex-direction:column;
  779.     gap:.5em;
  780. }
  781.  
  782. .link {
  783.     padding:2px;
  784.     border-radius:30px;
  785.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  786.     -webkit-transition: all 0.4s;
  787.     -moz-transition: all 0.4s;
  788.     -ms-transition: all 0.4s;
  789.     -o-transition: all 0.4s;
  790.     transition: all 0.4s;
  791. }
  792.  
  793. .links a {
  794.     display:flex;
  795.     justify-content:space-between;
  796.     align-items:center;
  797.     padding:.25em 1em .25em 1em;
  798.     border-radius:30px;
  799.     background:var(--content);
  800. }
  801.  
  802. .links i {
  803.     font-size:1.4em;
  804.     color:var(--accent);
  805.     text-shadow:var(--glow);
  806.     -webkit-transition: all 0.4s;
  807.     -moz-transition: all 0.4s;
  808.     -ms-transition: all 0.4s;
  809.     -o-transition: all 0.4s;
  810.     transition: all 0.4s;
  811. }
  812.  
  813. .links span {
  814.     color:var(--link);
  815.     text-transform:uppercase;
  816.     font-size:.9em;
  817.     letter-spacing:.1em;
  818.     -webkit-transition: all 0.4s;
  819.     -moz-transition: all 0.4s;
  820.     -ms-transition: all 0.4s;
  821.     -o-transition: all 0.4s;
  822.     transition: all 0.4s;
  823. }
  824.  
  825. .links a:hover {
  826.     background:transparent;
  827. }
  828. .links a:hover i {
  829.     color:var(--gradient-text);
  830.     -webkit-transition: all 0.4s;
  831.     -moz-transition: all 0.4s;
  832.     -ms-transition: all 0.4s;
  833.     -o-transition: all 0.4s;
  834.     transition: all 0.4s;
  835. }
  836. .links a:hover i:last-of-type {margin-right:1em;}
  837. .links a:hover span {
  838.     color:var(--gradient-text);
  839.     -webkit-transition: all 0.4s;
  840.     -moz-transition: all 0.4s;
  841.     -ms-transition: all 0.4s;
  842.     -o-transition: all 0.4s;
  843.     transition: all 0.4s;
  844. }
  845.  
  846. .link:hover {
  847.     box-shadow:2px 8px 8px var(--shadow);
  848.     -webkit-transition: all 0.4s;
  849.     -moz-transition: all 0.4s;
  850.     -ms-transition: all 0.4s;
  851.     -o-transition: all 0.4s;
  852.     transition: all 0.4s;
  853. }
  854.  
  855. /*--- TESTIMONIALS SECTION ----*/
  856.  
  857. article.testimonials {
  858.     width:100%;
  859.     display:flex;
  860.     flex-wrap:wrap;
  861.     align-items:space-between;
  862.     gap:.5em;
  863. }
  864.  
  865. .testimonials .subtitle {margin-bottom:.5em;}
  866.  
  867. .testimonial {
  868.     display:flex;
  869.     align-items:center;
  870.     gap:.5em;
  871.     width:calc(50% - .5em);
  872. }
  873.  
  874. .timg {
  875.     width:41px;
  876.     height:41px;
  877.     padding:4px;
  878.     border-radius:100%;
  879.     box-shadow:2px 8px 8px var(--shadow);
  880.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  881. }
  882.  
  883. .timg:hover img {
  884.     transform:rotate(15deg);
  885.     -webkit-transition: all 0.4s;
  886.     -moz-transition: all 0.4s;
  887.     -ms-transition: all 0.4s;
  888.     -o-transition: all 0.4s;
  889.     transition: all 0.4s;
  890. }
  891.  
  892. .timg img {
  893.     width:41px;
  894.     height:41px;
  895.     border-radius:100%;
  896.     -webkit-transition: all 0.4s;
  897.     -moz-transition: all 0.4s;
  898.     -ms-transition: all 0.4s;
  899.     -o-transition: all 0.4s;
  900.     transition: all 0.4s;
  901. }
  902.  
  903. .tquote {
  904.     position:relative;
  905.     width:100%;
  906.     padding:1em;
  907.     font-weight:500;
  908.     letter-spacing:.1em;
  909.     color:var(--gradient-text);
  910.     border-radius:var(--border-radius);
  911.     margin-left:1.2em;
  912.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  913.     box-shadow:2px 8px 8px var(--shadow);
  914. }
  915.  
  916. .tquote::before {
  917.     content: "";
  918.     position: absolute;
  919.     top:1em;
  920.     left:-1em;
  921.     height:1.5em;
  922.     width:1.5em;
  923.     background:var(--gradient-one);
  924.   clip-path: polygon(100% 0, 100% 100%,0% 50%);
  925. }
  926.  
  927. /*---- FIXED BUTTONS ----*/
  928.  
  929. footer {
  930.     position:fixed;
  931.     bottom:1em;
  932.     right:1em;
  933.     display:flex;
  934.     flex-direction:column;
  935.     gap:1em;
  936.     z-index:99999999;
  937. }
  938.  
  939. .credit a {
  940.     display:flex;
  941.     justify-content:center;
  942.     align-items:center;
  943.     padding:2px;
  944.     border-radius:100%;
  945.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  946. }
  947.  
  948. .credit i {
  949.     font-size:1.5em;
  950.     padding:.4em;
  951.     color:var(--accent);
  952.     background:var(--content);
  953.     border-radius:100%;
  954.     text-shadow:var(--glow);
  955.     -webkit-transition: all 0.4s;
  956.     -moz-transition: all 0.4s;
  957.     -ms-transition: all 0.4s;
  958.     -o-transition: all 0.4s;
  959.     transition: all 0.4s;
  960. }
  961.  
  962. .credit i:hover {
  963.     color:var(--gradient-text);
  964.     background:transparent;
  965.     -webkit-transition: all 0.4s;
  966.     -moz-transition: all 0.4s;
  967.     -ms-transition: all 0.4s;
  968.     -o-transition: all 0.4s;
  969.     transition: all 0.4s;
  970.     -webkit-animation-duration: 2s;
  971.     animation-duration: 2s;
  972.     -webkit-animation-fill-mode: both;
  973.     animation-fill-mode: both;
  974.     -webkit-animation-timing-function: ease-in-out;
  975.     animation-timing-function: ease-in-out;
  976.     animation-iteration-count:infinite;
  977.     -webkit-animation-iteration-count:infinite;
  978.     animation-name: bounce;
  979.     -moz-animation-name: bounce;
  980. }
  981.  
  982. @keyframes bounce {
  983.     0% {
  984.         -webkit-transform: translateY(0px);
  985.         -ms-transform:     translateY(0px);
  986.         transform:         translateY(0px)
  987.     }
  988.     25% {
  989.         -webkit-transform: translateY(-3px);
  990.         -ms-transform:     translateY(-3px);
  991.         transform:         translateY(-3px)
  992.     }
  993.     50% {
  994.         -webkit-transform: translateY(0px);
  995.         -ms-transform:     translateY(0px);
  996.         transform:         translateY(0px)
  997.     }
  998.     75% {
  999.         -webkit-transform: translateY(-3px);
  1000.         -ms-transform:     translateY(-3px);
  1001.         transform:         translateY(-3px)
  1002.     }
  1003.     100% {
  1004.         -webkit-transform: translateY(0px);
  1005.         -ms-transform:     translateY(0px);
  1006.         transform:         translateY(0px)
  1007.     }
  1008. }
  1009.  
  1010. @keyframes totop {
  1011.     0% {
  1012.         -webkit-transform: translateY(0px);
  1013.         -ms-transform:     translateY(0px);
  1014.         transform:         translateY(0px)
  1015.     }
  1016.     18% {
  1017.         -webkit-transform: translateY(-3px);
  1018.         -ms-transform:     translateY(-3px);
  1019.         transform:         translateY(-3px)
  1020.     }
  1021.     36% {
  1022.         -webkit-transform: translateY(0px);
  1023.         -ms-transform:     translateY(0px);
  1024.         transform:         translateY(0px)
  1025.     }
  1026.     54% {
  1027.         -webkit-transform: translateY(-3px);
  1028.         -ms-transform:     translateY(-3px);
  1029.         transform:         translateY(-3px)
  1030.     }
  1031.     82% {
  1032.         -webkit-transform: translateY(0px);
  1033.         -ms-transform:     translateY(0px);
  1034.         transform:         translateY(0px)
  1035.     }
  1036.     100% {
  1037.         -webkit-transform: translateY(0px);
  1038.         -ms-transform:     translateY(0px);
  1039.         transform:         translateY(0px)
  1040.     }
  1041. }
  1042.  
  1043. /*---- RESPONSIVENESS ----*/
  1044.  
  1045. @media only screen and (max-width: 1100px) {
  1046.  
  1047. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;!important;}
  1048.  
  1049. main {width:88%;}
  1050.  
  1051. .infostats li {width:100%;}
  1052.  
  1053. .link i:first-of-type {display:none;}
  1054.  
  1055. }
  1056.  
  1057. @media only screen and (max-width: 750px) {
  1058.  
  1059. article.title-wrap {
  1060.     width:calc(100% - 2em);
  1061.     flex-direction:column;
  1062. }
  1063. .title {width:100%; justify-content:center;}
  1064. .titleicon {width:100%; justify-content:space-around;}
  1065.  
  1066. article.description {width:100%;}
  1067. article.stats {width:100%;}
  1068. .stats img {max-height:100%;}
  1069.  
  1070. .dis-likes {flex-direction:column; align-items:center;}
  1071.  
  1072. .imagesec {right:-2em;}
  1073. article.blogswrap {flex-direction:column; width:100%;}
  1074. .blogs {width:100%;}
  1075.  
  1076. article.todo {width:calc(50% - 1em);}
  1077. article.skills {width:calc(50% - 1em);}
  1078. article.linkwrap {width:100%;}
  1079.  
  1080. .testimonials {flex-direction:column;}
  1081. .testimonial {width:100%;}
  1082.  
  1083. tumblr_controls, .tmblr-iframe{display:none!important;}
  1084.  
  1085. }
  1086.  
  1087. {CustomCSS}
  1088.  
  1089. </style>
  1090. </head>
  1091.  
  1092. <!----- HTML ----->
  1093.  
  1094. <body>
  1095.  
  1096. <main> <!-- main container -->
  1097.  
  1098. <!--- HEADER --->
  1099. <header>
  1100.     <div class="topicon">
  1101.         <img src="{portraiturl-128}">
  1102.         <a href="/">
  1103.             <b>{title}</b>
  1104.             <span>about me</span>
  1105.         </a>
  1106.     </div>
  1107.     <div class="headicons">
  1108.         <a title="home" href="/"><i class="ph-house"></i></a>
  1109.         <a title="contact" href="/ask"><i class="ph-chats-circle"></i></a>
  1110.         <div id="totop"><a href="#top" target="_self"><i title="back to top" class="ph-arrow-up"></i></a></div>
  1111.     </div>
  1112. </header><!-- header ends -->
  1113.  
  1114. <section><!-- section -->
  1115.  
  1116. <!--- EDIT HERE: BASIC INFO STATS
  1117.  
  1118.     STATS FORMAT:
  1119.  
  1120.         <li>
  1121.             <i class="ph-icon"></i>
  1122.             <span>text<span>
  1123.         </li>
  1124.        
  1125.     - replace the image url below with your image url
  1126.    
  1127. --->
  1128. <article class="stats">
  1129.     <img src="https://64.media.tumblr.com/020355f7fb7e5978bf464430bdb031ac/34d40a011793813b-f6/s1280x1920/c007c9972ae19bdd6a0e93429d272c40c5af4b0a.pnj">
  1130.     <div class="infostats">
  1131.  
  1132.         <li>
  1133.             <i class="ph-identification-badge"></i>
  1134.             <span>name<span>
  1135.         </li>
  1136.  
  1137.         <li>
  1138.             <i class="ph-leaf"></i>
  1139.             <span>pronouns<span>
  1140.         </li>
  1141.  
  1142.         <li>
  1143.             <i class="ph-cake"></i>
  1144.             <span>age<span>
  1145.         </li>
  1146.  
  1147.         <li>
  1148.             <i class="ph-heart"></i>
  1149.             <span>sexuality<span>
  1150.         </li>
  1151.  
  1152.         <li>
  1153.             <i class="ph-butterfly"></i>
  1154.             <span>race<span>
  1155.         </li>
  1156.  
  1157.         <li>
  1158.             <i class="ph-map-pin"></i>
  1159.             <span>location<span>
  1160.         </li>
  1161.    
  1162.     </div><!-- basic info ends -->
  1163. </article>
  1164.  
  1165. <!--- EDIT HERE: DESCRIPTION SECTION ---->
  1166. <article class="description">
  1167. <div class="subtitle"><span>about</span> <i class="ph-user"></i></div>
  1168.     <div id="text">
  1169.     description goes here.
  1170.     <p>this is an <b>about page</b> made to go with my <a href="https://demontimes.tumblr.com/post/685608005883101184/tangerine-theme-by-sage-static-preview-code">tangerine theme</a>!</p>
  1171.     </div>
  1172. </article><!-- description ends -->
  1173.  
  1174.    
  1175. <!---- EDIT HERE: BLOGS SECTION
  1176.  
  1177.     FEATURED BLOG FORMAT:
  1178.        
  1179.         <a href="/">
  1180.         <div class="imgsec"><img src="https://64.media.tumblr.com/1ed4db9af29397e3c60bb66a25da831b/1a75380b229a28d4-d4/s2048x3072/40c577f4c597c2298106f1ae10b17a58bbac7e78.jpg"></div>
  1181.         <li><b>name</b> <span>description</span></li>
  1182.         </a>
  1183.        
  1184.     - replace the image url with whatever image you want!
  1185.    
  1186.     REGULAR BLOG FORMAT:
  1187.        
  1188.         <a href="https://demontimes.tumblr.com">
  1189.             <div class="blog-img"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></div>
  1190.             <div class="blog-desc"><b>blog name</b><span>blog description</span></div>
  1191.         </a>
  1192.    
  1193.     - replace everywhere it says demontimes with the blog's url
  1194.    - make sure the blog name stays between <b></b> and the description stays between <span></span>
  1195.    
  1196. ---->
  1197. <article class="blogswrap">
  1198.    
  1199. <!--- paste your image url below --->
  1200.    <div class="imagesec">
  1201.        <a href="/">
  1202.        <div class="imgsec"><img src="https://64.media.tumblr.com/1ed4db9af29397e3c60bb66a25da831b/1a75380b229a28d4-d4/s2048x3072/40c577f4c597c2298106f1ae10b17a58bbac7e78.jpg"></div>
  1203.        <li><b>name</b> <span>description</span></li>
  1204.        </a>
  1205.    </div>
  1206.    <div class="blogs">
  1207.        <a href="https://demontimes.tumblr.com">
  1208.            <div class="blog-img"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></div>
  1209.            <div class="blog-desc"><b>blog name</b><span>blog description</span></div>
  1210.        </a>
  1211.        
  1212.        <a href="https://demontimes.tumblr.com">
  1213.            <div class="blog-img"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></div>
  1214.            <div class="blog-desc"><b>blog name</b><span>blog description</span></div>
  1215.        </a>
  1216.        
  1217.        <a href="https://demontimes.tumblr.com">
  1218.            <div class="blog-img"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></div>
  1219.            <div class="blog-desc"><b>blog name</b><span>blog description</span></div>
  1220.        </a>
  1221.    </div>
  1222. </article><!-- blogs ends -->
  1223.  
  1224. <!--- EDIT HERE: TO DO LIST --->
  1225. <article class="todo">
  1226. <div class="subtitle"><span>to do list</span> <i class="ph-list-checks"></i></div>
  1227.    <li><i class="ph-check-circle"></i><span>to do item</span></li>
  1228.    <li><i class="ph-check-circle"></i><span>to do item</span></li>
  1229.    <li><i class="ph-circle"></i><span>to do item</span></li>
  1230.    <li><i class="ph-circle"></i><span>to do item</span></li>
  1231. </article>
  1232.  
  1233. <!--- EDIT HERE: SKILLS SECTION
  1234.  
  1235. - adjust the percentage number to whatever you want
  1236. - if you want the bar to be full make it 98.5%
  1237.  
  1238. --->
  1239. <article class="skills">
  1240. <div class="subtitle"><span>skills</span> <i class="ph-activity"></i></div>
  1241.    <div class="skill">
  1242.        <div class="skill-title">skill name</div>
  1243.        <div class="skill-line">
  1244.            <div class="progressline" style="width:50%"></div>
  1245.        </div>
  1246.    </div>
  1247.    <div class="skill">
  1248.        <div class="skill-title">skill name</div>
  1249.        <div class="skill-line">
  1250.            <div class="progressline" style="width:80%"></div>
  1251.        </div>
  1252.    </div>
  1253.    <div class="skill">
  1254.        <div class="skill-title">skill name</div>
  1255.        <div class="skill-line">
  1256.            <div class="progressline" style="width:15%"></div>
  1257.        </div>
  1258.    </div>
  1259. </article>
  1260.  
  1261. <!--- EDIT HERE: LINKS SECTION
  1262.  
  1263.    - you can change the icons if you want but you don't have to!
  1264.     - put your link's url where the / is, make sure it stays between the quotation marks
  1265.    - make sure your link's name stays between <span></span>
  1266.  
  1267. --->
  1268. <article class="linkwrap">
  1269. <div class="subtitle"><span>navigate</span> <i class="ph-link-simple-horizontal"></i></div>
  1270.     <div class="links">
  1271.         <div class="link"><a href="/"><i class="ph-link"></i><span>link one</span><i class="ph-caret-right"></i></a></div>
  1272.         <div class="link"><a href="/"><i class="ph-link"></i><span>link two</span><i class="ph-caret-right"></i></a></div>
  1273.         <div class="link"><a href="/"><i class="ph-link"></i><span>link three</span><i class="ph-caret-right"></i></a></div>
  1274.         <div class="link"><a href="/"><i class="ph-link"></i><span>link four</span><i class="ph-caret-right"></i></a></div>
  1275.     </div><!-- basic info ends -->
  1276. </article>
  1277.    
  1278. <!---- EDIT HERE: TESTIMONIALS
  1279.  
  1280.     FORMAT:
  1281.            
  1282.         <div class="testimonial">
  1283.             <div class="timg"><a title="@demontimes" href="https://demontimes.tumblr.com"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></a></div>
  1284.             <div class="tquote">quote goes here</div>
  1285.         </div>
  1286.    
  1287.     - replace everywhere it says demontimes with the blog's url
  1288.  
  1289. --->
  1290. <article class="testimonials">
  1291. <div class="subtitle"><span>testimonials</span> <i class="ph-quotes"></i></div>
  1292.            
  1293.    <div class="testimonial">
  1294.        <div class="timg"><a title="@demontimes" href="https://demontimes.tumblr.com"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></a></div>
  1295.        <div class="tquote">quote goes here</div>
  1296.    </div>
  1297.            
  1298.        <div class="testimonial">
  1299.            <div class="timg"><a title="@demontimes" href="https://demontimes.tumblr.com"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></a></div>
  1300.            <div class="tquote">quote goes here</div>
  1301.        </div>
  1302.            
  1303.        <div class="testimonial">
  1304.            <div class="timg"><a title="@demontimes" href="https://demontimes.tumblr.com"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></a></div>
  1305.            <div class="tquote">quote goes here</div>
  1306.        </div>
  1307.            
  1308.        <div class="testimonial">
  1309.            <div class="timg"><a title="@demontimes" href="https://demontimes.tumblr.com"><img src="https://api.tumblr.com/v2/blog/demontimes.tumblr.com/avatar"></a></div>
  1310.            <div class="tquote">quote goes here</div>
  1311.        </div>
  1312.            
  1313.    </div><!-- testimonials ends -->
  1314.    
  1315. </div>
  1316. </article>
  1317.  
  1318. </section><!-- section ends -->
  1319.  
  1320. <footer>
  1321. <!--- CREDIT: DO NOT TOUCH ---->
  1322. <div class="credit">
  1323. <a href="https://demontimes.tumblr.com" title="page by sage"><i class="ph-ghost"></i></a>
  1324. </div>
  1325. </footer>
  1326.  
  1327. </main><!-- end of main container -->
  1328.  
  1329. <script>
  1330.  
  1331. // tooltips
  1332. tippy('[title]', {
  1333.    theme: 'custom',
  1334.    arrow: false,
  1335.    followCursor: true,
  1336.    delay: 100,
  1337.    placement: 'top',
  1338.    zIndex: 9999999999,
  1339.    maxWidth: 400,
  1340.  
  1341.    content(reference) {
  1342.      const title = reference.getAttribute('title');
  1343.      reference.removeAttribute('title');
  1344.      return title;
  1345.    },
  1346. });
  1347.  
  1348. //scroll to top
  1349. $(document).ready(function(){
  1350.    $('#totop a').click(function(){
  1351.        $('html, body').animate({scrollTop : 0},400);
  1352.        return false;
  1353.    });
  1354. });
  1355.  
  1356. // day/night
  1357. $(document).ready(function(){
  1358.      $('.daynight').click(function(){
  1359.         $('body').toggleClass('night');
  1360.         $('.daynight i').toggleClass('ph-sun');
  1361.      });
  1362.   });
  1363.  
  1364. </script>
  1365.  
  1366. </body>
  1367. </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!