Pages
/
microsite
Edit Microsite
Kelola struktur HTML dan relasi halaman (Sub-Page).
← Kembali ke List
Judul Microsite:
Sub Halaman Dari (Opsional):
-- Berdiri Sendiri (Parent) --
demo
wg
Waskita
timah
</>
HTML & Tailwind Code Source
Tekan TAB untuk indentasi
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Que Agency - Portfolio</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style> .fade-slide { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } </style> </head> <body class="bg-[#10171a] text-white font-sans antialiased overflow-hidden select-none"> <div class="relative w-screen h-screen flex overflow-hidden bg-[#10171a]"> <!-- ================= 1. LEFT SIDEBAR & MEGA MENU HOVER ================= --> <aside class="w-20 md:w-24 h-full bg-[#0b1013] border-r border-white/5 flex flex-col justify-between items-center py-8 z-40 relative shrink-0"> <!-- Hamburger Menu with Hover Mega Menu --> <div class="relative group cursor-pointer py-2"> <button class="w-10 h-10 flex flex-col justify-center items-center gap-1.5 focus:outline-none"> <span class="w-5 h-[2px] bg-white transition-all duration-300 group-hover:w-6"></span> <span class="w-6 h-[2px] bg-white"></span> <span class="w-3.5 h-[2px] bg-white transition-all duration-300 group-hover:w-6"></span> </button> <!-- Mega Menu Dropdown (Hover Effect) --> <div class="absolute top-0 left-24 w-72 bg-[#141c21]/95 backdrop-blur-xl border border-white/10 p-6 rounded-2xl shadow-2xl opacity-0 invisible translate-x-3 group-hover:opacity-100 group-hover:visible group-hover:translate-x-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto z-50"> <span class="text-[10px] font-semibold uppercase tracking-[0.2em] text-[#c5a880] block mb-4">Navigation Menu</span> <ul class="space-y-3.5"> <li><a href="#" class="block text-sm text-slate-300 hover:text-white hover:translate-x-1.5 transition duration-200">01. Studio Overview</a></li> <li><a href="#" class="block text-sm text-slate-300 hover:text-white hover:translate-x-1.5 transition duration-200">02. Creative Works</a></li> <li><a href="#" class="block text-sm text-slate-300 hover:text-white hover:translate-x-1.5 transition duration-200">03. Our Services</a></li> <li><a href="#" class="block text-sm text-slate-300 hover:text-white hover:translate-x-1.5 transition duration-200">04. Global Press</a></li> <li><a href="#" class="block text-sm text-slate-300 hover:text-white hover:translate-x-1.5 transition duration-200">05. Contact Us</a></li> </ul> <div class="mt-6 pt-4 border-t border-white/10"> <p class="text-[9px] text-slate-500 uppercase tracking-widest">Que Agency © 2026</p> </div> </div> </div> <!-- Vertical Social Links --> <div class="flex flex-col items-center gap-16 py-4"> <span class="text-[10px] uppercase tracking-[0.3em] text-slate-500 -rotate-90 hover:text-white cursor-pointer transition">twitter</span> <span class="text-[10px] uppercase tracking-[0.3em] text-slate-500 -rotate-90 hover:text-white cursor-pointer transition">behance</span> <span class="text-[10px] uppercase tracking-[0.3em] text-slate-500 -rotate-90 hover:text-white cursor-pointer transition">dribbble</span> </div> <!-- Bottom Indicator Dot --> <div class="w-1.5 h-1.5 rounded-full bg-[#c5a880]"></div> </aside> <!-- ================= MAIN LAYOUT AREA ================= --> <main class="flex-1 h-full flex flex-col justify-between relative overflow-hidden"> <!-- Top Header Navbar --> <header class="w-full px-8 md:px-16 py-6 flex justify-between items-center z-20"> <div class="text-xl font-bold tracking-tight text-white">Que</div> <nav class="hidden md:flex items-center gap-12 text-[11px] uppercase tracking-[0.25em] text-slate-400 font-medium"> <a href="#" class="hover:text-white transition">about</a> <a href="#" class="hover:text-white transition">works</a> <a href="#" class="hover:text-white transition">services</a> <a href="#" class="hover:text-white transition">contacts</a> </nav> </header> <!-- ================= 2. CENTRAL SLIDER SECTION ================= --> <div class="relative flex-1 flex items-center px-8 md:px-20 overflow-hidden"> <!-- Background Portrait Image with Smooth Fade Animation --> <div class="absolute right-12 md:right-24 top-1/2 -translate-y-1/2 h-[70vh] w-[42vw] max-w-[480px] rounded-xl overflow-hidden shadow-2xl z-0"> <img id="slider-image" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=1000&q=80" alt="Portrait" class="w-full h-full object-cover fade-slide filter grayscale contrast-125 brightness-90"> <div class="absolute inset-0 bg-gradient-to-t from-[#10171a] via-transparent to-transparent opacity-40"></div> </div> <!-- Slider Content & Controls --> <div class="z-10 max-w-xl space-y-6"> <!-- Counter & Navigation Arrows --> <div class="flex items-center gap-5"> <span id="slider-counter" class="text-xs font-mono tracking-widest text-slate-300">01 / 05</span> <div class="flex items-center gap-1.5"> <button onclick="prevSlide()" class="w-7 h-7 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition text-xs text-slate-300">←</button> <button onclick="nextSlide()" class="w-7 h-7 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition text-xs text-slate-300">→</button> </div> <span class="text-[11px] uppercase tracking-[0.2em] text-[#c5a880] cursor-pointer hover:underline ml-3 font-medium">view work</span> </div> <!-- Main Typography Title & Description --> <div class="space-y-4"> <h1 id="slider-title" class="text-5xl md:text-7xl font-light tracking-tight text-white leading-none fade-slide"> Travis<br/><strong class="font-normal">Garlem</strong> </h1> <p id="slider-desc" class="text-xs md:text-sm text-slate-400 max-w-sm leading-relaxed fade-slide font-light"> Perceived end knowledge certainly day sweetness why cordially. Ask quick six seven offer see among. Handsome met debating sir dwelling age material. </p> </div> </div> </div> <!-- ================= BOTTOM BLOG CARDS SECTION ================= --> <footer class="w-full px-8 md:px-20 py-6 border-t border-white/5 grid grid-cols-1 md:grid-cols-12 gap-6 items-center z-20 bg-[#0d1316]"> <!-- Left Blogs Container (2 Cards) --> <div class="md:col-span-10 grid grid-cols-1 md:grid-cols-2 gap-10"> <!-- Blog Item 1 --> <div class="space-y-1.5"> <div class="flex items-center justify-between text-[10px] text-slate-500 uppercase tracking-[0.2em]"> <span class="text-slate-400 font-medium">blog</span> <span>@QueAgency • 10 min</span> </div> <p class="text-xs text-slate-300 leading-relaxed font-light"> Yesterday you brought up the heat with over a thousand mentions of <span class="text-[#c5a880]">#FontSunday</span> dedicated to fire typography... </p> </div> <!-- Blog Item 2 --> <div class="space-y-1.5"> <div class="flex items-center justify-between text-[10px] text-slate-500 uppercase tracking-[0.2em]"> <span class="text-slate-400 font-medium">blog</span> <span>@QueAgency • 3 hours</span> </div> <p class="text-xs text-slate-300 leading-relaxed font-light"> Thank you to all those who took part in today's fiery <span class="text-[#c5a880]">#FontSunday</span>. Here's a final favourite from the Design... </p> </div> </div> <!-- Right View Blog Link --> <div class="md:col-span-2 flex justify-end"> <span class="text-[10px] uppercase tracking-[0.3em] text-slate-500 hover:text-white cursor-pointer transition font-medium">view blog</span> </div> </footer> </main> </div> <!-- ================= JAVASCRIPT LOGIC FOR SMOOTH SLIDER ================= --> <script> const slides = [ { counter: "01 / 05", titleHtml: "Travis<br/><strong class="font-normal">Garlem</strong>", desc: "Perceived end knowledge certainly day sweetness why cordially. Ask quick six seven offer see among. Handsome met debating sir dwelling age material.", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=1000&q=80" }, { counter: "02 / 05", titleHtml: "Elena<br/><strong class="font-normal">Vance</strong>", desc: "Immersive digital architecture built with meticulous precision. Crafting high-end user experiences for modern global brands and visionary startups.", image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=1000&q=80" }, { counter: "03 / 05", titleHtml: "Marcus<br/><strong class="font-normal">Sterling</strong>", desc: "Exploring the boundaries of minimalist visual design and responsive web systems. Delivering robust code structures matched with sleek interfaces.", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=1000&q=80" }, { counter: "04 / 05", titleHtml: "Sophia<br/><strong class="font-normal">Kovalev</strong>", desc: "Innovative typography arrangements combined with fluid motion design. Transforming ordinary corporate narratives into memorable digital landmarks.", image: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=1000&q=80" }, { counter: "05 / 05", titleHtml: "Julian<br/><strong class="font-normal">Rhodes</strong>", desc: "Pushing creative limits through interactive storytelling, immersive layouts, and seamless performance optimization across multi-platform screens.", image: "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=1000&q=80" } ]; let currentIndex = 0; function updateSlide(index) { const titleEl = document.getElementById('slider-title'); const descEl = document.getElementById('slider-desc'); const counterEl = document.getElementById('slider-counter'); const imageEl = document.getElementById('slider-image'); // Efek Animasi Keluar (Smooth Fade-out & Sedikit Geser) titleEl.style.opacity = 0; titleEl.style.transform = "translateY(12px)"; descEl.style.opacity = 0; imageEl.style.opacity = 0; setTimeout(() => { // Perbarui Konten Data counterEl.innerText = slides[index].counter; titleEl.innerHTML = slides[index].titleHtml; descEl.innerText = slides[index].desc; imageEl.src = slides[index].image; // Efek Animasi Masuk (Smooth Fade-in & Posisi Normal) titleEl.style.opacity = 1; titleEl.style.transform = "translateY(0px)"; descEl.style.opacity = 1; imageEl.style.opacity = 1; }, 300); } function nextSlide() { currentIndex = (currentIndex + 1) % slides.length; updateSlide(currentIndex); } function prevSlide() { currentIndex = (currentIndex - 1 + slides.length) % slides.length; updateSlide(currentIndex); } </script> </body> </html>
🖥️ Live Responsive Preview
Desktop
Tablet
Mobile
URL Publik:
https://remark.co.id/micro/ver2/
Simpan Microsite