API tools faq
paste
Advertisement
Guest User

profile css

a guest
Nov 22nd, 2019
176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.28 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
  3.  
  4. THEME MADE BY RACHEL @ ALMIGHTYONE,TUMBLR.COM
  5.  
  6. [PAGE #1]
  7. Go to 7th-district.tumblr.com if you have any questions.
  8. Do NOT remove the credits!!
  9.  
  10. Other than changing the colors and pictures do not make the page
  11. not longer recognizable as mine!
  12.  
  13. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
  14. -->
  15. <html>
  16. <head>
  17.  
  18. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20. <link rel="shortcut icon" href="{Favicon}" />
  21.  
  22. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic' rel='stylesheet' type='text/css'>
  26.  
  27. <style type="text/css">
  28.  
  29. ::selection {
  30. background: #000;
  31. color: #fff;
  32. }
  33.  
  34. ::-webkit-selection {
  35. background: #000;
  36. color: #fff;
  37. }
  38.  
  39.  
  40. body {
  41. background:#f9f9f9;
  42. font-family:calibri;
  43. font-size:11px;
  44. }
  45.  
  46. body a{text-decoration:none;}
  47.  
  48.  
  49. /* THE LINKS ON THE LEFT*/
  50.  
  51. #links {
  52. top:170px;
  53. left:50%;
  54. margin-left:-340px;
  55. position:fixed;
  56. width:50px;
  57. float:left;
  58. border:0px solid black;
  59. }
  60.  
  61. .links{
  62. width:10px;
  63. position:relative;
  64. float:left;
  65. text-align:center;
  66. margin:4px;
  67. font-family:calibri;
  68. text-transform:uppercase;
  69. color:#fff;
  70. background:#323232;
  71. padding:7px 10px 7px 10px;
  72. font-size:11px;
  73. border-left:3px solid #525252; /* THE BORDER LINK COLORS */
  74. border-right:3px solid #525252;
  75. box-shadow:0px 0px 3px #aaa;
  76. border-radius:100%;
  77.  
  78. }
  79.  
  80.  
  81.  
  82. /* THIS IS FOR THE INFORMATION ON THE RIGHT */
  83.  
  84. #right {
  85. background:#323232;
  86. border-left:2px solid #525252;
  87. width:120px;
  88. height:1010px;
  89. position:absolute;
  90. top:0px;
  91. right:0px;
  92. margin-left:0px;
  93. }
  94.  
  95.  
  96. .name {
  97. width:100px;
  98. float:right;
  99. font-family:calibri;
  100. font-size:13px;
  101. text-transform:uppercase;
  102. font-weight:none;
  103. color:#525252; /* <-- COLOR FOR THE QUESTION ON THE RIGHT*/
  104. line-height:110%;
  105. }
  106.  
  107. .answer {
  108. float:right;
  109. text-align:right;
  110. font-family:calibri;
  111. font-size:11px;
  112. font-weight:none;
  113. color:#fff; /* <--- COLOR FOR THE ANSWER ON THE RIGHT */
  114. }
  115.  
  116. .whole{
  117. float:right;
  118. text-align:right;
  119. padding:4px;
  120. background:#323232; /* THE BACKGROUND FOR THE RIGHT QUESTIONS */
  121. margin-bottom:7px;
  122.  
  123.  
  124. }
  125.  
  126. /* THE BIG BOX FULL OF YOUR INFORMATION */
  127.  
  128. #content {
  129. background:#fff;
  130. width:550px;
  131. height:300px;
  132. overflow:scroll;
  133. position:fixed;
  134. top:140px; /*290 */
  135. left:50%;
  136. margin-left:-290px;
  137. padding:10px;
  138. border:5px solid #323232; /* THE BORDER FOR THE WHOLE BOX FULL OF YOUR INFORMATION */
  139. z-index:3;
  140. box-shadow: 0 8px 10px -5px #323232;
  141. -webkit-box-shadow: 0 8px 10px -5px #323232;
  142. -moz-box-shadow: 0 8px 6px -6px black;
  143.  
  144.  
  145.  
  146.  
  147. }
  148.  
  149. ::-webkit-scrollbar
  150. {
  151. height: 0px;
  152. width: 2px;
  153. background: white;
  154. }
  155.  
  156. ::-webkit-scrollbar-thumb:vertical
  157. {
  158. background: #525252;
  159. }
  160.  
  161. /* IMG ON RIGHT */
  162.  
  163. #img
  164. {
  165. background:#fff;
  166. width: 290px;
  167. height: 430px;
  168. overflow: hidden;
  169. position:fixed;
  170. top: 70px;
  171. right: 30px;
  172. padding: 10px;
  173. margin-right: -10px;
  174. border:5px solid #323232;
  175. box-shadow: 0 8px 10px -5px #323232;
  176. -webkit-box-shadow: 0 8px 10px -5px #323232;
  177. -moz-box-shadow: 0 8px 6px -6px black;
  178.  
  179.  
  180.  
  181.  
  182. }
  183.  
  184. /* TITLE */
  185.  
  186. #title{
  187. top:70px;
  188. left:50%;
  189. margin-left:-290px;
  190. position:fixed;
  191. width:580px;
  192. text-align:right;
  193. font-family: 'Open Sans Condensed', sans-serif;
  194. text-transform:uppercase;
  195. color:#525252;
  196. font-size:55px;
  197. letter-spacing:3px;
  198. text-shadow:1px 3px 3px #ddd;
  199. }
  200.  
  201. /* YOUR INFORMATION ON THE LEFT */
  202.  
  203. #info {
  204. border:0px solid black;
  205. width:425px;
  206. float:left;
  207. line-height:120%;
  208. margin-top:0px;
  209. margin:left:0;
  210. color:black;
  211. font-family:calibri;
  212. text-align:left;
  213. font-size:11px;
  214. }
  215.  
  216. /* LINKS AND ITALICS */
  217.  
  218. #info a{
  219. color:#525252;
  220. -webkit-transition: all 0.6s ease-in-out;
  221. }
  222.  
  223. #info a:hover {
  224. color:#eee;
  225. -webkit-transition: all 0.6s ease-in-out;
  226. }
  227.  
  228.  
  229. .question {
  230. font-size:12px;
  231. font-weight:bold;
  232. text-transform:uppercase;
  233. color:#525252;
  234. font-style:italic;
  235. }
  236.  
  237. /* DO NOT TOUCH BELOW */
  238.  
  239. ul {
  240. list-style-type:square;}
  241.  
  242. #s-m-t-tooltip {
  243. position:relative;
  244. overflow:hidden;
  245. z-index:990999999;
  246. max-width:200px;
  247. margin:10px 0 0 10px;
  248. padding:4px 5px 5px 5px;
  249. font:9px calibri;
  250. background:#323232;
  251. line-height:100%;
  252. font-weight:none;
  253. text-transform:uppercase;
  254. letter-spacing:1px;
  255. color:#fff;
  256. }
  257.  
  258. </style>
  259. </head>
  260. <body>
  261.  
  262. <div id="links">
  263. <a href="http://raitrolling.tumblr.com/tagged/liiore-dariya" class="links" title="tag">i</a>
  264. <a href="http://toyhou.se/638977.liiore-dariya" class="links" title="toyhou.se">ii</a>
  265. <a href="http://raitrolling.tumblr.com/trolls" class="links" title="back to select">iii</a>
  266.  
  267. <!-- PLEASE DO NOT RENAME THE CREDIT AND JUST LEAVE IT LIKE THAT! -->
  268. <a href="http://almightyone.tumblr.com/" class="links" title="page made by almightyone">©</a>
  269. </div>
  270.  
  271.  
  272. <div id="title">Liiore Dariya</div>
  273. <div id="content">
  274.  
  275. <div id="img">
  276. <img src="https://i.imgur.com/WlJbOt5.png" width="290px">
  277. </div>
  278.  
  279. <div id="info">
  280.  
  281. <Div id="right">
  282.  
  283. <!-- YOU CAN REPLACE THE TITLE/QUESTIONS TO WHATEVER YOU WANT -->
  284. <div class="whole">
  285. <span class="name"> Age:</span> <Br />
  286. <span class="answer"> 8.5 Solar Sweeps</span>
  287. </div>
  288.  
  289. <div class="whole">
  290. <span class="name">Gender:</span> <Br />
  291. <span class="answer">Male</span>
  292. </div>
  293.  
  294. <div class="whole">
  295. <span class="name">Height:</span> <Br />
  296. <span class="answer">5'07</span>
  297. </div>
  298.  
  299. <div class="whole">
  300. <span class="name">Blood Colour:</span> <br />
  301. <span class="answer"><a title="Seafoam (#47CC95, Hue 155)"><font color="#eeeeee">Anonymous</font></a></span>
  302. </div>
  303.  
  304. <div class="whole">
  305. <span class="name">Trolltag:</span> <Br />
  306. <span class="answer">indistinctElectronica</span>
  307. </div>
  308.  
  309. <div class="whole">
  310. <span class="name">Quirk:</span> <Br />
  311. <span class="answer">o -> .O.</span>
  312. </div>
  313.  
  314. <div class="whole">
  315. <span class="name">Symbol:</span> <Br />
  316. <span class="answer">New Moon Glyph</span>
  317. </div>
  318.  
  319. <div class="whole">
  320. <span class="name">Lusus:</span> <Br />
  321. <span class="answer">Snake</span>
  322. </div>
  323.  
  324. <div class="whole">
  325. <span class="name">Strife Specibus:</span> <Br />
  326. <span class="answer">microphoneKind</span>
  327. </div>
  328.  
  329. <div class="whole">
  330. <span class="name">Modus:</span> <Br />
  331. <span class="answer"><a title="Draw constellation, receive item."><font color="#eeeeee">Star chart</font></a></span>
  332. </div>
  333.  
  334. </div><!--right-->
  335.  
  336. <!-- If you want to add more questions, copy <span class="question">likes?: </span> and replace likes?: with your own. -->
  337.  
  338. <span class="question">Profile: </span><p>
  339.  
  340. <!--- YOUR ANSWER -->
  341.  
  342. At only eight and a half sweeps, Liiore has had somewhat of a turbulent life. Due to his good looks, impeccable singing voice, and unique blood colour, he was pressured by his <a href="http://raitrolling.tumblr.com/velour">best friend at the time</a> into becoming a pop idol. Given his shy and awkward personality, he was reluctant, but pursued it out of not wanting to upset his friend and got scouted. Eventually, the idol life and the constant hounding by the paparazzi became too much for him, so he made a deal with <a href="http://raitrolling.tumblr.com/dismas">an informant</a> to purge all information of pop sensation Ocean Star off the internet and went into hiding. Nowaways, Liiore enjoys the quiet anonymous lifestyle by playing MMOs and simulation games, collecting vintage puppets and toys, and staying as far away from celebrities as possible. While he still enjoys singing, he refuses to do it anymore out of fear of getting recognised.
  343.  
  344. <p></p><span class="question">Relationships: </span><p>
  345.  
  346. <!--- YOUR ANSWER --->
  347. <img src="https://68.media.tumblr.com/5495d5d942a163be5cc3c516bc0036fa/tumblr_inline_o5rhx2mGTs1rhbaot_500.gif" alt="image"><img src="https://68.media.tumblr.com/19760a3641d74dd37fb89e4c9bb56031/tumblr_inline_njkvgkZtc41t9w9p6.gif" alt="image"><p></p>
  348. <p></p><img src="https://68.media.tumblr.com/5495d5d942a163be5cc3c516bc0036fa/tumblr_inline_o5rhx2mGTs1rhbaot_500.gif" alt="image"><img src="https://68.media.tumblr.com/17bf7ed07cb5cff75cf673ab68c747cd/tumblr_inline_mlpu3hD6VF1qz4rgp.gif" alt="image"><p></p>
  349. <p></p><img src="https://68.media.tumblr.com/5495d5d942a163be5cc3c516bc0036fa/tumblr_inline_o5rhx2mGTs1rhbaot_500.gif" alt="image"><img src="https://68.media.tumblr.com/b12a67d68be40571a621216bb9a703ef/tumblr_inline_njkvgpdwbX1t9w9p6.gif" alt="image"><p></p>
  350. <p></p><img src="https://68.media.tumblr.com/5495d5d942a163be5cc3c516bc0036fa/tumblr_inline_o5rhx2mGTs1rhbaot_500.gif" alt="image"><img src="https://68.media.tumblr.com/349b9d5701110c23415ffd3af2f0453b/tumblr_inline_mlpu3rd0oE1qz4rgp.gif" alt="image"><p></p>
  351. <p>
  352. <b><a href="http://raitrolling.tumblr.com/velour">Velour</a> [Neighbour / Former Friend]</b> - He was your closest friend. The two of you are next-door neighbours, and you enjoyed playing dress-up and having silly sing-off battles when you were younger. As he got older, he became more obsessed with becoming famous and earning money, and his pushing you into the pop idol business so he could profit off your fame was the breaking point that ended your friendship. You wish you could confront him again, and apologise for hurting him, but you can’t face him any more. You watch his vlogs occasionally, so at least it seems he’s doing well. (#<i><a href="http://raitrolling.tumblr.com/tagged/counting-stars">counting stars</a></i>)<p>
  353. <b><a href="http://raitrolling.tumblr.com/aiolos">Aiolos Hummel</a> [Neighbour / Friend]</b> - Your neighbour who lives opposite your apartment, and one of your friends. You hang out with him occasionally, mostly just to play video games together, which tends to turn into hours of non-stop Animal Crossing and chill multiplayer games. While he can be rude and has a tendency to do things without thinking, he’s an alright guy. Now that Velour is gone, he’s probably your closest friend. (<i>#<a href="http://raitrolling.tumblr.com/tagged/games-done-quick">games done quick</i></a>)<p>
  354. <b><a href="http://aboxoffantrolls.tumblr.com">Skreia Kraise</a> [Friend / Gaming Buddy]</b> - One of your online friends who you play MMOs with. She plays the offensive support characters while you playing generic warrior characters, though your preoccupation with sidequests and raising ‘useless’ skills instead of combat abilities gets on her nerves. Things have been awkward since one night she snapped at you and you were too afraid of upsetting her so you didn’t log back on for perigees, but you’re back to playing games with her and the rest of your crew again. You always offer her the food you’ve made with your max stats in cooking to try and make up for your previous failures, as well as finding the objects for boring fetch quests so she can reap the rewards without wasting time.<p>
  355. <b><a href="http://raitrolling.tumblr.com/mikiel">Mikiel Giacho</a> [Neighbour]</b> - Another one of your neighbours. He’s the one you hung out with the least, since you were somewhat afraid of him. Some of the stories Velour and Aiolos told you - and not to mention the things you’ve seen him do to Aiolos (though he kind of deserved it) - make you wary of him, and as such you try to avoid him whenever he appears to be in a bad mood. Which, admittedly, is almost all the time.<p>
  356. <b><a href="http://raitrolling.tumblr.com/nancor">Nancor Pharom</a> [Acquaintance / 'Rain Buddy']</b> - A troll who always seemed to be around whenever you went for walks in the rain. As it turns out, he also enjoys the wet weather, and the two of you have become acquainted after a couple friendly chats. He's a very nice troll, and you don't mind his company.<p>
  357. <b><a href="http://raitrolling.tumblr.com/dismas">Dismas Teufel</a> [Acquaintance / Hired Informant]</b> - The informant you hired to purge all information about your Ocean Star idol persona off the internet. In exchange, you revealed all the secrets about the idol industry, along with giving him multiple suitcases full of cash. He may be shady, but he’s been doing his job well so far.
  358.  
  359. <p></p><span class="question">Misc. Information: </span><p>
  360. <ul>
  361. <li>He has heterochromia, with his right eye being a light blue while his left is his blood colour. Usually wears contacts.</li>
  362. <li>His blood colour is considered to be 'unique' due to being brighter and less saturated than other typical jade castes, but does not fall under the mutant category.</li>
  363. <li>As he never revealed his real name or symbol as Ocean Star, and altered the shape of his horns, he's not immediately recognisable as the former pop star.
  364. </ul>
  365. </div> <!-- info -->
  366.  
  367. </div><!--content-->
  368.  
  369. <!-- This is where you upload your picture on the top.
  370. I recommend that you use a render and only adjust these things below between top:-30px through width:370px and nothing else. -->
  371.  
  372. <div id="side_image">
  373. <img src="http://68.media.tumblr.com/93ca71a1b019a6678e44ffc5f6b1037d/tumblr_inline_o5rm1ypxnI1rhbaot_540.png" style="
  374. height:auto;
  375. left:50%;
  376. position:fixed;
  377.  
  378. top:76px;
  379. margin-left:-290px;
  380. width:31px;
  381.  
  382. "/></div>
  383.  
  384.  
  385. </body>
  386. </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!