I work on web design page i face issue i can't reach to same web design below desired
what i try as below
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Invoice - ??????</title> <style> body { background-image: url('<!--INVOICE_WATERMARK_IMAGE-->'); background-size: auto; background-position: center; background-repeat:no-repeat; } /* Top banner styling */ .top-banner { padding: 10px; border: 4px solid #000080; /* Dark blue outer border */ } /* Center content */ .center-content { text-align: center; } .left-content { text-align: left; } .right-content { text-align: right; } .dark-blue { color: #000080; } .blue { color: #0103FF; } /* Center text */ .center-text { margin: 0; } /* Logo styling */ .logo { height: 50px; /* Adjust height as needed */ width: auto; } /* Right align text */ .right-align { text-align: right; } .bold-text { font-weight: bold; } /* Invoice container styling */ .invoice-box { margin: auto; font-size: 16px; font-family: Arial, sans-serif; border: 4px solid #000080; /* Dark blue outer border */ min-height: 1150px; /*page-break-after: always;*/ } .invoice-footer { margin: auto; font-size: 16px; font-family: Arial, sans-serif; border: 4px solid #000080; /* Dark blue outer border */ height:40px; } /* Header section styling */ .invoice-header { display: flex; justify-content: space-between; padding: 20px; /*border-bottom: 1px solid #ddd;*/ /* Light border on bottom */ } /* Invoice details section styling */ .invoice-details { padding: 20px; display: flex; justify-content: space-between; /*border-top: 1px solid #ddd;*/ /* Light border on top */ /*border-bottom: 1px solid #ddd;*/ /* Light border on bottom */ } table { width: 95%; border-collapse: collapse; margin: 0 auto; border: 1px solid white; /* Add white border to table */ } table th, table td { padding: 8px; border: 1px solid white; /* Add white border to table cells */ } th, td { padding: 10px; /* Adjust as needed */ } table { border-spacing: 20px; /* Adjust as needed */ } table th { text-align: left; } .items-headers { font-size: 20px; } /* Invoice total section styling */ .invoice-total { padding: 20px; text-align: right; } .invoice-total p { margin-bottom: 10px; } /* Invoice number container styling */ .invoice-number-container { background-color: #505E72; /* Green background */ color: #fff; /* White text */ padding: 3px; margin:10px; text-align: center; } /* Invoice number text styling */ .invoice-number { margin: 0; } /* Adjustments for printing */ @media print { .top-banner { display: table; width: 100%; color: #007bff; /* Dark blue text */ border-spacing: 0; border-collapse: collapse; border-top-left-radius: 10px; border-top-right-radius: 10px; } /*body { background-image: url('D:/Repos/SabayekWinApp/SabayekWinApp/Reports/images/invoice-watermark-image.png'); background-size: cover; background-position: center; }*/ .top-banner td { padding: 10px; text-align: center; } .invoice-box { width: 100%; border: none; /* Remove border for printing */ box-shadow: none; /* Remove box shadow for printing */ margin: 0; /* Remove margin for printing */ page-break-after: avoid; /* Avoid page breaks within the invoice */ } .invoice-header { border-bottom: none; /* Remove border for printing */ } } </style> </head> <body dir="rtl"> <div class="top-banner"> <table style="font-size:20px"> <tr> <td class="dark-blue"> <!--ADDRESS_AR--> <br /> </td> <td class="dark-blue" style="width:70%"> <div class="center-content"> <img src="your-logo.png" alt="Logo" class="logo" /><br /> <h2 class="center-text"><!--COMPANY_NAME--></h2> </div> </td> <td class="dark-blue" style="width:15%"> <!--ADDRESS_EN--><br /> </td> </tr> </table> </div> <div class="invoice-box"> <div class="invoice-number-container"> <h1 class="invoice-number"><!--INVOICE_TYPE--></h1> </div> <table style="font-size:20px;" class="invoice-details"> <tr> <td class="dark-blue bold-text" width="20%">??? ????????: </td> <td class="blue">1111</td> <td class="dark-blue bold-text" width="20%">???????: </td> <td class="blue">22222</td> </tr> <tr> <td class="dark-blue bold-text" width="20%">??? ??????: </td> <td class="blue">1111</td> <td class="dark-blue bold-text" width="20%">????? ??????: </td> <td class="blue">22222</td> </tr> <tr> <td class="dark-blue bold-text" width="20%">???????: </td> <td class="blue">1111</td> <td class="dark-blue bold-text" width="20%">??? ??????: </td> <td class="blue">22222</td> </tr> <tr> <td class="dark-blue bold-text" width="20%">???????: </td> <td class="blue">1111</td> <td class="dark-blue bold-text" width="20%">???? ?????: </td> <td class="blue">22222</td> </tr> </table> <table id="tableItems"> <thead style="background-color: #505E72;color:white"> <tr class="items-headers"> <th class="">?????</th> <th>?????</th> <th>??????</th> <th>?????</th> <th>??? ??????</th> <th>?????</th> <th>?????? ?????</th> <th>???????? ??????</th> <th>??? ???? ????????</th> <th>??? ??????</th> <th>?????? ?????</th> </tr> </thead> <tbody class="dark-blue" style="border:solid; border-color: #505E72"> <!--INVOICE_ITEMS--> <tr> <td style="">??? ???</td> <td>???????</td> <td>???? 21</td> <td>18g</td> <td>3000????</td> <td>30</td> <td>300</td> <td>100</td> <td>3100</td> <td>30</td> <td>3200</td> <!-- Add other cells here --> </tr> </tbody> </table> <div class="invoice-total"> <!--<p>Subtotal: $<span id="subtotal">50.00</span></p> <p>Tax (if applicable): $<span id="tax">0.00</span></p> <p>Total: $<span id="total">50.00</span></p>--> <table id="tableItems" style="margin-right:950px;width:50px;"> <thead style="background-color: #505E72;color:white"> <tr class="items-headers"> <th class="">????????</th> <th>100.0</th> <th>100.0</th> </tr> </thead> </table> </div> </div> <div class="invoice-footer center-content dark-blue"> <span class="right-align"> ???? ????? </span> <span class=""> ??? ??????: 1 / 1 </span> <span class="left-align"> ????? ??????? <!--PRINT_DATE--> </span> </div> </body> </html>
desired result i need as below