Advertisement
hanimjay

Crownless (personal sig)

Jul 26th, 2020
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.91 KB | None | 0 0
  1. <style>
  2. :root{
  3. --black: #111111;
  4. --white: #ffffff;
  5. --maroon: #A84320;
  6. --beige: #D8CFC0;
  7. }
  8. #crownless-sig{
  9. position: relative;
  10. margin: 10px auto;
  11. overflow: hidden;
  12. width: 400px;
  13. height: 180px;
  14. background: var(--beige);
  15. }
  16.  
  17. #crownless-sig .circle1{
  18. position: absolute;
  19. top: 25px;
  20. left: -49px;
  21. width: 161px;
  22. height: 161px;
  23. background: var(--maroon);
  24. border-radius: 250px;
  25. opacity: 0.7;
  26. }
  27.  
  28. #crownless-sig .circle2{
  29. position: absolute;
  30. top: -54px;
  31. right: -29px;
  32. width: 100px;
  33. height: 100px;
  34. background: var(--maroon);
  35. border-radius: 250px;
  36. opacity: 0.7;
  37. }
  38.  
  39. #crownless-sig .ellipse{
  40. position: absolute;
  41. top: -64px;
  42. left: -78px;
  43. width: 300px;
  44. height: 300px;
  45. background: transparent;
  46. border-radius: 250px;
  47. border: 1px solid var(--white);
  48. }
  49.  
  50. #crownless-sig .links-bg{
  51. position: absolute;
  52. top: 10px;
  53. left: 0px;
  54. width: 400px;
  55. height: 160px;
  56. background: transparent;
  57. }
  58.  
  59. #crownless-sig a{
  60. display: inline-block;
  61. text-decoration: none;
  62. color: var(--black);
  63. text-shadow: 0px 0px var(--black);
  64. margin: 10px;
  65. transition: 0.2s;
  66. }
  67. #crownless-sig a:hover{
  68. text-decoration: line-through;
  69. transition: 0.2s;
  70. }
  71.  
  72. #crownless-sig .links{
  73. font-family: 'Space Mono', monospace;
  74. font-weight: 400;
  75. font-size: 10px;
  76. line-height: 10px;
  77. text-align: center;
  78. text-transform: uppercase;
  79. }
  80.  
  81. #crownless-sig .icon img{
  82. position: absolute;
  83. width: 90px;
  84. height: 90px;
  85. left: 37px;
  86. bottom: 22px;
  87. border: 0px solid #000000;
  88. border-radius: 60px 60px 0px 0px;
  89. }
  90.  
  91. #crownless-sig .status{
  92. position: absolute;
  93. width: 88px;
  94. right: 35px;
  95. top: 56px;
  96. background: var(--white);
  97. border: 0.5px solid var(--black);
  98. border-radius: 58px / 18px;
  99. padding: 8px 0px;
  100. transform: rotate(7deg);
  101. font-family: Space Mono;
  102. font-style: normal;
  103. font-weight: bold;
  104. font-size: 10px;
  105. line-height: 10px;
  106. text-align: center;
  107. text-transform: uppercase;
  108. color: var(--maroon);
  109. }
  110.  
  111. #crownless-sig .title{
  112. position: absolute;
  113. left: 161px;
  114. bottom: 56px;
  115. font-family: 'Space Mono', monospace;
  116. font-weight: 700;
  117. font-size: 24px;
  118. line-height: 24px;
  119. text-transform: uppercase;
  120. color: var(--black);
  121. text-align: left;
  122. letter-spacing: -1px;
  123. }
  124.  
  125. #crownless-sig .discord{
  126. position: absolute;
  127. bottom: 22px;
  128. left: 162px;
  129. font-family: 'Space Mono', monospace;
  130. font-weight: 400;
  131. font-size: 9px;
  132. line-height: 9px;
  133. text-transform: uppercase;
  134. color: var(--black);
  135. text-shadow: 0px 0px var(--black);
  136. background: var(--white);
  137. border: 0.5px solid var(--black);
  138. border-radius: 50px;
  139. padding: 7px 12px;
  140. }
  141. #crownless-sig .discord c{
  142. color: var(--maroon);
  143. text-shadow: 0px 0px var(--maroon);
  144. letter-spacing: 0.2px;
  145. }
  146. </style>
  147.  
  148. <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">
  149.  
  150. <center>
  151. <div id="crownless-sig">
  152. <div class="circle1"></div>
  153. <div class="circle2"></div>
  154. <div class="ellipse"></div>
  155.  
  156. <div class="discord">Discord: <c>Hanie#5400</c></div>
  157.  
  158. <div class="links-bg">
  159. <div class="links">
  160. <a href="https://shadowplayers.jcink.net/index.php?showtopic=11483&view=getnewpost" target="_blank" title="playground">code</a> &#10022;
  161. <a href="https://shadowplayers.jcink.net/index.php?showtopic=2034&view=getnewpost" target="_blank" title="graphic archive">gfx</a> &#10022;
  162. <a href="https://shadowplayers.jcink.net/index.php?showtopic=8958&view=getnewpost" target="_blank" title="records">rec</a> &#10022;
  163. <a href="https://www.deviantart.com/orpheusz" target="_blank" title="deviantart">dev</a>
  164. </div>
  165. </div>
  166.  
  167. <div class="icon"><img src="https://i.imgur.com/8ZnuqVN.gif"></div>
  168.  
  169. <div class="status">Busy!</div>
  170. <div class="title">The <i>Crownless</i> <br>Shall Be <u>King</u>.</div>
  171. </div>
  172. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement