feature graphic added
This commit is contained in:
Hadrian Burkhardt
@@ -0,0 +1,389 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=1024, height=500, initial-scale=1">
|
||||
<title>Private QR Scanner Feature Graphic</title>
|
||||
<style>
|
||||
:root {
|
||||
--ink: #f8fafc;
|
||||
--muted: #cbe7e3;
|
||||
--deep: #07111f;
|
||||
--navy: #0b1220;
|
||||
--teal-900: #0f3f45;
|
||||
--teal-700: #155e63;
|
||||
--teal-300: #2dd4bf;
|
||||
--mint: #dff7f2;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 1024px;
|
||||
height: 500px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: var(--deep);
|
||||
font-family: Inter, "DejaVu Sans", Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
place-items: stretch;
|
||||
}
|
||||
|
||||
.feature {
|
||||
position: relative;
|
||||
width: 1024px;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at 78% 34%, rgba(45, 212, 191, 0.24), transparent 29%),
|
||||
radial-gradient(circle at 12% 86%, rgba(223, 247, 242, 0.12), transparent 24%),
|
||||
linear-gradient(132deg, #0b1220 0%, #103a42 50%, #07111f 100%);
|
||||
}
|
||||
|
||||
.feature::before,
|
||||
.feature::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -80px;
|
||||
right: -80px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.feature::before {
|
||||
top: 210px;
|
||||
height: 210px;
|
||||
background: #061525;
|
||||
clip-path: polygon(0 58%, 16% 29%, 33% 20%, 51% 33%, 70% 36%, 88% 21%, 100% 8%, 100% 100%, 0 100%);
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.feature::after {
|
||||
top: -32px;
|
||||
height: 214px;
|
||||
background: #1f7778;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 46%, 83% 65%, 67% 58%, 51% 40%, 31% 35%, 15% 54%, 0 75%);
|
||||
opacity: 0.36;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 506px 1fr;
|
||||
gap: 38px;
|
||||
height: 100%;
|
||||
padding: 56px 64px 48px 74px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 38px;
|
||||
padding: 0 16px 0 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--mint);
|
||||
background: rgba(223, 247, 242, 0.1);
|
||||
border: 1px solid rgba(223, 247, 242, 0.22);
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.kicker svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 18px 0 0;
|
||||
color: var(--ink);
|
||||
font-size: 68px;
|
||||
line-height: 0.98;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
width: 445px;
|
||||
margin: 22px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 28px;
|
||||
line-height: 1.23;
|
||||
font-weight: 520;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.checks {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
height: 48px;
|
||||
padding: 0 17px 0 14px;
|
||||
border-radius: 14px;
|
||||
color: #061525;
|
||||
background: var(--mint);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
|
||||
}
|
||||
|
||||
.check:nth-child(2) {
|
||||
background: var(--teal-300);
|
||||
}
|
||||
|
||||
.check:nth-child(3) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.check svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.visual {
|
||||
position: relative;
|
||||
height: 390px;
|
||||
}
|
||||
|
||||
.halo {
|
||||
position: absolute;
|
||||
inset: 16px 5px 12px 34px;
|
||||
border-radius: 44px;
|
||||
background: rgba(223, 247, 242, 0.06);
|
||||
border: 1px solid rgba(223, 247, 242, 0.08);
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 9px;
|
||||
width: 238px;
|
||||
height: 374px;
|
||||
border-radius: 36px;
|
||||
padding: 15px;
|
||||
background: linear-gradient(145deg, #e5fbf7, #f8fafc);
|
||||
box-shadow: 0 28px 48px rgba(2, 6, 23, 0.42);
|
||||
}
|
||||
|
||||
.phone::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 91px;
|
||||
width: 56px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: #0b1220;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.screen {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 25px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(45, 212, 191, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
linear-gradient(0deg, rgba(45, 212, 191, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
|
||||
radial-gradient(circle at 47% 42%, rgba(45, 212, 191, 0.18), transparent 27%),
|
||||
linear-gradient(160deg, #07111f 0%, #123b3f 100%);
|
||||
}
|
||||
|
||||
.scan-window {
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 77px;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-color: var(--teal-300);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 7px 0 0 7px;
|
||||
border-radius: 13px 0 0 0;
|
||||
}
|
||||
|
||||
.corner.tr {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 7px 7px 0 0;
|
||||
border-radius: 0 13px 0 0;
|
||||
}
|
||||
|
||||
.corner.bl {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-width: 0 0 7px 7px;
|
||||
border-radius: 0 0 0 13px;
|
||||
}
|
||||
|
||||
.corner.br {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-width: 0 7px 7px 0;
|
||||
border-radius: 0 0 13px 0;
|
||||
}
|
||||
|
||||
.qr {
|
||||
position: absolute;
|
||||
inset: 21px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
background: rgba(248, 250, 252, 0.96);
|
||||
}
|
||||
|
||||
.qr span {
|
||||
border-radius: 2px;
|
||||
background: #08111f;
|
||||
}
|
||||
|
||||
.qr span:nth-child(5n+3),
|
||||
.qr span:nth-child(7),
|
||||
.qr span:nth-child(18) {
|
||||
background: var(--teal-300);
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
right: 25px;
|
||||
top: 139px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, transparent, var(--teal-300), transparent);
|
||||
box-shadow: 0 0 22px rgba(45, 212, 191, 0.8);
|
||||
}
|
||||
|
||||
.result {
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
right: 23px;
|
||||
bottom: 25px;
|
||||
height: 76px;
|
||||
padding: 14px 15px;
|
||||
border-radius: 18px;
|
||||
background: rgba(248, 250, 252, 0.94);
|
||||
color: var(--navy);
|
||||
box-shadow: 0 14px 28px rgba(2, 6, 23, 0.22);
|
||||
}
|
||||
|
||||
.result strong {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.result span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #155e63;
|
||||
font-size: 13px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="feature">
|
||||
<section class="grid">
|
||||
<div class="copy">
|
||||
<div class="kicker">
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M12 3L19 6V11C19 15.7 16.1 19.9 12 21.8C7.9 19.9 5 15.7 5 11V6L12 3Z" fill="#2DD4BF"/>
|
||||
<path d="M9 12L11.1 14.1L15.5 9.7" stroke="#061525" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Local-first privacy
|
||||
</div>
|
||||
|
||||
<h1>Private QR<br>Scanner</h1>
|
||||
<p class="subtitle">Scan QR codes and barcodes without ads, tracking, or accounts.</p>
|
||||
|
||||
<div class="checks" aria-label="Feature highlights">
|
||||
<div class="check">
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M20 6L9 17L4 12" stroke="#061525" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Local
|
||||
</div>
|
||||
<div class="check">
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M20 6L9 17L4 12" stroke="#061525" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
No ads
|
||||
</div>
|
||||
<div class="check">
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M20 6L9 17L4 12" stroke="#061525" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
No tracking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="visual" aria-hidden="true">
|
||||
<div class="halo"></div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="scan-window">
|
||||
<div class="qr">
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="corner tl"></div>
|
||||
<div class="corner tr"></div>
|
||||
<div class="corner bl"></div>
|
||||
<div class="corner br"></div>
|
||||
</div>
|
||||
<div class="scan-line"></div>
|
||||
<div class="result">
|
||||
<strong>Ready to scan</strong>
|
||||
<span>Inspect first</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user