cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section class="background"></section>
<section class="sidebar">
	<article>
		<h1>Dos décadas de una masacre que aún deja más preguntas que respuestas</h1>
		<p><cite>NACIÓN</cite></p>
		
		<p>En la noche del 16 de mayo de 1998, un grupo de aproximadamente 50 s arribó al suroriente del municipio santandereano de Barrancabermeja y asesinó a 7 personas y secuestró a otras 25 a quienes acusaba de pertenecer a la guerrilla.</p>
		<p> A 20 años de la tragedia, aún quedan muchas dudas sobre qué fue lo que realmente sucedió esa noche. En la última década, los testimonios de algunos paramilitares que participaron en la masacre, han ayudado a esclarecer los motivos por los cuales estas personas fueron secuestradas y posteriormente asesinadas. <b>Esta es una reconstrucción de los hechos</b> </p>
		</div>
		</section>
	</article>
<section class="sidebar">
	<article>
		<h1>La noche de la masacre</h1>
		<p><cite>16 de mayo de 1998</cite></p>
		
		<p>Sobre las 9:00 p.m. cerca de 50 hombres llegaron, en varios camiones y armados, al municipio de Barrancabermeja. Según testigos, durante el trayecto por los barrios 9 de Abril, Campestre, María Eugencia y Divino Niño, los hombres gritaban: 'No se muevan porque los fumigamos aquí mismo'. En principio, no se tenía rastro de los autores del hecho, días después se le atribuyó a los paramilitares. Ese día asesinaron 7 personas y se llevaron a más de 30 personas, entre menores y mayores de edad.</p>
	</article>
	</section>
			<section class="sidebar">
	<article>
	<article>
		<h1>Un paro por los desaparecidos</h1>
		<p><cite>18 y 19 de mayo de 1998</cite></p>
		
		<p>La comunidad se declara en paro hasta que aparezcan las personas retenidas el 16 de mayo por el comando paramilitar. La ciudad está bloqueada por vía terrestre, fluvial y aérea. Los manifestantes impidieron el paso de los transeúntes que querían desplazarse hasta el sector comercial desde los corregimientos El Centro y El Llanito, así como desde los barrios sur y nororientales.</p>
<p>Al día siguiente, una caravana de motos y carros, en la que se desplazaron unas 10.000 personas agitando pañuelos y banderas blancas, acompañó la marcha fúnebre de cinco de las siete víctimas de la incursión paramilitar del sábado 16 de mayo, en el sector nororiental de Barrancabermeja.</p>
	</article>
	</section>
<section class="sidebar">
	<article>
		<h1>Se señalan a los primeros responsables</h1>
		<p><cite>Junio de 1998</cite></p>
		
		<p>El general Manuel José Bonett, comandante de las Fuerzas Militares, rechazó las acusaciones de que el Ejército participó en la matanza de las 25 personas secuestradas en la Masacre de Barrancabermeja.</p>

<p>Días después, los jefes de misión de la Unión Europea y los países asociados condenan sin reserva los asesinatos y exhortan al Gobierno colombiano a utilizar todas las medidas a su alcance para rastrear a los culpables y ponerlos rápidamente a disposición de la justicia.</p>
	</article>
	</section>
<section class="sidebar">
	<article>
		<h1>La negligencia de algunas autoridades</h1>
		<p><cite>Diciembre de 1998</cite></p>
		
		<p>Por no haber impedido la incursión del grupo paramilitar que recorrió las calles de Barrancabermeja el 16 de mayo pasado, y dejó a su paso 7 personas muertas y 25 desaparecidas, la Procuraduría General de la Nación formuló pliego de cargos contra cuatro miembros del Ejército, tres de la Policía y dos del DAS. Según el Ministerio Público, las autoridades del Ejército, comandadas por el subteniente John Héctor Guzmán Santos, presentaron un comportamiento negligente dentro de su servicio al eludir las responsabilidades propias de sus funciones.</p>
	</article>
	</section>
<section class="sidebar">
	<article>
		<h1>Las otras capturas, tras un año de la masacre</h1>
		<p><cite>	<m>Marzo de 1999</m></cite></p>
		
		<p>El paramilitar Mario Jaimes Mejía fue capturado por haber asesinado un taxista en el puerto petrolero. En ese momento se declaró como el autor material de la masacre en Barrancabermeja y afirmó estar dispuesto a contar todo lo que sabía sobre el hecho.</p>
	</article>
	</section>
							
<section class="sidebar">
	<article>
		<h1>Condenan al Estado</h1>
		<p><cite>Mayo de 1999</cite></p>
		
		<p>El Tribunal Internacional de Opinión condenó ética y moralmente al Estado colombiano como responsable de la masacre de siete personas y la desaparición de otras 25, a manos de paramilitares el 16 de mayo en Barrancabermeja.</p>
<p>El comandante de las Fuerzas Militares, general Fernando Tapias, cuestionó días después la condena moral contra el Gobierno.</p>
	</article>
	</section>
							
<section class="sidebar">
	<article>
		<h1>Las declaraciones de 'el Panadero'</h1>
		<p><cite>18 y 19 de mayo de 1998</cite></p>
		
		<p>En el marco del proceso de Justicia y Paz, Mario Jaime Mejía alias 'el Panadero' confesó su participación en la masacre de siete personas y la desaparición de alrededor de 25 en Barrancabermeja, el 16 de mayo de 1998.</p>

<p>Mejí dijo que una finca en la vereda La Musanda de Barrancabermeja sería el sitio donde paramilitares habrían enterrado a 25 personas: 21 hombres, una mujer y 3 menores. También señaló que fueron asesinados por orden de Guillermo Cristancho Acosta, alias Camilo Morantes, jefe paramilitar del bloque Magdalena Medio.</p>
	</article>
	</section>
								
<section class="sidebar">
	<article>
		<h1>Autoridades habrían avalado ingreso de paramilitares</h1>
		<p><cite>Marzo de 2010</cite></p>
		
		<p>Dos años después, el exparamilitar Mario Jaime Mejía, insistió en que el Ejército, el DAS y la Policía actuaron en complicidad con las autodefensas para permitir que el 16 de mayo de 1998 los 'paras' asesinaran en Barrancabermeja a 7 personas y desaparecieran a 25 más.</p>

<p>De acuerdo con el relato de 'El Panadero' las autoridades en el puerto petrolero no solo "avalaron" el ingreso de un comando paramilitar proveniente del corregimiento San Rafael de Lebrija, en Rionegro (Santander), sino que también habrían "levantado" varios retenes rurales y urbanos para permitir la libre movilización de 15 hombres que se movilizaron en dos camionetas.</p>

<p>Además, contó que a través de un capitán retirado de apellido González sostuvo, entre enero y abril de 1998, dos reuniones con un capitán Prada del Batallón Nueva Granada, en Barrancabermeja, en la que los 'paras' le contaron al Ejército sus intenciones de ejecutar una masacre en el puerto petrolero.</p>
	</article>
	</section>
										
<section class="sidebar">
	<article>
		<h1>Las condenas 12 años después de lo ocurrido</h1>
		<p><cite>Octubre de 2010</cite></p>
<p>Doce años después de lo ocurrido, en zona rural de Rionegro (Santander) el antiguo Departamento Administrativo de Seguridad (Das) capturó a Omar Camacho Vergel, 'Alicate', exparamilitar que participó en la masacre.</P>
	<p> También condenaron a 20 años de prisión a alias Chicalá, El Loco Esteban, Picua y Sandy, cuatro exparamilitares quienes aceptaron su participación en los hechos del 16 de mayo de 1998.</p>

<p> Días después, la Fiscalía acusó a 14 oficiales de la policía y el ejército, y a dos funcionarios del DAS por la masacre de Barrancabermeja.</p>
	</article>
	</section>
										
<section class="sidebar">
	<article>
		<h1>El último llamado a juicio</h1>
		<p><cite>2017</cite></p>
<p>En total, 18 años transcurrieron para que fuera llamado a juicio el capitán retirado del Ejército, José Eduardo González Sánchez, quien era subjefe de seguridad de Ecopetrol, y fue señalado de haber participado en de la masacre del 16 de mayo de 1998 en Barrancabermeja, en la que fueron asesinadas 32 personas. </p>
		</div>
	</div>
											
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700,400italic,700italic);
@import url('https://fonts.googleapis.com/css?family=Vollkorn');
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300,600);

$url : url(https://media.giphy.com/media/1luUvWCU1fIQcnlaiA/giphy.gif);

$duration : .5s;
$delay : $duration/2;
$bounce : cubic-bezier(0,0,.15,1.1);

.sidebar {
	width: 320px;
	background: black;
	padding: 30px 30px 50px;
	transform-origin: bottom left;
	transform: scale3d(0,1,1) skewX(30deg);
	transition: transform $duration $delay*2;
	
	body:hover & {
		transition-delay: 0;
		transform: none;
	}
}

article {
	font-family: Gentium Book Basic;
	color: rgba(white, .9);
	transform: translate3d(0,100%,0);
	transition: transform $duration;
	
	body:hover & {
		transition-delay: $delay;
		transform: none;
	}
}

h1 {
	font: 900 35px/1 Vollkorn;
	color: #fff;
}

p {
	font: 16px/1.4 Gentium Book Basic;
	padding: 15px 0 0;
	color: #fff;
	
	&:first-of-type {
		font-size: smaller;
		font-style: italic;
		border-bottom: thin solid gray;
		line-height: 0;
		margin: .5em 0;
		
		cite {
			background: black;
			padding-right: 5px;
		}
	}
	
	&:nth-of-type(2):first-letter {
		display: inline-block;
		font: 900 42px/1 Vollkorn;
		padding-right: 4px;
		line-height: 1;
		float: left;
		vertical-align: text-top;
	}
}

body {
	height: 100vh;
	overflow-y: scroll;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image: $url;
	background-size: cover;
	transition: $duration $delay*2;
	
	body:hover & {
		transform: translate3d(150px,0,0);
		transition-delay: 0;
		transition-timing-function: $bounce;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console