API tools faq
paste
Advertisement
Guest User

style.css

a guest
Nov 22nd, 2017
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.26 KB | None | 0 0
raw download clone embed print report
  1. /* Setup fonts */
  2. @charset "utf-8";
  3. @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,700);
  4.  
  5. body {
  6. background: url('../images/bg.png') no-repeat, center top;
  7. background-attachment: fixed;
  8. background-color: #171717;
  9. height: 100%;
  10. width: 100%;
  11. }
  12.  
  13. html, body {
  14. min-width: 1150px;
  15. margin: 0;
  16. padding: 0;
  17. }
  18.  
  19. .clear {
  20. clear: both;
  21. }
  22.  
  23. /* Page Middle */
  24.  
  25. #page_middle {
  26. height: auto;
  27. width: 1100px;
  28. margin: 0 auto;
  29. }
  30.  
  31. /* Menu */
  32.  
  33. #menu {
  34. margin-top: 7px;
  35. height: auto;
  36. width: auto;
  37. }
  38.  
  39. .menu_left {
  40. float: left;
  41. margin-left: 55px;
  42. }
  43.  
  44. .menu_right {
  45. float: right;
  46. margin-right: 55px;
  47. }
  48.  
  49. .menu {
  50. display: inline;
  51. }
  52.  
  53. .menu li {
  54. padding: 0px 40px;
  55. margin-right: 0px;
  56. list-style: none;
  57. float: left;
  58. }
  59.  
  60. .menu li, .menu li a {
  61. color: #5B5B5B;
  62. text-decoration: none;
  63. transition-duration: 1s;
  64. font: bold 13px 'Open Sans';
  65. text-transform: uppercase;
  66. }
  67.  
  68. .menu li:hover a {
  69. color: #757575;
  70. transition-duration: 1s;
  71. }
  72.  
  73. /* Logotyp */
  74.  
  75. .logotyp {
  76. top: 40px;
  77. width: 211px;
  78. height: 69px;
  79. margin: 0 auto;
  80. position: relative;
  81. }
  82.  
  83. .logotyp:hover {
  84. -webkit-animation-name: logotyp;
  85. animation-name: logotyp;
  86. -webkit-animation-duration: 0.75s;
  87. animation-duration: 0.75s;
  88. -webkit-animation-timing-function: linear;
  89. animation-timing-function: linear;
  90. -webkit-animation-iteration-count: 1;
  91. animation-iteration-count: 1;
  92. opacity: 0.8;
  93. }
  94.  
  95. @-webkit-keyframes logotyp {
  96. 10% {
  97. -webkit-transform: translateX(3px) rotate(2deg);
  98. transform: translateX(3px) rotate(2deg);
  99. }
  100.  
  101. 20% {
  102. -webkit-transform: translateX(-3px) rotate(-2deg);
  103. transform: translateX(-3px) rotate(-2deg);
  104. }
  105.  
  106. 30% {
  107. -webkit-transform: translateX(3px) rotate(2deg);
  108. transform: translateX(3px) rotate(2deg);
  109. }
  110.  
  111. 40% {
  112. -webkit-transform: translateX(-3px) rotate(-2deg);
  113. transform: translateX(-3px) rotate(-2deg);
  114. }
  115.  
  116. 50% {
  117. -webkit-transform: translateX(2px) rotate(1deg);
  118. transform: translateX(2px) rotate(1deg);
  119. }
  120.  
  121. 60% {
  122. -webkit-transform: translateX(-2px) rotate(-1deg);
  123. transform: translateX(-2px) rotate(-1deg);
  124. }
  125.  
  126. 70% {
  127. -webkit-transform: translateX(2px) rotate(1deg);
  128. transform: translateX(2px) rotate(1deg);
  129. }
  130.  
  131. 80% {
  132. -webkit-transform: translateX(-2px) rotate(-1deg);
  133. transform: translateX(-2px) rotate(-1deg);
  134. }
  135.  
  136. 90% {
  137. -webkit-transform: translateX(1px) rotate(0);
  138. transform: translateX(1px) rotate(0);
  139. }
  140.  
  141. 100% {
  142. -webkit-transform: translateX(-1px) rotate(0);
  143. transform: translateX(-1px) rotate(0);
  144. }
  145. }
  146.  
  147. @keyframes logotyp {
  148. 10% {
  149. -webkit-transform: translateX(3px) rotate(2deg);
  150. transform: translateX(3px) rotate(2deg);
  151. }
  152.  
  153. 20% {
  154. -webkit-transform: translateX(-3px) rotate(-2deg);
  155. transform: translateX(-3px) rotate(-2deg);
  156. }
  157.  
  158. 30% {
  159. -webkit-transform: translateX(3px) rotate(2deg);
  160. transform: translateX(3px) rotate(2deg);
  161. }
  162.  
  163. 40% {
  164. -webkit-transform: translateX(-3px) rotate(-2deg);
  165. transform: translateX(-3px) rotate(-2deg);
  166. }
  167.  
  168. 50% {
  169. -webkit-transform: translateX(2px) rotate(1deg);
  170. transform: translateX(2px) rotate(1deg);
  171. }
  172.  
  173. 60% {
  174. -webkit-transform: translateX(-2px) rotate(-1deg);
  175. transform: translateX(-2px) rotate(-1deg);
  176. }
  177.  
  178. 70% {
  179. -webkit-transform: translateX(2px) rotate(1deg);
  180. transform: translateX(2px) rotate(1deg);
  181. }
  182.  
  183. 80% {
  184. -webkit-transform: translateX(-2px) rotate(-1deg);
  185. transform: translateX(-2px) rotate(-1deg);
  186. }
  187.  
  188. 90% {
  189. -webkit-transform: translateX(1px) rotate(0);
  190. transform: translateX(1px) rotate(0);
  191. }
  192.  
  193. 100% {
  194. -webkit-transform: translateX(-1px) rotate(0);
  195. transform: translateX(-1px) rotate(0);
  196. }
  197. }
  198.  
  199. /* Page Stats */
  200.  
  201. #page_stats {
  202. margin-top: 100px;
  203. }
  204.  
  205. #page_stats > .stats_body {
  206. text-align: center;
  207. padding: 0px 47px;
  208. color: #5B5B5B;
  209. width: 181px;
  210. height: auto;
  211. float: left;
  212. }
  213.  
  214. #page_stats > .stats_body > .stats_count1,
  215. #page_stats > .stats_body > .stats_count2,
  216. #page_stats > .stats_body > .stats_count3,
  217. #page_stats > .stats_body > .stats_count4 {
  218. background: url('../images/stats_body.png') no-repeat;
  219. font: bold 45px/181px 'Open Sans';
  220. position: relative;
  221. height: 181px;
  222. width: 181px;
  223. float: left;
  224. z-index: 2;
  225. }
  226.  
  227. #page_stats > .stats_body > .stats_count1:hover {
  228. background: url('../images/stats_body_hover1.png') no-repeat;
  229. transition-duration: 10s;
  230. }
  231.  
  232. #page_stats > .stats_body > .stats_count2:hover {
  233. background: url('../images/stats_body_hover2.png') no-repeat;
  234. transition-duration: 10s;
  235. }
  236.  
  237. #page_stats > .stats_body > .stats_count3:hover {
  238. background: url('../images/stats_body_hover3.png') no-repeat;
  239. transition-duration: 10s;
  240. }
  241.  
  242. #page_stats > .stats_body > .stats_count4:hover {
  243. background: url('../images/stats_body_hover4.png') no-repeat;
  244. transition-duration: 10s;
  245. }
  246.  
  247. #page_stats > .stats_body > .stats_name {
  248. text-transform: uppercase;
  249. font: 14px 'Open Sans';
  250. margin-top: 14.5px;
  251. position: relative;
  252. height: auto;
  253. width: 181px;
  254. float: left;
  255. z-index: 1;
  256. }
  257.  
  258. /* Box */
  259.  
  260. #box {
  261. width: 1060px;
  262. margin-top: 100px;
  263. min-height: 220px;
  264. padding: 10px 20px;
  265. }
  266.  
  267. #box .box_title {
  268. color: #757575;
  269. font: 17px 'Open Sans';
  270. }
  271.  
  272. #box .box_border_bottom {
  273. border-bottom: 2px solid #E1FF00;
  274. width: 67px;
  275. }
  276.  
  277. #box .box_text {
  278. font: 13px 'Open Sans';
  279. padding: 20px 15px;
  280. color: #5B5B5B;
  281. }
  282.  
  283. /* Footer */
  284.  
  285. #page_footer {
  286. margin: 0 auto;
  287. width: 1100px;
  288. height: 60px;
  289. }
  290.  
  291. #page_footer .left {
  292. float: left;
  293. width: 550px;
  294. text-align: left;
  295. padding: 10px 0px;
  296. }
  297.  
  298. #page_footer .right {
  299. float: right;
  300. width: 550px;
  301. text-align: right;
  302. padding: 10px 0px;
  303. }
  304.  
  305. #page_footer .left, #page_footer .left a,
  306. #page_footer .right, #page_footer .right a {
  307. color: #3B3B3B;
  308. text-decoration: none;
  309. font: 12px 'Open Sans';
  310. }
  311.  
  312. #page_footer .left a:hover,
  313. #page_footer .right a:hover {
  314. color: #E1FF01;
  315. transition-duration: 3s;
  316. }
  317.  
  318. .facebook_button {
  319. text-align: center;
  320. font-weight: bold;
  321. font-family: arial;
  322. color: #FFFFFF !important;
  323. font-size: 20px;
  324. text-shadow: 1px 1px 0px #3B5998;
  325. padding: 13px 25px;
  326. background: #3B5998;
  327. }
  328.  
  329. .telegram_button {
  330. text-align: center;
  331. font-weight: bold;
  332. font-family: arial;
  333. color: #FFFFFF !important;
  334. font-size: 20px;
  335. text-shadow: 1px 1px 0px #0088cc;
  336. padding: 13px 25px;
  337. background: #0088cc;
  338. }
  339.  
  340. .gg_button {
  341. text-align: center;
  342. font-weight: bold;
  343. font-family: arial;
  344. color: #ffffff !important;
  345. font-size: 20px;
  346. text-shadow: 1px 1px 0px #F88E00;
  347. padding: 13px 25px;
  348. background: #F88E00;
  349. }
  350.  
  351. .kontakt_button {
  352. text-align: center;
  353. font-weight: bold;
  354. font-family: arial;
  355. color: #FFFFFF !important;
  356. font-size: 10px;
  357. text-shadow: 1px 1px 0px #5B5B5B;
  358. padding: 8px 13px;
  359. background: #5B5B5B;
  360. border: 1px solid #E1FF00;
  361. border-radius: 10px;
  362. }
  363.  
  364. input {
  365. background: #5b5b5b;
  366. border: 1px solid #E1FF00;
  367. color: white;
  368. padding: 5px;
  369. margin-bottom: 5px;
  370. }
  371.  
  372. textarea {
  373. background: #5b5b5b;
  374. border: 1px solid #E1FF00;
  375. color: white;
  376. padding: 5px;
  377. margin-bottom: 5px;
  378. }
  379.  
  380. .box_avatar{
  381. float:left;
  382. }
  383.  
  384. .box_text2{
  385. font: 13px 'Open Sans';
  386. color: #5B5B5B;
  387. float:left;
  388. margin-left: 20px;
  389. }
  390.  
  391. .bb, .bb::before, .bb::after {
  392. position: absolute;
  393. top: 0;
  394. bottom: 0;
  395. left: 0;
  396. right: 0;
  397. }
  398.  
  399. .bb {
  400. width: 150px;
  401. height: 150px;
  402. margin: auto;
  403. background: url("https://i.imgur.com/FW6ayWK.png") no-repeat 50%/100% rgba(0, 0, 0, 0.1);
  404. color: #E1FF00;
  405. box-shadow: inset 0 0 0 1px rgba(225, 255, 0, 0.5);
  406. }
  407. .bb::before, .bb::after {
  408. content: '';
  409. z-index: -1;
  410. margin: -5%;
  411. box-shadow: inset 0 0 0 2px;
  412. animation: clipMe 6s linear infinite;
  413. }
  414. .bb::before {
  415. animation-delay: -3s;
  416. }
  417. .bb:hover::after, .bb:hover::before {
  418. background-color: rgba(255, 0, 0, 0.3);
  419. }
  420.  
  421.  
  422. @keyframes clipMe {
  423. 0%, 100% {
  424. clip: rect(0px, 165px, 2px, 0px);
  425. }
  426. 25% {
  427. clip: rect(0px, 2px, 165px, 0px);
  428. }
  429. 50% {
  430. clip: rect(163px, 165px, 165px, 0px);
  431. }
  432. 75% {
  433. clip: rect(0px, 165px, 165px, 163px);
  434. }
  435. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!