Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / eCommerce / Untitled Snippet
Duplicate Snippet

Embed Snippet on Your Site

Untitled Snippet

Riga Pratama
<10
Code Preview
Comments
html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV. ABIMACHINARY — Bengkel Maintenance & Mesin UMKM, Perkebunan & Pertanian</title>
<meta name="description" content="CV. ABIMACHINARY — Bengkel maintenance dan penyedia berbagai mesin untuk UMKM, perkebunan, dan pertanian. Servis, sparepart, dan mesin baru ready stock di Malang, Jawa Timur.">
<!-- Favicon dari logo perusahaan -->
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon-192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
<link rel="apple-touch-icon" href="assets/favicon-192.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<style>
  :root{
    --navy:#0A2E55;
    --blue:#1668C1;
    --sky:#4FA8E8;
    --steel:#5B6B7C;
    --bg-off:#F4F8FC;
    --white:#FFFFFF;
    --ink:#10243E;
    --wa-green:#25D366;
    --tokped-green:#03AC0E;
    --radius-lg:22px;
    --radius-md:14px;
    --shadow-soft:0 18px 40px -16px rgba(10,46,85,.28);
    --container:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--bg-off);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  h1,h2,h3{font-family:'Oswald',sans-serif;letter-spacing:.3px;margin:0;}
  .mono{font-family:'JetBrains Mono',monospace;}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--blue);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{content:"";width:18px;height:2px;background:var(--blue);display:inline-block;}
  section{padding:88px 0;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:15px 28px;border-radius:100px;font-weight:600;font-size:15.5px;
    border:none;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--wa-green);color:#fff;box-shadow:0 12px 24px -10px rgba(37,211,102,.55);}
  .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);}
  .btn-ghost:hover{background:rgba(255,255,255,.22);}
  .btn-dark{background:var(--navy);color:#fff;}
  /* ===== HEADER ===== */
  header{
    position:sticky;top:0;z-index:1000;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(10,46,85,.08);
    transition:box-shadow .25s ease;
  }
  header.is-scrolled{box-shadow:0 8px 24px -12px rgba(10,46,85,.25);}
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 24px;max-width:var(--container);margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{height:46px;width:auto;}
  .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
  .nav-links a{
    font-weight:600;font-size:15px;color:var(--ink);position:relative;padding:6px 2px;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue);
    transform:scaleX(0);transition:transform .2s ease;transform-origin:left;
  }
  .nav-links a.active::after,.nav-links a:hover::after{transform:scaleX(1);}
  .nav-links a.active{color:var(--blue);}
  .nav-actions{display:flex;align-items:center;gap:12px;}
  .nav-actions .btn{padding:11px 20px;font-size:14px;}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
  .burger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;}
  /* ===== HERO ===== */
  #beranda{
    padding:0;position:relative;overflow:hidden;
    background:linear-gradient(125deg,var(--navy) 0%, var(--blue) 62%, var(--sky) 100%);
    scroll-margin-top:74px;
  }
  .hero-grid{
    position:absolute;inset:0;opacity:.12;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 56px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 1px, transparent 1px 56px);
    pointer-events:none;
  }
  .hero-inner{
    position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;
    align-items:center;padding:84px 24px 96px;max-width:var(--container);margin:0 auto;
  }
  .hero-copy .eyebrow{color:#BFE0FF;}
  .hero-copy .eyebrow::before{background:#BFE0FF;}
  .hero-copy h1{
    color:#fff;font-size:50px;line-height:1.08;margin:18px 0 6px;font-weight:700;
  }
  .hero-copy h1 span{color:#BFE0FF;}
  .hero-copy .tagline{
    color:#E7F1FC;font-size:19px;font-weight:500;margin-top:10px;line-height:1.5;
  }
  .hero-copy p.desc{color:#D7E7F8;font-size:15.5px;line-height:1.7;margin-top:18px;max-width:520px;}
  .hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
  /* Signature element: stainless "spec plate" card */
  .plate-wrap{display:flex;justify-content:center;}
  .plate{
    width:100%;max-width:430px;border-radius:18px;position:relative;
    background:linear-gradient(155deg,#E9EEF3 0%,#C9D3DC 38%,#EFF3F6 55%,#B7C2CC 78%,#E9EEF3 100%);
    box-shadow:var(--shadow-soft), inset 0 0 0 1px rgba(255,255,255,.5);
    padding:30px 28px 26px;
  }
  .plate::before{
    content:"";position:absolute;inset:10px;border:1.5px dashed rgba(10,46,85,.25);border-radius:12px;pointer-events:none;
  }
  .rivet{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#8b97a3 70%,#5a6470);position:absolute;box-shadow:0 1px 2px rgba(0,0,0,.3);}
  .rivet.tl{top:14px;left:14px;} .rivet.tr{top:14px;right:14px;}
  .rivet.bl{bottom:14px;left:14px;} .rivet.br{bottom:14px;right:14px;}
  .plate-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
  .plate-head .dot{width:9px;height:9px;border-radius:50%;background:#1FAE4D;box-shadow:0 0 0 4px rgba(31,174,77,.18);}
  .plate-head span{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:2px;color:var(--navy);font-weight:700;}
  .plate-row{
    display:flex;justify-content:space-between;gap:14px;padding:11px 0;
    border-bottom:1px dashed rgba(10,46,85,.18);
  }
  .plate-row:last-child{border-bottom:none;}
  .plate-row .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:1px;color:var(--steel);text-transform:uppercase;align-self:flex-start;padding-top:2px;}
  .plate-row .v{font-family:'Oswald',sans-serif;font-size:15px;color:var(--navy);text-align:right;font-weight:600;}
  .plate-foot{margin-top:18px;padding-top:14px;border-top:1.5px solid rgba(10,46,85,.18);display:flex;align-items:center;justify-content:space-between;}
  .plate-foot .badge{font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff;background:var(--navy);padding:6px 12px;border-radius:6px;letter-spacing:1px;}
  .marquee-bar{background:var(--navy);border-top:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative;}
  .marquee-track{display:flex;gap:48px;padding:13px 0;white-space:nowrap;animation:scrollx 26s linear infinite;}
  .marquee-track span{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:1.5px;color:#AFCBEC;text-transform:uppercase;}
  @keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  /* ===== SECTION HEADS ===== */
  .sec-head{max-width:640px;margin-bottom:46px;}
  .sec-head h2{font-size:34px;color:var(--navy);margin-top:14px;line-height:1.2;}
  .sec-head p{color:var(--steel);font-size:15.5px;margin-top:12px;line-height:1.7;}
  /* ===== ABOUT ===== */
  #tentang .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
  .about-art{
    background:linear-gradient(160deg,var(--navy),var(--blue));
    border-radius:var(--radius-lg);padding:40px;position:relative;min-height:300px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .about-art svg{width:100%;max-width:280px;}
  .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
  .stat-card{background:#fff;border-radius:var(--radius-md);padding:18px 20px;box-shadow:0 10px 24px -16px rgba(10,46,85,.25);}
  .stat-card .ic{color:var(--blue);margin-bottom:8px;}
  .stat-card h4{font-family:'Oswald',sans-serif;font-size:15px;color:var(--navy);margin:0 0 4px;}
  .stat-card p{font-size:13.5px;color:var(--steel);margin:0;line-height:1.5;}
  /* ===== SERVICES ===== */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .svc-card{
    background:#fff;border-radius:var(--radius-md);padding:30px 26px;
    border:1px solid rgba(10,46,85,.07);transition:transform .2s ease, box-shadow .2s ease;
  }
  .svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);}
  .svc-card .ic{
    width:52px;height:52px;border-radius:14px;background:linear-gradient(160deg,var(--blue),var(--sky));
    display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:18px;
  }
  .svc-card h3{font-size:18px;color:var(--navy);margin-bottom:8px;}
  .svc-card p{font-size:14px;color:var(--steel);line-height:1.6;margin:0;}
  /* ===== PRODUCTS ===== */
  .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .prod-card{
    background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(10,46,85,.07);
    display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease;
  }
  .prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
  .prod-thumb{
    background:linear-gradient(150deg,#0E3A6B,var(--blue));height:148px;
    display:flex;align-items:center;justify-content:center;color:#fff;position:relative;
  }
  .prod-thumb .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1px;color:#fff;padding:4px 9px;border-radius:100px;}
  .prod-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;}
  .prod-body h3{font-size:16.5px;color:var(--navy);margin-bottom:8px;line-height:1.3;}
  .prod-body p{font-size:13.5px;color:var(--steel);line-height:1.6;margin:0 0 16px;flex:1;}
  .prod-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--blue);}
  .prod-cta{text-align:center;margin-top:40px;}
  /* ===== WHY US ===== */
  #mengapa{background:#fff;}
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .why-card{text-align:left;padding:8px;}
  .why-card .num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--sky);font-weight:700;}
  .why-card h3{font-size:16.5px;color:var(--navy);margin:10px 0 8px;}
  .why-card p{font-size:13.5px;color:var(--steel);line-height:1.6;margin:0;}
  /* ===== CTA BANNER ===== */
  .cta-banner{
    background:linear-gradient(115deg,var(--navy),var(--blue));
    border-radius:28px;padding:54px 50px;margin:0 24px;max-width:calc(var(--container) - 48px);margin-left:auto;margin-right:auto;
    display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
    position:relative;overflow:hidden;
  }
  .cta-banner::after{
    content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
    border:30px solid rgba(255,255,255,.07);
  }
  .cta-banner h2{color:#fff;font-size:28px;max-width:480px;line-height:1.25;}
  .cta-banner p{color:#D7E7F8;margin-top:10px;font-size:14.5px;}
  .cta-actions{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}
  /* ===== CONTACT ===== */
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:stretch;}
  .contact-card{background:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:0 10px 28px -18px rgba(10,46,85,.25);}
  .info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(10,46,85,.08);}
  .info-row:last-child{border-bottom:none;}
  .info-row .ic{
    width:42px;height:42px;border-radius:10px;background:var(--bg-off);color:var(--blue);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .info-row h4{font-size:14px;color:var(--navy);margin:0 0 4px;font-family:'Oswald',sans-serif;}
  .info-row p,.info-row a{font-size:13.8px;color:var(--steel);line-height:1.6;margin:0;}
  .info-row a:hover{color:var(--blue);}
  .map-frame{border-radius:var(--radius-lg);overflow:hidden;min-height:380px;box-shadow:0 10px 28px -18px rgba(10,46,85,.25);}
  .map-frame iframe{width:100%;height:100%;min-height:380px;border:0;}
  /* ===== FOOTER ===== */
  footer{background:var(--navy);color:#CBDDF1;padding:60px 0 0;}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.12);}
  .foot-brand img{height:42px;margin-bottom:14px;}
  .foot-brand p{font-size:13.8px;line-height:1.7;color:#A9C2DE;max-width:280px;}
  .foot-col h4{font-family:'Oswald',sans-serif;color:#fff;font-size:14.5px;margin-bottom:16px;letter-spacing:.5px;}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .foot-col a{font-size:13.8px;color:#A9C2DE;}
  .foot-col a:hover{color:#fff;}
  .foot-social{display:flex;gap:10px;margin-top:6px;}
  .foot-social a{
    width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .foot-social a:hover{background:var(--blue);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:13px;color:#8DA9C7;flex-wrap:wrap;gap:10px;}
  /* ===== FLOATING BUTTONS ===== */
  .float-stack{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:14px;z-index:1200;}
  .float-btn{
    width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;box-shadow:0 12px 26px -10px rgba(0,0,0,.4);transition:transform .2s ease;position:relative;
  }
  .float-btn:hover{transform:scale(1.08);}
  .float-btn.wa{background:var(--wa-green);}
  .float-btn.tokped{background:var(--tokped-green);}
  .float-btn .ping{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--wa-green);opacity:0;animation:ping 2.4s ease-out infinite;}
  @keyframes ping{0%{opacity:.7;transform:scale(.9);}80%{opacity:0;transform:scale(1.3);}100%{opacity:0;}}
  .float-label{
    position:absolute;right:70px;top:50%;transform:translateY(-50%);
    background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  }
  .float-btn:hover .float-label{opacity:1;transform:translateY(-50%) translateX(-4px);}
  @media (max-width:980px){
    .hero-inner{grid-template-columns:1fr;text-align:left;}
    .hero-copy h1{font-size:38px;}
    .about-grid,.contact-grid{grid-template-columns:1fr;}
    .svc-grid,.prod-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:680px){
    .nav-links,.nav-actions .btn-dark{display:none;}
    .burger{display:flex;}
    .nav-links.open{
      display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;
      padding:18px 24px;gap:18px;box-shadow:0 14px 24px -10px rgba(10,46,85,.2);
    }
    section{padding:60px 0;}
    .sec-head h2{font-size:27px;}
    .svc-grid,.prod-grid,.why-grid{grid-template-columns:1fr;}
    .cta-banner{padding:36px 26px;border-radius:20px;}
    .cta-banner h2{font-size:22px;}
    .float-btn{width:52px;height:52px;}
    .float-label{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }
</style>
</head>
<body>
<!-- ===================== HEADER ===================== -->
<header id="site-header">
  <nav class="nav">
    <a href="#beranda" class="brand">
      <img src="assets/logo-abimachinary.png" alt="Logo CV. ABIMACHINARY">
    </a>
    <ul class="nav-links" id="navLinks">
      <li><a href="#beranda" class="active">Beranda</a></li>
      <li><a href="#tentang">Tentang Kami</a></li>
      <li><a href="#layanan">Layanan</a></li>
      <li><a href="#produk">Produk</a></li>
      <li><a href="#kontak">Hubungi Kami</a></li>
    </ul>
    <div class="nav-actions">
      <a class="btn btn-dark" href="https://wa.me/6281331489129?text=Halo%20CV.%20ABIMACHINARY%2C%20saya%20ingin%20konsultasi%20mengenai%20mesin." target="_blank" rel="noopener">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2Z" stroke="currentColor" stroke-width="1.6"/><path d="M8.3 8.7c.2-.5.6-.5.9-.5h.6c.2 0 .4 0 .6.5.2.5.7 1.7.7 1.9s0 .3-.2.5l-.4.5c-.1.2-.2.3 0 .6.2.4.8 1.2 1.6 1.9.9.8 1.6 1.1 1.9 1.2.2.1.4.1.5-.1l.6-.7c.2-.2.4-.2.6-.1l1.7.9c.3.1.4.2.4.4 0 .5-.4 1.4-1 1.8-.6.4-1.6.6-2.6.3-1-.3-2.6-1-4-2.4-1.4-1.4-2.1-2.9-2.4-3.9-.3-1-.1-2 .3-2.6.3-.4.4-.4.6-.4Z" fill="currentColor"/></svg>
        Konsultasi
      </a>
      <button class="burger" id="burger" aria-label="Menu"><span></span><span></span><span></span></button>
    </div>
  </nav>
</header>
<main>
  <!-- ===================== HERO / BERANDA ===================== -->
  <section id="beranda">
    <div class="hero-grid"></div>
    <div class="hero-inner">
      <div class="hero-copy">
        <span class="eyebrow">CV. ABIMACHINARY — MALANG, JAWA TIMUR</span>
        <h1>BENGKEL MAINTENANCE<br>& <span>READY MESIN</span></h1>
        <p class="tagline">UMKM, Perkebunan & Pertanian</p>
        <p class="desc">Kami melayani perbaikan dan perawatan mesin produksi, serta menyediakan mesin baru untuk usaha kecil menengah, perkebunan, dan pertanian. Mulai dari vacuum frying, vacuum drying, evaporator, mixer, hingga mesin custom sesuai kebutuhan bengkel dan usaha Anda.</p>
        <div class="hero-cta">
          <a class="btn btn-primary" href="https://wa.me/6281331489129?text=Halo%20CV.%20ABIMACHINARY%2C%20saya%20ingin%20konsultasi%20mengenai%20mesin." target="_blank" rel="noopener">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2Z" stroke="white" stroke-width="1.6"/></svg>
            Konsultasi via WhatsApp
          </a>
          <a class="btn btn-ghost" href="#produk">Lihat Produk & Layanan</a>
        </div>
      </div>
      <div class="plate-wrap">
        <div class="plate">
          <span class="rivet tl"></span><span class="rivet tr"></span><span class="rivet bl"></span><span class="rivet br"></span>
          <div class="plate-head"><span class="dot"></span><span>SPEC PLATE — ABIMACHINARY</span></div>
          <div class="plate-row"><span class="k">Jenis Usaha</span><span class="v">Bengkel & Mesin</span></div>
          <div class="plate-row"><span class="k">Layanan</span><span class="v">Maintenance + Ready Stock</span></div>
          <div class="plate-row"><span class="k">Segmen</span><span class="v">UMKM · Perkebunan · Pertanian</span></div>
          <div class="plate-row"><span class="k">Lokasi</span><span class="v">Kedungkandang, Malang</span></div>
          <div class="plate-row"><span class="k">Pengiriman</span><span class="v">Seluruh Indonesia</span></div>
          <div class="plate-foot">
            <span class="mono" style="font-size:11.5px;color:var(--steel);">No. WA 0813-3148-9129</span>
            <span class="badge">● SIAP MELAYANI</span>
          </div>
        </div>
      </div>
    </div>
    <div class="marquee-bar">
      <div class="marquee-track">
        <span>VACUUM FRYING</span><span>VACUUM DRYING</span><span>EVAPORATOR VACUUM</span><span>MIXER & PENGGORENG ABON</span><span>ROASTING KOPI</span><span>PAKET VCO</span><span>JASA MAINTENANCE</span><span>SPAREPART MESIN</span>
        <span>VACUUM FRYING</span><span>VACUUM DRYING</span><span>EVAPORATOR VACUUM</span><span>MIXER & PENGGORENG ABON</span><span>ROASTING KOPI</span><span>PAKET VCO</span><span>JASA MAINTENANCE</span><span>SPAREPART MESIN</span>
      </div>
    </div>
  </section>
  <!-- ===================== TENTANG KAMI ===================== -->
  <section id="tentang">
    <div class="wrap about-grid">
      <div class="about-art" aria-hidden="true">
        <svg viewBox="0 0 240 240" fill="none">
          <circle cx="120" cy="120" r="100" stroke="rgba(255,255,255,.18)" stroke-width="2"/>
          <g stroke="#BFE0FF" stroke-width="3" fill="none">
            <path d="M120 40a80 80 0 0 1 65 35" stroke-linecap="round"/>
            <path d="M40 120a80 80 0 0 0 35 65" stroke-linecap="round" opacity=".6"/>
          </g>
          <circle cx="120" cy="120" r="46" fill="#0E3A6B" stroke="#BFE0FF" stroke-width="3"/>
          <g fill="#BFE0FF"><circle cx="120" cy="74" r="7"/><circle cx="166" cy="120" r="7"/><circle cx="120" cy="166" r="7"/><circle cx="74" cy="120" r="7"/></g>
          <path d="M104 130l10-30 8 18 10-22 6 34" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div>
        <span class="eyebrow">Tentang Kami</span>
        <h2 class="sec-head" style="margin:14px 0 0;">Bengkel mesin yang menangani perbaikan sampai pengadaan unit baru</h2>
        <p style="color:var(--steel);font-size:15.5px;line-height:1.75;margin-top:16px;">
          CV. ABIMACHINARY adalah bengkel dan penyedia mesin yang berbasis di Malang, Jawa Timur. Kami melayani jasa maintenance dan perbaikan mesin produksi, serta menyediakan mesin ready stock maupun custom untuk kebutuhan UMKM, perkebunan, dan pertanian — mulai dari mesin pengolahan makanan seperti vacuum frying dan vacuum drying, hingga mesin pendukung produksi lainnya.
        </p>
        <div class="about-stats">
          <div class="stat-card">
            <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 12l2-7h14l2 7M5 12v7h14v-7M9 19v-4h6v4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <h4>Bengkel & Workshop</h4>
            <p>Servis langsung di lokasi kami atau panggilan ke lokasi usaha Anda.</p>
          </div>
          <div class="stat-card">
            <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <h4>Material Food Grade</h4>
            <p>Mesin pengolahan makanan menggunakan material stainless food grade.</p>
          </div>
          <div class="stat-card">
            <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 16l4-9 4 6 3-4 5 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <h4>Bisa Custom</h4>
            <p>Spesifikasi dan kapasitas mesin dapat disesuaikan kebutuhan lapangan.</p>
          </div>
          <div class="stat-card">
            <div class="ic"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 7h13l4 4v6h-3M3 7v10h3m6-10v10M3 17a2 2 0 1 0 4 0M14 17a2 2 0 1 0 4 0" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <h4>Kirim Seluruh Indonesia</h4>
            <p>Pengiriman mesin dan sparepart ke berbagai wilayah di Indonesia.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ===================== LAYANAN ===================== -->
  <section id="layanan" style="background:#fff;">
    <div class="wrap">
      <div class="sec-head">
        <span class="eyebrow">Layanan Kami</span>
        <h2>Dari servis rutin sampai pengadaan mesin baru</h2>
        <p>Satu bengkel untuk kebutuhan perawatan dan mesin usaha Anda — UMKM, perkebunan, maupun pertanian.</p>
      </div>
      <div class="svc-grid">
        <div class="svc-card">
          <div class="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M14.7 6.3a1 1 0 0 1 1.4 0l1.6 1.6a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-.5.27l-3 .7.7-3a1 1 0 0 1 .27-.5l8-8Z" stroke="currentColor" stroke-width="1.7"/><path d="M4 20h16" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
          <h3>Maintenance & Servis Mesin</h3>
          <p>Perawatan berkala, perbaikan kerusakan, dan pengecekan performa mesin produksi Anda.</p>
        </div>
        <div class="svc-card">
          <div class="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="4" y="7" width="16" height="12" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" stroke-width="1.7"/></svg></div>
          <h3>Ready Stock Mesin UMKM</h3>
          <p>Mesin pengolahan makanan & minuman siap kirim: vacuum frying, mixer, roasting, dan lainnya.</p>
        </div>
        <div class="svc-card">
          <div class="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2 2 8l10 6 10-6-10-6Z" stroke="currentColor" stroke-width="1.7"/><path d="M2 8v8l10 6 10-6V8" stroke="currentColor" stroke-width="1.7"/></svg></div>
          <h3>Mesin Pertanian & Perkebunan</h3>
          <p>Pengadaan unit mesin pendukung untuk kebutuhan pertanian dan perkebunan skala kecil-menengah.</p>
        </div>
        <div class="svc-card">
          <div class="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.7"/><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
          <h3>Fabrikasi & Custom Mesin</h3>
          <p>Pembuatan mesin sesuai spesifikasi dan kapasitas yang dibutuhkan usaha Anda.</p>
        </div>
        <div class="svc-card">
          <div class="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4.5 8-11V5l-8-3-8 3v6c0 6.5 8 11 8 11Z" stroke="currentColor" stroke-width="1.7"/></svg></div>
          <h3>Sparepart Mesin</h3>
          <p>Penyediaan komponen dan sparepart pengganti untuk berbagai jenis mesin produksi.</p>
        </div>
        <div class="svc-card">
          <div class="ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M2 12c0-4 3-7 7-7M22 12c0 4-3 7-7 7M9 5l-3-2M15 19l3 2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.7"/></svg></div>
          <h3>Konsultasi Teknis</h3>
          <p>Diskusi kebutuhan mesin dan solusi teknis sebelum menentukan unit yang tepat.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- ===================== PRODUK ===================== -->
  <section id="produk">
    <div class="wrap">
      <div class="sec-head">
        <span class="eyebrow">Kategori Produk</span>
        <h2>Mesin yang paling banyak dicari pelanggan kami</h2>
        <p>Beberapa kategori mesin yang kami sediakan. Spesifikasi & kapasitas dapat disesuaikan — tanya detail dan harga terbaru via WhatsApp atau toko Tokopedia kami.</p>
      </div>
      <div class="prod-grid">
        <div class="prod-card">
          <div class="prod-thumb"><span class="tag">FOOD PROCESSING</span>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"><path d="M6 2v6a3 3 0 0 0 3 3v9M18 2v6a3 3 0 0 1-3 3v9M6 2h3M18 2h-3" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/><circle cx="9" cy="14" r="1.4" fill="#fff"/></svg>
          </div>
          <div class="prod-body">
            <h3>Mesin Vacuum Frying</h3>
            <p>Mesin penggorengan vakum untuk keripik buah & sayur, tersedia berbagai kapasitas.</p>
            <a class="prod-link" href="https://wa.me/6281331489129?text=Halo%2C%20saya%20mau%20tanya%20Mesin%20Vacuum%20Frying" target="_blank" rel="noopener">Tanya via WhatsApp →</a>
          </div>
        </div>
        <div class="prod-card">
          <div class="prod-thumb"><span class="tag">DRYING SYSTEM</span>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"><path d="M12 2C9 7 6 10 6 14a6 6 0 0 0 12 0c0-4-3-7-6-12Z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/></svg>
          </div>
          <div class="prod-body">
            <h3>Mesin Vacuum Drying</h3>
            <p>Pengering vakum untuk hasil olahan yang lebih awet dengan suhu terkontrol.</p>
            <a class="prod-link" href="https://wa.me/6281331489129?text=Halo%2C%20saya%20mau%20tanya%20Mesin%20Vacuum%20Drying" target="_blank" rel="noopener">Tanya via WhatsApp →</a>
          </div>
        </div>
        <div class="prod-card">
          <div class="prod-thumb"><span class="tag">EVAPORATION</span>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="15" rx="7" ry="5" stroke="#fff" stroke-width="1.6"/><path d="M12 10V3M9 5l3-2 3 2" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div class="prod-body">
            <h3>Mesin Evaporator Vacuum</h3>
            <p>Untuk proses pemekatan cairan/larutan secara efisien dengan sistem vakum.</p>
            <a class="prod-link" href="https://wa.me/6281331489129?text=Halo%2C%20saya%20mau%20tanya%20Mesin%20Evaporator%20Vacuum" target="_blank" rel="noopener">Tanya via WhatsApp →</a>
          </div>
        </div>
        <div class="prod-card">
          <div class="prod-thumb"><span class="tag">MIXING</span>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"><rect x="5" y="9" width="14" height="11" rx="2" stroke="#fff" stroke-width="1.6"/><path d="M12 2v7M9 2h6" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>
          </div>
          <div class="prod-body">
            <h3>Mixer + Penggoreng Abon</h3>
            <p>Mesin gabungan pengaduk dan penggoreng untuk produksi abon dan sejenisnya.</p>
            <a class="prod-link" href="https://wa.me/6281331489129?text=Halo%2C%20saya%20mau%20tanya%20Mesin%20Mixer%20%2B%20Penggoreng%20Abon" target="_blank" rel="noopener">Tanya via WhatsApp →</a>
          </div>
        </div>
        <div class="prod-card">
          <div class="prod-thumb"><span class="tag">COFFEE</span>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8" stroke="#fff" stroke-width="1.6"/><path d="M9 12a3 4 0 1 0 6 0 3 4 0 1 0-6 0Z" stroke="#fff" stroke-width="1.4"/></svg>
          </div>
          <div class="prod-body">
            <h3>Mesin Roasting Kopi</h3>
            <p>Mesin sangrai kopi untuk pelaku usaha roastery skala UMKM.</p>
            <a class="prod-link" href="https://wa.me/6281331489129?text=Halo%2C%20saya%20mau%20tanya%20Mesin%20Roasting%20Kopi" target="_blank" rel="noopener">Tanya via WhatsApp →</a>
          </div>
        </div>
        <div class="prod-card">
          <div class="prod-thumb"><span class="tag">PAKET PRODUKSI</span>
            <svg width="46" height="46" viewBox="0 0 24 24" fill="none"><path d="M5 4h14l-1 16H6L5 4Z" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/><path d="M9 4V2h6v2" stroke="#fff" stroke-width="1.6"/></svg>
          </div>
          <div class="prod-body">
            <h3>Paket Mesin Pengolahan VCO</h3>
            <p>Paket mesin untuk produksi Virgin Coconut Oil (VCO) skala usaha kecil-menengah.</p>
            <a class="prod-link" href="https://wa.me/6281331489129?text=Halo%2C%20saya%20mau%20tanya%20Paket%20Mesin%20Pengolahan%20VCO" target="_blank" rel="noopener">Tanya via WhatsApp →</a>
          </div>
        </div>
      </div>
      <div class="prod-cta">
        <a class="btn btn-dark" href="https://www.tokopedia.com/abimachinary" target="_blank" rel="noopener">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M6 7h12l1 13H5L6 7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" stroke-width="1.6"/></svg>
          Lihat Semua Produk di Tokopedia
        </a>
      </div>
    </div>
  </section>
  <!-- ===================== MENGAPA KAMI ===================== -->
  <section id="mengapa">
    <div class="wrap">
      <div class="sec-head">
        <span class="eyebrow">Mengapa Pilih Kami</span>
        <h2>Bengkel yang fokus pada kebutuhan riil di lapangan</h2>
      </div>
      <div class="why-grid">
        <div class="why-card">
          <span class="num mono">01</span>
          <h3>Teknisi Berpengalaman</h3>
          <p>Tim teknisi yang memahami mesin produksi UMKM, perkebunan, dan pertanian.</p>
        </div>
        <div class="why-card">
          <span class="num mono">02</span>
          <h3>Bisa Disesuaikan</h3>
          <p>Kapasitas dan spesifikasi mesin dapat dibuat sesuai kebutuhan usaha Anda.</p>
        </div>
        <div class="why-card">
          <span class="num mono">03</span>
          <h3>Respon Cepat di WhatsApp</h3>
          <p>Konsultasi awal hingga survei kebutuhan dilayani langsung lewat WhatsApp.</p>
        </div>
        <div class="why-card">
          <span class="num mono">04</span>
          <h3>Dukungan Purna Jual</h3>
          <p>Tersedia layanan maintenance dan sparepart setelah mesin terpasang.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- ===================== CTA BANNER ===================== -->
  <section style="padding:20px 0 88px;">
    <div class="cta-banner">
      <div>
        <h2>Butuh servis mesin atau mau pasang mesin baru?</h2>
        <p>Ceritakan kebutuhan Anda, tim kami bantu hitungkan solusinya — gratis konsultasi awal.</p>
      </div>
      <div class="cta-actions">
        <a class="btn btn-primary" href="https://wa.me/6281331489129?text=Halo%20CV.%20ABIMACHINARY%2C%20saya%20ingin%20konsultasi%20mengenai%20mesin." target="_blank" rel="noopener">Chat WhatsApp Sekarang</a>
        <a class="btn btn-ghost" href="https://www.tokopedia.com/abimachinary" target="_blank" rel="noopener">Kunjungi Tokopedia</a>
      </div>
    </div>
  </section>
  <!-- ===================== KONTAK ===================== -->
  <section id="kontak" style="background:#fff;padding-top:0;">
    <div class="wrap">
      <div class="sec-head">
        <span class="eyebrow">Hubungi Kami</span>
        <h2>Kunjungi bengkel kami atau konsultasi online</h2>
      </div>
      <div class="contact-grid">
        <div class="contact-card">
          <div class="info-row">
            <div class="ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z" stroke="currentColor" stroke-width="1.7"/><circle cx="12" cy="10" r="2.5" stroke="currentColor" stroke-width="1.7"/></svg></div>
            <div>
              <h4>Alamat Bengkel</h4>
              <p>Jl. Kyai Parseh Jaya, Bumiayu, Kec. Kedungkandang, Malang, Jawa Timur</p>
            </div>
          </div>
          <div class="info-row">
            <div class="ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 6c0 8 7 15 15 15l3-4-6-3-2 2c-2-1-4-3-5-5l2-2-3-6-4 1Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg></div>
            <div>
              <h4>Telepon / WhatsApp</h4>
              <a href="https://wa.me/6281331489129" target="_blank" rel="noopener">0813-3148-9129</a>
            </div>
          </div>
          <div class="info-row">
            <div class="ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M3 7l9 6 9-6" stroke="currentColor" stroke-width="1.7"/></svg></div>
            <div>
              <h4>Toko Online</h4>
              <a href="https://www.tokopedia.com/abimachinary" target="_blank" rel="noopener">tokopedia.com/abimachinary</a>
            </div>
          </div>
          <div class="info-row">
            <div class="ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.7"/><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div>
            <div>
              <h4>Jam Operasional</h4>
              <p>Senin–Sabtu — <em>(silakan sesuaikan jam operasional bengkel Anda di sini)</em></p>
            </div>
          </div>
        </div>
        <div class="map-frame">
          <iframe
            src="https://maps.google.com/maps?q=-8.03107803161771,112.630966901779&z=16&output=embed"
            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
            title="Lokasi CV. ABIMACHINARY">
          </iframe>
        </div>
      </div>
    </div>
  </section>
</main>
<!-- ===================== FOOTER ===================== -->
<footer>
  <div class="wrap foot-grid">
    <div class="foot-brand">
      <img src="assets/logo-abimachinary-transparent.png" alt="Logo CV. ABIMACHINARY">
      <p>Bengkel maintenance dan penyedia mesin untuk UMKM, perkebunan, dan pertanian. Berbasis di Malang, Jawa Timur, melayani pengiriman ke seluruh Indonesia.</p>
      <div class="foot-social">
        <a href="https://wa.me/6281331489129" target="_blank" rel="noopener" aria-label="WhatsApp"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2Z" stroke="currentColor" stroke-width="1.6"/></svg></a>
        <a href="https://www.tokopedia.com/abimachinary" target="_blank" rel="noopener" aria-label="Tokopedia"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 7h12l1 13H5L6 7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" stroke-width="1.6"/></svg></a>
      </div>
    </div>
    <div class="foot-col">
      <h4>Navigasi</h4>
      <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#tentang">Tentang Kami</a></li>
        <li><a href="#layanan">Layanan</a></li>
        <li><a href="#produk">Produk</a></li>
        <li><a href="#kontak">Hubungi Kami</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>Layanan</h4>
      <ul>
        <li><a href="#layanan">Maintenance & Servis</a></li>
        <li><a href="#produk">Ready Stock Mesin</a></li>
        <li><a href="#layanan">Fabrikasi Custom</a></li>
        <li><a href="#layanan">Sparepart Mesin</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>Kontak</h4>
      <ul>
        <li><a href="https://wa.me/6281331489129" target="_blank" rel="noopener">0813-3148-9129</a></li>
        <li><a href="https://www.tokopedia.com/abimachinary" target="_blank" rel="noopener">Tokopedia Store</a></li>
        <li><a href="https://maps.google.com/?q=-8.03107803161771,112.630966901779" target="_blank" rel="noopener">Buka di Google Maps</a></li>
      </ul>
    </div>
  </div>
  <div class="wrap foot-bottom">
    <span>© <span id="year"></span> CV. ABIMACHINARY. Seluruh hak cipta dilindungi.</span>
    <span>Jl. Kyai Parseh Jaya, Bumiayu, Kec. Kedungkandang, Malang</span>
  </div>
</footer>
<!-- ===================== FLOATING BUTTONS ===================== -->
<div class="float-stack">
  <a class="float-btn tokped" href="https://www.tokopedia.com/abimachinary" target="_blank" rel="noopener" aria-label="Kunjungi Tokopedia kami">
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M6 7h12l1 13H5L6 7Z" stroke="#fff" stroke-width="1.7" stroke-linejoin="round"/><path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="#fff" stroke-width="1.7"/></svg>
    <span class="float-label">Kunjungi Tokopedia</span>
  </a>
  <a class="float-btn wa" href="https://wa.me/6281331489129?text=Halo%20CV.%20ABIMACHINARY%2C%20saya%20ingin%20konsultasi%20mengenai%20mesin." target="_blank" rel="noopener" aria-label="Konsultasi via WhatsApp">
    <span class="ping"></span>
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2Z" stroke="#fff" stroke-width="1.6"/><path d="M8.3 8.7c.2-.5.6-.5.9-.5h.6c.2 0 .4 0 .6.5.2.5.7 1.7.7 1.9s0 .3-.2.5l-.4.5c-.1.2-.2.3 0 .6.2.4.8 1.2 1.6 1.9.9.8 1.6 1.1 1.9 1.2.2.1.4.1.5-.1l.6-.7c.2-.2.4-.2.6-.1l1.7.9c.3.1.4.2.4.4 0 .5-.4 1.4-1 1.8-.6.4-1.6.6-2.6.3-1-.3-2.6-1-4-2.4-1.4-1.4-2.1-2.9-2.4-3.9-.3-1-.1-2 .3-2.6.3-.4.4-.4.6-.4Z" fill="#fff"/></svg>
    <span class="float-label">Chat WhatsApp</span>
  </a>
</div>
<script>
  // Tahun otomatis di footer
  document.getElementById('year').textContent = new Date().getFullYear();
  // Header shadow saat di-scroll
  const header = document.getElementById('site-header');
  window.addEventListener('scroll', () => {
    header.classList.toggle('is-scrolled', window.scrollY > 10);
  });
  // Menu mobile (hamburger)
  const burger = document.getElementById('burger');
  const navLinks = document.getElementById('navLinks');
  burger.addEventListener('click', () => navLinks.classList.toggle('open'));
  navLinks.querySelectorAll('a').forEach(a => a.addEventListener('click', () => navLinks.classList.remove('open')));
  // Scrollspy: highlight menu aktif sesuai posisi scroll
  const sections = document.querySelectorAll('main section[id]');
  const links = document.querySelectorAll('.nav-links a');
  const spy = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        links.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + entry.target.id));
      }
    });
  }, { rootMargin: '-40% 0px -55% 0px' });
  sections.forEach(sec => spy.observe(sec));
</script>
</body>
</html>
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet