Advertisement
hanimjay

Bianca sig code

Feb 20th, 2018
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.46 KB | None | 0 0
  1. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  3.  
  4. <style>
  5. #bianca-sig{
  6. width: 500px;
  7. height: 200px;
  8. position: relative;
  9. margin: 0px auto;
  10. overflow: hidden;
  11. background: url(http://via.placeholder.com/500x200);
  12. border: 4px solid #eee;
  13. outline: 1px solid #333;
  14. }
  15.  
  16. #bianca-sig ::-webkit-scrollbar {
  17. width: 1px;
  18. }
  19.  
  20. #bianca-sig ::-webkit-scrollbar-track {
  21. background: #ccc;
  22. }
  23.  
  24. #bianca-sig ::-webkit-scrollbar-thumb {
  25. background: #9E231C;
  26. }
  27.  
  28. #bianca-sig .base{
  29. width: 500px;
  30. height: 200px;
  31. background: #111;
  32. position: absolute;
  33. top: 0px;
  34. left: 0px;
  35. opacity: 0;
  36. -webkit-transition: 0.7s ease-in 1s;
  37. transition: 0.7s ease-in 1s;
  38. }
  39. #bianca-sig:hover .base{
  40. opacity: 0.95;
  41. -webkit-transition: 0.7s ease-in 0s;
  42. transition: 0.7s ease-in 0s;
  43. }
  44.  
  45. #bianca-sig .triangle{
  46. width: 263px;
  47. height: 200px;
  48. background: #910900;
  49. position: absolute;
  50. top: 0px;
  51. right: 0px;
  52. -webkit-clip-path: polygon(72% 0, 100% 0, 100% 100%, 0% 100%);
  53. clip-path: polygon(75% 0, 100% 0, 100% 100%, 0% 100%);
  54. }
  55.  
  56. #bianca-sig .textbase{
  57. width: 180px;
  58. height: 90px;
  59. background: #ddd;
  60. outline: 1.5px solid #333;
  61. position: absolute;
  62. top: 37px;
  63. left: 65px;
  64. opacity: 0;
  65. -webkit-transition: 0.4s ease-in 0.5s;
  66. transition: 0.4s ease-in 0.5s;
  67. }
  68.  
  69. #bianca-sig:hover .textbase{
  70. opacity: 1;
  71. -webkit-transition: 0.4s ease-in 0.9s;
  72. transition: 0.4s ease-in 0.9s;
  73. }
  74.  
  75. #bianca-sig .textbox{
  76. width: 135px;
  77. height: 52px;
  78. background: #ddd;
  79. position: absolute;
  80. top: 19px;
  81. left: 18px;
  82. overflow: auto;
  83. padding-right: 8px;
  84. font-family: 'Open Sans', sans-serif;
  85. font-size: 8.5px;
  86. letter-spacing: 0px;
  87. line-height: 11px;
  88. color: #111;
  89. text-align: justify;
  90. z-index: 3;
  91. }
  92.  
  93. #bianca-sig .textbox b{
  94. color: #910900;
  95. }
  96.  
  97. #bianca-sig .textbox i{
  98. color: #444;
  99. }
  100.  
  101. #bianca-sig .textbox u{
  102. text-decoration: none;
  103. border-bottom: 0.5px dotted #980900;
  104. color: #000;
  105. }
  106.  
  107. #bianca-sig .status{
  108. height: 22px;
  109. position: absolute;
  110. bottom: 43px;
  111. left: 64px;
  112. text-transform: uppercase;
  113. font-family: 'Open Sans', sans-serif;
  114. font-size: 9px;
  115. letter-spacing: 0px;
  116. font-weight: bold;
  117. line-height: 22px;
  118. -webkit-transition: 0.4s ease-in 0s;
  119. transition: 0.4s ease-in 0s;
  120. opacity: 0;
  121. }
  122. #bianca-sig:hover .status{
  123. opacity: 1;
  124. -webkit-transition: 0.4s ease-in 1.3s;
  125. transition: 0.4s ease-in 1.3s;
  126. }
  127. #bianca-sig .status b{
  128. color: #ddd;
  129. background: #910900;
  130. padding: 6px 9px;
  131. }
  132. #bianca-sig .status c{
  133. color: #ccc;
  134. padding: 5px 9px;
  135. border: 1px solid #910900;
  136. }
  137.  
  138. #bianca-sig .icon{
  139. width: 100px;
  140. height: 100px;
  141. position: absolute;
  142. top: 34px;
  143. right: 101px;
  144. }
  145.  
  146. #bianca-sig img{
  147. width: 90px;
  148. height: 90px;
  149. padding: 4px;
  150. border-top: 2px solid #910900;
  151. border-left: 2px solid #910900;
  152. border-right: 2px solid #111;
  153. border-bottom: 2px solid #111;
  154. border-radius: 100px;
  155. }
  156.  
  157. #bianca-sig .nav1{
  158. width: 120px;
  159. height: 25px;
  160. position: absolute;
  161. bottom: 28px;
  162. right: 177px;
  163. -webkit-transform: rotate(-45deg);
  164. transform: rotate(-45deg);
  165. }
  166.  
  167. #bianca-sig .nav1 .fa{
  168. color: #980900;
  169. margin-left: 13px;
  170. font-size: 14px;
  171. -webkit-transition: 0.2s ease-in 0s;
  172. transition: 0.2s ease-in 0s;
  173. }
  174. #bianca-sig .nav1 .fa:hover{
  175. color: #ccc;
  176. -webkit-transform: scale(1.2);
  177. transform: scale(1.2);
  178. }
  179.  
  180. #bianca-sig .nav2{
  181. width: 80px;
  182. height: 25px;
  183. position: absolute;
  184. top: 26px;
  185. right: 41px;
  186. -webkit-transform: rotate(-45deg);
  187. transform: rotate(-45deg);
  188. }
  189. #bianca-sig .nav2 .fa{
  190. color: #111;
  191. margin-left: 11px;
  192. font-size: 14px;
  193. -webkit-transition: 0.2s ease-in 0s;
  194. transition: 0.2s ease-in 0s;
  195. }
  196. #bianca-sig .nav2 .fa:hover{
  197. color: #ddd;
  198. -webkit-transform: scale(1.2);
  199. transform: scale(1.2);
  200. }
  201.  
  202. #bianca-sig a{
  203. text-decoration: none;
  204. }
  205.  
  206. #bianca-sig .right{
  207. width: 500px;
  208. height: 200px;
  209. position: absolute;
  210. right: -270px;
  211. top: 0px;
  212. -webkit-transition: 0.7s ease-in 1s;
  213. transition: 0.7s ease-in 1s;
  214. }
  215. #bianca-sig:hover .right{
  216. right: 0px;
  217. -webkit-transition: 0.7s ease-in 0s;
  218. transition: 0.7s ease-in 0s;
  219. }
  220.  
  221. </style>
  222.  
  223. <center>
  224. <div id="bianca-sig">
  225.  
  226. <div class="base"></div>
  227.  
  228. <div class="status"><b>closed</b><c>for requests</c></div>
  229.  
  230. <div class="textbase">
  231. <div class="textbox">
  232. <b>bold</b> <i>italic</i> <u>underlined</u> <p>
  233. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta dolor ullamcorper, imperdiet leo quis, varius massa. Maecenas rutrum mi ac accumsan imperdiet.
  234. </div>
  235. </div>
  236.  
  237. <div class="right">
  238. <div class="triangle"></div>
  239.  
  240. <div class="icon">
  241. <a href="http://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
  242. <img src="http://via.placeholder.com/90x90"></a>
  243. </div>
  244.  
  245. <div class="nav1">
  246. <a href="#" title="gallery"><i class="fa fa-star"></i></a>
  247. <a href="#" title="hall of fame"><i class="fa fa-trophy"></i></a>
  248. <a href="#" title="hall of record"><i class="fa fa-bars"></i></a>
  249. </div>
  250.  
  251. <div class="nav2">
  252. <a href="#" title="gallery archive"><i class="fa fa-archive"></i></a>
  253. <a href="#" title="deviantart"><i class="fa fa-deviantart"></i></a>
  254. </div>
  255. </div>
  256.  
  257. </div>
  258. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement