Advertisement
owltrash

ellana's newest profile (wip)

Dec 7th, 2018
118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.79 KB | None | 0 0
  1. <style>
  2. @import url('https://fonts.googleapis.com/css?family=Cardo|Cinzel+Decorative|IM+Fell+English+SC|Italianno|Jim+Nightshade|Source+Serif+Pro|Zeyada');
  3. @import url('https://fonts.googleapis.com/css?family=Georgia');
  4.  
  5.  
  6. .pfor{ display:none; background-color:transparent; }
  7. body {background:url('') top left fixed repeat;
  8. background-color:#fff;
  9. overflow:hidden; }
  10.  
  11. #profile{ border:0px; background-color:transparent; }
  12. *{cursor:url('https://i.imgur.com/8QmAMfq.png'), default; }
  13.  
  14. ::-webkit-scrollbar { width:5px; height:0px;
  15. background:; }
  16. ::-webkit-scrollbar-thumb { background-color:#dbd3d2;
  17. border:1px solid #dbd3d2;
  18. -webkit-border-radius:10px; border-radius:10px; }
  19.  
  20.  
  21. body{
  22. background-color: transparent;
  23. background-position:right top; background-image: url("");
  24. background-repeat: repeat; background-attachment:fixed; background-size: repeat}
  25.  
  26.  
  27. #name{
  28. height:100px; width:400px;
  29. top:-15px; left:45px;
  30. background-color:#;
  31. color:#d2c4c1;
  32. font-family:'italianno', cursive;
  33. font-size:65px;
  34. letter-spacing:1px;
  35. text-transform:; text-align:justify;
  36. margin: 0px 5px 0px; padding:px;
  37. box-shadow: inset 0px 0px 20px #,
  38. 0px 0px 20px #;
  39. position:absolute;
  40. float:left; overflow:auto;
  41. opacity:.0; transition: 1s;
  42. filter: blur(0px); opacity:1.0; transition: 1s; }
  43.  
  44. #titles{ position:absolute;
  45. width:400px; height:43px;
  46. left:40px; top:35px;
  47. background-color:transparent;
  48. color:#ccbcb8;
  49. font-family:'IM Fell English SC';
  50. font-size:11px;
  51. line-height:15px;
  52. letter-spacing:1px;
  53. text-transform:uppercase; text-align:justify;
  54. padding:13px; float:left;
  55. overflow:auto; opacity:.0; transition: 1s;
  56. filter: blur(0px); opacity:1.0; transition: 1s; }
  57.  
  58.  
  59. #opening{ position:fixed; width:100%; height:100%; left:150px; bottom:150px; }
  60.  
  61. #opening-img { position:absolute;
  62. background-image:url('https://i.imgur.com/w5zFJ4E.png');
  63. background-position:0% 20%; background-size:443px;
  64. background-attachment: absolute;
  65. background-repeat:no-repeat;
  66. height:617px; width:443px;
  67. bottom:-200px; left:25px;
  68. filter: blur(0px); opacity:1.0; transition: 1s; }
  69.  
  70. body:hover #opening-img {filter: blur(10px); opacity:.0; transition: 1.5s;}
  71.  
  72. #opening-img2 { position:absolute;
  73. background-image:url('https://i.imgur.com/6dyLWnV.png');
  74. background-position:0% 20%; background-size:430px;
  75. background-attachment: absolute;
  76. background-repeat:no-repeat;
  77. height:617px; width:430px;
  78. bottom:-100px; left:25px;
  79. filter: blur(1px); opacity:1.0; transition: 1s;
  80. animation: bounce 3.25s infinite;
  81. -o-animation: bounce 3.25s infinite;
  82. -moz-animation:bounce 3.25s infinite;
  83. -webkit-animation: bounce 3.25s infinite;
  84. -webkit-transition: all 0.3s ease-out;
  85. transition: all 0.8s ease-out;
  86. }
  87. @keyframes bounce{
  88. 0% {top: 30px;}
  89. 50% {top: 50px;}
  90. 100% {top: 30px;}
  91. }
  92. @-webkit-keyframes bounce {
  93. 0% {top: 30px;}
  94. 50% {top: 50px;}
  95. 100% {top: 30px;}
  96. }
  97.  
  98. body:hover #opening-img2 {filter: blur(10px); opacity:.0; transition: 1.5s;}
  99.  
  100.  
  101. #ooc{ position:absolute;
  102. width:400px; height:43px;
  103. left:40px; bottom:80px;
  104. background-color:transparent;
  105. color:#ccbcb8;
  106. font-family:'IM Fell English SC';
  107. font-size:10px;
  108. line-height:15px;
  109. letter-spacing:1px;
  110. text-transform:uppercase; text-align:justify;
  111. padding:13px; float:left;
  112. overflow:auto; opacity:.0; transition: 1s;
  113. filter: blur(0px); opacity:1.0; transition: 1s; }
  114.  
  115. body:hover #music { opacity:1.0; transition-delay: 1.5s; }
  116.  
  117.  
  118. #container{ position:absolute; left:-105px; bottom:110px; opacity:.0; transition: 1s; }
  119. body:hover #container { filter: blur(0px); opacity:1.0; transition-delay: 1s; }
  120.  
  121.  
  122. #portrait { position:absolute;
  123. background-image:url('https://i.imgur.com/FgGPbSo.pngg');
  124. background-position:0% 20%; background-size:350px;
  125. background-attachment: absolute;
  126. background-repeat:no-repeat;
  127. box-shadow: inset 0px 0px 20px #fff,
  128. 0px 0px 20px #fff;
  129. height:478px; width:350px;
  130. bottom:-50px; left:225px;
  131. -webkit-filter: grayscale(5%);
  132. filter: grayscale(5%);}
  133. body:hover #stats { opacity:1.0; transition-delay:1s; }
  134.  
  135.  
  136. #elf{ position:absolute;
  137. width:190px; height:50px;
  138. left:580px; top:-274px;
  139. background-color:transparent;
  140. color:#ccbcb8;
  141. font-family:'IM Fell English SC';
  142. font-size:22px;
  143. letter-spacing:2px;
  144. text-transform:; text-align:center;
  145. padding:13px; float:left;
  146. overflow:auto; opacity:.0; transition: 1s; }
  147. body:hover #elf { opacity:1.0; transition-delay:1s; }
  148.  
  149. #stats{ position:absolute;
  150. width:190px; height:170px;
  151. left:580px; top:-235px;
  152. background-color:transparent;
  153. color:#a08f8d;
  154. font-family:'cardo';
  155. font-size:14px;
  156. line-height:23px;
  157. letter-spacing:0px;
  158. text-transform:; text-align:justify;
  159. padding:13px; float:left;
  160. border-top:1px dotted #a08f8d;
  161. overflow:auto; opacity:.0; transition: 1s; }
  162. body:hover #stats { opacity:1.0; transition-delay:1s; }
  163.  
  164.  
  165. #story{ position:absolute;
  166. width:190px; height:50px;
  167. left:534px; top:-64px;
  168. background-color:transparent;
  169. color:#ccbcb8;
  170. font-family:'IM Fell English SC';
  171. font-size:18px;
  172. letter-spacing:2px;
  173. text-transform:; text-align:center;
  174. padding:13px; float:left;
  175. overflow:auto; opacity:.0; transition: 1s; }
  176. body:hover #story { opacity:1.0; transition-delay:1s; }
  177.  
  178.  
  179. #blurb{ position:absolute;
  180. width:190px; height:200px;
  181. left:580px; top:-29px;
  182. background-color:transparent;
  183. color:#a08f8d;
  184. font-family:'cardo';
  185. font-size:14px;
  186. line-height:18px;
  187. letter-spacing:0px;
  188. text-transform:; text-align:justify;
  189. padding:13px; float:left;
  190. border-top:1px dotted #a08f8d;
  191. border-bottom:1px dotted #a08f8d;
  192. overflow:auto; opacity:.0; transition: 1s; }
  193. body:hover #blurb { opacity:1.0; transition-delay:1s; }
  194.  
  195.  
  196. #headcanons{ position:absolute;
  197. width:545px; height:160px;
  198. left:207px; bottom:-236px;
  199. background-color:transparent;
  200. color:#a08f8d;
  201. font-family:'cardo';
  202. font-size:12px;
  203. line-height:18px;
  204. letter-spacing:1px;
  205. text-transform:; text-align:justify;
  206. padding:13px; float:left;
  207. border-top:1px dotted #a08f8d;
  208. overflow:auto; opacity:.0; transition: 1s; }
  209. body:hover #headcanons { opacity:1.0; transition-delay:1s; }
  210.  
  211. #headcanons::first-letter{
  212. background-color:#ccbcb8;
  213. color:#fff;
  214. font-family:'cinzel decorative', cursive;
  215. font-size:35px;
  216. line-height:35px;
  217. letter-spacing:1px;
  218. text-transform:uppercase;
  219. text-shadow: 1px 0px 0px #a08f8d,
  220. 0px 1px 0px #a08f8d,
  221. -1px 0px 0px #a08f8d,
  222. 0px -1px 0px #a08f8d;
  223. margin: 0px 5px 0px; padding:10px;
  224. box-shadow: inset 0px 0px 20px #a08f8d,
  225. 0px 0px 20px #a08f8d;
  226. float:left; }
  227.  
  228. #people{ position:absolute;
  229. width:190px; height:50px;
  230. left:575px; bottom:-127px;
  231. background-color:transparent;
  232. color:#a08f8d;
  233. font-family:'cardo';
  234. font-size:15px;
  235. line-height:18px;
  236. letter-spacing:1px;
  237. text-transform:; text-align:justify;
  238. padding:13px; float:left;
  239. overflow:auto; opacity:.0; transition: 1s; }
  240. body:hover #people { opacity:1.0; transition-delay:1s; }
  241.  
  242.  
  243. b{ color:#a08f8d;
  244. font-family:'teko';
  245. font-size:12px;
  246. letter-spacing:3px;
  247. line-height:18px;
  248. text-transform:uppercase;
  249. text-align:center;
  250. }
  251.  
  252. s{ color:#ccbcb8; }
  253.  
  254. a {color:#a08f8d;
  255. letter-spacing:1px;
  256. line-height:18px;
  257. text-decoration:none;
  258. text-transform:;
  259. padding:1px; display:inline-block; }
  260. a:hover {color:#a08f8d;
  261. text-shadow: 0px -4px 3px #dbd3d2,
  262. 0px 4px 3px #dbd3d2,
  263. 0px 2px 2px #815761,
  264. 0px -2px 2px #815761;
  265. text-decoration: none;
  266. transition: 1.2s;
  267. }
  268.  
  269. a[data-tooltip] { position: relative; }
  270. a[data-tooltip]::before,
  271. a[data-tooltip]::after { position: absolute;
  272. display: none;
  273. opacity: .9; }
  274. a[data-tooltip]::before { content: attr(data-tooltip);
  275. background: #ccbcb8;
  276. color: #a08f8d;
  277. font-family:'teko'; font-size:14px;
  278. letter-spacing:1px; padding:2px;
  279. border-radius: 5px; width:65px;
  280. text-decoration: none;
  281. box-shadow: 1px 0px 0px #d2cac9,
  282. 0px 1px 0px #d2cac9,
  283. -1px 0px 0px #d2cac9,
  284. 0px -1px 0px #d2cac9; }
  285. a[data-tooltip]::after { width:0; height:0;
  286. border: 6px solid transparent;
  287. content: ''; }
  288. a[data-tooltip]:hover::before,
  289. a[data-tooltip]:hover::after {
  290. display: block; }
  291. a[data-tooltip][data-placement="bottom"]::before {
  292. top: 100%; left: 0;
  293. margin-top: 10px; }
  294. a[data-tooltip][data-placement="bottom"]::after {
  295. border-bottom-color: #ccbcb8;
  296. border-top: none;
  297. top: 100%;
  298. left: 10px;
  299. margin-top: 4px; }
  300.  
  301. u { position:absolute;
  302. background-color:transparent;
  303. color:#a08f8d;
  304. font-family:'IM Fell English SC';
  305. font-size:10px;
  306. line-height:15px;
  307. letter-spacing:1px;
  308. border-bottom:1px dotted #bbb;
  309. text-decoration:none;
  310. text-transform:uppercase; text-align:justify;
  311. padding:2px; }
  312.  
  313. </style>
  314. <body>
  315.  
  316. <div id="opening">
  317. <div id="opening-img">
  318. <div id="opening-img2"></div>
  319.  
  320. <div id="name">
  321. <center> Ellana Lavellan </center>
  322. </div>
  323. <div id="titles">
  324. <center>former inquisitor. holy stump of andraste. <br> dragon age: inquisition.</center>
  325. </div>
  326. <div id="ooc">
  327. <center> tap or hover for full profile. </center>
  328. </div>
  329.  
  330. </div>
  331.  
  332.  
  333. <div id="container">
  334.  
  335. <div id="portrait">
  336. </div>
  337.  
  338. <div id="music-player">
  339. <div style="margin-top:4px;">
  340. <audio controls style="opacity:1; width:150px; margin-bottom:91px; margin-left:365px;" loop="">
  341. <source src="https://dl.dropboxusercontent.com/s/n9ypdx293py3me6/DAI%20Tavern%20Songs.mp3?dl=0">
  342. </audio>
  343. </div>
  344. </div>
  345.  
  346.  
  347. <div id="elf">THE ELF</div>
  348. <div id="stats">
  349.  
  350. <u>full name:</u> <font style="float:right;">Ellana Lavellan</font><br>
  351. <u>age:</u> <font style="float:right;">Early 30s</font><br>
  352. <u>height:</u> <font style="float:right;">5’04”</font><br>
  353. <u>class:</u> <font style="float:right;">Shapeshifter</font><br>
  354. <u>affiliation:</u> <font style="float:right;"><s><i>Inquisition</i></s></font><br>
  355. <font style="float:right;">Friends of Red Jenny</font><br>
  356. <font style="float:right;">Clan Lavellan</font>
  357. </div>
  358.  
  359. <div id="story">HISTORY</div>
  360.  
  361. <div id="blurb">
  362.  
  363. Once the First of her Clan, Ellana retains a profound connection to the earth and all that depends on it — one that enhances her senses; reveals paths where most see none; and serves as an anchor for an otherwise unpredictable nature.
  364. <br> <font color="white">❧</font> At the Well of Sorrows, she told Morrigan to fuck off and drank from the Well herself.
  365.  
  366. </div>
  367. <div id="headcanons">
  368. <span style="font-family: 'IM Fell English SC'; font-size:18px; color:#a08f8d; letter-spacing:1px;">THE STORY SO FAR...</span>
  369. <br><br>
  370. <center><i>Under Construction</i></center>
  371.  
  372. </div>
  373. <div id="people">
  374. <center>❦</center>
  375.  
  376. </div>
  377.  
  378. </div>
  379. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement