JohannVelazquez
72b7602e8e
- Comunicaciones (REGISTRO #15–#21): respuesta v1.1 (10-jun), luz verde (16-jun), contrato (envío 25-jun, ajustes + firma 26-jun), arranque con Erika y kickoff 1-jul - Evidencia en fuentes/ (correos 8/10/16-jun, WhatsApp Paola y Erika) - Contratos (sin firmar y firmado) en propuesta/ - Plan de actividades Etapa 0–3 + guion del kickoff (planeacion/) - Skill proposal-pdf instalado (.claude/skills) + Propuesta-Balam.pdf regenerada - README/PENDIENTES al día; limpieza de archivos sueltos; .gitignore (locks de Office) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
367 lines
20 KiB
HTML
367 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
template.html — editorial proposal/report design system.
|
||
|
||
HOW TO USE
|
||
• Replace the example content with yours. Keep the component markup/classes.
|
||
• Every section that appears in the TOC gets a {{PG_key}} token in the TOC row
|
||
AND a matching entry in pdf.config.json -> "toc" whose value is a UNIQUE
|
||
phrase from that section's BODY (never the title — titles also render in the
|
||
TOC and would match there first). build_pdf.py fills the tokens automatically.
|
||
• The first page is a full-bleed cover thanks to @page:first { margin:0 }.
|
||
• Footer (confidential line + page number) is stamped by build_pdf.py, not here.
|
||
|
||
COMPONENT CHEAT-SHEET (classes you can reuse)
|
||
.cover .eyebrow/.rule/h1/.client/.meta-grid → cover page
|
||
.toc + .toc-row(.section) → table of contents
|
||
.sec + .sec-head/.sec-num/.kick → numbered section header
|
||
.sec-head.no-num → header with no big number
|
||
h3 > span.sn → sub-section heading (e.g. 2.1)
|
||
table / th / td.k / td.num / td.cov / .ctr → tables (key cell, numeric, coverage)
|
||
tr.total / tr.sub-total → emphasized table rows
|
||
table.compact → tighter table for dense data
|
||
.callout / .callout.cool → accent / navy info panels
|
||
.flow + .chip(.accent) → pipeline / step diagram
|
||
.synthesis + .stat → headline stat cards
|
||
p.lede → opening paragraph
|
||
p.drop → paragraph with drop cap
|
||
p.mini-label → small uppercase label
|
||
.etapa + .etapa-h → phase/stage block
|
||
.signoff → closing signature
|
||
.cover .logo (.txt | img.invert) → optional logo on the cover
|
||
.break → start the block on a new page
|
||
.keep / .no-break → keep a block from splitting across pages
|
||
-->
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="author" content="Your Name">
|
||
<title>Proposal Title</title>
|
||
<style>
|
||
/* ===========================================================================
|
||
DESIGN FONTS — embedded, so output does NOT depend on system-installed fonts.
|
||
The .ttf files ship in the skill at assets/fonts/. When you copy this template
|
||
to your working file, copy that fonts/ folder next to your HTML too (so these
|
||
url("fonts/…") paths resolve). Without it the PDF silently falls back to
|
||
Cambria/Calibri and won't match the intended look — build_pdf.py warns when
|
||
that happens. You don't need to edit this block.
|
||
=========================================================================== */
|
||
@font-face{ font-family:"Caladea"; font-style:normal; font-weight:400; src:url("fonts/Caladea-Regular.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Caladea"; font-style:normal; font-weight:700; src:url("fonts/Caladea-Bold.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Caladea"; font-style:italic; font-weight:400; src:url("fonts/Caladea-Italic.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Caladea"; font-style:italic; font-weight:700; src:url("fonts/Caladea-BoldItalic.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Carlito"; font-style:normal; font-weight:400; src:url("fonts/Carlito-Regular.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Carlito"; font-style:normal; font-weight:700; src:url("fonts/Carlito-Bold.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Carlito"; font-style:italic; font-weight:400; src:url("fonts/Carlito-Italic.ttf") format("truetype"); }
|
||
@font-face{ font-family:"Carlito"; font-style:italic; font-weight:700; src:url("fonts/Carlito-BoldItalic.ttf") format("truetype"); }
|
||
@font-face{ font-family:"DejaVu Sans Mono"; font-style:normal; font-weight:400; src:url("fonts/DejaVuSansMono.ttf") format("truetype"); }
|
||
|
||
:root{
|
||
--ink:#1C2B39; /* deep navy — primary text + cover */
|
||
--ink-soft:#33424F; /* secondary text */
|
||
--muted:#6B7682; /* captions, footers */
|
||
--accent:#BC5B3E; /* terracotta — the single accent */
|
||
--accent-d:#9E4A30; /* darker terracotta for emphasis on tint */
|
||
--accent-tint:#F6E9E3; /* faint terracotta fill */
|
||
--cream:#F4EFEA; /* warm panel fill */
|
||
--line:#D9DEE3; /* hairlines */
|
||
--serif:"Caladea", Georgia, "Times New Roman", serif;
|
||
--sans:"Carlito", "Helvetica Neue", Arial, sans-serif;
|
||
--mono:"DejaVu Sans Mono", "SFMono-Regular", Consolas, monospace;
|
||
}
|
||
|
||
/* For A4: change size to A4 here AND set "page_size":"A4" in pdf.config.json. */
|
||
@page{ size:Letter; margin:15mm 16mm 18mm 16mm; }
|
||
@page :first{ margin:0; } /* full-bleed cover */
|
||
|
||
*{ box-sizing:border-box; }
|
||
html,body{ margin:0; padding:0; }
|
||
body{
|
||
font-family:var(--sans); color:var(--ink-soft);
|
||
font-size:10pt; line-height:1.5;
|
||
-webkit-print-color-adjust:exact; print-color-adjust:exact;
|
||
}
|
||
p{ margin:0 0 7pt; }
|
||
strong,b{ color:var(--ink); font-weight:700; }
|
||
em{ font-style:italic; }
|
||
code{
|
||
font-family:var(--mono); font-size:8.6pt;
|
||
background:var(--cream); padding:.5pt 3pt; border-radius:2pt; color:var(--ink);
|
||
}
|
||
a{ color:var(--accent-d); text-decoration:none; }
|
||
|
||
/* ---------- COVER ---------- */
|
||
.cover{
|
||
width:216mm; min-height:279mm; background:var(--ink); color:#EAEDF0;
|
||
padding:30mm 26mm 24mm; display:flex; flex-direction:column;
|
||
position:relative; overflow:hidden;
|
||
}
|
||
.cover::after{ /* faint geometric corner motif */
|
||
content:""; position:absolute; right:-60mm; top:-60mm;
|
||
width:150mm; height:150mm; border-radius:50%;
|
||
background:radial-gradient(circle at center, rgba(188,91,62,.18), rgba(188,91,62,0) 70%);
|
||
}
|
||
.cover .top,.cover .mid,.cover .meta{ position:relative; z-index:2; }
|
||
.cover .rule{ width:46pt; height:3pt; background:var(--accent); margin-bottom:14pt; }
|
||
.cover .eyebrow{
|
||
font-size:9pt; letter-spacing:.32em; text-transform:uppercase; color:#9FB0BF; font-weight:700;
|
||
}
|
||
/* Optional logo slot (top of cover). Use a text mark or an <img>.
|
||
.invert flips a dark logo to white for the navy cover. */
|
||
.cover .logo{ margin-bottom:16pt; }
|
||
.cover .logo .txt{ font-family:var(--serif); font-weight:700; font-size:14pt; color:#fff; letter-spacing:.01em; }
|
||
.cover .logo img{ height:30pt; width:auto; }
|
||
.cover .logo img.invert{ filter:brightness(0) invert(1); opacity:.92; }
|
||
.cover .mid{ margin-top:auto; margin-bottom:auto; padding:18mm 0; }
|
||
.cover h1{
|
||
font-family:var(--serif); font-weight:700; font-size:37pt; line-height:1.06;
|
||
letter-spacing:-.01em; margin:0; color:#FFFFFF; max-width:150mm;
|
||
}
|
||
.cover .client{ margin-top:16pt; font-family:var(--sans); font-size:12.5pt; color:#C9D1D8; }
|
||
.cover .client b{ color:var(--accent); font-weight:700; }
|
||
.cover .confidential{
|
||
margin-top:18pt; display:flex; justify-content:space-between;
|
||
font-size:8pt; letter-spacing:.18em; text-transform:uppercase; color:#7E8C99;
|
||
}
|
||
.meta-grid{ display:grid; grid-template-columns:34mm 1fr; gap:6pt 10pt; margin:0; font-size:9.2pt; }
|
||
.meta-grid dt{ color:#8A98A5; text-transform:uppercase; letter-spacing:.12em; font-size:7.6pt; padding-top:1.5pt; }
|
||
.meta-grid dd{ margin:0; color:#D7DDE2; }
|
||
.meta-grid dd .who{ display:block; }
|
||
.meta-grid dd .who b{ color:#FFFFFF; font-weight:700; }
|
||
.meta-grid dd .who span{ color:#9FB0BF; }
|
||
|
||
/* ---------- TOC ---------- */
|
||
.toc{ break-before:page; padding-top:6mm; }
|
||
.kick{ font-size:8.5pt; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:700; }
|
||
.toc h2{ font-family:var(--serif); font-size:26pt; font-weight:700; color:var(--ink); margin:2pt 0 4pt; }
|
||
.toc .bar{ width:40pt; height:3pt; background:var(--accent); margin:6pt 0 16pt; }
|
||
.toc-row{ display:flex; align-items:baseline; gap:8pt; padding:7pt 0; border-bottom:.6pt solid var(--line); font-size:10.5pt; }
|
||
.toc-row .n{ width:22pt; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
|
||
.toc-row .t{ color:var(--ink); }
|
||
.toc-row.section .t{ font-weight:700; }
|
||
.toc-row .dots{ flex:1; border-bottom:1pt dotted var(--line); transform:translateY(-3pt); }
|
||
.toc-row .pg{ color:var(--muted); font-variant-numeric:tabular-nums; }
|
||
|
||
/* ---------- SECTIONS ---------- */
|
||
.content{ break-before:page; }
|
||
.sec{ margin-bottom:14pt; }
|
||
.sec-head{ display:flex; gap:12pt; align-items:flex-start; border-bottom:1.4pt solid var(--ink); padding-bottom:6pt; margin:0 0 11pt; }
|
||
.sec-head .sec-num{ font-family:var(--serif); font-size:30pt; font-weight:700; line-height:.9; color:var(--accent); min-width:42pt; }
|
||
.sec-head h2{ font-family:var(--serif); font-size:19pt; font-weight:700; color:var(--ink); margin:4pt 0 0; }
|
||
.sec-head .kick{ display:block; margin-bottom:2pt; }
|
||
.sec-head.no-num{ border-bottom-width:1.4pt; }
|
||
.sec-head.no-num h2{ margin-top:0; }
|
||
|
||
h3{ font-family:var(--sans); font-size:11.5pt; font-weight:700; color:var(--ink); margin:13pt 0 5pt; }
|
||
h3 .sn{ color:var(--accent); font-weight:700; margin-right:7pt; }
|
||
h4{ font-family:var(--sans); font-size:9.5pt; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:10pt 0 3pt; }
|
||
|
||
p.lede{ font-size:11pt; color:var(--ink-soft); }
|
||
p.drop::first-letter{
|
||
font-family:var(--serif); font-size:34pt; font-weight:700; color:var(--accent);
|
||
float:left; line-height:.82; padding:2pt 6pt 0 0;
|
||
}
|
||
p.mini-label{ font-size:8pt; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-d); font-weight:700; margin:9pt 0 1pt; }
|
||
|
||
ul,ol{ margin:4pt 0 8pt; padding-left:16pt; }
|
||
li{ margin:0 0 3.5pt; padding-left:2pt; }
|
||
li::marker{ color:var(--accent); }
|
||
|
||
/* ---------- TABLES ---------- */
|
||
table{ width:100%; border-collapse:collapse; margin:10pt 0; font-size:9.2pt; }
|
||
thead th{
|
||
text-align:left; font-size:7.8pt; letter-spacing:.07em; text-transform:uppercase;
|
||
color:#FFFFFF; background:var(--ink); padding:5pt 8pt; font-weight:700;
|
||
}
|
||
thead th.num,thead th.ctr{ text-align:right; }
|
||
thead th.ctr{ text-align:center; }
|
||
tbody td{ padding:5.5pt 8pt; border-bottom:.6pt solid var(--line); vertical-align:top; }
|
||
tbody tr:nth-child(even) td{ background:#FBFAF8; }
|
||
td.k{ color:var(--ink); font-weight:600; }
|
||
.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
|
||
tr.total td{ font-weight:700; color:var(--ink); background:var(--cream); border-top:1.2pt solid var(--ink); border-bottom:1.2pt solid var(--ink); }
|
||
tr.sub-total td{ font-weight:700; color:var(--ink); background:var(--accent-tint); border-top:1pt solid var(--accent); }
|
||
td.cov{ font-size:11pt; text-align:center; line-height:1; }
|
||
table.compact tbody td{ padding:4pt 8pt; }
|
||
table.compact{ font-size:8.8pt; }
|
||
|
||
/* ---------- CALLOUTS ---------- */
|
||
.callout{
|
||
background:var(--accent-tint); border-left:3pt solid var(--accent);
|
||
padding:9pt 12pt; margin:10pt 0; font-size:9.4pt; color:var(--ink-soft); border-radius:0 3pt 3pt 0;
|
||
}
|
||
.callout strong,.callout b{ color:var(--accent-d); }
|
||
.callout.cool{ background:var(--cream); border-left-color:var(--ink); }
|
||
.callout.cool strong,.callout.cool b{ color:var(--ink); }
|
||
|
||
/* ---------- FLOW / PIPELINE ---------- */
|
||
.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:5pt; margin:10pt 0; }
|
||
.flow .chip{
|
||
background:#fff; border:1pt solid var(--line); border-radius:4pt;
|
||
padding:4pt 9pt; font-size:8.6pt; font-weight:600; color:var(--ink-soft); white-space:nowrap;
|
||
}
|
||
.flow .chip.accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
|
||
.flow .arrow{ color:var(--accent); font-weight:700; }
|
||
|
||
/* ---------- SYNTHESIS STATS ---------- */
|
||
.synthesis{ display:flex; gap:10pt; margin:12pt 0; }
|
||
.synthesis .stat{ flex:1; background:var(--ink); color:#EAEDF0; border-radius:5pt; padding:11pt 13pt; }
|
||
.synthesis .stat .big{ font-family:var(--serif); font-size:21pt; font-weight:700; color:#fff; line-height:1; }
|
||
.synthesis .stat .lab{ font-size:8pt; letter-spacing:.08em; text-transform:uppercase; color:#9FB0BF; margin-top:4pt; }
|
||
|
||
/* ---------- PHASE / STAGE ---------- */
|
||
.etapa{ border:1pt solid var(--line); border-left:3pt solid var(--accent); border-radius:0 4pt 4pt 0; padding:9pt 12pt; margin:8pt 0; }
|
||
.etapa-h{ font-weight:700; color:var(--ink); font-size:10pt; margin-bottom:3pt; }
|
||
.etapa-h .tag{ float:right; font-size:8pt; color:var(--muted); font-weight:600; }
|
||
|
||
/* ---------- SIGNOFF ---------- */
|
||
.signoff{ margin-top:18pt; padding-top:10pt; border-top:1.4pt solid var(--ink); }
|
||
.signoff .nm{ font-family:var(--serif); font-size:14pt; font-weight:700; color:var(--ink); }
|
||
.signoff .rl{ font-size:8.5pt; color:var(--muted); letter-spacing:.04em; }
|
||
|
||
/* ---------- PRINT SAFETY (keep these) ---------- */
|
||
/* Don't strand a heading at the bottom of a page, just above its body. */
|
||
h2,h3,h4,.sec-head{ break-after:avoid; }
|
||
/* Repeat table header rows when a long table spans a page break, and never
|
||
split an individual row, callout, card, phase block or the sign-off. */
|
||
thead{ display:table-header-group; }
|
||
tfoot{ display:table-footer-group; }
|
||
tr{ break-inside:avoid; }
|
||
.callout,.synthesis,.synthesis .stat,.etapa,.flow,.signoff,figure,img{ break-inside:avoid; }
|
||
/* Utilities: .keep keeps a block together; .break starts a new page. */
|
||
.keep,.no-break{ break-inside:avoid; }
|
||
.break{ break-before:page; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================= COVER ============================= -->
|
||
<section class="cover">
|
||
<div class="top">
|
||
<!-- Optional logo: <div class="logo"><span class="txt">YOUR MARK</span></div>
|
||
or <div class="logo"><img class="invert" src="logo.png" alt="Logo"></div>
|
||
(use file:// abs path or a path next to the HTML; .invert whitens a dark logo) -->
|
||
<div class="rule"></div>
|
||
<div class="eyebrow">Commercial Proposal</div>
|
||
</div>
|
||
|
||
<div class="mid">
|
||
<h1>Project Title<br>Goes Here</h1>
|
||
<div class="client"><b>Client Name</b></div>
|
||
</div>
|
||
|
||
<div class="meta">
|
||
<dl class="meta-grid">
|
||
<dt>Prepared by</dt>
|
||
<dd>Your Name — Role · City</dd>
|
||
<dt>Date</dt>
|
||
<dd>1 January 2026</dd>
|
||
<dt>Version</dt>
|
||
<dd>1.0</dd>
|
||
<dt>Valid for</dt>
|
||
<dd>30 calendar days from issue</dd>
|
||
</dl>
|
||
<div class="confidential">
|
||
<span>Confidential document</span>
|
||
<span>Valid 30 days</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================= TOC ============================= -->
|
||
<!-- One .toc-row per section. The {{PG_key}} token is resolved by build_pdf.py. -->
|
||
<section class="toc">
|
||
<div class="kick">Contents</div>
|
||
<h2>Index</h2>
|
||
<div class="bar"></div>
|
||
|
||
<div class="toc-row"><span class="n">—</span><span class="t">Executive summary</span><span class="dots"></span><span class="pg">{{PG_execsum}}</span></div>
|
||
<div class="toc-row section"><span class="n">01</span><span class="t">Understanding</span><span class="dots"></span><span class="pg">{{PG_1}}</span></div>
|
||
<div class="toc-row section"><span class="n">02</span><span class="t">Scope</span><span class="dots"></span><span class="pg">{{PG_2}}</span></div>
|
||
<div class="toc-row section"><span class="n">A</span><span class="t">Appendix A — Traceability</span><span class="dots"></span><span class="pg">{{PG_anexoA}}</span></div>
|
||
</section>
|
||
|
||
<!-- ============================= BODY ============================= -->
|
||
<main class="content">
|
||
|
||
<!-- ===== Executive summary: header with NO big number + drop cap ===== -->
|
||
<section class="sec">
|
||
<div class="sec-head no-num"><div><h2>Executive summary</h2></div></div>
|
||
<p class="drop">This opening paragraph uses a drop cap. Keep the executive summary tight: the problem, the proposed first step, and the outcome. The first sentence here doubles as a good TOC anchor — pick a distinctive phrase and put it in the config.</p>
|
||
|
||
<div class="synthesis">
|
||
<div class="stat"><div class="big">6–7</div><div class="lab">weeks</div></div>
|
||
<div class="stat"><div class="big">$XX K</div><div class="lab">investment + tax</div></div>
|
||
<div class="stat"><div class="big">4</div><div class="lab">milestones</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Section 1: numbered header + flow diagram + callout ===== -->
|
||
<section class="sec">
|
||
<div class="sec-head"><div class="sec-num">01</div><div><h2>Understanding</h2></div></div>
|
||
<p class="lede">A lede paragraph introduces the section in a slightly larger size. Distinctive opening text makes a reliable TOC anchor.</p>
|
||
|
||
<h3><span class="sn">1.1</span>The pipeline</h3>
|
||
<div class="flow">
|
||
<span class="chip">Source</span><span class="arrow">→</span>
|
||
<span class="chip">Transform</span><span class="arrow">→</span>
|
||
<span class="chip accent">Platform</span><span class="arrow">→</span>
|
||
<span class="chip">Output</span>
|
||
</div>
|
||
|
||
<div class="callout"><strong>Key risk to validate.</strong> Use accent callouts for the one or two things the reader must not miss. Use the <code>.cool</code> variant for neutral notes.</div>
|
||
</section>
|
||
|
||
<!-- ===== Section 2: tables (stack + total row) + phase blocks ===== -->
|
||
<section class="sec">
|
||
<div class="sec-head"><div class="sec-num">02</div><div><h2>Scope</h2></div></div>
|
||
<p>Body text for the scope section, with a distinctive opening phrase for the anchor.</p>
|
||
|
||
<table>
|
||
<thead><tr><th>Layer</th><th>Technology</th><th class="num">Version</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="k">Backend</td><td>.NET</td><td class="num">10</td></tr>
|
||
<tr><td class="k">Frontend</td><td>Angular</td><td class="num">21</td></tr>
|
||
<tr><td class="k">Database</td><td>PostgreSQL</td><td class="num">16</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="etapa"><div class="etapa-h">Stage 0 — Discovery<span class="tag">~1 week</span></div>Short description of the stage and its deliverable.</div>
|
||
<div class="etapa"><div class="etapa-h">Stage 1 — Core<span class="tag">~2 weeks</span></div>Short description of the stage and its deliverable.</div>
|
||
|
||
<table>
|
||
<thead><tr><th>Stage</th><th class="num">Hours</th><th class="num">Investment (MXN)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="k">Discovery</td><td class="num">18 – 22</td><td class="num">$10,800 – $13,200</td></tr>
|
||
<tr><td class="k">Core</td><td class="num">32 – 39</td><td class="num">$19,200 – $23,400</td></tr>
|
||
<tr class="total"><td>Total</td><td class="num">50 – 61 h</td><td class="num">$30,000 – $36,600</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ===== Appendix A: annex header + coverage table (emoji column) ===== -->
|
||
<section class="sec break">
|
||
<div class="sec-head"><div class="sec-num">A</div><div><span class="kick">Appendix</span><h2>Traceability</h2></div></div>
|
||
<p class="lede">Appendices start on a fresh page via the <code>.break</code> class. Distinctive opening phrase for the anchor here too.</p>
|
||
|
||
<div class="callout cool"><strong>Legend:</strong> ✅ Covered · ⚠️ Partial · ❌ Deferred</div>
|
||
|
||
<table class="compact">
|
||
<thead><tr><th style="width:46pt;">ID</th><th>Requirement</th><th class="ctr" style="width:62pt;">Coverage</th><th>Notes</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="k">RF-01</td><td>Example requirement</td><td class="cov">✅</td><td>Included</td></tr>
|
||
<tr><td class="k">RF-02</td><td>Another requirement</td><td class="cov">⚠️</td><td>Partial in MVP</td></tr>
|
||
<tr><td class="k">RF-03</td><td>A deferred requirement</td><td class="cov">❌</td><td>Later phase</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="signoff">
|
||
<div class="nm">Your Name</div>
|
||
<div class="rl">Role · City</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|