:root { --color-bg: #0a0e1a; --color-primary: #00ffff; --color-secondary: #1a2238; --color-text: #e0e0e0; --color-heading: #ffffff; --font-heading: 'Orbitron', sans-serif; --font-body: 'Poppins', sans-serif; } body, html { margin: 0; padding: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); scroll-behavior: smooth; overflow-x: hidden; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; /* Place it behind the cover */ } /* === Cover Splash Screen (Now contains the main content initially) === */ #cover-splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity 1s ease-out; overflow: hidden; /* Prevent scrollbars on cover */ } #cover-splash.hidden { opacity: 0; pointer-events: none; } .header-content { position: relative; z-index: 2; padding: 20px; } .header-content h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 8vw, 5rem); color: var(--color-heading); text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 15px var(--color-primary), 0 0 30px var(--color-primary); margin: 0; } .header-content .subtitle { font-size: 1.3rem; color: var(--color-text); margin: 20px 0 30px 0; } .btn { background-color: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); padding: 15px 35px; font-family: var(--font-heading); font-size: 1.1rem; text-decoration: none; border-radius: 5px; transition: all 0.3s ease; box-shadow: 0 0 15px var(--color-primary) inset; cursor: pointer; } .btn:hover { background-color: var(--color-primary); color: var(--color-bg); box-shadow: 0 0 25px var(--color-primary); } /* === Main Content Area === */ #main-content { display: none; /* Hidden until cover is dismissed */ position: relative; z-index: 10; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Navigation Bar */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(10, 14, 26, 0.8); backdrop-filter: blur(10px); z-index: 99; transform: translateY(100%); transition: transform 0.4s ease-out; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); display: flex; justify-content: space-around; padding: 10px 0; } .bottom-nav.visible { transform: translateY(0); } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--color-text); text-decoration: none; transition: color 0.3s, transform 0.3s; } .nav-item.active, .nav-item:hover { color: var(--color-primary); transform: translateY(-3px); } .nav-icon { font-size: 1.5rem; margin-bottom: 5px; } .nav-label { font-size: 0.7rem; font-family: var(--font-body); } section { padding: 100px 0; } .animated { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .animated.visible { opacity: 1; transform: translateY(0); } .animated.delay-1 { transition-delay: 0.2s; } .section-title { font-family: var(--font-heading); font-size: 2.8rem; text-align: center; margin-bottom: 60px; color: var(--color-primary); text-shadow: 0 0 10px var(--color-primary); } .speakers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .speaker-card { background-color: var(--color-secondary); border-radius: 10px; text-align: center; padding: 30px; border: 1px solid #2a3457; transition: transform 0.3s, box-shadow 0.3s; } .speaker-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 255, 255, 0.1); } .speaker-card img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--color-primary); margin-bottom: 20px; } .speaker-card h3 { font-family: var(--font-heading); font-size: 1.5rem; margin: 10px 0 5px 0; color: var(--color-heading); } .speaker-card p { font-size: 1rem; color: var(--color-text); } .timeline { position: relative; max-width: 800px; margin: 0 auto; } .timeline::after { content: ''; position: absolute; width: 4px; background-color: var(--color-primary); top: 0; bottom: 0; left: 50%; margin-left: -2px; box-shadow: 0 0 10px var(--color-primary); } .timeline-item { padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box; } .timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--color-bg); border: 4px solid var(--color-primary); top: 20px; border-radius: 50%; z-index: 1; transition: background-color 0.3s; } .timeline-item:hover::after { background-color: var(--color-primary); } .left { left: 0; } .right { left: 50%; } .left::after { right: -12px; } .right::after { left: -8px; } .timeline-content { padding: 20px 30px; background-color: var(--color-secondary); border-radius: 6px; cursor: pointer; } .timeline-content h4 { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-primary); margin: 0 0 10px 0; } .timeline-content p { font-size: 0.9rem; } .modal { position: fixed; z-index: 101; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center; } .modal.active { display: flex; animation: fadeIn 0.3s; } .modal-content { background-color: var(--color-secondary); border: 1px solid var(--color-primary); padding: 30px; width: 90%; max-width: 600px; position: relative; } .close-button { position: absolute; top: 10px; right: 20px; font-size: 2rem; cursor: pointer; } #register { background-color: var(--color-secondary); text-align: center; } #register p { max-width: 600px; margin: 0 auto 30px auto; font-size: 1.2rem; } .styled-form input { width: 100%; padding: 15px; margin-bottom: 15px; border-radius: 5px; border: 1px solid var(--color-primary); background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; box-sizing: border-box; } footer { text-align: center; padding: 40px 20px; padding-bottom: 80px; } @media screen and (max-width: 768px) { .timeline::after { left: 14px; } .timeline-item { width: 100%; padding-left: 50px; padding-right: 10px; } .right { left: 0%; } .left::after, .right::after { left: 5px; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

🎨 Preview Template: Future Forward | Kategori: Corporate

← Kembali ke Gallery ✨ Daftar untuk Menggunakan

Seminar Teknologi: Meningkatkan Inovasi di Era Digital

Seminar Teknologi

Meningkatkan Inovasi di Era Digital
Sunday, 2026-04-30 | 19:00 - 23:00
Restaurant The Terrace

Event Overview

Meningkatkan kemampuan dan pengetahuan karyawan

VENUE

Restaurant The Terrace

Jl. Senopati No. 88, Jakarta Selatan

FACILITIES

AC, Proyektor, Sound System, Wifi

TARGET

Seluruh karyawan

Level: Intermediate

ORGANIZER

PT Teknologi Maju Indonesia

Human Resources

Contact: HR Team (021-5555666) - 081234567890

Keynote Speakers

Dr. Budi Santoso

Dr. Budi Santoso

CEO PT Digital Solutions

Pakar teknologi dengan pengalaman 15 tahun

Ir. Sari Indah

Ir. Sari Indah

CTO PT Innovation Hub

Expert dalam artificial intelligence dan machine learning

Prof. Ahmad Rahman

Prof. Ahmad Rahman

Direktur PT Future Tech

Pemimpin dalam transformasi digital enterprise

Event Agenda

09:00-10:30 - Pembukaan

Deskripsi Pembukaan

10:45-12:00 - Sesi 1: Transformasi Digital

Deskripsi Sesi 1: Transformasi Digital

13:00-14:30 - Sesi 2: Inovasi Berkelanjutan

Deskripsi Sesi 2: Inovasi Berkelanjutan

14:45-16:00 - Penutupan

Deskripsi Penutupan

Event Information

DRESS CODE

Smart Casual

BRING

Laptop, Notebook, Pen

CERTIFICATE

Ya, tersedia sertifikat

MATERIALS

Softcopy tersedia

COST

Gratis

Tidak diperlukan

DEADLINE

2026-05-30

Secure Your Spot

Jangan lewatkan kesempatan untuk berada di garis depan inovasi. Tempat terbatas. Daftar sekarang.

ONLINE REGISTRATION

Click the link below to register:

Register Online

Registration Deadline: 2026-05-30

Fill the form below to register:

Registration Deadline: 2026-05-30

CONTACT INFORMATION

For inquiries, please contact:

HR Team (021-5555666)

081234567890

Human Resources