jon/bmthTech-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add drone silhouette background to all page heroes

Browse Source 
Mirrors the index.html hero treatment across devkits, consultancy,
videos (dark strokes) and opensource (white strokes on dark bg).
.page-hero gets position:relative/overflow:hidden to contain them.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-13 18:40:20 +01:00
parent 8adb24db95
commit e1271a8b30
5 changed files with 167 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
opensource.html
View File

@@ -36,7 +36,48 @@
</nav>
<!-- PAGE HERO (dark) -->
<section class="section-dark" style="padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);border-bottom:1px solid rgba(255,255,255,0.1);">
<section class="section-dark" style="position:relative;overflow:hidden;padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);border-bottom:1px solid rgba(255,255,255,0.1);">
<div class="hero-bg" aria-hidden="true">
<div style="position:absolute;top:40px;left:-30px;width:210px;opacity:0.12;transform:rotate(14deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
<div style="position:absolute;top:30px;right:-40px;width:320px;opacity:0.09;transform:rotate(-9deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
<div style="position:absolute;top:30px;left:46%;width:120px;opacity:0.1;transform:rotate(26deg);">
<svg viewBox="0 0 100 100" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">
<line x1="50" y1="50" x2="22" y2="22"/><line x1="50" y1="50" x2="78" y2="22"/>
<line x1="50" y1="50" x2="22" y2="78"/><line x1="50" y1="50" x2="78" y2="78"/>
<rect x="41" y="41" width="18" height="18" rx="4"/>
<circle cx="22" cy="22" r="8.5"/><circle cx="78" cy="22" r="8.5"/>
<circle cx="22" cy="78" r="8.5"/><circle cx="78" cy="78" r="8.5"/>
<ellipse cx="22" cy="22" rx="12" ry="2.6" transform="rotate(45 22 22)"/>
<ellipse cx="78" cy="22" rx="12" ry="2.6" transform="rotate(-45 78 22)"/>
<ellipse cx="22" cy="78" rx="12" ry="2.6" transform="rotate(-45 22 78)"/>
<ellipse cx="78" cy="78" rx="12" ry="2.6" transform="rotate(45 78 78)"/>
</svg>
</div>
</div>
<div class="container">
<div class="eyebrow">Open stack · Free forever</div>
<h1 style="font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-0.04em;line-height:0.95;margin-top:14px;max-width:820px;">Open Source<br>Stack.</h1>