135 lines
No EOL
6.3 KiB
Text
135 lines
No EOL
6.3 KiB
Text
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>artivismo</title> <!-- Tipos “graffiti/artist” -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Rock+Salt&family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<meta name="color-scheme" content="light">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="brand">
|
|
<h1 class="logo" aria-label="ARTIVISMO">artivismo</h1>
|
|
</div>
|
|
<nav class="nav">
|
|
<a href="#galeria" class="nav-link">Galería</a>
|
|
<a href="#sobre" class="nav-link">Sobre</a>
|
|
<a href="#contacto" class="nav-link">Contacto</a>
|
|
</nav>
|
|
</header> <main>
|
|
<!-- Controles de categorías (CSS-only) -->
|
|
<section id="filtros" class="filtros" aria-label="Filtrar por categoría">
|
|
<!-- Radios ocultos -->
|
|
<input type="radio" name="cat" id="cat-todo" checked>
|
|
<input type="radio" name="cat" id="cat-mural" checked>
|
|
<input type="radio" name="cat" id="cat-protesta" checked>
|
|
<input type="radio" name="cat" id="cat-collage" checked>
|
|
<input type="radio" name="cat" id="cat-stencil" checked>
|
|
<input type="radio" name="cat" id="cat-performance" checked> <!-- Etiquetas visibles -->
|
|
<div class="tabs">
|
|
<label class="tab" for="cat-todo">Todo</label>
|
|
<label class="tab" for="cat-mural">Murales</label>
|
|
<label class="tab" for="cat-protesta">Protesta</label>
|
|
<label class="tab" for="cat-collage">Collage</label>
|
|
<label class="tab" for="cat-stencil">Stencil</label>
|
|
<label class="tab" for="cat-performance">Performance</label>
|
|
</div>
|
|
</section> <!-- Galería -->
|
|
<section id="galeria" class="galeria" aria-label="Galería de imágenes">
|
|
<!-- ITEM -->
|
|
<figure class="item mural">
|
|
<img src="assets/mural_01.jpg" alt="Mural urbano con colores vivos" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">Mural</span>
|
|
<h3 class="title">“Muros que hablan”</h3>
|
|
<p class="meta">Madrid · 2023</p>
|
|
</figcaption>
|
|
</figure> <figure class="item protesta">
|
|
<img src="assets/protesta_01.jpg" alt="Carteles de protesta tipografía handmade" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-protesta">Protesta</span>
|
|
<h3 class="title">“Voces en la calle”</h3>
|
|
<p class="meta">Buenos Aires · 2022</p>
|
|
</figcaption>
|
|
</figure> <figure class="item collage">
|
|
<img src="assets/collage_01.jpg" alt="Collage político en papel y tinta" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-collage">Collage</span>
|
|
<h3 class="title">“Recortes del presente”</h3>
|
|
<p class="meta">Barcelona · 2024</p>
|
|
</figcaption>
|
|
</figure> <figure class="item stencil">
|
|
<img src="assets/stencil_01.jpg" alt="Stencil de rostro icónico en pared blanca" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-stencil">Stencil</span>
|
|
<h3 class="title">“Sombras y bordes”</h3>
|
|
<p class="meta">Valparaíso · 2021</p>
|
|
</figcaption>
|
|
</figure> <figure class="item performance">
|
|
<img src="assets/performance_01.jpg" alt="Performance callejera con pancartas fluorescentes" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-performance">Performance</span>
|
|
<h3 class="title">“Cuerpo como manifiesto”</h3>
|
|
<p class="meta">CDMX · 2020</p>
|
|
</figcaption>
|
|
</figure> <!-- 5 más de ejemplo -->
|
|
<figure class="item mural">
|
|
<img src="assets/mural_02.jpg" alt="Mural tipográfico estilo graffiti" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">Mural</span>
|
|
<h3 class="title">“Tipografreak”</h3>
|
|
<p class="meta">Sevilla · 2024</p>
|
|
</figcaption>
|
|
</figure> <figure class="item protesta">
|
|
<img src="assets/protesta_02.jpg" alt="Manos sosteniendo pancarta verde neón" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-protesta">Protesta</span>
|
|
<h3 class="title">“Manifiesto vivo”</h3>
|
|
<p class="meta">Lima · 2023</p>
|
|
</figcaption>
|
|
</figure> <figure class="item collage">
|
|
<img src="assets/collage_02.jpg" alt="Collage con revistas y pintura fucsia" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-collage">Collage</span>
|
|
<h3 class="title">“Capa sobre capa”</h3>
|
|
<p class="meta">Lisboa · 2022</p>
|
|
</figcaption>
|
|
</figure> <figure class="item stencil">
|
|
<img src="assets/stencil_02.jpg" alt="Stencil de megáfono sobre ladrillo" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-stencil">Stencil</span>
|
|
<h3 class="title">“Hazte oír”</h3>
|
|
<p class="meta">Bilbao · 2025</p>
|
|
</figcaption>
|
|
</figure> <figure class="item performance">
|
|
<img src="assets/performance_02.jpg" alt="Acción callejera con pintura neón" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-performance">Performance</span>
|
|
<h3 class="title">“Ritual urbano”</h3>
|
|
<p class="meta">Bogotá · 2021</p>
|
|
</figcaption>
|
|
</figure>
|
|
</section> <!-- Sobre -->
|
|
<section id="sobre" class="sobre">
|
|
<h2>Sobre ARTIVISMO</h2>
|
|
<p>
|
|
ARTIVISMO es un espacio para archivar y celebrar imágenes con intención:
|
|
murales, protestas visuales, collages, stencils y performances. Curamos
|
|
piezas que interpelan, conmueven y activan.
|
|
</p>
|
|
</section> <!-- Contacto -->
|
|
<section id="contacto" class="contacto">
|
|
<h2>Contacto</h2>
|
|
<p>¿Quieres sugerir una obra o colaborar?</p>
|
|
<a class="cta" href="mailto:hola@artivismo.example">hola@artivismo.example</a>
|
|
</section>
|
|
</main> <footer class="site-footer">
|
|
<p>© <span id="year"></span> ARTIVISMO — hecho con amor, fucsia y neón.</p>
|
|
</footer> <!-- Año (opcional: si no quieres JS, cambia a texto plano y borra este bloque) -->
|
|
<script>
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
</script>
|
|
</body>
|
|
</html> |