Membaca: Budi bento html Template.txt

← BACK
Budi bento html Template.txt

<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Digital Hub</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"><style>:root{--bg:#03050a;--card:#1f2631;--border:#57616a;--text:#ffffff;--muted:#d8dfea;--accent:#0848b0;--accent2:#06b6d4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Orbitron',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}body::before{content:"";position:fixed;width:500px;height:500px;background:#2563eb30;filter:blur(180px);top:-150px;right:-150px;z-index:-1}body::after{content:"";position:fixed;width:400px;height:400px;background:#06b6d420;filter:blur(160px);bottom:-150px;left:-100px;z-index:-1}.container{width:min(1230px,96.5%);margin:auto;padding:15px 0}.hero{margin-bottom:8px}.hero-card{background:linear-gradient(145deg,rgb(7 42 99 / .58),rgb(154 253 55 / .24));border:3px solid rgb(255 255 255 / .32);border-radius:6px;padding:10px 8px 8px 10px;backdrop-filter:blur(20px)}.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 7px;border-radius:4px;background:rgb(82 146 249 / .2);color:lime;font-size:1rem;font-family:"Courier New",Courier,monospace;margin-bottom:20px}.hero h1{font-size:clamp(1.38rem,2.5vw,1.39rem);font-weight:800;color:#29ffff;text-shadow:0 0 10px rgb(109 146 246 / .45),0 0 18px rgb(132 162 251 / .25);margin-bottom:6px}.hero p{color:lime;font-size:.95rem;font-weight:600;line-height:1.3;max-width:950px}.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.card{background:linear-gradient(145deg,rgb(10 31 57 / .47),rgb(0 255 255 / .18));border:2px solid rgb(255 255 255 / .3);border-radius:6px;padding:10px;backdrop-filter:blur(15px);transition:.35s ease}.card:hover{transform:translateY(-1px);border:2px solid;border-color:rgb(0 255 255 / .8);box-shadow:0 0 15px rgb(33 250 250 / .7)}.label{display:inline-flex;align-items:center;gap:8px;padding:5px 5px;border-radius:3px;background:rgb(82 146 249 / .17);color:#80ff80;font-size:.82rem;font-family:"Courier New",Courier,monospace;margin-bottom:10px}.card h3{margin-top:7px;margin-bottom:3px;font-size:1rem;color:cyan}.card h4{margin-top:16px;margin-bottom:1px;font-size:.95rem;color:cyan}.card p{color:var(--muted);font-size:.85rem;line-height:1.3}.large{grid-column:span 2;grid-row:span 2}.wide{grid-column:span 2}.tall{grid-row:span 2}.icon{font-size:2rem}.btn{display:inline-flex;margin-top:10px;text-decoration:none;font-size:13px;color:#fff;padding:7px 17px;border-radius:6px;background:var(--accent);transition:.3s}.btn:hover{background:#5888d7;color:#fff}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0 10px 0}.stat{background:rgb(0 255 255 / .1);border-left:4px solid #04d7d7;padding:10px 8px 10px 8px;border-radius:8px;text-align:center}.stat h2{color:lime;margin-bottom:4px;font-size:.9em}.stat span{color:var(--muted);font-size:.85rem}.server-status{margin-top:20px;font-size:13px}.status-line{display:flex;justify-content:space-between;margin:15px 0;color:var(--muted)}.bar{height:8px;background:#04070d;border-radius:20px;overflow:hidden;margin:5px 0 5px 0}.fill{height:100%;background:linear-gradient(90deg,#3b82f6,#30d8f6)}footer{margin-bottom:15px;text-align:center;color:#aedddd;font-size:.85rem;font-family:'Courier Prime',monospace}@media(max-width:1000px){.bento{grid-template-columns:1fr 1fr}}@media(max-width:700px){.container{margin:0 5px 0 6px}.hero-card{padding:10px 8px 7px 10px}.bento{grid-template-columns:1fr}.large,.wide,.tall{grid-column:auto;grid-row:auto}.stats{grid-template-columns:repeat(2,1fr)}}.visitor-list{list-style:none;padding:0;margin:5px 0 0 0}.visitor-list li{align-items:center;gap:6px;margin:1px 0 4px 0;padding:5px 8px 5px 8px;border-bottom:1px solid rgb(255 255 255 / .1);font-size:13px;color:#cadde0}.visitor-list li strong{color:#02e202}</style></head><body><div class="container"><section class="hero"><div class="hero-card"><h1> JUDUL UTAMA </h1><p> Motto atau slogan website anda tulis disini </p></div></section><section class="bento"><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda </p><a href="https://pages.jurnalpc.com/ext_link_sample/" target="_blank" class="btn" > Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card wide"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card wide"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda </p><a href="#" class="btn"> Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda </p><a href="https://jurnalpc.com" class="btn"> Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card wide"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card wide"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card"><div class="label">LABEL ANDA</div><h3>NAMA PROJECT ATAU WEB</h3><p> Keterangan dari project atau web anda. </p><a href="#" class="btn"> Link Anda </a></div><div class="card large"><h3>STATISTICS</h3><div class="stats"><div class="stat"><h2>12</h2><span>🌐 Subdomain</span></div><div class="stat"><h2>24</h2><span>📝 Projects</span></div><div class="stat"><h2>24MB</h2><span>🗃️ Database</span></div><div class="stat"><h2>99.9%</h2><span>🕑 Uptime</span></div><div class="stat"><h2>12</h2><span>⚙️ Services</span></div><div class="stat"><h2>24</h2><span>🎯 Projects</span></div></div><a href="#" class="btn"> Link Anda Info </a></div><div class="card large"><h3>VISITOR INFO</h3><ul class="visitor-list"><li>🌐 <strong>Your IP Address :</strong><span id="ip-address">butuh file php....</span></li><li>📌 <strong>Location :</strong><span id="geo-location">butuh file php....</span></li><li>🕑 <strong>Local Time : </strong><span id="local-time">Loading...</span></li></ul><h4>SERVER INFO</h4><ul class="visitor-list"><li>🖥 <strong>Engine :</strong><span id="server-info">butuh file php....</span></li><li>🗃️ <strong>Database :</strong><span id="server-info">SQL on 11.4.12-MariaDB</span></li></ul></div></div></section><footer> © Copyright 2026 | budi.setiaji.com </footer></div>
<script>function updateTime(){const now=new Date();const timeZone=Intl.DateTimeFormat().resolvedOptions().timeZone;const options={hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:!0};const timeStr=now.toLocaleTimeString([],options);const offsetMinutes=now.getTimezoneOffset();const offsetHours=-(offsetMinutes/60);const offsetStr="UTC"+(offsetHours>=0?"+":"")+offsetHours;document.getElementById("local-time").textContent=timeStr+" ("+offsetStr+")"}
updateTime();setInterval(updateTime,1000)</script></body></html>