23 lines
1.2 KiB
HTML
23 lines
1.2 KiB
HTML
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0}
|
|
.wrap{background:var(--ground);padding:30px;box-sizing:border-box;font-family:var(--font-body);display:flex;align-items:center;gap:30px}
|
|
.mark{display:flex;flex-direction:column;line-height:1}
|
|
.name{font-family:var(--font-display);font-weight:500;font-size:42px;color:var(--fg-1);letter-spacing:-.015em}
|
|
.name .dot{color:var(--accent-deep)}
|
|
.role{font-family:var(--font-body);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3);margin-top:8px;padding-left:2px}
|
|
.div{width:1px;height:60px;background:var(--hairline)}
|
|
.small{display:flex;align-items:center;gap:14px}
|
|
.small img{height:40px}
|
|
.small span{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="mark">
|
|
<span class="name">Josh Bairstow<span class="dot">.</span></span>
|
|
<span class="role">Engineer · Sydney</span>
|
|
</div>
|
|
<div class="div"></div>
|
|
<div class="small"><img src="../assets/mark-rings.svg"><span>favicon /<br>small mark</span></div>
|
|
</div>
|
|
</body></html>
|