123

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

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

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<box>
  <div class="container-fluid">
    <header class="img-bg">
      <div class="row">
        <div class="col-xs-offset-6 col-xs-5">
          <h1 class="text-right" id="jonathan">Los crímenes contra menores que han estremecido a Colombia</h1>
        </div>
      </div>
   
          </div>
        </div>
      </div>
    </header>
<section class="text-center about">

    </section>

    <section class="timeline">
      <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 main-timeline-title">
          <h2></h2>
        </div>
        <div class="col-xs-10 col-xs-offset-1 hidden-md hidden-lg">
          <p class-text-justify>De acuerdo con la Fundación Plan, cada 30 minutos, una niña de 0 a 14 años es víctima de violencia sexual en Colombia. Los casos maltrato y abuso contra menores. Eso no es todo, según el reporte de Medicina Legal, hasta agosto de este año se habían reportado 7.213 agresiones a menores de edad en el país,  casi 300 más que el año pasado. 
           
          <p> En el último reporte de Medicina Legal frente al abuso sexual de niños, también se evidencia que en 46, 2 por ciento de los casos el agresor es un familiar, seguido de un conocido (22,3 por ciento). <b>Conozca a continuación varios de los casos de crímenes contra menores que han conmocionado este año a Colombia.</p>
        </div>
        <div class="hidden-xs hidden-sm col-md-8 col-md-offset-2">
          <p class=text-justify>
De acuerdo con la Fundación Plan, cada 30 minutos, una niña de 0 a 14 años es víctima de violencia sexual en Colombia. Eso no es todo, según datos de Medicina Legal, hasta agosto de este año se habían reportado 7.213 agresiones a menores de edad en el país,  casi 300 más que el año pasado. 
           
          <p> En el último reporte de la entidad sobre abuso sexual de niños, también se evidencia que en el 46, 2 por ciento de los casos el agresor es un familiar, seguido de un conocido (22,3 por ciento). <b>Conozca varios de los casos de crímenes contra menores que han conmocionado este año a Colombia.</p>
        </div>
   
        <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
          <ul class="timeline timeline-centered">
            <li class="timeline-item">
              <div class="timeline-info">
                <span>10 de febrero</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
             
                <p class="text-justify"> Una niña de 13 meses fue violada y asesinada en Florencia, Caquetá, después de haber sido raptada de una residencia donde se encontraba hospedada junto a sus padres. Según las autoridades, tras aceptar los cargos por feminicidio y acceso carnal violento agravados, Cristian Camilo Ruiz, el asesino de la niña, dijo que violó a la menor, luego la ahogó de forma mecánica y procedió a dejarla en una alberca, donde fue encontrada. El hombre ya había violado a un menor de 5 años.
</p>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-info">
                <span>5 de abril</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">Una niña de 3 años de edad fue violada, golpeada y quemada con ácido en su espalda y el pecho en el barrio Santa Fe de Bogotá. Según las autoridades, la menor fue abandonada el pasado en el Hospital El Guavio por un hombre que se marchó tras hacer la entrega al centro médico. Al parecerla tragedia ocurrió en una guardería clandestina a donde fue llevada la niña mientras su madre trabajaba. </p>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-info">
                <span>8 de abril</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
             
                <p class="text-justify">Un hombre asesinó a su hijo de 2 años de edad en la iglesia del corregimiento de Cite, en el municipio de Barbosa, Santander.Según la investigación de las autoridades, Felipe Santiago Luengas, de 54 años de edad, recogió al menor en la casa de sus abuelos y llegó con él a la parroquia Nuestra Señora del Rosario donde lo atacó con un arma blanca causándole la muerte. Posteriormente, el hombre intentó suicidarse. Luengas no se allanó a cargos y fue cobijado con medida de aseguramiento intramuros en la cárcel de Vélez (Santander) 

</p>
              </div>
            </li>
            
            <li class="timeline-item">
              <div class="timeline-info">
                <span>23 de abril</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
           
                <p class="text-justify">En el municipio de Armero Guayabal, Tolima, un niña de 3 años falleció luego de ser víctima de maltrato físico y agresión sexual por parte de desconocidos. Según la autoridades, la menor "presentaba trauma cráneo encefálico severo, heridas múltiples en pecho y tórax, así como cicatrices antiguas en ambas piernas producidas por arma blanca". La pequeña estaba bajo el cuidado de una persona a la cual había sido entregado desde hace aproximadamente un año, bajo la figura de custodia solidaria por parte de la Comisaria de Familia.</p>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-info">
                <span>04 de mayo </span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
            
                <p class="text-justify">Dos religiosas de Popayán, Cauca, fueron acusadas por el delito de tortura agravada hacia niños de un hogar infantil, ubicado en el norte de esta ciudad.Según la Fiscalía, se trataría de una tortura física por quemaduras en las menores
habitantes del centro, así como introducir sus cabezas en los retretes y cortarles el
cabello.El establecimiento ya había sido cerrado una vez por anteriores denuncias, pero
fue habilitado nuevamente.

</p>
              </div>
            </li>

            <li class="timeline-item">
              <div class="timeline-info">
                <span>11 de junio</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">Una niña de 10 años fue asesinada en Santa Marta mientras dormía al lado de su hermano de seis. Su victimario habría aprovechado la ausencia de sus padres para ingresar por la ventana, acceder a ella y propinarle nueve puñaladas en el pecho y dos más en el cuello que acabaron con su vida de manera inmediata. A pesar de que Gilberto Luna Parra,  capturado por el crimen, no aceptó los cargos que se le imputaban, los elementos probatorios presentados por la Fiscalía fueron suficientes para enviarlo a la cárcel.</p>
              </div>
            </li>
        <li class="timeline-item">
              <div class="timeline-info">
                <span>16 de junio</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">Un juez de Medellín dictó medida de aseguramiento en una cárcel en contra de una mujer de 19 años y un hombre de 20, presuntos responsables de asesinar a un bebé de 8 meses, quien era hijo de ella e hijastro de él. El dictamen del Instituto Nacional de Medicina Legal y Ciencias Forenses estableció que el niño tenía fracturas en el cráneo, la columna vertebral y en seis costillas. Los peritos no encontraron signos de abuso sexual.Hasta junio de este año, la Policía Metropolitana había atendido en el valle de Aburrá 192 casos de maltrato infantil.</p>
              </div>
            </li>
      <li class="timeline-item">
              <div class="timeline-info">
                <span>4 de julio</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">Una mujer en Bogotá atentó contra la vida de sus dos hijos, de 9 y 11 años, al obligarlos a tomar un veneno que ella misma bebió minutos después de asegurarse de que los pequeños lo habían hecho.La mujer que decidió suministrar esta pócima a sus hijos podría enfrentar cargos por tentativa de homicidio. </p>
              </div>
            </li>

   <li class="timeline-item">
              <div class="timeline-info">
                <span>10 de agosto</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">Una adolescente de 13 años en Cali fue asesinada con arma blanca, de acuerdo con datos recogidos por autoridades, por un joven de 19 años. Una versión inicial determinaría que el homicida habría sido novio de la adolescente y que el crimen ocurrió luego de que el joven se la llevó a un sitio oscuro y allí la acuchilló. La Policía Metropolitana informó que una patrulla localizó al presunto agresor y lo dejó a disposición de la Fiscalía.
</p>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-info">
                <span>13 de septiembre</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify"> Un hombre de 57 años de edad en Bucaramanga estableció una relación sentimental con una adulta mayor de 70, para luego acceder sexualmente de sus nietos, de 8, 9, 11 y 13 años de edad. El implicado permanece a disposición de las autoridades. </p>
              </div>
            </li>
    
   <li class="timeline-item">
              <div class="timeline-info">
                <span>28 de septiembre</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">Una niña de 9 años fue estrangulada, abusada sexualmente y posteriormente incinerada por Adolfo Arrieta García en el municipio de Fundación, Magdalena. El fiscal del Magdalena, Vicente Guzmán, aseguró que las muestras biológicas realizadas a los restos de la víctima hicieron posible identificar plenamente su identidad y establecer que “esta persona abusó sexualmente de la niña, quien posteriormente murió por asfixia mecánica. Luego, para no dejar evidencia, lanzó su cuerpo a una hoguera. El homicida se encuentra en la cárcel La Tramacúa, en Valledupar (Cesar). </p>
              </div>
            </li>
                 <li class="timeline-item">
              <div class="timeline-info">
                <span>3 de octubre</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify"> Cristo José Contreras, hijo menor del Alcalde de El Carmen (Norte de Santander), fue secuestrado cuando se dirigía a su colegio, ubicado en el corregimiento de Guamalito. El niño fue abandonado 7 días después en por sus captores en un paraje selvático ubicado entre las veredas La Quiebra, Las Delicias, La Osa y Las Peregrinas, debido a la presión de la Fuerza Pública. 

</p>
              </div>
            </li>
   
   <li class="timeline-item">
              <div class="timeline-info">
                <span>4 de octubre</span>
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">En Caucasia, Antioquia, la activación de una granada en una vivienda del barrio Asovivienda, en el casco urbano del municipio, dejó como consecuencia la muerte de un niño de 12 años. El evento causó la explosión de una pipeta de gas que se encontraba al interior del hogar. Las investigaciones están enfocadas en determinar si el artefacto explosivo se estaba manipulando dentro de la casa o si alguien que pasó por el lugar la lanzó. 

</p>
              </div>
            </li>
               <li class="timeline-item">
              <div class="timeline-info">
                <span>11 de octubre</span>
              </div>
       
             <div class="timeline-marker"></div>
              <div class="timeline-content">
               
                <p class="text-justify">
                  Una menor de cinco años de edad fue abusada sexualmente por un sujeto de 85 años en zona rural del municipio de Páez, Cauca. La menor fue atendida en un centro asistencial de La Plata, en el vecino departamento del Huila, y las instituciones defensoras de los derechos de los menores iniciaron los trámites correspondientes para sacarla de su núcleo familiar y brindarle protección. Por otro lado, el presunto responsable fue identificado y capturado por la Guardia Indígena de ese territorio.


</p>
              </div>
            </li>
       
            
        </div>
      </div>

    </section>
  </div>
</box>
   
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Rubik');
@import url('https://fonts.googleapis.com/css?family=Cabin');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

box {
font-family: 'Quicksand', serif;
  background-color: #000000;
}
.container-fluid {
  padding: 0;
}

.row {
  margin: 0;
}
//  HEADER CSS
.img-bg {
  background-image: url('https://image.ibb.co/hqv03p/Dise_o_sin_t_tulo_15.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  padding: 12% 5% 20% 5%;
}

.toBottom {
  position: absolute;
  bottom: 10%;
  width: 90%;
  height: 50%;
  z-index: 2;
}

.italicQuote {
  color: #ffffff;
  font-style: italic;
}

#jonathan {
font-family: 'Playfair Display', serif;
  color: white;
  // font-size: 4.7vw;
  font-size: 4vw;
  margin-top: 5%;
  margin-bottom: 0px;
  // margin-bottom: 50px;
}

#ive {
  font-family: 'Quicksand', sans-serif;
  color: white;
  // font-size: 8.9vw;
  font-size: 60px;
  margin-top: -2%;
}

blockquote {
  font-family: Quicksand, sans-serif;
  color: #ffffff;
  border-left: 0;
  // margin-top: 10%;
  font-size: 15px;
  position: absolute;
  top: -10px;
  padding: 0;
}

blockquote p:before {
  content: '„';
  // font-style: italic;
}

blockquote p:after {
  content: '“';
  // font-style: italic;
}

.main-timeline-title {
  line-height: 30px;
}

#link {
  display: block;
  width: 100px;
  margin: 0 auto;
  margin-bottom: 15px;
}

#more_info {
  text: #ffffff;
}

@media (min-width: 576px) {
  #jonathan {
    font-size: 50px;
  }
  
  #ive {
    font-size: 100px;
  }
}

@media (min-width: 768px) {
  .img-bg {
    // min-height: 400px;
  }
  #jonathan {
    font-size: 70px;
  }
  #ive {
    font-size: 130px;
  }
  .blockqoute {
    font-size: 20px;
    margin-top: 8%;
  }
}

@media (min-width: 992px) {
  .img-bg {
    // min-height: 500px;
  }
  #jonathan {
    font-size: 80px;
  }
  #ive {
    font-size: 150px;
  }
  .blockqoute {
    font-size: 20px;
    margin-top: 10%;
  }
}

@media (min-width: 1200px) {
  .img-bg {
    // min-height: 700px;
  }
  #jonathan {
    font-size: 90px;
  }
  #ive {
    font-size: 170px;
  }
  .blockqoute {
    font-size: 24px;
    margin-top: 10%;
  }
}

// SECTION ABOUT CSS

// TIMELINE CSS

$primary-color: #1CEFFF;
$primary-color-hover: scale-color($primary-color, $lightness: 32%);
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  margin-top: 7px;
  margin-bottom: 20px;
}

a {
  color: $primary-color;
  &:hover {
    color: #ffffff;
    text-decoration: none;
  }
}

.main-timeline-title {
  text-align: center;
  margin-top: 10px;
  padding: 10px 0 0;
  // border-bottom: 1px solid #E4EAEC;
  p {
    margin: 0 auto;
    font-size: 16px;
    max-width: 400px;
    color: #fff;
  }
}

/*==================================
    TIMELINE
==================================*/

/*-- GENERAL STYLES
    ------------------------------*/
.timeline {
  background-color: #000;
  line-height: 1.3em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  p { color:#ffffff;}
  h1, h2 {
    line-height: 30px;
  }
  h3, h4, h5, h6 {
    line-height: 22px;
  }
}

.timeline-title {
  line-height: 30px;
}

/*----- TIMELINE ITEM -----*/

.timeline-item {
  padding-left: 40px;
  position: relative;
  color: #fff;
  &:last-child {
    padding-bottom: 0;
  }
}

/*----- TIMELINE INFO -----*/

.timeline-info {
  padding-top: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 .5em 0;
  text-transform: uppercase;
  white-space: nowrap;
  color:#fff;
}
/*----- TIMELINE MARKER -----*/

.timeline-marker {
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  &:before {
    display: block;
    position: absolute;
    content: "";
    background-color: #FFD100;
    top: 4px;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #FFD100, inset 0 0 0 5px #FFF;
    -webkit-box-shadow: inset 0 0 0 2px #FFD100, inset 0 0 0 5px #FFF;
    -moz-box-shadow: inset 0 0 0 2px #FFD100, inset 0 0 0 5px #FFF;
    transition: all .32s ease-in-out;
  }
  &:after {
    content: "";
    width: 3px;
    background: #FFD100;
    display: block;
    position: absolute;
    top: 33px;
    bottom: 0;
    left: 11px;
    border-radius: 3px;
  }
  .timeline-item:last-child &:after {
    content: none;
  }
}
.timeline-item:not(.period):hover .timeline-marker:before {
  background:#000000;
  // border: 3px solid $primary-color;
  border: 0px #000000;
  box-shadow: inset 0 0 0 2px #FFD100, inset 0 0 0 5px #FFD100, 0 0 5px 0 #FFD100;
  -webkit-box-shadow: inset 0 0 0 2px #CCD5DB,
    inset 0 0 0 5px #FFF,
    0 0 5px 0 #000000;
  -moz-box-shadow: inset 0 0 0 2px #CCD5DB,
    inset 0 0 0 5px #FFF,
    0 0 5px 0 #1CEFFF;
}

.timeline-item:not(.period) .timeline-info span {
  border-bottom: 1px solid #000000;
  -webkit-transition:border-bottom ease-in-out .4s;
    -moz-transition:border-bottom ease-in-out .4s;
    -ms-transition:border-bottom ease-in-out .4s;
     -o-transition:border-bottom ease-in-out .4s;
        transition:border-bottom ease-in-out .4s;
}

.timeline-item:not(.period):hover .timeline-info span {
  border-bottom: 3px solid #FFD100;
  -webkit-transition:border-bottom ease-in-out .5s;
    -moz-transition:border-bottom ease-in-out .5s;
    -ms-transition:border-bottom ease-in-out .5s;
     -o-transition:border-bottom ease-in-out .5s;
        transition:border-bottom ease-in-out .5s;
}

/*----- TIMELINE CONTENT -----*/

.timeline-content {
  padding-bottom: 40px;
  p:last-child {
    margin-bottom: 0;
  }
}

/*----- TIMELINE PERIOD -----*/

.period {
  padding: 0;
  .timeline-info {
    display: none;
  }
  .timeline-marker {
    &:before {
      background: transparent;
      content: "";
      width: 20px;
      height: auto;
      border: none;
      border-radius: 3px;
      top: 0;
      left: 2px;
      bottom: 30px;
      position: absolute;
      border-top: 3px solid #000;
      border-bottom: 3px solid #FFFF00;
      box-shadow: none;
    }
    &:after {
      content: "";
      height: 32px;
      top: auto;
      border-radius: 3px;
    }
  }
  .timeline-content {
    padding: 40px 0 70px;
  }
  .timeline-title {
    margin: 0;
    line-height: 30px;
  }
}

/*----------------------------------------------
        MOD: TIMELINE SPLIT
    ----------------------------------------------*/

.timeline-split {
  @media (min-width: 768px) {
    .timeline {
      display: table;
    }
    .timeline-item {
      display: table-row;
      padding: 0;
    }
    .timeline-info,
    .timeline-marker,
    .timeline-content,
    .period .timeline-info {
      display: table-cell;
      vertical-align: top;
    }
    .timeline-marker {
      position: relative;
    }
    .timeline-content {
      padding-left: 30px;
    }
    .timeline-info {
      padding-right: 30px;
    }
    .period .timeline-title {
      position: relative;
      left: -50px;
    }
  }
}

/*----------------------------------------------
        MOD: TIMELINE CENTERED
    ----------------------------------------------*/

.timeline-centered {
  @extend .timeline-split;
  @media (min-width: 992px) {
    &, .timeline-item, .timeline-info, .timeline-marker, .timeline-content {
      display: block;
      margin: 0;
      padding: 0;
    }
    .timeline-item {
      padding-bottom: 40px;
      overflow: hidden;
    }
    .timeline-marker {
      position: absolute;
      left: 50%;
      margin-left: -7.5px;
    }
    .timeline-info, .timeline-content {
      width: 50%;
    }
    > .timeline-item:nth-child(odd) .timeline-info {
      float: left;
      text-align: right;
      padding-right: 35px;
    }
    > .timeline-item:nth-child(odd) .timeline-content {
      float: right;
      text-align: left;
      padding-left: 35px;
    }
    > .timeline-item:nth-child(even) .timeline-info {
      float: right;
      text-align: left;
      padding-left: 35px;
    }
    > .timeline-item:nth-child(even) .timeline-content {
      float: left;
      text-align: right;
      padding-right: 35px;
    }
    > .timeline-item.period .timeline-content {
      float: none;
      padding: 0;
      width: 100%;
      text-align: center;
    }
    .timeline-item.period {
      padding: 50px 0 90px;
    }
    .period .timeline-marker:after {
      height: 30px;
      bottom: 0;
      top: auto;
    }
    .period .timeline-title {
      left: auto;
    }
    
    .timeline-info {
      padding-top: 8px;
    }
    
    .timeline-item.period {
      .timeline-info {
        padding-top: 0px;
      }
    }
  }
}

/*----------------------------------------------
        MOD: MARKER OUTLINE
    ----------------------------------------------*/

.marker-outline {
  .timeline-marker {
    &:before {
      background: transparent;
      border-color: $primary-color;
    }
  }
  .timeline-item:hover .timeline-marker:before {
    background: $primary-color;
  }
}

            
          
!
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.

Console