Structuring HTML & CSS for Urlbox integration

Ask for Help
2

I have never used Urlbox, long time PDFMonkey user, but please try this to see if it helps.

HTML:

<body>
    <!-- Title/Header -->
    <header>
        <img src="your-company-logo.png" alt="Company Logo" height="100">
        <div>
            <div class="project-number">Project Number: [Project Number]</div>
            <div class="date">Date: [Date]</div>
            <div>Project Address: [Project Address]</div>
        </div>
    </header>

    <!-- Timesheet Details -->
    <section>
        <h2>Details.</h2>
        <div class="timesheet-row">
            <div>Client:</div>
            <div class="align-right">[Client]</div>
        </div>
        <div class="timesheet-row">
            <div>Surveyor:</div>
            <div class="align-right">[Surveyor]</div>
        </div>
        <div class="timesheet-row">
            <div>Assistant:</div>
            <div class="align-right">[Assistant]</div>
        </div>
        <div class="timesheet-row">
            <div>Start Time:</div>
            <div class="align-right">[Start Time]</div>
        </div>
    </section>

    <!-- Work Details -->
    <section>
        <h2>Work.</h2>
        <table>
            <thead>
                <tr>
                    <th>Plans Used</th>
                    <th>Works Conducted</th>
                    <th>Issues & Resolutions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>[Plans Used]</td>
                    <td>[Works Conducted]</td>
                    <td>[Issues & Resolutions]</td>
                </tr>
                <!-- Add more rows as needed -->
            </tbody>
        </table>
    </section>

    <!-- Billable Time -->
    <section>
        <h2>Time.</h2>
        <table>
            <thead>
                <tr>
                    <th>Billable Time</th>
                    <th>After Hours</th>
                    <th>Weekend</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>[Billable Time]</td>
                    <td>[After Hours]</td>
                    <td>[Weekend]</td>
                </tr>
            </tbody>
        </table>
        <div class="footnote">
            Additional charges may apply for work conducted after hours, on weekends, or with an assistant surveyor.
        </div>
        <div class="align-right"><br>
            <div>Authorised By: [Authorizing Person]</div>
            <div>[Signature]</div>
        </div>
    </section>
</body>

CSS:

body {
     font-family: Arial, sans-serif;
}
 header, section {
     margin: 20px;
     padding: 20px;
     border-radius: 10px;
     background-color: #f9f9f9;
}
 header {
     display: flex;
     align-items: center;
}
 header img {
     margin-right: 20px;
}
 header .project-number {
     color: #FC7B01;
     font-weight: bold;
}
 header .date {
     font-size: 1.5em;
     font-weight: bold;
     margin: 0;
}
 section table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
}
 section th, section td {
     padding: 8px;
     text-align: left;
}
 section h2 {
     margin-top: 0;
     color: #FC7B01;
}
 section div {
     margin-bottom: 10px;
}
 .footnote {
     font-size: 0.8em;
     color: #777;
     border-top: 1px solid #ccc;
     padding-top: 10px;
     margin-top: 10px;
}
 .align-right {
     text-align: right;
}
 .timesheet-row {
     display: flex;
     justify-content: space-between;
}
2 Likes