index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>QR Code Card</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main class="card">
<h2>Scan QR code</h2>
<p class="subtitle">Point your camera to open the link</p>
<div class="qr-wrap">
<img src="qr.png" alt="QR Code"/>
</div>
<p class="link">www.youtube.com/<span>@blankify</span></p>
<p class="hint">Works with any camera app</p>
</main>
</body>
</html>
styles.css
* {
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(160deg, #050608, #0a1810 60%, #0e2218);
font-family: system-ui, sans-serif;
}
.qr-wrap {
position: relative;
width: 220px;
height: 220px;
margin: 0 auto 28px;
}
.qr-wrap img {
width: 100%;
height: 100%;
border-radius: 12px;
}
.card {
width: 380px;
padding: 36px;
border-radius: 20px;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(40px);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
text-align: center;
}
h2 {
font-size: 20px;
font-weight: 700;
color: #ecfdf5;
margin-bottom: 6px;
}
.subtitle {
font-size: 13px;
color: rgba(255,255,255,0.4);
margin-bottom: 28px;
}
.qr-wrap::before {
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 32px;
height: 32px;
border-top: 3px solid #10b981;
border-left: 3px solid #10b981;
border-radius: 4px 0 0 0;
}
.qr-wrap::after {
content: "";
position: absolute;
bottom: -8px;
right: -8px;
width: 32px;
height: 32px;
border-bottom: 3px solid #10b981;
border-right: 3px solid #10b981;
border-radius: 0 0 4px 0;
}
.link {
padding: 10px 18px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
font-size: 13px;
color: rgba(255,255,255,0.4);
display: inline-block;
margin-bottom: 12px;
}
.link span {
color: #34d399;
}
.hint {
font-size: 12px;
color: rgba(255,255,255,0.35);
}
