@wiv01 added htmlContent (English):
code:javascript\n<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\utf-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1\ />\n <title>Bruce Wayne — Totally Normal CV</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Montserrat:wght@700;900&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --bg: #0b0f14;\n --panel: #0f1520;\n --ink: #eaf2ff;\n --ink-dim: #a9b8d6;\n --accent: #ffd400;\n --accent-2: #8ea7ff;\n --muted: #101826;\n --success: #36d399;\n --danger: #f87272;\n --shadow: 0 10px 30px rgba(0,0,0,.35);\n --radius: 18px;\n \n\n * box-sizing: border-box; \n html, body height: 100%; \n body\n margin:0;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \Helvetica Neue\, Arial, \Noto Sans\, \Apple Color Emoji\, \Segoe UI Emoji\;\n color: var(--ink);\n background: radial-gradient(1200px 800px at 70% -10%, #1b2233 0%, #0b0f14 50%, #06080c 100%);\n line-height: 1.6;\n \n\n .wrap\n max-width: 1100px;\n margin: 40px auto;\n padding: 0 20px 60px;\n \n\n header.hero\n position: relative;\n border: 1px solid rgba(255,255,255,.08);\n background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)),\n radial-gradient(80% 120% at 100% 0%, #121a2b 0%, #0f1520 60%, #0b0f14 100%);\n border-radius: var(--radius);\n padding: 42px 32px;\n box-shadow: var(--shadow);\n overflow: hidden;\n \n\n .badge\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: #0b0f14;\n border: 1px solid rgba(255,255,255,.08);\n border-radius: 999px;\n padding: 8px 14px;\n color: var(--ink-dim);\n font-size: 12px;\n letter-spacing: .08em;\n text-transform: uppercase;\n \n .badge .dot\n width: 8px; height: 8px; border-radius: 50%; background: var(--accent);\n box-shadow: 0 0 10px var(--accent);\n \n\n .hero h1\n font-family: Montserrat, Inter, sans-serif;\n margin: 14px 0 10px;\n font-size: clamp(32px, 6vw, 64px);\n line-height: 1.05;\n letter-spacing: -0.02em;\n \n .hero p.tagline\n margin: 0 0 14px;\n font-size: clamp(14px, 2.2vw, 18px);\n color: var(--ink-dim);\n \n\n .grid\n display: grid;\n grid-template-columns: 1.1fr .9fr;\n gap: 24px;\n margin-top: 26px;\n \n\n .card\n background: var(--panel);\n border: 1px solid rgba(255,255,255,.08);\n border-radius: var(--radius);\n padding: 22px;\n box-shadow: var(--shadow);\n \n\n .card h3\n margin: 0 0 14px;\n font-size: 18px;\n letter-spacing: .02em;\n text-transform: uppercase;\n color: var(--accent-2);\n \n\n .kv display:grid; grid-template-columns: 140px 1fr; gap: 10px 16px; \n .kv div padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); \n .kv strong color: var(--ink-dim); font-weight: 600; \n\n .skills display:flex; flex-wrap: wrap; gap: 10px; \n .chip\n padding: 8px 12px;\n background: #0c1220;\n border: 1px solid rgba(255,255,255,.08);\n border-radius: 999px;\n font-size: 13px;\n \n\n ul.timeline\n list-style: none; padding: 0; margin: 0;\n display: grid; gap: 18px;\n \n .timeline li\n position: relative; padding-left: 26px;\n \n .timeline li::before\n content:\\; position:absolute; left:7px; top:6px; width:10px; height:10px; border-radius:50%; background: var(--accent);\n box-shadow: 0 0 10px var(--accent);\n \n .when color: var(--ink-dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; \n .role font-weight: 700; \n .org color: var(--ink-dim); \n\n .banner\n position:absolute; inset:auto -5% -40px -5%; height: 220px;\n pointer-events:none; opacity:.18;\n background:\n radial-gradient(60% 120% at 30% 40%, #ffd400 0%, rgba(255,212,0,0) 60%),\n radial-gradient(60% 120% at 70% 10%, #8ea7ff 0%, rgba(142,167,255,0) 60%);\n filter: blur(40px);\n \n\n .bat\n position:absolute; right: 24px; bottom: 12px; width: clamp(90px, 18vw, 180px); aspect-ratio: 16/8;\n background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,0) 50%);\n -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\http://www.w3.org/2000/svg\ viewBox=\0 0 640 320\><path fill=\%23fff\ d=\M57 163c22-15 46-18 71-12 28 7 48 13 72 1 21-10 31-29 44-47 17 23 27 46 53 46s36-23 53-46c13 18 23 37 44 47 24 12 44 6 72-1 25-6 49-3 71 12-41 8-66 31-74 69-6-31-28-42-54-37-26 6-38 25-43 49-7-34-29-51-68-51s-61 17-68 51c-5-24-17-43-43-49-26-5-48 6-54 37-8-38-33-61-74-69z\/></svg>') center/contain no-repeat;\n opacity:.6;\n \n\n .section-title\n margin: 30px 0 12px;\n font-size: 20px;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: var(--accent);\n \n\n .cols display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; \n .note color: var(--ink-dim); font-size: 14px; \n\n footer\n margin-top: 22px; text-align: center; color: var(--ink-dim); font-size: 14px;\n \n\n /* Responsive */\n @media (max-width: 900px)\n .grid grid-template-columns: 1fr; \n \n @media (max-width: 560px)\n .kv grid-template-columns: 1fr; \n .cols grid-template-columns: 1fr; \n \n\n /* Print friendly */\n @media print\n body background: #fff; color:#000; \n header.hero, .card box-shadow:none; background:#fff; border-color:#ddd; \n .banner, .bat display:none; \n .badge border-color:#aaa; \n \n </style>\n</head>\n<body>\n <div class=\wrap\>\n <header class=\hero\>\n <span class=\badge\><span class=\dot\></span> Totally Normal Resume</span>\n <h1>Bruce Wayne</h1>\n <p class=\tagline\>Philanthropist • Night Shift Enthusiast • \Very into bats for no particular reason\</p>\n\n <div class=\grid\>\n <section class=\card\>\n <h3>About</h3>\n <p>\n Strategic problem‑solver with a knack for disappearing mid‑meeting right before something dramatic happens. \n Passionate about civic infrastructure, crime reduction, and rooftop gargoyles.\n </p>\n <div class=\section-title\>Core Skills</div>\n <div class=\skills\>\n <span class=\chip\>Stealth project delivery</span>\n <span class=\chip\>Advanced gadget ops</span>\n <span class=\chip\>Agile (very)</span>\n <span class=\chip\>Risk analysis (high)</span>\n <span class=\chip\>Martial negotiations</span>\n <span class=\chip\>Cave architecture</span>\n <span class=\chip\>Orphan empathy</span>\n <span class=\chip\>Glide path planning</span>\n </div>\n </section>\n\n <aside class=\card\>\n <h3>Details</h3>\n <div class=\kv\>\n <div><strong>Location</strong></div>\n <div>Gotham City (various rooftops)</div>\n <div><strong>Phone</strong></div>\n <div>(Bat) – please shine light</div>\n <div><strong>Email</strong></div>\n <div>[email protected]</div>\n <div><strong>Website</strong></div>\n <div>wayne.enterprises/careers</div>\n </div>\n </aside>\n </div>\n\n <div class=\banner\ aria-hidden=\true\></div>\n <div class=\bat\ aria-hidden=\true\ title=\definitely not a clue\></div>\n </header>\n\n <main class=\grid\ style=\margin-top:24px\>\n <section class=\card\>\n <h3>Experience</h3>\n <ul class=\timeline\>\n <li>\n <div class=\when\>2005 — Present</div>\n <div class=\role\>Chief Vigilance Officer <span class=\org\>@ Night Ops (freelance)</span></div>\n <div>Reduced key‑risk metrics across urban districts using a combination of predictive analytics, community engagement, and very dramatic entrances.</div>\n </li>\n <li>\n <div class=\when\>2016 — 2018</div>\n <div class=\role\>Team Lead <span class=\org\>@ Justice League</span></div>\n <div>Coordinated cross‑functional heroes. Managed stakeholders ranging from Atlanteans to Kryptonians. Wore power armor. Twice.</div>\n </li>\n <li>\n <div class=\when\>2000 — 2005</div>\n <div class=\role\>R&D Benefactor <span class=\org\>@ Wayne Enterprises</span></div>\n <div>Accelerated skunkworks pipeline; insisted prototypes include matte‑black option.</div>\n </li>\n </ul>\n </section>\n\n <section class=\card\>\n <h3>Education & Training</h3>\n <ul class=\timeline\>\n <li>\n <div class=\when\>Various</div>\n <div class=\role\>Post‑grad fieldwork <span class=\org\>@ League of… extracurriculars</span></div>\n <div>Specializations in stealth, ethics, and creative use of grapnels.</div>\n </li>\n <li>\n <div class=\when\>Earlier</div>\n <div class=\role\>Bachelor of Business <span class=\org\>@ Gotham U</span></div>\n <div>Thesis: \Scaling family businesses while maintaining alter‑ego work‑life balance\</div>\n </li>\n </ul>\n </section>\n\n <section class=\card\>\n <h3>Notable Achievements</h3>\n <div class=\cols\>\n <div>\n <div class=\section-title\>City Impact</div>\n <p>Helped lower late‑night clown activity by significant margins. Introduced sustainable, bat‑themed transit solutions.</p>\n </div>\n <div>\n <div class=\section-title\>Awards</div>\n <p>\Most Mysterious Board Member\ (8×), \Best Use of a Cape in Business\ (lifetime).</p>\n </div>\n <div>\n <div class=\section-title\>Publications</div>\n <p><em>On Grappling with Problems: A Hook‑First Approach</em> (self‑published, limited circulation).</p>\n </div>\n </div>\n </section>\n\n <section class=\card\>\n <h3>Hobbies</h3>\n <p>Night flights, detective sudoku, cave acoustics, mentoring exceptionally acrobatic interns.</p>\n <div class=\section-title\>References</div>\n <p class=\note\>Available upon signal. Commissioner G. prefers sky‑based communications.</p>\n </section>\n </main>\n\n <footer>\n © Wayne Enterprises — If this résumé smells like guano, that’s purely coincidental.\n </footer>\n </div>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from:
HTTP is in use instead of HTTPS and no protocol redirection is in place. Do not enter sensitive information in this website as your data won't be encrypted.
Read about HTTP unsafety: [1] [2]
_ Vote for our WITNESS to support this FREE service!