Kode HTML Format Halaman Jasa Elegan dan SEO Friendly

Kode HTML Postingan Halaman Jasa

Kode Script HTML ini berfungsi untuk membuat tampilan halaman jasa anda lebih elegan, seperti halaman Jasa GISTARIAU terasa elegan, smooth, dan SEO Friendly.

📄 HTML CODE

<style>
/* ================================
   HALAMAN JASA GISTARIAU
   Author : GISTARIAU
   ================================ */

.jasa-gistariau{
  max-width:1100px;
  margin:auto;
  padding:24px 16px;
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  color:#1f2937;
}

/* HEADER */
.jasa-header h1{
  font-size:30px;
  font-weight:700;
  color:#0f3d2e;
  margin-bottom:12px;
}

.jasa-header p{
  font-size:15px;
  line-height:1.8;
  color:#4b5563;
}

/* GRID */
.jasa-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-top:36px;
}

/* CARD */
.jasa-item{
  background:#ffffff;
  border-radius:14px;
  padding:22px 20px;
  border-left:5px solid #0f766e;
  box-shadow:0 8px 22px rgba(15,61,46,.08);
  transition:.25s ease;
}

.jasa-item:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(15,61,46,.15);
}

.jasa-item h2{
  font-size:18px;
  font-weight:600;
  color:#0f3d2e;
  margin:10px 0;
}

.jasa-item p{
  font-size:14px;
  line-height:1.7;
  color:#374151;
}

/* ICON */
.jasa-icon{
  width:48px;
  height:48px;
  background:#e6f4f1;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jasa-icon svg{
  width:26px;
  height:26px;
  fill:#0f766e;
}

/* CTA */
.jasa-cta{
  margin-top:50px;
  padding:32px 22px;
  background:linear-gradient(135deg,#0f3d2e,#0f766e);
  border-radius:18px;
  color:#fff;
  text-align:center;
}

.jasa-cta p{
  font-size:16px;
  line-height:1.7;
}

.jasa-cta a{
  display:inline-block;
  margin-top:18px;
  padding:14px 32px;
  background:#ffffff;
  color:#0f3d2e;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:.25s ease;
}

.jasa-cta a:hover{
  background:#e6f4f1;
}
</style>
<section class="jasa-gistariau">

  <div class="jasa-header">
    <h1>Jasa Surveyor dan Pemetaan Profesional di Riau</h1>
    <p>
      <strong>GISTARIAU</strong> menyediakan layanan survey, pemetaan,
      drone, dan pengembangan website dengan dukungan tenaga ahli
      berpengalaman dan peralatan modern.
    </p>
    <p>
<span style="
font-size:0;
line-height:0;
color:transparent;
user-select:text;
white-space:nowrap;
">
&#83;&#117;&#109;&#98;&#101;&#114;&#32;&#97;&#114;&#116;&#105;&#107;&#101;&#108;&#58;&#8203;
<a href="&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#119;&#119;&#119;&#46;&#103;&#105;&#115;&#116;&#97;&#114;&#105;&#97;&#117;&#46;&#99;&#111;&#109;&#47;" target="_blank" rel="noopener">
&#71;&#73;&#83;&#84;&#65;&#82;&#73;&#65;&#85;&#46;&#99;&#111;&#109;
</a>
</span>
</p>

  </div>

  <div class="jasa-list">

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M3 6l7-3 7 3 4-2v14l-4 2-7-3-7 3V6z"/></svg>
      </div>
      <h2>Jasa Survey dan Pemetaan</h2>
      <p>Layanan survey dan pemetaan untuk kebutuhan legal, perencanaan wilayah, dan pengelolaan lahan.</p>
    </article>

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4zm10 0h6v6h-6zM4 14h6v6H4zm10 4h6v2h-6z"/></svg>
      </div>
      <h2>Pemetaan Lahan / Peta Batas</h2>
      <p>Pembuatan peta batas lahan lengkap dengan koordinat, data digital, dan hasil siap cetak.</p>
    </article>

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M12 2l4 6h-3l3 5h-4l2 5h-6l2-5H8l3-5H8z"/></svg>
      </div>
      <h2>Sensus / Perhitungan Jumlah Pohon</h2>
      <p>Inventarisasi dan perhitungan jumlah pohon untuk perkebunan dan kehutanan.</p>
    </article>

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M12 10a3 3 0 100 6 3 3 0 000-6zm8-2h-3l-2-2H9L7 8H4v2h3l1 1v2l-1 1H4v2h3l2 2h6l2-2h3v-2h-3l-1-1v-2l1-1h3z"/></svg>
      </div>
      <h2>Drone Pemetaan / Citra Udara</h2>
      <p>Pengambilan citra udara resolusi tinggi untuk analisis spasial dan pemetaan detail.</p>
    </article>

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4zM8 10l4 3 4-3"/></svg>
      </div>
      <h2>Drone Dokumentasi (Foto & Video)</h2>
      <p>Dokumentasi udara profesional untuk laporan proyek, promosi, dan monitoring.</p>
    </article>

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3zM7 20h10v-2H7z"/></svg>
      </div>
      <h2>Web Portofolio (Data Diri)</h2>
      <p>Website portofolio personal profesional untuk surveyor dan konsultan.</p>
    </article>

    <article class="jasa-item">
      <div class="jasa-icon">
        <svg viewBox="0 0 24 24"><path d="M3 3h18v18H3zM7 7h4v4H7zM13 7h4v4h-4zM7 13h10v4H7z"/></svg>
      </div>
      <h2>Web Perusahaan & Portal Berita</h2>
      <p>Website perusahaan dan portal berita SEO-friendly, cepat, dan mudah dikelola.</p>
    </article>

  </div>

  <div class="jasa-cta">
    <p><strong>Butuh jasa survey, drone, atau website profesional?</strong><br>
    Konsultasi gratis & penawaran terbaik untuk Anda.</p>
    <a href="https://wa.me/62XXXXXXXXXX" target="_blank" rel="noopener">
      Hubungi via WhatsApp
    </a>
  </div>

</section>
  

🔍 Live Preview