<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
    <title>Welocome On Board</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Inter", sans-serif;
        }

        .grid-container {
            margin-top: 70px;
            column-gap: 16px;
            column-count: 2;
        }

        @media screen and (max-width: 490px) {
            .grid-container {
                column-count: 1;
            }
        }
    </style>
</head>

<body>
<div style="
        width: 600px;
        margin: 0 auto;
        /* background-color: lightyellow; */
      ">
    <center>
        <img src="https://storage.googleapis.com/ez-crm-public-bucket/crmlogo.png" alt="" style=" margin-top: 30px" />
    </center>
    <div style="margin: 0 4%;">
        <div style="margin-top: 30px;">
            <img src="https://storage.googleapis.com/ez-crm-public-bucket/assets/reset-password.png" alt="" />
        </div>
        <div style="margin-top: 15px">
            <h1 style="font-size: 40px; font-weight: 600">Reset Password Request</h1>
        </div>
        <div style="display: flex; margin-top: 15px">
            <div>
                <h1 style="
                font-size: 16px;
                color: #696d79;
                margin-top: 5px;
                font-weight: 400;
              ">
                    Hello dear
                </h1>
            </div>
            <div style="
              margin-left: 10px;
              height: 36px;
              border-radius: 10px;
              background: #3f48541a;
            ">
                <h1 style="
                margin: 7px 15px;
                font-size: 16px;
                color: #3f4854;
                font-weight: 600;
              ">
                    {{name}}
                </h1>
            </div>
        </div>
        <div style="margin-top: 15px">
            <h1 style="font-size: 20px; font-weight: 600">
                Someone requested that the password be reset for the following account.
            </h1>
        </div>
        <div style="margin-top: 15px">
            <h1 style="font-size: 16px; font-weight: 400; color:gray">
                We received a request to reset the password for your account. If you did not make the request, please ignore this email. Otherwise, please use the button below to reset your password;
            </h1>
        </div>

        <center>
            <a href="{{URL}}" style="display: block; width: 100%; padding: 14px 0; margin-top: 30px; border-radius: 3px; background: #225DE7; color: #fff; font-size: 20px; font-weight: 400; text-align: center; text-decoration: none;" class="btn begin-btn" target="_blank">
                Reset Password
            </a>
        </center>

        <div style="margin-top: 20px">
            <h5 style="font-size: 16px; font-weight: 400; margin-top: 10px">
                Or copy and paste the URL into your browser;
            </h5>
            <a style="color: #225de7" href="{{URL}}">{{URL}}</a>
        </div>

        <!-- cards -->
        <div class="grid-container">
            <div class="grid-item">
                <div>
                    <img src="https://storage.googleapis.com/ez-crm-public-bucket/assets/lock.png" alt="" style="width: 100%;" />
                </div>
                <h1 style="
                    margin-top: 20px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #696d79;
                  ">
                    Update password?
                </h1>
                <h1 style="
                    margin-top: 10px;
                    width: 95%;
                    font-size: 24px;
                    font-weight: 600;
                  ">
                    Regularly updating your password enh...
                </h1>
                <div style="display: flex; margin-top: 15px; margin-bottom: 10px;">
                    <h1 style="font-size: 16px; font-weight: 600; color: #225de7">
                        Explore more
                    </h1>
                    <img src="https://storage.googleapis.com/ez-crm-public-bucket/arrow.png" alt="" style="margin-left: 10px; margin-top: 4px; width: 20px; height: 14px; object-fit: contain;" />
                </div>
            </div>
            <div class="grid-item">
                <div>
                    <img src="https://storage.googleapis.com/ez-crm-public-bucket/assets/typing.png" style="width: 100%;" />
                </div>
                <h1 style="
                    margin-top: 20px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #696d79;
                  ">
                    Hacked my password?
                </h1>
                <h1 style="
                    margin-top: 10px;
                    width: 95%;
                    font-size: 24px;
                    font-weight: 600;
                  ">
                    If your password has been compromised...
                </h1>
                <div style="display: flex; margin-top: 15px; margin-bottom: 10px;">
                    <h1 style="font-size: 16px; font-weight: 600; color: #225de7">
                        Explore more
                    </h1>
                    <img src="https://storage.googleapis.com/ez-crm-public-bucket/arrow.png" alt="" style="margin-left: 10px; margin-top: 4px; width: 20px; height: 14px; object-fit: contain;" />
                </div>
            </div>
        </div>
        <!-- cards end -->



        <div style="
            background-color: #dfe2e7;
            width: 100%;
            height: 2px;
            margin-top: 50px;
          "></div>

        <div style="margin-top: 50px;"></div>

        <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width: 50%; padding-right: 10px;">
                    <div style="margin-bottom: 20px">
                        <span><img src="https://storage.googleapis.com/ez-crm-public-bucket/gray-arrow.png" alt="" /></span>
                        <span style="font-size: 16px;font-weight: 600;color: #696d79;margin-left: 5px;">Help</span>
                    </div>
                    <div style="margin-bottom: 20px">
                        <span><img src="https://storage.googleapis.com/ez-crm-public-bucket/gray-arrow.png" alt="" /></span>
                        <span style="font-size: 16px;font-weight: 600;color: #696d79;margin-left: 5px;">CRM for
                                Business</span>
                    </div>
                    <div>
                        <span><img src="https://storage.googleapis.com/ez-crm-public-bucket/gray-arrow.png" alt="" /></span>
                        <span
                                style="font-size: 16px;font-weight: 600;color: #696d79;margin-left: 5px;">Unsubscribe</span>
                    </div>
                </td>
                <td style="width: 10%;"></td>
                <td style="width: 40%;">
                    <div style="margin-bottom: 20px">
                        <span><img src="https://storage.googleapis.com/ez-crm-public-bucket/gray-arrow.png" alt="" /></span>
                        <span style="font-size: 16px;font-weight: 600;color: #696d79;margin-left: 5px;">Privacy
                                Policy</span>
                    </div>
                    <div style="margin-bottom: 20px">
                        <span><img src="https://storage.googleapis.com/ez-crm-public-bucket/gray-arrow.png" alt="" /></span>
                        <span style="font-size: 16px;font-weight: 600;color: #696d79;margin-left: 5px;">Terms &
                                Conditions</span>
                    </div>

                    <div style="margin-bottom: 20px">
                        <span></span>
                        <span></span>
                    </div>
                </td>
            </tr>
        </table>


        <center>
            <div style="display: flex; width: fit-content; margin-top: 40px">
                <div
                        style="display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 30px; background-color: #e8eee1;">
                    <center style="width: 100%;">
                        <img style="width: 20px; margin-top: 10px; height: 20px;" src="https://storage.googleapis.com/ez-crm-public-bucket/facebook.png" alt="fb" />
                    </center>
                </div>
                <div
                        style="margin-left: 10px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 30px; background-color: #e8eee1;">
                    <center style="width: 100%;">
                        <img style="width: 20px; margin-top: 10px; height: 20px;" src="https://storage.googleapis.com/ez-crm-public-bucket/twitter.png" alt="x" />
                    </center>
                </div>
                <div
                        style="margin-left: 10px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 30px; background-color: #e8eee1;">
                    <center style="width: 100%;">
                        <img style="width: 20px; margin-top: 10px; height: 20px;" src="https://storage.googleapis.com/ez-crm-public-bucket/instagram.png" alt="insta" />
                    </center>
                </div>
            </div>
        </center>

        <div style="margin-top: 30px; ">
            <p style="font-size: 14px;font-weight: 400;color: #696D79;">
                © 2024 CRM Inc. All Rights Reserved. CRM is a registered trademark of CRM, Inc. All other trademarks
                are the property of their owners. Log in and manage your notification choices under <span><a style=" color: #696D79;" href="">Settings</a></span>.
            </p>
        </div>

        <div style="margin-top: 20px;padding-bottom: 25px; ">
            <p style="font-size: 14px;font-weight: 400;color: #696D79;">
                CRM | 1234 Maple Street, Apt 567, Springfield, IL 62704, US
            </p>
        </div>


    </div>
</div>

<script>
    document.getElementById('anchor').addEventListener('click', function (event) {
        event.preventDefault();
    });
</script>
</body>

</html>