@extends('layouts.base')

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

@section('title')
Diferénciate 
@stop
@section('description')
El portal del alumno facilita el acceso a las principales herramientas de estudio: banco de clases, acceso a la plataforma y blogs ECCA
@stop

@section('content')
{!! Breadcrumbs::render('diferenciate') !!}
<div class="image-viewer hidden">
    <div style="max-width: 768px; height: auto; margin:auto; padding-top: 50px;">
        <div id="videoContainer" class="embed-responsive embed-responsive-16by9">
        </div>
    </div>
</div>

<div class="container">

    {{-- titular centrado --}}
    <div class="titulo_categoria">
        <span>
            <h1 style="text-transform: none; color: #312e89; font-size: 45px">
                Diferéncia<span style="color: #ec1814; display: inline; font-weight: 400">TE</span>
            </h1>
        </span>
    </div>

    {{-- sección 1: información general --}}
    <div class="titulo">
        Información general
    </div>

    {{-- dividir en 2 columnas --}}
    <div class="row">

        {{-- sección 1, columna izqda --}}         
        <div class="col-sm-6 info-study">
            <p>
                El programa Diferencia<span style="color: #ec1814">TE:</span> se enmarca dentro de un programa internacional llamado <b>“Hacia un
                mundo digital y sostenible”</b> financiado por Accenture, donde participan más de 20 países.
            </p>
            <p>
                Ofrecemos tres cursos cortos, sencillos y becados al 100%. Es una formación en línea para el desarrollo de competencias digitales
                y habilidades personales y profesionales que te ayudarán en tu proyecto de futuro.
            </p>
            <p>
                Estos cursos pretenden ayudarte a fortalecer tus habilidades y destrezas, lo que te permitirá:
                <ul>
                    <li>Conocer en qué consiste la competencia del autocontrol y cómo está vinculada al proceso de búsqueda de empleo y al ámbito
                    laboral.</li>
                    <li>Identificar qué comportamientos están asociados al autocontrol y qué beneficios reportará su desarrollo laboral y personal,
                    trabajando comportamientos asociados en situaciones cotidianas.</li>
                    <li>Aprender a desenvolverse de forma segura por el mundo digital.</li>
                    <li>Conocer las ventajas que ofrece internet.</li>
                    <li>Valorar el uso de varios dispositivos digitales para acceder a los servicios de la red.</li>
                    <li>Aprender a proteger la identidad digital.</li>
                    <li>Conocer la evolución del comercio desde los modelos más tradicionales hasta el comercio electrónico.</li>
                    <li>Conocer las características, ventajas e inconvenientes del comercio electrónico.</li>
                    <li>Conocer las tecnologías y los servicios digitales necesarios para la compra-venta <i>online</i>.</li>
               </ul>
            </p>
        </div>

        {{-- sección 1, columna dcha --}}
        <div class="col-sm-6">
            <img class="img-responsive" src="{{ asset('img/meme_diferenciate_202203.jpg') }}" title="Financiación Accenture">
            <p>
                <br><br>
                <center>
                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSf91Y_zHyfufmzBqtn_WXygcApI0CcUJbTa41pZ3OrZOX-eAQ/viewform"
                    class="btn btn-large btn-primary btnOrange" target="_blank">
                    <h3>Preincríbete <span>AQUÍ</h3>
                    </a>
                </center>
            </p>
        </div>
      
    </div>
    {{-- fin sección 1 --}}

    <div class="spacer"></div>

    {{-- sección 2: video --}}
{{-- <!--
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/s9NzL_kG2nw"></iframe>
            </div>
        </div>
    </div>
--> --}}

    <div class="spacer"></div>

    {{-- seccion 3: informacion de los cursos --}}
    <div class="row">
        <div class="titulo">
            Información de los cursos
        </div>
        <br>
        {{-- declarar 3 pestañas --}}
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#autocontrol">Autocontrol</a></li>
            <li><a data-toggle="tab" href="#serdigital">Ser Digital</a></li>
            <li><a data-toggle="tab" href="#elmayorescaparate">El mayor escaparate del mundo</a></li>
        </ul>

        {{-- contenidos de las 3 pestañas --}}
        <div class="tab-content">

            {{-- pestaña 1 --}}
            <div id="autocontrol" class="tab-pane fade in active">
                <h3>Contenidos del curso "Autocontrol" (10 horas)</h3>
                <br>
                <div class="row">
                    <div class="col-md-8">
                        <ol>
                            <li>Conocer en qué consiste la competencia del autocontrol y cómo está vinculada al proceso de búsqueda de empleo
                            y al ámbito laboral.</li>
                            <li>Identificar qué comportamientos están asociados al autocontrol y qué beneficios reportará su desarrollo laboral
                            y personal.</li>
                            <li>¿Perfección? ¡No, gracias!</li>
                            <li>Trabajar los comportamientos asociados al autocontrol en diversas situaciones cotidianas.</li>
                        </ol>
                    </div>
                    <div class="col-md-4">
                        <img class="img-responsive" src="{{ asset('img/portada_autocontrol.jpg') }}" title="Autocontrol">
                    </div>
                </div>
            </div>

            {{-- pestaña 2 --}}
            <div id="serdigital" class="tab-pane fade in">
                <h3>Contenidos del curso "Ser digital" (10 horas)</h3>
                <br>
                <div class="row">
                    <div class="col-md-8">
                        <ol>
                            <li>Aprender a desenvolverse de forma segura por el mundo digital.</li>
                        </ol>
                     </div>
                     <div class="col-md-4">
                        <img class="img-responsive" src="{{ asset('img/portada_serDigital.jpg') }}" title="Ser Digital">
                     </div>
                </div>
            </div>

            {{-- pestaña 3 --}}
            <div id="elmayorescaparate" class="tab-pane fade in">
                <h3>Contenidos del curso "El mayor escaparate del Mundo" (10 horas)</h3>
                <br>
                <div class="row">
                    <div class="col-md-8">
                        <ol>
                            <li>Conocer la evolución del comercio desde los modelos más tradicionales hasta el comercio electrónico.</li>
                            <li>Conocer las características, ventajas e inconvenientes del comercio electrónico.</li>
                            <li>Conocer las tecnologías y los servicios digitales necesarios para la compra-venta online.</li>
                            <li>Conocer las principales plataformas de comercio electrónico.</li>
                        </ol>
                    </div>
                    <div class="col-md-4">
                            <img class="img-responsive" src="{{ asset('img/portada_elMayorEscaparate.jpg') }}" title="El Mayor Escaparate">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {{-- fin pestañas --}

    </div>
    {{-- fin sección 3 --}

    <div class="row">
        <center>
            <h1>¿A qué esperas?... ¡¡DIFERÉNCIATE!!</h1>
        </center>
    </div>

    <div class="spacer"></div>

    {{-- sección 4: objetivo --}}
{{-- <!--
    <div class="row">
        <div class="col-md-3">
            <center>
                <img width="200" src="{{ asset('img/diferenciate2.jpg') }}" title="Financiación Accenture">
            </center>
        </div>
        <div class="col-md-9 info-study">
            <br>
            <p>
                Estos cursos pretenden ayudarle a fortalecer sus habilidades y destrezas, lo que le permitirá:
            </p>
            <ul>
                <li><p>Desarrollar su potencial a través del desarrollo de su seguridad personal.</p>                                           </li>
                <li><p>Enfrentar las distintas situaciones cotidianas de forma eficaz, a través de la gestión adecuada de sus emociones. </p>   </li>
                <li><p>Establecer relaciones sociales y profesionales sanas y positivas, fortaleciendo su red de apoyo.</p>                     </li>
                <li><p>Orientarse hacia la consecución de sus metas y objetivos, persistiendo ante los obstáculos. </p>                         </li>
            </ul>
        </div>
    </div>
--> --}}

    <div class="spacer"></div>

    {{-- logos al pie --}}
    <div class="row">
        <center>
            <img style="border-radius: 0px; height: auto; opacity: 0.8" width="250" src="{{ asset('img/accenture.jpg') }}" title="Financiación Accenture">
        </center>
    </div>

    <div class="spacer"></div>

</div>

<!-- /.row -->
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}
<style>
   .image-viewer{
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      top: 0px;
      bottom: 0px;
      z-index: 9999;
   }
</style>
<script>
   $("#videoYoutube").click(function () {
      $("#videoContainer").html('<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTgU3rdrr14"></iframe>');
      $(".image-viewer").removeClass("hidden");
   });
   $(".image-viewer").click(function () {
      $("#videoContainer").html('');
      $(this).addClass("hidden");
   })
</script>
@stop