Advertisement
NaotoShirgone

Css For middle Box

Oct 18th, 2017
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.50 KB | None | 0 0
  1. #profile-container {
  2. background: none;
  3. }
  4.  
  5. body {
  6. background: #222;
  7. background-image: url(http://www.technocrazed.com/wp-content/uploads/2015/12/black-wallpaper-to-set-as-background-23.jpg);
  8. background-attachment:fixed;
  9. background-size:100% 100%;
  10. background-repeat:no-repeat:
  11.  
  12. }
  13.  
  14. body,
  15. a:hover {
  16. cursor: url(http://68.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), progress !important;
  17. }
  18.  
  19.  
  20. @font-face {
  21. font-family: text;
  22. src: url(https://dl.dropbox.com/s/xlqmeg3vrx0j8wd/AnonymousPro-Regular.ttf?dl=0);
  23. }
  24.  
  25. .pic {
  26. position: absolute;
  27. z-index: 2;
  28. width: 170px;
  29. height: 170px;
  30. background: url(https://68.media.tumblr.com/918a08aa7e08e12dd473b4429b95b10c/tumblr_ov965754n21uwii4ro1_500.gif);
  31. background-size: 150%;
  32. left: 285px;
  33. top: 235px;
  34. }
  35.  
  36. .box1 {
  37. position: absolute;
  38. z-index: 1;
  39. overflow: auto;
  40. border: none;
  41. background: #000;
  42. width: 190px;
  43. height: 380px;
  44. left: 70px;
  45. top: 20px;
  46. padding: 5px;
  47. }
  48.  
  49. .info1 {
  50. position: absolute;
  51. z-index: 2;
  52. overflow: auto;
  53. border: none;
  54. background: #000;
  55. font-family: text;
  56. font-size: 12px;
  57. color: #aaa;
  58. width: 190px;
  59. height: 380px;
  60. left: 70px;
  61. top: 20px;
  62. padding: 5px;
  63. opacity: 0;
  64. -webkit-transition: all .5s ease;
  65. }
  66.  
  67. .info1:hover {
  68. opacity: 1;
  69. -webkit-transition: all .5s ease;
  70. }
  71.  
  72. .box2 {
  73. position: absolute;
  74. z-index: 1;
  75. overflow: auto;
  76. border: none;
  77. background: #000;
  78. width: 380px;
  79. height: 190px;
  80. left: 280px;
  81. top: 20px;
  82. padding: 5px;
  83. }
  84.  
  85. .info2 {
  86. position: absolute;
  87. z-index: 2;
  88. overflow: auto;
  89. border: none;
  90. background: #000;
  91. font-family: text;
  92. font-size: 12px;
  93. color: #fff;
  94. width: 380px;
  95. height: 190px;
  96. left: 280px;
  97. top: 20px;
  98. padding: 5px;
  99. opacity: 0;
  100. -webkit-transition: all .5s ease;
  101. }
  102.  
  103. .info2:hover {
  104. opacity: 1;
  105. -webkit-transition: all .5s ease;
  106. }
  107.  
  108. .box3 {
  109. position: absolute;
  110. z-index: 2;
  111. overflow: auto;
  112. border: none;
  113. background: #000;
  114. width: 190px;
  115. height: 380px;
  116. left: 470px;
  117. top: 230px;
  118. padding: 5px;
  119. }
  120.  
  121. .info3 {
  122. position: absolute;
  123. z-index: 2;
  124. overflow: auto;
  125. border: none;
  126. background: #000;
  127. font-family: text;
  128. font-size: 12px;
  129. color: #fff;
  130. width: 190px;
  131. height: 380px;
  132. left: 470px;
  133. top: 230px;
  134. padding: 5px;
  135. opacity: 0;
  136. -webkit-transition: all .5s ease;
  137. }
  138.  
  139. .info3:hover {
  140. opacity: 1;
  141. -webkit-transition: all .5s ease;
  142. }
  143.  
  144. .box4 {
  145. position: absolute;
  146. z-index: 2;
  147. overflow: auto;
  148. border: none;
  149. background: #000;
  150. font-family: text;
  151. font-size: 12px;
  152. color: #aaa;
  153. width: 380px;
  154. height: 190px;
  155. left: 70px;
  156. top: 420px;
  157. padding: 5px;
  158. }
  159.  
  160. .info4 {
  161. position: absolute;
  162. z-index: 2;
  163. overflow: auto;
  164. border: none;
  165. background: #000;
  166. font-family: text;
  167. font-size: 12px;
  168. color: #aaa;
  169. width: 380px;
  170. height: 190px;
  171. left: 70px;
  172. top: 420px;
  173. padding: 5px;
  174. opacity: 0;
  175. -webkit-transition: all .5s ease;
  176. }
  177.  
  178. .info4:hover {
  179. opacity: 1;
  180. -webkit-transition: all .5s ease;
  181. }
  182.  
  183. .smolbox {
  184. position: absolute;
  185. z-index: 1;
  186. width: 180px;
  187. height: 180px;
  188. background: #000;
  189. left: 280px;
  190. top: 230px;
  191. }
  192.  
  193. a:link,
  194. a:visited,
  195. a:active {
  196. text-decoration: none;
  197. color: #fff;
  198. -webkit-transition: all .5s ease;
  199. }
  200.  
  201. a:hover {
  202. color: #aaa;
  203. -webkit-transition: all .5s ease;
  204. }
  205.  
  206. ::-webkit-scrollbar {
  207. display: none;
  208. }
  209.  
  210. hr {
  211. border: dotted;
  212. height: 1px;
  213. background: -webkit-linear-gradient(left, #000, #fff, #000);
  214. }
  215.  
  216. .Credit {
  217. position: fixed;
  218. right: 50px;
  219. bottom: 50px;
  220. width: 20px;
  221. height: 20px;
  222. border-radius: 20px;
  223. border-color: #fff;
  224. border-style: dotted;
  225. border-width: 2px;
  226. background: #000;
  227. -webkit-transition: all 1s ease;
  228. }
  229.  
  230. .Credit:hover {
  231. background: #fff;
  232. border-color: #000;
  233. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement