Bilingual eBook Template Prompt

Use the prompt below to generate an HTML template for a bilingual ebook.

Template Generation Prompt

<!doctype html> 
<html lang="bn"> 
<head> 
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> 
<title>eBook — দ্বিভাষিক</title> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> 
<style> :root{ --heading-blue:#0d6efd; --muted:#6c757d; --text:#111; --max-width:760px; --table-border:#e6e7e9; --table-header-bg:#f5f7fa; }
html,body{height:100%;margin:0;padding:0;background:#ffffff;color:var(--text);-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{font-family:'Noto Sans Bengali','Noto Sans',Arial,sans-serif;font-size:17px;line-height:1.7;color:var(--text);background:#fff;}
.container{max-width:var(--max-width);}
header h1{color:var(--heading-blue);font-size:28px;line-height:1.2;margin:0 0 .25rem 0;font-weight:700;}
.lead-small{color:var(--muted);font-size:15px;margin:0;}
section{margin-bottom:1.5rem;}
h2{color:var(--heading-blue);font-size:20px;margin:0 0 .5rem 0;}
h3{font-size:16px;margin:0 0 .5rem 0;}
p{margin:0 0 12px 0;text-align:justify;text-justify:inter-word;}
ul,ol{margin:0 0 12px 1.25rem;}
li{margin:6px 0;}
a{color:var(--heading-blue);text-decoration:none}
a:hover{text-decoration:underline}
.image-block{text-align:center;margin:18px 0}
img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto}
.caption{font-size:13px;color:var(--muted);margin-top:6px;text-align:center}
footer{font-size:14px;color:var(--muted);margin-top:2rem;text-align:center}

/* ---------- Global table styling (applied to all tables) ---------- */
.custom-table, table.custom-table {
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  font-size:15px;
  color:var(--text);
}

.book-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0d6efd;
  margin-bottom: .25rem;
  text-align: center;
}

.custom-table thead th {
  background: var(--table-header-bg);
  padding:12px 14px;
  border:1px solid var(--table-border);
  font-weight:700;
  text-align:center;
}

.custom-table tbody td {
  padding:12px 14px;
  border:1px solid var(--table-border);
  vertical-align:top;
  text-align:left;
}

/* First column narrower like your screenshot */
.custom-table tbody td:first-child,
.custom-table thead th:first-child {
  width:18%;
  white-space:nowrap;
}

/* Last column narrower */
.custom-table tbody td:last-child,
.custom-table thead th:last-child {
  width:22%;
  white-space:nowrap;
}

/* subtle row hover (non-colored in print) */
.custom-table tbody tr:hover td {
  background:transparent;
}

/* responsive wrapper so table can scroll on small screens */
.table-responsive-custom { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* English font handling */
[lang="en"], .en { font-family:'Roboto',sans-serif; direction:ltr; }

/* Print adjustments */
@media print {
  a { color:inherit; text-decoration:none; }
  .custom-table thead th { background: #f5f7fa !important; -webkit-print-color-adjust: exact; }
}
</style> 
</head> 
<body> 
<div class="container py-4">

<main>

</main>

<footer>
  <p class="mb-1">শিবপ্রসাদ মুখার্জি • যোগাযোগ: spmohq@gmail.com</p>
  <p>Copyright © 2025 — All rights reserved.</p>
</footer>

</div>

</body> 
</html>
Verify