EVOLUTION-MANAGER

Edit File: detalle_ruta.blade.php

@extends('pagina.master')

@section('style')

.ruta_content_detalle h1{
            color: #0c73b4;
            font-size: 2.6rem;
            text-transform: uppercase;
        }
        .ruta_content_detalle p{
            text-align: justify;
            font-size: 1.2rem;
            line-height: 1.4;
            margin-top: 25px;
        }

.ruta_contet_imagen{
            justify-content: center;            
        }
        .ruta_contet_imagen .ruta_card_imagen{
            display: flex;
            width: 60%;
            align-items: flex-end;
            margin: 25px auto auto auto;
            /* background-color: red; padding: 10px 0px; */
        }
        .ruta_contet_imagen .ruta_card_imagen a img{
            margin-right: 8px;
            width: 3rem;
        }
        .ruta_contet_imagen .ruta_card_imagen a img:hover{
            transform: scale(1.1);
        }
        .ruta_contet_imagen .ruta_card_imagen a img:active{
            transform: scale(1);
        }
        .ruta_contet_imagen .ruta_card_imagen > .card_img_ruta img{
            width: 100%;
        }
        .content_subtitulo { justify-content: center; }

@media only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
            .body_ruta{ margin: 0px 50px;  }
            .ruta_content_detalle h1 { font-size: 2.4rem; }
            .ruta_content_detalle p{ font-size: 1.1rem; }
            .ruta_contet_imagen .ruta_card_imagen{ width: 90%; }
        }
        @media only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
            .body_ruta{ margin: 0px 50px;  }
            .ruta_content_detalle h1 { font-size: 2.4rem; }
            .ruta_content_detalle p{ font-size: 1rem; }
            .ruta_contet_imagen .ruta_card_imagen{ width: 100%; }
        }
        @media (max-width: 767px){ /*PEQUEÑO*/
            .ruta_content_detalle h1 { font-size: 2.3rem; }
            .body_ruta{ margin: 0px 50px; grid-template-columns: repeat(1, 1fr); }
            .ruta_contet_imagen .ruta_card_imagen{ width: 100%; }
        }
        @media (max-width: 667px){ /*PEQUEÑO 2*/
            .ruta_content_detalle h1 { font-size: 2rem; }
            .body_ruta{ margin: 0px 30px; grid-template-columns: repeat(1, 1fr); }  
            .ruta_contet_imagen .ruta_card_imagen{ width: 100%; }
        }
        @media (max-width: 414px){ /*MOBILE*/
            .ruta_content_detalle h1 { font-size: 2rem; }
            .body_ruta{ margin: 0px 30px; grid-template-columns: repeat(1, 1fr);}
            .ruta_contet_imagen .ruta_card_imagen{ width: 100%; }
        }

</style>

@endsection

@section('content')

<div class="titulo_seccion" style="margin-bottom: 10px;">
            <hr class="linea_horizontal">
            <div class="contenido con_mv_10">
                <span class="span_t1n">Rutas</span>&nbsp;&nbsp;&nbsp;
                <span class="span_t1"> tur&iacute;sticas</span>
                <img class="mobil_none" src="{{route_public('/pagina/img/iconos/inicio/rutas_turisticas.png')}}" alt="Icono">
            </div>
            <hr class="linea_horizontal">
        </div>

<div class="ruta_content_detalle">
                <h1><b>Ruta</b> Gastron&oacute;mica</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis 
                </p>
            </div>
            <div class="ruta_contet_imagen">
                <div class="content_subtitulo">
                    <h2></h2>    
                    <h2><i class="fa fa-caret-right"></i> <b>Bah&iacute;a de</b> Car&aacute;quez</h2>                                
                </div>
                <div class="ruta_card_imagen">
                    <a href=""><img src="{{route_public('/pagina/img/iconos/varios/pdf.webp')}}" alt=""></a>
                    <div class="card_img_ruta">
                        <img src="{{route_public('/pagina/img/rutas_turisticas/ruta1.webp')}}" alt=""> 
                    </div>
                </div>  
            </div>

</div>

</section>

@endsection

@section('script')
@endsection