265 lines
8.8 KiB
HTML
265 lines
8.8 KiB
HTML
<!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">Galery</a>
|
|
<a href="#sobre" class="nav-link">About</a>
|
|
<a href="#contacto" class="nav-link">Contact</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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Galería -->
|
|
<section id="galeria" class="galeria" aria-label="Galería de imágenes">
|
|
<!-- Todos los ítems usan la clase existente "item mural" para no romper el CSS/filters -->
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/1984.jpg" alt="1984" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">sten</span>
|
|
<h3 class="title">1984</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/agua.jpg" alt="Agua" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Water</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/armas_banksy.jpg" alt="Dick Launch" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">sten</span>
|
|
<h3 class="title">Dick launch</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/cambiar_las_cosas.jpg" alt="Cambiar las cosas" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Change Things</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/chess_kings.jpg" alt="Chess Kings" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Chess Kings</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/crean_desiertos.jpg" alt="Crean desiertos" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">OASIFICAR</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/cyberpunk.jpg" alt="Cyberpunk" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">flyer</span>
|
|
<h3 class="title">Cyberpunk</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/declarar_desolacion.jpg" alt="Declarar desolación" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Declarar</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/desgazado.jpeg" alt="Desgazado" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">flyer</span>
|
|
<h3 class="title">Desgazado</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/el_pez.jpg" alt="El pez" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">El pez</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/empresnder.jpg" alt="Empresnder" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Entrepeneurship</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/empujar_locomotora.jpg" alt="Empujar locomotora" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Train push</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/gato.jpg" alt="Gato" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">graffiti</span>
|
|
<h3 class="title">CAT</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/gentrificado.jpg" alt="Gentrificado" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">flyer</span>
|
|
<h3 class="title">Gentrificado</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/leopardo.jpg" alt="Leopardo" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Leopard</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/musk.jpg" alt="Musk" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">flyer</span>
|
|
<h3 class="title">Musk</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/musk_1939.jpg" alt="Musk 1939" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">flyer</span>
|
|
<h3 class="title">Musk 1939</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/nueva_brida.jpg" alt="Nueva brida" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">New year</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/politicos_arca.jpg" alt="Políticos Arca" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">draw</span>
|
|
<h3 class="title">Fuck Noe</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/stickers.jpg" alt="Stickers" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">stick</span>
|
|
<h3 class="title">Stickers</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure class="item mural">
|
|
<img src="ARTIVISMO_THS/stop_wars.jpg" alt="Stop wars" loading="lazy">
|
|
<figcaption>
|
|
<span class="chip chip-mural">sten</span>
|
|
<h3 class="title">Stop wars</h3>
|
|
<p class="meta"></p>
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- Sobre -->
|
|
<section id="sobre" class="sobre">
|
|
<h2>About</h2>
|
|
<p>
|
|
ARTIVISMO is a space to archive and celebrate images with intention:
|
|
murals, visual protests, collages, stencils and performances. We curate
|
|
pieces that question, move and activate.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Contacto -->
|
|
<section id="contacto" class="contacto">
|
|
<h2>Contact</h2>
|
|
<p>¿Share with us!</p>
|
|
<a class="cta" href="mailto:hola@artivismo.example">artivismo@riseup.net</a>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<p><span id="year"></span> ARTIVISMO made with love</p>
|
|
</footer>
|
|
|
|
<!-- Año -->
|
|
<script>
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
</script>
|
|
</body>
|
|
</html>
|