@extends('layout.principalLayout')

@section('slider')

    <header>
        <div class="row owl-motos">
            <div id="owl-motos">
                <!-- Moto Item 1 -->
                <div class="motoItem">
                    <img class="imgCarrousel" src="img/slider/slider-home1.jpg" height="auto" width="100%" alt="Aprilia" style="cursor:pointer;"  />
                    <!-- Imagen -->
                    <!-- <div class="animated bounceInLeft prensaImagen">
               <img src="img/motoAprilliaInicio3.png" height="100%" width="auto" />
              </div> -->
                    <!-- / Fin Imagen -->
                    <!-- Texto
               <div class="col-sm-12 animated a_fu prensaCentral">
                       <h1>Aprilia Racing Team</h1>
                     </div>
                 Fin texto -->
                </div>
                <!-- / Fin Moto Item 1 -->
                <!-- Moto Item 1 -->
                <div class="motoItem">
                    <img class="imgCarrousel" src="img/slider/slider-home1.jpg" height="auto" width="100%" alt="Aprilia" style="cursor:pointer;" />
                    <!-- Imagen -->
                    <!-- <div class="animated bounceInLeft prensaImagen">
               <img src="img/motoAprilliaInicio3.png" height="100%" width="auto" />
              </div> -->
                    <!-- / Fin Imagen -->

                    <!-- Texto
               <div class="col-sm-12 animated a_fu prensaCentral">
                       <h1>Aprilia Racing Team</h1>
                     </div>
                 Fin texto -->
                </div>
                <!-- / Fin Moto Item 1 -->
            </div>

        </div>
    </header>
    <!--
    <div class="flecha">
        <center> <i class="fas fa-angle-double-down" style="color:white; font-size: 42px; margin-left: -5px; cursor:pointer;"></i></center>
    </div>-->

@stop


@section('content')

    <!-- botones servicio -->

    <div class="row conteido-servicios animated fadeInUp" style="margin-bottom:80px;">

        <div class="col-lg-4 col-sm-12 portfolio-item ">
            <div class="card h-100">
                <a href="#" ><img class="card-img-top" src="img/servicios/boton-servicio-ligero.png" alt=""></a>
            </div>
        </div>

        <div class="col-lg-4 col-sm-12 portfolio-item animated fadeIn">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="img/servicios/boton-servicio-recomendador-de-producto.png" alt=""></a>
            </div>
        </div>
        <div class="col-lg-4 col-sm-12 portfolio-item animated fadeIn">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="img/servicios/boton-servicio-pesado.png" alt=""></a>
            </div>
        </div>

    </div>
</div>
    <div class="dondeComprar" style="display: none;">
        <a href="#" title="¿Dónde Comprar?"><img src="img/dondecomprar.png" height="100" width="109"></a>
    </div>
<div class="row blog">


    <div class="col-md-12">
        <center><h3 style="margin: 40px 0px 40px 0px; color:red;">Últimos artículos</h3></center>
    </div>

    <div class="row conteido-blog" >
        <div class="col-lg-4 col-sm-6 portfolio-item">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                <div class="card-body">
                    <h4 class="card-title">
                        <a href="#">¿De donde son las refacciones que se venden en nuestro país?</a>
                    </h4>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt?...</p>
                    <div class="vermas">
                        <p><span class="mas">+</span><a href="#"> Ver más</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-sm-6 portfolio-item">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                <div class="card-body">
                    <h4 class="card-title">
                        <a href="#">¿Sábes que significan los olores en tu auto?</a>
                    </h4>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae...</p>
                    <div class="vermas">
                        <p><span class="mas">+</span><a href="#"> Ver más</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 portfolio-item">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                <div class="card-body">
                    <h4 class="card-title">
                        <a href="#">¿Cómo elegir las pastillas de freno?</a>
                    </h4>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum...</p>
                    <div class="vermas">
                        <p><span class="mas">+</span><a href="#"> Ver más</a></p>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-lg-4 col-sm-6 portfolio-item">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                <div class="card-body">
                    <h4 class="card-title">
                        <a href="#">¿De donde son las refacciones que se venden en nuestro país?</a>
                    </h4>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt?...</p>
                    <div class="vermas">
                        <p><span class="mas">+</span><a href="#"> Ver más</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-sm-6 portfolio-item">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                <div class="card-body">
                    <h4 class="card-title">
                        <a href="#">¿Sábes que significan los olores en tu auto?</a>
                    </h4>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae...</p>
                    <div class="vermas">
                        <p><span class="mas">+</span><a href="#"> Ver más</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 portfolio-item">
            <div class="card h-100">
                <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                <div class="card-body">
                    <h4 class="card-title">
                        <a href="#">¿Cómo elegir las pastillas de freno?</a>
                    </h4>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum...</p>
                    <div class="vermas">
                        <p><span class="mas">+</span><a href="#"> Ver más</a></p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- /.row -->
<div class="container-fluid">

    <!-- botones servicio -->

    <div class="row conteido-companias">

        <div class="col-lg-4 col-sm-12 portfolio-item">
            <div class="card h-100 b">
                <a href="#" ><img class="card-img-top" src="img/servicios/banner-ITR.jpg" alt=""></a>
                <div class="card-body b ">
                    <h4 class="card-title cardB">
                        <a href="#"><strong>¿Qué es el institulo Tecnológico Roshfrans?</strong></a>
                    </h4>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-sm-12 portfolio-item">
            <div class="card h-100 b">
                <a href="#"><img class="card-img-top" src="img/servicios/banner-fundacion.jpg" alt=""></a>
                <div class="card-body b">
                    <h4 class="card-title cardB">
                        <a href="#"><strong>El compromiso de Fundación Roshfrans está centrado en la dignidad humana.</strong></a>
                    </h4>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-12 portfolio-item">
            <div class="card h-100 b">
                <a href="#"><img class="card-img-top" src="img/servicios/banner-EFI.jpg" alt=""></a>
                <div class="card-body b">
                    <h4 class="card-title cardB">
                        <a href="#"><strong>El compromiso de Roshfrans EFI</strong></a>
                    </h4>
                </div>
            </div>
        </div>

    </div>


</div>


<!-- demas botones -->

<div class="row carousel-magazine">

    <ul id="flexiselDemo3">
        <li><img src="img/magazine/n2.png" />N°2</li>
        <li><img src="img/magazine/n2.png" />N°2</li>
        <li><img src="img/magazine/n2.png" />N°2</li>
        <li><img src="img/magazine/n2.png" /> N°2</li>

    </ul>
</div>
<!--
<div class="row suscripcion">
    <div class="col-md-7"><h6 align="right" style="margin-top:5px; ">SUSCRÍBETE PARA RECIBIR NUESTRO NÚMERO POR CORREO</h6></div>
    <div class="col-md-5"><input type="text" id="suscribir" placeholder="  Escribe tu Email"> <button class="btn-suscribete"><strong>Suscríbete</strong></button></div>
</div>-->


<!-- /.container -->

    @stop