API tools faq
paste
Advertisement
themesbydoori

Interdimensional

themesbydoori
Nov 9th, 2020 (edited)
924
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 47.66 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. page ⎾INTERDIMENSIONAL⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > Tippy.js: https://atomiks.github.io/tippyjs/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > FullPage.js: https://alvarotrigo.com/fullPage/
  27.  
  28. !-->
  29.  
  30. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  31. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  32.  
  33. <head>
  34.  
  35. <!--Custom Fonts-->
  36. <link href="https://fonts.googleapis.com/css?family=Exo:300,300i,400,400i,500,500i|Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito+Sans:300,300i,400,400i,600,600i,700,700i|Titillium+Web:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i|Oxygen:300,400,700|Arimo:400,400i,700,700i|Lato:300,300i,400,400i,700,700i|Karla:400,400i,700,700i|Montserrat:300,300i,400,400i,500,500i" rel="stylesheet">
  37. <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  38. <!--Custom Fonts-->
  39.  
  40. <!--Homelinks Icons-->
  41. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  42. <!--Homelinks Icons-->
  43.  
  44.     <title>{Title}</title>
  45.     <link rel="shortcut icon" href="{Favicon}">
  46.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  47.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  48.     <meta name="viewport" content="width=device-width, initial-scale=1">
  49.  
  50.  
  51. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  52. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  53.  
  54. <style type="text/css">
  55.  
  56. /*----------FADE-IN ANIMATION----------*/
  57.  
  58. /*------
  59.  
  60. CUSTOMIZATION OPTIONS HERE. HERE YOU CAN GE EVERYTHING FROM THE COLORS TO THE OVERALL FONT SIZE TO YOUR LIKING!
  61.  
  62. ------ */
  63.  
  64. :root {
  65.     --accent: #A52F40;
  66.     --accented-text: #ffffff;
  67.     --main-background: #A25338;
  68.     --main-font: 14px;
  69.     --main-font-color: #ffffff;
  70.     --title-text: #ffffff;
  71.     --header-title: #ffffff;
  72.     --header-content-text: #ffffff;
  73.     --header-content-background: #222222;
  74.     --bolded: #D3DFDD;
  75.     --main-links: #ffffff;
  76.     --link-hover: #DD824F;
  77.     --scrollbar: #55443D;
  78.     --text-selection-background: #443729;
  79.     --text-selection: #fff;
  80.     --tooltip: #fff;
  81.     --tooltip-background: #D2743E;
  82.     --post-borders: #DD935E;
  83.     --corners: #313131;
  84.     --container: #222222;
  85.     --progress-bar-outline: #DD935E;
  86. }
  87.  
  88. /*----------FADE-IN ANIMATION----------*/
  89.  
  90. @keyframes fadein {
  91.     from {opacity:0;}
  92.     to {opacity:1;}
  93. }
  94.  
  95. @-moz-keyframes fadein { /* Firefox */
  96.     from {opacity:0;}
  97.     to {opacity:1;}
  98. }
  99.  
  100. @-webkit-keyframes fadein { /* Safari and Chrome */
  101.     from {opacity:0;}
  102.     to {opacity:1;}
  103. }
  104.  
  105. @-o-keyframes fadein { /* Opera */
  106.     from {opacity:0;}
  107.     to {opacity: 1;}
  108. }
  109.  
  110. /*----------TUMBLR CONTROLS----------*/
  111.  
  112. iframe#tumblr_controls, .iframe-controls--desktop {
  113.     right: 10px !important;
  114.     top: 25px !important;
  115.     position: fixed !important;
  116.     z-index: 99999999999999999999 !important;
  117.     -webkit-filter: invert(100%);
  118.     -moz-filter: invert(100%);
  119.     -o-filter: invert(100%);
  120.     -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  121.     -webkit-transition: all 0.8s ease-out;
  122.     -moz-transition: all 0.8s ease-out;
  123.     transition: all 0.8s ease-out;
  124.     display: none;
  125. }
  126.  
  127. /*----------SCROLLBAR----------*/
  128.  
  129. ::-webkit-scrollbar {
  130.     width: 6px;
  131.     height: 6px;
  132. }
  133. ::-webkit-scrollbar-button {
  134.     width: 0px;
  135.     height: 0px;
  136. }
  137. ::-webkit-scrollbar-thumb {
  138.     background-color: var(--scrollbar);
  139.     border-radius: 6px;
  140. }
  141.  
  142. ::-webkit-scrollbar-track {
  143.     background: var(--main-background);
  144.     border-radius: 6px;
  145. }
  146.  
  147. /*----------TOOLTIPS----------*/
  148.  
  149. .tippy-tooltip.custom-theme {
  150.     background-color: var(--tooltip-background);
  151.     color: var(--tooltip);
  152.     text-align:center;
  153.     font-size: 12px;
  154. }
  155.  
  156. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  157.   fill: var(--tooltip-background);
  158. }
  159.  
  160. /*----------TEXT SELECTION----------*/
  161. ::selection {
  162.     background: var(--text-selection-background); /*change the color of the text selection background*/
  163.     color: var(--text-selection); /*change the color of the text selection*/
  164. }
  165.  
  166. ::-moz-selection {
  167.     background: var(--text-selection-background); /*change the color of the text selection background*/
  168.     color: var(--text-selection); /*change the color of the text selection*/
  169. }
  170.  
  171. ::-webkit-selection {
  172.     background: var(--text-selection-background); /*change the color of the text selection background*/
  173.     color: var(--text-selection); /*change the color of the text selection*/
  174. }
  175.  
  176. /*----------THEME BASICS----------*/
  177.  
  178. body {
  179.     color: var(--main-font-color);
  180.     font-family: 'Roboto', sans-serif;
  181.     font-weight: 400;
  182.     font-size: var(--main-font);
  183.     line-height: 180%;
  184.     margin: 0;
  185.     text-align: justify;
  186.     background: var(--main-background) url("") center; /*change the color of the main background and add a background image between the quotations*/
  187.     background-attachment: fixed;
  188.     background-repeat: repeat;
  189.     -webkit-font-smoothing: antialiased;
  190.     -moz-osx-font-smoothing: grayscale;
  191.     animation: fadein 2.5s;
  192.     -moz-animation: fadein 2.5s; /* Firefox */
  193.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  194.     -o-animation: fadein  2.5s; /* Opera */
  195. }
  196.  
  197. b,strong {
  198.     color:var(--bolded);
  199.     font-weight: 700;
  200. }
  201.  
  202. i,em {
  203.     color:var(--text);
  204. }
  205.  
  206. u {
  207.     color:var(--bolded);
  208. }
  209.  
  210. hr {
  211.     width: 30%;
  212.     height: 1px;
  213.     background-color: var(--post-borders);
  214.     color: var(--post-borders);
  215.     border: 0px solid transparent;
  216. }
  217.  
  218. h1,h2,h3 {
  219.     font-weight: 700;
  220.     font-size: 2em;
  221.     color: var(--header-text);
  222. }
  223.  
  224. small,sub,sup {
  225.     font-size: 10px;
  226. }
  227.  
  228. a {
  229.     color: var(--main-links);
  230.     text-decoration:none;
  231.     -moz-transition-duration: 0.8s;
  232.     -o-transition-duration: 0.8s;
  233.     -webkit-transition-duration: 0.8s;
  234.     transition-duration: 0.8s;
  235. }
  236.  
  237. a:hover {
  238.     color: var(--link-hover);
  239.     -moz-transition-duration: 0.8s;
  240.     -o-transition-duration: 0.8s;
  241.     -webkit-transition-duration: 0.8s;
  242.     transition-duration: 0.8s;
  243. }
  244.  
  245. /*----------TOP BANNER----------*/
  246.  
  247. #banner-top {
  248.     width: 100%;
  249.     height: 60px;
  250.     background-color: var(--corners);
  251.     position: fixed;
  252.     top: 0;
  253.     left: 0;
  254.     right: 0;
  255.     z-index: 99;
  256.     padding: 20px 10px;
  257.     box-sizing: border-box;
  258.     display: flex;
  259.     justify-content: space-around;
  260.     align-items: center;
  261.     z-index: 9;
  262. }
  263.  
  264. #banner-top h2 {
  265.     color: var(--title-text);
  266. }
  267.  
  268. .homelinks a {
  269.     margin: 0 20px;
  270.     font-weight: 700;
  271.     font-size: 1.2em;
  272.     text-transform: capitalize;
  273.     color: var(--main-links);
  274.     box-shadow: inset 0px 0px 0px 0px transparent;
  275. }
  276.  
  277. .homelinks a:hover {
  278.     box-shadow: inset 0px -12px 0px 0px var(--link-hover);
  279. }
  280.  
  281. /*----------RIGHT BANNER----------*/
  282.  
  283. #banner-right {
  284.     height: 100%;
  285.     width: 60px;
  286.     background-color: var(--corners);
  287.     position: fixed;
  288.     top: 0;
  289.     right: 0;
  290.     z-index: 9;
  291. }
  292.  
  293. /*----------BOTTOM BANNER----------*/
  294.  
  295. #banner-bottom {
  296.     width: 100%;
  297.     height: 60px;
  298.     background-color: var(--corners);
  299.     position: fixed;
  300.     bottom: 0;
  301.     left: 0;
  302.     right: 0;
  303.     z-index: 99;
  304.     padding: 20px 10px;
  305.     box-sizing: border-box;
  306.     display: flex;
  307.     justify-content: center;
  308.     align-items: center;
  309.     z-index: 9;
  310. }
  311.  
  312. #banner-bottom a {
  313.     margin: 0 20px;
  314.     font-weight: 700;
  315.     color: var(--main-links);
  316.     font-size: 1.2em;
  317.     box-shadow: inset 0px 0px 0px 0px transparent;
  318. }
  319.  
  320. #banner-bottom a:hover {
  321.     color: var(--main-links);
  322.     box-shadow: inset 0px -12px 0px 0px var(--link-hover);
  323. }
  324.  
  325. /*----------LEFT BANNER----------*/
  326.  
  327. #banner-left {
  328.     height: 100%;
  329.     width: 60px;
  330.     background-color: var(--corners);
  331.     position: fixed;
  332.     top: 0;
  333.     left: 0;
  334.     z-index: 9;
  335. }
  336.  
  337. /*----------FULLPAGE----------*/
  338.  
  339. #fullpage {
  340.     height: 100vh;
  341. }
  342.  
  343. /*----------CONTAINER----------*/
  344.  
  345. .section {
  346.     position: relative;
  347.     margin: auto;
  348.     width: calc(100% - 60px);
  349.     height: 100vh;
  350.     margin-bottom: 10px;
  351. }
  352.  
  353. .container {
  354.     position: relative;
  355.     margin: auto;
  356.     width: calc(100% - 20px);
  357.     height: 100%;
  358.     display: flex;
  359.     flex-direction: row;
  360.     justify-content: space-around;
  361.     align-items: center;
  362.     padding: 50px 20px;
  363.     box-sizing: border-box;
  364.     background-color: var(--container);
  365. }
  366.  
  367. /*----------HEADER IMAGE----------*/
  368.  
  369. #header-image {
  370.     width: auto;
  371.     height: 100%;
  372.     display: flex;
  373.     justify-content: center;
  374.     align-items: center;
  375.     background-color: var(--container);
  376. }
  377.  
  378. #header-image img {
  379.     width: 100%;
  380.     height: auto;
  381. }
  382.  
  383. /*----------HEADER CONTENT----------*/
  384.  
  385. #header-content {
  386.     width: 40%;
  387.     height: 95%;
  388.     padding: 20px 60px;
  389.     box-sizing: border-box;
  390.     display: flex;
  391.     flex-direction: column;
  392.     justify-content: center;
  393.     align-items: center;
  394.     text-align: center;
  395.     position: absolute;
  396.     left: 50%;
  397.     top: 50%;
  398.     transform: translate(-50%, -50%);
  399.     background-color: var(--header-content-background);
  400.     clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  401. }
  402.  
  403. #header-content p {
  404.     padding: 20px;
  405.     margin: 0;
  406. }
  407.  
  408. /*----------HEADER TITLE----------*/
  409.  
  410. .main-title {
  411.     padding: 10px;
  412.     position: relative;
  413.     color: var(--header-title);
  414.     margin: 10px 0 5px;
  415. }
  416.  
  417. .main-title:before {
  418.     content: '';
  419.     position: absolute;
  420.     left: -30%;
  421.     top: 50%;
  422.     background-color: var(--post-borders);
  423.     width: 25%;
  424.     height: 1px;
  425. }
  426.  
  427. .main-title:after {
  428.     content: '';
  429.     position: absolute;
  430.     right: -30%;
  431.     top: 50%;
  432.     background-color: var(--post-borders);
  433.     width: 25%;
  434.     height: 1px;
  435. }
  436.  
  437. /*----------IMAGE----------*/
  438.  
  439. .image-container {
  440.     width: 30%;
  441.     height: 700px;
  442.     display: flex;
  443.     justify-content: center;
  444.     align-items: center;
  445.     position: relative;
  446.     padding: 20px;
  447.     box-sizing: border-box;
  448. }
  449.  
  450. .image-container img {
  451.     max-width: 100%;
  452.     height: auto;
  453. }
  454.  
  455. /*----------IMAGE SQUARES----------*/
  456.  
  457. .square-1 {
  458.     width: 20px;
  459.     height: 20px;
  460.     border: 2px solid var(--post-borders);
  461.     background-color: transparent;
  462.     position: absolute;
  463.     left: -5px;
  464.     top: -10px;
  465. }
  466.  
  467. .square-2 {
  468.     width: 20px;
  469.     height: 20px;
  470.     border: 2px solid var(--post-borders);
  471.     background-color: transparent;
  472.     position: absolute;
  473.     right: -5px;
  474.     bottom: -10px;
  475. }
  476.  
  477. .square-3 {
  478.     width: 20px;
  479.     height: 20px;
  480.     border: 2px solid var(--post-borders);
  481.     background-color: transparent;
  482.     position: absolute;
  483.     right: -5px;
  484.     top: -10px;
  485. }
  486.  
  487. .square-4 {
  488.     width: 20px;
  489.     height: 20px;
  490.     border: 2px solid var(--post-borders);
  491.     background-color: transparent;
  492.     position: absolute;
  493.     left: -5px;
  494.     bottom: -10px;
  495. }
  496.  
  497. /*----------BIOGRAPHY SECTION----------*/
  498.  
  499. .biography {
  500.     width: 30%;
  501.     height: 700px;
  502.     display: flex;
  503.     flex-direction: column;
  504.     align-items: flex-start;
  505.     padding: 20px;
  506.     box-sizing: border-box;
  507. }
  508.  
  509. .biography h2 {
  510.     width: 100%;
  511.     font-size: 1.7em;
  512.     border-bottom: 1px solid var(--post-borders);
  513.     padding-bottom: 10px;
  514.     margin-top: 0;
  515. }
  516.  
  517. /*----------STATS SECTION----------*/
  518.  
  519. .stats-section {
  520.     width: 30%;
  521.     height: 700px;
  522.     display: flex;
  523.     flex-direction: column;
  524.     justify-content: space-between;
  525.     padding: 20px;
  526.     box-sizing: border-box;
  527. }
  528.  
  529. .stats {
  530.     position: relative;
  531.     box-sizing: border-box;
  532. }
  533.  
  534. .stats h2 {
  535.     border-bottom: 1px solid var(--post-borders);
  536.     padding-bottom: 10px;
  537.     font-size: 1.6em;
  538.     margin-top: 0;
  539. }
  540.  
  541. .stats p:first-of-type {
  542.     margin-top: 20px;
  543. }
  544.  
  545. .stats p:last-of-type {
  546.     margin-bottom: 0px;
  547. }
  548.  
  549. .stats b {
  550.     color: var(--bolded);
  551. }
  552.  
  553. .progress-bar {
  554.     margin-top: 20px;
  555. }
  556.  
  557. .bar, .bar-2, .bar-3, .bar-4, .bar-5 {
  558.     margin: 10px 0;
  559. }
  560.  
  561. .bar-info span, .bar-info-2 span, .bar-info-3 span, .bar-info-4 span, .bar-info-5 span {
  562.     color: var(--bolded);
  563.     font-weight: 700;
  564. }
  565.  
  566. .progress-line, .progress-line-2, .progress-line-3, .progress-line-4, .progress-line-5 {
  567.     position: relative;
  568.     width: 100%;
  569.     height: 10px;
  570.     background-color: var(--progress-bar-outline);
  571.     border-radius: 10px;
  572. }
  573.  
  574. /*----------PAGE 1----------*/
  575.  
  576. .progress-line.skill-1 span {
  577.     width: 80%; /*------CHANGE PERCENTAGE HERE------*/
  578. }
  579.  
  580. .progress-line.skill-2 span {
  581.     width: 25%; /*------CHANGE PERCENTAGE HERE------*/
  582. }
  583.  
  584. .progress-line.skill-3 span {
  585.     width: 60%; /*------CHANGE PERCENTAGE HERE------*/
  586. }
  587.  
  588. .progress-line.skill-4 span {
  589.     width: 95%; /*------CHANGE PERCENTAGE HERE------*/
  590. }
  591.  
  592. .progress-line span {
  593.     width: 80%;
  594.     height: 100%;
  595.     background-color: var(--accent);
  596.     position: absolute;
  597.     border-radius: 10px;
  598. }
  599.  
  600. .bar:first-child {
  601.     margin-top: 0px;
  602. }
  603.  
  604. .bar:last-child {
  605.     margin-bottom: 0px;
  606. }
  607.  
  608. /*----------PAGE 2----------*/
  609.  
  610. .progress-line-2.skill-5 span {
  611.     width: 70%; /*------CHANGE PERCENTAGE HERE------*/
  612. }
  613.  
  614. .progress-line-2.skill-6 span {
  615.     width: 35%; /*------CHANGE PERCENTAGE HERE------*/
  616. }
  617.  
  618. .progress-line-2.skill-7 span {
  619.     width: 40%; /*------CHANGE PERCENTAGE HERE------*/
  620. }
  621.  
  622. .progress-line-2.skill-8 span {
  623.     width: 65%; /*------CHANGE PERCENTAGE HERE------*/
  624. }
  625.  
  626. .progress-line-2 span {
  627.     width: 80%;
  628.     height: 100%;
  629.     background-color: var(--accent);
  630.     position: absolute;
  631.     border-radius: 10px;
  632. }
  633.  
  634. .bar-2:first-child {
  635.     margin-top: 0px;
  636. }
  637.  
  638. .bar-2:last-child {
  639.     margin-bottom: 0px;
  640. }
  641.  
  642. /*----------PAGE 3----------*/
  643.  
  644. .progress-line-3.skill-9 span {
  645.     width: 50%; /*------CHANGE PERCENTAGE HERE------*/
  646. }
  647.  
  648. .progress-line-3.skill-10 span {
  649.     width: 45%; /*------CHANGE PERCENTAGE HERE------*/
  650. }
  651.  
  652. .progress-line-3.skill-11 span {
  653.     width: 80%; /*------CHANGE PERCENTAGE HERE------*/
  654. }
  655.  
  656. .progress-line-3.skill-12 span {
  657.     width: 55%; /*------CHANGE PERCENTAGE HERE------*/
  658. }
  659.  
  660. .progress-line-3 span {
  661.     width: 80%;
  662.     height: 100%;
  663.     background-color: var(--accent);
  664.     position: absolute;
  665.     border-radius: 10px;
  666. }
  667.  
  668. .bar-3:first-child {
  669.     margin-top: 0px;
  670. }
  671.  
  672. .bar-3:last-child {
  673.     margin-bottom: 0px;
  674. }
  675.  
  676. /*----------PAGE 4----------*/
  677.  
  678. .progress-line-4.skill-13 span {
  679.     width: 30%; /*------CHANGE PERCENTAGE HERE------*/
  680. }
  681.  
  682. .progress-line-4.skill-14 span {
  683.     width: 25%; /*------CHANGE PERCENTAGE HERE------*/
  684. }
  685.  
  686. .progress-line-4.skill-15 span {
  687.     width: 60%; /*------CHANGE PERCENTAGE HERE------*/
  688. }
  689.  
  690. .progress-line-4.skill-16 span {
  691.     width: 95%; /*------CHANGE PERCENTAGE HERE------*/
  692. }
  693.  
  694. .progress-line-4 span {
  695.     width: 80%;
  696.     height: 100%;
  697.     background-color: var(--accent);
  698.     position: absolute;
  699.     border-radius: 10px;
  700. }
  701.  
  702. .bar-4:first-child {
  703.     margin-top: 0px;
  704. }
  705.  
  706. .bar-4:last-child {
  707.     margin-bottom: 0px;
  708. }
  709.  
  710. /*----------PAGE 5----------*/
  711.  
  712. .progress-line-5.skill-17 span {
  713.     width: 20%; /*------CHANGE PERCENTAGE HERE------*/
  714. }
  715.  
  716. .progress-line-5.skill-18 span {
  717.     width: 55%; /*------CHANGE PERCENTAGE HERE------*/  
  718. }
  719.  
  720. .progress-line-5.skill-19 span {
  721.     width: 60%; /*------CHANGE PERCENTAGE HERE------*/
  722. }
  723.  
  724. .progress-line-5.skill-20 span {
  725.     width: 35%; /*------CHANGE PERCENTAGE HERE------*/
  726. }
  727.  
  728. .progress-line-5 span {
  729.     width: 80%;
  730.     height: 100%;
  731.     background-color: var(--accent);
  732.     position: absolute;
  733.     border-radius: 10px;
  734. }
  735.  
  736. .bar-5:first-child {
  737.     margin-top: 0px;
  738. }
  739.  
  740. .bar-5:last-child {
  741.     margin-bottom: 0px;
  742. }
  743.  
  744. .la-quote-left {
  745.     font-size: 28px;
  746.     color: var(--accent);
  747. }
  748.  
  749. /*----------DO NOT TOUCH----------*/
  750.  
  751. @media screen and (max-width: 1100px) {
  752.     .container {
  753.         display: flex;
  754.         flex-wrap: wrap;
  755.         overflow: auto;
  756.         max-height: 100%;
  757.         width: 100%;
  758.         height: 100vh;
  759.         padding: 30px 20px 180px;
  760.         margin-top: 80px;
  761.     }
  762.    
  763.     .biography, .image-container, .stats-section {
  764.         width: 100%;
  765.         height: auto;
  766.         min-height: 100%;
  767.     }
  768.    
  769.     .image-container {
  770.         margin: 30px 0;
  771.     }
  772.    
  773.     #banner-right, #banner-left {
  774.         display: none;
  775.     }
  776.    
  777.     .tmblr-iframe--app-cta-button {
  778.         display: none!important;
  779.     }
  780. }
  781.  
  782. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  783.  
  784. #bottom {
  785.     bottom: 15px;
  786.     position: fixed;
  787.     right: 15px;
  788.     border-radius: 5px;
  789.     z-index: 999;
  790. }
  791.  
  792. .cred {
  793.     padding: 5px;
  794.     width: auto;
  795.     height: 15px;
  796.     font-size: 20px;
  797.     line-height: 15px;
  798.     display: inline-block;
  799.     color: var(--accented-text);
  800.     z-index: 999;
  801. }
  802.  
  803. .cred:hover {
  804.     color: var(--bolded);
  805. }
  806.  
  807. .cred-lil {
  808.     display: none;
  809. }
  810.  
  811. </style>
  812.  
  813. </head>
  814.  
  815. <body>
  816.  
  817. <div id="banner-top">
  818.     <h2>Interdimensional</h2>
  819.    
  820.     <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  821.         <a href="/">home</a>
  822.         <a href="/ask">inbox</a>
  823.         <a href="/submit">submit</a>
  824.         <a href="/archive">archive</a>
  825.         <a href="/">Link 1</a>
  826.         <a href="/">Link 2</a>
  827.     </nav> <!-----------TUMBLR LINKS----------->
  828. </div>
  829.  
  830. <div id="banner-right"></div>
  831.  
  832. <div id="banner-bottom">
  833.     <a href="#page1">Home</a> <!-----CHANGE PAGE TITLE HERE----->
  834.     <a href="#page2">Tawna</a> <!-----CHANGE PAGE TITLE HERE----->
  835.     <a href="#page3">Ami</a> <!-----CHANGE PAGE TITLE HERE----->
  836.     <a href="#page4">Isabella</a> <!-----CHANGE PAGE TITLE HERE----->
  837.     <a href="#page5">Megumi</a> <!-----CHANGE PAGE TITLE HERE----->
  838.     <a href="#page6">Liz</a> <!-----CHANGE PAGE TITLE HERE----->
  839. </div>
  840.  
  841. <div id="banner-left"></div>
  842.  
  843. <div id="fullpage">
  844.  
  845.     <div class="section" data-anchor="page1">
  846.         <header id="header-image">
  847.         <!-----CHANGE IMAGE HERE----->
  848.         <img src="https://static.tumblr.com/uh2chis/iLDqictz7/header.png">              <!-----CHANGE IMAGE HERE----->
  849.         </header>
  850.         <section id="header-content">
  851.         <!-----CHANGE TITLE HERE----->
  852.         <h2 class="main-title">Character page 1</h2>
  853.         <!-----CHANGE TITLE HERE----->
  854.             <p>
  855.             <!-----CHANGE HEADER CONTENT HERE----->
  856.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec risus eget nibh convallis rutrum a et ex. Proin a est vulputate, euismod orci vel, aliquam ligula. Proin bibendum vitae dui non hendrerit. Sed id accumsan neque. In faucibus tortor nec felis ultrices rhoncus. Aenean tempus, erat in fermentum molestie, mi justo ullamcorper velit, vitae consectetur lacus dolor pellentesque ante. Mauris et ipsum ac nisl dictum semper. Curabitur at felis id massa lacinia hendrerit nec non nulla.
  857.             <!-----CHANGE HEADER CONTENT HERE----->
  858.             </p>
  859.         </section>
  860.     </div>
  861.  
  862.  
  863.     <div class="section fp-auto-height-responsive" data-anchor="page2">
  864.         <section class="container">
  865.        
  866.             <header class="image-container">
  867.             <div class="square-1"></div>
  868.             <div class="square-2"></div>
  869.             <div class="square-3"></div>
  870.             <div class="square-4"></div>
  871.             <!-----CHANGE IMAGE HERE----->
  872.             <img src="https://static.tumblr.com/uh2chis/Lk5qicpbr/tawnanf.png">
  873.             <!-----CHANGE IMAGE HERE----->
  874.             </header>
  875.            
  876.             <article class="biography">
  877.             <!-----CHANGE BIO TITLE HERE----->
  878.                 <h2>About Tawna</h2>
  879.             <!-----CHANGE BIO TITLE HERE----->
  880.                
  881.             <p>
  882.             <!-----CHANGE BIO HERE----->
  883.                 tiam fringilla lorem eu iaculis facilisis. Nulla consectetur felis vehicula lobortis volutpat. Vestibulum eget mi felis. Donec dignissim tristique est sit amet hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget suscipit ligula. Aenean vitae velit turpis. Proin eu lectus non velit pulvinar commodo ac sed ante. Ut purus purus, rutrum sed ipsum quis, bibendum scelerisque mauris. Proin at tellus sed turpis tristique mattis vel iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus sollicitudin turpis vitae commodo. Praesent vulputate justo in ipsum lobortis fringilla. Mauris ultricies magna quam. Proin scelerisque auctor nisl, sit amet elementum ligula varius eu.</p>
  884.  
  885. <p></ptiam>Morbi finibus eu tortor eu condimentum. Duis quis semper orci. Maecenas accumsan pulvinar faucibus. Sed eget ullamcorper lectus, at iaculis lorem. Sed velit justo, mattis a placerat nec, sodales in arcu. Quisque laoreet nunc et diam sollicitudin, eu pharetra ante vestibulum. Integer pretium et ante ac blandit. Duis rhoncus interdum massa volutpat rutrum. Phasellus aliquam vestibulum felis, a consectetur nisl tristique sed. Nulla vulputate diam nec dui finibus tristique. Aliquam id eros arcu. Pellentesque quis enim ac lacus rutrum cursus malesuada eu enim. Donec suscipit, dui ac fermentum porttitor, arcu urna vulputate metus, nec finibus sapien ipsum a ligula. Proin sed sagittis odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  886.             <!-----CHANGE BIO HERE----->
  887. </p>
  888.  
  889.             </article>
  890.            
  891.             <aside class="stats-section">
  892.            
  893.                 <div class="stats">
  894.                 <!-----CHANGE STATS HERE----->
  895.                     <h2>Quick info</h2>
  896.                     <p><b>Name:</b> name here</p>
  897.                     <p><b>Pronouns:</b> pronouns here</p>
  898.                     <p><b>Age:</b> age here</p>
  899.                     <p><b>Location:</b> location here</p>
  900.                 <!-----CHANGE STATS HERE----->
  901.                 </div>
  902.                
  903.                 <div class="stats">
  904.                     <h2>Stats</h2> <!-----CHANGE STATS TITLE HERE----->
  905.                    
  906.                     <div class="progress-bar">
  907.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  908.                         <div class="bar"></div>
  909.                         <div class="bar-info">
  910.                         <span>Skill here</span>
  911.                             <div class="progress-line skill-1"><span></span></div>
  912.                         </div>
  913.                     </div>
  914.                    
  915.                     <div class="progress-bar">
  916.                         <div class="bar"></div>
  917.                         <div class="bar-info">
  918.                         <span>Skill here</span>
  919.                             <div class="progress-line skill-2"><span></span></div>
  920.                         </div>
  921.                     </div>
  922.                    
  923.                     <div class="progress-bar">
  924.                         <div class="bar"></div>
  925.                         <div class="bar-info">
  926.                          <span>Skill here</span>
  927.                             <div class="progress-line skill-3"><span></span></div>
  928.                         </div>
  929.                     </div>
  930.                    
  931.                     <div class="progress-bar">
  932.                         <div class="bar"></div>
  933.                         <div class="bar-info">
  934.                         <span>Skill here</span>
  935.                             <div class="progress-line skill-4"><span></span></div>
  936.                         </div>
  937.                     </div>
  938.                    <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->  
  939.                 </div>
  940.                
  941.                 <div class="stats">
  942.                     <h2>Quote</h2> <!-----CHANGE QUOTE TITLE HERE----->
  943.                     <p>
  944.                     <i class="las la-quote-left"></i>
  945.                     <i> <!-----------EDIT QUOTE HERE----------->
  946.                   Vestibulum libero odio, interdum in tristique non, eleifend sit amet ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  947.                     </i> <!-----------EDIT QUOTE HERE----------->
  948.                     </p>
  949.                 </div>
  950.             </aside>
  951.         </section>
  952.     </div>
  953.    
  954.     <div class="section fp-auto-height-responsive" data-anchor="page3">
  955.         <section class="container">
  956.             <article class="biography">
  957.                 <!-----CHANGE BIO TITLE HERE----->
  958.                 <h2>About Ami</h2>
  959.                 <!-----CHANGE BIO TITLE HERE----->
  960.                
  961.                 <p>
  962.                 <!-----CHANGE BIO HERE----->
  963.                 tiam fringilla lorem eu iaculis facilisis. Nulla consectetur felis vehicula lobortis volutpat. Vestibulum eget mi felis. Donec dignissim tristique est sit amet hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget suscipit ligula. Aenean vitae velit turpis. Proin eu lectus non velit pulvinar commodo ac sed ante. Ut purus purus, rutrum sed ipsum quis, bibendum scelerisque mauris. Proin at tellus sed turpis tristique mattis vel iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus sollicitudin turpis vitae commodo. Praesent vulputate justo in ipsum lobortis fringilla. Mauris ultricies magna quam. Proin scelerisque auctor nisl, sit amet elementum ligula varius eu.</p>
  964.  
  965. <p></ptiam>Morbi finibus eu tortor eu condimentum. Duis quis semper orci. Maecenas accumsan pulvinar faucibus. Sed eget ullamcorper lectus, at iaculis lorem. Sed velit justo, mattis a placerat nec, sodales in arcu. Quisque laoreet nunc et diam sollicitudin, eu pharetra ante vestibulum. Integer pretium et ante ac blandit. Duis rhoncus interdum massa volutpat rutrum. Phasellus aliquam vestibulum felis, a consectetur nisl tristique sed. Nulla vulputate diam nec dui finibus tristique. Aliquam id eros arcu. Pellentesque quis enim ac lacus rutrum cursus malesuada eu enim. Donec suscipit, dui ac fermentum porttitor, arcu urna vulputate metus, nec finibus sapien ipsum a ligula. Proin sed sagittis odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  966.                 <!-----CHANGE BIO HERE----->
  967.                 </p>
  968.  
  969.             </article>
  970.            
  971.             <aside class="stats-section">
  972.            
  973.                 <div class="stats">
  974.                 <!-----CHANGE STATS HERE----->
  975.                     <h2>Quick info</h2>
  976.                     <p><b>Name:</b> name here</p>
  977.                     <p><b>Pronouns:</b> pronouns here</p>
  978.                     <p><b>Age:</b> age here</p>
  979.                     <p><b>Location:</b> location here</p>
  980.                 <!-----CHANGE STATS HERE----->
  981.                 </div>
  982.                
  983.                 <div class="stats">
  984.                     <h2>Stats</h2>  <!-----CHANGE STATS TITLE HERE----->
  985.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  986.                     <div class="progress-bar-2">
  987.                         <div class="bar-2"></div>
  988.                         <div class="bar-info-2">
  989.                             <span>Skill here</span>
  990.                             <div class="progress-line-2 skill-5"><span></span></div>
  991.                         </div>
  992.                     </div>
  993.                    
  994.                     <div class="progress-bar-2">
  995.                         <div class="bar-2"></div>
  996.                         <div class="bar-info-2">
  997.                             <span>Skill here</span>
  998.                             <div class="progress-line-2 skill-6"><span></span></div>
  999.                         </div>
  1000.                     </div>
  1001.                    
  1002.                     <div class="progress-bar-2">
  1003.                         <div class="bar-2"></div>
  1004.                         <div class="bar-info-2">
  1005.                             <span>Skill here</span>
  1006.                             <div class="progress-line-2 skill-7"><span></span></div>
  1007.                         </div>
  1008.                     </div>
  1009.                    
  1010.                     <div class="progress-bar-2">
  1011.                         <div class="bar-2"></div>
  1012.                         <div class="bar-info-2">
  1013.                             <span>Skill here</span>
  1014.                             <div class="progress-line-2 skill-8"><span></span></div>
  1015.                         </div>
  1016.                     </div>
  1017.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->    
  1018.                 </div>
  1019.                
  1020.                 <div class="stats">
  1021.                     <h2>Quote</h2> <!-----CHANGE QUOTE TITLE HERE----->
  1022.                     <p>
  1023.                     <i class="las la-quote-left"></i>
  1024.                     <i> <!-----------EDIT QUOTE HERE----------->
  1025.                   Vestibulum libero odio, interdum in tristique non, eleifend sit amet ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  1026.                     </i> <!-----------EDIT QUOTE HERE----------->
  1027.                     </p>
  1028.                 </div>
  1029.             </aside>
  1030.            
  1031.             <header class="image-container">
  1032.             <div class="square-1"></div>
  1033.             <div class="square-2"></div>
  1034.             <div class="square-3"></div>
  1035.             <div class="square-4"></div>
  1036.             <!-----CHANGE IMAGE HERE----->
  1037.             <img src="https://static.tumblr.com/uh2chis/aGvqicpv4/aminf.png">
  1038.             <!-----CHANGE IMAGE HERE----->
  1039.             </header>
  1040.  
  1041.         </section>
  1042.     </div>
  1043.    
  1044.     <div class="section fp-auto-height-responsive" data-anchor="page4">
  1045.         <section class="container">
  1046.        
  1047.             <aside class="stats-section">
  1048.                  <div class="stats">
  1049.                     <h2>Quick info</h2>  <!-----CHANGE STATS TITLE HERE----->
  1050.                     <!-----CHANGE STATS HERE----->
  1051.                     <p><b>Name:</b> name here</p>
  1052.                     <p><b>Pronouns:</b> pronouns here</p>
  1053.                     <p><b>Age:</b> age here</p>
  1054.                     <p><b>Location:</b> location here</p>
  1055.                     <!-----CHANGE STATS HERE----->
  1056.                 </div>
  1057.                 <div class="stats">
  1058.                     <h2>Stats</h2> <!-----CHANGE STATS TITLE HERE----->
  1059.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  1060.                     <div class="progress-bar-3">
  1061.                         <div class="bar-3"></div>
  1062.                         <div class="bar-info-3">
  1063.                             <span>Skill here</span>
  1064.                             <div class="progress-line-3 skill-9"><span></span></div>
  1065.                         </div>
  1066.                     </div>
  1067.                    
  1068.                     <div class="progress-bar-3">
  1069.                         <div class="bar-3"></div>
  1070.                         <div class="bar-info-3">
  1071.                             <span>Skill here</span>
  1072.                             <div class="progress-line-3 skill-10"><span></span></div>
  1073.                         </div>
  1074.                     </div>
  1075.                    
  1076.                     <div class="progress-bar-3">
  1077.                         <div class="bar-3"></div>
  1078.                         <div class="bar-info-3">
  1079.                             <span>Skill here</span>
  1080.                             <div class="progress-line-3 skill-11"><span></span></div>
  1081.                         </div>
  1082.                     </div>
  1083.                    
  1084.                     <div class="progress-bar-3">
  1085.                         <div class="bar-3"></div>
  1086.                         <div class="bar-info-3">
  1087.                             <span>Skill here</span>
  1088.                             <div class="progress-line-3 skill-12"><span></span></div>
  1089.                         </div>
  1090.                     </div>
  1091.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  1092.                 </div>
  1093.                 <div class="stats">
  1094.                     <h2>Quote</h2>
  1095.                     <p>
  1096.                     <i class="las la-quote-left"></i>
  1097.                     <i> <!-----------EDIT QUOTE HERE----------->
  1098.                   Vestibulum libero odio, interdum in tristique non, eleifend sit amet ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  1099.                     </i> <!-----------EDIT QUOTE HERE----------->
  1100.                     </p>
  1101.                 </div>
  1102.             </aside>
  1103.            
  1104.             <header class="image-container">
  1105.             <div class="square-1"></div>
  1106.             <div class="square-2"></div>
  1107.             <div class="square-3"></div>
  1108.             <div class="square-4"></div>
  1109.             <!-----CHANGE IMAGE HERE----->
  1110.             <img src="https://static.tumblr.com/uh2chis/EZkqicpym/isabella_bandicoot_2019.png">
  1111.             <!-----CHANGE IMAGE HERE----->
  1112.             </header>
  1113.            
  1114.             <article class="biography">
  1115.                 <h2> About Isabella</h2> <!-----CHANGE BIO TITLE HERE----->
  1116.                
  1117.                 <p>
  1118.                 <!-----CHANGE BIO HERE----->
  1119.                 tiam fringilla lorem eu iaculis facilisis. Nulla consectetur felis vehicula lobortis volutpat. Vestibulum eget mi felis. Donec dignissim tristique est sit amet hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget suscipit ligula. Aenean vitae velit turpis. Proin eu lectus non velit pulvinar commodo ac sed ante. Ut purus purus, rutrum sed ipsum quis, bibendum scelerisque mauris. Proin at tellus sed turpis tristique mattis vel iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus sollicitudin turpis vitae commodo. Praesent vulputate justo in ipsum lobortis fringilla. Mauris ultricies magna quam. Proin scelerisque auctor nisl, sit amet elementum ligula varius eu.</p>
  1120.  
  1121. <p></ptiam>Morbi finibus eu tortor eu condimentum. Duis quis semper orci. Maecenas accumsan pulvinar faucibus. Sed eget ullamcorper lectus, at iaculis lorem. Sed velit justo, mattis a placerat nec, sodales in arcu. Quisque laoreet nunc et diam sollicitudin, eu pharetra ante vestibulum. Integer pretium et ante ac blandit. Duis rhoncus interdum massa volutpat rutrum. Phasellus aliquam vestibulum felis, a consectetur nisl tristique sed. Nulla vulputate diam nec dui finibus tristique. Aliquam id eros arcu. Pellentesque quis enim ac lacus rutrum cursus malesuada eu enim. Donec suscipit, dui ac fermentum porttitor, arcu urna vulputate metus, nec finibus sapien ipsum a ligula. Proin sed sagittis odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1122.                 <!-----CHANGE BIO HERE----->
  1123.                 </p>
  1124.  
  1125.             </article>
  1126.            
  1127.         </section>
  1128.     </div>
  1129.    
  1130.     <div class="section fp-auto-height-responsive" data-anchor="page5">
  1131.         <section class="container">
  1132.             <header class="image-container">
  1133.             <div class="square-1"></div>
  1134.             <div class="square-2"></div>
  1135.             <div class="square-3"></div>
  1136.             <div class="square-4"></div>
  1137.             <!-----CHANGE IMAGE HERE----->
  1138.             <img src="https://static.tumblr.com/uh2chis/1MKqicq2i/meguminf.png">
  1139.             <!-----CHANGE IMAGE HERE----->
  1140.             </header>
  1141.             <article class="biography">
  1142.                 <h2> About Megumi</h2> <!-----CHANGE BIO TITLE HERE----->
  1143.                
  1144.                 <p>
  1145.                 <!-----CHANGE BIO HERE----->
  1146.                 tiam fringilla lorem eu iaculis facilisis. Nulla consectetur felis vehicula lobortis volutpat. Vestibulum eget mi felis. Donec dignissim tristique est sit amet hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget suscipit ligula. Aenean vitae velit turpis. Proin eu lectus non velit pulvinar commodo ac sed ante. Ut purus purus, rutrum sed ipsum quis, bibendum scelerisque mauris. Proin at tellus sed turpis tristique mattis vel iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus sollicitudin turpis vitae commodo. Praesent vulputate justo in ipsum lobortis fringilla. Mauris ultricies magna quam. Proin scelerisque auctor nisl, sit amet elementum ligula varius eu.</p>
  1147.  
  1148. <p></ptiam>Morbi finibus eu tortor eu condimentum. Duis quis semper orci. Maecenas accumsan pulvinar faucibus. Sed eget ullamcorper lectus, at iaculis lorem. Sed velit justo, mattis a placerat nec, sodales in arcu. Quisque laoreet nunc et diam sollicitudin, eu pharetra ante vestibulum. Integer pretium et ante ac blandit. Duis rhoncus interdum massa volutpat rutrum. Phasellus aliquam vestibulum felis, a consectetur nisl tristique sed. Nulla vulputate diam nec dui finibus tristique. Aliquam id eros arcu. Pellentesque quis enim ac lacus rutrum cursus malesuada eu enim. Donec suscipit, dui ac fermentum porttitor, arcu urna vulputate metus, nec finibus sapien ipsum a ligula. Proin sed sagittis odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1149.                 <!-----CHANGE BIO HERE----->
  1150.                 </p>
  1151.  
  1152.             </article>
  1153.            
  1154.             <aside class="stats-section">
  1155.                 <div class="stats">
  1156.                     <h2>Quick info</h2> <!-----CHANGE STATS TITLE HERE----->
  1157.                     <!-----CHANGE STATS HERE----->
  1158.                     <p><b>Name:</b> name here</p>
  1159.                     <p><b>Pronouns:</b> pronouns here</p>
  1160.                     <p><b>Age:</b> age here</p>
  1161.                     <p><b>Location:</b> location here</p>
  1162.                     <!-----CHANGE STATS HERE----->
  1163.                 </div>
  1164.                
  1165.                 <div class="stats">
  1166.                     <h2>Stats</h2> <!-----CHANGE STATS TITLE HERE----->
  1167.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  1168.                     <div class="progress-bar-4">
  1169.                         <div class="bar-4"></div>
  1170.                         <div class="bar-info-4">
  1171.                             <span>Skill here</span>
  1172.                             <div class="progress-line-4 skill-13"><span></span></div>
  1173.                     </div>
  1174.                     </div>
  1175.                    
  1176.                     <div class="progress-bar-4">
  1177.                         <div class="bar-4"></div>
  1178.                         <div class="bar-info-4">
  1179.                             <span>Skill here</span>
  1180.                             <div class="progress-line-4 skill-14"><span></span></div>
  1181.                         </div>
  1182.                     </div>
  1183.                    
  1184.                     <div class="progress-bar-4">
  1185.                         <div class="bar-4"></div>
  1186.                         <div class="bar-info-4">
  1187.                             <span>Skill here</span>
  1188.                             <div class="progress-line-4 skill-15"><span></span></div>
  1189.                         </div>
  1190.                     </div>
  1191.                    
  1192.                     <div class="progress-bar-4">
  1193.                         <div class="bar-4"></div>
  1194.                         <div class="bar-info-4">
  1195.                             <span>Skill here</span>
  1196.                             <div class="progress-line-4 skill-16"><span></span></div>
  1197.                         </div>
  1198.                     </div>
  1199.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  1200.                 </div>
  1201.                
  1202.                 <div class="stats">
  1203.                     <h2>Quote</h2>
  1204.                     <p>
  1205.                     <i class="las la-quote-left"></i>
  1206.                     <i> <!-----------EDIT QUOTE HERE----------->
  1207.                   Vestibulum libero odio, interdum in tristique non, eleifend sit amet ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  1208.                     </i> <!-----------EDIT QUOTE HERE----------->
  1209.                     </p>
  1210.                 </div>
  1211.                
  1212.             </aside>
  1213.         </section>
  1214.     </div>
  1215.    
  1216.     <div class="section fp-auto-height-responsive" data-anchor="page6">
  1217.         <section class="container">
  1218.            
  1219.             <article class="biography">
  1220.                 <h2> About Liz</h2> <!-----CHANGE BIO TITLE HERE----->
  1221.                 <p>
  1222.                 <!-----CHANGE BIO HERE----->
  1223.                 tiam fringilla lorem eu iaculis facilisis. Nulla consectetur felis vehicula lobortis volutpat. Vestibulum eget mi felis. Donec dignissim tristique est sit amet hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget suscipit ligula. Aenean vitae velit turpis. Proin eu lectus non velit pulvinar commodo ac sed ante. Ut purus purus, rutrum sed ipsum quis, bibendum scelerisque mauris. Proin at tellus sed turpis tristique mattis vel iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus sollicitudin turpis vitae commodo. Praesent vulputate justo in ipsum lobortis fringilla. Mauris ultricies magna quam. Proin scelerisque auctor nisl, sit amet elementum ligula varius eu.</p>
  1224.  
  1225. <p></ptiam>Morbi finibus eu tortor eu condimentum. Duis quis semper orci. Maecenas accumsan pulvinar faucibus. Sed eget ullamcorper lectus, at iaculis lorem. Sed velit justo, mattis a placerat nec, sodales in arcu. Quisque laoreet nunc et diam sollicitudin, eu pharetra ante vestibulum. Integer pretium et ante ac blandit. Duis rhoncus interdum massa volutpat rutrum. Phasellus aliquam vestibulum felis, a consectetur nisl tristique sed. Nulla vulputate diam nec dui finibus tristique. Aliquam id eros arcu. Pellentesque quis enim ac lacus rutrum cursus malesuada eu enim. Donec suscipit, dui ac fermentum porttitor, arcu urna vulputate metus, nec finibus sapien ipsum a ligula. Proin sed sagittis odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1226.                 <!-----CHANGE BIO HERE----->
  1227.                 </p>
  1228.  
  1229.             </article>
  1230.            
  1231.         <aside class="stats-section">
  1232.        
  1233.                 <div class="stats">
  1234.                     <h2>Quick info</h2> <!-----CHANGE STATS TITLE HERE----->
  1235.                     <!-----CHANGE STATS HERE----->
  1236.                     <p><b>Name:</b> name here</p>
  1237.                     <p><b>Pronouns:</b> pronouns here</p>
  1238.                     <p><b>Age:</b> age here</p>
  1239.                     <p><b>Location:</b> location here</p>
  1240.                     <!-----CHANGE STATS HERE----->
  1241.                 </div>
  1242.                 <div class="stats">
  1243.                     <h2>Stats</h2> <!-----CHANGE STATS TITLE HERE----->
  1244.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  1245.                     <div class="progress-bar-5">
  1246.                         <div class="bar-5"></div>
  1247.                         <div class="bar-info-5">
  1248.                             <span>Skill here</span>
  1249.                             <div class="progress-line-5 skill-17"><span></span></div>
  1250.                         </div>
  1251.                     </div>
  1252.                    
  1253.                     <div class="progress-bar-5">
  1254.                         <div class="bar-5"></div>
  1255.                         <div class="bar-info-5">
  1256.                             <span>Skill here</span>
  1257.                             <div class="progress-line-5 skill-18"><span></span></div>
  1258.                         </div>
  1259.                     </div>
  1260.                    
  1261.                     <div class="progress-bar-5">
  1262.                         <div class="bar-5"></div>
  1263.                         <div class="bar-info-5">
  1264.                             <span>Skill here</span>
  1265.                             <div class="progress-line-5 skill-19"><span></span></div>
  1266.                         </div>
  1267.                     </div>
  1268.                    
  1269.                     <div class="progress-bar-5">
  1270.                         <div class="bar-5"></div>
  1271.                         <div class="bar-info-5">
  1272.                             <span>Skill here</span>
  1273.                             <div class="progress-line-5 skill-20"><span></span></div>
  1274.                         </div>
  1275.                     </div>
  1276.                     <!-----PROGRESS BAR UPDATED ABOVE IN CSS CODE----->
  1277.                 </div>
  1278.                
  1279.                 <div class="stats">
  1280.                     <h2>Quote</h2>
  1281.                     <p><i class="las la-quote-left"></i>
  1282.                    
  1283.                     <i> <!-----------EDIT QUOTE HERE----------->
  1284.                   Vestibulum libero odio, interdum in tristique non, eleifend sit amet ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  1285.                     </i> <!-----------EDIT QUOTE HERE----------->
  1286.                    
  1287.                     </p>
  1288.                 </div>
  1289.            
  1290.         </aside>
  1291.            
  1292.         <header class="image-container">
  1293.             <div class="square-1"></div>
  1294.             <div class="square-2"></div>
  1295.             <div class="square-3"></div>
  1296.             <div class="square-4"></div>
  1297.             <!-----CHANGE IMAGE HERE----->
  1298.             <img src="https://static.tumblr.com/uh2chis/mtHqicq5a/liz_bandicoot_2019.png">
  1299.             <!-----CHANGE IMAGE HERE----->
  1300.         </header>
  1301.            
  1302.         </section>
  1303.     </div>
  1304.    
  1305. </div>
  1306.  
  1307.  
  1308. <footer id="bottom">
  1309. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1310.  <a href="https://sheathemes.tumblr.com" class="cred" title="theme by sheathemes">&#169;</a>  
  1311. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1312. </footer>
  1313.  
  1314. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1315. <script src="https://static.tumblr.com/uh2chis/dk1qhlq4o/fullpage.js"></script>
  1316.  
  1317. <!-----------Tooltips Script----------->
  1318. <script src="https://unpkg.com/popper.js@1"></script> <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1319. <!-----------Tooltips Script----------->
  1320.  
  1321. <script>
  1322.     $(document).ready(function() {
  1323.         $('#fullpage').fullpage({
  1324.             loopBottom: true,
  1325.             autoScrolling: true,
  1326.             scrollHorizontally: true,
  1327.             responsiveWidth: 1100,
  1328.         });
  1329.     });
  1330.         tippy('a[title]', {
  1331.             theme: 'custom',
  1332.             arrow: tippy.roundArrow,
  1333.             zIndex: 9999999999,
  1334.             placement: 'auto',
  1335.             maxWidth: 300,
  1336.             content(reference) {
  1337.                 const title = reference.getAttribute('title');
  1338.                 reference.removeAttribute('title'); return title; },
  1339.            
  1340.         });
  1341. </script>
  1342.  
  1343. </body>
  1344. </html> <!---------------------------END--------------------------->
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!