hacklab/ARTIVISMO
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

segundo commit

Browse source
This commit is contained in:
root 2025-11-06 19:19:45 +00:00
parent 6b8b75863a
commit d2e79d63a5
13601 changed files with 1117197 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

135
index.html.tmp Normal file
View file

@ -0,0 +1,135 @@
<!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>