Untitled

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif;
        }

        .cards {
            display: flex;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .pro-card {
            background-color: #222428;
            width: 450px;
            border-radius: 5px;
            text-align: center;
            display: flex;
            height: 750px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            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;
            color: white;
        }

        .icon-container {
            margin-bottom: 40px;
            margin-top: 20px;
        }

        .icon {
            height: 60px;
        }

        .icon-item {
            display: inline-block;
            vertical-align: top;
            margin-bottom: 15px;
            width: 20%;
        }

        .icon-title {
            font-size: 10px;
            font-weight: 700;
            margin-top: 3px;
        }

        .vista {
            font-size: 12px;
            color: white;
            font-weight: 100;
        }

        .primary-price {
            font-size: 35px;
            font-weight: 700;
            margin-top: 20px;
            margin-bottom: 20px;
            line-height: 0.2;
        }

        .real-simbol {
            font-size: 20px;
        }

        .payment-options {
            font-size: 12px;
            color: white;
            font-weight: 100;
        }

        a {
            text-decoration: none;
            color: white;
            font-weight: 700;
        }

        .pro-button {
            background-color: #222428;
            border: 1px solid #eaeaea;
            border-radius: 5px;
            padding: 7px;
            width: 150px;
            margin-bottom: 30px;
            position: absolute;
            bottom: 0;
        }

        .old-price {
            margin-bottom: 25px;
            font-size: 25px;
            text-decoration: line-through;
        }

        .discount {
            font-size: 15px;
            margin-top: 30px;
            margin-bottom: 30px;
            color: rgb(95, 173, 16);
        }

        .white-color-font {
            color: white;
        }

        .price-icon {
            font-weight: 200;
            color: white;
        }
    </style>

    <!--CARD 2-->
    <div class="pro-card">
        <p class="title white-color-font">PROFISSIONAL</p>

        <!-- Icones -->
        <div class="icon-container">
            <div class="icon-item ft-digital">
                <p class="price-icon">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="price-icon">R$260</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">COMPOSIÇÃO<br>FOTOGRÁFICA</p>
            </div>
            <div class="icon-item photoshop">
                <p class="price-icon">R$810</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<br>LIGHTROOM</p>
            </div>
            <div class="icon-item photoshop">
                <p class="price-icon">R$920</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">FOTOGRAFIA<br>DE EVENTOS</p>
            </div>
            <div class="icon-item photoshop">
                <p class="price-icon">R$580</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">ENSAIO<br>EXTERNOS</p>
            </div>
            <div class="icon-item photoshop">
                <p class="price-icon">R$720</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">FOTOGRAFIA<br>DE ESTÚDIO</p>
            </div>
            <div class="icon-item photoshop">
                <p class="price-icon">R$350</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">FOTOGRAFIA<br>COMO NEGÓCIO</p>
            </div>
        </div>

        <!-- Preço antigo -->
        <p class="old-price white-color-font">R$4420</p>

        <!-- Preço atual -->
        <p class="vista">à vista</p>
        <p class="primary-price white-color-font"><span class="real-simbol">R$</span>3320</p>
        <p class="payment-options">ou 10x R$350 no cartão<br>ou 8x R$438 no boleto</p>

        <!-- Valor do desconto -->
        <p class="discount "><b class="discount-primary">Economize R$1100</b><br>à vista</p>

        <!-- Botão -->
        <a class="pro-button" href="http://google.com">INSCREVER-SE</a>
    </div>
</body>

</html>