HTML

 Website dengan footer dan menu gallery, kontak

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Website profil pribadi, galeri, dan kontak.">
  <title>Profil Pribadi | Website Saya</title>

  <style>
    /* RESET */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.6;
      color: #263238;
      background: #f5f7fb;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .container {
      width: 90%;
      max-width: 1100px;
      margin: auto;
    }

    /* NAVBAR */
    header {
      background: #ffffff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .navbar {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .logo {
      font-size: 23px;
      font-weight: bold;
      color: #2563eb;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 25px;
      list-style: none;
    }

    .nav-links a {
      font-size: 14px;
      font-weight: 600;
      transition: color 0.3s;
    }

    .nav-links a:hover {
      color: #2563eb;
    }

    .menu-toggle {
      display: none;
      border: none;
      background: none;
      font-size: 28px;
      cursor: pointer;
      color: #263238;
    }

    /* HERO */
    .hero {
      background: linear-gradient(135deg, #dbeafe, #eef2ff);
      padding: 85px 0;
    }

    .hero-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;
    }

    .hero-text {
      flex: 1;
    }

    .hero-text .subtitle {
      color: #2563eb;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .hero-text h1 {
      font-size: clamp(32px, 5vw, 52px);
      line-height: 1.2;
      margin-bottom: 20px;
    }

    .hero-text p {
      color: #526174;
      margin-bottom: 28px;
    }

    .hero-image {
      width: 270px;
      height: 270px;
      object-fit: cover;
      border-radius: 50%;
      border: 7px solid white;
      box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
      background: #dbeafe;
    }

    .btn {
      display: inline-block;
      padding: 12px 24px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      font-weight: bold;
      border: none;
      cursor: pointer;
      transition: background 0.3s;
    }

    .btn:hover {
      background: #1d4ed8;
    }

    /* SECTION UMUM */
    section {
      padding: 70px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 40px;
    }

    .section-title h2 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .section-title p {
      color: #64748b;
    }

    /* TENTANG SAYA */
    .about-content {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 35px;
      align-items: start;
    }

    .about-card {
      background: white;
      padding: 28px;
      border-radius: 14px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    }

    .about-card h3 {
      color: #2563eb;
      margin-bottom: 15px;
    }

    .skills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .skill {
      background: #dbeafe;
      color: #1d4ed8;
      padding: 7px 13px;
      border-radius: 20px;
      font-size: 13px;
    }

    /* GALERI */
    .gallery {
      background: #eef2f7;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .gallery-item {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
      transition: transform 0.3s;
    }

    .gallery-item:hover {
      transform: translateY(-5px);
    }

    .gallery-item img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      background: #dbeafe;
    }

    .gallery-caption {
      padding: 17px;
    }

    .gallery-caption h3 {
      margin-bottom: 5px;
      font-size: 18px;
    }

    .gallery-caption p {
      color: #64748b;
      font-size: 14px;
    }

    /* KONTAK */
    .contact-wrapper {
      max-width: 700px;
      margin: auto;
      background: white;
      padding: 30px;
      border-radius: 14px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }

    .contact-info {
      text-align: center;
      margin-bottom: 25px;
      color: #64748b;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-group label {
      display: block;
      font-weight: bold;
      margin-bottom: 7px;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font: inherit;
      background: #ffffff;
      color: #263238;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: 2px solid #93c5fd;
      border-color: #2563eb;
    }

    .form-group textarea {
      min-height: 130px;
      resize: vertical;
    }

    .contact-wrapper .btn {
      width: 100%;
      font-size: 15px;
    }

    .form-note {
      font-size: 12px;
      color: #64748b;
      margin-top: 12px;
    }

    /* FOOTER */
    footer {
      background: #172554;
      color: white;
      padding: 30px 0;
      text-align: center;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin: 15px 0;
    }

    .footer-links a {
      color: #bfdbfe;
      font-size: 14px;
    }

    .footer-links a:hover {
      color: white;
    }

    .copyright {
      color: #cbd5e1;
      font-size: 13px;
      margin-top: 15px;
    }

    /* RESPONSIVE HP DAN TABLET */
    @media (max-width: 768px) {
      .navbar {
        min-height: 65px;
      }

      .menu-toggle {
        display: block;
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        padding: 20px 5%;
        background: white;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
      }

      .nav-links.active {
        display: flex;
      }

      .hero {
        padding: 55px 0;
      }

      .hero-content {
        flex-direction: column-reverse;
        text-align: center;
        gap: 28px;
      }

      .hero-image {
        width: 210px;
        height: 210px;
      }

      .about-content {
        grid-template-columns: 1fr;
      }

      .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .gallery-item img {
        height: 180px;
      }
    }

    @media (max-width: 480px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }

      .gallery-item img {
        height: 220px;
      }

      .section-title h2 {
        font-size: 27px;
      }

      .contact-wrapper {
        padding: 20px;
      }
    }
  </style>
</head>

<body>

  <!-- MENU NAVIGASI -->
  <header>
    <nav class="navbar container" aria-label="Navigasi utama">
      <a href="#beranda" class="logo">ProfilSaya.</a>

      <button
        class="menu-toggle"
        id="menuToggle"
        type="button"
        aria-label="Buka menu navigasi"
        aria-expanded="false"
        aria-controls="navLinks">
        &#9776;
      </button>

      <ul class="nav-links" id="navLinks">
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#tentang">Tentang Saya</a></li>
        <li><a href="#galeri">Galeri</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- BERANDA -->
    <section class="hero" id="beranda">
      <div class="container hero-content">
        <div class="hero-text">
          <p class="subtitle">HALO, SELAMAT DATANG!</p>
          <h1>Saya Nama Anda</h1>
          <p>
            Saya adalah pribadi yang kreatif, suka belajar hal baru,
            dan senang mengembangkan kemampuan untuk masa depan.
            Selamat datang di website profil pribadi saya!
          </p>
          <a href="#tentang" class="btn">Kenali Saya</a>
        </div>

        <img
          class="hero-image"
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=500&q=80"
          alt="Foto profil"
          onerror="this.onerror=null;this.src='https://placehold.co/400x400/e0e7ff/1e40af?text=Foto+Profil';">
      </div>
    </section>

    <!-- TENTANG SAYA -->
    <section id="tentang">
      <div class="container">
        <div class="section-title">
          <h2>Tentang Saya</h2>
          <p>Mengenal lebih dekat tentang diri saya.</p>
        </div>

        <div class="about-content">
          <div class="about-card">
            <h3>Profil Pribadi</h3>
            <p>
              Perkenalkan, nama saya Nama Anda. Saya memiliki
              semangat untuk terus belajar, mencoba pengalaman baru,
              dan mengembangkan potensi diri. Website ini menjadi
              tempat untuk berbagi cerita, kegiatan, dan karya saya.
            </p>
          </div>

          <div class="about-card">
            <h3>Keahlian dan Minat</h3>
            <p>
              Berikut beberapa bidang yang saya minati dan ingin
              terus kembangkan.
            </p>

            <div class="skills">
              <span class="skill">Kreativitas</span>
              <span class="skill">Teknologi</span>
              <span class="skill">Desain</span>
              <span class="skill">Komunikasi</span>
              <span class="skill">Belajar</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- GALERI -->
    <section class="gallery" id="galeri">
      <div class="container">
        <div class="section-title">
          <h2>Galeri Saya</h2>
          <p>Kumpulan foto kegiatan, pengalaman, dan karya saya.</p>
        </div>

        <div class="gallery-grid">
          <article class="gallery-item">
            <img
              src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=700&q=80"
              alt="Kegiatan belajar"
              loading="lazy"
              onerror="this.onerror=null;this.src='https://placehold.co/700x400/e0e7ff/1e40af?text=Kegiatan';">
            <div class="gallery-caption">
              <h3>Kegiatan</h3>
              <p>Dokumentasi kegiatan sehari-hari.</p>
            </div>
          </article>

          <article class="gallery-item">
            <img
              src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=700&q=80"
              alt="Belajar teknologi"
              loading="lazy"
              onerror="this.onerror=null;this.src='https://placehold.co/700x400/e0e7ff/1e40af?text=Teknologi';">
            <div class="gallery-caption">
              <h3>Teknologi</h3>
              <p>Belajar dan mencoba hal baru.</p>
            </div>
          </article>

          <article class="gallery-item">
            <img
              src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=700&q=80"
              alt="Momen pribadi"
              loading="lazy"
              onerror="this.onerror=null;this.src='https://placehold.co/700x400/e0e7ff/1e40af?text=Kenangan';">
            <div class="gallery-caption">
              <h3>Kenangan</h3>
              <p>Momen berharga yang ingin dikenang.</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- KONTAK -->
    <section id="kontak">
      <div class="container">
        <div class="section-title">
          <h2>Hubungi Saya</h2>
          <p>Punya pertanyaan atau ingin menyapa? Silakan kirim pesan.</p>
        </div>

        <div class="contact-wrapper">
          <p class="contact-info">
            Isi formulir berikut untuk menyiapkan pesan melalui email.
          </p>

          <form id="contactForm">
            <div class="form-group">
              <label for="nama">Nama lengkap</label>
              <input
                type="text"
                id="nama"
                name="nama"
                placeholder="Masukkan nama Anda"
                autocomplete="name"
                required>
            </div>

            <div class="form-group">
              <label for="email">Email Anda</label>
              <input
                type="email"
                id="email"
                name="email"
                placeholder="nama@email.com"
                autocomplete="email"
                required>
            </div>

            <div class="form-group">
              <label for="pesan">Pesan</label>
              <textarea
                id="pesan"
                name="pesan"
                placeholder="Tuliskan pesan Anda..."
                required></textarea>
            </div>

            <button type="submit" class="btn">Kirim Pesan</button>

            <p class="form-note">
              Tombol ini akan membuka aplikasi email Anda.
              Pesan tidak dikirim otomatis dari website.
            </p>
          </form>
        </div>
      </div>
    </section>
  </main>

  <!-- FOOTER -->
  <footer>
    <div class="container">
      <h3>ProfilSaya.</h3>
      <p>Terima kasih telah mengunjungi website saya.</p>

      <div class="footer-links">
        <a href="#beranda">Beranda</a>
        <a href="#tentang">Tentang Saya</a>
        <a href="#galeri">Galeri</a>
        <a href="#kontak">Kontak</a>
      </div>

      <p class="copyright">
        &copy; <span id="tahun"></span> Nama Anda.
        Semua hak dilindungi.
      </p>
    </div>
  </footer>

  <script>
    "use strict";

    // MENU RESPONSIF
    const menuToggle = document.getElementById("menuToggle");
    const navLinks = document.getElementById("navLinks");

    menuToggle.addEventListener("click", function () {
      const isOpen = navLinks.classList.toggle("active");
      menuToggle.setAttribute("aria-expanded", String(isOpen));
      menuToggle.setAttribute(
        "aria-label",
        isOpen ? "Tutup menu navigasi" : "Buka menu navigasi"
      );
    });

    // TUTUP MENU SETELAH TAUTAN DIPILIH
    navLinks.querySelectorAll("a").forEach(function (link) {
      link.addEventListener("click", function () {
        navLinks.classList.remove("active");
        menuToggle.setAttribute("aria-expanded", "false");
        menuToggle.setAttribute("aria-label", "Buka menu navigasi");
      });
    });

    // TAHUN FOOTER OTOMATIS
    document.getElementById("tahun").textContent =
      new Date().getFullYear();

    // FORM KONTAK MELALUI APLIKASI EMAIL
    const contactForm = document.getElementById("contactForm");

    contactForm.addEventListener("submit", function (event) {
      event.preventDefault();

      if (!contactForm.reportValidity()) {
        return;
      }

      const nama = document.getElementById("nama").value.trim();
      const email = document.getElementById("email").value.trim();
      const pesan = document.getElementById("pesan").value.trim();

      if (!nama || !email || !pesan) {
        return;
      }

      // GANTI DENGAN ALAMAT EMAIL MILIK ANDA
      const emailTujuan = "emailanda@example.com";

      const subjek = encodeURIComponent(
        "Pesan dari website - " + nama
      );

      const isiPesan = encodeURIComponent(
        "Nama: " + nama +
        "\nEmail: " + email +
        "\n\nPesan:\n" + pesan
      );

      window.location.href =
        "mailto:" + emailTujuan +
        "?subject=" + subjek +
        "&body=" + isiPesan;
    });
  </script>

</body>
</html>