Inboxes List

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <style>
   * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; color: #1a1a1a; line-height: 1.6; padding: 40px 20px; } .letter-container { max-width: 800px; margin: 0 auto; background: #ffffff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); border-radius: 8px; overflow: hidden; } /* Letter body */ .letter-body { padding: 48px; } .content p { margin-bottom: 18px; font-size: 15px; color: #2d3748; text-align: justify; } /* Divider */ .divider { height: 1px; background: #e2e8f0; margin: 0 48px; } /* Project Documents section */ .documents-section { padding: 40px 48px 40px; background: #f8fafc; } .documents-section h2 { font-size: 18px; font-weight: 600; color: #1e3a5f; margin-bottom: 8px; letter-spacing: 0.3px; } .documents-section .section-desc { font-size: 13px; color: #64748b; margin-bottom: 28px; } .document-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .document-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px 20px; text-align: center; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .document-card:hover { box-shadow: 0 6px 20px rgba(30, 58, 95, 0.1); border-color: #cbd5e1; } .document-icon { width: 52px; height: 52px; margin: 0 auto 14px; background: #E5252A; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .document-icon span { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; } .document-card h3 { font-size: 15px; font-weight: 600; color: #1e3a5f; margin-bottom: 6px; } .document-card p { font-size: 12px; color: #64748b; margin-bottom: 18px; } .btn-open { display: inline-block; padding: 9px 22px; background: #1e3a5f; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 500; border-radius: 6px; border: none; cursor: pointer; transition: background 0.2s ease; } .btn-open:hover { background: #2c5282; } .btn-open:active { background: #163050; } /* Signature */ .signature { padding: 32px 48px 48px; font-size: 15px; color: #2d3748; } .signature p { margin-bottom: 4px; } .signature .name { font-weight: 700; margin-top: 2px; } .signature .title { font-size: 14px; color: #4a5568; } @media (max-width: 600px) { .letter-body, .documents-section, .signature { padding-left: 24px; padding-right: 24px; } .divider { margin: 0 24px; } }
  </style>
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <title>
   Request For Quotation
  </title>
 </head>
 <body>
  <div class="letter-container">
   <!-- Letter Body -->
   <div class="letter-body">
    <div class="content">
     <p>
      We are currently seeking a quotation for the project referenced below and would appreciate your review of the attached project plan, specifications, and drawings
     </p>
     <p>
      Please examine all provided documents carefully to ensure your quotation fully addresses the complete scope of work. Your proposal should include all materials, labor, equipment, and associated costs required to complete the project as specified.
     </p>
     <p>
      Should you need any additional information to prepare an accurate quotation, please do not hesitate to contact us. We look forward to receiving your proposal and discussing the project further.
     </p>
    </div>
   </div>
   <div class="divider">
   </div>
   <!-- Project Documents -->
   <div class="documents-section">
    <h2>
     Project Documents
    </h2>
    <p class="section-desc">
     Please review the following documents carefully before preparing your quotation.
    </p>
    <div class="document-grid">
     <!-- Project Plan -->
     <div class="document-card">
      <div class="document-icon">
       PDF
      </div>
      <h3>
       Project Plan
      </h3>
      <p>
       Overall project schedule, milestones &amp; deliverables
      </p>
      <a class="btn-open" onclick="alert('Link the actual Project Plan PDF here'); return false;">
       Open PDF
      </a>
     </div>
     <!-- Specification -->
     <div class="document-card">
      <div class="document-icon">
       PDF
      </div>
      <h3>
       Specification
      </h3>
      <p>
       Technical requirements, standards &amp; scope of work
      </p>
      <a class="btn-open" onclick="alert('Link the actual Specification PDF here'); return false;">
       Open PDF
      </a>
     </div>
     <!-- Technical Drawing -->
     <div class="document-card">
      <div class="document-icon">
       PDF
      </div>
      <h3>
       Technical Drawing
      </h3>
      <p>
       Detailed drawings, plans &amp; construction details
      </p>
      <a class="btn-open" onclick="alert('Link the actual Technical Drawing PDF here'); return false;">
       Open PDF
      </a>
     </div>
    </div>
   </div>
   <!-- Signature -->
   <div class="signature">
    <p>
     Thanks
    </p>
    <p class="name">
     madison Williams
    </p>
    <p class="title">
     Project Manager
    </p>
   </div>
  </div>
 </body>
</html>