Advertisement
Guest User

Untitled

a guest
Nov 12th, 2019
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.28 KB | None | 0 0
  1. #prcing {
  2. background: rgba(52, 106, 241, 0.842);
  3. color: #7a90ff;
  4. padding: 2em 0 8em;
  5. min-height: 100vh;
  6. position: relative;
  7. -webkit-font-smoothing: antialiased;
  8. }
  9.  
  10. .pricing {
  11. display: -webkit-flex;
  12. display: flex;
  13. -webkit-flex-wrap: wrap;
  14. flex-wrap: wrap;
  15. -webkit-justify-content: center;
  16. justify-content: center;
  17. width: 100%;
  18. margin: 0 auto 3em;
  19. }
  20. .pricing-item {
  21. position: relative;
  22. display: -webkit-flex;
  23. display: flex;
  24. -webkit-flex-direction: column;
  25. flex-direction: column;
  26. -webkit-align-items: stretch;
  27. align-items: stretch;
  28. text-align: center;
  29. -webkit-flex: 0 1 330px;
  30. flex: 0 1 330px;
  31. }
  32. .pricing-action {
  33. color: inherit;
  34. border: none;
  35. background: none;
  36. }
  37. .pricing-action:focus {
  38. outline: none;
  39. }
  40.  
  41. .pricing-feature-list {
  42. text-align: left;
  43. }
  44.  
  45. .pricing-palden .pricing-item {
  46. font-family: 'Open Sans', sans-serif;
  47. font-weight: bold;
  48. cursor: default;
  49. color: #110133;
  50. background: #FFDC34;
  51. box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);
  52. border-radius: 20px 20px 10px 10px;
  53. margin: 1em;
  54. }
  55.  
  56. @media screen and (min-width: 126.25em) {
  57. .pricing-palden .pricing-item {
  58. margin: 2em 6em;
  59. }
  60.  
  61. .pricing-palden .pricing__item--featured {
  62. margin: 0;
  63. z-index: 10;
  64. box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
  65. }
  66. }
  67. .pricing-palden .pricing-deco {
  68. border-radius: 10px 10px 0 0;
  69. background: rgb(78, 72, 100, 0.99);
  70. padding: 4em 0 9em;
  71. position: relative;
  72. }
  73. .pricing-palden .pricing-deco-img {
  74. position: absolute;
  75. bottom: 0;
  76. left: 0;
  77. width: 100%;
  78. height: 160px;
  79. }
  80. .pricing-palden .pricing-title {
  81. font-size: 0.75em;
  82. margin: 0;
  83. text-transform: uppercase;
  84. letter-spacing: 5px;
  85. color: #fff;
  86. }
  87. .pricing-palden .deco-layer {
  88. -webkit-transition: -webkit-transform 0.5s;
  89. transition: transform 0.5s;
  90. }
  91. .pricing-palden .pricing-item:hover .deco-layer--1 {
  92. -webkit-transform: translate3d(15px, 0, 0);
  93. transform: translate3d(15px, 0, 0);
  94. }
  95. .pricing-palden .pricing-item:hover .deco-layer--2 {
  96. -webkit-transform: translate3d(-15px, 0, 0);
  97. transform: translate3d(-15px, 0, 0);
  98. }
  99. .pricing-palden .icon {
  100. font-size: 2.5em;
  101. }
  102. .pricing-palden .pricing-price {
  103. font-size: 5em;
  104. font-weight: bold;
  105. padding: 0;
  106. color: #fff;
  107. margin: 0 0 0.25em 0;
  108. line-height: 0.75;
  109. }
  110. .pricing-palden .pricing-currency {
  111. font-size: 0.35em;
  112. vertical-align: top;
  113. margin-right: 0.7em;
  114. }
  115. .pricing-palden .pricing-period {
  116. font-size: 0.35em;
  117. padding: 0 0 0 0;
  118. font-style: italic;
  119. }
  120. .pricing-palden .pricing__sentence {
  121. font-weight: bold;
  122. margin: 0 0 1em 0;
  123. padding: 0 0 0.5em;
  124. }
  125. .pricing-palden .pricing-feature-list {
  126. margin: 0;
  127. padding: 0.25em 0 2.5em;
  128. list-style: none;
  129. text-align: center;
  130. }
  131. .pricing-palden .pricing-feature {
  132. padding: 1em 0;
  133. }
  134. .pricing-palden .pricing-action {
  135. font-weight: bold;
  136. margin: auto 3em 2em 3em;
  137. padding: 1em 2em;
  138. color: #fff;
  139. border-radius: 30px;
  140. background: #4d4766;
  141. -webkit-transition: background-color 0.3s;
  142. transition: background-color 0.3s;
  143. }
  144. .pricing-palden .pricing-action:hover, .pricing-palden .pricing-action:focus {
  145. background-color: #110133;
  146. }
  147.  
  148. .pricing-palden .pricing-item--featured .pricing-deco {
  149. padding: 5em 0 8.885em 0;
  150. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement