Dashboard by Sushant Rauniyar - Easy to use, Very responsive, multiple browsers support

Email / Report Template

<!-- Email / Report template -->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        margin: 0;
        padding: 0;
        min-width: 100%;
        width: 100% !important;
        height: 100% !important;
    }
    .mainbox {
        padding: 20px 0;
        width: 100%;
        height: 100%;
        background-color: #f0f0f0 !important;
    }

    .mainbox table,
    .mainbox td,
    .mainbox div,
    .mainbox p,
    .mainbox a {
        -webkit-font-smoothing: antialiased;
        text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    .mainbox table,
    .mainbox th,
    .mainbox td {
        border-collapse: collapse !important;
        border-spacing: 0;
        vertical-align: top;
    }
    .mainbox img {
        border: 0;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
    }
    @media all and (min-width: 560px) {
        .mainbox .container {
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -khtml-border-radius: 8px;
        }
    }
    .mainbox .box h2 {
        font-size: 24px;
        font-weight: bold;
        line-height: 130%;
        margin: 15px 0;
        color: #000000;
        text-align: center;
        font-family: sans-serif;
    }
    .mainbox .box th {
        width: auto;
        padding: 10px 20px;
    }
    .mainbox .box td {
        padding: 10px 20px;
        border: 1px solid #ddd;
    }
    .mainbox .box {
        padding: 1.5rem;
        width: 90%;
        max-width: 820px !important;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 15px;
    }
    .mainbox .flex {
        display: flex;
    }
    .mainbox p {
        font-weight: bold;
        margin-right: 1rem;

        line-height: 18px;
    }
    .mainbox td .flex p {
        width: 10rem;
        overflow-wrap: break-word;
    }
    .mainbox span {
        font-weight: 400;
        text-decoration: underline;
        line-height: 18px;
    }
    .mainbox .mb-3 {
        margin-bottom: 1.5rem !important;
    }
    .mainbox .pull-right {
        float: right;
    }

    @media all and (max-width: 720px) {
        .mainbox .container {
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -khtml-border-radius: 8px;
        }

        .mainbox td .flex p {
            width: 6rem;
            overflow-wrap: break-word;
        }

        .mainbox .flex {
            display: grid;
        }
    }
    @media print {
        body {
            zoom: 75%;
            margin: auto;
        }
        @page {
            /*size: landscape !important*/
            size: A4;
            margin: auto;
        }
        .mainbox,
        .mainbox .box {
            padding: 0.5rem 0.75rem;
            margin: 0;
            width: 100%;
            border: none !important;
            background: white !important;
        }
    }
</style>
<div class="mainbox">
    <div class="box">
        <table class="table" style="border-collapse: collapse; border-spacing: 0; width: 100%">
            <thead>
                <tr>
                    <th colspan="3">
                        <div class="flex pull-right" style="display: flex !important">
                            <p>Date:</p>
                            <span>YYYY/MM/DD</span>
                        </div>
                        <a href="#" style="max-width: 320px; display: block; margin: auto">
                            <img src="https://nams.org.np/images/logo.png" alt="logo" style="max-height: 100px; width: 100%; object-fit: contain" />
                        </a>
                    </th>
                </tr>
                <tr>
                    <th colspan="3">
                        <h2>Medical Report</h2>
                    </th>
                </tr>
                <tr>
                    <th>
                        <div class="flex mb-3">
                            <p>Name:</p>
                            <span>detail</span>
                        </div>
                        <div class="flex mb-3">
                            <p>Age:</p>
                            <span>detail</span>
                        </div>
                        <div class="flex mb-3">
                            <p>Sex:</p>
                            <span>detail</span>
                        </div>
                    </th>
                    <th>
                        <div class="flex mb-3">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                        <div class="flex mb-3">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </th>
                    <th>
                        <div class="flex mb-3">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                        <div class="flex mb-3">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="33.3%" style="height: 10rem">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%" style="height: 10rem">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td width="33.3%" style="height: 10rem">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 10rem">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="height: 10rem">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="height: 20rem">
                        <div class="flex">
                            <p>Field Name:</p>
                            <span>detail</span>
                        </div>
                    </td>
                    <td colspan="1" style="height: 20rem">
                        <div>
                            <img
                                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgsR0k0i6C-6IZmz7mJo-POnhK_LHQedUyMWn7qUGFWw&s"
                                style="height: 10rem; width: 100%; object-fit: contain"
                                class="mb-3"
                            />
                            <span style="border-top: 1px solid black; padding-top: 1rem; text-align: center; display: block">Signature</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <table style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit; width: 50%; max-width: 820px !important; margin: auto">
        <!-- FOOTER -->
        <!-- Set text color and font family ("sans-serif" or "Georgia, serif"). Duplicate all text styles in links, including line-height -->
        <tr>
            <td
                align="center"
                valign="top"
                style="
                    padding-left: 6.25%;
                    padding-right: 6.25%;
                    width: 87.5%;
                    font-size: 13px;
                    font-weight: 400;
                    padding-bottom: 20px;
                    color: #999999;
                    font-family: sans-serif;
                    border: none;
                "
                class="footer"
            >
                Nepal
                <br />
                <br />
                <div class="flex" style="place-content: center">
                    <a
                        href="tel:91231123213"
                        target="_blank"
                        style="text-decoration: underline; color: #999999; font-family: sans-serif; font-size: 13px; font-weight: 400; line-height: 150%"
                        >91231123213 ,
                    </a>

                    <a
                        href="tel:9851167832"
                        target="_blank"
                        style="text-decoration: underline; color: #999999; font-family: sans-serif; font-size: 13px; font-weight: 400; line-height: 150%"
                        >9851167832
                    </a>
                </div>
                <br />© All Rights Reserved.
            </td>
        </tr>
        <!-- End of WRAPPER -->
    </table>
</div>
Date: YYYY/MM/DD
Medical Report
Name: detail Age: detail Sex: detail	Field Name: detail Field Name: detail	Field Name: detail Field Name: detail
Field Name: detail	Field Name: detail	Field Name: detail
Field Name: detail	Field Name: detail	Field Name: detail
Field Name: detail	Field Name: detail	Field Name: detail
Field Name: detail	Field Name: detail	Field Name: detail
Field Name: detail
Field Name: detail
Field Name: detail		Signature
Nepal
91231123213 , 9851167832
Loading ...

Email / Report Template

Medical Report

Copyright © Sushant Rauniyar

All rights reserved.

Loading ...

Message

Notification

Email / Report Template

Medical Report

Copyright © Sushant Rauniyar

All rights reserved.
