Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- body {
- font-family: 'Poppins', sans-serif;
- }
- .cards {
- display: flex;
- with: 100%;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- }
- .normal-card {
- background-color: #eaeaea;
- width: 350px;
- border-radius: 5px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 650px;
- box-sizing: border-box;
- position: relative;
- margin: 30px;
- transition: transform .2s;
- }
- .normal-card:hover {
- -ms-transform: scale(1.05); /* IE 9 */
- -webkit-transform: scale(1.05); /* Safari 3-8 */
- transform: scale(1.05);
- }
- .pro-card {
- background-color: #222428;
- width: 400px;
- border-radius: 5px;
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 700px;
- box-sizing: border-box;
- position: relative;
- margin: 30px;
- transition: transform .2s;
- }
- .pro-card:hover {
- -ms-transform: scale(1.05); /* IE 9 */
- -webkit-transform: scale(1.05); /* Safari 3-8 */
- transform: scale(1.05);
- }
- .title {
- font-size: 40px;
- font-weight: 800;
- margin-top: 10px;
- position: absolute;
- top: 0;
- }
- .icon {
- height: 70px;
- }
- .icon-item {
- display: inline-block;
- vertical-align: top;
- margin: 10px;
- }
- .icon-item-standard {
- margin-bottom: 70px;
- }
- .icon-title {
- font-size: 12px;
- font-weight: 700;
- margin-top: 10px;
- }
- .vista {
- font-size: 12px;
- color: rgb(136, 136, 136);
- }
- .primary-price {
- font-size: 30px;
- font-weight: 700;
- margin-top: 20px;
- margin-bottom: 20px;
- line-height: 0.2;
- }
- .real-simbol {
- font-size: 20px;
- }
- .payment-options {
- font-size: 12px;
- color: rgb(136, 136, 136);
- }
- a {
- text-decoration: none;
- color: black;
- font-weight: 700;
- }
- .normal-button {
- background-color: #eaeaea;
- border: 1px solid black;
- border-radius: 5px;
- padding: 7px;
- width: 150px;
- height: 40px;
- margin-top: 50px;
- margin-bottom: 30px;
- position: absolute;
- bottom: 0;
- }
- .pro-button {
- background-color: #222428;
- border: 1px solid #eaeaea;
- border-radius: 5px;
- padding: 7px;
- width: 150px;
- height: 40px;
- margin-top: 50px;
- margin-bottom: 30px;
- position: absolute;
- bottom: 0;
- }
- .old-price {
- margin-top: 10px;
- margin-bottom: 20px;
- font-size: 20px;
- text-decoration: line-through;
- }
- .discount {
- font-size: 15px;
- margin-top: 20px;
- color: rgb(95, 173, 16);
- }
- .white-color-font {
- color: #eaeaea;
- ;
- }
- </style>
- <div class="cards">
- <!--CARD 1-->
- <div class="normal-card" >
- <p class="title">STANDARD</p>
- <div class="icon-container">
- <div class="icon-item ft-digital icon-item-standard">
- <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-FD-valor-P.png" alt="Ícone fotografia digital">
- <p class="icon-title">FOTOGRAFIA<br>DIGITAL</p>
- </div>
- </div>
- <p class="vista">à vista</p>
- <p class="primary-price"><span class="real-simbol">R$</span>720</p>
- <p class="payment-options">ou 5x R$156 no cartão<br>ou 3x R$260 no boleto</p>
- <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>
- </div>
- <!--CARD 2-->
- <div class="pro-card" >
- <p class="title white-color-font">PRO</p>
- <div class="icon-container">
- <div class="icon-item ft-digital">
- <p class="white-color-font">R$780</p >
- <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-FD-valor-B.png" alt="Ícone fotografia digital">
- <p class="icon-title white-color-font">FOTOGRAFIA<br>DIGITAL</p>
- </div>
- <div class="icon-item lightroom">
- <p class="white-color-font">R$360</p>
- <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-LR-valor-B.png" alt="Ícone fotografia digital">
- <p class="icon-title white-color-font">LIGHTROOM</p>
- </div>
- <div class="icon-item photoshop">
- <p class="white-color-font">R$450</p>
- <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-PS-valor-B.png" alt="Ícone fotografia digital">
- <p class="icon-title white-color-font">PHOTOSHOP</p>
- </div>
- </div>
- <p class="old-price white-color-font">R$1590</p>
- <p class="vista">à vista</p>
- <p class="primary-price white-color-font"><span class="real-simbol">R$</span>1230</p>
- <p class="payment-options">ou 6x R$234 no cartão<br>ou 4x R$350 no boleto</p>
- <p class="discount "><span class="discount-primary">Economize R$360</span><br>à vista</p>
- <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>
- </div>
- <!--CARD 3-->
- <div class="normal-card" >
- <p class="title ">PLUS</p>
- <div class="icon-container">
- <div class="icon-item ft-digital">
- <p>R$780</p >
- <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-FD-valor-P.png" alt="Ícone fotografia digital">
- <p class="icon-title ">FOTOGRAFIA<br>DIGITAL</p>
- </div>
- <div class="icon-item lightroom">
- <p>R$360</p>
- <img class="icon" src="https://elitefotodesign.com.br/wp-content/uploads/2020/01/icon-LR-valor-P.png" alt="Ícone fotografia digital">
- <p class="icon-title ">LIGHTROOM</p>
- </div>
- </div>
- <p class="old-price ">R$1140</p>
- <p class="vista">à vista</p>
- <p class="primary-price "><span class="real-simbol">R$</span>980</p>
- <p class="payment-options">ou 6x R$177,5 no cartão<br>ou 3x R$355 no boleto</p>
- <p class="discount "><span class="discount-primary">Economize R$160</span><br>à vista</p>
- <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>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement