API tools faq
paste
Advertisement
themesbydoori

About - Eradicate

themesbydoori
Apr 11th, 2020
533
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.55 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. page ⎾ERADICATE⏌ 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. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > Icons: https://themify.me/themify-icons
  27.  
  28. > Removing tumblr app button on mobile themes: https://yeolithm.com/post/172903772712/tutorial-removing-tumblr-app-button-on-mobile
  29.  
  30. !-->
  31.  
  32. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  33. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  34.  
  35. <head>
  36.  
  37. <!--Custom Fonts-->
  38. <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  39. <!--Custom Fonts-->
  40.  
  41. <!--Homelinks Icons-->
  42. <link href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css" rel="stylesheet">
  43. <!--Homelinks Icons-->
  44.  
  45.     <title>{Title}</title>
  46.     <link rel="shortcut icon" href="{Favicon}">
  47.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  48.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  49.     <meta name="viewport" content="width=device-width, initial-scale=1">
  50.  
  51.  
  52. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  53. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  54.  
  55. <style type="text/css">
  56.  
  57. /*------
  58.  
  59. CUSTOMIZATION OPTIONS HERE. HERE YOU CAN GE EVERYTHING FROM THE COLORS TO THE OVERALL FONT SIZE TO YOUR LIKING!
  60.  
  61. ------ */
  62.  
  63. :root {
  64.     --accent: #EC9969;
  65.     --accented-text: #ffffff;
  66.     --main-background: #fbfbfb;
  67.     --main-font: 13px;
  68.     --main-font-color: #888888;
  69.     --bolded: #000000;
  70.     --main-links: #B08E72;
  71.     --scrollbar: #EC9969;
  72.     --text-selection-background: #EC9969;
  73.     --text-selection: #fff;
  74.     --tooltip: #fff;
  75.     --tooltip-background: #EC9969;
  76.     --about-background: #ffffff;
  77.     --title-line-width: 25%;
  78. }
  79.  
  80. /*----------FADE-IN ANIMATION----------*/
  81.  
  82. @keyframes fadein {
  83.     from {opacity:0;}
  84.     to {opacity:1;}
  85. }
  86.  
  87. @-moz-keyframes fadein { /* Firefox */
  88.     from {opacity:0;}
  89.     to {opacity:1;}
  90. }
  91.  
  92. @-webkit-keyframes fadein { /* Safari and Chrome */
  93.     from {opacity:0;}
  94.     to {opacity:1;}
  95. }
  96.  
  97. @-o-keyframes fadein { /* Opera */
  98.     from {opacity:0;}
  99.     to {opacity: 1;}
  100. }
  101.  
  102. /*----------TUMBLR CONTROLS----------*/
  103.  
  104. iframe#tumblr_controls, .iframe-controls--desktop {
  105.     right: 10px !important;
  106.     top: 25px !important;
  107.     position: fixed !important;
  108.     z-index: 99999999999999999999 !important;
  109.     -webkit-filter: invert(100%);
  110.     -moz-filter: invert(100%);
  111.     -o-filter: invert(100%);
  112.     -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  113.     -webkit-transition: all 0.8s ease-out;
  114.     -moz-transition: all 0.8s ease-out;
  115.     transition: all 0.8s ease-out;
  116.     display: none;
  117. }
  118.  
  119. /*----------SCROLLBAR----------*/
  120.  
  121. ::-webkit-scrollbar {
  122.     width: 4px;
  123.     height: 4px;
  124. }
  125. ::-webkit-scrollbar-button {
  126.     width: 0px;
  127.     height: 0px;
  128. }
  129. ::-webkit-scrollbar-thumb {
  130.     background-color: var(--scrollbar);
  131.     border-radius: 6px;
  132. }
  133.  
  134. ::-webkit-scrollbar-track {
  135.     background: var(--main-background);
  136.     border-radius: 6px;
  137. }
  138.  
  139. /*----------TOOLTIPS----------*/
  140.  
  141. #s-m-t-tooltip {
  142.     max-width:300px;
  143.     padding:2px 5px;
  144.     margin: -20px 7px -2px 20px;
  145.     background-color: var(--tooltip-background);
  146.     font-size:9px;
  147.     letter-spacing:2px;
  148.     text-transform:lowercase;
  149.     color: var(--tooltip);  
  150.     z-index:999999999999999999999999999999999999;
  151. }
  152.  
  153. /*----------TEXT SELECTION----------*/
  154. ::selection {
  155.     background: var(--text-selection-background); /*change the color of the text selection background*/
  156.     color: var(--text-selection); /*change the color of the text selection*/
  157. }
  158.  
  159. ::-moz-selection {
  160.     background: var(--text-selection-background); /*change the color of the text selection background*/
  161.     color: var(--text-selection); /*change the color of the text selection*/
  162. }
  163.  
  164. ::-webkit-selection {
  165.     background: var(--text-selection-background); /*change the color of the text selection background*/
  166.     color: var(--text-selection); /*change the color of the text selection*/
  167. }
  168.  
  169. /*----------THEME BASICS----------*/
  170.  
  171. body {
  172.     color: var(--main-font-color);
  173.     font-family: 'Roboto', sans-serif;
  174.     font-weight: 400;
  175.     font-size: var(--main-font);
  176.     line-height: 180%;
  177.     margin: 0;
  178.     text-align: justify;
  179.     background: var(--main-background) url("") center; /*change the color of the main background and add a background image between the quotations*/
  180.     background-attachment: fixed;
  181.     background-repeat: repeat;
  182.     -webkit-font-smoothing: antialiased;
  183.     -moz-osx-font-smoothing: grayscale;
  184.     animation: fadein 2.5s;
  185.     -moz-animation: fadein 2.5s; /* Firefox */
  186.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  187.     -o-animation: fadein  2.5s; /* Opera */
  188. }
  189.  
  190. b,strong {
  191.     color:var(--bolded);
  192.     font-weight: 700;
  193. }
  194.  
  195. i,em {
  196.     color:var(--text);
  197. }
  198.  
  199. u {
  200.     color:var(--bolded);
  201. }
  202.  
  203. hr {
  204.     width: 30%;
  205.     height: 1px;
  206.     background-color: var(--about-me-text);
  207.     color: var(--about-me-text);
  208.     border: 0px solid transparent;
  209. }
  210.  
  211. h1,h2,h3 {
  212.     font-weight: 700;
  213.     font-size: 2em;
  214.     color: var(--bolded);
  215. }
  216.  
  217. small,sub,sup {
  218.     font-size: 10px;
  219. }
  220.  
  221. a {
  222.     color: var(--main-links);
  223.     text-decoration:none;
  224.     -moz-transition-duration: 0.5s;
  225.     -o-transition-duration: 0.5s;
  226.     -webkit-transition-duration: 0.5s;
  227.     transition-duration: 0.5s;
  228. }
  229.  
  230. a:hover {
  231.     color: var(--link-hover);
  232.     -moz-transition-duration: 0.5s;
  233.     -o-transition-duration: 0.5s;
  234.     -webkit-transition-duration: 0.5s;
  235.     transition-duration: 0.5s;
  236. }
  237.  
  238. /*----------CORNER BARS---------*/
  239.  
  240. #bar-top {
  241.     position: fixed;
  242.     background-color: var(--about-background);
  243.     top: 0;
  244.     right: 0;
  245.     left: 0;
  246.     padding: 0 15px;
  247.     height: 50px;
  248.     z-index: 99;
  249.     display: flex;
  250.     justify-content: space-between;
  251.     align-items: center;
  252. }
  253.  
  254. #bar-title {
  255.     font-size: 1.3em;
  256.     font-weight: 600;
  257.     color: var(--bolded);
  258. }
  259.  
  260. .homelinks a {
  261.     display: inline-block;
  262.     margin: 0 15px;
  263.     font-size: 1.0em;
  264.     font-weight: 600;
  265.     color: var(--bolded);
  266. }
  267.  
  268. .homelinks a:hover {
  269.    color: var(--accent);
  270. }
  271.  
  272. .info-button {
  273.     display: none;
  274.     width: 50px;
  275.     height: 50px;
  276.     box-sizing: border-box;
  277.     cursor: pointer;
  278.     background-color: var(--accent);
  279.     border: none;
  280.     outline: none;
  281. }
  282.  
  283. .info-button span {
  284.     display: block;
  285.     width: 37px;
  286.     height: 3px;
  287.     background-color: var(--accented-text);
  288.     position: absolute;
  289.     top: 24px;
  290.     transition: .5s;
  291. }
  292.  
  293. .info-button span:before {
  294.     content: '';
  295.     position: absolute;
  296.     top: -10px;
  297.     left: 0;
  298.     width: 100%;
  299.     height: 3px;
  300.     background-color: var(--accented-text);
  301.     transition: .5s;
  302. }
  303.  
  304. .info-button span:after {
  305.     content: '';
  306.     position: absolute;
  307.     top: 10px;
  308.     left: 0;
  309.     width: 100%;
  310.     height: 3px;
  311.     background-color: var(--accented-text);
  312.     transition: .5s;
  313. }
  314.  
  315. .info-button.toggle span {
  316.     background-color: transparent;
  317. }
  318.  
  319. .info-button.toggle span:before {
  320.     top: 0;
  321.     transform: rotate(45deg);
  322. }
  323.  
  324. .info-button.toggle span:after {
  325.     top: 0;
  326.     transform: rotate(-45deg);
  327. }
  328.  
  329. #bar-right {
  330.     position: fixed;
  331.     background-color: var(--about-background);
  332.     width: 50px;
  333.     height: 100%;
  334.     right: 0;
  335.     z-index: 1;
  336. }
  337.  
  338. #bar-bottom {
  339.     position: fixed;
  340.     background-color: var(--about-background);
  341.     bottom: 0;
  342.     width: 100%;
  343.     height: 50px;
  344.     z-index: 99;
  345.     display: flex;
  346.     justify-content: center;
  347.     align-items: center;
  348. }
  349.  
  350. #bar-left {
  351.     position: fixed;
  352.     left: 0;
  353.     background-color: var(--about-background);
  354.     width: 50px;
  355.     height: 100%;
  356.     z-index: 1;
  357. }
  358.  
  359. /*----------ACCENT BAR---------*/
  360.  
  361. #accent-bar {
  362.     width: 100%;
  363.     height: 350px;
  364.     background-color: var(--accent);
  365.     position: fixed;
  366.     left: 50%;
  367.     top: 50%;
  368.     transform: translate(-50%, -50%);
  369. }
  370.  
  371. #container {
  372.     width: 1060px;
  373.     height: 600px;
  374.     position: fixed;
  375.     left: 50%;
  376.     top: 50%;
  377.     transform: translate(-50%, -50%);
  378. }
  379.  
  380. /*----------ABOUT ME CONTAINER & INFO---------*/
  381.  
  382. #about-cont {
  383.    width: 750px;
  384.     height: 540px;
  385.     overflow: hidden;
  386.     background-color: var(--about-background);
  387.     color: var(--main-font-color);
  388.     z-index: 9;
  389.     padding: 30px;
  390.     margin: 0;
  391.     box-sizing: border-box;
  392.     float: right;
  393. }
  394.  
  395. .about-title {
  396.     text-align: center;
  397.     text-transform: uppercase;
  398.     padding: 15px;
  399.     position: relative;
  400.     width: auto;
  401.     color: var(--bolded);
  402.     font-size: 1.5em;
  403. }
  404.  
  405. .about-title:before {
  406.     content: '';
  407.     position: absolute;
  408.     left: 0;
  409.     top: 50%;
  410.     width: var(--title-line-width);
  411.     height: 2px;
  412.     background-color: var(--accent);
  413. }
  414.  
  415. .about-title:after {
  416.     content: '';
  417.     position: absolute;
  418.     right: 0;
  419.     top: 50%;
  420.     width: var(--title-line-width);
  421.     height: 2px;
  422.     background-color: var(--accent);
  423. }
  424.  
  425. .about-me {
  426.     height: 385px;
  427.     padding: 0 20px;
  428.     overflow: auto;
  429. }
  430.  
  431. /*----------SIDEBAR---------*/
  432.  
  433. #sidebar {
  434.     width: 250px;
  435.     position: absolute;
  436.     float: left;
  437. }
  438.  
  439. #sidebar img {
  440.     width: 250px;
  441.     height: 250px;
  442.     border: 15px solid var(--about-background);
  443.     box-sizing: border-box;
  444. }
  445.  
  446. #sidebar-info {
  447.     margin-top: 15px;
  448.     color: var(--accented-text);
  449. }
  450.  
  451. #sidebar-info span {
  452.     display: block;
  453.     margin-bottom: 10px;
  454. }
  455.  
  456. #sidebar-info b {
  457.     background-color: var(--about-background);
  458.     color: var(--accent);
  459.     padding: 5px 10px;
  460.     margin-bottom: 15px;
  461.     margin-right: 5px;
  462. }
  463.  
  464. .sidebar-lil {
  465.     display: none;
  466. }
  467.  
  468. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  469.  
  470. #bottom {
  471.     bottom: 65px;
  472.     position: fixed;
  473.     right: 70px;
  474.     background-color: var(--accent);
  475.     border-radius: 5px;
  476.     z-index: 999;
  477. }
  478.  
  479. .cred {
  480.     padding: 5px;
  481.     width: auto;
  482.     height: 15px;
  483.     font-size: 15px;
  484.     line-height: 15px;
  485.     display: inline-block;
  486.     color: var(--accented-text);
  487.     z-index: 999;
  488. }
  489.  
  490. .cred:hover {
  491.     color: var(--bolded);
  492. }
  493.  
  494. .cred-lil {
  495.     display: none;
  496. }
  497.  
  498. /* ---------------- DO NOT TOUCH!!! ---------------- */
  499.  
  500. @media screen and (max-width: 1200px) {
  501.    
  502.     #bar-left, #bar-right {
  503.         display: none;
  504.     }
  505. }
  506.  
  507. @media screen and (max-width: 1080px) {
  508.    
  509.     #accent-bar, #sidebar {
  510.         display: none;
  511.     }
  512.    
  513.     #container {
  514.         position: relative;
  515.         width: 90%;
  516.         height: auto;
  517.         margin: 90px auto;
  518.         left: 0;
  519.         top: 0;
  520.         transform: translate(0);
  521.     }
  522.    
  523.     #about-cont {
  524.         width: 100%;
  525.         height: auto;
  526.         box-sizing: border-box;
  527.         float: none;
  528.     }
  529.    
  530.     .about-me {
  531.         padding: 0 20px;
  532.         overflow: unset;
  533.         height: auto;
  534.     }
  535.    
  536.     .about-title:before, .about-title:after {
  537.         display: none;
  538.     }
  539.    
  540.     .homelinks {
  541.         display: none;
  542.     }
  543.    
  544.     .info-button {
  545.         display: block;
  546.         width: 50px;
  547.         height: 50px;
  548.         box-sizing: border-box;
  549.         cursor: pointer;
  550.         background-color: var(--accent);
  551.         border: none;
  552.         outline: none;
  553.     }
  554.  
  555.     .info-button span {
  556.         display: block;
  557.         width: 37px;
  558.         height: 3px;
  559.         background-color: var(--accented-text);
  560.         position: absolute;
  561.         top: 24px;
  562.         transition: .5s;
  563.     }
  564.  
  565.     .info-button span:before {
  566.         content: '';
  567.         position: absolute;
  568.         top: -10px;
  569.         left: 0;
  570.         width: 100%;
  571.         height: 3px;
  572.         background-color: var(--accented-text);
  573.         transition: .5s;
  574.     }
  575.  
  576.     .info-button span:after {
  577.         content: '';
  578.         position: absolute;
  579.         top: 10px;
  580.         left: 0;
  581.         width: 100%;
  582.         height: 3px;
  583.         background-color: var(--accented-text);
  584.         transition: .5s;
  585.     }
  586.  
  587.     .info-button.toggle span {
  588.         background-color: transparent;
  589.     }
  590.  
  591.     .info-button.toggle span:before {
  592.         top: 0;
  593.         transform: rotate(45deg);
  594.     }
  595.  
  596.     .info-button.toggle span:after {
  597.         top: 0;
  598.         transform: rotate(-45deg);
  599.     }
  600.    
  601.     #bar-top {
  602.         padding: 0 0 0 15px;
  603.     }
  604.    
  605.     #bottom {
  606.         display: none;
  607.     }
  608.    
  609.     .sidebar-lil {
  610.         display: block;
  611.         width: 100%;
  612.         height: calc(100% - 50px);
  613.         box-sizing: border-box;
  614.         position: fixed;
  615.         left: calc(-100% - 50px);
  616.         bottom: 0;
  617.         background-color: var(--accent);
  618.         padding: 20px;
  619.         z-index: 99;
  620.         transition: .9s;
  621.     }
  622.    
  623.     .active {
  624.        left: 0%;
  625.     }
  626.  
  627.     .sidebar-lil h1 {
  628.         color: var(--accented-text);
  629.         border-bottom: 1px dashed var(--accented-text);
  630.         padding-bottom: 10px;
  631.     }
  632.  
  633.     .sidebar-lil .lil-homelinks a {
  634.         display: block;
  635.         margin: 10px 0;
  636.         color: var(--accented-text);
  637.     }
  638.    
  639.     .sidebar-lil .lil-homelinks a:hover {
  640.         color: var(--bolded);
  641.     }
  642.  
  643.     .ti-link {
  644.         margin-right: 10px;
  645.         color: var(--accent);
  646.         background-color: var(--accented-text);
  647.         padding: 5px;
  648.     }
  649.    
  650.     /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  651.    
  652.     .cred-lil {
  653.         display: block;
  654.         font-size: 1.1em;
  655.         font-weight: 600;
  656.         color: var(--bolded);
  657.     }
  658.  
  659.     .cred-lil a:hover {
  660.         color: var(--accent);
  661.     }
  662.    
  663.     .tmblr-iframe--app-cta-button {
  664.         display: none!important;
  665.     }
  666. }
  667.  
  668. </style>
  669.  
  670. <!-----------Tooltips Script----------->
  671. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  672. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  673. <script src="http://static.tumblr.com/pbhn8p5/uhVos7fkg/tooltips.js"></script>
  674. <!-----------Tooltips Script----------->
  675.  
  676. <script type="text/javascript">
  677.     $(document).ready(function(){
  678.         $('.info-button').click(function(){
  679.             $('.sidebar-lil').toggleClass('active');
  680.             $('.info-button').toggleClass('toggle');
  681.         })
  682.     });
  683. </script>
  684.  
  685. </head>
  686.  
  687. <body>
  688.  
  689. <div id="bar-top">
  690.        <div id="bar-title">Your love is like flowers and candy.</div> <!-----BANNER TITLE HERE----->
  691.        
  692.        <button class="info-button">
  693.             <span></span>
  694.         </button>
  695.        
  696.     <nav class="homelinks"> <!-----------NAVIGATION LINKS----------->
  697.         <a href="/">home</a></li>
  698.         <a href="/ask">mailbox</a></li>
  699.         <a href="/submit">submit</a></li>
  700.         <a href="/archive">archive</a></li>
  701.         <a href="/">link 1</a> <!-----custom link here----->
  702.         <a href="/">link 2</a> <!-----custom link here----->
  703.         <a href="/">link 3</a> <!-----custom link here----->
  704.     </nav>  <!-----------NAVIGATION LINKS----------->
  705.    
  706. </div>
  707.  
  708. <aside class="sidebar-lil">
  709. <h1>Basic Info</h1>
  710.     <section id="sidebar-info">
  711.     <!-----ABOUT ME INFO BELOW----->
  712.    
  713.         <span><b>name</b> name here</span>
  714.         <span><b>pronouns</b> pronouns here</span>
  715.         <span><b>personality type</b> personality type here</span>
  716.         <span><b>age</b> age here</span>
  717.         <span><b>location</b> location here</span>
  718.    
  719.     <!-----ABOUT ME INFO ABOVE----->
  720.     </section>
  721.    
  722.     <h1>Navigation</h1>
  723.      <nav class="lil-homelinks"> <!-----------NAVIGATION LINKS----------->
  724.         <a href="/"><span class="ti-link"></span>home</a></li>
  725.         <a href="/ask"><span class="ti-link"></span>mailbox</a></li>
  726.         <a href="/submit"><span class="ti-link"></span>submit</a></li>
  727.         <a href="/archive"><span class="ti-link"></span>archive</a></li>
  728.         <a href="/"><span class="ti-link"></span>link 1</a> <!-----custom link here----->
  729.         <a href="/"><span class="ti-link"></span>link 2</a> <!-----custom link here----->
  730.         <a href="/"><span class="ti-link"></span>link 3</a> <!-----custom link here----->
  731.     </nav>  <!-----------NAVIGATION LINKS----------->
  732. </aside>
  733.  
  734. <!-----------CORNER BARS----------->
  735. <div id="bar-right"></div>
  736. <div id="bar-bottom">
  737.     <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  738.  <a href="https://sheathemes.tumblr.com" class="cred-lil" title="theme by sheathemes">powered by sheathemes @ tumblr</a>  
  739. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  740. </div>
  741. <div id="bar-left"></div>
  742. <!-----------CORNER BARS----------->
  743.  
  744. <section id="accent-bar"></section> <!-----------ACCENT BAR----------->
  745.  
  746. <section id="container"> <!-----------MAIN CONTAINER----------->
  747. <aside id="sidebar"> <!-----------SIDEBAR----------->
  748.  
  749.     <!-----SIDEBAR IMAGE HERE----->
  750.     <img src="https://static.tumblr.com/uh2chis/1g0q8mwrf/background-4938749_1280.png">
  751.     <!-----SIDEBAR IMAGE HERE----->
  752.    
  753.     <section id="sidebar-info">
  754.     <!-----ABOUT ME INFO BELOW----->
  755.    
  756.         <span><b>name</b> name here</span>
  757.         <span><b>pronouns</b> pronouns here</span>
  758.         <span><b>personality type</b> personality type here</span>
  759.         <span><b>age</b> age here</span>
  760.         <span><b>location</b> location here</span>
  761.    
  762.     <!-----ABOUT ME INFO ABOVE----->
  763.     </section>
  764. </aside> <!-----------SIDEBAR----------->
  765.  
  766. <article id="about-cont"> <!-----------ABOUT CONTAINER----------->
  767.     <h1 class="about-title">about the blogger</h1> <!-----ABOUT TITLE HERE----->
  768.     <section class="about-me">
  769.         <!-----ENTER YOUR ABOUT ME INFO BELOW----->
  770.         <p>
  771.         Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Ac turpis egestas integer eget aliquet nibh praesent. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. At elementum eu facilisis sed. Lacus laoreet non curabitur gravida arcu. Eleifend mi in nulla posuere sollicitudin aliquam. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Consectetur adipiscing elit ut aliquam purus sit amet.
  772.         </p>
  773.        
  774.         <p>
  775.         Posuere morbi leo urna molestie at elementum eu facilisis. Pellentesque sit amet porttitor eget dolor morbi non arcu. Arcu ac tortor dignissim convallis aenean et tortor at risus. Non tellus orci ac auctor augue. Venenatis cras sed felis eget velit aliquet sagittis id. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Eget sit amet tellus cras adipiscing. Ultricies tristique nulla aliquet enim tortor at. Euismod lacinia at quis risus sed vulputate odio. Diam quis enim lobortis scelerisque fermentum dui.
  776.         </p>
  777.        
  778.         <p>
  779.         Quis vel eros donec ac odio tempor orci dapibus. Mauris pharetra et ultrices neque ornare aenean euismod. Id nibh tortor id aliquet lectus proin. Nunc lobortis mattis aliquam faucibus purus in massa. Enim lobortis scelerisque fermentum dui faucibus in ornare.
  780.         </p>
  781.         <!-----ENTER YOUR ABOUT ME INFO ABOVE----->
  782.     </section>
  783. </article> <!-----------ABOUT CONTAINER----------->
  784. </section> <!-----------MAIN CONTAINER----------->
  785.  
  786. <footer id="bottom">
  787. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  788.  <a href="https://sheathemes.tumblr.com" class="cred" title="theme by sheathemes">&#169;</a>  
  789. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  790. </footer>
  791.  
  792. </body>
  793. </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!