ID Card Design in vertical

CSS
--------
 <style type="text/css">
        .card
        {
            box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            height: 40%;
            width: 55%;
            border-radius: 5px;
            margin: auto;
            text-align: left;
        }
        button
        {
            border: none;
            outline: 0;
            display: inline-block;
            padding: 8px;
            color: #000;
            background-color: #3e9dff;
            text-align: center;
            cursor: pointer;
            width: 100%;
            font-size: 18px;
            font-weight: bold;
        }
       
       
        .title
        {
            color: grey;
            font-size: 18px;
        }
    </style>

HTML Code :
-----------------------------------

<table class="card">
            <tr>
                <td colspan="3">
                    <img src="../images/NTR3.jpg" width="100%;" alt="Logo" />
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: center; background: #fcff4b;">
                    <asp:Image ID="imgpo" Width="100px" Height="90px" Style="margin: 2px 5px -86px 0;
                        float: right;" runat="server" onerror="this.onload = null; this.src='Documents/photo1.jpg';" />
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold; width: 120px;">
                    NAME
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="lblName" runat="server" CssClass="uppercase"></asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold;">
                    Father Name
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="lblFathername" runat="server"></asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold;">
                    Course
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="lblCourse" runat="server"></asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold;">
                    Valid Upto
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="lblValidity" runat="server">9 Months</asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold;">
                    Mobile No
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="lblMobileno" runat="server"></asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold;">
                    Blood Group
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="lblBloodgroup" runat="server"></asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td style="padding-left: 10px; font-weight: bold;">
                    ID CARD NO
                </td>
                <td>
                    :
                </td>
                <td style="font-weight: bold;">
                    <asp:Label ID="ldlIDCARDNO" runat="server">0000</asp:Label>
                </td>
            </tr>
            <tr style="background: #fcff4b;">
                <td colspan="3">
                    <img src="../images/IASSIGNATER4.jpg" style="margin: -40px 15px -86px 0; float: right;"
                        alt="sigen" />
                    <span style="float: right;padding: 0px 20px 5px 0;font-weight: bold;">Managing Director</span>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <table>
                        <tr>
                            <td>
                                <img src="../images/DLSC LOGO1.png" alt="Logo" style="width: 75px; height: 75px;
                                    margin: 0 0px 7px 0px;" />
                            </td>
                            <td>
                                <div>
                                    <span style="color: red; font-size: 22px; font-weight: bold;">Dr. Lakshmaiah IAS Study
                                        Circle</span><br />
                                    <span style="color: Black; font-size: 16px; font-weight: bold;">Ashoknagar 'X' Roads,
                                        Hyderabad-500 020.</span><br />
                                    <span style="color: Black; font-size: 16px; font-weight: bold; padding-left: 45px;">
                                        040-27671427 / +91-8500218036</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>