JohannVelazquez
64 lines
3.3 KiB
HTML
64 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Tarjeta de datos bancarios — Johann Velazquez</title>
|
|
<style>
|
|
@font-face{ font-family:'Caladea'; src:url("../propuesta/fonts/Caladea-Regular.ttf"); font-weight:400; }
|
|
@font-face{ font-family:'Caladea'; src:url("../propuesta/fonts/Caladea-Bold.ttf"); font-weight:700; }
|
|
@font-face{ font-family:'Carlito'; src:url("../propuesta/fonts/Carlito-Regular.ttf"); font-weight:400; }
|
|
@font-face{ font-family:'Carlito'; src:url("../propuesta/fonts/Carlito-Bold.ttf"); font-weight:700; }
|
|
:root{ --ink:#1C2B39; --accent:#BC5B3E; --soft:#B9C3CD; --mut:#8D9AA7;
|
|
--serif:'Caladea',Georgia,serif; --sans:'Carlito',system-ui,sans-serif; }
|
|
*{ box-sizing:border-box; margin:0; padding:0; }
|
|
html,body{ width:1200px; height:675px; background:var(--ink); }
|
|
.card{ width:1200px; height:675px; padding:64px 76px 56px; color:#fff; font-family:var(--sans);
|
|
display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
|
|
background:
|
|
radial-gradient(620px 420px at 100% 0%, rgba(188,91,62,.30), rgba(188,91,62,0) 70%),
|
|
radial-gradient(500px 360px at 0% 100%, rgba(188,91,62,.12), rgba(188,91,62,0) 70%),
|
|
var(--ink); }
|
|
.top{ display:flex; justify-content:space-between; align-items:flex-start; }
|
|
.rule{ width:56px; height:4px; background:var(--accent); margin-bottom:18px; }
|
|
.eyebrow{ font-size:17px; letter-spacing:.24em; text-transform:uppercase; color:#D9876C; font-weight:700; }
|
|
.name{ font-family:var(--serif); font-size:50px; line-height:1.15; margin-top:10px; }
|
|
.bank{ text-align:right; font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); font-weight:700; padding-top:22px; }
|
|
.bank b{ display:block; font-family:var(--serif); font-size:34px; letter-spacing:.02em; text-transform:none; color:#fff; margin-top:6px; }
|
|
|
|
.clabe{ }
|
|
.lbl{ font-size:15px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut); font-weight:700; }
|
|
.digits{ font-family:var(--serif); font-weight:700; font-size:80px; line-height:1.05; letter-spacing:.04em;
|
|
font-variant-numeric:tabular-nums lining-nums; margin-top:6px; }
|
|
|
|
.row{ display:flex; gap:64px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
|
|
.row .v{ font-size:25px; color:#E8EDF2; margin-top:4px; font-variant-numeric:tabular-nums lining-nums; }
|
|
.row .v.num{ font-family:var(--serif); letter-spacing:.05em; }
|
|
.row .contact{ margin-left:auto; text-align:right; }
|
|
.row .contact .v{ font-size:19px; color:var(--soft); line-height:1.45; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="top">
|
|
<div>
|
|
<div class="rule"></div>
|
|
<div class="eyebrow">Datos bancarios · Alta de proveedor</div>
|
|
<div class="name">Johann Joseph Velazquez Antonio</div>
|
|
</div>
|
|
<div class="bank">Banco<b>BBVA México</b></div>
|
|
</div>
|
|
|
|
<div class="clabe">
|
|
<div class="lbl">CLABE interbancaria</div>
|
|
<div class="digits">012180015481668333</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div><div class="lbl">Número de cuenta</div><div class="v num">1548166833</div></div>
|
|
<div><div class="lbl">RFC</div><div class="v">VEAJ031228MD6</div></div>
|
|
<div class="contact"><div class="v">johann_antonio85@hotmail.com<br>81 3161 0998</div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|