HellaBlind

friederica

Jan 28th, 2020 (edited)
181
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.63 KB | None | 0 0
  1. <!--
  2. theme pack #1 - about me by Sabina (briqhter/cutiephil)
  3. please do not remove the credit
  4. -->
  5.  
  6. <!DOCTYPE html>
  7. <html lang="en">
  8.  
  9. <head>
  10.  
  11. <style type="text/css">
  12.  
  13. /* fonts */
  14. @font-face { font-family:"bb"; src: url('https://dl.dropboxusercontent.com/s/mw5tqnd88mxflxw/Saniretro.ttf');}
  15.  
  16. /* basics1 */
  17. body {
  18. font-family:calibri;
  19. font-size:11px;
  20. line-height:12px;
  21. color:#888;
  22. background-color:#c80e1c;
  23. background-image:url(); /* replace this with your background image */
  24. background-attachment:fixed;
  25. background-repeat:repeat;
  26. }
  27.  
  28. a:link, a:active, a:visited{
  29. color:#888;
  30. text-decoration:none;
  31. }
  32.  
  33. a:hover {
  34. color: #888;
  35. }
  36.  
  37. img {
  38. border:0;
  39. max-width:100%;
  40. }
  41.  
  42. ul {
  43. list-style: square;
  44. margin-left:0px;
  45. margin-top:2px;
  46. padding-top:5px;
  47. font-size:10px;
  48. line-height:12px;
  49. font-family:calibri;
  50. letter-spacing:1px;
  51. border-top:1px solid #ddd;
  52. }
  53.  
  54. li {
  55. margin-left:-10px;
  56. }
  57.  
  58. .title {
  59. margin-top:10px;
  60. font-size:11px;
  61. line-height:12px;
  62. font-family:calibri;
  63. letter-spacing:1px;
  64. text-transform:uppercase;
  65. font-style:italic;
  66. font-weight:bold;
  67. text-align:center;
  68. }
  69.  
  70. #wrap{
  71. margin:auto;
  72. position: absolute;
  73. overflow:hidden;
  74. width:880px;
  75. height:600px;
  76. top: 0; left: 0; bottom: 0; right: 0;
  77. }
  78.  
  79. ::-webkit-scrollbar {width: 2px; height: 4px; background: #f3e2d7; }
  80. ::-webkit-scrollbar-thumb { background-color: #f0b484; -webkit-border-radius: 1ex; }
  81.  
  82. /* basics2 */
  83.  
  84. #content {
  85. z-index:10;
  86. position:fixed;
  87. overflow:hidden;
  88. margin-top:0px;
  89. margin-left:420px;
  90. width:440px;
  91. height:600px;
  92. background-color:#c80e1c;
  93. background-image:url(); /* replace this with your background image */
  94. background-attachment:fixed;
  95. background-repeat:repeat;
  96. }
  97.  
  98. #sidebar {
  99. position:fixed;
  100. margin-left:0px;
  101. margin-top:0px;
  102. width:430px;
  103. height:600px;
  104. background:#c80e1c;
  105. }
  106.  
  107. #sidebar img{
  108. height:600px;
  109. width:400px;
  110. overflow:hidden;
  111. }
  112.  
  113. #backbar {
  114. z-index:1;
  115. position:fixed;
  116. margin-left:440px;
  117. margin-top:0px;
  118. width:440px;
  119. height:600px;
  120. background:#c80e1c;
  121. }
  122.  
  123. #backbar img{
  124. height:600px;
  125. width:440px;
  126. overflow:hidden;
  127. }
  128.  
  129. #maintitle{
  130. z-index:3;
  131. position:fixed;
  132. margin-top:10px;
  133. margin-left:12px;
  134. width:400px;
  135. color:#999;
  136. font-family:bb;
  137. font-size:40px;
  138. line-height:30px;
  139. text-transform:uppercase;
  140. text-align:right;
  141. }
  142.  
  143. #maintitleshadow{
  144. z-index:2;
  145. position:fixed;
  146. margin-top:8px;
  147. margin-left:15px;
  148. width:400px;
  149. color:#c80e1c;
  150. font-family:bb;
  151. font-size:40px;
  152. line-height:30px;
  153. text-transform:uppercase;
  154. text-align:right;
  155. }
  156.  
  157. #box1 {
  158. z-index:4;
  159. position:fixed;
  160. margin-top:35px;
  161. margin-left:0px;
  162. width:410px;
  163. height:auto;
  164. padding:10px;
  165. }
  166.  
  167. #selca {
  168. position:fixed;
  169. margin-top:10px;
  170. margin-left:315px;
  171. background:#c80e1c;
  172. padding:8px;
  173. border:1px solid #ddd;
  174. }
  175.  
  176. #selca img {
  177. width:80px;
  178. height:100px;
  179. }
  180.  
  181. #profile1 {
  182. position:fixed;
  183. margin-top:10px;
  184. margin-left:30px;
  185. width:270px;
  186. height:100px;
  187. padding:0px;
  188. color:#888;
  189. font-size:11px;
  190. line-height:16px;
  191. text-align:right;
  192. font-family:consolas;
  193. text-transform:uppercase;
  194. letter-spacing:1px;
  195. }
  196.  
  197. #box2 {
  198. position:fixed;
  199. margin-top:190px;
  200. margin-left:0px;
  201. width:200px;
  202. height:170px;
  203. background:#c80e1c;
  204. font-size:11px;
  205. line-height:15px;
  206. padding:10px;
  207. border:1px solid #999;
  208. border-left:0px;
  209. border-right:0px;
  210. }
  211.  
  212. #desctitle{
  213. z-index:3;
  214. position:fixed;
  215. margin-top:150px;
  216. margin-left:12px;
  217. width:190px;
  218. color:#999;
  219. font-family:bb;
  220. font-size:30px;
  221. line-height:25px;
  222. text-transform:uppercase;
  223. text-align:center;
  224. }
  225.  
  226. #desctitleshadow{
  227. z-index:2;
  228. position:fixed;
  229. margin-top:148px;
  230. margin-left:14px;
  231. width:190px;
  232. color:#c80e1c;
  233. font-family:bb;
  234. font-size:30px;
  235. line-height:25px;
  236. text-transform:uppercase;
  237. text-align:right;
  238. }
  239.  
  240. #box3 {
  241. position:fixed;
  242. margin-top:190px;
  243. margin-left:220px;
  244. width:199px;
  245. height:272px;
  246. background:#c80e1c;
  247. font-size:11px;
  248. line-height:15px;
  249. padding:10px;
  250. padding-top:40px;
  251. border:1px solid #999;
  252. border-right:0px;
  253. }
  254.  
  255. #likestitle{
  256. z-index:3;
  257. position:fixed;
  258. margin-top:-30px;
  259. margin-left:0px;
  260. width:190px;
  261. color:#999;
  262. font-family:bb;
  263. font-size:30px;
  264. line-height:25px;
  265. text-transform:uppercase;
  266. text-align:left;
  267. }
  268.  
  269. #likestitleshadow{
  270. z-index:2;
  271. position:fixed;
  272. margin-top:-32px;
  273. margin-left:2px;
  274. width:190px;
  275. color:#c80e1c;
  276. font-family:bb;
  277. font-size:30px;
  278. line-height:25px;
  279. text-transform:uppercase;
  280. text-align:left;
  281. }
  282.  
  283. #box4 {
  284. position:fixed;
  285. margin-top:382px;
  286. margin-left:-5px;
  287. width:200px;
  288. height:111px;
  289. background:#c80e1c;
  290. font-size:11px;
  291. line-height:15px;
  292. padding:10px;
  293. border-bottom:1px solid #999;
  294. }
  295.  
  296. #box4 img{
  297. width:200px;
  298. height:111px;
  299. }
  300.  
  301. #btitle {
  302. z-index:3;
  303. position:fixed;
  304. margin-top:540px;
  305. margin-left:12px;
  306. width:440px;
  307. height:100px;
  308. color:#999;
  309. font-family:bb;
  310. font-size:80px;
  311. line-height:60px;
  312. text-transform:uppercase;
  313. }
  314.  
  315. #btitleshadow{
  316. z-index:2;
  317. position:fixed;
  318. margin-top:537px;
  319. margin-left:16px;
  320. width:440px;
  321. height:100px;
  322. color:#c80e1c;
  323. font-family:bb;
  324. font-size:80px;
  325. line-height:60px;
  326. text-transform:uppercase;
  327. }
  328.  
  329. #credit {
  330. z-index: 4783;
  331. position:fixed;
  332. bottom:10px;
  333. right:10px;
  334. background:#c80e1c;
  335. border: 1px solid #eee;
  336. padding: 3px;
  337. font-family: times;
  338. font-size: 10px;
  339. line-height: 15px;
  340. font-style:italic;
  341. transition: all 0.6s ease-out;
  342. -o-transition-transition: all 0.4s ease-out;
  343. -webkit-transition: all 0.4s ease-out;
  344. -moz-transition: all 0.4s ease-out;
  345. }
  346.  
  347. #credit a{
  348. color:#bbb;
  349. }
  350.  
  351. #credit:hover{
  352. opacity: 2;
  353. transition: all 0.6s ease-out;
  354. -o-transition-transition: all 0.4s ease-out;
  355. -webkit-transition: all 0.4s ease-out;
  356. -moz-transition: all 0.4s ease-out;
  357. }
  358.  
  359. {CustomCSS}
  360.  
  361. </style>
  362.  
  363. <title></title>
  364. <link rel="shortcut icon" href="{Favicon}" />
  365.  
  366. </head>
  367.  
  368. <body>
  369.  
  370. <div id="credit"><a target="_blank" href="http://cutiephil.tumblr.com">CP</a></div>
  371.  
  372. <div id="wrap">
  373.  
  374. <div id="sidebar">
  375. <img src="https://cdn.discordapp.com/attachments/526577565004070952/572178737668423720/bb12fb75b95434984bc7dde44346f906.png"><!--put the url of the image you want here-->
  376. </div>
  377. <div id="backbar">
  378. <img src=""><!--put the url of the image you want here-->
  379. </div><!--sidebar-->
  380.  
  381. <div id="content">
  382.  
  383. <!-----change (//profile) to anything you want as the first title------>
  384. <div id="maintitle">//The Matriarch</div>
  385. <div id="maintitleshadow">//The Matriarch</div>
  386.  
  387. <div id="box1">
  388.  
  389. <!-----replace the url below with a picture of yourself or whatever------>
  390. <div id="selca"><img src="https://media.giphy.com/media/pbdQ33mAlhqdG/giphy.gif"></div>
  391. <div id="profile1">
  392.  
  393. <!-----change the info below to your own------>
  394. <p><br>
  395. <b>name:</b> Freiderica</br>
  396. <b>Species:</b> Milotic<br>
  397. <b>age:</b> Appears 32</br>
  398. <b>Gender:</b> Female</br>
  399. <b>paramour:</b> Single</br>
  400.  
  401.  
  402. </div>
  403. </div>
  404.  
  405. <div id="box2">
  406.  
  407. <!-----change (description) to anything you want as the description title------>
  408. <div id="desctitle"></div>
  409. <div id="desctitleshadow"></div>
  410.  
  411. <!-----replace this with a description about yourself or quote you like or whatever------><p>
  412. Lady Friederica von Gelassenheit. Third Matriarch of her clan, brilliant strategist and ruthless political negotiator. Loyal to herself, her family, and Arceus in that order. Has no desire to consort with the rabble of this world; they are nothing more than pawns in the grand design. If your presence is not requested, do not bother with any attempts to socialize. Why would one need to remember the names of the worthless?
  413. </div>
  414.  
  415. <div id="box3">
  416. <div id="likestitle">statistics</div>
  417. <div id="likestitleshadow">statistics</div>
  418.  
  419. <!-----replace this with whatever category------>
  420. <div class="title">Pokémon</div>
  421.  
  422. <!-----add your favourites with the (li) tag------>
  423. <ul>
  424. <li><u>Ability</u>: Competitive</li>
  425. <li><u>Carrying</u>: Mystic Water</li>
  426. <li><u>Nature</u>: Calm</li>
  427. <li>Brine</li>
  428. <li>Surf</li>
  429. <li>Icy Wind</li>
  430. <li>Bind</li>
  431. <li>Hypnosis</li>
  432. <li>Dragon Breath</li>
  433. </ul>
  434.  
  435. <!-----do the same here------>
  436. <div class="title">Personality</div>
  437. <ul>
  438. <li>Proud.</li>
  439. <li>Logical.</li>
  440. <li>Perfectionist.</li>
  441. <li>Demands obedience.</li>
  442. <li>Protective of her kin.</li>
  443. </ul>
  444.  
  445. <!-----and here------>
  446. <div class="title">Encounters</div>
  447. <ul>
  448. <li> <a target="_blank" href="https://roleplay.chat/profile.php?user=bach">My fondest creation.</a></li>
  449. </ul>
  450.  
  451. </div>
  452.  
  453. <div id="box4">
  454.  
  455. <!-----replace the url below with something you like------>
  456. <img src="https://66.media.tumblr.com/d333d47667cc22bc21906bd01adb76c6/tumblr_omvk3wwXyK1sgwm5lo6_400.gif">
  457. </div>
  458.  
  459. <!-----change (about me//) to anything you want as the main title------>
  460. <div id="btitle"></div>
  461. <div id="btitleshadow"></div>
  462.  
  463. </div><!--content-->
  464.  
  465. </div><!--wrap-->
  466. </body>
  467.  
  468. </html>
Add Comment
Please, Sign In to add comment