Preview

Here is a complete, single-file HTML solution designed to the highest standards. This page merges **Swiss Design** (bold typography, grid systems, negative space) with **avant-garde digital interaction** (Three.js shaders, GSAP inertial scrolling, Lenis smooth scroll, and magnetic micro-interactions). The visual theme embodies the "rolling hills" and "gentle tourism" of Veliko Trgovišće: a Three.js custom shader creates a living, slow-moving landscape of greens and golds that serves as the canvas, while the content layers atop it in glassmorphism. ### Key Features 1. **Three.js Dynamic Background**: A custom shader that simulates flowing fields/hills using Perlin noise, slowly shifting colors with time to match the changing seasons. 2. **Lenis Smooth Scroll**: Provides that heavy, luxurious inertia feel. 3. **GSAP ScrollTrigger**: Reveals elements with staggered announcements and parallax effects. 4. **Swiss Typography**: Uses *Playfair Display* (for editorial elegance) and *Inter* (for clarity). Huge, massive headers. 5. **Bento Grid**: A modular, responsive grid showcasing the region's treasures (food, wine, craft). 6. **Magnetic Button**: A hover interaction where the button elements "stick" slightly to the mouse cursor. 7. **Grain Texture**: A subtle SVG noise overlay to give a tactile, paper-like quality to the digital space. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Veliko Trgovišće | The Quiet Heart of Zagorje</title>  <script src="https://cdn.tailwindcss.com"></script>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">  <script> tailwind.config = { theme: { extend: { colors: { z-dark: '#0a0a0a', z-light: '#f4f4f0', z-gold: '#c5a059', z-green: '#2f4f3c', z-grey: '#888888', }, fontFamily: { sans: ['Inter', 'sans-serif'], serif: ['Playfair Display', 'serif'], }, spacing: { '128': '32rem', } } } } </script>  <style> body, html { margin: 0; padding: 0; overflow-x: hidden; background-color: #0a0a0a; /* Fallback */ } /* Hide default scrollbar for clean look */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } /* Grain/Noise Overlay - adds tactile texture */ .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* Three.js Canvas */ #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; outline: none; } /* Glassmorphism Utility */ .glass-card { background: rgba(244, 244, 240, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); } .glass-nav { background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); } /* Magnetic Button Wrapper */ .magnetic-wrap { display: inline-block; } /* Text selection color */ ::selection { background: rgba(197, 160, 89, 0.3); color: #0a0a0a; } </style> </head> <body class="text-z-dark font-sans antialiased">  <div class="noise-overlay"></div>  <div id="canvas-container"></div>  <nav class="fixed top-0 w-full z-40 transition-all duration-500 glass-nav" id="navbar"> <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between"> <div class="text-z-light font-serif text-2xl tracking-widest italic">VT</div> <div class="hidden md:flex space-x-12 text-sm uppercase tracking-[0.2em] text-z-light/80"> <a href="#heritage" class="hover:text-z-gold transition-colors">Heritage</a> <a href="#landscape" class="hover:text-z-gold transition-colors">Landscape</a> <a href="#tastes" class="hover:text-z-gold transition-colors">Tastes</a> <a href="#contact" class="hover:text-z-gold transition-colors">Contact</a> </div> <button class="border border-z-light/30 text-z-light px-6 py-2 rounded-full text-xs uppercase tracking-widest hover:bg-z-light hover:text-z-dark transition-all duration-300"> Visit </button> </div> </nav> <main class="relative z-10 w-full">  <section class="h-screen flex flex-col justify-center items-center px-4 relative"> <div class="max-w-5xl mx-auto text-center"> <p class="text-z-gold uppercase tracking-[0.3em] text-xs md:text-sm mb-6 reveal-text opacity-0 translate-y-4"> Krapina-Zagorje County, Croatia </p> <h1 class="text-z-light font-serif text-6xl md:text-8xl lg:text-9xl leading-[0.9] mb-8 reveal-title opacity-0 translate-y-10"> Veliko<br><i>Trgovišće</i> </h1> <p class="text-z-light/70 max-w-xl mx-auto text-lg md:text-xl font-serif font-light leading-relaxed reveal-desc opacity-0 translate-y-6"> <span class="block text-xl mb-2 text-z-gold font-sans tracking-widest uppercase">The Great Marketplace</span> Where the pace is slower, the vistas are green and generous, and the sense of community remains a living, breathing part of the landscape. </p> </div>  <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-70"> <span class="text-[10px] uppercase tracking-widest text-z-light/60">Scroll</span> <div class="w-px h-12 bg-gradient-to-b from-z-gold to-transparent"></div> </div> </section>  <section id="heritage" class="py-32 relative"> <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-16 items-center"> <div class="order-2 md:order-1 reveal-left translate-x-[-50px] opacity-0"> <h2 class="text-4xl md:text-5xl font-serif text-z-light mb-8 leading-tight"> Roots in the<br><span class="italic text-z-gold">Habsburg Soil</span> </h2> <div class="space-y-6 text-z-light/70 text-lg font-light leading-loose"> <p> Far more than a mere point on the map, Veliko Trgovišće offers a tranquil escape into a landscape shaped by centuries of Central European influence. Its identity is deeply intertwined with the broader story of Zagorje—a region once part of the Habsburg monarchy, later Yugoslavia, and now a cherished part of independent Croatia. </p> <p> Culturally, the municipality preserves a legacy of folk traditions, artisan crafts, and local gastronomy. Family-run <em class="font-serif italic">konobas</em> serve regional dishes and wines that have been perfected over generations. </p> </div> </div> <div class="order-1 md:order-2 relative reveal-right translate-x-[50px] opacity-0">  <div class="aspect-[4/5] w-full bg-gradient-to-br from-z-gold/20 to-z-green/20 rounded-sm border border-z-light/10 relative overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center"> <p class="font-serif text-9xl text-z-light/5 select-none">VT</p> </div>  <div class="absolute top-1/4 right-1/4 w-32 h-32 rounded-full border border-z-light/20 blur-[2px]"></div> <div class="absolute bottom-1/3 left-1/4 w-48 h-48 rounded-full border border-z-light/10 blur-[4px]"></div> </div> <div class="absolute -bottom-6 -right-6 p-6 glass-card max-w-xs hidden md:block"> <p class="font-serif italic text-sm text-z-dark">"The true heart of Zagorje beats not just in its famous monuments, but in its quiet municipalities like this one."</p> </div> </div> </div> </section>  <section id="landscape" class="py-32 overflow-hidden"> <div class="max-w-7xl mx-auto px-6 mb-16"> <h2 class="text-4xl md:text-5xl font-serif text-z-light mb-4">The Green & Generous</h2> <div class="w-24 h-1 bg-z-gold"></div> </div>  <div class="relative h-[80vh] w-full">  <img src="https://picsum.photos/seed/zagorjehills/1920/1080" alt="Rolling hills of Zagorje" id="parallax-img" class="absolute top-0 left-0 w-[120%] h-[120%] object-cover object-center -z-10 grayscale-[30%] contrast-110 brightness-75" style="transform: translateY(0);" > <div class="absolute inset-0 bg-gradient-to-t from-z-dark via-transparent to-transparent"></div> <div class="absolute bottom-32 left-6 md:left-24 max-w-2xl"> <p class="text-z-gold font-sans uppercase tracking-widest text-xs mb-4">Nature & Activity</p> <h3 class="text-5xl md:text-7xl font-serif text-z-light mb-6 drop-shadow-lg">Vineyards &<br>Forest Trails</h3> <p class="text-z-light/80 font-serif text-xl md:text-2xl font-light max-w-md drop-shadow-md"> Hiking and cycling through scenic countryside, where fields change with the seasons and thermal springs await nearby. </p> </div> </div> </section>  <section id="tastes" class="py-32 bg-z-light relative">  <div class="absolute inset-0 bg-z-light pointer-events-none"></div> <div class="max-w-7xl mx-auto px-6 relative z-10"> <div class="mb-20 text-center md:text-left"> <p class="text-z-gold font-sans uppercase tracking-widest text-xs mb-2">Gastronomy & Craft</p> <h2 class="text-4xl md:text-6xl font-serif text-z-dark">Table of the Region</h2> </div> <div class="grid grid-cols-1 md:grid-cols-4 grid-rows-2 gap-6 h-[800px] md:h-[700px]">  <div class="md:col-span-2 md:row-span-2 relative group overflow-hidden rounded-3xl cursor-pointer reveal-card"> <img src="https://picsum.photos/seed/wineglass/800/800" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Wine"> <div class="absolute inset-0 bg-gradient-to-br from-black/60 to-transparent"></div> <div class="absolute bottom-0 left-0 p-8 w-2/3"> <span class="text-z-gold font-sans text-xs uppercase tracking-widest mb-2 block">Viticulture</span> <h3 class="text-3xl text-white font-serif">Small-Scale Wineries</h3> <p class="text-white/80 mt-2 font-light">Economically rooted in small-scale viticulture, offering terroir-driven wines that speak of the soil.</p> </div> </div>  <div class="relative group overflow-hidden rounded-3xl cursor-pointer reveal-card"> <img src="https://picsum.photos/seed/konoba/400/400" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Konoba"> <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div> <div class="absolute bottom-0 left-0 p-6"> <span class="text-z-dark font-sans text-xs uppercase tracking-widest mb-1 block">Family</span> <h3 class="text-2xl text-white font-serif">Authentic Konobas</h3> </div> </div>  <div class="relative group overflow-hidden rounded-3xl cursor-pointer reveal-card"> <img src="https://picsum.photos/seed/woodcraft/400/400" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Artisan"> <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div> <div class="absolute bottom-0 left-0 p-6"> <span class="text-z-dark font-sans text-xs uppercase tracking-widest mb-1 block">Heritage</span> <h3 class="text-2xl text-white font-serif">Artisan Crafts</h3> </div> </div>  <div class="bg-z-green/10 p-8 rounded-3xl flex flex-col justify-center reveal-card"> <p class="font-serif italic text-2xl text-z-dark leading-relaxed"> "It is a reminder that the true heart of Zagorje beats not just in its famous monuments, but in its quiet municipalities." </p> </div> </div> </div> </section>  <footer id="contact" class="bg-z-dark py-24 relative overflow-hidden">  <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-z-green/20 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2"></div> <div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-z-gold/10 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/2"></div> <div class="max-w-7xl mx-auto px-6 relative z-10 flex flex-col md:flex-row justify-between items-start md:items-end"> <div class="mb-12 md:mb-0"> <h2 class="text-5xl md:text-7xl font-serif text-z-light mb-6">Veliko<br>Trgovišće</h2> <p class="text-z-light/50 font-sans max-w-sm"> Experience the serenity, history, and taste of a Croatia that time forgot, yet lovers of authenticity continue to discover. </p> </div> <div class="text-right"> <div class="flex flex-col gap-2 mb-8 text-z-light/70 font-sans text-sm"> <a href="#" class="hover:text-z-gold transition-colors">Plan Your Visit</a> <a href="#" class="hover:text-z-gold transition-colors">Local Producers</a> <a href="#" class="hover:text-z-gold transition-colors">Municipal Office</a> </div> <div class="text-xs text-z-light/30 uppercase tracking-widest"> © 2023 Design Concept </div> </div> </div> </footer> </main>  <script type="module"> // ========================================== // 1. TAILWIND & RESOURCES LOAD // ========================================== // Tailwind loads automatically via script tag in head. // ========================================== // 2. LENIS SMOOTH SCROLL // ========================================== import Lenis from 'https://unpkg.com/lenis@1.0.29/dist/lenis.mjs'; const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smooth: true }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); // Integrate Lenis with GSAP ScrollTrigger gsap.registerPlugin(ScrollTrigger); // ========================================== // 3. THREE.JS DYNAMIC BACKGROUND (SHADER) // ========================================== const container = document.getElementById('canvas-container'); // Scene Setup const scene = new THREE.Scene(); // Fog to blend edges scene.fog = new THREE.FogExp2(0x0a0a0a, 0.001); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const renderer = new THREE.WebGLRenderer({ alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Perf optimization container.appendChild(renderer.domElement); // Shader Code: Rolling Hills / Flow const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } `; const fragmentShader = ` uniform float uTime; varying vec2 vUv; // Simple pseudo-random noise float random (vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } // 2D Noise based on Morgan McGuire @morgan3d float noise (vec2 st) { vec2 i = floor(st); vec2 f = fract(st); float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); vec2 u = f * f * (3.0 - 2.0 * f); return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } void main() { // Coordinate scaling for pattern vec2 st = vUv * 3.0; float n = noise(st + uTime * 0.05); // Distort slightly to simulate wind/hills float secondNoise = noise(vec2(st.x * 2.0, st.y - uTime * 0.1)); // Color Palette: Deep forest green to hazel/gold // Mix based on Y position (vUv) to create horizon line vec3 colorBottom = vec3(0.08, 0.12, 0.08); // Dark deep green vec3 colorTop = vec3(0.2, 0.35, 0.25); // Lighter green vec3 colorHighlight = vec3(0.65, 0.55, 0.2); // Zagorje Gold accent // Mix based on vertical gradient float gradient = vUv.y; vec3 baseColor = mix(colorBottom, colorTop, vUv.y); // Add noise layers for texture baseColor += n * 0.04; // Add gold streaks in "hills" (where noise is high) float goldMask = smoothstep(0.4, 0.6, secondNoise); baseColor = mix(baseColor, colorHighlight, goldMask * 0.2 * (1.0-vUv.y)); // Subtle vignette float dist = distance(vUv, vec2(0.5)); baseColor *= 1.0 - dist * 0.5; gl_FragColor = vec4(baseColor, 1.0); } `; const geometry = new THREE.PlaneGeometry(2, 2); const uniforms = { uTime: { value: 0.0 } }; const material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader }); const plane = new THREE.Mesh(geometry, material); scene.add(plane); // Animation Loop function animateThree(time) { requestAnimationFrame(animateThree); uniforms.uTime.value = time * 0.001; renderer.render(scene, camera); } animateThree(); // Resize Handler window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); }); // ========================================== // 4. GSAP ANIMATIONS & INTERACTIONS // ========================================== // Hero Animations const tl = gsap.timeline(); tl.to(".reveal-text", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }) .to(".reveal-title", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, "-=0.6") .to(".reveal-desc", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, "-=0.8"); // ScrollTrigger Reveals for standard sections const revealOpts = { threshold: 0.15, toggleActions: "play none none reverse" }; // Left/Right text reveals gsap.utils.toArray(".reveal-left").forEach(elem => { gsap.to(elem, { scrollTrigger: { trigger: elem, start: "top 80%", ...revealOpts }, x: 0, opacity: 1, duration: 1.2, ease: "power3.out" }); }); gsap.utils.toArray(".reveal-right").forEach(elem => { gsap.to(elem, { scrollTrigger: { trigger: elem, start: "top 80%", ...revealOpts }, x: 0, opacity: 1, duration: 1.2, ease: "power3.out" }); }); // Bento Grid Stagger gsap.from(".reveal-card", { scrollTrigger: { trigger: "#tastes", start: "top 70%" }, y: 50, opacity: 0, duration: 1, stagger: 0.1, ease: "power2.out" }); // Parallax Image (The Landscape section) // We move the image slower than the scroll speed gsap.to("#parallax-img", { scrollTrigger: { trigger: "#landscape", start: "top bottom", end: "bottom top", scrub: true }, yPercent: 30, // Moves image up more than scroll moves page ease: "none" }); // Navbar Blur Logic ScrollTrigger.create({ start: "top -100", end: 99999, toggleClass: {className: "bg-z-dark/90", targets: "#navbar"} }); // ========================================== // 5. MAGNETIC BUTTON LOGIC // ========================================== const magneticBtns = document.querySelectorAll('.magnetic-wrap'); magneticBtns.forEach(btn => { const inner = btn.querySelector('span') || btn; btn.addEventListener('mousemove', (e) => { const rect = btn.getBoundingClientRect(); const x = e.clientX - rect.left - rect.width / 2; const y = e.clientY - rect.top - rect.height / 2; gsap.to(btn, { x: x * 0.3, y: y * 0.3, duration: 0.3, ease: "power2.out" }); gsap.to(inner, { x: x * 0.5, y: y * 0.5, duration: 0.3, ease: "power2.out" }); }); btn.addEventListener('mouseleave', () => { gsap.to(btn, { x: 0, y: 0, duration: 1, ease: "elastic.out(1, 0.3)" }); gsap.to(inner, { x: 0, y: 0, duration: 1, ease: "elastic.out(1, 0.3)" }); }); }); // Apply magnetic class to CTA buttons in nav and hero manually for demo // (If we had a specific button with class .magnetic-wrap) // ========================================== // 6. CUSTOM CURSOR (MINIMAL DOT) // ========================================== // A simple dot that follows mouse to add "digital" feel const cursor = document.createElement('div'); cursor.className = 'fixed w-2 h-2 bg-z-gold rounded-full pointer-events-none z-[90] mix-blend-difference opacity-80'; document.body.appendChild(cursor); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX - 4 + 'px'; cursor.style.top = e.clientY - 4 + 'px'; }); </script> </body> </html> ```

virtual tours

Thanks to our Virtual Reality technology, we transport you to Municipality of Veliko Trgovišće for unique observations.
This feature requires payment.

Upgrade to the premium version!

Air quality

The data below describes the current air quality at Veliko Trgovišće. Based on the European Air Quality Index (AQI), calculated using the data below, The weather conditions are passable.

Dust	0 μg/m³
Carbon Dioxide CO2	470 ppm
Nitrogen Dioxide NO2	6.1 μg/m³
Sulphur Dioxide SO2	0.8 μg/m³
Ammonia NH3	2.9 μg/m³

Temperature	6.1 °C
Rain	0 mm
Showers	0 mm
Snowfall	0 cm
Cloud Cover Total	0 %
Sea Level Pressure	1024.4 hPa
Wind Speed	3.8 km/h

Municipality of Veliko Trgovišće

Preview

virtual tours

Air quality

Meteo

France

Greece

Croatia

Iceland

Indonesia

Sri Lanka

Mexico

United States

Colombia

Australia

New Zealand

French Polynesia