API tools faq
paste
Advertisement
alydae

about v

alydae
Oct 6th, 2019 (edited)
6,335
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ABOUT V
  7. by alydae
  8.  
  9. released: october 6, 2019
  10. last updated: september 10, 2023
  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</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:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  44.  
  45. <script src="https://kit.fontawesome.com/4fe045a39a.js" crossorigin="anonymous"></script>
  46. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  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. /*-- common --*/
  114.  
  115. a, a:hover, .social i, .social a:hover i {
  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:#bad0f1;
  130. --title:#222;
  131. --borders:#eee;
  132. --font-size:10px;
  133. }
  134.  
  135. /*-- general customisation --*/
  136.  
  137. body {
  138. color:var(--text);
  139. background: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.  
  168. /*-- container --*/
  169.  
  170. container {
  171. position:fixed;
  172. width:700px;
  173. height:auto;
  174. top:50%;
  175. left:50%;
  176. transform:translate(-50%,-50%);
  177. }
  178.  
  179. /*-- topbar --*/
  180.  
  181. #topbar {
  182. position:relative;
  183. width:100%;
  184. height:50px;
  185. border:1px solid transparent;
  186. }
  187.  
  188. #topbar img {
  189. float:left;
  190. width:40px;
  191. height:40px;
  192. border-radius:100%;
  193. padding:3px;
  194. border:1px solid var(--borders);
  195. }
  196.  
  197. .nav { line-height:50px; }
  198. .nav a { font-style:italic; margin-left:15px; }
  199. .nav i, .t i { padding-right:7px; color:var(--links-hover); }
  200.  
  201. .nav:before {
  202. content:"";
  203. float:left;
  204. margin:25px 0px 25px 10px;
  205. height:1px;
  206. width:75px;
  207. background:var(--borders);
  208. }
  209.  
  210. /*-- title --*/
  211.  
  212. #title {
  213. position:absolute;
  214. margin-top:65px;
  215. margin-left:-55px;
  216. line-height:50px;
  217. transform:rotate(-90deg);
  218. text-transform:uppercase;
  219. font-size:calc(var(--font-size) + 6px);
  220. font-weight:bold;
  221. letter-spacing:2px;
  222. color:var(--title);
  223. }
  224.  
  225. #title:before {
  226. content:"";
  227. float:right;
  228. margin:25px 0px 25px 10px;
  229. height:1px;
  230. width:75px;
  231. background:var(--borders);
  232. }
  233.  
  234. /*-- main section --*/
  235.  
  236. #main {
  237. position:relative;
  238. margin-left:60px;
  239. padding:10px 15px;
  240. width:auto;
  241. max-height:210px;
  242. overflow-y:scroll;
  243. background:var(--accent);
  244. border:1px solid var(--borders);
  245. }
  246.  
  247.  
  248. /*-- bottom boxes --*/
  249.  
  250. .box {
  251. float:left;
  252. padding-right:25px;
  253. margin-right:25px;
  254. margin-top:25px;
  255. width:calc((700px - 52px * 2) / 3);
  256. /* (container width - (2*margin + 2) * one less than the number of boxes) / the number of boxes */
  257. height:155px;
  258. border-right:1px solid var(--borders);
  259. }
  260.  
  261. .box:first-of-type { margin-left:0px!important; }
  262. .box:last-of-type { padding-right:0; margin-right:0; border:none; }
  263.  
  264. .box h1 {
  265. display:inline-block;
  266. text-transform:uppercase;
  267. color:var(--links);
  268. font-size:calc(var(--font-size) + 1px);
  269. letter-spacing:1.5px;
  270. padding:3px 7px;
  271. margin:0px 20px 10px 0px;
  272. background:var(--accent);
  273. border:1px solid var(--borders);
  274. }
  275.  
  276. .t {
  277. display:block;
  278. margin-top:5px;
  279. height:115px;
  280. overflow-y:scroll;
  281. overflow-x:hidden;
  282. }
  283.  
  284. .t ul { margin-top:0px; margin-bottom:0px; }
  285. .t ul li { list-style:none; margin-left:-40px; }
  286. .t li { width:195px; padding-bottom:5px; } /* width is slightly smaller than the value you get from the .box width */
  287. .t li:last-of-type { padding-bottom:0; }
  288.  
  289. .t h2 {
  290. display:inline;
  291. margin:0;
  292. text-transform:uppercase!important;
  293. font-size:calc(var(--font-size) - 0.5px);
  294. font-weight:700;
  295. letter-spacing:1px;
  296. color:var(--title);
  297. margin-right:5px;
  298. }
  299.  
  300. .social { text-align:right; }
  301.  
  302. .social i {
  303. font-size:calc(var(--font-size) + 6px);
  304. width:calc(var(--font-size) + 6px);
  305. margin-bottom:9px;
  306. margin-right:9px;
  307. padding:10px;
  308. border-radius:100%;
  309. border:1px solid var(--borders);
  310. }
  311.  
  312. .social a:hover i { color:var(--links); background:var(--accent); }
  313.  
  314. /*-- credit - DO NOT TOUCH --*/
  315.  
  316. .credit a {
  317. font-size:10px;
  318. bottom:15px;
  319. right:20px;
  320. position:fixed;
  321. text-transform:uppercase;
  322. }
  323.  
  324. </style>
  325. </head>
  326.  
  327.  
  328.  
  329. <body>
  330.  
  331. <container>
  332.  
  333. <div id="topbar">
  334. <img src="{PortraitURL-128}"/><!-- 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 -->
  335. <div class="nav">
  336. <!-- feel free to add more! if you don't want the icon, just remove the <i class> section. to change the icon, go to https://fontawesome.com/icons. -->
  337. <a href="/"><i class="fas fa-home"></i>index</a>
  338. <a href="/ask"><i class="fas fa-envelope"></i>message</a>
  339. <a href=""><i class="fas fa-star"></i>link</a>
  340. <a href=""><i class="fas fa-bars"></i>link</a>
  341. </div>
  342. </div><!-- end topbar -->
  343.  
  344. <div id="title">about</div><!-- title - this has to be a single word or else it will break the page! -->
  345.  
  346.  
  347.  
  348. <div id="main">
  349. <!-- this is where you about text goes -->
  350. 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
  351. <blockquote>blockquotes</blockquote>
  352.  
  353. <p>there is no limit as it will scroll automatically. remember to close paragraphs! <s>and now for some dummy text</s> </p>
  354.  
  355. <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.</p>
  356.  
  357. <p>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</p>
  358. <!-- end about text -->
  359. </div><!-- end main -->
  360.  
  361.  
  362.  
  363. <!-- THE BOXES
  364.  
  365. template for a new box:
  366. <div class="box">
  367. <h1>subtitle</h1>
  368. <div class="t">
  369. </div>
  370. </div>
  371.  
  372. the boxes are identical in size to each other. you can move them around, delete them all or you can change the number. earlier in the code, under .box, there's instructions on changing the number of boxes. 2-4 is recommended, and only 4 for little content.
  373.  
  374. you can have anything in here and the content will scroll. the examples are social media links and lists. the lists can have an optional icon in front of them. to have the social media section, add 'social' to the class to get
  375. <div class="t social">
  376.  
  377. template for a new social media link:
  378. <a href="[link]" title="[optional hover title]"><i class="[icon name] fa-fw"></i></a>
  379.  
  380. template for a new list:
  381. <li><i class="[icon name] fa-fw"><h2></i>subject:</h2> content</li>
  382. or
  383. <li><h2>subject:</h2> content</li>
  384.  
  385. to change the icon, go to https://fontawesome.com/icons. keep the fa-fw at the end to align them all.
  386.  
  387. -->
  388.  
  389. <div class="box">
  390. <h1>subtitle</h1>
  391. <div class="t social">
  392. <a href="" title=""><i class="fab fa-twitter fa-fw"></i></a>
  393. <a href="" title=""><i class="fab fa-instagram fa-fw"></i></a>
  394. <a href="" title=""><i class="fab fa-snapchat-ghost fa-fw"></i></a>
  395. <a href="" title=""><i class="fab fa-discord fa-fw"></i></a>
  396. <a href="" title=""><i class="fab fa-goodreads-g fa-fw"></i></a>
  397. <a href="" title=""><i class="fab fa-pinterest-p fa-fw"></i></a>
  398. <a href="" title=""><i class="fas fa-heart fa-fw"></i></a>
  399. </div>
  400. </div><!-- end box -->
  401.  
  402.  
  403. <div class="box">
  404. <h1>subtitle</h1>
  405. <div class="t">
  406. <ul>
  407. <li><h2>subject:</h2> content</li>
  408. <li><h2>subject:</h2> content</li>
  409. <li><h2>subject:</h2> content</li>
  410. <li><h2>subject:</h2> content</li>
  411. <li><h2>subject:</h2> content</li>
  412. </ul>
  413. </div>
  414. </div><!-- end box -->
  415.  
  416.  
  417. <div class="box">
  418. <h1>subtitle</h1>
  419. <div class="t">
  420. <ul>
  421. <li><i class="fas fa-book fa-fw"></i><h2>subject:</h2> content</li>
  422. <li><i class="fas fa-film fa-fw"></i><h2>subject:</h2> content</li>
  423. <li><i class="far fa-moon fa-fw"></i><h2>subject:</h2> content</li>
  424. <li><i class="fas fa-code fa-fw"></i><h2>subject:</h2> content</li>
  425. <li><i class="fas fa-crop fa-fw"></i><h2>subject:</h2> content</li>
  426. </ul>
  427. </div>
  428. </div><!-- end box -->
  429.  
  430.  
  431.  
  432. </container>
  433.  
  434.  
  435. <!-- credit - DO NOT TOUCH -->
  436.  
  437. <div class="credit">
  438. <a href="http://enchantedthemes.tumblr.com" title="alydae">A.</a>
  439. </div>
  440.  
  441.  
  442. </body>
  443. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!