JohannVelazquez
85 lines
4.5 KiB
HTML
85 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Datos bancarios — Johann Joseph Velazquez Antonio</title>
|
|
<style>
|
|
@font-face{ font-family:'Caladea'; src:url("../propuesta/fonts/Caladea-Regular.ttf"); font-weight:400; font-style:normal; }
|
|
@font-face{ font-family:'Caladea'; src:url("../propuesta/fonts/Caladea-Bold.ttf"); font-weight:700; font-style:normal; }
|
|
@font-face{ font-family:'Carlito'; src:url("../propuesta/fonts/Carlito-Regular.ttf"); font-weight:400; font-style:normal; }
|
|
@font-face{ font-family:'Carlito'; src:url("../propuesta/fonts/Carlito-Bold.ttf"); font-weight:700; font-style:normal; }
|
|
|
|
:root{
|
|
--ink:#1C2B39; --muted:#6E7A86; --hair:#E4E8EC; --accent:#BC5B3E; --accent-d:#9A4530;
|
|
--serif:'Caladea',Georgia,serif; --sans:'Carlito',system-ui,sans-serif;
|
|
}
|
|
@page{ size:215.9mm 139.7mm; margin:0; }
|
|
*{ box-sizing:border-box; margin:0; padding:0; }
|
|
html,body{ background:#fff; }
|
|
body{ font-family:var(--sans); color:var(--ink); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
|
|
.sheet{ width:215.9mm; height:139.7mm; display:flex; overflow:hidden; }
|
|
|
|
.side{ width:62mm; flex:none; color:#fff; padding:12mm 8mm 10mm 10mm; display:flex; flex-direction:column;
|
|
background:
|
|
radial-gradient(70mm 50mm at 0% 100%, rgba(188,91,62,.28), rgba(188,91,62,0) 70%),
|
|
var(--ink); }
|
|
.mono{ width:12mm; height:12mm; border-radius:50%; background:var(--accent); display:flex; align-items:center;
|
|
justify-content:center; font-family:var(--serif); font-size:12.5pt; font-weight:700; margin-bottom:6mm; }
|
|
.side .nm{ font-family:var(--serif); font-size:15pt; line-height:1.2; }
|
|
.side .role{ font-size:7.4pt; letter-spacing:.2em; text-transform:uppercase; color:#D9876C; font-weight:700; margin-top:4pt; }
|
|
.side .contact{ margin-top:auto; }
|
|
.side .blk{ margin-top:4mm; }
|
|
.side .lbl{ font-size:6.6pt; letter-spacing:.2em; text-transform:uppercase; color:#8D9AA7; font-weight:700; margin-bottom:1pt; }
|
|
.side .val{ font-size:9.2pt; color:#E8EDF2; }
|
|
|
|
.main{ flex:1; padding:12mm 14mm 10mm 12mm; display:flex; flex-direction:column; justify-content:center; }
|
|
.eyebrow{ font-size:7.4pt; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-d); font-weight:700; margin-bottom:4mm; }
|
|
|
|
.hero{ background:var(--ink); color:#fff; border-radius:3mm; padding:9pt 14pt 11pt; position:relative; overflow:hidden; margin-bottom:3mm; }
|
|
.hero::after{ content:""; position:absolute; right:-14mm; top:-14mm; width:42mm; height:42mm; border-radius:50%;
|
|
background:radial-gradient(circle, rgba(188,91,62,.45), rgba(188,91,62,0) 70%); }
|
|
.hero .lbl{ font-size:7pt; letter-spacing:.22em; text-transform:uppercase; color:#D9876C; font-weight:700; }
|
|
.hero .clabe{ font-family:var(--serif); font-size:20pt; font-weight:700; letter-spacing:.07em; margin-top:2pt;
|
|
font-variant-numeric:tabular-nums lining-nums; }
|
|
|
|
.grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:3mm; }
|
|
.card{ border:1px solid var(--hair); border-radius:2.5mm; padding:6pt 10pt 7pt; }
|
|
.card.wide{ grid-column:1 / -1; }
|
|
.card .lbl{ font-size:6.6pt; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; }
|
|
.card .val{ font-size:11pt; margin-top:1pt; font-variant-numeric:tabular-nums lining-nums; }
|
|
.card .val.num{ font-family:var(--serif); font-size:12.5pt; letter-spacing:.04em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
|
|
<aside class="side">
|
|
<div class="mono">JV</div>
|
|
<div class="nm">Johann Joseph<br>Velazquez Antonio</div>
|
|
<div class="role">Consultor de Software</div>
|
|
<div class="contact">
|
|
<div class="blk"><div class="lbl">Correo</div><div class="val">johann_antonio85<wbr>@hotmail.com</div></div>
|
|
<div class="blk"><div class="lbl">Teléfono</div><div class="val">81 3161 0998</div></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<div class="eyebrow">Datos bancarios</div>
|
|
|
|
<div class="hero">
|
|
<div class="lbl">CLABE interbancaria · BBVA México</div>
|
|
<div class="clabe">012180015481668333</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card wide"><div class="lbl">Beneficiario</div><div class="val">Johann Joseph Velazquez Antonio</div></div>
|
|
<div class="card"><div class="lbl">RFC</div><div class="val">VEAJ031228MD6</div></div>
|
|
<div class="card"><div class="lbl">Banco</div><div class="val">BBVA México</div></div>
|
|
<div class="card"><div class="lbl">Número de cuenta</div><div class="val num">1548166833</div></div>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|