API tools faq
paste
ZukoHiyama

try this

ZukoHiyama
Feb 16th, 2020
660
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.71 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3. @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
  4. @import url('https://fonts.googleapis.com/css?family=Yesteryear');
  5. @import url('https://fonts.googleapis.com/css?family=Fanwood+Text');
  6. @import url('https://fonts.googleapis.com/css?family=Marck+Script');
  7.  
  8. a {text-decoration: none; color: #fff; font-size:15px; }
  9. a:hover {color:#000;transition:3.4s;-webkit-transition:3.4s;-moz-transition:3.4s;-o-transition:3.4s;-ms-transition:3.4s; } a:active {color:#eee; }
  10.  
  11.  
  12. b{ color: #fff; font-weight:bold; }
  13. i{ color: #fff; font-weight:italic; line-spacing: 5px; font-family: 'Yesteryear'; }
  14. strike{ color: #fff; font-weight:strike; font-size:12px; letter-spacing: 2px; }
  15. big{ color: #fff; font-weight:underline; font-size:13px; }
  16.  
  17. ::-webkit-input-placeholder {
  18. font-size: 16px;
  19. font-weight: 300;
  20. letter-spacing: -0.00933333em; }
  21.  
  22. ::-webkit-scrollbar {
  23. width: 5px;
  24. }
  25.  
  26. ::-webkit-scrollbar-track {
  27. box-shadow: inset 0 0 5px grey;
  28. border-radius: 10px;
  29. }
  30.  
  31. ::-webkit-scrollbar-thumb {
  32. background: #26121E;
  33. border-radius: 10px;
  34. }
  35. ::-webkit-scrollbar-thumb:hover {
  36. background: #4f3d47;
  37. }
  38.  
  39. * {
  40. box-sizing: border-box;
  41. }
  42.  
  43. html,
  44. body {
  45. margin: 0;
  46. padding: 0;
  47. height: 100%;
  48. }
  49.  
  50. body {
  51. font-family: 'Fanwood Text', sans-serif;
  52. display: -webkit-box;
  53. display: -webkit-flex;
  54. display: -ms-flexbox;
  55. display: flex;
  56. -webkit-box-pack: center;
  57. -webkit-justify-content: center;
  58. -ms-flex-pack: center;
  59. justify-content: center;
  60. -webkit-box-align: center;
  61. -webkit-align-items: center;
  62. -ms-flex-align: center;
  63. align-items: center;
  64. background: #000;
  65. background-image: linear-gradient(to right, hsla(0,0%,30%,.15) 50%, transparent 80%);
  66. background-size: 2rem 100%;
  67. overflow: hidden; }
  68.  
  69.  
  70. .form-group {
  71. position: relative;
  72. padding-top: 15px;
  73. margin-top: 10px;
  74. }
  75.  
  76.  
  77. .h1 {
  78. color: #fff;
  79. opacity: 0.8;
  80. font-size: 40px;
  81. font-weight: 400;
  82. font-family: 'Yesteryear';
  83. letter-spacing: 0.2405em;
  84. transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  85. text-align: center;
  86. cursor: pointer;
  87. position: absolute;
  88. }
  89.  
  90. .open .h1 {
  91. transform: translateX(200px) translateZ(0);
  92. }
  93.  
  94. .credit {
  95. color: #fff;
  96. position:center;
  97. padding-bottom: 5px; }
  98.  
  99. .login-wrapper {
  100. width: 800px;
  101. height: 750px;
  102. background-color: #000;
  103. box-shadow: 0px 2px 50px #000;
  104. border-radius: 4px;
  105. overflow: hidden;
  106. position: relative;
  107. }
  108.  
  109. .login-left {
  110. width: 100%;
  111. height: 100%;
  112. display: flex;
  113. justify-content: center;
  114. align-items: center;
  115. transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  116. overflow: hidden;
  117. }
  118.  
  119. .login-left img {
  120. object-fit: cover;
  121. width: 100%;
  122. height: 100%;
  123. display: block;
  124. transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  125. object-position: left;
  126. }
  127.  
  128. .open .login-left img {
  129. transform: translateX(280px) translateZ(0);
  130. }
  131.  
  132. .open .login-left {
  133. transform: translateX(-400px) translateZ(0);
  134. }
  135.  
  136. .login-right {
  137. padding: 40px;
  138. position: absolute;
  139. top: 0;
  140. right: 0;
  141. width: 400px;
  142. transform: translateX(400px) translateZ(0);
  143. transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  144. }
  145.  
  146. .open .login-right {
  147. transform: translateX(0px) translateZ(0);
  148. }
  149.  
  150. .checkbox-container {
  151. display: flex;
  152. margin-top: 35px;
  153.  
  154. }
  155.  
  156. .text-checkbox {
  157. color: #fff;
  158. font-size: 18px;
  159. letter-spacing: -0.00933333em;
  160. font-weight: 300;
  161. margin-left: 15px;
  162. overflow: auto;
  163. width: 400px;
  164. height: 700px;
  165. }
  166.  
  167.  
  168. </style>
  169. <title></title>
  170. </head>
  171. <body>
  172. <div class="login-wrapper">
  173. <div class="login-left">
  174. <img src="https://i.imgur.com/jP5CglC.jpg">
  175. <div class="h1">
  176. Tayln
  177. </div>
  178. </div>
  179. <div class="login-right">
  180. <div class="credit">
  181. <center>
  182. <a href="https://roleplay.chat/profile.php?user=Rad+Cat" target="_blank" title="Credit">©️</a>
  183. </center>
  184. </div>
  185. <div class="checkbox-container">
  186. <div class="text-checkbox">
  187. <center>
  188. Hey there and welcome to my OOC profile. Some of you may know me as Tayln, others as Pixie. I tend to lurk a lot so don't hesitate to send me a DM. This is an OOC profile and I usually won't be rping on it.
  189. <br>
  190. <h2><b>Some of my profiles:</b></h2>
  191.  
  192. <B>My Hero Academia based characters</b>: <P>
  193.  
  194. <a target="_blank" href="https://roleplay.chat/profile.php?user=Ashido" title="Mina Ashido">
  195. <img src="https://i.imgur.com/3O0nDvx.jpg" height="100" width="100"></a>
  196.  
  197. <a target="_blank" href="https://roleplay.chat/profile.php?user=kodai" title="Yui Kodai">
  198. <img src="https://art.ngfiles.com/thumbnails/673000/673995_full.png?f1552598842" height="100" width="100"></a>
  199.  
  200. <a target="_blank" href="https://roleplay.chat/profile.php?user=L.U.V" title="Shade">
  201. <img src="https://i.imgur.com/N5s5UNk.jpg" height="100" width="100"></a>
  202.  
  203. <a target="_blank" href="https://roleplay.chat/profile.php?user=Ms%20Joke" title="Ms. Joke">
  204. <img src="https://pm1.narvii.com/7142/8fa042f81f0d90bb3f192497bc222e03dd0f85f8r1-680-680v2_uhq.jpg" height="100" width="100"></a>
  205.  
  206. <a target="_blank" href="https://roleplay.chat/profile.php?user=Quintessa" title="Doubletake">
  207. <img src="https://i.imgur.com/GyKIURN.jpg" height="100" width="100"></a><BR>
  208.  
  209. <B>Sailor Moon based Characters</b>:
  210.  
  211. <a target="_blank" href="https://roleplay.chat/profile.php?user=Dolls" title="Dolls">
  212. <img src="http://i.picpar.com/87Oc.png" height="100" width="100"></a>
  213.  
  214. <a target="_blank" href="https://roleplay.chat/profile.php?user=Makoto%20Kino" title="Sailor Jupes">
  215. <img src="https://i.imgur.com/KGIKtko.gif" height="100" width="100"></a>
  216.  
  217. <a target="_blank" href="https://roleplay.chat/profile.php?user=Sailor%20Merc" title="Sailor Merc!">
  218. <img src="https://i.pinimg.com/originals/60/16/50/601650ff6f39d1c0b2cf455893cb5d35.gif" height="100" width="100"></a>
  219.  
  220. <a target="_blank" href="https://roleplay.chat/profile.php?user=Dolls" title="Dolls">
  221. <img src="http://i.picpar.com/87Oc.png" height="100" width="100"></a>
  222.  
  223.  
  224.  
  225.  
  226. <br>
  227. <b></b>
  228.  
  229. </center>
  230. </div>
  231. </div>
  232. </div><b>
  233. <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
  234. </script>
  235. <script>
  236. var openLoginRight = document.querySelector('.h1');
  237. var loginWrapper = document.querySelector('.login-wrapper');
  238.  
  239. openLoginRight.addEventListener('click', function(){
  240. loginWrapper.classList.toggle('open');
  241. });
  242. //# sourceURL=pen.js
  243. </script></b>
  244. </div>
  245. </body>
  246. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!