Advertisement
thisisnotras

Edge old 3/25/17

Mar 25th, 2017
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.41 KB | None | 0 0
  1. <style onload="try { document.title = '[ 𝐸𝒹𝑔𝑒 ]'; } catch (e) { }">
  2.  
  3. @import url(//fonts.googleapis.com/css?family=Poiret+One|Herr+Von+Muellerhoff|Audiowide);
  4.  
  5. body {
  6. font-family: "Ubuntu", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
  7. color: #999999;
  8. overflow: hidden;
  9. background-image:url(http://weknownyourdreamz.com/images/hell/hell-03.jpg);
  10. background-size: 100% auto;
  11. background-color: black;
  12. background-repeat: no-repeat;
  13. background-position: center;
  14. }
  15.  
  16. #profile {
  17. border: 1px solid #333333;
  18. width: 600px;
  19. display: table;
  20. padding: .5em;
  21. background: #000000;
  22. }
  23.  
  24. .pfor{display: none;}
  25. #profile{background: transparent;
  26. border: 0px;}
  27.  
  28. body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-7/cur641.cur), progress !important;}
  29.  
  30. /* A65646 */
  31.  
  32. #whole{
  33. position: absolute;
  34. top: 0px;
  35. left: 0px;
  36. right: 0px;
  37. bottom: 0px;
  38. background-image:
  39. url(http://i63.tinypic.com/so1kyr.jpg);
  40. overflow: hidden;
  41. background-size: 70px;
  42.  
  43.  
  44. /* DARKER COLOR
  45. background-color: #121215;
  46. */
  47.  
  48. /* normal background */
  49. background-color:#4D4D54;
  50.  
  51. /* BACKGROUND 4
  52. background-color: black;
  53.  
  54. overflow: hidden; */
  55.  
  56. /* HALLOWEEN COLORS */
  57. background-color: #6f3107;
  58. background-color: transparent;
  59. }
  60.  
  61. #whole2{
  62. position: absolute;
  63. top: 0px;
  64. left: 0px;
  65. right: 0px;
  66. bottom: 0px;
  67. background-color: #101010;
  68. background-color: orange;
  69. opacity: .2;}
  70.  
  71. a, a:hover{text-decoration: none;}
  72.  
  73. #edgeimage{
  74. position: absolute;
  75. top: 0px;
  76. bottom: 0px;
  77. left: 0px;
  78. width: 900px;
  79. background-image:
  80. url(http://i68.tinypic.com/hupufs.jpg);
  81. background-repeat: no-repeat;
  82. background-size: auto 120%;
  83. border-right: 0px solid black;
  84. background-position: bottom -210px left;
  85. }
  86.  
  87. /* ALEX STANDING
  88. #edgeimage{
  89. background-image:url(http://i67.tinypic.com/289x4x2.jpg);
  90. background-size: auto 110%;
  91. background-position: bottom -80px left;}
  92. */
  93. /* FLASH CHOP
  94. #edgeimage{
  95. background-image: url(http://i65.tinypic.com/2nk8gg8.jpg);
  96. background-size: auto 92%;
  97. background-position: bottom -34px left -73px;
  98. }
  99. */
  100.  
  101. /* HALLOWEEN
  102. #edgeimage{
  103. background-image:url(http://i66.tinypic.com/y125j.jpg);
  104. background-size: auto 114%;
  105. background-position: bottom -55px left -25px;}
  106. */
  107.  
  108. #extrabackground{
  109. position: fixed;
  110. top: 0px;
  111. bottom: 0px;
  112. left: 0px;
  113. right: 0px;
  114. background-image:url(http://i66.tinypic.com/eum4wn.jpg);
  115. background-repeat: repeat;
  116. opacity: 0;
  117. }
  118.  
  119. /* Background 4 */
  120.  
  121. #edgeimage2{
  122. position: absolute;
  123. top: 0px;
  124. right: 0px;
  125. bottom: 0px;
  126. left: 0px;
  127. background-image:url(http://i64.tinypic.com/2mcugr6.jpg);
  128. background-repeat: no-repeat;
  129. background-size: auto 100%;
  130. background-position: right bottom;
  131. -webkit-transform:rotatey(180deg);
  132. transform:rotatey(180deg);}
  133.  
  134. /* BACKGROUND 5 */
  135.  
  136. #edgeimage{
  137. background-image:url(http://i.imgur.com/SxyoXaQ.png);
  138. background-position: bottom -160px left;
  139. }
  140.  
  141. #edgeslice{
  142. position: absolute;
  143. top: 0px;
  144. right: 0px;
  145. left: 0px;
  146. bottom: 0px;
  147. background-image:url(http://i65.tinypic.com/2l9lke9.jpg);
  148. background-repeat: repeat;
  149. background-size: 90% 100%;
  150. background-position: bottom left;
  151.  
  152. -webkit-transform:rotateY(180deg);
  153. transform:rotatey(180deg);
  154. -webkit-filter:blur(2px);}
  155.  
  156.  
  157. /* BACKGROUND 4 - END */
  158.  
  159.  
  160. #linkholder{
  161. position: absolute;
  162. left: 600px;
  163. top: 200px;
  164. height: 200px;
  165. width: 300px;
  166. border: 0px solid white;
  167. }
  168.  
  169.  
  170. .floatlink{
  171. float: right;
  172. border: 1px solid white;
  173. height: 50px;
  174. width: 50px;
  175. transform:rotate(45deg);
  176. -webkit-trandform:rotate(45deg);
  177. transition: all 1s;
  178. -webkit-transition: all 1s;
  179. z-index: 1;
  180. box-shadow: 0px 0px 10px gray;
  181. margin-left: -10px;
  182. }
  183.  
  184. #whole:hover .floatlink:nth-child(4){
  185. background: #ED8722;
  186. }
  187.  
  188. #whole:hover .floatlink:nth-child(3){
  189. background: #575757;
  190. }
  191.  
  192. #whole:hover .floatlink:nth-child(2){
  193. background: #EAEAEA;
  194. }
  195.  
  196. #whole:hover .floatlink:nth-child(1){
  197. background: #2C2C2C;
  198. }
  199.  
  200. .floatlink:hover{
  201. z-index: 2;
  202. margin-left: 24px;
  203. margin-right: 35px;
  204. box-shadow: 0px 0px 10px orange;
  205. border: 1px solid #2C2C2C;
  206. }
  207.  
  208. .numberlink{
  209. transform:rotate(-45deg);
  210. -webkit-transform:rotate(-45deg);
  211. color: black;
  212. font-weight: 800;
  213. height: 100%;
  214. width: 100%;
  215. text-align: right;
  216. box-sizing: border-box;
  217. padding-right: 10px;
  218. padding-top: 10px;
  219. font-size: 15pt;
  220. font-family:'Audiowide';
  221. transition: all 1s;
  222. -webkit-transition: all 1s;
  223. opacity: 0;
  224. }
  225.  
  226. #whole:hover .numberlink{
  227. opacity: 1;
  228. -webkit-transition: all 1s;
  229. transition: all 1s;
  230. }
  231.  
  232. .floatlink:hover .numberlink{
  233. padding-right: 13px;
  234. }
  235.  
  236. .hfirst, .hsecond, .hthird, .hfourth{
  237. position: absolute;
  238. transform:rotate(45deg);
  239. -webkit-transform:rotate(45deg);
  240. height: 100px;
  241. width: 100px;
  242. border: 0px dashed black;
  243. overflow: hidden;
  244. background: #21232A;
  245. top: 100px;
  246. webkit-transition: all 1s;
  247. transition: all 1s;
  248. opacity: 0;
  249. }
  250.  
  251. .hfirst{
  252. left: 100px;
  253. }
  254. .hsecond{
  255. left: 142px;
  256. }
  257. .hthird{
  258. left: 184px;
  259. }
  260. .hfourth{
  261. left: 226px;
  262. }
  263.  
  264.  
  265.  
  266. .floatlink:nth-child(4):hover ~ .hfirst,
  267. .floatlink:nth-child(3):hover ~ .hsecond,
  268. .floatlink:nth-child(2):hover ~ .hthird,
  269. .floatlink:nth-child(1):hover ~ .hfourth{
  270. top: 52px;
  271. opacity: 1;
  272. transition: all 2s, opacity 2s .5s;
  273. -webkit-transition: all 2s, opacity 2s .5s;
  274. }
  275.  
  276. .highlightcenter{
  277. position: absolute;
  278. left: -15px;
  279. top: 35px;
  280. width: 130px;
  281. height: 30px;
  282. border: 0px solid black;
  283. transform:rotate(-45deg);
  284. -webkit-transform:rotate(-45deg);
  285. overflow: hidden;
  286. box-sizing: border-box;
  287. text-align: center;
  288. font-family: 'Audiowide';
  289. color: orange;
  290. font-size: 12pt;
  291. text-transform:uppercase;
  292. letter-spacing: 5px;
  293. padding-top: 3px;
  294. -webkit-transition: all 1s;
  295. transition: all 1s;
  296. }
  297.  
  298. .highlightcenter .vanisher{
  299. opacity: 0;
  300. font-size: 1px;
  301. letter-spacing: -10px;
  302. -webkit-transition: all 2s;
  303. transition: all 2s;}
  304.  
  305. #firstdiv:target,
  306. #seconddiv:target,
  307. #thirddiv:target,
  308. #fourthdiv:target{
  309. transform:rotate(0deg);
  310. -webkit-transform:rotate(0deg);
  311. opacity: 1;
  312. top: 200px;
  313. left: 200px;
  314. height: 200px; width: 300px;
  315. }
  316.  
  317. #firstdiv:target .highlightcenter,
  318. #seconddiv:target .highlightcenter,
  319. #thirddiv:target .highlightcenter,
  320. #fourthdiv:target .highlightcenter{
  321. transform:rotate(0deg);
  322. -webkit-transform:rotate(0deg);
  323. top: 5px;
  324. left: 5px;
  325. -webkit-transition: all 2s;
  326. transition: all 2s;
  327. }
  328.  
  329. #firstdiv:target .vanisher,
  330. #seconddiv:target .vanisher,
  331. #thirddiv:target .vanisher,
  332. #fourthdiv:target .vanisher {
  333. letter-spacing: 15px;}
  334.  
  335. #contentbox{
  336. opacity: 0;
  337. width: 300px;
  338. height: 157px;
  339. position: absolute;
  340. overflow: auto;
  341. top: 35px;
  342. left: 0px;
  343. border: 0px solid black;
  344. box-sizing: border-box;
  345. webkit-transition: all 1s;
  346. transition: 1s;
  347. padding-top: 0px;
  348. padding-left: 5px;
  349. padding-right: 5px;
  350. text-align: left;
  351. color: #B7B4B4;
  352. font-weight: 400;
  353. font-family:'contentfont';
  354. letter-spacing: 2px;
  355. }
  356.  
  357. ::-webkit-scrollbar {
  358. width: 4px;
  359. background-color: transparent;
  360. }
  361.  
  362.  
  363. ::-webkit-scrollbar-thumb {
  364. border-radius: 0px;
  365. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  366. background-color: #111111;
  367. }
  368.  
  369.  
  370. @font-face{
  371. font-family: 'contentfont';
  372. src:url(https://dl.dropboxusercontent.com/u/4556289/Saniretro.ttf);
  373. }
  374.  
  375. #firstdiv:target #contentbox,
  376. #seconddiv:target #contentbox,
  377. #thirddiv:target #contentbox,
  378. #fourthdiv:target #contentbox{
  379. opacity: 1;
  380. -webkit-transition: all 1s 1s;
  381. transition: all 1s 1s;
  382. }
  383.  
  384. #contentbox a, a:hover{
  385. text-decoration: none;
  386. color: #B7B4B4;
  387. font-weight: 800;
  388. }
  389.  
  390. #contentbox a:hover{
  391. text-decoration: underline;
  392. }
  393.  
  394. .bellamydiv, .bellamydiv:hover{
  395. position: absolute;
  396. top: 100px;
  397. left: 630px;
  398. font-size: 45px;
  399. font-family: audiowide;
  400. font-style:italic;
  401. color: #EAEAEA;
  402. color: black;
  403. text-shadow:-2px 4px 5px #000;
  404. text-shadow: -2px 4px 5px rgba(255, 152, 0, 0.55);
  405. z-index:3;
  406. -webkit-transition: all 1s;
  407. transition: all 1s;
  408. letter-spacing: 10px;
  409. font-weight: 400;
  410. }
  411.  
  412. @font-face{
  413. src:url(https://dl.dropboxusercontent.com/u/4556289/Overdose%20Sunrise.otf);
  414. font-family:'hallfont';}
  415.  
  416. .bellamydiv i{
  417. font-style: none;
  418. font-family: 'audiowide', 'Times', Arial;}
  419.  
  420.  
  421.  
  422. /* MUSIC PLAYER */
  423.  
  424. #musiccontainer{
  425. position: absolute;
  426. bottom: 10px;
  427. left: 10px;
  428. height: 24px;
  429. width: 23px;
  430. border: 0px solid black;
  431. background: #ED8722;
  432. -webkit-transition: all 1s;
  433. transition: all 1s;
  434. overflow: hidden;
  435. border-radius: 3px 3px 3px 3px;
  436. opacity: .8;
  437. zoom: 130%;
  438. }
  439.  
  440. #musiccontainer:hover{
  441. width: 200px;}
  442.  
  443. #playerhold{
  444. position: absolute;
  445. left: 0px;
  446. top: 0px;
  447. height: 24px;
  448. width: 200px;
  449. border: 0px solid black;
  450. overflow: hidden;
  451. }
  452.  
  453. #playerholdzoom{
  454. position: absolute;
  455. height: 115%;
  456. width: 35px;
  457. border: 0px solid red;
  458. overflow: hidden;
  459. margin-left: -12px;
  460. margin-top: -3px;
  461. }
  462.  
  463. #detailshold{
  464. position: absolute;
  465. left: 22px;
  466. top: 1px;
  467. height: 20px;
  468. width: 180px;
  469. font-family: 'Audiowide';
  470. font-size: 11pt;
  471. letter-spacing: 3px;
  472. color: black;
  473. box-sizing: border-box;
  474. padding-left: 2px;
  475. padding-top: 2px;
  476. color: #21232A;
  477. overflow: hidden;
  478. text-transform: uppercase;
  479. }
  480.  
  481. #detailshold b{
  482. color: black; }
  483.  
  484.  
  485. /* STAT SECTION START */
  486. #statcontainer{
  487. float:left;
  488. border: 0px solid black;
  489. width: 100%;
  490. }
  491.  
  492. .statcategory{
  493. float: left;
  494. height: 15px;
  495. width: 150px;
  496. border: 0px solid white;
  497. font-family: 'Audiowide';
  498. color: white;
  499. font-size: 10pt;
  500. text-align: left;
  501. margin-top: 7px;
  502. }
  503.  
  504. .statopen{
  505. float: right;
  506. height: 15px;
  507. width: 65px;
  508. border: 0px solid white;
  509. font-family: 'Audiowide';
  510. font-size: 8pt;
  511. text-align: center;
  512. box-sizing: border-box;
  513. padding-top: 9px;
  514. text-shadow: 0px 0px 0px white;
  515. -webkit-transition:all .5s;
  516. transition: all .5s;
  517. }
  518.  
  519. .statclose{
  520. float: right;
  521. height: 15px;
  522. width: 65px;
  523. border: 0px solid white;
  524. font-family: 'Audiowide';
  525. font-size: 8pt;
  526. text-align: center;
  527. box-sizing: border-box;
  528. padding-top: 9px;
  529. text-shadow: 0px 0px 0px white;
  530. -webkit-transition:all .5s;
  531. transition: all .5s;
  532. }
  533.  
  534. .statopen:hover, .statclose:hover{
  535. text-shadow: 0px 0px 4px white;
  536. }
  537.  
  538. .statpop{
  539. float: right;
  540. width:100%;
  541. height: 0.1px;
  542. border-top: 1px solid white;
  543. border-bottom: 1px solid white;
  544. overflow: auto;
  545. -webkit-transition: all 1s 9999s;
  546. transition: all 1s 9999s;
  547. margin-top: 2px;
  548. box-sizing: border-box;
  549. padding-top: 1px;
  550. line-height: 16px;
  551. }
  552.  
  553. .statopen:active ~ .statpop{
  554. height: 100px;
  555. -webkit-transition: all 0s;
  556. transition: all 0s;
  557. }
  558.  
  559. .statclose:active ~ .statpop{
  560. height: 0px !important;
  561. -webkit-transition: all 0s;
  562. transition: all 0s;
  563. }
  564.  
  565. .leftstat{
  566. float: left;
  567. width: 80px;
  568. border: 0px solid red;
  569. text-align: left;
  570. font-size: 10pt;
  571. text-shadow: 1px 1px 1px black;
  572. color: white;
  573. }
  574.  
  575. .rightstat{
  576. float: left;
  577. width: 200px;
  578. border: 0px solid green;
  579. text-align: right;
  580. font-size: 10pt;
  581. text-shadow: 1px 1px 1px black;
  582. }
  583.  
  584. .centerstat{
  585. float: left;
  586. width: 280px;
  587. text-align: left;
  588. font-size: 10pt;
  589. text-shadow: 1px 1px 1px black;
  590. margin-bottom: 5px;
  591. }
  592.  
  593. .centerstat b{
  594. font-weight: 400;
  595. color: white;
  596. }
  597.  
  598.  
  599. /* SOCIAL SECTION -- START */
  600.  
  601. #thirddiv #contentbox{
  602. overflow: hidden;
  603. }
  604.  
  605. .socialholder{
  606. margin-left: 4px;
  607. position: absolute;
  608. top: 0px;
  609. height: 155px;
  610. width: 50px;
  611. border: 0px solid black;
  612. overflow: hidden;
  613. -webkit-transition: all 1s;
  614. transition: all 1s;
  615. -webkit-transition: all 1s;
  616. z-index: 1;
  617. }
  618.  
  619. #firstsocial #imagepart{
  620. background-image:
  621. url(http://i63.tinypic.com/2d2i3c7.jpg);
  622. }
  623. #secondsocial #imagepart{
  624. background-image:url(http://i64.tinypic.com/33clqo9.jpg);
  625. }
  626. #thirdsocial #imagepart{
  627. background-image:url(http://i66.tinypic.com/vreb2p.jpg);
  628. }
  629. #fourthsocial #imagepart{
  630. background-image:url(http://i63.tinypic.com/2wnqo0y.jpg);
  631. }
  632. #fifthsocial #imagepart{
  633. background-image:url( http://i64.tinypic.com/e8k2fk.jpg);
  634. }
  635. #sixthsocial #imagepart{
  636. background-image:url( http://i64.tinypic.com/e8k2fk.jpg);
  637. }
  638.  
  639. #firstsocial{
  640. left: 0px;
  641. }
  642.  
  643. #secondsocial{
  644. left: 49px;
  645. }
  646.  
  647. #thirdsocial{
  648. left: 98px;
  649. }
  650.  
  651. #fourthsocial{
  652. left: 147px;
  653. }
  654.  
  655. #fifthsocial{
  656. left: 196px;
  657. }
  658.  
  659. #sixthsocial{
  660. left: 245px;
  661. }
  662.  
  663. #social1:target .socialholder,
  664. #social2:target .socialholder,
  665. #social3:target .socialholder,
  666. #social4:target .socialholder,
  667. #social5:target .socialholder,
  668. #social6:target .socialholder{
  669. opacity: 0;
  670. }
  671.  
  672. #social1:target #firstsocial,
  673. #social2:target #secondsocial,
  674. #social3:target #thirdsocial,
  675. #social4:target #fourthsocial,
  676. #social5:target #fifthsocial,
  677. #social6:target #sixthsocial{
  678. transform:rotate(90deg);
  679. -webkit-transform:rotate(90deg);
  680. z-index: 2;
  681. left: 66px;
  682. top: -68px;
  683. width: 155px;
  684. height: 291px;
  685. opacity: 1;
  686. }
  687.  
  688. #social1:target #thirddiv #contentbox,
  689. #social2:target #thirddiv #contentbox,
  690. #social3:target #thirddiv #contentbox,
  691. #social4:target #thirddiv #contentbox,
  692. #social5:target #thirddiv #contentbox,
  693. #social6:target #thirddiv #contentbox{
  694. opacity: 1;
  695. -webkit-transition: all 1s 1s;
  696. transition: all 1s 1s;
  697. }
  698.  
  699. #social1:target #thirddiv .highlightcenter,
  700. #social2:target #thirddiv .highlightcenter,
  701. #social3:target #thirddiv .highlightcenter,
  702. #social4:target #thirddiv .highlightcenter,
  703. #social5:target #thirddiv .highlightcenter,
  704. #social6:target #thirddiv .highlightcenter{
  705. transform:rotate(0deg);
  706. -webkit-transform:rotate(0deg);
  707. top: 5px;
  708. left: 5px;
  709. -webkit-transition: all 2s;
  710. transition: all 2s;
  711. }
  712.  
  713. #social1:target #thirddiv .vanisher,
  714. #social2:target #thirddiv .vanisher,
  715. #social3:target #thirddiv .vanisher,
  716. #social4:target #thirddiv .vanisher,
  717. #social5:target #thirddiv .vanisher,
  718. #social6:target #thirddiv .vanisher {
  719. letter-spacing: 15px;}
  720.  
  721. #social1:target #thirddiv,
  722. #social2:target #thirddiv,
  723. #social3:target #thirddiv,
  724. #social4:target #thirddiv,
  725. #social5:target #thirddiv,
  726. #social6:target #thirddiv{
  727. transform:rotate(0deg);
  728. -webkit-transform:rotate(0deg);
  729. opacity: 1;
  730. top: 200px;
  731. left: 200px;
  732. height: 200px; width: 300px;
  733. }
  734.  
  735. #social1:target #firstsocial #holster,
  736. #social2:target #secondsocial #holster,
  737. #social3:target #thirdsocial #holster,
  738. #social4:target #fourthsocial #holster,
  739. #social5:target #fifthsocial #holster,
  740. #social6:target #sixthsocial #holster{
  741. width: 291px;
  742. height: 153px;
  743. top: 68px;
  744. left: -68px;
  745. }
  746.  
  747. #social1:target #firstsocial #switch1,
  748. #social2:target #secondsocial #switch1,
  749. #social3:target #thirdsocial #switch1,
  750. #social4:target #fourthsocial #switch1,
  751. #social5:target #fifthsocial #switch1,
  752. #social6:target #sixthsocial #switch1{
  753. opacity: 0;
  754. z-index: 1;
  755. -webkit-transition: all 1s;
  756. transition: all 1s;
  757. }
  758.  
  759. #social1:target #firstsocial #switch2,
  760. #social2:target #secondsocial #switch2,
  761. #social3:target #thirdsocial #switch2,
  762. #social4:target #fourthsocial #switch2,
  763. #social5:target #fifthsocial #switch2,
  764. #social6:target #sixthsocial #switch2{
  765. opacity: 1;
  766. z-index: 2;
  767. -webkit-transition: all 1s .5s;
  768. transition: all 1s .5s;
  769. }
  770.  
  771. #social1:target #firstsocial #descriptionpart,
  772. #social2:target #secondsocial #descriptionpart,
  773. #social3:target #thirdsocial #descriptionpart,
  774. #social4:target #fourthsocial #descriptionpart,
  775. #social5:target #fifthsocial #descriptionpart,
  776. #social6:target #sixthsocial #descriptionpart{
  777. opacity: 1;
  778. transition: all 1s .8s;
  779. -webkit-transition: all 1s .8s;
  780. }
  781.  
  782. #holster{
  783. position: absolute;
  784. transform:rotate(-90deg);
  785. -webkit-transform:rotate(-90deg);
  786. height: 50px;
  787. width: 155px;
  788. border: 0px solid red;
  789. left: -55px;
  790. top: 55px;
  791. overflow: hidden;
  792. -webkit-transition: all 1s;
  793. transition: all 1s;
  794. }
  795.  
  796. #imagepart{
  797. position: absolute;
  798. left: 0px;
  799. top: 0px;
  800. height: 50px;
  801. right: 30px;
  802. border: 0px solid green;
  803. background-size: 100% 100%;
  804. }
  805.  
  806. #numberpart{
  807. position: absolute;
  808. right: 0px;
  809. top: 0px;
  810. height: 50px;
  811. width: 25px;
  812. border: 0px solid blue;
  813. font-family: 'Audiowide';
  814. }
  815.  
  816. #numberpart a, #numberpart a:hover{
  817. text-decoration: none;
  818. }
  819.  
  820. #switch1{
  821. position: absolute;
  822. left: 0px;
  823. top: 0px;
  824. height: 100%;
  825. width: 100%;
  826. border: 0px solid green;
  827. box-sizing: border-box;
  828. opacity: 1;
  829. z-index: 1;
  830. background-color: #21232A;
  831. -webkit-transition: all 1s .5s;
  832. transition: all 1s .5s;
  833. border-left: 2px solid gray;
  834. letter-spacing: 1px;
  835. padding-top: 3px;
  836. }
  837.  
  838. #switch1:hover{
  839. letter-spacing: 2px;
  840. color: white;
  841. padding-top: 0px;
  842. -webkit-transition: all 1s;
  843. transition: all 1s;
  844. }
  845.  
  846. #switch1 .fontss{
  847. margin-top: 22px;
  848. margin-left: -8px;
  849. transform:rotate(90deg);
  850. -webkit-transform:rotate(90deg);
  851. width: 42px;
  852. font-size: 10pt;
  853. text-align: left;
  854. }
  855.  
  856. #switch2{
  857. position: absolute;
  858. left: 0px;
  859. top: 0px;
  860. height: 100%;
  861. width: 100%;
  862. border: 0px solid black;
  863. box-sizing: border-box;
  864. width: 30px;
  865. font-size: 10pt;
  866. text-align: left;
  867. opacity: 0;
  868. background-color: #21232A;
  869. z-index: 0;
  870. -webkit-transition: all 1s;
  871. transition: all 1s;
  872. border-bottom: 2px solid gray;
  873. padding-left: 0px;
  874. }
  875.  
  876. #switch2:hover{
  877. color: white;
  878. }
  879.  
  880. #switch2 .fontss{
  881. margin-top: 15px;
  882. margin-left: 1px;
  883. width: 42px;
  884. font-size: 9pt;
  885. text-align: left;
  886. letter-spacing: -1px;
  887. }
  888.  
  889. #descriptionpart{
  890. position: absolute;
  891. left: 0px;
  892. top: 50px;
  893. border: 0px solid black;
  894. height: 100px;
  895. width: 287px;
  896. opacity: 0;
  897. -webkit-transition: all .8s;
  898. transition: all .8s;
  899. }
  900.  
  901.  
  902.  
  903. .socialname{
  904. float: left;
  905. width: 120px;
  906. height: 20px;
  907. text-align: left;
  908. border: 0px solid red;
  909. overflow: hidden;
  910. color: white !important;
  911. box-sizing: border-box;
  912. padding-top: 3px;
  913. }
  914.  
  915. .socialrelation{
  916. float: left;
  917. width: 140px;
  918. height: 20px;
  919. text-align: right;
  920. border: 0px solid red;
  921. overflow: hidden;
  922. color: white;
  923. box-sizing: border-box;
  924. padding-top: 3px;
  925. }
  926.  
  927. .socialdescription{
  928. float: left;
  929. width: 265px;
  930. height: 80px;
  931. text-align: left;
  932. border: 0px solid red;
  933. box-sizing: border-box;
  934. font-size: 9pt;
  935. padding-top: 5px;
  936. }
  937.  
  938. /* SOCIAL SECTION -- END */
  939.  
  940.  
  941. </style>
  942.  
  943. <div id="profile">
  944.  
  945. <div id="social1">
  946. <div id="social2">
  947. <div id="social3">
  948. <div id="social4">
  949. <div id="social5">
  950. <div id="social6">
  951.  
  952. <div id="whole2">
  953. </div>
  954.  
  955.  
  956. <div id="whole">
  957.  
  958. <div id="edgeimage">
  959. </div>
  960.  
  961. <div id="linkholder">
  962. <a class="floatlink" href="#fourthdiv" onmouseover="document.getElementById('SF2Switch').play()" onclick="document.getElementById('SF2Select').play()">
  963. <div class="numberlink">4.</div>
  964. </a>
  965. <a class="floatlink" href="#thirddiv" onmouseover="document.getElementById('SF2Switch2').play()" onclick="document.getElementById('SF2Select2').play()">
  966. <div class="numberlink">3.</div>
  967. </a>
  968. <a class="floatlink" href="#seconddiv" onmouseover="document.getElementById('SF2Switch').play()" onclick="document.getElementById('SF2Select').play()">
  969. <div class="numberlink">2.</div>
  970. </a>
  971. <a class="floatlink" href="#firstdiv" onmouseover="document.getElementById('SF2Switch2').play()" onclick="document.getElementById('SF2Select2').play()">
  972. <div class="numberlink">1.</div>
  973. </a>
  974.  
  975. <div class="hfirst" id="firstdiv">
  976. <div class="highlightcenter">
  977. stats<font class="vanisher">--</font>
  978. </div>
  979. <div id="contentbox" style="overflow-y: scroll;">
  980. <div id="statcontainer">
  981. <div class="statcategory">
  982. personal stats
  983. </div>
  984. <div class="statclose">
  985. - X -
  986. </div>
  987. <div class="statopen">
  988. - O -
  989. </div>
  990. <div class="statpop">
  991. <div class="leftstat">
  992. Name
  993. </div>
  994. <div class="rightstat" style="text-align: right;">
  995. Edge Crafton
  996. </div>
  997.  
  998. <div class="leftstat">
  999. Hometown
  1000. </div>
  1001. <div class="rightstat">
  1002. Driftwood Valley
  1003. </div>
  1004.  
  1005. <div class="leftstat">
  1006. Education
  1007. </div>
  1008. <div class="rightstat">
  1009. Some College
  1010. </div>
  1011.  
  1012. <div class="leftstat">
  1013. Family
  1014. </div>
  1015. <div class="rightstat">
  1016. St. Joseph's Children's Home
  1017. </div>
  1018.  
  1019. <div class="leftstat">
  1020. Status
  1021. </div>
  1022. <div class="rightstat">
  1023. Unrestrained (Open).
  1024. </div>
  1025.  
  1026. <div class="leftstat">
  1027. Occupation
  1028. </div>
  1029. <div class="rightstat">
  1030. NEET
  1031. </div>
  1032.  
  1033. <div class="leftstat">
  1034. Personality
  1035. </div>
  1036. <div class="rightstat">
  1037. Lazy, Amused, Aroused
  1038. </div>
  1039.  
  1040. <div class="leftstat">
  1041. Dress Style
  1042. </div>
  1043. <div class="rightstat">
  1044. Casual, Cosplay
  1045. </div>
  1046.  
  1047. <div class="leftstat">
  1048. Hobbies
  1049. </div>
  1050. <div class="rightstat">
  1051. Fighting games, Anime
  1052. </div>
  1053.  
  1054. <div class="leftstat">
  1055. Likes
  1056. </div>
  1057. <div class="rightstat">
  1058. Living, pizza, sexiness.
  1059. </div>
  1060.  
  1061. <div class="leftstat">
  1062. Dislikes
  1063. </div>
  1064. <div class="rightstat">
  1065. Assholes, losing his soul.
  1066. </div>
  1067.  
  1068. </div>
  1069. </div>
  1070.  
  1071. <div id="statcontainer">
  1072. <div class="statcategory">
  1073. physical stats
  1074. </div>
  1075. <div class="statclose">
  1076. - X -
  1077. </div>
  1078. <div class="statopen">
  1079. - O -
  1080. </div>
  1081. <div class="statpop">
  1082.  
  1083. <div class="leftstat">
  1084. Species
  1085. </div>
  1086. <div class="rightstat">
  1087. <a title="Since selling his soul, his body has been changed on a genetic level. No longer primarily identifies with any known species."> Hallowed Canine*</a>
  1088. </div>
  1089.  
  1090. <div class="leftstat">
  1091. Gender
  1092. </div>
  1093. <div class="rightstat">
  1094. Male
  1095. </div>
  1096.  
  1097. <div class="leftstat">
  1098. Age
  1099. </div>
  1100. <div class="rightstat">
  1101. Thirty-four
  1102. </div>
  1103.  
  1104. <div class="leftstat">
  1105. Height
  1106. </div>
  1107. <div class="rightstat">
  1108. 7'8"
  1109. </div>
  1110.  
  1111. <div class="leftstat">
  1112. Build
  1113. </div>
  1114. <div class="rightstat">
  1115. Light-Middleweight
  1116. </div>
  1117.  
  1118. <div class="leftstat">
  1119. 'Length'
  1120. </div>
  1121. <div class="rightstat">
  1122. 16"
  1123. </div>
  1124.  
  1125. <div class="leftstat">
  1126. 'Girth'
  1127. </div>
  1128. <div class="rightstat">
  1129. 5" (diameter)
  1130. </div>
  1131.  
  1132. </div>
  1133. </div>
  1134.  
  1135. <div id="statcontainer">
  1136. <div class="statcategory">
  1137. abilities
  1138. </div>
  1139. <div class="statclose">
  1140. - X -
  1141. </div>
  1142. <div class="statopen">
  1143. - O -
  1144. </div>
  1145. <div class="statpop">
  1146. <div class="centerstat">
  1147. <b>- Spark -</b>
  1148. <br> When focusing, Edge channels the energies of hell into his mind to increase his mental and physical capabilities. More agile and able to think more tactically, it gives him a strong edge against any random he happens across
  1149. online.
  1150. </div>
  1151.  
  1152. <div class="centerstat">
  1153. <b>- Surge -</b>
  1154. <br> If Edge concentrates <b>Spark</b> for too long or too strongly, there is a resulting physical transformation of his body as he's infused with hell's power. His muscle mass and the size of his limbs increase while his mind
  1155. becomes more primal, temporarily leaving him extremely focused but less coherent.
  1156. </div>
  1157. </div>
  1158. </div>
  1159.  
  1160. <div id="statcontainer">
  1161. <div class="statcategory">
  1162. gaming stats
  1163. </div>
  1164. <div class="statclose">
  1165. - X -
  1166. </div>
  1167. <div class="statopen">
  1168. - O -
  1169. </div>
  1170. <div class="statpop">
  1171. <div class="leftstat">
  1172. Main Genres
  1173. </div>
  1174. <div class="rightstat">
  1175. Fighting, FPS/TPS
  1176. </div>
  1177.  
  1178. <div class="leftstat">
  1179. Main Game
  1180. </div>
  1181. <div class="rightstat">
  1182. Street Fighter V, Destiny
  1183. </div>
  1184.  
  1185. <div class="leftstat">
  1186. Main Chars
  1187. </div>
  1188. <div class="rightstat">
  1189. Charlie, R. Mika
  1190. </div>
  1191.  
  1192. <div class="leftstat">
  1193. XBL ID
  1194. </div>
  1195. <div class="rightstat">
  1196. Riot Trigger
  1197. </div>
  1198.  
  1199. <div class="leftstat">
  1200. PSN ID
  1201. </div>
  1202. <div class="rightstat">
  1203. Riot_Z32
  1204. </div>
  1205.  
  1206. </div>
  1207. </div>
  1208.  
  1209. </div>
  1210. </div>
  1211. <div class="hsecond" id="seconddiv">
  1212. <div class="highlightcenter">
  1213. history
  1214. </div>
  1215. <div id="contentbox">
  1216. Pretty simple story. Edge made a deal with hell in exchange for 'the tools' to make him the best fighting gamer of all time. <br><br> A foster child that never landed a foster home and eventually aged out of his orphanage, he's never
  1217. taken anything but games very seriously.<br><br>Managing to eke out a living with a combination of short-term minimum wage manual labor jobs and the occasional fast-food stint, the canine decided he'd struck gold when he happened across a
  1218. 'devil of the crossroads' at a Payless Shoe Store and managed to get both a pair of pretty nice sneaks and a very good deal for his soul.
  1219. </div>
  1220. </div>
  1221. <div class="hthird" id="thirddiv">
  1222. <div class="highlightcenter">
  1223. social<font class="vanisher">-</font>
  1224. </div>
  1225. <div id="contentbox">
  1226.  
  1227. <div class="socialholder" id="firstsocial">
  1228. <div id="holster">
  1229. <div id="imagepart">
  1230. </div>
  1231. <div id="numberpart">
  1232. <a id="switch1" href="#social1" onclick="document.getElementById('SF2Startup').play()">
  1233. <div class="fontss">.1.</div>
  1234. </a>
  1235. <a id="switch2" href="#thirddiv">
  1236. <div class="fontss">. x .</div>
  1237. </a>
  1238. </div>
  1239. <div id="descriptionpart">
  1240. <a class="socialname" href="http://roleplay.chat/profile.php?user=Bellamy" target=_blank>
  1241. Bellamy Dame
  1242. </a>
  1243. <div class="socialrelation">
  1244. Hell's Concierge
  1245. </div>
  1246. <div class="socialdescription">
  1247. Shortly after Edge sold his soul, Bellamy appeared and introduced herself as his contract custodian. Apparently she's there to make sure his wish goes exactly as it's supposed to. <u><b>Vanished.</b></u>
  1248. </div>
  1249. </div>
  1250. </div>
  1251. </div>
  1252.  
  1253. <div class="socialholder" id="secondsocial">
  1254. <div id="holster">
  1255. <div id="imagepart">
  1256. </div>
  1257. <div id="numberpart">
  1258. <a id="switch1" href="#social2" onclick="document.getElementById('SF2Startup').play()">
  1259. <div class="fontss">.2.</div>
  1260. </a>
  1261. <a id="switch2" href="#thirddiv">
  1262. <div class="fontss">. x .</div>
  1263. </a>
  1264. </div>
  1265. <div id="descriptionpart">
  1266. <a class="socialname" href="http://roleplay.chat/profile.php?user=Ristelle" target=_blank style="letter-spacing: 1px;">
  1267. Ristelle Alfeida
  1268. </a>
  1269. <div class="socialrelation">
  1270. Grumpy Midget
  1271. </div>
  1272. <div class="socialdescription">
  1273. Grumpy and a midget, but still a very nice person.
  1274. Genuinely good peoples and a very fine person to call a friend.
  1275. </div>
  1276. </div>
  1277. </div>
  1278. </div>
  1279.  
  1280.  
  1281. <div class="socialholder" id="thirdsocial">
  1282. <div id="holster">
  1283. <div id="imagepart">
  1284. </div>
  1285. <div id="numberpart">
  1286. <a id="switch1" href="#social3" onclick="document.getElementById('SF2Startup').play()">
  1287. <div class="fontss">.3.</div>
  1288. </a>
  1289. <a id="switch2" href="#thirddiv">
  1290. <div class="fontss">. x .</div>
  1291. </a>
  1292. </div>
  1293. <div id="descriptionpart">
  1294. <a class="socialname" href="http://roleplay.chat/profile.php?user=Moo+Moo" target=_blank style="letter-spacing: 1px;">
  1295. Momo Du Fleuve
  1296. </a>
  1297. <div class="socialrelation">
  1298. Mooster
  1299. </div>
  1300. <div class="socialdescription">
  1301. Fellow fighter that Edge games with a lot; really knows what he's doing with Rainbow Mika.
  1302. Really cool jokester, too! Don't run into this kinda quality every day.
  1303. </div>
  1304. </div>
  1305. </div>
  1306. </div>
  1307.  
  1308.  
  1309. <div class="socialholder" id="fourthsocial">
  1310. <div id="holster">
  1311. <div id="imagepart">
  1312. </div>
  1313. <div id="numberpart">
  1314. <a id="switch1" href="#social4" onclick="document.getElementById('SF2Startup').play()">
  1315. <div class="fontss">.4.</div>
  1316. </a>
  1317. <a id="switch2" href="#thirddiv">
  1318. <div class="fontss">. x .</div>
  1319. </a>
  1320. </div>
  1321. <div id="descriptionpart">
  1322. <a class="socialname" href="https://roleplay.chat/profile.php?user=Ryanne" target=_blank>
  1323. Ryanne V
  1324. </a>
  1325. <div class="socialrelation">
  1326. Ry-bread
  1327. </div>
  1328. <div class="socialdescription">
  1329. A very good friend and incredibly nice lady who always willing to help out when the chips are down. Enjoys sleeping for very long amounts of time and poutine, only one of which can be explained.
  1330. </div>
  1331. </div>
  1332. </div>
  1333. </div>
  1334.  
  1335. <div class="socialholder" id="fifthsocial">
  1336. <div id="holster">
  1337. <div id="imagepart">
  1338. </div>
  1339. <div id="numberpart">
  1340. <a id="switch1" href="#social5" onclick="document.getElementById('SF2Startup').play()">
  1341. <div class="fontss">.5.</div>
  1342. </a>
  1343. <a id="switch2" href="#thirddiv">
  1344. <div class="fontss">. x .</div>
  1345. </a>
  1346. </div>
  1347. <div id="descriptionpart">
  1348. <a class="socialname" href="http://roleplay.chat/profile.php?user=Edge" target=_blank>
  1349. Edge Crafton
  1350. </a>
  1351. <div class="socialrelation">
  1352. Me, Myself & I
  1353. </div>
  1354. <div class="socialdescription">
  1355. The best there is... eventually.<br>
  1356. The best there was... maybe<br>
  1357. The best there ever will be... potentially.
  1358. </div>
  1359. </div>
  1360. </div>
  1361. </div>
  1362.  
  1363. <div class="socialholder" id="sixthsocial">
  1364. <div id="holster">
  1365. <div id="imagepart">
  1366. </div>
  1367. <div id="numberpart">
  1368. <a id="switch1" href="#social6" onclick="document.getElementById('SF2Startup').play()">
  1369. <div class="fontss">.6.</div>
  1370. </a>
  1371. <a id="switch2" href="#thirddiv">
  1372. <div class="fontss">. x .</div>
  1373. </a>
  1374. </div>
  1375. <div id="descriptionpart">
  1376. <a class="socialname" href="http://roleplay.chat/profile.php?user=Edge" target=_blank>
  1377. Edge Crafton
  1378. </a>
  1379. <div class="socialrelation">
  1380. Me, Myself & I
  1381. </div>
  1382. <div class="socialdescription">
  1383. The best there is... eventually.<br>
  1384. The best there was... maybe<br>
  1385. The best there ever will be... potentially.
  1386. </div>
  1387. </div>
  1388. </div>
  1389. </div>
  1390.  
  1391. </div>
  1392. </div>
  1393. <div class="hfourth" id="fourthdiv">
  1394. <div class="highlightcenter">
  1395. ooc<font class="vanisher">----</font>
  1396. </div>
  1397. <div id="contentbox">
  1398. Code is <a href="http://roleplay.chat/profile.php?user=Digital" title="By which I mean I designed every aspect of it myself using tools I acquired on the internet.
  1399. No piece of this profile is borrowed from any other person's profile and I'm pretty damn proud of that." target="_blank">my own</a>, don't touch.<br> Character art is owned by me.<br><br>
  1400. Artists : <br>
  1401. - <a href="http://furaffinity.net/user/spearfrost" target="_blank">spearfrost</a><br>
  1402. - <a href="http://furaffinity.net/user/repteil" target="_blank">repteil</a><br>
  1403. - <a href="http://furaffinity.net/user/reeiden" target="_blank">reeiden</a><br>
  1404. - <a href="http://furaffinity.net/user/moonagvaze.evsal" target="_blank">moonagvaze.evsal</a><br>
  1405. - <a href="http://furaffinity.net/user/bullethoundx" target="_blank">bullethoundx</a><br>
  1406. - <a href="http://furaffinity.net/user/tomoyokinomoto" target="_blank">tomoyokinomoto</a><br>
  1407. - <a href="http://furaffinity.net/user/nitricacid" target="_blank">nitricacid</a><br>
  1408. - <a href="http://furaffinity.net/user/kardie" target=_blank>kardie</a><br>
  1409. - <a href="http://furaffinity.net/user/ranaohara" target=_blank>ranaohara</a> (current)<br>
  1410. <br> If you have <a href="http://shoryuken.com" target="_blank">SFV</a>, I love playing. Inv?<br><br>
  1411. I don't usually just add people to the social area. If you want to be added, just bring it up.
  1412. </div>
  1413. </div>
  1414. </div>
  1415.  
  1416. <a class="bellamydiv" href="#blank">
  1417. ⌞ <font style="color:#ED8722; text-shadow: -2px 4px 5px black;"><i>E</font> d g e</i> ⌝
  1418. </a>
  1419.  
  1420. <div id="musiccontainer">
  1421. <div id="playerhold">
  1422. <div id="playerholdzoom">
  1423.  
  1424. <audio controls src="http://k003.kiwi6.com/hotlink/qmlr6rojt1/It_s_Not_Design_feat._Salim_VOL.mp3" id="edgesong" style="margin-left:7px;" loop=3>
  1425. </audio>
  1426.  
  1427. </div>
  1428. </div>
  1429. <div id="detailshold">
  1430. <div id="marqueeholder">
  1431. <marquee direction="left" scrollamount="5">
  1432. <b>L</b>UPE <b>F</b>IASCO // <b>IT'S NOT DESIGN</b>
  1433. </marquee>
  1434.  
  1435. </div>
  1436. </div>
  1437.  
  1438. </div>
  1439.  
  1440. </div>
  1441.  
  1442. </div>
  1443. </div>
  1444. </div>
  1445. </div>
  1446. </div>
  1447.  
  1448.  
  1449.  
  1450.  
  1451. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement