index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

    <!-- my css -->
    <link rel="stylesheet" href="style.css" />

    <title>ilham</title>
  </head>
  <body id="home">
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger shadow-sm fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">ilham</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto">
            <a class="nav-link active" aria-current="page" href="#home">Home</a>
            <a class="nav-link active" aria-current="page" href="#about">about</a>
            <a class="nav-link active" aria-current="page" href="#my gallery">my gallery</a>
            <a class="nav-link active" aria-current="page" href="#contact">contact me</a>
            <a class="nav-link active" aria-current="page" href="#social media">social media</a>
          </div>
        </div>
      </div>
    </nav>
    <!-- akhir navbar -->

    <!-- jumbotron -->
    <section class="jumbotron text-center">
      <img src="img/spongebob.jpeg" alt="ilham" width="200" class="rounded-circle img-thumbnail" />
      <h1 class="display-4">ilham putra</h1>
      <p class="lead">student|book enthusiast</p>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#ffff"
          fill-opacity="1"
          d="M0,288L16,256C32,224,64,160,96,154.7C128,149,160,203,192,213.3C224,224,256,192,288,202.7C320,213,352,267,384,250.7C416,235,448,149,480,133.3C512,117,544,171,576,170.7C608,171,640,117,672,101.3C704,85,736,107,768,149.3C800,192,832,256,864,240C896,224,928,128,960,128C992,128,1024,224,1056,224C1088,224,1120,128,1152,128C1184,128,1216,224,1248,261.3C1280,299,1312,277,1344,229.3C1376,181,1408,107,1424,69.3L1440,32L1440,320L1424,320C1408,320,1376,320,1344,320C1312,320,1280,320,1248,320C1216,320,1184,320,1152,320C1120,320,1088,320,1056,320C1024,320,992,320,960,320C928,320,896,320,864,320C832,320,800,320,768,320C736,320,704,320,672,320C640,320,608,320,576,320C544,320,512,320,480,320C448,320,416,320,384,320C352,320,320,320,288,320C256,320,224,320,192,320C160,320,128,320,96,320C64,320,32,320,16,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- akhir jumbotron -->

    <!-- about -->
    <section id="about">
      <div class="container">
        <div class="row">
          <div class="col text-center mb-3">
            <h2>about</h2>
          </div>
        </div>
        <div class="row">
          <div class="col text-center fs-5">
            <p>i'm just a geek who loves video games,and movies</p>
          </div>
        </div>
      </div>
    </section>
    <!-- akhir about -->

    <!-- gallery -->
    <section id="my gallery" style="background-color: #4c76bb">
      <div class="container">
        <div class="row text-center mb-3">
          <div class="col">
            <h2>my gallery</h2>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="img/gallery/gallery1.jpeg" class="card-img-top" alt="gallery1" />
              <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="img/gallery/gallery1.jpeg" class="card-img-top" alt="gallery1" />
              <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="img/gallery/gallery1.jpeg" class="card-img-top" alt="gallery1" />
              <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="img/gallery/gallery1.jpeg" class="card-img-top" alt="gallery1" />
              <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <div class="card">
              <img src="img/gallery/gallery1.jpeg" class="card-img-top" alt="gallery1" />
              <div class="card-body">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#ffffff"
          fill-opacity="1"
          d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
        ></path>
      </svg>
    </section>
    <!-- akhir gallery -->

    <!-- contact -->
    <section id="contact">
      <div class="container">
        <div class="row mb-3">
          <div class="col text-center">
            <h2>contact me</h2>
          </div>
        </div>
        <div class="row text-center justify-content-center">
          <div class="col-md-6">
            <div class="alert alert-warning alert-dismissible fade show d-none my-alert" role="alert">
              <strong>thank you!</strong> we've received your message.
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <form name="contact-form">
              <div class="mb-3">
                <label for="name" class="form-label">nama lengkap</label>
                <input type="text" class="form-control" id="name" aria-describedby="name" name="name" />
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" aria-describedby="email" name="email" />
              </div>
              <div class="mb-3">
                <label for="pesan" class="form-label">message</label>
                <textarea class="form-control" id="pesan" rows="3" name="message"></textarea>
              </div>

              <button type="submit" class="btn btn-success btn-kirim">send</button>

              <button class="btn btn-primary btn-loading d-none" type="button" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Loading...
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- akhir contact -->

    <!-- social media -->
    <section id="social media">
      <div class="container">
        <div class="row text-center">
          <div class="col">
            <h2>social media</h2>
          </div>
        </div>
    <div class="text-center fw-bold">
      <a href="https://www.facebook.com/muhamad.i.putra.9883">facebook</a>
    </div>
    <div class="text-center fw-bold">
      <a href="https://www.instagram.com/_ilham_ptr__/">instagram</a>
    </div>
    <div class="text-center fw-bold">
      <a href="https://www.youtube.com/channel/UCOqigZwKoaAXobhMJwoH8RQ">youtube</a>
    </div>
    <div class="text-center fw-bold">
      <a href="https://twitter.com/iamptr007">twitter</a>
    </div>

    <!-- akhir social media  -->

    <!-- footer -->
    <section id="footer">
    <footer class="text-dark text-center">
      <p>created by <a href="https://www.instagram.com/_ilham_ptr__/" class="text-dark"> ilham putra</a></p>
    </footer>
    <!-- akhir footer -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

     <!-- untuk form -->
    <script>
      const scriptURL = 'https://script.google.com/macros/s/AKfycbxHGDlEyfPoQq6Fbmt35ZypaxFIjsF8SnB-AupLxZnFTwGJyGYMwaCIvUUX6mcxXIII/exec';
      const form = document.forms['contact-form']
      const btnKirim = document.querySelector('.btn-kirim');
      const btnLoading = document.querySelector('.btn-loading');
      const myAlert = document.querySelector('.my-alert');
    
      form.addEventListener('submit', e => {
        e.preventDefault();
        // ketika tombol submit diklik
        // tampilkan tombol loading, hilangkan tombol kirim
        btnLoading.classList.toggle('d-none');
        btnKirim.classList.toggle('d-none');
        fetch(scriptURL, { method: 'POST', body: new FormData(form)})
          .then(response => {
            // tampilkan tombol kirim, hilangkan tombol loading  
            btnLoading.classList.toggle('d-none');
            btnKirim.classList.toggle('d-none');
            // tampilkan alert
            myAlert.classList.toggle('d-none');
            // form reset
            form.reset();
            console.log('Success!', response)
          })
          .catch(error => console.error('Error!', error.message))
      })
    </script>

    <!-- akhir untuk form -->
  </body>
</html>