API tools faq
paste
alydae

about ii

alydae
Aug 21st, 2016 (edited)
5,609
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ABOUT II
  7. by alydae
  8.  
  9. released: august 21, 2016
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. thank you for using!!!
  17.  
  18. -->
  19.  
  20. <title>about me</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <!-- scripts - DO NOT TOUCH -->
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. }
  36. );
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <!-- custom font -->
  42.  
  43. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  44.  
  45. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  46.  
  47.  
  48. <style type="text/css">
  49.  
  50. @keyframes fadein {
  51. from { opacity:0; }
  52. to { opacity:1; }
  53. }
  54.  
  55. @-moz-keyframes fadein {
  56. from { opacity:0; }
  57. to { opacity:1; }
  58. }
  59.  
  60. @-webkit-keyframes fadein {
  61. from { opacity:0; }
  62. to { opacity:1; }
  63. }
  64.  
  65. @-ms-keyframes fadein {
  66. from { opacity:0; }
  67. to { opacity:1; }
  68. }
  69.  
  70. @-o-keyframes fadein {
  71. from { opacity:0; }
  72. to { opacity:1; }
  73. }
  74.  
  75. /*-- selection --*/
  76.  
  77. ::-moz-selection { background:var(--accent); color:var(--title); }
  78. ::selection { background:var(--accent); color:var(--title); }
  79.  
  80. /*-- scrollbar --*/
  81.  
  82. ::-webkit-scrollbar {
  83. width:1px;
  84. height:2px;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  88.  
  89. /*-- tooltips --*/
  90.  
  91. #s-m-t-tooltip {
  92. color:var(--text);
  93. background-color:var(--accent);
  94. font-size:calc(var(--font-size) - 2px);
  95. font-family:'Open Sans', helvetica, sans-serif;
  96. letter-spacing:1px;
  97. text-transform:uppercase;
  98. text-align:center;
  99. position:absolute;
  100. padding:0px 5px 0px 5px;
  101. margin-top:30px;
  102. z-index:9999;
  103. border:1px solid var(--borders);
  104. }
  105.  
  106. /*-- tumblr controls --*/
  107.  
  108. .tmblr-iframe, .iframe-controls–desktop {
  109. display:none!important;
  110. }
  111.  
  112. /*-- change all variables here --*/
  113.  
  114. :root {
  115. --background:#fff;
  116. --accent:#fafafa;
  117. --text:#666;
  118. --links:#444;
  119. --links-hover:#bad1e7;
  120. --title:#222;
  121. --borders:#eee;
  122. --font-size:10px;
  123. }
  124.  
  125. /*-- general customisation --*/
  126.  
  127. body {
  128. color:var(--text);
  129. background-color:var(--background);
  130. font-style:normal;
  131. font-family:'Open Sans', helvetica, sans-serif;
  132. font-size:var(--font-size);
  133. font-weight:400;
  134. text-decoration:none;
  135. line-height:180%;
  136. -moz-osx-font-smoothing: grayscale;
  137. -webkit-font-smoothing: antialiased;
  138. font-smoothing: antialiased;
  139. }
  140.  
  141. a {
  142. text-decoration:none;
  143. color:var(--links);
  144. transition-duration: 0.6s;
  145. -moz-transition-duration: 0.6s;
  146. -webkit-transition-duration: 0.6s;
  147. -o-transition-duration: 0.6s
  148. }
  149.  
  150. a:hover {
  151. color:var(--links-hover);
  152. cursor:pointer;
  153. }
  154.  
  155. b, strong { font-weight:700; color:var(--title); }
  156.  
  157. i, em { font-style:italic; }
  158.  
  159. blockquote {
  160. padding-left:10px;
  161. margin:0;
  162. border-left:1px solid var(--borders);
  163. }
  164.  
  165. /*-- containers --*/
  166.  
  167. #container {
  168. position:fixed;
  169. width:775px;
  170. height:450px; /* for no bottom links, change this to 400px */
  171. top:50%;
  172. left:50%;
  173. background-color:var(--background);
  174. transform:translate(-50%, -50%);
  175. -webkit-animation: fadein 1.5s;
  176. -moz-animation: fadein 1.5s;
  177. -o-animation: fadein 1.5s;
  178. animation: fadein 1.5s;
  179. }
  180.  
  181. #s1 {
  182. position:relative;
  183. width:100%;
  184. height:400px;
  185. }
  186.  
  187. #s2 {
  188. position:relative;
  189. width:100%;
  190. height:50px;
  191. border-top:1px solid var(--borders);
  192. }
  193.  
  194. /*-- body --*/
  195.  
  196. #title {
  197. position:fixed;
  198. top:40%;
  199. padding:10px;
  200. text-transform:uppercase;
  201. font-size:calc(var(--font-size) + 15px);
  202. font-weight:700;
  203. letter-spacing:1px;
  204. color:var(--title);
  205. transform:rotate(-90deg);
  206. }
  207.  
  208. nav {
  209. position:fixed;
  210. margin-left:110px;
  211. width:35px;
  212. top:50%;
  213. transform:translateY(-70%);
  214. }
  215.  
  216. nav svg {
  217. width:15px;
  218. height:15px;
  219. padding:10px;
  220. fill:var(--links);
  221. transition-duration: 0.6s;
  222. -moz-transition-duration: 0.6s;
  223. -webkit-transition-duration: 0.6s;
  224. -o-transition-duration: 0.6s
  225. }
  226.  
  227. nav svg:hover { fill:var(--links-hover); }
  228.  
  229. .text {
  230. position:fixed;
  231. padding-right:20px;
  232. margin-top:30px;
  233. margin-bottom:30px;
  234. left:50%;
  235. transform:translateX(-50%);
  236. width:300px;
  237. max-height:340px;
  238. overflow:auto;
  239. text-align:justify;
  240. }
  241.  
  242. .icon {
  243. position:fixed;
  244. margin-left:625px;
  245. margin-top:75px;
  246. height:100px;
  247. width:100px;
  248. }
  249.  
  250. .icon img {
  251. height:100px;
  252. width:100px;
  253. border-radius:5px;
  254. }
  255.  
  256. .stitle {
  257. position:fixed;
  258. width:100px;
  259. padding-bottom:5px;
  260. margin-left:625px;
  261. margin-top:225px;
  262. font-size:calc(var(--font-size) + 2px);
  263. font-weight:700;
  264. text-transform:uppercase;
  265. text-align:center;
  266. letter-spacing:.5px;
  267. color:var(--title);
  268. border-bottom:1px solid var(--borders);
  269. }
  270.  
  271. .social {
  272. position:fixed;
  273. margin-left:615px;
  274. margin-top:257px;
  275. width:120px;
  276. max-height:70px;
  277. overflow:auto;
  278. text-align:center!important;
  279. }
  280.  
  281. .social i { font-size:calc(var(--font-size) + 8px); padding:5px; }
  282.  
  283. /*-- links --*/
  284.  
  285. .links {
  286. text-align:center!important;
  287. padding:20px;
  288. }
  289.  
  290. .links i {
  291. font-size:calc(var(--font-size) + 5px);
  292. margin-left:10px;
  293. margin-right:10px;
  294. }
  295.  
  296. /*-- credit - DO NOT TOUCH --*/
  297.  
  298. .credit a {
  299. font-size:10px;
  300. bottom:15px;
  301. right:20px;
  302. position:fixed;
  303. text-transform:uppercase;
  304. }
  305.  
  306. </style>
  307. </head>
  308.  
  309.  
  310. <body>
  311.  
  312.  
  313. <div id="container">
  314.  
  315.  
  316. <div id="s1">
  317.  
  318. <div id="title">about me</div>
  319. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  320. <div class="icon"><img src="{PortraitURL-128}"/></div>
  321.  
  322. <nav>
  323. <!-- home link - change "home" if you want it to show something else. -->
  324. <a href="/" title="home">
  325. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 486.988 486.988" style="enable-background:new 0 0 486.988 486.988;" xml:space="preserve"><path d="M16.822,284.968h39.667v158.667c0,9.35,7.65,17,17,17h116.167c9.35,0,17-7.65,17-17V327.468h70.833v116.167 c0,9.35,7.65,17,17,17h110.5c9.35,0,17-7.65,17-17V284.968h48.167c6.8,0,13.033-4.25,15.583-10.483 c2.55-6.233,1.133-13.6-3.683-18.417L260.489,31.385c-6.517-6.517-17.283-6.8-23.8-0.283L5.206,255.785 c-5.1,4.817-6.517,12.183-3.967,18.7C3.789,281.001,10.022,284.968,16.822,284.968z M248.022,67.368l181.333,183.6h-24.367 c-9.35,0-17,7.65-17,17v158.667h-76.5V310.468c0-9.35-7.65-17-17-17H189.656c-9.35,0-17,7.65-17,17v116.167H90.489V267.968 c0-9.35-7.65-17-17-17H58.756L248.022,67.368z"/></svg></a>
  326. <!-- ask link - change "inbox" if you want it to show something else. -->
  327. <a href="/ask" title="inbox">
  328. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 436.333 436.333" style="enable-background:new 0 0 436.333 436.333;" xml:space="preserve"><path d="M436.333,56.667c0-9.35-7.65-17-17-17H17c-9.35,0-17,7.65-17,17v323c0,9.35,7.65,17,17,17h402.333c9.35,0,17-7.65,17-17 V56.667z M34,362.667v-201.45l170.85,147.05c3.117,2.833,6.8,3.967,10.767,3.967c3.967,0,8.217-1.417,11.617-3.967l175.1-146.483 v200.883H34z M402.333,73.667v43.917c-2.833,0.283-1.417,0.567-1.7,0.567L215.9,273.133L34.567,117.3 c-0.283-0.283-0.567-0.567-0.567-0.85V73.667H402.333z"/></svg></a>
  329. <!-- DO NOT TOUCH THIS LINK -->
  330. <a href="https://enchantedthemes.tumblr.com" title="credit">
  331. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 419.617 419.617" style="enable-background:new 0 0 419.617 419.617;" xml:space="preserve"><path d="M48.592,402.617c0,9.35,7.65,17,17,17h288.433c9.35,0,17-7.65,17-17c0-94.067-42.5-174.817-102.283-207.117 c28.9-18.983,47.883-51.85,47.883-88.967C316.625,47.883,268.742,0,210.092,0S103.275,47.6,103.275,106.533 c0,37.117,18.983,69.7,47.883,88.967C91.092,227.8,48.592,308.55,48.592,402.617z M209.808,34 c39.95,0,72.533,32.583,72.533,72.533s-32.583,72.533-72.533,72.533s-72.533-32.583-72.533-72.533S169.858,34,209.808,34z M209.808,213.917c66.3,0,120.7,75.65,126.65,171.7h-253.3C89.108,289.567,143.508,213.917,209.808,213.917z"/></svg></a>
  332. </nav>
  333.  
  334. <div class="text">
  335. <!-- this is where you about text goes -->
  336. <p>this is where you put the body of your about. you can use <b>bold</b>, <i>italics</i>, <big>big</big>, <small>small</small>, <s>strikethroughs</s>, <a href="/">links</a> as well as
  337. <blockquote>blockquotes</blockquote></p>
  338.  
  339. <p>there is no limit as it will scroll automatically. remember to close paragraphs! <s>and now for some dummy text</s> </p>
  340.  
  341. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla condimentum vel tellus vitae volutpat. aliquam ut quam ac elit congue luctus. nam a lacus sed odio iaculis luctus a in turpis. aenean erat libero, dapibus at porttitor in, auctor sed urna. aenean a molestie est. sed rhoncus justo sit amet felis sodales maximus. etiam pharetra nibh dolor, nec imperdiet enim hendrerit a. pellentesque et dolor sed ligula bibendum dignissim sit amet quis lectus. praesent ornare sem dolor, ut tristique massa tincidunt eget. morbi viverra id mi sed efficitur. integer id maximus enim, nec placerat nisi. ut consequat augue enim, a eleifend mauris tristique et.</p>
  342. </div>
  343.  
  344. <div class="stitle">social</div> <!-- title of social media links -->
  345. <div class="social">
  346. <!--
  347. between the "" is where you put a link to your account. to change the icon, go to https://fontawesome.com/icons. leave the 'fa-fw' there.
  348. replace the LINK in title="LINK" for what you want it to show on hover.
  349.  
  350. template:
  351. <a href="" title="LINK">
  352. [ICON CODE]
  353. </a>
  354. -->
  355. <a href="" title="LINK">
  356. <i class="fab fa-twitter fa-fw"></i>
  357. </a>
  358. <a href="" title="LINK">
  359. <i class="fab fa-instagram fa-fw"></i>
  360. </a>
  361. <a href="" title="LINK">
  362. <i class="fab fa-snapchat-ghost fa-fw"></i>
  363. </a>
  364. <a href="" title="LINK">
  365. <i class="fab fa-discord fa-fw"></i>
  366. </a>
  367. <a href="" title="LINK">
  368. <i class="fab fa-pinterest fa-fw"></i>
  369. </a>
  370. <a href="" title="LINK">
  371. <i class="fab fa-goodreads fa-fw"></i>
  372. </a>
  373. </div>
  374.  
  375. </div>
  376.  
  377.  
  378. <!-- remove this section if you don't want bottom links -->
  379. <div id="s2">
  380.  
  381. <div class="links">
  382. <!--
  383. this is where you put your links. you can add or delete as many as you need. adding the links and changing the icon is the same as above.
  384. -->
  385. <a href="" title="LINK">
  386. <i class="far fa-circle"></i>
  387. </a>
  388. <a href="" title="LINK">
  389. <i class="far fa-circle"></i>
  390. </a>
  391. <a href="" title="LINK">
  392. <i class="far fa-circle"></i>
  393. </a>
  394. <a href="" title="LINK">
  395. <i class="far fa-circle"></i>
  396. </a>
  397. <a href="" title="LINK">
  398. <i class="far fa-circle"></i>
  399. </a>
  400. <a href="" title="LINK">
  401. <i class="far fa-circle"></i>
  402. </a>
  403. </div>
  404.  
  405. </div>
  406. <!-- end here -->
  407.  
  408. </div>
  409.  
  410.  
  411. <!-- credit - DO NOT TOUCH -->
  412.  
  413. <div class="credit">
  414. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  415. </div>
  416.  
  417.  
  418. </body>
  419. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!