Advertisement
wilderanima

ᴛʜᴀᴛ ᴡᴀs ᴛʜᴇɴ, ᴛʜɪs ɪs ɴᴏᴡ.

Nov 9th, 2024 (edited)
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.06 KB | None | 0 0
  1. <style>
  2.  
  3.  @import url('https://fonts.googleapis.com/css2?family=Economica:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  4.  
  5.  @font-face {
  6.  font-family: "inversionz";
  7.  src: url(https://dl.dropboxusercontent.com/scl/fi/uo349mvvs40gbcdzsgjw4/Inversionz-Unboxed.otf?rlkey=u7mtauz9eooekhwnd53rg5jde&st=7qmg0nws&dl=0);}
  8.  
  9. body {cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_1280.png), auto;
  10.  background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png"); background-color: #000;}
  11.  
  12. ::-webkit-scrollbar {
  13. display: none;}
  14.  
  15. .wilder {
  16. position: fixed;
  17. bottom: 0px;
  18. right: 10px;
  19. z-index: 999999999;
  20. }
  21.  
  22. .container {
  23. position: fixed;
  24. margin: auto;
  25. top: 0px;
  26. bottom: 0px;
  27. left: 0px;
  28. right: 0px;
  29. height: 350px;
  30. width: 1250px;
  31. background-color: #000;}
  32.  
  33. .bar1 {
  34. position: fixed;
  35. margin: auto;
  36. top: -375px;
  37. bottom: 0px;
  38. left: 0px;
  39. right: 0px;
  40. height: 15px;
  41. width: 1250px;
  42. background-color: #000;
  43. z-index: 99999;}
  44.  
  45. .bar2 {
  46. position: fixed;
  47. margin: auto;
  48. top: 375px;
  49. bottom: 0px;
  50. left: 0px;
  51. right: 0px;
  52. height: 15px;
  53. width: 1250px;
  54. background-color: #000;
  55. z-index: 99999;}
  56.  
  57. .title {
  58.  position: absolute;
  59.  margin: auto;
  60.  top: -75px;
  61.  bottom: 0px;
  62.  left: 320px;
  63.  right: 0px;
  64.  width: 5000px;
  65.  font-family: inversionz;
  66.  font-size: 75px;
  67.  letter-spacing: 0px;
  68.  color: #24453D;
  69.  filter:drop-shadow(0px 0px 3px #24453D);
  70.  opacity: 1;
  71.  z-index: 999;}
  72.  
  73. .image1 {
  74.  position: absolute;
  75.  top: 0px;
  76.  left: 0px;
  77.  background-image:url(https://placehold.co/300x350.png); /* left */
  78.  background-repeat:no-repeat;
  79.  width:300px;
  80.  height:350px;
  81.  background-size: cover;
  82.  background-position: center;
  83.  z-index: 9;
  84.  border: 0px solid #000;
  85.  opacity:0.9; filter: grayscale(0%);}
  86.  
  87. .image2 {
  88.  position: absolute;
  89.  top: 0px;
  90.  right: 0px;
  91.  background-image:url(https://placehold.co/300x350.png); /* left */
  92.  background-repeat:no-repeat;
  93.  width:300px;
  94.  height:350px;
  95.  background-size: cover;
  96.  background-position: center;
  97.  z-index: 9;
  98.  border: 0px solid #000;
  99.  opacity:0.9; filter: grayscale(0%);}
  100.  
  101.  .words1 {
  102.  position: absolute;
  103.  margin: auto;
  104.  top: 0px;
  105.  bottom: 0px;
  106.  left: 305px;
  107.  height: 335px;
  108.  width: 200px;
  109.  padding: 5px;
  110.  text-align: left;
  111.  font-family: economica;
  112.  font-size: 13px;
  113.  overflow: auto;
  114.  text-ident: 10px;
  115.  color: #fefefe;
  116.  background-color: #000;
  117.  border-outline: 1px solid #000;
  118.  z-index: 999;}
  119.  
  120.  .words2 {
  121.  position: absolute;
  122.  margin: auto;
  123.  top: 0px;
  124.  left: 520px;
  125.  bottom: 0px;
  126.  height: 335px;
  127.  width: 200px;
  128.  padding: 5px;
  129.  text-align: left;
  130.  font-family: economica;
  131.  font-size: 13px;
  132.  overflow: auto;
  133.  text-ident: 10px;
  134.  color: #fefefe;
  135.  background-color: #000;
  136.  border-outline: 1px solid #000;
  137.  z-index: 999;}
  138.  
  139. .put {
  140.  position: absolute;
  141.  top: 0px;
  142.  left: auto;
  143.  margin: auto;
  144.  overflow: auto;
  145.  overflow-x: hidden;
  146.  opacity: 1;
  147.  height: 335px;
  148.  width: 200px;
  149.  padding: 0px;
  150.  font-size: 1px;
  151.  z-index: 999;}
  152.  
  153.  p.td {text-align: right; font-family:economica; margin-left: -10; font-size: 13px; line-height: 15px; color: #fff; }
  154.  
  155. td {
  156.  text-align: left;
  157.  line-height: 20px;}
  158.  
  159.  .words3 {
  160.  position: absolute;
  161.  margin: auto;
  162.  top: 140px;
  163.  left: 735px;
  164.  height: 197px;
  165.  width: 200px;
  166.  padding: 5px;
  167.  text-align: left;
  168.  font-family: economica;
  169.  font-size: 13px;
  170.  overflow: auto;
  171.  text-ident: 10px;
  172.  color: #fefefe;
  173.  background-color: #000;
  174.  border-outline: 1px solid #000;
  175.  z-index: 999;}
  176.  
  177.  b { letter-spacing: 0px; font-family: economica; color: #24453D; font-weight: bold; font-size:14px; text-transform: uppercase; filter:drop-shadow(0px 0px 3px #24453D);}
  178.  
  179.  i { letter-spacing: 0px; font-family: economica; color: #DDD7DD; font-weight: bold; font-size:14px; text-transform:; filter:drop-shadow(0px 0px 1px #DDD7DD);}
  180.  
  181.  u { letter-spacing: 0px; font-family: economica; color: #AABAA6; font-weight: bold; font-size:14px; text-transform:; filter:drop-shadow(0px 0px 1px #AABAA6);}
  182.  
  183.  s { letter-spacing: 0px; font-family: economica; color: #5E321F; font-weight: bold; font-size:14px; text-transform:; filter:drop-shadow(0px 0px 1px #5E321F);}
  184.  
  185.  a { font-family: economica; letter-spacing: 0px; color: #89866C; font-size: 14px; font-weight: bold; text-decoration: none; text-transform: uppercase; transition: 0.7s;
  186.  cursor: url(https://i.imgur.com/WIeMSiR.png), auto; filter:drop-shadow(0px 0px 1px #89866C);}
  187.  
  188.  a:hover { font-family: economica; letter-spacing: 0px; color: #C6C6CA; font-size: 14px; font-weight: bold; text-decoration: none; text-transform: uppercase; transition:0.7s; }
  189.  
  190. .contacts {
  191.  position: absolute;
  192.  margin: auto;
  193.  top: 2.5px;
  194.  left: 735px;
  195.  height: 112.5px;
  196.  width: 190px;
  197.  padding: 10px;
  198.  text-align: center;
  199.  font-family: economica;
  200.  font-size: 12px;
  201.  overflow: auto;
  202.  text-ident: 10px;
  203.  color: #fefefe;
  204.  background-color: #000;
  205.  z-index: 99999;}
  206.  
  207. .contact {
  208.  width: 50px;
  209.  height: 50px;
  210.  border: 0px solid #3a3d39;
  211.  display: inline-block;
  212.  transition: all 500ms linear;
  213.  object-fit: cover;
  214.  margin: 0px;
  215.  margin-bottom: 8px;
  216.  padding: 1px;
  217.  background: transparent;
  218.  overflow:hidden; }
  219.  
  220. .contact img {
  221.  width: 50px;
  222.  height: 50px;
  223.  outline: 1px solid #;
  224.  transition: all 500ms linear;
  225.  -webkit-filter: grayscale(100%);
  226.  filter:drop-shadow(2px 2px 2px #24453D);
  227.  opacity: 1; }
  228.  
  229. </style>
  230. <div class="wilder"><a target="_blank" href="https://roleplay.chat/profile.php?user=WILDER" title="code by wilder."><img src="https://i.imgur.com/hCJmFVu.png" width="75px;"></a></div>
  231.  
  232. <div class="container">
  233. <div class="bar1"></div>
  234. <div class="bar2"></div>
  235.  
  236. <div class="image1"></div>
  237. <div class="image2"></div>
  238.  
  239. <div class="title">TITLETITLE</div>
  240.  
  241. <div class="words1">
  242. <div id="01" class="put">
  243.  
  244. <table border="0" cellspacing="-10">
  245.  
  246. <tr>
  247. <td><b>Name</b></td>
  248. <td>
  249. <p class="td">FULL NAME</p>
  250. </td>
  251. </tr><br>
  252.  
  253. <tr>
  254. <td><b>Nicknames</b></td>
  255. <td>
  256. <p class="td">NICKNAMES</p>
  257. </td>
  258. </tr><br>
  259.  
  260. <tr>
  261. <td><b>Socials</b></td>
  262. <td>
  263. <p class="td"><a title="Details.">@SOCIALS</a></p>
  264. </td>
  265. </tr><br>
  266.  
  267. <tr>
  268. <td><b>Birthdate</b></td>
  269. <td>
  270. <p class="td">BIRTHDAY <b>/</b> AGE</p>
  271. </td>
  272. </tr>
  273.  
  274. <tr>
  275. <td><b>Birth Place</b></td>
  276. <td>
  277. <p class="td">BIRTH PLACE</p>
  278. </td>
  279. </tr><br>
  280.  
  281. <tr>
  282. <td><b>Residence</b></td>
  283. <td>
  284. <p class="td">RESIDENCE</p>
  285. </td>
  286. </tr>
  287.  
  288. <tr>
  289. <td><b>Orientation</b></td>
  290. <td>
  291. <p class="td">SEXUALITY</p>
  292. </td>
  293. </tr>
  294.  
  295. <tr>
  296. <td><b>Marital</b></td>
  297. <td>
  298. <p class="td"><a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details.">MARITAL</a></p>
  299. </td>
  300. </tr>
  301.  
  302. <tr>
  303. <td><b>Alumni</b></td>
  304. <td>
  305. <p class="td">HOUSE <b>/</b> YEAR</p>
  306. </td>
  307. </tr>
  308.  
  309. <tr>
  310. <td><b>Wand</b></td>
  311. <td>
  312. <p class="td">WOOD, CORE, LENGTH, FLEXIBILITY</p>
  313. </td>
  314. </tr>
  315.  
  316. <tr>
  317. <td><b>Patronus</b></td>
  318. <td>
  319. <p class="td"><a target="_blank" title="Details.">PATRONUS</a></p>
  320. </td>
  321. </tr>
  322.  
  323. <tr>
  324. <td><b>Boggart</b></td>
  325. <td>
  326. <p class="td">BOGGART</p>
  327. </td>
  328. </tr>
  329.  
  330. <tr>
  331. <td><b>Amortentia</b></td>
  332. <td>
  333. <p class="td">AMORTENTIA</p>
  334. </td>
  335. </tr>
  336.  
  337. <tr>
  338. <td><b>Blood</b></td>
  339. <td>
  340. <p class="td">BLOOD STATUS</p>
  341. </td>
  342. </tr>
  343.  
  344. <tr>
  345. <td><b>Ethnicity</b></td>
  346. <td>
  347. <p class="td">ETHNICITY</p>
  348. </td>
  349. </tr>
  350.  
  351. <tr>
  352. <td><b>Hair</b></td>
  353. <td>
  354. <p class="td">HAIR COLOR</p>
  355. </td>
  356. </tr>
  357.  
  358. <tr>
  359. <td><b>Eyes</b></td>
  360. <td>
  361. <p class="td">EYE COLOR</p>
  362. </td>
  363. </tr>
  364.  
  365. <tr>
  366. <td><b>Height</b></td>
  367. <td>
  368. <p class="td">FT'IN" <b>/</b> CM</p>
  369. </td>
  370. </tr>
  371.  
  372. <tr>
  373. <td><b>Weight</b></td>
  374. <td>
  375. <p class="td">LBS <b>/</b> KG</p>
  376. </td>
  377. </tr>
  378.  
  379. <tr>
  380. <td><b>Physique</b></td>
  381. <td>
  382. <p class="td">Physique</p>
  383. </td>
  384. </tr>
  385.  
  386. <tr>
  387. <td><b>Notable</b></td>
  388. <td>
  389. <p class="td"><a target="_blank" title="Details.">Scars</a> <b>/</b> <a target="_blank" title="Details.">Tattoos</a></p>
  390. </td>
  391. </tr>
  392.  
  393. <tr>
  394. <td><b>Scent</b></td>
  395. <td>
  396. <p class="td"><a title="Details.">SCENT</a></p>
  397. </td>
  398. </tr>
  399.  
  400. </table>
  401. </div>
  402.  
  403. </div>
  404.  
  405. <div class="words2">
  406.  
  407. <strong>❝</strong> Headcanons go here. <br><br>
  408.  
  409. <strong>❝</strong> Headcanons go here. <br><br>
  410.  
  411. <strong>❝</strong> Headcanons go here. <br><br>
  412.  
  413. <strong>❝</strong> Headcanons go here. <br><br>
  414.  
  415. <strong>❝</strong> Headcanons go here. <br><br>
  416.  
  417. </div>
  418.  
  419. <div class="words3">
  420.  
  421. <strong>❝</strong> Code by <a target="_blank" href="https://roleplay.chat/profile.php?user=WILDER">Wilder</a> — <i>don't touch!</i> <br><br>
  422.  
  423.  <strong>❝</strong> Alternate profile for the <a target="_blank" href="https://roleplay.chat/profile.php?user=">Room Name</a> room. Not interested in other settings, so don't ask. <br><br>
  424.  
  425. <strong>❝</strong> <b>OOC ≠ IC.</b> Don't mix them. IC Drama is super cool. OOC drama is definitely not.<br><br>
  426.  
  427.  <strong>❝</strong> Very <b>DM Friendly</b>, but don't spam & don't start with a post. <i>Let's chat first!</i> <br><br>
  428.  
  429.  
  430. <strong>❝</strong> Face Claim is <a target="_blank" href="GALLERY_LINK">Face Claim</a><i>!</i> <br><br>
  431.  
  432. <strong>❝</strong> <b>bold</b> <i>italic</i> <u>underline</u> <s>strike</s> <a>link</a>
  433.  
  434. </div>
  435.  
  436. <div class="contacts"> <!-- put contacts here -->
  437.  
  438. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details." >
  439. <div class="contact">
  440. <img class="contact-img" src="https://placehold.co/50x50.png">
  441. </div> </a>
  442.  
  443. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details." >
  444. <div class="contact">
  445. <img class="contact-img" src="https://placehold.co/50x50.png">
  446. </div> </a>
  447.  
  448. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details." >
  449. <div class="contact">
  450. <img class="contact-img" src="https://placehold.co/50x50.png">
  451. </div> </a>
  452.  
  453. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details." >
  454. <div class="contact">
  455. <img class="contact-img" src="https://placehold.co/50x50.png">
  456. </div> </a>
  457.  
  458. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details." >
  459. <div class="contact">
  460. <img class="contact-img" src="https://placehold.co/50x50.png">
  461. </div> </a>
  462.  
  463. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Details." >
  464. <div class="contact">
  465. <img class="contact-img" src="https://placehold.co/50x50.png">
  466. </div> </a>
  467.  
  468. </div>
  469.  
  470. </div>
  471.  
  472. <!--
  473. MUSIC PLAYER #02 by glenthemes
  474. ♬ glenthpvs.tumblr.com/player02
  475. --->
  476. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  477. <link href="//fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet">
  478. <link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
  479. <script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
  480. <style element="glenplayer02">
  481. :root {
  482. --MusicPlayer-Position:bottom left;
  483. --MusicPlayer-Edge-Offset:15px;
  484.  
  485. --MusicPlayer-Buttons-Size:15px;
  486. --MusicPlayer-Buttons-Color:#24453D;
  487. --MusicPlayer-Buttons-Fill:yes;
  488. }
  489. </style>
  490.  
  491. <div glenplayer02>
  492. <div controls></div>
  493.  
  494. <!-- HOW TO CHANGE THE MUSIC -->
  495. <!-- linktr.ee/direct_file_links -->
  496. <audio src="MUSIC_LINK" volume="100%"></audio>
  497.  
  498. </div><!--don't delete this line-->
  499. <!--end music player-->
Tags: RPC
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement