Code 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">
<!--Bootstrap Icon-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icon@1.3.0/font/bootstrap-icon.css"/>
<!--My CSS-->
<link rel="stylesheet" href="style.css"/>
<title>Portofolio</title>
</head>
<body id="Home">
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Sihabudin Alwi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#Home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#Article">Article</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Akhir navbar-->
<!--Jumbotron-->
<section class="jumbotron text-center mb-3">
<img src="img/sihab.jpg" alt="sihab" width="200" class="rounded-circle img-thumbnail" />
<h1 class="display-4">Sihabudin Alwi</h1>
<p class="lead fw-bold">Mahasiswa I Freelancer | Blogger</p>
</section>
<!--Akhir Jumbotron-->
<!--About-->
<section id="About">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2>About Me</h2>
</div>
</div>
<div class="row justify-content-center fs-5 text-center">
<div class="col-md-4">
<p>Nama saya Sihabudin Alwi saya lahir di Kp.Mangunjaya 2000 December 13, Sukabumi. saya lulusan Dari SMAN 1 Warungkiara tahun 2019 dan saya sedang menempuh pendidikan
di Universitas Nusaputra sukabumi</p>
</div>
<div class="col-md-4">
<p>Saya ingin menjadi web developer walaupun basic dasar saya cuma HTML,CSS, dan PHP, Bootstrap Beberapa web yang pernah saya buat seperti landingpage,
web Statis</p>
</div>
</div>
</div>
</section>
<!--Akhir About-->
<!--Galery-->
<br>
<br>
<section id="Article">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2>Article</h2>
</div>
</div>
<div class="row justify-content-center fs-5 text-start">
<div class="col-md-4 mb-3">
<div class="card" style="width: 18rem;">
<img src="img/galery.jpg" class="card-img-top" alt="galery">
<div class="card-body">
<h5 class="card-title fw-bold">Crypto</h5>
<a href="https://www.akutawhuku.my.id/search/label/Crypto" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" style="width: 18rem;">
<img src="img/galery.jpg" class="card-img-top" alt="galery">
<div class="card-body">
<h5 class="card-title fw-bold">Web Tutorial</h5>
<a href="https://www.akutawhuku.my.id/search/label/Web" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" style="width: 18rem;">
<img src="img/galery.jpg" class="card-img-top" alt="galery">
<div class="card-body">
<h5 class="card-title fw-bold">Manajemen</h5>
<a href="https://www.akutawhuku.my.id/search/label/Manajemen" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" style="width: 18rem;">
<img src="img/galery.jpg" class="card-img-top" alt="galery">
<div class="card-body">
<h5 class="card-title fw-bold">Kesehatan Kulit</h5>
<a href="https://www.akutawhuku.my.id/search/label/Kulit" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card" style="width: 18rem;">
<img src="img/galery.jpg" class="card-img-top" alt="galery">
<div class="card-body">
<h5 class="card-title fw-bold">Kesehatan Mata</h5>
<a href="https://www.akutawhuku.my.id/search/label/Mata" class="btn btn-primary">Lihat Detail</a>
</div>
</div>
</div>
</div>
</div>
</section>
</br>
</br>
<br>
<br>
<!--Akhir Galery-->
<!--Contact-->
<section id="Contact">
<div class="container">
<div class="row text-center mb-3">
<div class="col">
<h2>Contact Me</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="alert alert-success alert-dismissible fade show d-none my-alert" role="alert">
<strong>Terimakasih !</strong> Pesan kamu sudah terkirim
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form name="sihab-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="nama" required>
</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" required>
</div>
<div class="mb-3">
<label for="pesan" class="form-label">Pesan</label>
<textarea class="form-control" id="pesan" rows="3" name="pesan" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-kirim">Kirim</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>
</br>
</br>
<!--Contact-->
<br>
<br>
<!--Footer-->
<footer class=" text-center pb-4">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-heart"></i>
<i class="fa fa-home"></i>
<i class="fa fa-flag"></i>
<p class="bottom-text">Copyright © <a href="https://www.akutawhuku.my.id" class="text-primary ">EsbeaTheme</a></p>
</footer>
<!--Akhir Footer-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<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>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbxk-pDU9eGXpL6gxrAxu_ei2xkDxGB6HW7P_TvBpoKV9E8PI7JB4hdO4Q-LnzEoDW3p4Q/exec'
const form = document.forms['sihab-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
//hilangkan tombol kirim tampilkan tombol loading
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
//hilangkan tombol loading tampilkan tombol kirim
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
//Tampilkan alert
myAlert.classList.toggle('d-none');
//reset formnya
form.reset();
console.log('Success!', response)
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>