API tools faq
paste
Advertisement
HellaBlind

sulfura code

HellaBlind
Apr 8th, 2019 (edited)
63
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <body style="background-color:#ed8c1c">
  4. <!--
  5.  
  6. aether — about i
  7. by divinethemes
  8.  
  9. › do not steal any part of this code
  10. › edit however you want, but only for personal use
  11. › send any questions to divinethemes.tumblr.com/ask
  12. › thank you for using! <3
  13.  
  14.  
  15. — customization —
  16.  
  17. › ctrl/command + f, type "#cfe3ed" and replace with desired color to change the accent color
  18. › or you can use the up/down buttons and change them each into different colors if you want
  19.  
  20. -->
  21.  
  22. <title>about — {Name}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <!-- tooltips script-->
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  28.  
  29. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:200,
  36. tip_fade_speed:300
  37. }
  38. );
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <!--font awesome -->
  44. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  45.  
  46. <!--fonts-->
  47. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  48.  
  49. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  50.  
  51. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
  52.  
  53. <style type="text/css">
  54.  
  55. @keyframes fadein {from {opacity:0;}to {opacity:1;}}
  56. @-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  57. @-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  58. @-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}
  59.  
  60. /*-- scrollbar --*/
  61. ::-webkit-scrollbar-thumb:vertical {
  62. background-color: #ed8c1c; /*slider color*/
  63. height: 50px;
  64. }
  65. ::-webkit-scrollbar {
  66. height: 0px;
  67. width: 2px;
  68. background-color: #ed8c1c; /*scrollbar bg color*/
  69. }
  70. /*-- selection --*/
  71. ::-moz-selection { background:#eaeaea; color:#222; }
  72. ::selection { background:#eaeaea; color:#222; }
  73.  
  74. /*-- hide tumblr controls --*/
  75. .tmblr-iframe, .iframe-controls–desktop {display:none !important;}
  76.  
  77. /*-- tooltips --*/
  78. #s-m-t-tooltip {
  79. position:absolute;
  80. padding:0px 5px 0px 5px;
  81. margin-top:30px;
  82. color:#444;
  83. background-color:#fafafa;
  84. font-family:'Fira Sans', sans-serif;
  85. font-size:9.5px;
  86. font-style:italic;
  87. text-transform:lowercase;
  88. text-align:center;
  89. border:1px solid #eee;
  90. letter-spacing:0.5px;
  91. z-index:999999;
  92. }
  93.  
  94. /*--general--*/
  95. body {
  96. background-color:#fff;
  97. font-family:'Fira Sans', sans-serif;
  98. font-size:11px;
  99. font-weight:400;
  100. line-height:190%;
  101. text-decoration:none;
  102. color:#555;
  103. -moz-osx-font-smoothing:grayscale;
  104. -webkit-font-smoothing:antialiased;
  105. font-smoothing:antialiased;
  106. animation: fadein 2s;
  107. -moz-animation: fadein 2s;
  108. -webkit-animation: fadein 2s;
  109. -o-animation: fadein 2s;
  110. }
  111.  
  112. body, * {
  113. cursor:auto;
  114. }
  115.  
  116. a {
  117. text-decoration:none;
  118. color:#999; /* link color */
  119. -webkit-transition:0.4s ease-in;
  120. -moz-transition:0.4s ease-in;
  121. -o-transition:0.4s ease-in;
  122. }
  123.  
  124. a:hover {
  125. color:#cfe3ed; /* link hover */
  126. text-decoration:none;
  127. cursor:pointer;
  128. -webkit-transition:0.4s ease-in;
  129. -moz-transition:0.4s ease-in;
  130. -o-transition:0.4s ease-in;
  131. }
  132.  
  133. b, strong {
  134. font-weight:700;
  135. color:#222;
  136. }
  137.  
  138. i, em {
  139. font-style:italic;
  140. }
  141.  
  142. blockquote {
  143. padding-left:10px;
  144. border-left:1px solid #eee;
  145. margin:0px;
  146. }
  147.  
  148. /*-- credit // touch and you will face the wrath of the gods --*/
  149. .c {
  150. position:fixed;
  151. bottom:15px;
  152. right:20px;
  153. font-size:10.5px;
  154. -webkit-transition:0.7s ease-in;
  155. -moz-transition:0.7s ease-in;
  156. -o-transition:0.7s ease-in;
  157. }
  158.  
  159. .c:hover {
  160. transform:rotate(540deg);
  161. -webkit-transition:0.7s ease-in;
  162. -moz-transition:0.7s ease-in;
  163. -o-transition:0.7s ease-in;
  164. }
  165.  
  166. .c i:hover {
  167. cursor:pointer;
  168. }
  169.  
  170. /*-- containers --*/
  171.  
  172. #container {
  173. position:fixed;
  174. background-color:#ed8c1c;
  175. top:45%;
  176. left:50%;
  177. width:700px;
  178. height:400px;
  179. transform:translate(-50%, -50%);
  180. -webkit-animation: fadein 1s;
  181. -moz-animation: fadein 1s;
  182. -o-animation: fadein 1s;
  183. animation: fadein 1s;
  184. }
  185.  
  186. #s1 {
  187. position:relative;
  188. width:130px;
  189. height:250px;
  190. margin-top:50px;
  191. border-right:1px solid #eee;
  192. font-family:'Karla', sans-serif;
  193. font-size:11px;
  194. }
  195.  
  196. #s1 b:hover {
  197. color:#cfe3ed;
  198. transition:0.6s ease;
  199. -o-transition:0.6s ease;
  200. -moz-transition:0.6s ease;
  201. -webkit-transition:0.6s ease;
  202. }
  203.  
  204. .icon img {
  205. width:100px;
  206. height:100px;
  207. border-radius:10%;
  208. float:left;
  209. margin-left:20px;
  210. }
  211.  
  212.  
  213. #quote {
  214. position:absolute;
  215. width:500px;
  216. height:20px;
  217. background-color:#ebc91a; /*quote bg color*/
  218. border:1px solid #cfe3ed; /* quote border color */
  219. font-style:italic;
  220. font-size:12px;
  221. text-align:center;
  222. text-transform:lowercase;
  223. padding:10px;
  224. margin-top:48px;
  225. top:50px;
  226. left:130px;
  227. margin-left:20px;
  228. max-height:20px;
  229. overflow:auto;
  230. }
  231.  
  232. #s2 {
  233. position:absolute;
  234. width:502px;
  235. max-height:230px;
  236. overflow:auto;
  237. left:130px;
  238. top:150px;
  239. padding:20px;
  240. padding-top:0px;
  241. margin-bottom:20px;
  242. bottom:20px;
  243. }
  244.  
  245. #s2 a {
  246. color:#555;
  247. border-bottom:1px solid #cfe3ed; /* text section link border color */
  248. padding-bottom:1px;
  249. }
  250.  
  251. #s2 a:hover {
  252. color:#cfe3ed; /* text section link hover color */
  253. }
  254.  
  255.  
  256. /*-- top --*/
  257.  
  258.  
  259. #top {
  260. position:relative;
  261. height:25px;
  262. width:100%;
  263. border-bottom:1px solid #eee;
  264. padding-bottom:20px;
  265. }
  266.  
  267. .title {
  268. text-transform:lowercase;
  269. font-size:18px;
  270. font-weight:700;
  271. letter-spacing:1px;
  272. float:left;
  273. padding-bottom:10px;
  274. margin-top:15px;
  275. font-family:'Playfair Display', serif;
  276. }
  277.  
  278. .links {
  279. text-transform:lowercase;
  280. font-size:13px;
  281. letter-spacing:0px;
  282. float:right;
  283. padding-bottom:10px;
  284. margin-top:15px;
  285. font-style:italic;
  286. font-family:'Karla', sans-serif;
  287. }
  288.  
  289. .links a {
  290. color:#c0c0c0;
  291. display:inline-block;
  292. margin-right:10px;
  293. }
  294.  
  295. .links a:hover {
  296. color:#cfe3ed;
  297. }
  298.  
  299. .links a:after {
  300. content:".";
  301. }
  302.  
  303.  
  304. .basics {
  305. background-color:transparent;
  306. width:200px;
  307. max-height:150px;
  308. overflow:auto;
  309. text-align:left !important;
  310. margin-left:20px;
  311. padding-top:20px;
  312. max-height:200px;
  313. overflow:auto;
  314. }
  315.  
  316. .stitle {
  317. font-size:14px; /* subtitle font size */
  318. font-style:italic;
  319. font-weight:700;
  320. color:#eb0c31; /* subtitle color */
  321. text-transform:lowercase;
  322. margin-bottom:2px;
  323. padding-bottom:2px;
  324. margin-top:5px;
  325. text-align:left;
  326. font-family:'Karla', sans-serif;
  327. }
  328.  
  329.  
  330.  
  331. </style>
  332. </head>
  333.  
  334. <body>
  335.  
  336. <div id="container">
  337.  
  338. <!-- top bar -->
  339. <div id="top">
  340.  
  341.  
  342. <!-- title -->
  343. <div class="title">Sulfura</div>
  344.  
  345. <!-- top links -->
  346. <div class="links"> <!-- you can add more with <a href="url">link</a> -->
  347. <a target="_blank" href=""><img src="https://cdn.discordapp.com/attachments/376215349718155267/521495093882912770/articuno.png" alt="Girl in a jacket"</A>
  348. <a target="_blank" href="https://roleplay.chat/profile.php?user=xapdoz"><img src="https://cdn.discordapp.com/attachments/376215349718155267/521495126837559296/zapdos.png" alt="Girl in a jacket"</A></a>
  349. <a href=""><img src="https://cdn.discordapp.com/attachments/376215349718155267/521495215417196544/ho-oh.png" alt="Girl in a jacket"</A></a> <!-- if it's not on your blog you must add 'http://' in the front -->
  350. <a target="_blank" href="https://roleplay.chat/profile.php?user=Opal+Wakana"><img src="https://cdn.discordapp.com/attachments/376215349718155267/521495244194316296/lugia.png" alt="Girl in a jacket"</A></a> <!-- you can delete this one if you want -->
  351. </div>
  352.  
  353. </div>
  354. <!--end top bar -->
  355.  
  356. <!-- section 1 -->
  357. <div id="s1">
  358.  
  359. <!--icon-->
  360. <div class="icon">
  361. <img src="https://media.giphy.com/media/b1FZb8klNaMcU/giphy.gif"/> <!-- replace {PortraitURL-96} with an image URL if you want a custom icon or it'll just be your default icon -->
  362. </div>
  363.  
  364. <!-- basics // fontawesome.com/icons for more icons -->
  365. <div class="basics">
  366. <b><i title="species" class="fas fa-user"></i></b> moltres <br>
  367. <b><i title="age" class="fas fa-calendar"></i></b> ageless <br>
  368. <b><i title="pronouns" class="fas fa-venus"></i></b> she/her <br>
  369. <b><i title="location" class="fas fa-map-marker"></i></b> up <Br>
  370. <b><i title="personality" class="fas fa-leaf"></i></b> irritated <Br>
  371. <b><i title="star sign" class="fas fa-star"></i></b> sagittarius <Br>
  372. <b><i title="birthday" class="fas fa-birthday-cake"></i></b> december 20
  373. </div>
  374.  
  375. </div>
  376. <!-- end section 1 -->
  377.  
  378. <!-- quote -->
  379. <div id="quote">
  380. My young life burnt me alive.
  381. </div>
  382. <!-- end quote -->
  383.  
  384. <!-- text section start -->
  385. <div id="s2">
  386. <center><p>Flame Pokémon. Here to trigger all the other legendary birbs & roast scrubs like chestnuts.<br>
  387. Flame bod. Charcoal.<br>
  388. Hurricane, Heat Wave, Steel Wing, Flamethrower.<p>
  389. <a title="blazeitt." href="https://cdn.discordapp.com/attachments/376215349718155267/521372005283528718/f0b6b1201ae72700bb8829ec9d6a83d0.png">Gijinka Ref.</a><p>
  390. <img src="https://cdn.bulbagarden.net/upload/3/3f/Pinani146.png" alt="Girl in a jacket"></a>
  391. <div class="stitle"><center><span title="Typist is also a birb. Drink cactus juice. It's the quenchiest. WIP.">bird up.</div><center>
  392.  
  393.  
  394. </div>
  395. <!-- text section end -->
  396.  
  397.  
  398. </div>
  399. <!-- end container -->
  400.  
  401. <!-- credit // touch and you will face the wrath of the gods -->
  402. <div class="c"><a title="divine themes" target="_blank" href="http://divinethemes.tumblr.com"><i class="fas fa-crown"></i></a>
  403. </div>
  404.  
  405.  
  406.  
  407. </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!