ft pg
Prompt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Assignment Front Page - Modern Executive Edition</title> <style> @page { size: A4 portrait; margin: 0; } * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 210mm; height: 297mm; margin: 0 auto; background: #ffffff; font-family: 'Segoe UI', Arial, sans-serif; color: #1e293b; display: flex; justify-content: center; align-items: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-container { position: relative; width: 196mm; height: 283mm; border: 3px solid #0f172a; background: #ffffff; padding: 14mm 16mm; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } /* Elegant Modern Inset Border */ .page-container::before { content: ""; position: absolute; inset: 5px; border: 1.5px solid #d97706; pointer-events: none; } .page-container::after { content: ""; position: absolute; inset: 9px; border: 0.75px solid #0f172a; pointer-events: none; } /* Header Section */ .header-box { text-align: center; } .badge-tag { display: inline-block; background: #0f172a; color: #f8fafc; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; padding: 5px 22px; border-radius: 4px; margin-bottom: 8px; } .main-title { font-size: 26px; font-weight: 800; color: #991b1b; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } /* Teacher Block */ .sub-block { text-align: center; margin-bottom: 14px; } .sub-tag { font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: 1.5px; text-transform: uppercase; } .teacher-name { font-size: 20px; font-weight: 700; color: #0f172a; margin-top: 2px; } .teacher-dept { font-size: 14px; font-style: italic; color: #d97706; font-weight: 600; } /* College Emblem Section */ .emblem-wrapper { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 10px; } .emblem-wrapper svg { width: 72px; height: 72px; } .dept-header { text-align: center; margin-bottom: 14px; } .dept-header h2 { font-size: 22px; font-weight: 800; color: #1e3a8a; letter-spacing: 1.2px; } .dept-header p { font-size: 13px; font-weight: 700; color: #475569; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; } /* Data Section Ribbon */ .section-ribbon { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .ribbon-text { background: #991b1b; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 3px 20px; border-radius: 3px; } /* Tables */ .detail-table { width: 95%; margin: 0 auto; border-collapse: collapse; font-size: 13.5px; } .detail-table td { padding: 5px 6px; vertical-align: middle; } .detail-table td.col-icon { width: 32px; text-align: center; } .detail-table td.col-label { width: 140px; font-weight: 700; color: #1e293b; } .detail-table td.col-sep { width: 20px; font-weight: 700; text-align: center; color: #64748b; } .detail-table td.col-value { font-weight: 600; color: #0f172a; } .icon-box { width: 24px; height: 24px; background: #0f172a; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 11px; } /* Footer */ .footer-bar { width: 95%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; font-size: 13.5px; font-weight: 700; color: #1e293b; padding-top: 10px; border-top: 1px solid #cbd5e1; } </style> </head> <body> <div class="page-container"> <!-- Top Header --> <div class="header-box"> <div class="badge-tag">Academic Submission</div> <div class="main-title">Assignment for Internal Assessment</div> <div class="sub-block"> <div class="sub-tag">Submitted To</div> <div class="teacher-name">Dr. BHUGENDRA CHUTIA</div> <div class="teacher-dept">Department of Chemistry</div> </div> </div> <!-- Center Institution Emblem --> <div> <div class="emblem-wrapper"> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="47" fill="#f8fafc" stroke="#0f172a" stroke-width="3"/> <circle cx="50" cy="50" r="40" fill="#fffbeb" stroke="#d97706" stroke-width="1.5"/> <path d="M 35 62 Q 50 42 65 62 Z" fill="#b91c1c"/> <circle cx="50" cy="46" r="6" fill="#f59e0b"/> </svg> </div> <div class="dept-header"> <h2>DEPARTMENT OF CHEMISTRY</h2> <p>Basugaon College, Basugaon, Chirang</p> </div> </div> <!-- Academic Credentials --> <div> <div class="section-ribbon"> <div class="ribbon-text">Course Details</div> </div> <table class="detail-table"> <tr> <td class="col-icon"><div class="icon-box">🎓</div></td> <td class="col-label">Degree</td> <td class="col-sep">:-</td> <td class="col-value">Bachelor of Science (B.Sc.)</td> </tr> <tr> <td class="col-icon"><div class="icon-box">📅</div></td> <td class="col-label">Semester (Session)</td> <td class="col-sep">:-</td> <td class="col-value">1st Semester (2026 – 2027)</td> </tr> <tr> <td class="col-icon"><div class="icon-box">📄</div></td> <td class="col-label">Course Code</td> <td class="col-sep">:-</td> <td class="col-value">CHMMAJ101-4</td> </tr> <tr> <td class="col-icon"><div class="icon-box">📖</div></td> <td class="col-label">Course Title / Topic</td> <td class="col-sep">:-</td> <td class="col-value">Schrodinger's Wave Equation & Significance Between Ψ (Psi) and Ψ² (Psi²)</td> </tr> </table> </div> <!-- Student Info --> <div> <div class="section-ribbon"> <div class="ribbon-text" style="background:#0f172a;">Submitted By</div> </div> <table class="detail-table"> <tr> <td class="col-icon"><div class="icon-box">👤</div></td> <td class="col-label">Full Name</td> <td class="col-sep">:-</td> <td class="col-value">PRATHAM CHAKRABORTY</td> </tr> <tr> <td class="col-icon"><div class="icon-box">🆔</div></td> <td class="col-label">Roll No.</td> <td class="col-sep">:-</td> <td class="col-value">2655003114</td> </tr> <tr> <td class="col-icon"><div class="icon-box">📋</div></td> <td class="col-label">Registration No.</td> <td class="col-sep">:-</td> <td class="col-value">26052781</td> </tr> </table> </div> <!-- Footer Signature Line --> <div class="footer-bar"> <div>Signature of Student: ___________________</div> <div>Date of Submission: ___________________</div> </div> </div> </body> </html>
