Advertisement
wilderanima

ɴᴏ ʀɪsᴋ, ɴᴏ sᴛᴏʀʏ

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