66 lines
2.7 KiB
HTML
66 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gallery</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
|
|
<header class="mx-auto max-w-7xl px-6 py-4">
|
|
<nav class="nav">
|
|
<ul class="flex list-none items-center gap-6 p-0">
|
|
<li class="mr-auto"><a href="index.html" target="_self" title="Home">Home</a></li>
|
|
<li><a href="about.html" target="_self" title="About me">About</a></li>
|
|
<li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
|
|
<li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
|
|
<li><a href="contact.html" target="_self" title="Contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="mx-auto max-w-7xl px-6 pb-12">
|
|
<h1 class="mb-3 text-center text-3xl font-bold text-gray-800">
|
|
My Gallery
|
|
</h1>
|
|
|
|
<p class="mb-8 text-center text-gray-600">
|
|
A collection of my favorite moments.
|
|
</p>
|
|
|
|
<!-- Gallery section: menampilkan kumpulan foto dan caption -->
|
|
<section class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
<figure class="rounded-xl border-gray-200 bg-white shadow-sm hover:shadow-lg">
|
|
<img src="images/foto1.jpg" alt="Deskripsi foto pertama" class="h-56 w-full object-cover">
|
|
<figcaption class="p-4 text-center font-medium text-gray-700">
|
|
Caption Foto Pertama
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="rounded-xl border-gray-200 bg-white shadow-sm hover:shadow-lg">
|
|
<img src="images/foto1.jpg" alt="Deskripsi foto pertama" class="h-56 w-full object-cover">
|
|
<figcaption class="p-4 text-center font-medium text-gray-700">
|
|
Caption Foto Pertama
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="rounded-xl border-gray-200 bg-white shadow-sm hover:shadow-lg">
|
|
<img src="images/foto1.jpg" alt="Deskripsi foto pertama" class="h-56 w-full object-cover">
|
|
<figcaption class="p-4 text-center font-medium text-gray-700">
|
|
Caption Foto Pertama
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="mt-12 px-6 py-6 text-center text-gray-600">
|
|
<p>Author: Nathan Handoko</p>
|
|
<p>Email: nathan-h.inf25@ukwms.ac.id</p>
|
|
<p>Phone Number: 0851-0270-5905</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |