Advertisement
Guest User

Untitled

a guest
Feb 20th, 2017
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.40 KB | None | 0 0
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. }
  6.  
  7. body {
  8. background:#e8e8e8;
  9. overflow-x:hidden;
  10. }
  11.  
  12. .figure {
  13. width:210px;
  14. margin:0 auto;
  15. margin-top:15%;
  16. }
  17.  
  18. .figure img {
  19. width:100%;
  20. margin:0 auto;
  21. }
  22.  
  23. .text {
  24. position:relative;
  25. top:0;
  26. }
  27.  
  28. h1, h3 {
  29. font-family:"Helvetica";
  30. font-weight:300;
  31. text-align:center;
  32. color:#333333;
  33. margin:0;
  34. }
  35.  
  36. p {
  37. margin-top:4px;
  38. }
  39.  
  40. h3 {
  41. font-size:16px;
  42. margin-top:5px;
  43. }
  44.  
  45. .circles-wrap {
  46. width: 130px;
  47. height: 130px;
  48. position:relative;
  49. margin:0 auto;
  50. margin-bottom:-80px;
  51. top:-132px;
  52. }
  53.  
  54. .circles-wrap:hover > .circle1 {
  55. width: 100%;
  56. height: 100%;
  57. border-width: 8px;
  58. border-color: #D84315;
  59. border-style: solid;
  60. border-top-color: transparent;
  61. -webkit-animation: circle1 1s cubic-bezier(0.47, -0.66, 0.83, 0.67) infinite;
  62. animation: circle1 1s cubic-bezier(0.92, 0.04, 1, -0.64 0.47, -0.66, 0.83, 0.67) infinite;
  63.  
  64. transition: .2s ease-in;
  65. -moz-transition: .2s ease-in;
  66. -webkit-transition: .2s ease-in;
  67. }
  68.  
  69. .circles-wrap .center {
  70. position: absolute;
  71. top: 0;
  72. right: 0;
  73. bottom: 0;
  74. left: 0;
  75. margin: auto;
  76. border-radius: 100%;
  77. }
  78.  
  79. .circles-wrap .circle1 {
  80. width: 100%;
  81. height: 100%;
  82. border-width: 8px;
  83. border-color: #999999;
  84. border-style: solid;
  85. border-top-color: transparent;
  86. -webkit-animation: circle1 1s cubic-bezier(0.47, -0.66, 0.83, 0.67) infinite;
  87. animation: circle1 1s cubic-bezier(0.92, 0.04, 1, 0.64 0.47, -0.66, 0.83, 0.67) infinite;
  88.  
  89. transition: .2s ease-out;
  90. -moz-transition: .2s ease-out;
  91. -webkit-transition: .2s ease-out;
  92. }
  93.  
  94. @-webkit-keyframes circle1 {
  95. from {
  96. transform: rotate(0deg);
  97. }
  98. to {
  99. transform: rotate(360deg);
  100. }
  101. }
  102. @keyframes circle1 {
  103. from {
  104. transform: rotate(0deg);
  105. }
  106. to {
  107. transform: rotate(360deg);
  108. }
  109. }
  110.  
  111.  
  112. footer {
  113. position:absolute;
  114. width:100%;
  115. bottom:10px;
  116. text-align:center;
  117. margin:0;
  118. padding:0;
  119. }
  120.  
  121. footer small {
  122. font-family:'Helvetica', sans-serif;
  123. font-size:12px;
  124. color:#999999;
  125. margin:0;
  126. padding:0;
  127. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement