Advertisement
Guest User

Untitled

a guest
Mar 23rd, 2019
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.66 KB | None | 0 0
  1. <body>
  2. <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet'>
  3. <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'>
  4. <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
  5. <link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
  6. <style>
  7. body {background-color: F7DADF; background-size: 100px;}
  8. body a {color: #000; text-decoration: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
  9. body a:hover {color: #000;}
  10.  
  11. ::-webkit-scrollbar {width: 3px;}
  12. ::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;}
  13. ::-webkit-scrollbar-thumb {background-color: white;}
  14.  
  15.  
  16. #image {position: fixed; bottom: -100px; left: 350px; width: 329px; height: 550px; background-image: url(http://i.picpar.com/CXmd.png); background-size: 100%; background-repeat: no-repeat; z-index: 5; pointer-events: none;}
  17.  
  18. #name {position: fixed; bottom: 280px; left: 370px; width: 200px; height: 100px; font-family: Pacifico; font-size: 70px; color: #fff; text-shadow: 2px 2px 1px #941646; z-index: 5;}
  19.  
  20. #phone {position: fixed; bottom: 105px; left: 720px; width: 275px; height: 488px; background-image: url(https://i.imgur.com/iEqBTiu.png); background-size: cover; background-repeat: no-repeat; z-index: 6; pointer-events: none;}
  21.  
  22. #phonescreen {position: fixed; bottom: 181px; left: 760px; width: 195px; height: 329px; background-image: url(https://i.imgur.com/s9aGW5T.png); background-size: cover; z-index: 3; pointer-events: none;}
  23.  
  24. #charm {position: fixed; bottom: 5px; left: 810px; width: 147px; height: 139px; background-image: url(https://cdn.discordapp.com/attachments/318163839042584588/547588436144553995/crowncharm.png); background-size: cover; z-index: 5;}
  25.  
  26. #notif {position: fixed; bottom: 510px; left: 759px; width: 195px; height: 80px; background-color: white; z-index: 4; -webkit-animation: notification 0.7s -webkit-animation-fill-mode: forwards; -webkit-animation-delay: 1s; animation: notification 0.7s; animation-fill-mode: forwards; animation-delay: 4s;}
  27.  
  28. #notiftitle {position: absolute; top: 10px; left: 30px; width: 30px; height: 10px; font-family: Indie Flower; color: #FF93A3; font-size: 14px;}
  29. #notificon {position: absolute; top: 12px; left: 10px; width: 15px; height: 15px; background-image: url(https://i.imgur.com/CCcJbyF.png); background-size: cover;}
  30. #notifmessage {position: absolute; top: 30px; left: 20px; width: 150px; height: 10px; font-family: Indie Flower; color: #FF93A3; font-size: 13px; line-height: 15px;}
  31. #notifopen {position: absolute; top: 62px; left: 150px; width: 150px; height: 10px; font-family: Calibri; color: #FF93A3; font-size: 12px; line-height: 15px;}
  32.  
  33.  
  34. @keyframes notification {
  35. 0% {bottom: 510px;}
  36. 100% {bottom: 440px;}
  37. }
  38. @-webkit-keyframes notification {
  39. 0% {bottom: 510px;}
  40. 100% {bottom: 440px;}
  41. }
  42.  
  43. c {color: #fff; background-color: #941646; padding: 3px; line-height: 45px; word-spacing: 2; text-decoration: strong;}
  44.  
  45. .text {position: fixed; bottom: 400px; left: 850px; width: 1px; height: 1px; font-family: 'Architects Daughter', cursive; font-size: 12px; text-align: center; background-color: white; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; pointer-events: none; z-index: 5; overflow: hidden;}
  46. .text:target {bottom: 181px; left: 760px; width: 195px; height: 329px; pointer-events: auto;}
  47.  
  48. #textbox {position: absolute; top: 10px; left: 10px; width: 173px; height: 150px;}
  49.  
  50. #split {position: absolute; top: 150px; left: 30px; width: 68%; height: 1px; background-color: #555;}
  51.  
  52. #picbox {position: absolute; bottom: 30px; left: 2px; width: 200px; height: 110px; overflow: none;}
  53.  
  54. #picbox img {width: 50px; height: 100px;}
  55.  
  56. #hidden {position: absolute; top: 59px; left: 101px; width: 33px; height: 17px; text-align: center; color: #000; font-family: 'Architects Daughter', cursive; font-size: 11px; background-color: #941646; padding: 1px; word-spacing: 2; text-decoration: strong; opacity: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
  57.  
  58. #hidden:hover {opacity: 1;}
  59.  
  60. #bottomimg {position: absolute; bottom: 0px; left: 0px; width: 194px; height: 57px; background-image: url(http://i.picpar.com/Dojd.jpg); background-size: cover; pointer-events: none; overflow: none;}
  61.  
  62. </style>
  63.  
  64. <div id="image"></div>
  65. <div id="name">»babygirl«</div>
  66.  
  67. <div id="phone"></div>
  68. <div id="phonescreen"></div>
  69. <div id="charm"><a href="#reset"><img src="https://cdn.discordapp.com/attachments/318163839042584588/547588436144553995/crowncharm.png"></a></div>
  70. <div id="notif">
  71. <div id="notiftitle">Twatter</div>
  72. <div id="notificon"></div>
  73. <div id="notifmessage">You have 1 k+ notifications!</div>
  74. <div id="notifopen"><a href="#profile"><b>OPEN</b></a></div>
  75. </div>
  76.  
  77. <div id="profile" class="text">
  78.  
  79. <div id="textbox">
  80. <c>Tessa</c> <c>19</c> <c>heterosexual</c>
  81. <br>
  82. <c>5'4</c> <c>picky</c> <c>model</c>
  83. <div id="hidden"><a href= "https://i.imgur.com/ptRA9j1.jpg" target="_blank">e-girl</a></div>
  84. <br>
  85. <c>single</c> <c>spoiled</c>
  86. <br>
  87. <c>gallery</c>
  88. </div>
  89.  
  90. <div id="split"></div>
  91.  
  92. <div id="picbox">
  93.  
  94. <a target="_blank" href="http://i.picpar.com/EXmd.png"><img src="http://i.picpar.com/EXmd.png"></a>
  95. <a target="_blank" href="http://i.picpar.com/FXmd.jpg"><img src="http://i.picpar.com/FXmd.jpg"></a>
  96. <a target="_blank" href="http://i.picpar.com/GXmd.png"><img src="http://i.picpar.com/GXmd.png"></a>
  97.  
  98. </div>
  99.  
  100. <div id="bottomimg"></div>
  101.  
  102. </div>
  103. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement