Primer commit, volcado de todos los archivos
0
README.md
Normal file
237
arte.html
Normal file
|
|
@ -0,0 +1,237 @@
|
||||||
|
<!-- arte.html -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>ART_LAB</title>
|
||||||
|
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
|
||||||
|
<link rel="stylesheet" href="subpages.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<!-- CABECERA -->
|
||||||
|
<header class="sub-header">
|
||||||
|
<div class="inner">
|
||||||
|
<h1>ART LAB</h1>
|
||||||
|
<p class="tagline">Deja en casa raton y teclado</p>
|
||||||
|
<nav class="crumbs">
|
||||||
|
<a href="index.html">home</a> · arte
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- CONTENIDO -->
|
||||||
|
<main class="content">
|
||||||
|
|
||||||
|
<!-- NAV RÁPIDO -->
|
||||||
|
<section class="panel" aria-label="Navegación rápida">
|
||||||
|
<p style="text-align:center;">
|
||||||
|
<a href="index.html" class="button">Home</a>
|
||||||
|
•
|
||||||
|
<a href="#confeccion" class="button">Confección</a>
|
||||||
|
•
|
||||||
|
<a href="#volumen-3d" class="button">Escultura & Impresión 3D</a>
|
||||||
|
•
|
||||||
|
<a href="#iluminacion" class="button">Iluminación</a>
|
||||||
|
•
|
||||||
|
<a href="#edicion" class="button">Edición (Foto/Vídeo)</a>
|
||||||
|
•
|
||||||
|
<a href="#sonido" class="button">Sonido</a>
|
||||||
|
•
|
||||||
|
<a href="#pintura" class="button">Pintura y graficos</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="volumen-3d" class="panel" aria-label="Escultura e Impresión 3D">
|
||||||
|
<h2>BIENVENIDAS</h2>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/all_creatures_wellcome.webp" alt="Impresora 3D"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/teclado_negro_planta.jpg" alt="Escultura"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/art_lab_cartel.webp" alt="Escultura"></figure>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 2) ESCULTURA & IMPRESIÓN 3D -->
|
||||||
|
<section id="volumen-3d" class="panel" aria-label="Escultura e Impresión 3D">
|
||||||
|
<h2>Escultura & Impresión 3D</h2>
|
||||||
|
<article>
|
||||||
|
<h3 class="title">Volumen, modelado y prototipado</h3>
|
||||||
|
<p>
|
||||||
|
Del boceto a la pieza: modelado libre (Blender/FreeCAD), impresión 3D y postprocesos
|
||||||
|
con <em>finishing</em> de taller. Apuntes: <a href="https://www.blender.org/" target="_blank">Blender</a>,
|
||||||
|
<a href="https://www.freecad.org/" target="_blank">FreeCAD</a>,
|
||||||
|
<a href="https://www.prusa3d.com/page/prusaslicer_424/" target="_blank">PrusaSlicer</a>,
|
||||||
|
<a href="https://ultimaker.com/software/ultimaker-cura" target="_blank">Cura</a>,
|
||||||
|
<a href="https://openscad.org/" target="_blank">OpenSCAD</a>. En el radar: ferias maker, biofabricación y esculturas cinéticas.
|
||||||
|
</p>
|
||||||
|
<ul class="meta-links">
|
||||||
|
<li><a class="button" href="https://hackaday.com/tag/3d-printing/" target="_blank">Hackaday // 3D Printing</a></li>
|
||||||
|
<li><a class="button" href="https://wiki.opensourceecology.org/wiki/Category:3D_Printer" target="_blank">OSE 3D Printer</a></li>
|
||||||
|
<li><a class="button" href="https://www.blendernation.com/" target="_blank">BlenderNation</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/3dprinter.jpg" alt="Impresora 3D"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/escultura.jpg" alt="Escultura"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/lols.jpeg" alt="Escultura"></figure>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 3) ILUMINACIÓN -->
|
||||||
|
<section id="iluminacion" class="panel" aria-label="Iluminación">
|
||||||
|
<h2>Iluminación</h2>
|
||||||
|
<article>
|
||||||
|
<h3 class="title">Luz técnica y creativa</h3>
|
||||||
|
<p>
|
||||||
|
Diseño escénico, LEDs direccionables y audio-reactivo. Apuntes:
|
||||||
|
<a href="https://kno.wled.ge/" target="_blank">WLED</a>,
|
||||||
|
<a href="https://www.qlcplus.org/" target="_blank">QLC+</a>,
|
||||||
|
<a href="https://www.openlighting.org/ola/" target="_blank">OLA</a>,
|
||||||
|
<a href="https://hydra.ojack.xyz/" target="_blank">Hydra</a>,
|
||||||
|
<a href="https://openframeworks.cc/" target="_blank">OpenFrameworks</a>,
|
||||||
|
<a href="https://derivative.ca/" target="_blank">TouchDesigner</a> (no libre, muy usado en VJ/teatro).
|
||||||
|
</p>
|
||||||
|
<ul class="meta-links">
|
||||||
|
<li><a class="button" href="https://learn.adafruit.com/adafruit-neopixel-uberguide" target="_blank">Guía NeoPixel</a></li>
|
||||||
|
<li><a class="button" href="https://ofxaddons.com/" target="_blank">ofxAddons</a></li>
|
||||||
|
<li><a class="button" href="https://obsproject.com/" target="_blank">OBS</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/iluminacion_verde.jpg" alt="Iluminación verde"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/luz_teles.jpg" alt="Pantallas y luces"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/luzes.jpg" alt="Luces variadas"></figure>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 4) EDICIÓN (FOTO/VÍDEO) -->
|
||||||
|
<section id="edicion" class="panel" aria-label="Edición (Foto/Vídeo)">
|
||||||
|
<h2>Edición (Foto/Vídeo)</h2>
|
||||||
|
<article>
|
||||||
|
<h3 class="title">Imagen fija y en movimiento</h3>
|
||||||
|
<p>
|
||||||
|
Flujo ágil: captura, corrección de color y entrega. Apuntes:
|
||||||
|
<a href="https://www.darktable.org/" target="_blank">darktable</a>,
|
||||||
|
<a href="https://www.gimp.org/" target="_blank">GIMP</a>,
|
||||||
|
<a href="https://www.krita.org/" target="_blank">Krita</a>,
|
||||||
|
<a href="https://kdenlive.org/en/" target="_blank">Kdenlive</a>,
|
||||||
|
<a href="https://ffmpeg.org/" target="_blank">FFmpeg</a>.
|
||||||
|
Cultura: fotolibros, zines y screenings DIY.
|
||||||
|
</p>
|
||||||
|
<ul class="meta-links">
|
||||||
|
<li><a class="button" href="https://krita-artists.org/" target="_blank">Krita Artists</a></li>
|
||||||
|
<li><a class="button" href="https://film.emulsion.io/" target="_blank">Emulsion (filmmaking)</a></li>
|
||||||
|
<li><a class="button" href="https://pixls.us/" target="_blank">PIXLS.US</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/foto_editing_windows.jpg" alt="Edición foto"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/photoshop.jpg" alt="Retoque y capas"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/photoshop_lulzec.jpeg" alt="Procesos creativos"></figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 5) SONIDO -->
|
||||||
|
<section id="sonido" class="panel" aria-label="Sonido">
|
||||||
|
<h2>Sonido</h2>
|
||||||
|
<article>
|
||||||
|
<h3 class="title">Grabación, mezcla y directo</h3>
|
||||||
|
<p>
|
||||||
|
De la toma al directo con herramientas libres. Apuntes:
|
||||||
|
<a href="https://ardour.org/" target="_blank">Ardour</a>,
|
||||||
|
<a href="https://www.audacityteam.org/" target="_blank">Audacity</a>,
|
||||||
|
<a href="https://supercollider.github.io/" target="_blank">SuperCollider</a>,
|
||||||
|
<a href="https://puredata.info/" target="_blank">PureData</a>,
|
||||||
|
<a href="https://sonic-pi.net/" target="_blank">Sonic Pi</a>.
|
||||||
|
Cultura: <a href="https://algorave.com/" target="_blank">Algorave</a>, netlabels y radio libre.
|
||||||
|
</p>
|
||||||
|
<ul class="meta-links">
|
||||||
|
<li><a class="button" href="https://linuxaudio.org/" target="_blank">Linux Audio</a></li>
|
||||||
|
<li><a class="button" href="https://freesound.org/" target="_blank">Freesound</a></li>
|
||||||
|
<li><a class="button" href="https://icecast.org/" target="_blank">Icecast</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/musica_maestro.jpg" alt="Música en directo"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/musicon.jpg" alt="Set musical"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/set_musica_plantas.jpg" alt="Set plantas"></figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 6) PINTA & COLOREA -->
|
||||||
|
<section id="pinta-colorea" class="panel" aria-label="Pinta & Colorea">
|
||||||
|
<h2>PINTURA</h2>
|
||||||
|
<article>
|
||||||
|
<h3 class="title">Pintura, mural y gráfica</h3>
|
||||||
|
<p>
|
||||||
|
Del mural al fanzine: stencil, paste-up y procesos híbridos. Apuntes:
|
||||||
|
<a href="https://inkscape.org/" target="_blank">Inkscape</a>,
|
||||||
|
<a href="https://krita.org/" target="_blank">Krita</a>,
|
||||||
|
<a href="https://gimp.org/" target="_blank">GIMP</a>.
|
||||||
|
Cultura: ferias de fanzines, talleres de serigrafía y pintura comunitaria.
|
||||||
|
</p>
|
||||||
|
<ul class="meta-links">
|
||||||
|
<li><a class="button" href="https://www.openscreenprint.org/" target="_blank">Open Screenprint</a></li>
|
||||||
|
<li><a class="button" href="https://www.printedmatter.org/" target="_blank">Printed Matter</a></li>
|
||||||
|
<li><a class="button" href="https://stencilarchive.org/" target="_blank">Stencil Archive</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/painting.jpg" alt="Pintura"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/banksy_pintura.jpg" alt="Mural/graffiti"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/visuales.jpg" alt="Visuales gráficos"></figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1) CONFECCIÓN -->
|
||||||
|
<section id="confeccion" class="panel" aria-label="Confección">
|
||||||
|
<h2>Confección</h2>
|
||||||
|
<article>
|
||||||
|
<h3 class="title">Textil y vestuario</h3>
|
||||||
|
<p>
|
||||||
|
Patronaje, arreglos, custom y upcycling. Apuntes:
|
||||||
|
<a href="https://www.kobakant.at/DIY/" target="_blank">KOBAKANT (e-textiles)</a>,
|
||||||
|
<a href="https://inkstitch.org/" target="_blank">Ink/Stitch</a>,
|
||||||
|
<a href="https://www.blender.org/" target="_blank">Blender (patrones 3D)</a>.
|
||||||
|
Moda lenta, open-source y reparaciones con comunidad.
|
||||||
|
</p>
|
||||||
|
<ul class="meta-links">
|
||||||
|
<li><a class="button" href="https://www.instructables.com/circuits/wearables/" target="_blank">Wearables DIY</a></li>
|
||||||
|
<li><a class="button" href="https://wiki.opensourceecology.org/wiki/Textiles" target="_blank">OSE Textiles</a></li>
|
||||||
|
<li><a class="button" href="https://www.makefashion.ca/resources/" target="_blank">MakeFashion</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="media-grid">
|
||||||
|
<figure class="thumb"><img src="imagenes/confeccion.jpg" alt="Confección"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/confeccion_maquina.jpg" alt="Custom y taller"></figure>
|
||||||
|
<figure class="thumb"><img src="imagenes/create_art.jpg" alt="Cartelería textil"></figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer class="sub-footer">
|
||||||
|
<div class="inner">© Hacklab la Raíz — CC BY-NC-SA 4.0</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
121
artivismo.css
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000000;
|
||||||
|
color: #00ff00;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 95%;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #000;
|
||||||
|
box-shadow: 0 0 20px #00ff00;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header marquee {
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 2.5em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #ff69b4;
|
||||||
|
text-shadow: 3px 3px 0 #ff0000, -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 30px 0 10px;
|
||||||
|
font-size: 1.8em;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery img {
|
||||||
|
max-width: 30%;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 0 10px #ff69b4;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery img:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 0 20px #ff69b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloads {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button {
|
||||||
|
background-color: #00ff00;
|
||||||
|
color: #000000;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
font-size: 0.8em;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 4px #008000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button:hover {
|
||||||
|
background-color: #ff69b4;
|
||||||
|
color: #00ff00;
|
||||||
|
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #000;
|
||||||
|
border-top: 2px solid #00ff00;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-footer {
|
||||||
|
background-color: #000;
|
||||||
|
padding: 5px 0;
|
||||||
|
border-top: 2px solid #00ff00;
|
||||||
|
border-bottom: 2px solid #00ff00;
|
||||||
|
color: #ff69b4;
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
49
artivismo.html
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Artivismo - Hacklab la Raíz</title>
|
||||||
|
<link rel="stylesheet" href="artivismo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>Artivismo - Hacklab la Raíz</h1>
|
||||||
|
<marquee>!! Where art meets activism !! ; - )</marquee>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h2>Galería de Graffiti y Murales</h2>
|
||||||
|
<div class="gallery">
|
||||||
|
<img src="imagenes/graffiti1.jpg" alt="Graffiti 1">
|
||||||
|
<img src="imagenes/graffiti2.jpg" alt="Graffiti 2">
|
||||||
|
<img src="imagenes/mural1.jpg" alt="Mural 1">
|
||||||
|
<img src="imagenes/mural2.jpg" alt="Mural 2">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Galería de Stencils</h2>
|
||||||
|
<div class="gallery">
|
||||||
|
<img src="imagenes/stencil1.jpg" alt="Stencil 1">
|
||||||
|
<img src="imagenes/stencil2.jpg" alt="Stencil 2">
|
||||||
|
<img src="imagenes/stencil3.jpg" alt="Stencil 3">
|
||||||
|
<img src="imagenes/stencil4.jpg" alt="Stencil 4">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Descarga de Stencils en PDF</h2>
|
||||||
|
<div class="downloads">
|
||||||
|
<a href="archivos/artivismo/stencil1.pdf" class="download-button">Descargar Stencil 1</a>
|
||||||
|
<a href="archivos/artivismo/stencil2.pdf" class="download-button">Descargar Stencil 2</a>
|
||||||
|
<a href="archivos/artivismo/stencil3.pdf" class="download-button">Descargar Stencil 3</a>
|
||||||
|
<a href="archivos/artivismo/stencil4.pdf" class="download-button">Descargar Stencil 4</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="marquee-footer">
|
||||||
|
<marquee behavior="scroll" direction="left">Arte es resistencia, resistencia es arte. Hazlo tú mismo. Libera tu ciudad.</marquee>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
127
contacto.html
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
<!-- contacto.html -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>Hacklab la Raíz — Contacto</title>
|
||||||
|
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
|
||||||
|
<link rel="stylesheet" href="subpages.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<!-- CABECERA -->
|
||||||
|
<header class="sub-header">
|
||||||
|
<div class="inner">
|
||||||
|
<h1>HACKLAB LA RAÍZ</h1>
|
||||||
|
<p class="tagline">Contacto // Cómo llegar // Enlaces</p>
|
||||||
|
<nav class="crumbs">
|
||||||
|
<a href="index.html">home</a> · contacto
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- CONTENIDO -->
|
||||||
|
<main class="content">
|
||||||
|
|
||||||
|
<!-- NAV RÁPIDO -->
|
||||||
|
<section class="panel" aria-label="Navegación rápida">
|
||||||
|
<p style="text-align:center;">
|
||||||
|
<a href="index.html" class="button">Home</a>
|
||||||
|
•
|
||||||
|
<a href="eventos.html" class="button">Events</a>
|
||||||
|
•
|
||||||
|
<a href="projects.html" class="button">Projects</a>
|
||||||
|
•
|
||||||
|
<a href="hacker_types.html" class="button">Tribes</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CONTACTO PRINCIPAL -->
|
||||||
|
<section class="panel" aria-label="Contacto principal">
|
||||||
|
<h2>Contacto directo</h2>
|
||||||
|
<p>
|
||||||
|
Email: <a href="mailto:hacklab-laraiz@riseup.net" class="title">hacklab-laraiz@riseup.net</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Lugar habitual: <span class="title">CSO La Enredadera (Tetuán)</span><br>
|
||||||
|
<em>(Ven y llama al timbre — viernes tarde)</em>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HORARIO Y ACTIVIDAD -->
|
||||||
|
<section class="panel" aria-label="Horario">
|
||||||
|
<h2>Horario & actividad</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Viernes</strong> por la tarde (habitualmente <strong>18:00</strong>).</li>
|
||||||
|
<li>Consulta la agenda para fechas concretas y cambios.</li>
|
||||||
|
</ul>
|
||||||
|
<p style="text-align:center;">
|
||||||
|
<a href="eventos.html" class="button">Ver agenda de eventos</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ENLACES OFICIALES -->
|
||||||
|
<section class="panel" aria-label="Enlaces">
|
||||||
|
<h2>Enlaces oficiales</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Agenda en MAD.CONVOCA.LA:
|
||||||
|
<a href="https://mad.convoca.la/tag/Hacklab" target="_blank" rel="noopener">mad.convoca.la/tag/Hacklab</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Meetup:
|
||||||
|
<a href="https://www.meetup.com/hacklab/" target="_blank" rel="noopener">meetup.com/hacklab</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Canal de Telegram:
|
||||||
|
<a href="https://t.me/+p4-PzqpNgGQ2Njg0" target="_blank" rel="noopener">t.me/+p4-PzqpNgGQ2Njg0</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Radar SQUAT (CSO La Enredadera):
|
||||||
|
<a href="https://radar.squat.net/en/node/4914" target="_blank" rel="noopener">radar.squat.net/en/node/4914</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Web CSO La Enredadera:
|
||||||
|
<a href="https://laenredaderadetetuan.wordpress.com/" target="_blank" rel="noopener">laenredaderadetetuan.wordpress.com</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Eventbrite:
|
||||||
|
<a href="https://www.eventbrite.com/o/anonymous-organizer-82816283193" target="_blank" rel="noopener">organizer on Eventbrite</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MENSAJE RÁPIDO -->
|
||||||
|
<section class="panel" aria-label="Mensaje rápido">
|
||||||
|
<h2>Escríbenos</h2>
|
||||||
|
<p>
|
||||||
|
¿Tienes una idea, propuesta de taller o quieres colaborar? Escríbenos:
|
||||||
|
</p>
|
||||||
|
<p style="text-align:center;">
|
||||||
|
<a href="mailto:hacklab-laraiz@riseup.net" class="button">Enviar email</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- NOTAS Y LICENCIA -->
|
||||||
|
<section class="panel" aria-label="Notas y licencia">
|
||||||
|
<h2>Notas</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Respetamos la privacidad y fomentamos el uso de herramientas libres.</li>
|
||||||
|
<li>Consulta nuestras actividades y materiales en la <strong>Biblioteka</strong> cuando esté disponible.</li>
|
||||||
|
</ul>
|
||||||
|
<p style="text-align:center; margin-top:8px;">
|
||||||
|
Contenido bajo licencia <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.es" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer class="sub-footer">
|
||||||
|
<div class="inner">© Hacklab la Raíz — CC BY-NC-SA 4.0</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
281
copia_index.html
Executable file
|
|
@ -0,0 +1,281 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<title>Hacklab la Raíz</title>
|
||||||
|
<link rel="icon" type="image/png" href="imágenes/hacklab.jpeg">
|
||||||
|
|
||||||
|
<!-- Open Graph meta tags for social media sharing -->
|
||||||
|
<meta property="og:title" content="Hacklab la Raíz">
|
||||||
|
<meta property="og:description" content="El hacklab de Tetuan">
|
||||||
|
<meta property="og:image" content="imágenes/hacklab_laraiz.png">
|
||||||
|
<meta property="og:url" content="https://hacklab.laraiz">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
|
<!-- Twitter Card meta tags for Twitter sharing -->
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:title" content="Hacklab la Raíz">
|
||||||
|
<meta name="twitter:description" content="El hacklab de Tetuan">
|
||||||
|
<meta name="twitter:image" content="imágenes/hacklab_laraiz.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="vertical-marquee left">
|
||||||
|
<marquee behavior="scroll" direction="up">NOCK NOCK NEO, THE MATRIX HAS YOU, FOLLOW THE WHITE RABBIT</marquee>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>HACKLAB LA RAIZ</h1>
|
||||||
|
<marquee> !! Where hackers come to root !! ; - ) </marquee>
|
||||||
|
</header>
|
||||||
|
<div class="top-left-buttons">
|
||||||
|
<a href="hacker_types.html" class="button">tribus hacker</a>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<div class="ascii">
|
||||||
|
==============================================================================================================================================
|
||||||
|
</div>
|
||||||
|
<marquee> Bienvenidas a la comunidad B-D </marquee>
|
||||||
|
<div class="content">
|
||||||
|
<div class="column-left">
|
||||||
|
<h2>Contacto</h2>
|
||||||
|
|
||||||
|
<p><a>hacklab-laraiz@riseup.net</a></p>
|
||||||
|
<p><a>Ven y llama al timbre :-)</a></p>
|
||||||
|
<p><a></a></p>
|
||||||
|
|
||||||
|
<div class="ascii">
|
||||||
|
======================================
|
||||||
|
</div>
|
||||||
|
<h2>Actividad</h2>
|
||||||
|
<p>Todos los viernes de cada mes a las . Solemos hacer los eventos ese día.</p>
|
||||||
|
<p>MAD.CONVOCA.LA: <a href="https://mad.convoca.la/tag/Hacklab">https://mad.convoca.la/tag/Hacklab</a></p>
|
||||||
|
<p><a href="https://www.meetup.com/hacklab/"><strong> 18:00 en el CSO La Enredadera</strong></a></p>
|
||||||
|
<p><a href="https://youtu.be/u3CKgkyc7Qo?feature=shared">CANAL DE TELEGRAM</a></p>
|
||||||
|
<p>GRUPO DE MEET UP : <a href="https://www.meetup.com/hacklab/">https://www.meetup.com/hacklab/</a></p>
|
||||||
|
<p>RADAR SQUAT HACKLAB LA RAIZ : <a href="https://radar.squat.net/en/madrid/hacklab-la-raiz">https://radar.squat.net/en/node/4914</a></p>
|
||||||
|
|
||||||
|
<div class="ascii">
|
||||||
|
=======================================
|
||||||
|
</div>
|
||||||
|
<h2>Próximos eventos</h2>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller 2 Inteligencia artificial libre ( automatas y entrenamiento propoio ) </strong><br>
|
||||||
|
<span class="datetime">Abril - Mayo de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Selfhosting de mensajeria TALLER FINAL ! Resumen de los 3 anteriores + MATRIX & SIMPLEX</strong><br>
|
||||||
|
<span class="datetime">Abril - Mayo de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">CINEROFUM</strong><br>
|
||||||
|
<span class="datetime">Abril de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Fontaneria de Linux ! SSH y certificados ;-) </strong><br>
|
||||||
|
<span class="datetime">Abril de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">CRYPTOPARTY , El arte del cifrado</strong><br>
|
||||||
|
<span class="datetime"> Mayo de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Bienvenidas a vuestro OASIS , INSTALL PARTY !</strong><br>
|
||||||
|
<span class="datetime">Mayo de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Openwrt haz tu wifi libre !</strong>
|
||||||
|
<span class="datetime">Abril de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Sistemas operativos ;-) abre el capó de tu linux </strong>
|
||||||
|
<span class="datetime">Mayo de 2025</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="column-right">
|
||||||
|
<h2>Eventos anteriores</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Cineforum: Anonymous - The Story of Anonymous Hacktivist</strong><br>
|
||||||
|
<span class="datetime">8 de diciembre de 2023</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Cineforum: Hackerwars & taller sencillo de Linux</strong><br>
|
||||||
|
<span class="datetime">22 de diciembre de 2023</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Thinktank: Dinámica de grupo, cacharreo HARD-WARES</strong><br>
|
||||||
|
<span class="datetime">5 de enero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Cineforum: Aaron Swartz (The Internet's Own Boy)</strong><br>
|
||||||
|
<span class="datetime">19 de enero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller de privacidad y seguridad para activistas y periodistas (Ordenadores)</strong><br>
|
||||||
|
<span class="datetime">2 de febrero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Cineforum: El Quinto Poder (Julian Assange)</strong><br>
|
||||||
|
<span class="datetime">1 de marzo de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller de privacidad y seguridad para activistas y periodistas (Teléfonos)</strong><br>
|
||||||
|
<span class="datetime">15 de marzo de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller de privacidad y seguridad para activistas y periodistas 3</strong><br>
|
||||||
|
<span class="datetime">5 de abril de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Kaffeta: >_ CYBERPUNK ;-)</strong><br>
|
||||||
|
<span class="datetime">19 de abril de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller de ganzuado y cerraduras esenciales</strong><br>
|
||||||
|
<span class="datetime">4 de mayo de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller autodefensa digital para activistas</strong><br>
|
||||||
|
<span class="datetime">22 de mayo de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Cineforum: Running with the Devil (John McAfee)</strong><br>
|
||||||
|
<span class="datetime">27 de junio de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Fiesta Julian Assange</strong><br>
|
||||||
|
<span class="datetime">3 de julio de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Dia de bienvenida !</strong><br>
|
||||||
|
<span class="datetime">Septiembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller de web estaticas en HUGO !</strong><br>
|
||||||
|
<span class="datetime">ocutbre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Federa y libera tus comunicaciones FEDIVERSO + XMPP</strong><br>
|
||||||
|
<span class="datetime">Noviembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Install party !fuck systemd!</strong><br>
|
||||||
|
<span class="datetime">Noviembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Cineforum: HACKERWARS</strong><br>
|
||||||
|
<span class="datetime">Noviembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title"> Libera y securiza tu telefono!</strong><br>
|
||||||
|
<span class="datetime">Noviembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Introducción A la inteligencia artificial libre</strong><br>
|
||||||
|
<span class="datetime">Diciembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Proxmox intall party!</strong><br>
|
||||||
|
<span class="datetime">Diciembre de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">KAFETA CYBERPUNT 2</strong><br>
|
||||||
|
<span class="datetime">Enero de 2025</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller proxmox ! ; - )</strong><br>
|
||||||
|
<span class="datetime">Enero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Nos vamos juntas ! al fediverso :) [ Mastodon ]</strong><br>
|
||||||
|
<span class="datetime">Enero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Charla Antropologia hacker!</strong><br>
|
||||||
|
<span class="datetime">Enero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller 2 creacion de web estaticas con hugo!</strong><br>
|
||||||
|
<span class="datetime">Enero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">HACKELARRE</strong><br>
|
||||||
|
<span class="datetime">Febrero de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Interceptando llamadas de aplicaciones android</strong><br>
|
||||||
|
<span class="datetime">Marzo de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Taller de impresiones 3D</strong><br>
|
||||||
|
<span class="datetime">Marzo de 2024</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong class="title">Rebelion de los artefactos</strong><br>
|
||||||
|
<span class="datetime">Marzo de 2024</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ascii">
|
||||||
|
=======================================================================================================
|
||||||
|
</div>
|
||||||
|
<h2>BIBLIOTEKA</h2>
|
||||||
|
<p> <a href="/books">Dejaremos por aqui los proyectos en los que estamos trabajando , subdominios e informacion importante . </a> </p>
|
||||||
|
</main>
|
||||||
|
<div class="ascii">
|
||||||
|
|
||||||
|
============================================================================
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-left">
|
||||||
|
<img src="imagenes/enredadera.jpg" alt="Enredadera" class="footer-img">
|
||||||
|
</div>
|
||||||
|
<div class="footer-center">
|
||||||
|
<p><a href="https://mad.convoca.la/event/cineforum-hacklab-la-raiz">Hacklab la Raíz : ------------https://mad.convoca.la/event/hacklab</a></p>
|
||||||
|
<p><a href="https://radar.squat.net/en/node/4914">RADAR SQUAT CSO LA ENREDADERA : -----------https://radar.squat.net/en/node/4914</a></p>
|
||||||
|
<p><a href="https://laenredaderadetetuan.wordpress.com/">WEB CSO LA ENREDADERA : -----------https://laenredaderadetetuan.wordpress.com/</a></p>
|
||||||
|
<p><a href="https://t.me/+p4-PzqpNgGQ2Njg0">CANAL DE TELEGRAM: ------------https://youtu.be/u3CKgkyc7Qo?feature=shared</a></p>
|
||||||
|
<p><a href="https://www.meetup.com/hacklab/"> GRUPO DE MEET UP -----------https://www.meetup.com/hacklab/</a></p>
|
||||||
|
<p><a href="https://www.eventbrite.com/o/anonymous-organizer-82816283193">GRUPO EVENT BRITE </a></p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Contenido bajo licencia <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.es">CC BY-NC-SA 4.0</a></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="footer-right">
|
||||||
|
<img src="imagenes/hacklab.jpeg" alt="Hacklab" class="footer-img">
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="vertical-marquee left">
|
||||||
|
<div class="scrolling-text">WAKE</div>
|
||||||
|
<div class="scrolling-text">UP</div>
|
||||||
|
<div class="scrolling-text">NEO</div>
|
||||||
|
<div class="scrolling-text">...</div>
|
||||||
|
<div class="scrolling-text">THE</div>
|
||||||
|
<div class="scrolling-text">MATRIX</div>
|
||||||
|
<div class="scrolling-text">HAS</div>
|
||||||
|
<div class="scrolling-text">YOU</div>
|
||||||
|
<div class="scrolling-text">...</div>
|
||||||
|
</div>
|
||||||
|
<div class="vertical-marquee right">
|
||||||
|
<div class="scrolling-text">FOLLOW</div>
|
||||||
|
<div class="scrolling-text">THE</div>
|
||||||
|
<div class="scrolling-text">WHITE</div>
|
||||||
|
<div class="scrolling-text">RABBIT</div>
|
||||||
|
<div class="scrolling-text">.</div>
|
||||||
|
<div class="scrolling-text">KNOCK</div>
|
||||||
|
<div class="scrolling-text">KNOCK</div>
|
||||||
|
<div class="scrolling-text">NEO</div>
|
||||||
|
<div class="scrolling-text">.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
345
copia_styles.css
Executable file
|
|
@ -0,0 +1,345 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000000;
|
||||||
|
color: #00ff00;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-marquee {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #000;
|
||||||
|
color: #00ff40;
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
font-size: 0.8em;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-marquee.left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-marquee.right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrolling-text {
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: mixed;
|
||||||
|
text-align: center;
|
||||||
|
animation: scrollUp 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scrollUp {
|
||||||
|
0% {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 95%;
|
||||||
|
width: calc(100% - 40px); /* Reduce the width by the width of both marquees */
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #000;
|
||||||
|
box-shadow: 0 0 20px #00ff00;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header marquee {
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 3.5em; /* Aumentar el tamaño del título */
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #ff69b4;
|
||||||
|
text-shadow: 3px 3px 0 #ff0000, -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-left, .column-right {
|
||||||
|
width: 48%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 30px 0 10px;
|
||||||
|
font-size: 1.8em;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
margin: 10px 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetime {
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #00ff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #00ff00;
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #000000; /* Cambiar el color de la letra a negro en hover */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -3px;
|
||||||
|
top: -3px;
|
||||||
|
background: #ff0080;
|
||||||
|
z-index: -1;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover::before {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center; /* Centra los botones horizontalmente */
|
||||||
|
gap: 2em; /* Mantiene la separación entre los botones */
|
||||||
|
margin-bottom: 20px; /* Espacio entre los botones y el contenido debajo */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left-buttons .button {
|
||||||
|
background-color: #00ff00;
|
||||||
|
color: #000000;
|
||||||
|
padding: 15px 30px; /* Aumentar el padding para hacer los botones más grandes */
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
font-size: 2em; /* Aumentar el tamaño de la fuente en los botones */
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 4px #008000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.top-left-buttons .button:hover {
|
||||||
|
background-color: #ff69b4; /* Fondo rosa al hacer hover */
|
||||||
|
color: #00ff00; /* Letra verde al hacer hover */
|
||||||
|
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4; /* Sombra verde y resplandor */
|
||||||
|
transform: translateY(-2px); /* Levemente hacia arriba para el efecto de "sobresalir" */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons img {
|
||||||
|
width: 50px;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left, .footer-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-center {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-img {
|
||||||
|
width: 400px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: #00ff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
color: #000000; /* Cambiar el color de la letra a negro en hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ASCII art styles */
|
||||||
|
.ascii {
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
white-space: pre;
|
||||||
|
color: #00ff00;
|
||||||
|
margin: 20px 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Media Query para móviles (pantallas menores de 768px) */
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
/* Ajusta el cuerpo para móviles */
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-size: 0.9em; /* Reduce el tamaño general de la fuente */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Títulos más pequeños en móviles */
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8em; /* Reduce el tamaño del título */
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em; /* Reduce el tamaño de los subtítulos */
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
font-size: 0.85em; /* Ajusta el tamaño de texto para mejor legibilidad */
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coloca las columnas una debajo de la otra en móviles */
|
||||||
|
.content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px; /* Espacio entre las columnas al pasar a vertical */
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-left, .column-right {
|
||||||
|
width: 100%; /* Hacer que cada columna ocupe todo el ancho */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajusta el tamaño de los botones para móviles */
|
||||||
|
.top-left-buttons {
|
||||||
|
flex-direction: column; /* Coloca los botones en vertical */
|
||||||
|
gap: 10px; /* Añade espacio entre los botones */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left-buttons .button {
|
||||||
|
font-size: 1em; /* Ajusta el tamaño de la fuente en los botones */
|
||||||
|
padding: 10px 15px; /* Ajuste del padding en móviles */
|
||||||
|
width: 100%; /* Hacer que el botón ocupe todo el ancho disponible */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajuste de ASCII art (las líneas ===) */
|
||||||
|
.ascii {
|
||||||
|
font-size: 0.7em; /* Reduce el tamaño del arte ASCII */
|
||||||
|
line-height: 0.9; /* Ajusta el espaciado de las líneas */
|
||||||
|
margin: 10px 0; /* Reduce el margen para móviles */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ocultar los marcos laterales en móviles */
|
||||||
|
.vertical-marquee {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 0.75em; /* Reduce el tamaño del pie de página */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajuste de imágenes en el footer */
|
||||||
|
.footer-img {
|
||||||
|
width: 150px; /* Ajustar las imágenes en el pie de página para móviles */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media Query para pantallas muy pequeñas (menores de 400px) */
|
||||||
|
@media only screen and (max-width: 400px) {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em; /* Reduce aún más el tamaño del título */
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.3em; /* Ajusta el subtítulo */
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
font-size: 0.75em; /* Texto más pequeño */
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii {
|
||||||
|
font-size: 0.6em; /* Ajusta el tamaño de las líneas ASCII */
|
||||||
|
line-height: 0.8; /* Reduce el espaciado entre las líneas */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left-buttons .button {
|
||||||
|
font-size: 0.8em; /* Botones aún más pequeños */
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 0.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
125
documentacion.css
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000000;
|
||||||
|
color: #00ff00;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-marquee {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #000;
|
||||||
|
color: #00ff40;
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
font-size: 0.8em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-marquee.left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-marquee.right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 95%;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #000;
|
||||||
|
box-shadow: 0 0 20px #00ff00;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header marquee {
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 2.5em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #ff69b4;
|
||||||
|
text-shadow: 3px 3px 0 #ff0000, -1px -1px 0 #ff0000, 1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px 1px 0 #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 30px 0 10px;
|
||||||
|
font-size: 1.8em;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #ff0080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event h3 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #ff69b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button {
|
||||||
|
background-color: #00ff00;
|
||||||
|
color: #000000;
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
font-size: 0.8em;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 4px #008000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button:hover {
|
||||||
|
background-color: #ff69b4;
|
||||||
|
color: #00ff00;
|
||||||
|
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #000;
|
||||||
|
border-top: 2px solid #00ff00;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-footer {
|
||||||
|
background-color: #000;
|
||||||
|
padding: 5px 0;
|
||||||
|
border-top: 2px solid #00ff00;
|
||||||
|
border-bottom: 2px solid #00ff00;
|
||||||
|
color: #ff69b4;
|
||||||
|
font-family: 'Press Start 2P', sans-serif;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
150
documentacion.html
Normal file
|
|
@ -0,0 +1,150 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Documentación - Hacklab la Raíz</title>
|
||||||
|
<link rel="stylesheet" href="documentacion.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="vertical-marquee left">
|
||||||
|
<marquee behavior="scroll" direction="up">SIN MIEDO NO HAY LIMITES, SIN LIMITES NO HAY CONTROL, SIN CONTROL NO HAY MIEDO, SIN MIEDO NO HAY LIMITES</marquee>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>Documentación - Hacklab la Raíz</h1>
|
||||||
|
<marquee> !! Where hackers come to root !! ; - ) </marquee>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h2>Eventos anteriores</h2>
|
||||||
|
|
||||||
|
<!-- Películas y talleres ordenados por fecha -->
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cineforum: Anonymous - The Story of Anonymous Hacktivist</h3>
|
||||||
|
<p>8 de diciembre de 2023</p>
|
||||||
|
<a href="https://www.youtube.com/results?search_query=Anonymous+-+The+Story+of+Anonymous+Hacktivist+trailer" class="download-button">Ir al Trailer</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cineforum: Hackerwars & taller sencillo de Linux</h3>
|
||||||
|
<p>22 de diciembre de 2023</p>
|
||||||
|
<a href="https://www.youtube.com/results?search_query=Hackerwars+trailer" class="download-button">Ir al Trailer</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Thinktank: Dinámica de grupo, cacharreo HARD-WARES</h3>
|
||||||
|
<p>5 de enero de 2024</p>
|
||||||
|
<a href="archivos/slides/thinktank_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/thinktank.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cineforum: Aaron Swartz (The Internet's Own Boy)</h3>
|
||||||
|
<p>19 de enero de 2024</p>
|
||||||
|
<a href="https://www.youtube.com/results?search_query=Aaron+Swartz+The+Internet%27s+Own+Boy+trailer" class="download-button">Ir al Trailer</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Taller de privacidad y seguridad para activistas y periodistas (Ordenadores)</h3>
|
||||||
|
<p>2 de febrero de 2024</p>
|
||||||
|
<a href="archivos/slides/privacidad_seguridad_ordenadores_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/privacidad_seguridad_ordenadores.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cineforum: El Quinto Poder (Julian Assange)</h3>
|
||||||
|
<p>1 de marzo de 2024</p>
|
||||||
|
<a href="https://www.youtube.com/results?search_query=El+Quinto+Poder+trailer" class="download-button">Ir al Trailer</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Taller de privacidad y seguridad para activistas y periodistas (Teléfonos)</h3>
|
||||||
|
<p>15 de marzo de 2024</p>
|
||||||
|
<a href="archivos/slides/privacidad_seguridad_telefonos_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/privacidad_seguridad_telefonos.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Taller de privacidad y seguridad para activistas y periodistas 3</h3>
|
||||||
|
<p>5 de abril de 2024</p>
|
||||||
|
<a href="archivos/slides/privacidad_seguridad_3_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/privacidad_seguridad_3.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Kaffeta: >_ CYBERPUNK ;-)</h3>
|
||||||
|
<p>19 de abril de 2024</p>
|
||||||
|
<a href="archivos/slides/cyberpunk_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/cyberpunk.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Taller de ganzuado y cerraduras esenciales</h3>
|
||||||
|
<p>4 de mayo de 2024</p>
|
||||||
|
<a href="archivos/slides/ganzuado_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/ganzuado.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Taller autodefensa digital para activistas</h3>
|
||||||
|
<p>22 de mayo de 2024</p>
|
||||||
|
<a href="archivos/slides/autodefensa_digital_slides.pdf" class="download-button">Descargar SLIDES</a>
|
||||||
|
<a href="archivos/text/autodefensa_digital.txt" class="download-button">Descargar TXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cineforum: Running with the Devil (John McAfee)</h3>
|
||||||
|
<p>27 de junio de 2024</p>
|
||||||
|
<a href="https://www.youtube.com/results?search_query=Running+with+the+Devil+John+McAfee+trailer" class="download-button">Ir al Trailer</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Fiesta Julian Assange</h3>
|
||||||
|
<p>3 de julio de 2024</p>
|
||||||
|
<a href="https://www.youtube.com/results?search_query=Julian+Assange+trailer" class="download-button">Ir al Trailer</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Manuales de Autogestión y Self-Hosting</h2>
|
||||||
|
|
||||||
|
<!-- Manuales de autogestión -->
|
||||||
|
<div class="event">
|
||||||
|
<h3>Manual: Self-hosting con Debian</h3>
|
||||||
|
<a href="archivos/documentacion/selfhosting_debian.pdf" class="download-button">Descargar PDF</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cómo Clusterizar Varias Torres con Linux</h3>
|
||||||
|
<a href="archivos/documentacion/cluster_linux.pdf" class="download-button">Descargar PDF</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Cómo Configurar OpenWRT en tu Red WiFi</h3>
|
||||||
|
<a href="archivos/documentacion/openwrt_wifi.pdf" class="download-button">Descargar PDF</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Configuración de pfSense para Laboratorio Seguro</h3>
|
||||||
|
<a href="archivos/documentacion/pfsense_laboratorio.pdf" class="download-button">Descargar PDF</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3>Monitorización de Red con Suricata</h3>
|
||||||
|
<a href="archivos/documentacion/suricata_red.pdf" class="download-button">Descargar PDF</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="marquee-footer">
|
||||||
|
<marquee behavior="scroll" direction="left">SIN MIEDO NO HAY LIMITES, SIN LIMITES NO HAY CONTROL, SIN CONTROL NO HAY MIEDO, SIN MIEDO NO HAY LIMITES</marquee>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-marquee right">
|
||||||
|
<marquee behavior="scroll" direction="up">SIN MIEDO NO HAY LIMITES</marquee>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
470
eventos.html
Normal file
|
|
@ -0,0 +1,470 @@
|
||||||
|
<!-- eventos.html -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>Hacklab la Raíz — Eventos</title>
|
||||||
|
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
|
||||||
|
<link rel="stylesheet" href="subpages.css">
|
||||||
|
</head>
|
||||||
|
<body class="page-eventos-wide">
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<!-- CABECERA -->
|
||||||
|
<header class="sub-header">
|
||||||
|
<div class="inner">
|
||||||
|
<h1>HACKLAB LA RAÍZ</h1>
|
||||||
|
<p class="tagline">Agenda // Próximos // Históricos</p>
|
||||||
|
<nav class="crumbs">
|
||||||
|
<a href="index.html">home</a> · eventos
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- CONTENIDO -->
|
||||||
|
<main class="content">
|
||||||
|
|
||||||
|
<!-- NAV RÁPIDO -->
|
||||||
|
<section class="panel" aria-label="Navegación rápida">
|
||||||
|
<p style="text-align:center;">
|
||||||
|
<a href="index.html" class="button">Home</a>
|
||||||
|
•
|
||||||
|
<a href="eventos.html" class="button">Events</a>
|
||||||
|
•
|
||||||
|
<a href="projects.html" class="button">Projects</a>
|
||||||
|
•
|
||||||
|
<a href="hacker_types.html" class="button">Tribes</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CALENDARIO MENSUAL (AUTO) -->
|
||||||
|
<section id="agenda" class="panel" aria-label="Calendario mensual">
|
||||||
|
<h2>Calendario</h2>
|
||||||
|
<div class="cal-controls" role="group" aria-label="Navegación de mes">
|
||||||
|
<button class="button cal-prev" type="button" aria-label="Mes anterior">←</button>
|
||||||
|
<div class="cal-title" aria-live="polite"></div>
|
||||||
|
<button class="button cal-next" type="button" aria-label="Mes siguiente">→</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cal" id="cal-root">
|
||||||
|
<!-- JS insertará aquí el calendario -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="cal-legend">
|
||||||
|
<strong>Viernes:</strong>
|
||||||
|
<span class="badge">1º OPEN DAY</span> ·
|
||||||
|
<span class="badge">2º ARTLAB</span> ·
|
||||||
|
<span class="badge">3º CRAFT NIGHT</span> ·
|
||||||
|
<span class="badge">Último DÍA EN BLANCO</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Posters destacados (2 arriba, 1 abajo) -->
|
||||||
|
<div class="poster-grid">
|
||||||
|
<figure class="poster-card">
|
||||||
|
<img src="imagenes/open_day.png" alt="OPEN DAY">
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="poster-card">
|
||||||
|
<img src="imagenes/craft_night.png" alt="CRAFT NIGHT">
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="poster-card poster-span">
|
||||||
|
<img src="imagenes/art_lab_glitch.png" alt="ART LAB">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(){
|
||||||
|
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
|
||||||
|
const weekdayNames = ['L','M','X','J','V','S','D']; // lunes primero (ES)
|
||||||
|
const IMAGES = {
|
||||||
|
OPENDAY: 'archivos/calendarios/openday.jpg',
|
||||||
|
ARTLAB: 'archivos/calendarios/artlab.jpg',
|
||||||
|
CRAFT: 'archivos/calendarios/craftnight.jpg',
|
||||||
|
BLANCO: 'archivos/calendarios/dia_en_blanco.jpg'
|
||||||
|
};
|
||||||
|
|
||||||
|
const root = document.getElementById('cal-root');
|
||||||
|
const title = document.querySelector('.cal-title');
|
||||||
|
const btnPrev = document.querySelector('.cal-prev');
|
||||||
|
const btnNext = document.querySelector('.cal-next');
|
||||||
|
|
||||||
|
let view = new Date(); // hoy
|
||||||
|
view.setDate(1); // primer día del mes
|
||||||
|
|
||||||
|
function buildCalendar(date){
|
||||||
|
// limpiar
|
||||||
|
root.innerHTML = '';
|
||||||
|
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = date.getMonth();
|
||||||
|
title.textContent = monthNames[month] + ' ' + year;
|
||||||
|
|
||||||
|
// semanas empiezan en lunes
|
||||||
|
const first = new Date(year, month, 1);
|
||||||
|
let startIndex = (first.getDay() + 6) % 7; // convertir domingo=0 a final
|
||||||
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||||
|
|
||||||
|
// encontrar todos los viernes del mes (viernes = 4 si lunes es 0)
|
||||||
|
const fridays = [];
|
||||||
|
for (let d = 1; d <= daysInMonth; d++){
|
||||||
|
const wd = (new Date(year, month, d).getDay() + 6) % 7;
|
||||||
|
if (wd === 4) fridays.push(d);
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstFri = fridays[0];
|
||||||
|
const secondFri = fridays[1];
|
||||||
|
const thirdFri = fridays[2];
|
||||||
|
const lastFri = fridays[fridays.length - 1];
|
||||||
|
|
||||||
|
// cabecera de días
|
||||||
|
const head = document.createElement('div');
|
||||||
|
head.className = 'cal-row cal-head';
|
||||||
|
weekdayNames.forEach(w => {
|
||||||
|
const cell = document.createElement('div');
|
||||||
|
cell.className = 'cal-cell cal-head-cell';
|
||||||
|
cell.textContent = w;
|
||||||
|
head.appendChild(cell);
|
||||||
|
});
|
||||||
|
root.appendChild(head);
|
||||||
|
|
||||||
|
// grid de días (6 filas x 7 cols para estabilidad)
|
||||||
|
let day = 1 - startIndex;
|
||||||
|
for (let r = 0; r < 6; r++){
|
||||||
|
const row = document.createElement('div');
|
||||||
|
row.className = 'cal-row';
|
||||||
|
for (let c = 0; c < 7; c++){
|
||||||
|
const cell = document.createElement('div');
|
||||||
|
cell.className = 'cal-cell';
|
||||||
|
|
||||||
|
if (day >= 1 && day <= daysInMonth){
|
||||||
|
const num = document.createElement('span');
|
||||||
|
num.className = 'cal-daynum';
|
||||||
|
num.textContent = day;
|
||||||
|
cell.appendChild(num);
|
||||||
|
|
||||||
|
// etiquetar eventos de los viernes
|
||||||
|
const isFriday = ((new Date(year, month, day).getDay() + 6) % 7) === 4;
|
||||||
|
if (isFriday){
|
||||||
|
let kind = '';
|
||||||
|
if (day === firstFri){ kind = 'OPENDAY'; }
|
||||||
|
else if (day === secondFri){ kind = 'ARTLAB'; }
|
||||||
|
else if (day === thirdFri){ kind = 'CRAFT'; }
|
||||||
|
else if (day === lastFri){ kind = 'BLANCO'; }
|
||||||
|
|
||||||
|
if (kind){
|
||||||
|
cell.classList.add('cal-event');
|
||||||
|
cell.dataset.kind = kind;
|
||||||
|
cell.style.setProperty('--bgimg', `url("${IMAGES[kind]}")`);
|
||||||
|
|
||||||
|
const label = document.createElement('span');
|
||||||
|
label.className = 'cal-label';
|
||||||
|
label.textContent = (
|
||||||
|
kind === 'OPENDAY' ? 'OPEN DAY' :
|
||||||
|
kind === 'ARTLAB' ? 'ARTLAB' :
|
||||||
|
kind === 'CRAFT' ? 'CRAFT NIGHT' :
|
||||||
|
'DÍA EN BLANCO'
|
||||||
|
);
|
||||||
|
cell.appendChild(label);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
cell.classList.add('cal-empty');
|
||||||
|
}
|
||||||
|
|
||||||
|
row.appendChild(cell);
|
||||||
|
day++;
|
||||||
|
}
|
||||||
|
root.appendChild(row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function shiftMonth(delta){
|
||||||
|
view.setMonth(view.getMonth() + delta);
|
||||||
|
buildCalendar(view);
|
||||||
|
}
|
||||||
|
|
||||||
|
btnPrev.addEventListener('click', () => shiftMonth(-1));
|
||||||
|
btnNext.addEventListener('click', () => shiftMonth(1));
|
||||||
|
|
||||||
|
buildCalendar(view);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- PRÓXIMOS EVENTOS (3 huecos vacíos) -->
|
||||||
|
<section class="panel" aria-label="Próximos eventos">
|
||||||
|
<h2>Próximos eventos</h2>
|
||||||
|
<ul class="event-list">
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">TBA #1</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Evento por anunciar">
|
||||||
|
<div class="meta"><span class="datetime">por anunciar — 2025</span></div>
|
||||||
|
</li>
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">TBA #2</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Evento por anunciar">
|
||||||
|
<div class="meta"><span class="datetime">por anunciar — 2025</span></div>
|
||||||
|
</li>
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">TBA #3</h3>
|
||||||
|
<img class="poster" src="imagenes/lel.jpeg" alt="Evento por anunciar">
|
||||||
|
<div class="meta"><span class="datetime">por anunciar — 2025</span></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- EVENTOS REALIZADOS (del más reciente al más antiguo) -->
|
||||||
|
<section class="panel" aria-label="Eventos realizados">
|
||||||
|
<h2>Eventos realizados</h2>
|
||||||
|
|
||||||
|
<ul class="event-list">
|
||||||
|
|
||||||
|
<!-- 2025 -->
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">CRYPTOPARTY — El arte del cifrado</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Cryptoparty">
|
||||||
|
<div class="meta"><span class="datetime">Mayo 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Sistemas operativos — abre el capó de tu Linux</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Sistemas operativos Linux">
|
||||||
|
<div class="meta"><span class="datetime">Mayo 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Bienvenidas a vuestro OASIS — INSTALL PARTY</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Install party OASIS">
|
||||||
|
<div class="meta"><span class="datetime">Mayo 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">OpenWrt — ¡haz tu Wi-Fi libre!</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="OpenWrt Wi-Fi libre">
|
||||||
|
<div class="meta"><span class="datetime">Abril 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">CINEFORUM</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Cineforum">
|
||||||
|
<div class="meta"><span class="datetime">Abril 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Fontanería de Linux — SSH y certificados</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Fontanería Linux">
|
||||||
|
<div class="meta"><span class="datetime">Abril 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Self-hosting de mensajería — Taller final (Matrix & SimpleX)</h3>
|
||||||
|
<img class="poster" src="imagenes/xmpp.jpeg" alt="Self-hosting mensajería">
|
||||||
|
<div class="meta"><span class="datetime">Abril–Mayo 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">IA libre — Autómatas y entrenamiento propio (Taller 2)</h3>
|
||||||
|
<img class="poster" src="imagenes/charla_ia.jpg" alt="IA libre taller">
|
||||||
|
<div class="meta"><span class="datetime">Abril–Mayo 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">KAFETA CYBERPUNK 2</h3>
|
||||||
|
<img class="poster" src="imagenes/cyberpunk2.jpg" alt="Kafeta cyberpunk 2">
|
||||||
|
<div class="meta"><span class="datetime">Enero 2025</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- 2024 -->
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Proxmox install party!</h3>
|
||||||
|
<img class="poster" src="imagenes/proxmox.jpeg" alt="Proxmox install party">
|
||||||
|
<div class="meta"><span class="datetime">Diciembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Introducción a la inteligencia artificial libre</h3>
|
||||||
|
<img class="poster" src="imagenes/charla_ia.jpg" alt="Introducción IA libre">
|
||||||
|
<div class="meta"><span class="datetime">Diciembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Cineforum: HACKERWARS</h3>
|
||||||
|
<img class="poster" src="imagenes/cineforum.jpeg" alt="Hackerwars cineforum">
|
||||||
|
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Install party — ¡fuck systemd!</h3>
|
||||||
|
<img class="poster" src="imagenes/charla33.jpg" alt="Install party systemd">
|
||||||
|
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Libera y securiza tu teléfono</h3>
|
||||||
|
<img class="poster" src="imagenes/charla_moviles.jpg" alt="Privacidad en teléfonos">
|
||||||
|
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Federa y libera tus comunicaciones — Fediverso + XMPP</h3>
|
||||||
|
<img class="poster" src="imagenes/fedi_fun.jpeg" alt="Fediverso y XMPP">
|
||||||
|
<div class="meta"><span class="datetime">Noviembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de webs estáticas en HUGO</h3>
|
||||||
|
<img class="poster" src="imagenes/hugo.jpeg" alt="Taller HUGO">
|
||||||
|
<div class="meta"><span class="datetime">Octubre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Día de bienvenida</h3>
|
||||||
|
<img class="poster" src="imagenes/bienvenida.jpg" alt="Día de bienvenida">
|
||||||
|
<div class="meta"><span class="datetime">Septiembre 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Fiesta Julian Assange</h3>
|
||||||
|
<img class="poster" src="imagenes/julian.jpeg" alt="Fiesta Julian Assange">
|
||||||
|
<div class="meta"><span class="datetime">3 de julio de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Cineforum: Running with the Devil (John McAfee)</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="McAfee cineforum">
|
||||||
|
<div class="meta"><span class="datetime">27 de junio de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de autodefensa digital para activistas</h3>
|
||||||
|
<img class="poster" src="imagenes/autodefensa.jpeg" alt="Autodefensa digital">
|
||||||
|
<div class="meta"><span class="datetime">22 de mayo de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de ganzuado y cerraduras esenciales</h3>
|
||||||
|
<img class="poster" src="imagenes/ganzuando.jpeg" alt="Ganzuado y cerraduras">
|
||||||
|
<div class="meta"><span class="datetime">4 de mayo de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Kaffeta: >_ CYBERPUNK ;-)</h3>
|
||||||
|
<img class="poster" src="imagenes/cyberpunk.jpeg" alt="Kafeta Cyberpunk">
|
||||||
|
<div class="meta"><span class="datetime">19 de abril de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de privacidad y seguridad — sesión 3</h3>
|
||||||
|
<img class="poster" src="imagenes/defensa_personal3.jpeg" alt="Privacidad y seguridad 3">
|
||||||
|
<div class="meta"><span class="datetime">5 de abril de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Interceptando llamadas de aplicaciones Android</h3>
|
||||||
|
<img class="poster" src="imagenes/apis_moviles.jpeg" alt="APIs móviles / Android">
|
||||||
|
<div class="meta"><span class="datetime">Marzo 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de impresiones 3D</h3>
|
||||||
|
<img class="poster" src="imagenes/llaves.jpeg" alt="Impresiones 3D">
|
||||||
|
<div class="meta"><span class="datetime">Marzo 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Rebelión de los artefactos</h3>
|
||||||
|
<img class="poster" src="imagenes/lols.jpeg" alt="Rebelión de los artefactos">
|
||||||
|
<div class="meta"><span class="datetime">Marzo 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Cineforum: El Quinto Poder (Julian Assange)</h3>
|
||||||
|
<img class="poster" src="imagenes/julian_cineforum.jpeg" alt="El Quinto Poder">
|
||||||
|
<div class="meta"><span class="datetime">1 de marzo de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">HACKELARRE</h3>
|
||||||
|
<img class="poster" src="imagenes/hacklab_foto.jpeg" alt="Hackelarre">
|
||||||
|
<div class="meta"><span class="datetime">Febrero 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de privacidad y seguridad (Ordenadores)</h3>
|
||||||
|
<img class="poster" src="imagenes/defensa_personal2.jpeg" alt="Privacidad Ordenadores">
|
||||||
|
<div class="meta"><span class="datetime">2 de febrero de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller de privacidad y seguridad (Teléfonos)</h3>
|
||||||
|
<img class="poster" src="imagenes/defensa_personal3.jpeg" alt="Privacidad Teléfonos">
|
||||||
|
<div class="meta"><span class="datetime">15 de marzo de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Cineforum: Aaron Swartz (The Internet's Own Boy)</h3>
|
||||||
|
<img class="poster" src="imagenes/internet_boy.jpeg" alt="Aaron Swartz cineforum">
|
||||||
|
<div class="meta"><span class="datetime">19 de enero de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Thinktank: Dinámica de grupo, cacharreo HARD-WARES</h3>
|
||||||
|
<img class="poster" src="imagenes/primer_taller.jpeg" alt="Thinktank cacharreo">
|
||||||
|
<div class="meta"><span class="datetime">5 de enero de 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Nos vamos juntas al fediverso (Mastodon)</h3>
|
||||||
|
<img class="poster" src="imagenes/fediversoi.jpeg" alt="Nos vamos al fediverso">
|
||||||
|
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Charla: Antropología hacker</h3>
|
||||||
|
<img class="poster" src="imagenes/charla33.jpg" alt="Antropología hacker">
|
||||||
|
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller 2 — creación de webs estáticas con Hugo</h3>
|
||||||
|
<img class="poster" src="imagenes/hugo.jpeg" alt="Hugo estáticas">
|
||||||
|
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Taller Proxmox</h3>
|
||||||
|
<img class="poster" src="imagenes/proxmox.jpeg" alt="Taller Proxmox">
|
||||||
|
<div class="meta"><span class="datetime">Enero 2024</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- 2023 -->
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Cineforum: Hackerwars & taller sencillo de Linux</h3>
|
||||||
|
<img class="poster" src="imagenes/cineforum.jpg" alt="Hackerwars & Linux">
|
||||||
|
<div class="meta"><span class="datetime">22 de diciembre de 2023</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="event">
|
||||||
|
<h3 class="title">Cineforum: Anonymous — The Story of Anonymous Hacktivist</h3>
|
||||||
|
<img class="poster" src="imagenes/" alt="Anonymous cineforum">
|
||||||
|
<div class="meta"><span class="datetime">8 de diciembre de 2023</span></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer class="sub-footer">
|
||||||
|
<div class="inner">© Hacklab la Raíz — CC BY-NC-SA 4.0</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
175
hacker_types.css
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000000;
|
||||||
|
color: #00ff00;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xmind-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1400px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.central-button {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-column, .right-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xmind-button {
|
||||||
|
background-color: #00ff00;
|
||||||
|
color: #000000;
|
||||||
|
padding: 10px 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
font-size: 2.3em;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 4px #008000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xmind-button:hover {
|
||||||
|
background-color: #ff69b4;
|
||||||
|
color: #00ff00;
|
||||||
|
box-shadow: 0 8px #00ff00, 0 0 15px #ff69b4;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Añadir este CSS para las líneas de conexión */
|
||||||
|
.horizontal-line {
|
||||||
|
position: absolute;
|
||||||
|
width: 100px; /* Puedes ajustar el ancho según lo necesites */
|
||||||
|
height: 2px;
|
||||||
|
background-color: #ff69b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-line.left {
|
||||||
|
left: -100px; /* Ajusta esta posición según el espacio entre el botón central y la columna izquierda */
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-line.right {
|
||||||
|
right: -100px; /* Ajusta esta posición según el espacio entre el botón central y la columna derecha */
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: -100%; /* Posición inicial fuera de pantalla */
|
||||||
|
width: 50%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #000000;
|
||||||
|
color: #00ff00;
|
||||||
|
border-right: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 0 20px #00ff00;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box:target {
|
||||||
|
left: 0; /* Mueve la info-box a la pantalla cuando se selecciona */
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content h2 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: #ff69b4;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content p {
|
||||||
|
font-size: 1em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content ul li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content ul li a {
|
||||||
|
color: #00ff00;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content ul li a:hover {
|
||||||
|
color: #ff69b4;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #00ff00;
|
||||||
|
color: #000000;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
box-shadow: 0 4px #008000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button:hover {
|
||||||
|
background-color: #ff69b4;
|
||||||
|
color: #00ff00;
|
||||||
|
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
/* Para pantallas aún más pequeñas, como móviles de hasta 480px */
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.xmind-container {
|
||||||
|
flex-direction: row; /* Mantiene la estructura horizontal */
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-column, .right-column {
|
||||||
|
gap: 1.2em; /* Reduce el espacio entre los botones */
|
||||||
|
margin: 0 1em; /* Reduce el margen entre columnas */
|
||||||
|
}
|
||||||
|
|
||||||
|
.xmind-button {
|
||||||
|
font-size: 1.1em; /* Reduce el tamaño del texto para pantallas pequeñas */
|
||||||
|
padding: 4px 10px; /* Hace los botones más compactos */
|
||||||
|
width: auto; /* Mantiene el tamaño automático */
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-line.left, .horizontal-line.right {
|
||||||
|
width: 40px; /* Hace las líneas más cortas en móviles pequeños */
|
||||||
|
}
|
||||||
|
|
||||||
|
.central-button {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
355
hacker_types.html
Normal file
|
|
@ -0,0 +1,355 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Hacker Types</title>
|
||||||
|
<link rel="stylesheet" href="hacker_types.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="xmind-container">
|
||||||
|
<div class="central-button">
|
||||||
|
<a href="#ethics" class="xmind-button">HACKERS</a>
|
||||||
|
<div class="horizontal-line left"></div>
|
||||||
|
<div class="horizontal-line right"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left-column">
|
||||||
|
<a href="#pentesters" class="xmind-button">PENTESTERS</a>
|
||||||
|
<a href="#netactivist" class="xmind-button">NETACTIVIST</a>
|
||||||
|
<a href="#retrohackers" class="xmind-button">RETROHACKERS</a>
|
||||||
|
<a href="#biohackers" class="xmind-button">BIOHACKERS</a>
|
||||||
|
<a href="#warez" class="xmind-button">WAREZ</a>
|
||||||
|
<a href="#defacers" class="xmind-button">DEFACERS</a>
|
||||||
|
</div>
|
||||||
|
<div class="right-column">
|
||||||
|
<a href="#sneakers" class="xmind-button">SNEAKERS</a>
|
||||||
|
<a href="#lockpickers" class="xmind-button">LOCKPICKERS</a>
|
||||||
|
<a href="#zappers" class="xmind-button">ZAPPERS</a>
|
||||||
|
<a href="#automatas" class="xmind-button">AUTOMATAS</a>
|
||||||
|
<a href="#dosers" class="xmind-button">DOSERS</a>
|
||||||
|
<a href="#coders" class="xmind-button">CODERS</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ETHICS -->
|
||||||
|
<div class="info-box" id="ethics">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>ÉTICA HACKER</h2>
|
||||||
|
<p>El concepto de ética hacker fue popularizado por Steven Levy en su libro "Hackers: Heroes of the Computer Revolution". La ética hacker se basa en la creencia de que la información debe ser libre, que el acceso a computadoras y sus conocimientos debería ser ilimitado, y que los hackers tienen el deber de compartir su conocimiento con la comunidad.</p>
|
||||||
|
<p>Principios de la ética hacker:</p>
|
||||||
|
<ul>
|
||||||
|
<li>El acceso a las computadoras —y a cualquier cosa que pueda enseñarte algo sobre cómo funciona el mundo— debería ser ilimitado y total.</li>
|
||||||
|
<li>La información debería ser libre.</li>
|
||||||
|
<li>Desconfía de la autoridad, promueve la descentralización.</li>
|
||||||
|
<li>Los hackers deberían ser juzgados por su hacking, no por criterios como títulos académicos, edad, raza o posición.</li>
|
||||||
|
<li>Puedes crear arte y belleza en una computadora.</li>
|
||||||
|
<li>Las computadoras pueden mejorar tu vida y las de otros.</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PENTESTERS -->
|
||||||
|
<div class="info-box" id="pentesters">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>PENTESTERS</h2>
|
||||||
|
<p>Pentesters, o hackers éticos, se especializan en identificar y explotar vulnerabilidades en sistemas informáticos. Trabajan para asegurar que las redes, aplicaciones y sistemas sean resistentes a los ataques maliciosos. Su objetivo es encontrar y corregir fallos de seguridad antes de que los atacantes puedan explotarlos.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Auditorías de seguridad en redes corporativas usando <strong>Nmap</strong> para mapeo de redes.</li>
|
||||||
|
<li>Pruebas de penetración en aplicaciones web con <strong>OWASP ZAP</strong> y <strong>Burp Suite</strong>.</li>
|
||||||
|
<li>Evaluación de seguridad en infraestructuras Wi-Fi utilizando <strong>aircrack-ng</strong> y <strong>Kismet</strong>.</li>
|
||||||
|
<li>Uso de <strong>Metasploit Framework</strong> para la explotación de vulnerabilidades conocidas.</li>
|
||||||
|
<li>Automatización de pruebas de seguridad mediante <strong>Selenium</strong> para pruebas dinámicas.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/nmap/nmap" target="_blank">Nmap en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/zaproxy/zaproxy" target="_blank">OWASP ZAP en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/aircrack-ng/aircrack-ng" target="_blank">Aircrack-ng en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/rapid7/metasploit-framework" target="_blank">Metasploit Framework en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/SeleniumHQ/selenium" target="_blank">Selenium en GitHub</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NETACTIVIST -->
|
||||||
|
<div class="info-box" id="netactivist">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>NETACTIVIST</h2>
|
||||||
|
<p>Netactivists son hackers que luchan por la libertad en la red, la privacidad y los derechos humanos digitales. Su trabajo incluye el desarrollo de herramientas para evitar la censura, proteger la privacidad en línea, y organizar campañas de activismo digital. Son defensores del acceso abierto y la descentralización de la información.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Desarrollo de software de anonimato como <strong>Tor</strong> para proteger la privacidad de los usuarios.</li>
|
||||||
|
<li>Campañas de concienciación sobre la vigilancia masiva y la importancia de la encriptación.</li>
|
||||||
|
<li>Participación en proyectos de código abierto para la protección de derechos digitales.</li>
|
||||||
|
<li>Creación de redes seguras utilizando <strong>VPNs</strong> como <strong>OpenVPN</strong>.</li>
|
||||||
|
<li>Fomento de la descentralización mediante el uso de tecnologías como <strong>IPFS</strong> (InterPlanetary File System).</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/torproject/tor" target="_blank">Tor Project en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/OpenVPN/openvpn" target="_blank">OpenVPN en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/ipfs/ipfs" target="_blank">IPFS en GitHub</a></li>
|
||||||
|
<li><a href="https://protonmail.com/" target="_blank">ProtonMail</a></li>
|
||||||
|
<li><a href="https://signal.org/" target="_blank">Signal Messenger</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RETROHACKERS -->
|
||||||
|
<div class="info-box" id="retrohackers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>RETROHACKERS</h2>
|
||||||
|
<p>Retrohackers son apasionados por la tecnología antigua. Se dedican a revivir y reutilizar hardware y software obsoletos. Su trabajo incluye la restauración de computadoras vintage, la programación en lenguajes antiguos y la creación de emuladores para preservar software histórico.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Restauración de computadoras clásicas como el Commodore 64 y la Apple II.</li>
|
||||||
|
<li>Creación de emuladores para consolas y sistemas operativos antiguos.</li>
|
||||||
|
<li>Programación en lenguajes como Assembly y BASIC para dispositivos retro.</li>
|
||||||
|
<li>Desarrollo de nuevos periféricos para hardware antiguo.</li>
|
||||||
|
<li>Participación en la preservación digital de videojuegos y software antiguos.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/VICE-Team" target="_blank">VICE - Emulador de Commodore en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/apple2online" target="_blank">Apple II Online Repository</a></li>
|
||||||
|
<li><a href="https://github.com/ZXDunny" target="_blank">ZX Spectrum Tools en GitHub</a></li>
|
||||||
|
<li><a href="https://www.scummvm.org/" target="_blank">ScummVM - Emulador de Juegos de Aventura</a></li>
|
||||||
|
<li><a href="https://github.com/qemu/qemu" target="_blank">QEMU - Emulador y Virtualizador</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BIOHACKERS -->
|
||||||
|
<div class="info-box" id="biohackers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>BIOHACKERS</h2>
|
||||||
|
<p>Biohackers combinan biología y tecnología para modificar o mejorar funciones biológicas. Esto puede incluir desde la modificación genética hasta el uso de dispositivos implantables para monitorizar y mejorar la salud humana. Los biohackers suelen explorar los límites de la biotecnología para mejorar la calidad de vida.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Modificación genética utilizando técnicas como CRISPR para alterar el ADN.</li>
|
||||||
|
<li>Implantes de chips RFID para control de acceso y otras funcionalidades.</li>
|
||||||
|
<li>Desarrollo de dispositivos wearable para monitorización continua de la salud.</li>
|
||||||
|
<li>Investigación en biología sintética para la creación de organismos personalizados.</li>
|
||||||
|
<li>Uso de dispositivos biométricos para mejorar la seguridad personal.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/CRISPR" target="_blank">CRISPR Tools en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/biopython/biopython" target="_blank">Biopython en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/openbci/openbci" target="_blank">OpenBCI - Interfaz Cerebro-Computadora</a></li>
|
||||||
|
<li><a href="https://github.com/diyhplusbio" target="_blank">DIY Biohacking en GitHub</a></li>
|
||||||
|
<li><a href="https://www.grindhousewetware.com/" target="_blank">Grindhouse Wetware - Implantes Biomédicos</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WAREZ -->
|
||||||
|
<div class="info-box" id="warez">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>WAREZ</h2>
|
||||||
|
<p>Warez es una subcultura dentro del hacking que se enfoca en la distribución y el intercambio de software, juegos y medios digitales pirateados. Aunque su actividad es ilegal, los warez siguen siendo prevalentes en ciertos círculos de hackers que ven la compartición de software como un derecho.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Cracking de software comercial para eliminar protecciones de copia.</li>
|
||||||
|
<li>Distribución de juegos y software a través de redes peer-to-peer.</li>
|
||||||
|
<li>Desarrollo de parches y keygens para habilitar el uso de software pirateado.</li>
|
||||||
|
<li>Creación de servidores privados para compartir archivos de manera anónima.</li>
|
||||||
|
<li>Exploración de vulnerabilidades en DRM (Digital Rights Management).</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/pymp/crackme" target="_blank">CrackMe Challenges en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/steven-mayall/AlbumArtDownloader" target="_blank">Album Art Downloader</a></li>
|
||||||
|
<li><a href="https://github.com/qbittorrent/qBittorrent" target="_blank">qBittorrent - Cliente P2P</a></li>
|
||||||
|
<li><a href="https://github.com/aria2/aria2" target="_blank">Aria2 - Descargador Multi-Protocolo</a></li>
|
||||||
|
<li><a href="https://github.com/ytdl-org/youtube-dl" target="_blank">youtube-dl - Descargador de Videos</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DEFACERS -->
|
||||||
|
<div class="info-box" id="defacers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>DEFACERS</h2>
|
||||||
|
<p>Defacers son hackers que alteran el contenido de sitios web, usualmente como forma de protesta o para enviar un mensaje. Estos ataques suelen ser notorios y están diseñados para llamar la atención sobre un tema específico. Aunque muchos defacers lo ven como una forma de activismo, la mayoría de las veces estas actividades son ilegales.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Alteración de la página principal de sitios web gubernamentales o corporativos.</li>
|
||||||
|
<li>Modificación de contenido web para destacar vulnerabilidades de seguridad.</li>
|
||||||
|
<li>Creación de scripts automatizados para realizar defacements en masa.</li>
|
||||||
|
<li>Desarrollo de ataques de desfiguración contra sitios con baja seguridad.</li>
|
||||||
|
<li>Publicación de mensajes de protesta en sitios web comprometidos.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/v1s1t0r1sh3r3/airgeddon" target="_blank">Airgeddon</a></li>
|
||||||
|
<li><a href="https://github.com/sqlmapproject/sqlmap" target="_blank">SQLmap - Inyección SQL</a></li>
|
||||||
|
<li><a href="https://github.com/maK-/sqlninja" target="_blank">SQLNinja</a></li>
|
||||||
|
<li><a href="https://github.com/codingo/Reconnoitre" target="_blank">Reconnoitre - Framework de Reconocimiento</a></li>
|
||||||
|
<li><a href="https://github.com/OJ/gobuster" target="_blank">Gobuster - Fuzzing y Fuerza Bruta</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SNEAKERS -->
|
||||||
|
<div class="info-box" id="sneakers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>SNEAKERS</h2>
|
||||||
|
<p>Los Sneakers son expertos en ingeniería social y técnicas de intrusión. Se especializan en obtener acceso a sistemas restringidos utilizando métodos no convencionales, como engañar a las personas para que revelen información confidencial o acceder físicamente a lugares seguros.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<a href="ingenieria_social.html" class="button">INGENIERIA SOCIAL</a>
|
||||||
|
<li>Recopilación de información mediante OSINT (Open Source Intelligence).</li>
|
||||||
|
<li>Ingeniería social para obtener credenciales de acceso.</li>
|
||||||
|
<li>Penetración en instalaciones físicas mediante lockpicking y bypass de seguridad.</li>
|
||||||
|
<li>Creación de escenarios de phishing para capturar credenciales.</li>
|
||||||
|
<li>Uso de herramientas como Maltego para mapear redes sociales y relaciones.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/laramies/theHarvester" target="_blank">theHarvester - Recolección de Emails</a></li>
|
||||||
|
<li><a href="https://github.com/laramies/metagoofil" target="_blank">Metagoofil - Extracción de Metadatos</a></li>
|
||||||
|
<li><a href="https://github.com/joaomatosf/jexboss" target="_blank">JexBoss - Verificador de Exploits JBoss</a></li>
|
||||||
|
<li><a href="https://github.com/guelfoweb/knock" target="_blank">Knock - Fuerza Bruta de Subdominios</a></li>
|
||||||
|
<li><a href="https://github.com/ThreatConnect-Inc/OSINT" target="_blank">OSINT Tools en GitHub</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LOCKPICKERS -->
|
||||||
|
<div class="info-box" id="lockpickers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>LOCKPICKERS</h2>
|
||||||
|
<p>Lockpickers son hackers que se especializan en el arte de abrir cerraduras sin la llave original. Utilizan herramientas como ganzúas, bump keys y otros dispositivos para sortear sistemas de seguridad física. Su conocimiento es valioso para la evaluación de la seguridad en instalaciones físicas.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Evaluación de cerraduras de alta seguridad para encontrar vulnerabilidades.</li>
|
||||||
|
<li>Desarrollo de herramientas y técnicas de ganzuado.</li>
|
||||||
|
<li>Realización de talleres de lockpicking para educar sobre la seguridad física.</li>
|
||||||
|
<li>Exploración de métodos para bypass de sistemas de seguridad.</li>
|
||||||
|
<li>Participación en competiciones de lockpicking para mejorar habilidades.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/jamesst20/SNAP_Pick_Guide" target="_blank">SNAP Lock Pick Guide</a></li>
|
||||||
|
<li><a href="https://github.com/hahwul/mad-metasploit" target="_blank">Mad Metasploit - Scripts de Hacking</a></li>
|
||||||
|
<li><a href="https://github.com/hasherezade/malware_training_vol1" target="_blank">Guía de Formación en Malware</a></li>
|
||||||
|
<li><a href="https://github.com/codingo/reconnoitre" target="_blank">Reconnoitre - Reconocimiento Automático</a></li>
|
||||||
|
<li><a href="https://github.com/jivoi/awesome-osint" target="_blank">Awesome OSINT - Recursos OSINT</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ZAPPERS -->
|
||||||
|
<div class="info-box" id="zappers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>ZAPPERS</h2>
|
||||||
|
<p>Zappers son hackers que se centran en la seguridad y el anonimato en línea. Utilizan herramientas avanzadas para evitar la vigilancia, asegurar comunicaciones, y proteger la privacidad en redes hostiles. Son expertos en configurar y mantener entornos seguros para evitar la exposición de información sensible.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Configuración de entornos de navegación anónima utilizando VPNs y Tor.</li>
|
||||||
|
<li>Desarrollo de herramientas de cifrado para proteger datos sensibles.</li>
|
||||||
|
<li>Realización de auditorías de seguridad en infraestructuras de red.</li>
|
||||||
|
<li>Implementación de medidas de seguridad en servidores expuestos a internet.</li>
|
||||||
|
<li>Creación de túneles seguros para la transferencia de datos confidenciales.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/veracrypt/VeraCrypt" target="_blank">VeraCrypt en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/torproject/tor" target="_blank">Tor Browser en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/mullvad/mullvadvpn-app" target="_blank">Mullvad VPN en GitHub</a></li>
|
||||||
|
<li><a href="https://github.com/cryptomator/cryptomator" target="_blank">Cryptomator - Cifrado de Archivos en la Nube</a></li>
|
||||||
|
<li><a href="https://github.com/ProtonVPN" target="_blank">ProtonVPN en GitHub</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AUTOMATAS -->
|
||||||
|
<div class="info-box" id="automatas">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>AUTOMATAS</h2>
|
||||||
|
<p>Automatas son hackers que se especializan en la automatización de tareas repetitivas mediante scripts y herramientas automatizadas. Su trabajo incluye desde la automatización de pruebas de seguridad hasta la creación de bots que realizan tareas complejas de forma autónoma, mejorando la eficiencia y precisión en diversas áreas.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Creación de bots para la recolección automática de datos en redes sociales.</li>
|
||||||
|
<li>Automatización de pruebas de seguridad utilizando scripts en Bash o Python.</li>
|
||||||
|
<li>Desarrollo de sistemas de automatización para procesos industriales.</li>
|
||||||
|
<li>Implementación de flujos de trabajo automatizados para DevOps.</li>
|
||||||
|
<li>Uso de scripts automatizados para realizar auditorías de seguridad.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/puppeteer/puppeteer" target="_blank">Puppeteer - Automatización de Navegadores</a></li>
|
||||||
|
<li><a href="https://github.com/ansible/ansible" target="_blank">Ansible - Automatización de Infraestructura</a></li>
|
||||||
|
<li><a href="https://github.com/SeleniumHQ/selenium" target="_blank">Selenium - Automatización de Pruebas</a></li>
|
||||||
|
<li><a href="https://github.com/StackStorm/st2" target="_blank">StackStorm - Automatización de DevOps</a></li>
|
||||||
|
<li><a href="https://github.com/psf/requests" target="_blank">Requests - HTTP para Humanos (Python)</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DOSERS -->
|
||||||
|
<div class="info-box" id="dosers">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>DOSERS</h2>
|
||||||
|
<p>Dosers son hackers que se especializan en ataques de denegación de servicio (DoS). Estos ataques están diseñados para sobrecargar un sistema o red hasta el punto en que los servicios legítimos ya no pueden ser atendidos, causando una interrupción significativa.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Desarrollo de herramientas de DoS y DDoS para pruebas de resistencia en servidores.</li>
|
||||||
|
<li>Simulación de ataques para evaluar la capacidad de respuesta de sistemas críticos.</li>
|
||||||
|
<li>Creación de contramedidas para mitigar los efectos de los ataques DoS.</li>
|
||||||
|
<li>Investigación y desarrollo de técnicas avanzadas para ataques DDoS.</li>
|
||||||
|
<li>Automatización de ataques DoS en entornos controlados para investigación.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/gkbrk/slowloris" target="_blank">Slowloris - Ataque de Saturación de Conexiones</a></li>
|
||||||
|
<li><a href="https://github.com/NewEraCracker/LOIC" target="_blank">LOIC - Low Orbit Ion Cannon</a></li>
|
||||||
|
<li><a href="https://github.com/grafov/hulk" target="_blank">HULK - Herramienta de Ataque HTTP</a></li>
|
||||||
|
<li><a href="https://github.com/NodeMixaholic/ddosify" target="_blank">DDoSify - Pruebas de Carga y DoS</a></li>
|
||||||
|
<li><a href="https://github.com/epsylon/ufonet" target="_blank">UFONet - DDoS contra Aplicaciones Web</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CODERS -->
|
||||||
|
<div class="info-box" id="coders">
|
||||||
|
<div class="info-content">
|
||||||
|
<h2>CODERS</h2>
|
||||||
|
<p>Coders son hackers que se enfocan en la creación de software y scripts para explotar vulnerabilidades o mejorar la seguridad. Son expertos en lenguajes de programación y scripting, y su trabajo es crucial para el desarrollo de herramientas utilizadas por otros hackers.</p>
|
||||||
|
<p>Proyectos comunes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Desarrollo de exploits para vulnerabilidades descubiertas recientemente.</li>
|
||||||
|
<li>Contribución a proyectos de código abierto enfocados en la seguridad.</li>
|
||||||
|
<li>Automatización de tareas de seguridad con scripts en Python, Bash, o PowerShell.</li>
|
||||||
|
<li>Creación de herramientas personalizadas para pruebas de penetración.</li>
|
||||||
|
<li>Desarrollo de soluciones innovadoras para problemas de seguridad emergentes.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Herramientas recomendadas:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/rapid7/metasploit-framework" target="_blank">Metasploit Framework</a></li>
|
||||||
|
<li><a href="https://github.com/rebootuser/LinEnum" target="_blank">LinEnum - Escalada de Privilegios en Linux</a></li>
|
||||||
|
<li><a href="https://github.com/PowerShellMafia/PowerSploit" target="_blank">PowerSploit - Herramientas de Post-explotación en PowerShell</a></li>
|
||||||
|
<li><a href="https://github.com/BC-SECURITY/Empire" target="_blank">Empire - Framework de Post-explotación</a></li>
|
||||||
|
<li><a href="https://github.com/securestate/king-phisher" target="_blank">King Phisher - Framework de Phishing</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="#close" class="close-button">Cerrar</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
120
hackers.html
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
<!-- hackers.html -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>Hacklab la Raíz — Projects</title>
|
||||||
|
<link rel="icon" type="image/png" href="imagenes/hacklab.jpeg">
|
||||||
|
<link rel="stylesheet" href="subpages.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<!-- CABECERA -->
|
||||||
|
<header class="sub-header">
|
||||||
|
<div class="inner">
|
||||||
|
<h1>HACKLAB LA RAÍZ</h1>
|
||||||
|
<p class="tagline">Proyectos activos // En curso // Infraestructura</p>
|
||||||
|
<nav class="crumbs">
|
||||||
|
<a href="index.html">home</a> · projects
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- CONTENIDO -->
|
||||||
|
<main class="content">
|
||||||
|
|
||||||
|
<!-- NAV RÁPIDO (como en eventos/contacto) -->
|
||||||
|
<section class="panel" aria-label="Navegación rápida">
|
||||||
|
<p style="text-align:center;">
|
||||||
|
<a href="index.html" class="button">Home</a>
|
||||||
|
•
|
||||||
|
<a href="eventos.html" class="button">Events</a>
|
||||||
|
•
|
||||||
|
<a href="projects.html" class="button">Projects</a>
|
||||||
|
•
|
||||||
|
<a href="hacker_types.html" class="button">Tribes</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HACKER ETHIC — Steven Levy -->
|
||||||
|
<section class="panel" aria-label="Hacker Ethic">
|
||||||
|
<h2>Hacker Ethic — Steven Levy</h2>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3 class="title">1) El acceso a los ordenadores debe ser ilimitado y total</h3>
|
||||||
|
<blockquote>
|
||||||
|
"El acceso a los ordenadores —y a cualquier cosa que pueda enseñarte cómo funciona el mundo— debe ser ilimitado y total. ¡Ríndete siempre al imperativo de aprender haciendo (Hands-On)!"
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
Acceso para desarmar, aprender, reparar y mejorar sistemas. El acceso impulsa la expansión tecnológica.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3 class="title">2) Toda la información debería ser libre</h3>
|
||||||
|
<blockquote>
|
||||||
|
"Toda la información debería ser libre."
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
Intercambio libre para facilitar la creatividad y la mejora de sistemas. "Libre" como en sin restricciones de acceso (no precio).
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3 class="title">3) Desconfía de la autoridad — promueve la descentralización</h3>
|
||||||
|
<blockquote>
|
||||||
|
"Desconfía de la autoridad — promueve la descentralización."
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
Favorecer sistemas abiertos, sin barreras entre personas y conocimiento; minimizar burocracias y puntos únicos de control.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3 class="title">4) Juzga a los hackers por su hacking</h3>
|
||||||
|
<blockquote>
|
||||||
|
"A los hackers se les debe juzgar por su hacking, no por criterios falsos como títulos, edad, raza o posición."
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
Mérito técnico por encima de credenciales o rasgos superficiales; comunidad meritocrática orientada a resultados.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3 class="title">5) Puedes crear arte y belleza con un ordenador</h3>
|
||||||
|
<blockquote>
|
||||||
|
"Puedes crear arte y belleza con un ordenador."
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
El código puede ser bello: soluciones elegantes, eficientes y bien compuestas como forma de arte técnico.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3 class="title">6) Los ordenadores pueden cambiar tu vida para mejor</h3>
|
||||||
|
<blockquote>
|
||||||
|
"Los ordenadores pueden cambiar tu vida para mejor."
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
Las computadoras amplían posibilidades y autonomía. Compartir esta experiencia mejora a la sociedad en su conjunto.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p style="text-align:center; margin-top:10px;">
|
||||||
|
<a class="button" href="https://en.wikipedia.org/wiki/Hacker_Ethic" target="_blank" rel="noopener">Más sobre Hacker Ethic</a>
|
||||||
|
•
|
||||||
|
<a class="button" href="https://en.wikipedia.org/wiki/Steven_Levy" target="_blank" rel="noopener">Steven Levy</a>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer class="sub-footer">
|
||||||
|
<div class="inner">© Hacklab la Raíz — CC BY-NC-SA 4.0</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
104
hacklab_laraiz_css
Executable file
|
|
@ -0,0 +1,104 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
color: #00ff00;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 800px;
|
||||||
|
border: 2px solid #00ff00;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
header marquee {
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 2.5em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event {
|
||||||
|
border: 1px solid #00ff00;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #00ff00;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons img {
|
||||||
|
width: 50px;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: #00ff00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo de los botones en la esquina superior izquierda */
|
||||||
|
.top-left-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px; /* Aumenta la separación entre los botones */
|
||||||
|
margin-bottom: 20px; /* Asegura que haya espacio entre los botones y el contenido debajo */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left-buttons .button {
|
||||||
|
background-color: #00ff00; /* Fondo verde */
|
||||||
|
color: #000000; /* Letra negra */
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Special Elite', 'Courier New', Courier, monospace;
|
||||||
|
font-size: 0.8em;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid #00ff00; /* Borde verde para definir mejor el botón */
|
||||||
|
box-shadow: 0 4px #008000; /* Sombra inicial para el botón */
|
||||||
|
transition: all 0.3s ease; /* Transición suave para cambios de estado */
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left-buttons .button:hover {
|
||||||
|
background-color: #ff69b4; /* Fondo rosa al hacer hover */
|
||||||
|
color: #00ff00; /* Letra verde al hacer hover */
|
||||||
|
box-shadow: 0 6px #00ff00, 0 0 10px #ff69b4; /* Sombra verde y resplandor */
|
||||||
|
transform: translateY(-2px); /* Levemente hacia arriba para el efecto de "sobresalir" */
|
||||||
|
}
|
||||||
|
|
||||||
BIN
imagenes/3dprinter.jpg
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
imagenes/all_creatures_wanted.jpeg
Normal file
|
After Width: | Height: | Size: 159 KiB |
BIN
imagenes/all_creatures_wellcome.webp
Normal file
|
After Width: | Height: | Size: 546 KiB |
BIN
imagenes/anon.jpeg
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
imagenes/apis_moviles.jpeg
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
imagenes/art_lab.webp
Normal file
|
After Width: | Height: | Size: 514 KiB |
BIN
imagenes/art_lab_cartel.webp
Normal file
|
After Width: | Height: | Size: 514 KiB |
BIN
imagenes/art_lab_chess.png
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
imagenes/art_lab_glitch.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
imagenes/autodefensa.jpeg
Normal file
|
After Width: | Height: | Size: 113 KiB |
BIN
imagenes/banksy_pintura.jpg
Normal file
|
After Width: | Height: | Size: 170 KiB |
BIN
imagenes/bienvenida.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
imagenes/charla33.jpg
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
imagenes/charla_ia.jpg
Normal file
|
After Width: | Height: | Size: 85 KiB |
BIN
imagenes/charla_moviles.jpg
Normal file
|
After Width: | Height: | Size: 76 KiB |
BIN
imagenes/cineforum.jpg
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
imagenes/computer_beeping.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
imagenes/confeccion.jpg
Normal file
|
After Width: | Height: | Size: 104 KiB |
BIN
imagenes/confeccion.webp
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
imagenes/confeccion_maquina.jpg
Normal file
|
After Width: | Height: | Size: 113 KiB |
BIN
imagenes/craft_night.png
Normal file
|
After Width: | Height: | Size: 1 MiB |
BIN
imagenes/craft_night_buena.png
Normal file
|
After Width: | Height: | Size: 1 MiB |
BIN
imagenes/craftnight.jpg
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
imagenes/create_art.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
imagenes/cyberpunk.jpeg
Normal file
|
After Width: | Height: | Size: 154 KiB |
BIN
imagenes/cyberpunk2.jpg
Normal file
|
After Width: | Height: | Size: 265 KiB |
BIN
imagenes/defensa_personal2.jpeg
Normal file
|
After Width: | Height: | Size: 195 KiB |
BIN
imagenes/defensa_personal3.jpeg
Normal file
|
After Width: | Height: | Size: 188 KiB |
BIN
imagenes/document_6044116448400382777.mp4
Normal file
BIN
imagenes/document_6044116448400382779.mp4
Normal file
BIN
imagenes/document_6044116448400382782.mp4
Normal file
BIN
imagenes/dolphin.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
imagenes/enredadera.jpg
Executable file
|
After Width: | Height: | Size: 14 KiB |
BIN
imagenes/escultura.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
imagenes/fedi_fun.jpeg
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
imagenes/fediverso2.jpeg
Normal file
|
After Width: | Height: | Size: 209 KiB |
BIN
imagenes/fediversoi.jpeg
Normal file
|
After Width: | Height: | Size: 119 KiB |
BIN
imagenes/foto_editing_windows.jpg
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
imagenes/fw_bcmdhd.bin
Normal file
BIN
imagenes/ganzuando.jpeg
Normal file
|
After Width: | Height: | Size: 123 KiB |
BIN
imagenes/ganzuando_2.jpeg
Normal file
|
After Width: | Height: | Size: 140 KiB |
BIN
imagenes/grafficos_matrix.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
imagenes/hacklab.jpeg
Executable file
|
After Width: | Height: | Size: 127 KiB |
BIN
imagenes/hacklab.webp
Normal file
|
After Width: | Height: | Size: 538 KiB |
BIN
imagenes/hacklab_foto.jpeg
Normal file
|
After Width: | Height: | Size: 181 KiB |
BIN
imagenes/hacklab_plantas.jpg
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
imagenes/hacklab_vintage_plantas.jpg
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
imagenes/hlab.webp
Normal file
|
After Width: | Height: | Size: 173 KiB |
BIN
imagenes/hugo.jpeg
Normal file
|
After Width: | Height: | Size: 277 KiB |
BIN
imagenes/iluminacion_verde.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
imagenes/internet_boy.jpeg
Normal file
|
After Width: | Height: | Size: 140 KiB |
BIN
imagenes/julian.jpeg
Normal file
|
After Width: | Height: | Size: 172 KiB |
BIN
imagenes/julian_cineforum.jpeg
Normal file
|
After Width: | Height: | Size: 135 KiB |
BIN
imagenes/lel.jpeg
Normal file
|
After Width: | Height: | Size: 299 KiB |
BIN
imagenes/llaves.jpeg
Normal file
|
After Width: | Height: | Size: 224 KiB |
BIN
imagenes/lols.jpeg
Normal file
|
After Width: | Height: | Size: 183 KiB |
BIN
imagenes/luz_teles.jpg
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
imagenes/luzes.jpg
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
imagenes/mazetas_ordenadores.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
imagenes/musica_maestro.jpg
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
imagenes/musica_planta.jpg
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
imagenes/musicon.jpg
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
imagenes/need_fotoshop.png
Normal file
|
After Width: | Height: | Size: 188 KiB |
BIN
imagenes/oficina_plantas.jpg
Normal file
|
After Width: | Height: | Size: 97 KiB |
BIN
imagenes/oficina_plantas_vintage.jpg
Normal file
|
After Width: | Height: | Size: 76 KiB |
BIN
imagenes/open_day.png
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
imagenes/ordenadores_colgando.jpg
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
imagenes/page_not_found.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
imagenes/painting.jpg
Normal file
|
After Width: | Height: | Size: 107 KiB |
BIN
imagenes/photoshop.jpg
Normal file
|
After Width: | Height: | Size: 101 KiB |
BIN
imagenes/photoshop_lulzec.jpeg
Normal file
|
After Width: | Height: | Size: 90 KiB |
BIN
imagenes/planta_digital.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
imagenes/primer_taller.jpeg
Normal file
|
After Width: | Height: | Size: 259 KiB |
BIN
imagenes/product_you.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
imagenes/proxmox.jpeg
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
imagenes/pubo_verde.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
imagenes/raspy_planta.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
imagenes/repair_cafe.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
imagenes/revenge.jpg
Normal file
|
After Width: | Height: | Size: 90 KiB |
BIN
imagenes/set_musica_plantas.jpg
Normal file
|
After Width: | Height: | Size: 271 KiB |
BIN
imagenes/setas_luz.jpg
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
imagenes/source_ocde.jpg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
imagenes/teclado_blanco_planta.jpg
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
imagenes/teclado_negro_planta.jpg
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
imagenes/videojuegos_plantas.jpg
Normal file
|
After Width: | Height: | Size: 92 KiB |
BIN
imagenes/visuales.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |