Performa Sepak Bola,
lebih terukur & lebih personal.
Template landing page + katalog produk ala brand football gear: smart shin guard, custom shin pads, dan shin-guard holder. Semua ada di 1 file (HTML + CSS + JS + gambar).
Desain template menonjolkan value: ringan, tahan air, dan ready training.
Mock “app screen” untuk menggambarkan tracking. Bisa kamu ganti dengan screenshot asli milikmu.
' opacity='.55'/>
<rect x='54' y='64' width='792' height='440' rx='26' fill='%230f1a2e' opacity='.88' filter='url(%23sh)'/>
<rect x='82' y='92' width='460' height='32' rx='16' fill='%23111f36' opacity='.85'/>
<circle cx='104' cy='108' r='8' fill='%235eead4'/>
<text x='126' y='114' font-family='Arial' font-size='14' fill='%23e9eefc'>Session: Wednesday Training</text>
<rect x='82' y='144' width='300' height='160' rx='18' fill='%23111f36' opacity='.92'/>
<text x='108' y='176' font-family='Arial' font-size='13' fill='%23b9c3dd'>Top speed</text>
<text x='108' y='214' font-family='Arial' font-size='34' fill='%23e9eefc' font-weight='700'>28.4</text>
<text x='208' y='214' font-family='Arial' font-size='14' fill='%23b9c3dd'>km/h</text>
<path d='M108 250 C150 220, 190 285, 238 248 S 318 240, 352 260' fill='none' stroke='%2360a5fa' stroke-width='4' stroke-linecap='round'/>
<rect x='396' y='144' width='450' height='160' rx='18' fill='%23111f36' opacity='.92'/>
<text x='420' y='176' font-family='Arial' font-size='13' fill='%23b9c3dd'>Sprints</text>
<text x='420' y='214' font-family='Arial' font-size='34' fill='%23e9eefc' font-weight='700'>14</text>
<text x='468' y='214' font-family='Arial' font-size='14' fill='%23b9c3dd'>bursts</text>
<rect x='420' y='240' width='380' height='10' rx='5' fill='%23203052' opacity='.8'/>
<rect x='420' y='240' width='285' height='10' rx='5' fill='%235eead4' opacity='.9'/>
<rect x='82' y='320' width='510' height='184' rx='18' fill='%23111f36' opacity='.92'/>
<text x='108' y='352' font-family='Arial' font-size='13' fill='%23b9c3dd'>Heatmap (mock)</text>
<rect x='108' y='370' width='458' height='110' rx='14' fill='%230b1220' opacity='.65'/>
<circle cx='200' cy='420' r='28' fill='%235eead4' opacity='.18'/>
<circle cx='270' cy='445' r='22' fill='%2360a5fa' opacity='.18'/>
<circle cx='350' cy='410' r='34' fill='%23fb7185' opacity='.14'/>
<circle cx='430' cy='455' r='18' fill='%235eead4' opacity='.16'/>
<rect x='606' y='320' width='240' height='184' rx='18' fill='%23111f36' opacity='.92'/>
<text x='630' y='352' font-family='Arial' font-size='13' fill='%23b9c3dd'>Touches</text>
<text x='630' y='402' font-family='Arial' font-size='42' fill='%23e9eefc' font-weight='800'>62</text>
<text x='630' y='434' font-family='Arial' font-size='14' fill='%23b9c3dd'>ball contacts</text>
<path d='M630 462 h190' stroke='%23203052' stroke-width='6' stroke-linecap='round' opacity='.8'/>
<path d='M630 462 h130' stroke='%2360a5fa' stroke-width='6' stroke-linecap='round' opacity='.9'/>
</svg>)
Katalog Produk
Kenapa Template Ini
Struktur rapih
Header sticky, hero, katalog, fitur, FAQ, footer.
1 file doang
CSS + JS inline, gambar pakai SVG data URI.
Komponen interaktif
Search, filter, cart modal, mobile drawer.
Mudah diubah
Data produk ada di JS—tinggal edit nama, harga, deskripsi.
FAQ
Apakah ini clone 1:1 dari situs aslinya?
Tidak. Ini template orisinal yang “mirip nuansa”-nya. Menyalin persis HTML/CSS/gambar website lain berisiko melanggar hak cipta.
Bagaimana ganti gambar produk dengan foto asli?
Ganti field image di data produk (JS). Kamu bisa pakai data URI (base64) atau SVG sendiri.
Bisa ditambah halaman checkout?
Bisa. Untuk 1-file, biasanya checkout dibuat sebagai section + modal. Kalau multi-file juga bisa.
Bisa pakai framework (React/Vue)?
Bisa, tapi permintaan kamu “1 file” jadi ini dibuat vanilla HTML/CSS/JS.
Kontak
+62 8xx-xxxx-xxxx