HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1160x401
2.41 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hubungi Kami | GIATMARA Jerantut</title>
    <link rel="stylesheet" href="../style.css">
    <style>
        /* Gaya khusus untuk Halaman Hubungi (Contact Page) */
        .contact-container {
            padding: 3rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .contact-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .contact-header h1 {
            color: var(--primary-blue, #0033a0);
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .contact-header p {
            color: #666;
            font-size: 1.1rem;
        }

        /* Rekabentuk susun atur dua kolum (Maklumat & Borang) */
        .contact-layout {
            display: table;
            width: 100%;
            table-layout: fixed;
            border-spacing: 30px 0;
            margin-bottom: 3rem;
        }

        .contact-column {
            display: table-cell;
            vertical-align: top;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        .info-panel h3, .form-panel h3 {
            color: var(--primary-blue, #0033a0);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-red, #e31837);
            padding-bottom: 8px;
            font-size: 1.4rem;
        }

        .info-item {
            margin-bottom: 20px;
        }

        .info-item strong {
            display: block;
            color: var(--text-dark, #333);
            margin-bottom: 5px;
        }

        .info-item p {
            color: #555;
            line-height: 1.6;
        }

        /* Gaya komponen Borang Hubungan */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #444;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            font-family: inherit;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-blue, #0033a0);
        }

        .btn-submit {
            background-color: var(--primary-red, #e31837);
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
        }

        .btn-submit:hover {
            background-color: #b3122b;
        }

        /* Gaya komponen Peta Lokasi */
        .map-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            margin-top: 20px;
        }

        .map-section h3 {
            color: var(--primary-blue, #0033a0);
            margin-bottom: 15px;
        }

        .map-placeholder {
            width: 100%;
            height: 400px;
            background-color: #e5e3df;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #ddd;
        }

        .map-placeholder iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Responsif untuk paparan Telefon Pintar */
        @media (max-width: 768px) {
            .contact-layout {
                display: block;
            }
            .contact-column {
                display: block;
                width: 100%;
                margin-bottom: 30px;
            }
        }
    </style>
</head>
<body>

    <header class="navbar">
        <div class="logo-container">
            <img src="../assets/logo.png" alt="Logo GIATMARA" class="logo" onerror="this.style.display='none'">
            <h2>GIATMARA Jerantut</h2>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a href="../index.html">Utama</a></li>
                <li><a href="about.html">Tentang Kami</a></li>
                <li><a href="courses.html">Kursus</a></li>
                <li><a href="activity.html">Aktiviti</a></li>
                <li><a href="gallery.html">Galeri</a></li>
                <li><a href="contact.html" class="active">Hubungi</a></li>
            </ul>
        </nav>
    </header>

    <main class="contact-container">
        <div class="contact-header">
            <h1>Hubungi Kami</h1>
            <p>Mempunyai sebarang pertanyaan mengenai kursus, pendaftaran atau kemasukan? Sila hubungi kami atau hantar mesej melalui borang di bawah.</p>
        </div>

        <div class="contact-layout">
            <div class="contact-column info-panel">
                <h3>Maklumat Perhubungan</h3>
                
                <div class="info-item">
                    <strong>Alamat Kedudukan:</strong>
                    <p>GIATMARA Jerantut,<br>
                    KM 4, Jalan Scott,<br>
                    27000 Jerantut, Pahang Darul Makmur.</p>
                </div>

                <div class="info-item">
                    <strong>No. Telefon:</strong>
                    <p>+60 9-266 xxxx</p>
                </div>

                <div class="info-item">
                    <strong>E-mel Rasmi:</strong>
                    <p>gmerantut@giatmara.edu.my</p>
                </div>

                <div class="info-item">
                    <strong>Waktu Operasi Pejabat:</strong>
                    <p>Isnin - Khamis: 8:00 AM - 5:00 PM<br>
                    Jumaat: 8:00 AM - 12:15 PM & 2:45 PM - 5:00 PM<br>
                    Sabtu, Ahad & Cuti Kelepasan Am: Tutup</p>
                </div>
            </div>

            <div class="contact-column form-panel">
                <h3>Hantar Mesej / Pertanyaan</h3>
                <form action="#" method="POST" id="contactForm">
                    <div class="form-group">
                        <label for="name">Nama Penuh</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="Masukkan nama penuh anda" required>
                    </div>

                    <div class="form-group">
                        <label for="email">Alamat E-mel</label>
                        <input type="email" id="email" name="email" class="form-control" placeholder="contoh@email.com" required>
                    </div>

                    <div class="form-group">
                        <label for="phone">No. Telefon (WhatsApp)</label>
                        <input type="tel" id="phone" name="phone" class="form-control" placeholder="Contoh: 0123456789">
                    </div>

                    <div class="form-group">
                        <label for="subject">Perkara / Kursus Pilihan</label>
                        <input type="text" id="subject" name="subject" class="form-control" placeholder="Contoh: Pertanyaan Kursus Automotif">
                    </div>

                    <div class="form-group">
                        <label for="message">Mesej / Soalan</label>
                        <textarea id="message" name="message" class="form-control" rows="5" placeholder="Tuliskan pertanyaan anda secara terperinci di sini..." required></textarea>
                    </div>

                    <button type="submit" class="btn-submit">Hantar Pertanyaan</button>
                </form>
            </div>
        </div>

        <div class="map-section">
            <h3>Lokasi Kampus Kami</h3>
            <p style="margin-bottom: 15px; color: #555;">Sila rujuk panduan peta interaktif di bawah untuk berkunjung ke GIATMARA Jerantut:</p>
            <div class="map-placeholder">
                <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=102.3200%2C3.9200%2C102.3800%2C3.9600&amp;layer=mapnik"></iframe>
            </div>
        </div>
    </main>

    <footer style="margin-top: 3rem;">
        <p>&copy; 2026 GIATMARA Jerantut. Hak cipta terpelihara.</p>
    </footer>

    <script>
        // Menguruskan interaksi butang hantar borang secara simulasi
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Terima kasih! Mesej anda telah berjaya dihantar secara simulasi. Pihak pentadbiran GIATMARA Jerantut akan maklum balas dengan segera.');
            this.reset();
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
458KB
Transfer Size
1553KB
Content Size
279.0ms
Dom Content Loaded
384.0ms
First Paint
797.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests