voluntariado: interna 4

@extends('layout')

@section('body_class') page voluntariado b-white @stop

@section('content')
  <div class="banner-static">
    <div class="banner-content">
      <div class="swiper-container swiper-main">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="banner-bg" style="background-image: url('/images/bg-voluntariado-page.png')">
              <div class="banner-bg-cloth"></div>
            </div>
            <div class="main-text">
              <div class="container">
                <div class="title title-white title-with-line title-wider">
                  <div class="title-text">{{$words['voluntariado-selectora-opcion4-titulo1']}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="container">
      <div class="voluntario-links">
        <div class="voluntario-link voluntario-link-active">
          <a href="#">{{$words['voluntariado-bienvenida-btn1']}}</a>
        </div>
        <div class="voluntario-link">
          <a href="#">{{$words['voluntariado-bienvenida-btn2']}}</a>
        </div>
        <div class="voluntario-link">
          <a href="#">{{$words['voluntariado-bienvenida-btn3']}}</a>
        </div>
        <div class="voluntario-link">
          <a href="#"><b>{{$words['voluntariado-bienvenida-btn4']}}</b></a>
        </div>
        <div class="voluntario-link">
          <a href="#">{{$words['voluntariado-bienvenida-btn5']}}</a>
        </div>
        <div class="voluntario-link">
          <a href="#" class="color-purple"><b><i>{{$words['voluntariado-bienvenida-btn6']}}</i></b></a>
        </div>
      </div>

      <div class="legend">
        <div class="legend-item">
          <div class="marker marker-blue">
            <div class="marker-dot"></div>
          </div>
          <b>{{$words['voluntariado-fechashito-leyenda1-text1']}}</b>
          <span>{{$words['voluntariado-fechashito-leyenda1-text2']}}</span>
        </div>
        <div class="legend-item">
          <div class="marker marker-green">
            <div class="marker-dot"></div>
          </div>
          <b>{{$words['voluntariado-fechashito-leyenda2-text1']}}</b>
          <span>{{$words['voluntariado-fechashito-leyenda2-text2']}}</span>
        </div>
        <div class="legend-item">
          <div class="marker marker-yellow">
            <div class="marker-dot"></div>
          </div>
          <b>{{$words['voluntariado-fechashito-leyenda3-text1']}}</b>
          <span>{{$words['voluntariado-fechashito-leyenda3-text2']}}</span>
        </div>
        <div class="legend-item">
          <div class="marker marker-red">
            <div class="marker-dot"></div>
          </div>
          <b>{{$words['voluntariado-fechashito-leyenda4-text1']}}</b>
          <span>{!!$words['voluntariado-fechashito-leyenda4-text2']!!}</span>
        </div>
      </div>

      <div class="timeline">
        <div class="timeline-event timeline-event-1 blue">
          <h4>2018</h4>
          <h6>
            <span>{{$words['voluntariado-fechashito-fase1']}}</span>
          </h6>
          <div class="marker marker-blue">
            <div class="marker-dot"></div>
          </div>
        </div>
        <div class="timeline-event timeline-event-2 green">
          <h4>2018</h4>
          <h6>
            <span>{{$words['voluntariado-fechashito-fase2']}}</span>
          </h6>
          <div class="marker marker-green">
            <div class="marker-dot"></div>
          </div>
        </div>
        <div class="timeline-event timeline-event-3 yellow">
          <h4>2019</h4>
          <h6>
            <span>{{$words['voluntariado-fechashito-fase3']}}</span>
          </h6>
          <div class="marker marker-yellow">
            <div class="marker-dot"></div>
          </div>
        </div>
        <div class="timeline-event timeline-event-4 red">
          <h4>2019</h4>
          <h6>
            <span>{{$words['voluntariado-fechashito-fase4']}}</span>
          </h6>
          <div class="marker marker-red">
            <div class="marker-dot"></div>
          </div>
        </div>
        <div class="timeline-item year">2018</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes1']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes2']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes3']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes4']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes5']}}</div>
        <div class="timeline-item year">2019</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes6']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes7']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes8']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes9']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes10']}}</div>
        <div class="timeline-item">{{$words['voluntariado-fechashito-mes11']}}</div>
      </div>
    </div>
    <div class="pull-bottom">
      <div class="flowers"></div>
      <div class="bar"></div>
    </div>
  </div>
@stop