Skewed Project Card

PROJECT_ALPHA

NEURAL_INTERFACE_V2

HTML_STRUCTURE

<div class='bh-card-v2-skew'><span>PROJECT_ALPHA</span><h3>NEURAL_INTERFACE_V2</h3></div>

CSS_STYLING

.bh-card-v2-skew { width: 100%; max-width: 320px; padding: 40px 30px; background: #000; border: 2px solid #fff; transform: skew(-5deg); cursor: pointer; transition: 0.3s; } .bh-card-v2-skew:hover { transform: skew(0deg); background: #00ff88; border-color: #00ff88; } .bh-card-v2-skew:hover h3 { color: #000; } .bh-card-v2-skew span { font-size: 9px; font-weight: 900; color: #444; } .bh-card-v2-skew h3 { font-size: 1.2rem; font-weight: 900; margin-top: 10px; color: #fff; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.