API tools faq
paste
Advertisement
alydae

about i

alydae
Dec 23rd, 2015 (edited)
6,841
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.74 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. ABOUT I
  7. by alydae
  8.  
  9. released: december 24, 2015
  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.  
  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. border:1px solid var(--borders);
  103. z-index:9999;
  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(--accent);
  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. -webkit-animation: fadein 1.5s;
  140. -moz-animation: fadein 1.5s;
  141. -o-animation: fadein 1.5s;
  142. animation: fadein 1.5s;
  143. }
  144.  
  145. a {
  146. text-decoration:none;
  147. text-transform:uppercase;
  148. font-size:calc(var(--font-size) - 1px);
  149. font-weight:600;
  150. letter-spacing:0.75px;
  151. color:var(--links);
  152. transition-duration: 0.6s;
  153. -moz-transition-duration: 0.6s;
  154. -webkit-transition-duration: 0.6s;
  155. -o-transition-duration: 0.6s;
  156. }
  157.  
  158. a:hover {
  159. color:var(--links-hover);
  160. cursor:pointer;
  161. transition-duration: 0.6s;
  162. -moz-transition-duration: 0.6s;
  163. -webkit-transition-duration: 0.6s;
  164. -o-transition-duration: 0.6s;
  165. }
  166.  
  167. b, strong { font-weight:600; color:var(--title); }
  168. i, em { font-style:italic; }
  169.  
  170. h1, h2, h3, h4, h5, h6 {
  171. color:var(--title);
  172. text-transform:uppercase!important;
  173. text-align:left;
  174. font-weight:bold;
  175. font-size:calc(var(--font-size) + 2px);
  176. letter-spacing:1px;
  177. }
  178.  
  179. blockquote {
  180. padding-left:10px;
  181. margin:0;
  182. border-left:1px solid var(--borders);
  183. }
  184.  
  185. h1 {
  186. text-transform:uppercase;
  187. font-weight:bold;
  188. font-size:calc(var(--font-size) + 1px);
  189. text-align:center;
  190. }
  191.  
  192. /*-- container --*/
  193.  
  194. #container {
  195. position:fixed;
  196. width:600px;
  197. height:400px;
  198. top:50%;
  199. left:50%;
  200. transform:translate(-50%, -50%);
  201. }
  202.  
  203. /*-- header --*/
  204.  
  205. #header {
  206. background:var(--background);
  207. height:50px;
  208. margin:auto;
  209. border:1px solid var(--borders);
  210. }
  211.  
  212. .title {
  213. margin-left:16px;
  214. float:left;
  215. text-transform:uppercase;
  216. font-size:calc(var(--font-size) + 2px);
  217. line-height:50px;
  218. font-weight:bold;
  219. letter-spacing:1px;
  220. color:var(--title);
  221. }
  222.  
  223. .links {
  224. margin-right:16px;
  225. float:right;
  226. position:relative;
  227. line-height:50px;
  228. }
  229.  
  230. .links a { margin-left:7.5px; }
  231.  
  232. /*-- middle section --*/
  233.  
  234. #info {
  235. position:relative;
  236. background:var(--background);
  237. height:64px;
  238. margin-top:10px;
  239. line-height:16px;
  240. padding:16px;
  241. border:1px solid var(--borders);
  242. text-align:center;
  243. }
  244.  
  245. #info img {
  246. float:left;
  247. width:64px;
  248. height:64px;
  249. border-radius:5px;
  250. }
  251.  
  252. #info ul { list-style:none; margin:0; width:460px; }
  253.  
  254. #info b {
  255. text-transform:uppercase;
  256. font-weight:700;
  257. letter-spacing:0.5px;
  258. margin-right:5px;
  259. }
  260.  
  261. .social {
  262. float:right;
  263. position:relative;
  264. text-align:right;
  265. margin-top:-64px;
  266. }
  267.  
  268. .social a { display:block; }
  269. .social i { padding-left:5px; }
  270.  
  271. /*-- third section --*/
  272.  
  273. #about {
  274. position:relative;
  275. background:var(--background);
  276. margin-top:15px;
  277. padding:16px;
  278. border:1px solid var(--borders);
  279. }
  280.  
  281. .atext {
  282. padding-right:10px;
  283. max-height:178px;
  284. overflow-Y:scroll;
  285. }
  286.  
  287. /*-- credit - DO NOT TOUCH --*/
  288.  
  289. .credit a {
  290. font-size:10px;
  291. bottom:15px;
  292. right:20px;
  293. position:fixed;
  294. text-transform:uppercase;
  295. }
  296.  
  297. </style>
  298. </head>
  299.  
  300.  
  301. <body>
  302.  
  303. <div id="container">
  304.  
  305. <div id="header">
  306. <div class="title">about</div> <!-- title -->
  307. <div class="links">
  308. <!-- feel free to add more! -->
  309. <a href="/">home.</a>
  310. <a href="/ask">ask.</a>
  311. <a href="/">link.</a>
  312. <a href="/archive">archive.</a>
  313. </div>
  314. </div>
  315.  
  316. <div id="info">
  317. <!-- 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. -->
  318. <img src="{PortraitURL-128}"/>
  319.  
  320. <!-- this is where the basic info goes. there's only space for four. -->
  321. <ul>
  322. <li><b>subject:</b>content</li>
  323. <li><b>subject:</b>content</li>
  324. <li><b>subject:</b>content</li>
  325. <li><b>subject:</b>content</li>
  326. </ul>
  327.  
  328. <div class="social">
  329. <!-- 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. there's only space for four. -->
  330. <a href="">twitter
  331. <i class="fab fa-twitter fa-fw"></i>
  332. </a>
  333. <a href="">instagram
  334. <i class="fab fa-instagram fa-fw"></i>
  335. </a>
  336. <a href="">snapchat
  337. <i class="fab fa-snapchat-ghost fa-fw"></i>
  338. </a>
  339. <a href="">pinterest
  340. <i class="fab fa-pinterest-p fa-fw"></i>
  341. </a>
  342. </div>
  343.  
  344. </div>
  345.  
  346. <div id="about">
  347. <div class="atext">
  348. <!-- this is where you about text goes -->
  349. 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
  350. <blockquote>blockquotes</blockquote>
  351.  
  352. <p><h1>there's a subtitle style for you as well</h1></p>
  353.  
  354. <p>there is no limit as it will scroll automatically. remember to close paragraphs! <s>and now for some dummy text</s> </p>
  355.  
  356. <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>
  357. </div>
  358. </div>
  359.  
  360. </div>
  361.  
  362.  
  363. <!-- credit - DO NOT TOUCH -->
  364.  
  365. <div class="credit">
  366. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  367. </div>
  368.  
  369.  
  370. </body>
  371. </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!