visual.html

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- FONTS -->
        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
        <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); </style>
        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
        <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); </style>

        <link rel="stylesheet" href="styles.css">
        <title>Pricing</title>
    </head>

    <body>
        <div class="outerContainer">
            <div class="innerContainer">
                <div class="adContainer">
                    <h1>Save Your</h1>
                    <h1 style="font-weight:900;">Money Wisely.</h1><br>
                    <p>Manage your money easily with our new budgeting finance bot. 
                        Join our pro plan for extra services and elite care.<br><br>You
                        can start 14 days of a free Pro plan or stay with Lite for free.</p>
                    <img class="moneyImage" src="MoneyImage.png">
                </div>
                <div class="rightContainer">
                    <div class="packagesContainer">
                        <div class="liteContainer">
                            <h1 style="font-weight:900;">Lite</h1>
                            <p style="font-weight:bold;">Plan includes</p>
                            <ul>
                                <li>Archived messages for 30 days.</li>
                                <li>Unlimited messaging on your account.</li>
                                <li>Chat bot service.</li>
                                <li>Free forever!</li>
                            </ul>
                            <div class="liteButtonContainer">
                            <button class="liteButton">Start 14 days of free Pro plan</button>
                            </div>
                        </div>
                        <div class="proContainer">
                            <h1 style="font-weight:900;">Pro</h1>
                            <p style="font-weight:bold;">Plan includes</p>
                            <ul>
                                <li>Archived messages for unlimited time.</li>
                                <li>Unlimited messaging on your account & other apps</li>
                                <li>Chat bot service & 24/7 customer service.</li>
                                <li>AI reccomendations.</li>
                            </ul>
                            <div class="proButtonContainer">
                                <button class="proButton">Start 14 days of free Pro plan</button>
                            </div>
                        </div>
                    </div>
                    <div class="topVerbiage">
                        <h1 style="line-height: 100%;">Start your<br><strong>free plan</strong> now.</h1>
                        <p style="font-size: 10px; margin-right: 1rem; margin-left: auto;">Are you a corporate? Click Here.</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>