API tools faq
paste
alydae

about iii

alydae
May 28th, 2017 (edited)
13,082
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ABOUT III
  7. by alydae
  8.  
  9. released: may 28, 2017
  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.  
  21. <title>about</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <!-- scripts - DO NOT TOUCH -->
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27.  
  28. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  29. <script>
  30. (function($){
  31. $(document).ready(function(){
  32. $("[title]").style_my_tooltips({
  33. tip_follows_cursor:true,
  34. tip_delay_time:200,
  35. tip_fade_speed:300
  36. }
  37. );
  38. });
  39. })(jQuery);
  40. </script>
  41.  
  42. <!-- custom font -->
  43.  
  44. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  45.  
  46. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51. @keyframes fadein {
  52. from { opacity:0; }
  53. to { opacity:1; }
  54. }
  55.  
  56. @-moz-keyframes fadein {
  57. from { opacity:0; }
  58. to { opacity:1; }
  59. }
  60.  
  61. @-webkit-keyframes fadein {
  62. from { opacity:0; }
  63. to { opacity:1; }
  64. }
  65.  
  66. @-ms-keyframes fadein {
  67. from { opacity:0; }
  68. to { opacity:1; }
  69. }
  70.  
  71. @-o-keyframes fadein {
  72. from { opacity:0; }
  73. to { opacity:1; }
  74. }
  75.  
  76. /*-- selection --*/
  77.  
  78. ::-moz-selection { background:var(--accent); color:var(--title); }
  79. ::selection { background:var(--accent); color:var(--title); }
  80.  
  81. /*-- scrollbar --*/
  82.  
  83. ::-webkit-scrollbar {
  84. width:1px;
  85. height:2px;
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  89.  
  90. /*-- tooltips --*/
  91.  
  92. #s-m-t-tooltip {
  93. color:var(--text);
  94. background-color:var(--accent);
  95. font-size:calc(var(--font-size) - 2px);
  96. font-family:'Open Sans', helvetica, sans-serif;
  97. letter-spacing:1px;
  98. text-transform:uppercase;
  99. text-align:center;
  100. position:absolute;
  101. padding:0px 5px 0px 5px;
  102. margin-top:30px;
  103. border:1px solid var(--borders);
  104. z-index:9999;
  105. }
  106.  
  107. /*-- tumblr controls --*/
  108.  
  109. .tmblr-iframe, .iframe-controls–desktop {
  110. display:none!important;
  111. }
  112.  
  113. /*-- transitions --*/
  114.  
  115. a, a:hover, #blogs li, #blogs li:hover, #social i, #social i:hover {
  116. transition-duration: 0.6s;
  117. -moz-transition-duration: 0.6s;
  118. -webkit-transition-duration: 0.6s;
  119. -o-transition-duration: 0.6s;
  120. }
  121.  
  122. /*-- change all variables here --*/
  123.  
  124. :root {
  125. --background:#fff;
  126. --accent:#fafafa;
  127. --text:#666;
  128. --links:#444;
  129. --links-hover:#bad1e7;
  130. --title:#222;
  131. --borders:#eee;
  132. --font-size:10px;
  133. }
  134.  
  135. /*-- general customisation --*/
  136.  
  137. body {
  138. color:var(--text);
  139. background-color:var(--background);
  140. font-style:normal;
  141. font-family:'Open Sans', helvetica, sans-serif;
  142. font-size:var(--font-size);
  143. font-weight:400;
  144. text-decoration:none;
  145. line-height:180%;
  146. -moz-osx-font-smoothing: grayscale;
  147. -webkit-font-smoothing: antialiased;
  148. font-smoothing: antialiased;
  149. -webkit-animation: fadein 1.5s;
  150. -moz-animation: fadein 1.5s;
  151. -o-animation: fadein 1.5s;
  152. animation: fadein 1.5s;
  153. }
  154.  
  155. a { text-decoration:none; color:var(--links); }
  156. a:hover { color:var(--links-hover); cursor:pointer; }
  157.  
  158. b, strong { font-weight:600; color:var(--title); }
  159. i, em { font-style:italic; }
  160.  
  161. blockquote {
  162. padding-left:10px;
  163. margin:0;
  164. border-left:1px solid var(--borders);
  165. }
  166.  
  167. h1 {
  168. text-transform:uppercase!important;
  169. text-align:center;
  170. font-weight:bold;
  171. font-size:calc(var(--font-size) + 2px);
  172. letter-spacing:1px;
  173. color:var(--title);
  174. margin-top:10px;
  175. }
  176.  
  177. /*-- container --*/
  178.  
  179. container {
  180. position:fixed;
  181. width:750px;
  182. height:500px;
  183. top:50%;
  184. left:50%;
  185. transform:translate(-50%, -50%);
  186. }
  187.  
  188. /*-- header --*/
  189.  
  190. #header {
  191. position:relative;
  192. height:50px;
  193. width:100%;
  194. border-bottom:1px solid var(--borders);
  195. }
  196.  
  197. #header img {
  198. position:relative;
  199. width:30px;
  200. height:30px;
  201. margin:10px 15px 10px 15px;
  202. }
  203.  
  204. .title {
  205. position:absolute;
  206. display:inline;
  207. top:15px;
  208. text-transform:uppercase;
  209. font-weight:700;
  210. font-size:calc(var(--font-size) + 4px);
  211. line-height:20px;
  212. letter-spacing:1px;
  213. color:var(--title);
  214. }
  215.  
  216. .navi {
  217. position:absolute;
  218. display:inline;
  219. right:15px;
  220. }
  221.  
  222. .navi a {
  223. line-height:50px;
  224. margin-left:5px;
  225. margin-right:5px;
  226. text-transform:uppercase;
  227. font-size:calc(var(--font-size) - 0.5px);
  228. letter-spacing:0.5px;
  229. }
  230.  
  231. /*-- links --*/
  232.  
  233. #links {
  234. height:35px;
  235. width:100%;
  236. line-height:35px;
  237. text-align:center;
  238. border-bottom:1px solid var(--borders);
  239. }
  240.  
  241. #links a {
  242. margin-left:7.5px;
  243. margin-right:7.5px;
  244. font-style:italic;
  245. font-size:calc(var(--font-size) + 1px);
  246. }
  247.  
  248. /*-- info --*/
  249.  
  250. #info { width:200px; margin-right:15px; }
  251.  
  252. #info ul li { list-style:none; margin-left:-40px; }
  253.  
  254. #info li {
  255. width:170px;
  256. padding:5px 10px 5px 10px;
  257. margin:5px 0 5px;
  258. text-align:right;
  259. background:var(--background);
  260. border-bottom:1px solid var(--borders);
  261. }
  262.  
  263. #info h2 {
  264. display:inline;
  265. margin:0;
  266. text-transform:uppercase!important;
  267. float:left!important;
  268. font-size:calc(var(--font-size) - 2px);
  269. font-style:italic;
  270. font-weight:400;
  271. letter-spacing:0.5px;
  272. color:var(--title);
  273. }
  274.  
  275. /*-- about --*/
  276.  
  277. #about {
  278. position:absolute;
  279. left:200px;
  280. top:87px;
  281. width:310px;
  282. height:382px;
  283. margin:0 5px 0 5px;
  284. padding:15px;
  285. overflow-y:scroll;
  286. border-left:1px solid var(--borders);
  287. border-right:1px solid var(--borders);
  288. }
  289.  
  290. /*-- blogs --*/
  291.  
  292. #blogs {
  293. position:absolute;
  294. right:0;
  295. top:87px;
  296. width:200px;
  297. margin-left:15px;
  298. }
  299.  
  300. #blogs ul li { list-style:none; margin-left:-30px; }
  301. #blogs ul { margin:0; }
  302.  
  303. #blogs li {
  304. width:185px;
  305. padding:0;
  306. margin-bottom:7px;
  307. line-height:30px!important;
  308. text-align:left;
  309. background:var(--accent);
  310. border-bottom:1px solid var(--borders);
  311. padding-right:5px;
  312. white-space:nowrap;
  313. overflow:hidden;
  314. text-overflow:ellipsis;
  315. }
  316.  
  317. #blogs li:hover { background:var(--background); }
  318. #blogs li:last-of-type { margin-bottom:0!important; }
  319.  
  320. #blogs img {
  321. height:30px;
  322. width:30px;
  323. margin-right:7px;
  324. margin-bottom:0;
  325. display:inline;
  326. float:left;
  327. }
  328.  
  329. #blogs h3 {
  330. display:inline;
  331. margin-right:3px;
  332. text-transform:uppercase!important;
  333. font-size:calc(var(--font-size) - 1px);
  334. font-style:italic;
  335. font-weight:400;
  336. letter-spacing:0.5px;
  337. color:var(--title);
  338. }
  339.  
  340. #blogs h3:after { content:';'; }
  341.  
  342. /*-- social --*/
  343.  
  344. #social {
  345. position:absolute;
  346. right:0px;
  347. top:360px;
  348. width:122px;
  349. padding:5px 40px 15px 40px;
  350. text-align:center;
  351. border-top:1px solid var(--borders);
  352. }
  353.  
  354. #social i {
  355. font-size:calc(var(--font-size) + 6px);
  356. padding:7px;
  357. margin:2px;
  358. background:var(--accent);
  359. border-bottom:1px solid var(--borders);
  360. }
  361.  
  362. #social i:hover { background:var(--background); }
  363.  
  364. /*-- credit - DO NOT TOUCH --*/
  365.  
  366. .credit a {
  367. font-size:10px;
  368. bottom:15px;
  369. right:20px;
  370. position:fixed;
  371. text-transform:uppercase;
  372. }
  373.  
  374. </style>
  375. </head>
  376.  
  377.  
  378.  
  379. <body>
  380.  
  381.  
  382. <container>
  383.  
  384. <div id="header">
  385. <!-- 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. -->
  386. <img src="{PortraitURL-128}"/>
  387. <div class="title">about</div><!-- title -->
  388. <div class="navi">
  389. <!-- these are your header links. feel free to add more. -->
  390. <a href="/">index</a>
  391. <a href="/ask">message</a>
  392. <a href="/archive">archive</a>
  393. </div>
  394. </div>
  395.  
  396.  
  397. <div id="links">
  398. <!-- feel free to add more! -->
  399. <a href="">i. link</a>
  400. <a href="">ii. link</a>
  401. <a href="">iii. link</a>
  402. <a href="">iv. link</a>
  403. </div>
  404.  
  405.  
  406. <div id="info">
  407. <h1>the blogger</h1> <!-- title -->
  408. <ul>
  409. <!-- template: <li><h2>subject:</h2> content</li> -->
  410. <li><h2>subject:</h2> content</li>
  411. <li><h2>subject:</h2> content</li>
  412. <li><h2>subject:</h2> content</li>
  413. <li><h2>subject:</h2> content</li>
  414. <li><h2>subject:</h2> content</li>
  415. <li><h2>subject:</h2> content</li>
  416. <li><h2>subject:</h2> content</li>
  417. <li><h2>subject:</h2> content</li>
  418. <li><h2>subject:</h2> content</li>
  419. <li><h2>subject:</h2> content</li>
  420. </ul>
  421. </div>
  422.  
  423.  
  424. <div id="about">
  425. <!-- this is where you about text goes -->
  426. 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
  427. <blockquote>blockquotes</blockquote>
  428.  
  429. <p>there is no limit as it will scroll automatically. remember to close paragraphs! <s>and now for some dummy text</s> </p>
  430.  
  431. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac consequat odio, sagittis ultricies dolor. Praesent molestie et tortor eu rhoncus. Sed tristique, sapien eu posuere vulputate, metus nisl aliquam diam, id vulputate ipsum velit quis nisi. Sed nec eros risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a diam faucibus, tincidunt libero nec, tincidunt mauris. Maecenas semper in dui ac dapibus. Nunc et mollis diam, eget porttitor felis. Suspendisse interdum porta pretium. Nulla facilisi. Curabitur sagittis, massa id ultricies euismod, purus sapien pellentesque leo, quis ultricies mauris dolor et urna. Quisque malesuada ante nec vestibulum tempor. Quisque lobortis est ac finibus pretium. Maecenas quis hendrerit quam, bibendum finibus sem. Integer imperdiet odio eu elementum interdum.</p>
  432.  
  433. </p>Fusce sed mi id lectus maximus ornare. Pellentesque venenatis pretium erat, non laoreet erat cursus et. In id dapibus arcu, at interdum augue. Nunc porta hendrerit semper. Vestibulum eu sapien sed sapien posuere porta. Duis iaculis volutpat leo sit amet euismod. Quisque vulputate aliquam congue. Sed pretium a nibh ultrices aliquam. Vestibulum mattis libero quam.</p>
  434. <!-- end about text -->
  435. </div>
  436.  
  437.  
  438. <div id="blogs">
  439. <h1>friends</h1> <!-- title -->
  440. <div style="height:228px; overflow-y:scroll; overflow-x:hidden!important;">
  441. <ul>
  442. <!--
  443. you can use this section for friends or your own personal blogs etc.
  444.  
  445. template:
  446. <li>
  447. <img src="IMAGE URL"/>
  448. <h3><a href="LINK">@url</a></h3>
  449. [optional] name
  450. </li>
  451. -->
  452. <li>
  453. <img src="IMAGE URL"/>
  454. <h3><a href="LINK">@url</a></h3>
  455. [optional] name
  456. </li>
  457. <li>
  458. <img src="IMAGE URL"/>
  459. <h3><a href="LINK">@url</a></h3>
  460. [optional] name
  461. </li>
  462. <li>
  463. <img src="IMAGE URL"/>
  464. <h3><a href="LINK">@url</a></h3>
  465. [optional] name
  466. </li>
  467. <li>
  468. <img src="IMAGE URL"/>
  469. <h3><a href="LINK">@url</a></h3>
  470. [optional] name
  471. </li>
  472. <li>
  473. <img src="IMAGE URL"/>
  474. <h3><a href="LINK">@url</a></h3>
  475. [optional] name
  476. </li>
  477. <li>
  478. <img src="IMAGE URL"/>
  479. <h3><a href="LINK">@url</a></h3>
  480. [optional] name
  481. </li>
  482. <li>
  483. <img src="IMAGE URL"/>
  484. <h3><a href="LINK">@url</a></h3>
  485. [optional] name
  486. </li>
  487. </ul>
  488. </div>
  489. </div>
  490.  
  491. <div id="social">
  492. <h1>social media</h1><!-- title -->
  493. <div style="height:70px; overflow-y:scroll; overflow-x:hidden!important;">
  494. <!--
  495. 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.
  496. replace the LINK in title="LINK" for what you want it to show on hover.
  497.  
  498. template:
  499. <a href="" title="LINK">
  500. [ICON CODE]
  501. </a>
  502. -->
  503. <a href="" title="LINK">
  504. <i class="fab fa-twitter fa-fw"></i>
  505. </a>
  506. <a href="" title="LINK">
  507. <i class="fab fa-instagram fa-fw"></i>
  508. </a>
  509. <a href="" title="LINK">
  510. <i class="fab fa-snapchat-ghost fa-fw"></i>
  511. </a>
  512. <a href="" title="LINK">
  513. <i class="fab fa-goodreads fa-fw"></i>
  514. </a>
  515. <a href="" title="LINK">
  516. <i class="fab fa-pinterest-p fa-fw"></i>
  517. </a>
  518. <a href="" title="LINK">
  519. <i class="fas fa-heart fa-fw"></i>
  520. </a>
  521. </div>
  522. </div>
  523.  
  524. </container>
  525.  
  526.  
  527. <!-- credit - DO NOT TOUCH -->
  528.  
  529. <div class="credit">
  530. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  531. </div>
  532.  
  533.  
  534. </body>
  535. </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!