Advertisement
Guest User

Untitled

a guest
Jan 21st, 2020
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.65 KB | None | 0 0
  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6.  
  7. body {
  8. font-family: 'Poppins', sans-serif;
  9. }
  10.  
  11. .cards {
  12. display: flex;
  13. with: 100%;
  14. flex-direction: row;
  15. flex-wrap: wrap;
  16. align-items: center;
  17. justify-content: center;
  18. }
  19.  
  20. .normal-card {
  21. background-color: #eaeaea;
  22. width: 350px;
  23. border-radius: 5px;
  24. text-align: center;
  25. display: flex;
  26. flex-direction: column;
  27. align-items: center;
  28. justify-content: center;
  29. height: 650px;
  30. box-sizing: border-box;
  31. position: relative;
  32. margin: 30px;
  33. transition: transform .2s;
  34. }
  35.  
  36. .normal-card:hover {
  37. -ms-transform: scale(1.05); /* IE 9 */
  38. -webkit-transform: scale(1.05); /* Safari 3-8 */
  39. transform: scale(1.05);
  40. }
  41.  
  42. .pro-card {
  43. background-color: #222428;
  44. width: 400px;
  45. border-radius: 5px;
  46. text-align: center;
  47. display: flex;
  48. flex-direction: column;
  49. align-items: center;
  50. justify-content: center;
  51. height: 700px;
  52. box-sizing: border-box;
  53. position: relative;
  54. margin: 30px;
  55. transition: transform .2s;
  56. }
  57.  
  58. .pro-card:hover {
  59. -ms-transform: scale(1.05); /* IE 9 */
  60. -webkit-transform: scale(1.05); /* Safari 3-8 */
  61. transform: scale(1.05);
  62. }
  63.  
  64. .title {
  65. font-size: 40px;
  66. font-weight: 800;
  67. margin-top: 10px;
  68. position: absolute;
  69. top: 0;
  70. }
  71.  
  72. .icon {
  73. height: 70px;
  74. }
  75.  
  76. .icon-item {
  77. display: inline-block;
  78. vertical-align: top;
  79. margin: 10px;
  80. }
  81.  
  82. .icon-item-standard {
  83. margin-bottom: 70px;
  84. }
  85.  
  86. .icon-title {
  87. font-size: 12px;
  88. font-weight: 700;
  89. margin-top: 10px;
  90. }
  91.  
  92. .vista {
  93. font-size: 12px;
  94. color: rgb(136, 136, 136);
  95. }
  96.  
  97. .primary-price {
  98. font-size: 30px;
  99. font-weight: 700;
  100. margin-top: 20px;
  101. margin-bottom: 20px;
  102. line-height: 0.2;
  103. }
  104.  
  105. .real-simbol {
  106. font-size: 20px;
  107. }
  108.  
  109. .payment-options {
  110. font-size: 12px;
  111. color: rgb(136, 136, 136);
  112. }
  113.  
  114. a {
  115. text-decoration: none;
  116. color: black;
  117. font-weight: 700;
  118. }
  119.  
  120. .normal-button {
  121. background-color: #eaeaea;
  122. border: 1px solid black;
  123. border-radius: 5px;
  124. padding: 7px;
  125. width: 150px;
  126. height: 40px;
  127. margin-top: 50px;
  128. margin-bottom: 30px;
  129. position: absolute;
  130. bottom: 0;
  131. }
  132.  
  133. .pro-button {
  134. background-color: #222428;
  135. border: 1px solid #eaeaea;
  136. border-radius: 5px;
  137. padding: 7px;
  138. width: 150px;
  139. height: 40px;
  140. margin-top: 50px;
  141. margin-bottom: 30px;
  142. position: absolute;
  143. bottom: 0;
  144. }
  145.  
  146. .old-price {
  147. margin-top: 10px;
  148. margin-bottom: 20px;
  149. font-size: 20px;
  150. text-decoration: line-through;
  151. }
  152.  
  153. .discount {
  154. font-size: 15px;
  155. margin-top: 20px;
  156. color: rgb(95, 173, 16);
  157. }
  158.  
  159. .white-color-font {
  160. color: #eaeaea;
  161. ;
  162. }
  163. </style>
  164.  
  165. <div class="cards">
  166. <!--CARD 1-->
  167. <div class="normal-card" >
  168. <p class="title">STANDARD</p>
  169.  
  170. <div class="icon-container">
  171. <div class="icon-item ft-digital icon-item-standard">
  172. <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-FD-valor-P.png" alt="Ícone fotografia digital">
  173. <p class="icon-title">FOTOGRAFIA<br>DIGITAL</p>
  174. </div>
  175. </div>
  176.  
  177. <p class="vista">à vista</p>
  178. <p class="primary-price"><span class="real-simbol">R$</span>720</p>
  179. <p class="payment-options">ou 5x R$156 no cartão<br>ou 3x R$260 no boleto</p>
  180.  
  181.  
  182. <span class="btn-container"><a href="" class="custom-link btn border-width-0 btn-default btn-round btn-outline btn-icon-left btn-ripple-in btn-border-animated">INSCREVER-SE</a></span>
  183. </div>
  184.  
  185. <!--CARD 2-->
  186. <div class="pro-card" >
  187. <p class="title white-color-font">PRO</p>
  188.  
  189. <div class="icon-container">
  190. <div class="icon-item ft-digital">
  191. <p class="white-color-font">R$780</p >
  192. <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-FD-valor-B.png" alt="Ícone fotografia digital">
  193. <p class="icon-title white-color-font">FOTOGRAFIA<br>DIGITAL</p>
  194. </div>
  195. <div class="icon-item lightroom">
  196. <p class="white-color-font">R$360</p>
  197. <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-LR-valor-B.png" alt="Ícone fotografia digital">
  198. <p class="icon-title white-color-font">LIGHTROOM</p>
  199. </div>
  200. <div class="icon-item photoshop">
  201. <p class="white-color-font">R$450</p>
  202. <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-PS-valor-B.png" alt="Ícone fotografia digital">
  203. <p class="icon-title white-color-font">PHOTOSHOP</p>
  204. </div>
  205. </div>
  206.  
  207. <p class="old-price white-color-font">R$1590</p>
  208.  
  209. <p class="vista">à vista</p>
  210. <p class="primary-price white-color-font"><span class="real-simbol">R$</span>1230</p>
  211. <p class="payment-options">ou 6x R$234 no cartão<br>ou 4x R$350 no boleto</p>
  212.  
  213. <p class="discount "><span class="discount-primary">Economize R$360</span><br>à vista</p>
  214.  
  215. <span class="btn-container"><a href="" class="custom-link btn border-width-0 btn-color-lxmt btn-round btn-outline btn-icon-left btn-ripple-in btn-border-animated">INSCREVER-SE</a></span>
  216. </div>
  217.  
  218. <!--CARD 3-->
  219. <div class="normal-card" >
  220. <p class="title ">PLUS</p>
  221.  
  222. <div class="icon-container">
  223. <div class="icon-item ft-digital">
  224. <p>R$780</p >
  225. <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-FD-valor-P.png" alt="Ícone fotografia digital">
  226. <p class="icon-title ">FOTOGRAFIA<br>DIGITAL</p>
  227. </div>
  228. <div class="icon-item lightroom">
  229. <p>R$360</p>
  230. <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-LR-valor-P.png" alt="Ícone fotografia digital">
  231. <p class="icon-title ">LIGHTROOM</p>
  232. </div>
  233. </div>
  234.  
  235. <p class="old-price ">R$1140</p>
  236.  
  237. <p class="vista">à vista</p>
  238. <p class="primary-price "><span class="real-simbol">R$</span>980</p>
  239. <p class="payment-options">ou 6x R$177,5 no cartão<br>ou 3x R$355 no boleto</p>
  240.  
  241. <p class="discount "><span class="discount-primary">Economize R$160</span><br>à vista</p>
  242.  
  243. <span class="btn-container"><a href="" class="custom-link btn border-width-0 btn-default btn-round btn-outline btn-icon-left btn-ripple-in btn-border-animated">INSCREVER-SE</a></span>
  244.  
  245. </div>
  246. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement