Preview

Here is a webpage designed in the Neo-Brutalism/Y2K aesthetic, showcasing the municipality of Algarrobo as described. The design features raw typography, hard borders, clashing colors, glitch effects, marquee text, retro UI components, overlapping elements, and dynamic pixel art via Canvas. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Algarrobo, Magdalena</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <style> body { font-family: 'Courier New', Courier, monospace; overflow-x: hidden; } .title-huge { font-size: 15rem; line-height: 0.85; font-family: Impact, 'Arial Black', sans-serif; text-transform: uppercase; } @media (max-width: 768px) { .title-huge { font-size: 8rem; } } @media (max-width: 480px) { .title-huge { font-size: 4rem; } } .glitch { position: relative; color: black; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch::before { left: 2px; text-shadow: -2px 0 #ff00ff; animation: glitch-anim 3s infinite linear alternate-reverse; } .glitch::after { left: -2px; text-shadow: -2px 0 #00ffff; animation: glitch-anim2 3s infinite linear alternate-reverse; } @keyframes glitch-anim { 0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 2px); } 20% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); } 40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); } 60% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); } 80% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 2px); } 100% { clip-path: inset(0 0 0 0); transform: translate(0,0); } } @keyframes glitch-anim2 { 0% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -2px); } 20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); } 40% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); } 60% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 2px); } 80% { clip-path: inset(0 0 0 0); transform: translate(0,0); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(2px, -2px); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-content { display: inline-block; white-space: nowrap; animation: marquee 20s linear infinite; font-family: Impact, 'Arial Black', sans-serif; font-size: 1.5rem; } .retro-window { background: #c0c0c0; border: 2px solid black; box-shadow: 8px 8px 0 rgba(0,0,0,1); font-family: 'Arial', sans-serif; } .retro-title-bar { background: #000080; color: white; padding: 2px 4px; font-weight: bold; font-size: 14px; display: flex; justify-content: space-between; align-items: center; } .retro-close { width: 16px; height: 14px; background: #c0c0c0; border: 1px solid black; font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .retro-button { background: #c0c0c0; border: 2px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #808080; border-bottom-color: #808080; padding: 4px 12px; font-family: 'Arial', sans-serif; font-size: 12px; cursor: pointer; } .retro-button:active { border-top-color: #808080; border-left-color: #808080; border-right-color: #ffffff; border-bottom-color: #ffffff; } .acid-overlap { background-color: #ccff00; border: 4px solid black; mix-blend-mode: difference; opacity: 0.8; pointer-events: none; } </style> </head> <body class="bg-white text-black">  <div class="fixed top-0 left-0 w-full h-10 flex items-center bg-black text-white z-40"> <div class="marquee-content"> ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • ALGARROBO • MUNICIPIO DE COLOMBIA • </div> </div>  <header class="pt-12 pb-8 px-4 relative z-50"> <h1 class="hero-title title-huge glitch text-black leading-none mb-2" data-text="ALGARROBO"> ALGARROBO </h1> <p class="subtitle text-2xl font-serif italic mt-2">Magdalena Department, Colombia</p> </header>  <main class="relative max-w-5xl mx-auto px-8 py-12">  <div class="info-box border-4 border-black bg-white p-8 mb-16 relative z-10"> <p class="mb-4 text-lg leading-relaxed"> Nestled within the Magdalena Department of northern Colombia, Algarrobo is a municipality that embodies the tranquil, rural charm of the Caribbean interior. As a second-level administrative division, it sits amidst a landscape defined by the foothills of the Sierra Nevada de Santa Marta and the vast plains of the Magdalena River basin. This geography shapes a life centered on agriculture and livestock, with sprawling haciendas and coffee plantations dotting the territory. The municipal capital, also named Algarrobo, serves as the civic and cultural heart, featuring traditional colonial architecture and a pace of life dictated by the rhythms of the land. </p> <p class="text-lg leading-relaxed"> The local economy is deeply rooted in the primary sector, with cattle ranching and the cultivation of crops like coffee, yuca, and maize forming its backbone. This connection to the earth is mirrored in community traditions and festivals that celebrate regional identity. While preserving its pastoral essence, Algarrobo strategically benefits from its location within Magdalena, maintaining connectivity to larger departmental centers while offering a serene escape from urban intensity. It represents a quintessential piece of Colombia’s diverse tapestry—a place where history, agriculture, and the gentle Colombian countryside converge in a setting of understated beauty and steadfast community spirit. </p> </div>  <div class="acid-overlap absolute top-[-2rem] right-[-2rem] w-64 h-64 rotate-12 -z-10 sm:top-10 sm:right-10"></div>  <div id="retro-window" class="retro-window hidden fixed bottom-10 right-10 w-64 z-50"> <div class="retro-title-bar"> <span>About Algarrobo</span> <button class="retro-close">X</button> </div> <div class="p-3 text-sm"> <p class="mb-2">Algarrobo is a peaceful municipality in the Magdalena department, known for its coffee and cattle.</p> <button class="retro-button w-full mt-2">OK</button> </div> </div> </main>  <div class="flex flex-wrap justify-center gap-8 mb-12 relative z-10"> <button id="show-retro" class="retro-button bg-[#ccff00] border-4 border-black px-8 py-4 text-2xl font-bold uppercase hover:bg-black hover:text-white transition-colors duration-200"> More Info </button> <button class="retro-button bg-[#ff00ff] border-4 border-black px-8 py-4 text-2xl font-bold uppercase hover:bg-black hover:text-white transition-colors duration-200"> Contact </button> </div>  <div class="fixed bottom-0 right-0 w-32 h-32 pointer-events-none z-0 opacity-50"> <canvas id="pixelCanvas" width="128" height="128"></canvas> </div> <script> // GSAP Animations document.addEventListener("DOMContentLoaded", function() { gsap.from(".hero-title", { duration: 1.2, y: -300, opacity: 0, ease: "steps(8)" }); gsap.from(".info-box", { duration: 1, x: -100, opacity: 0, ease: "power3.out", delay: 0.5 }); gsap.from(".retro-button", { duration: 0.8, scale: 0, opacity: 0, stagger: 0.2, ease: "back.out(1.7)" }); // Retro window interactions const retroWindow = document.getElementById("retro-window"); const showBtn = document.getElementById("show-retro"); showBtn.addEventListener("click", function() { retroWindow.classList.remove("hidden"); gsap.fromTo(retroWindow, { x: 100, y: 100, opacity: 0 }, { x: 0, y: 0, opacity: 1, duration: 0.5, ease: "back.out(1.7)" } ); }); const closeBtn = retroWindow.querySelector(".retro-close"); const okBtn = retroWindow.querySelector(".retro-button"); function closeWindow() { gsap.to(retroWindow, { opacity: 0, scale: 0.5, duration: 0.3, onComplete: () => retroWindow.classList.add("hidden") }); } closeBtn.addEventListener("click", closeWindow); okBtn.addEventListener("click", closeWindow); }); // Pixel rain canvas const canvas = document.getElementById('pixelCanvas'); const ctx = canvas.getContext('2d'); const pixels = []; class Pixel { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 4 + 2; this.speed = Math.random() * 2 + 1; this.color = `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`; } draw() { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.size, this.size); } update() { this.y += this.speed; if (this.y > canvas.height) this.y = 0; this.x -= this.speed * 0.5; if (this.x < 0) this.x = canvas.width; } } for (let i = 0; i < 50; i++) { pixels.push(new Pixel()); } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); pixels.forEach(p => { p.update(); p.draw(); }); requestAnimationFrame(animate); } animate(); </script> </body> </html> ```

virtual tours

Thanks to our Virtual Reality technology, we transport you to Algarrobo for unique observations.
This feature requires payment.

Upgrade to the premium version!

Air quality

The data below describes the current air quality at Algarrobo. 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

Algarrobo

Preview

virtual tours

Air quality

Meteo

France

Greece

Croatia

Iceland

Indonesia

Sri Lanka

Mexico

United States

Colombia

Australia

New Zealand

French Polynesia