@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/study.css')->withFullUrl() !!}
{!! Minify::stylesheet('/css/studyStarred.css')->withFullUrl() !!}
@stop

@section('title')
Centenario Pérez Galdós
@stop
@section('description')
Página del Centenario de Pérez Galdós
@stop

@section('content')
{!! Breadcrumbs::render('perez-galdospersonajes') !!}
<div class="container"> 
    <div class="titulo_categoria">
        <span>CENTENARIO PÉREZ GALDÓS 2020-2021</span>
    </div>
    <div class="col-md-12">
        <div class="titulo">
            <b>Los personajes hablan</b>
        </div>
    </div>

     <div class="col-md-8">
         
			<div class="row">
       	<div class="col-md-12">
       		<ul>
       		<br>
					 
					    <p class="text-justify">Con el fin de difundir la obra de Benito Pérez Galdós, proponemos estas lecturas dramatizadas pertenecientes a algunos de los títulos más emblemáticos del autor canario.</p>
							        <!-- 5 audios -->
									<br><br>
	                    <div class="col-md-12">
                       <!-- audio-1 -->
		                 <div class="col-md-3" style="border:2px solid green; margin:5px">
		                    <p style="font-size:14px; color:Darkred;">Fragmento perteneciente a <b>Doña Perfecta</b></p>
		                    <center>
		                    <a class="btn btn-large btn-primary" href="{{ asset('files/Galdos/05-GaldósPoblaciónengeneral.mp3') }}" target="_blank">Oír audio</a>
			                </center>
		                    <br>
		                 </div>

		              <!-- audio-2 -->
		                 <div class="col-md-3" style="border:2px solid green; margin:5px">
		                    <p style="font-size:14px; color:Darkred;">Fragmento perteneciente a <b>La desheredada</b></p>
		                    <center>
		                    <a class="btn btn-large btn-primary" href="{{ asset('files/Galdos/06-GaldósPoblaciónengeneral.mp3') }}" target="_blank">Oír audio</a>
			                </center>
		                    <br>
		                 </div>
					<!-- audio-3 -->
		                 <div class="col-md-3" style="border:2px solid green; margin:5px">
		                    <p style="font-size:14px; color:Darkred;">Fragmento perteneciente a <b>Fortunata y Jacinta</b></p>
		                    <center>
		                    <a class="btn btn-large btn-primary" href="{{ asset('files/Galdos/07-GaldósPoblaciónengeneral.mp3') }}" target="_blank">Oír audio</a>
			                </center>
		                    <br>
		                 </div>
					<!-- audio-4 -->
		                 <div class="col-md-3" style="border:2px solid green; margin:5px">
		                    <p style="font-size:14px; color:Darkred;">Fragmento perteneciente a <b>Miau</b></p>
		                    <center>
		                    <a class="btn btn-large btn-primary" href="{{ asset('files/Galdos/08-GaldósPoblaciónengeneral.mp3') }}" target="_blank">Oír audio</a>
			                </center>
		                    <br>
		                 </div>	
					<!-- audio-5 -->
		                 <div class="col-md-3" style="border:2px solid green; margin:5px">
		                    <p style="font-size:14px; color:Darkred;">Fragmento perteneciente a <b>Tormento</b></p>
		                    <center>
		                    <a class="btn btn-large btn-primary" href="{{ asset('files/Galdos/09-GaldósPoblaciónengeneral.mp3') }}" target="_blank">Oír audio</a>
			                </center>
		                    <br>
		                 </div>						 
		                </div>
	            
		           </ul> 
		         </div>
            </div>
   
</div>
</div>

<div class="spacer"></div>
<div class="image-viewer hide">
    <img id="load-image" class="img-responsive">
</div>
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}

<script>
   $(".image-item").click(function (event) {
       event.preventDefault();
       var href = $(this).attr("href");
       $(".image-viewer").removeClass("hide");
       $("#load-image").attr("src", href);
   });
   $(".image-viewer").click(function () {
       $(this).addClass("hide");
   });
</script>
@stop