@extends('layouts.front')
@section('title', 'Student Testimonials and Reviews | TRCOA')
@section('description', 'LEARN how to become an Audio Engineer, Music Producer' )
@section('scrolled', 'scrolled')
@section('content')

<section class="relative pt sm-pb background-gray">
    <div class="container">
        <div class="row">
            <div class="col-md-12 font-16 t-center">
                <div class="custom-slider container-sm qdr-controls-2 c-grab block-img" data-slick='{"dots": true, "autoplay": true, "autoplaySpeed": 5000, "adaptiveHeight": true, "arrows": true, "fade": false, "draggable":true, "slidesToShow": 1, "slidesToScroll": 1, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 1}}]}'>
                    <div id="youtube-video">
                        <div class="js-player" data-type="youtube" data-video-id="knV9ZTbDMUM"></div>
                    </div>

                    <div id="youtube-video">
                        <div class="js-player" data-type="youtube" data-video-id="MamQmOhn_aQ"></div>
                    </div>

                    <div id="youtube-video">
                        <div class="js-player" data-type="youtube" data-video-id="BN9xdZBpfD4"></div>
                    </div>

                    <div id="youtube-video">
                        <div class="js-player" data-type="youtube" data-video-id="ltveYnmM3IY"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="relative sm-pt sm-pb">
    <div class="container">
        <div class="row">
            <div class="col-md-12 font-16 t-center">
                <h3 class="font-24 page-title dark-title normal t-center">
                    Student Business Websites
                </h3>

                <div class="title-strips dark"></div>

                <p class="t-center">
                    At TRCOA you will build your own business concept, plan and website.<br>
                    Here are some examples of TRCOA students.
                </p><br><br>

                <div class="custom-slider container block-img qdr-controls c-grab" data-slick='{"dots": false, "autoplay": true, "autoplaySpeed": 5000, "arrows": true, "fade": false, "draggable":true, "slidesToShow": 4, "slidesToScroll": 1}'>
                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/sewellstudios.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Robert Sewell</span><br>
                                            <a class="colored" href="https://sewellstudios.com" target="_blank">sewellstudios.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/phospheneproductions.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Carter Greeves</span><br>
                                            <a class="colored" href="https://phospheneproductions.com" target="_blank">phospheneproductions.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/toycarstudios.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Justin Green</span><br>
                                            <a class="colored" href="https://toycarstudios.com" target="_blank">toycarstudios.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/floyd1studios.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Brandon Sullivan</span><br>
                                            <a class="colored" href="https://floyd1studios.com" target="_blank">floyd1studios.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/zeus808.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Zeus De Anda</span><br>
                                            <a class="colored" href="https://zeus808.com" target="_blank">zeus808.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/kaylinkarr.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Kaylin Karr</span><br>
                                            <a class="colored" href="https://kaylinkarr.com" target="_blank">kaylinkarr.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/enochianentertainment.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Mark Schroth</span><br>
                                            <a class="colored" href="https://enochianentertainment.com" target="_blank">enochianentertainment.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>

                    <div class="gap-10">
                        <div class="cbp-item">
                            <span class="cbp-caption">
                                <div class="cbp-caption-defaultWrap">
                                    <img src="{{ url('images/studentsites/tsukuyomiproductions.jpg') }}" alt="">
                                </div>
                                <div class="cbp-caption-activeWrap background-gray">
                                    <div class="cbp-l-caption-alignCenter">
                                        <div class="cbp-l-caption-body">
                                            <span class="bold dark">Brock Long</span><br>
                                            <a class="colored" href="https://tsukuyomiproductions.com" target="_blank">tsukuyomiproductions.com</a>
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="background-gray t-center">
    @include('components.clients')
</div>

@stop

@push('scripts')
<!-- For Video Players -->
<script src="{{ url('js/components/plyr.js') }}"></script>
<!-- END JS FILES -->


<script type="text/javascript">
    (function() {
        // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
        // e.g. just plyr.setup(); and leave it at that if you have no need for events
        var instances = plyr.setup({
        // Output to console
        debug: false
        });

        // Get an element
        function get(selector) {
        return document.querySelector(selector);
        }

        // Loop through each instance
        instances.forEach(function(instance) {
        // Play
        $('.js-play').on('click', function() {
            instance.play();
        });

        // Pause
        $('.js-pause').on('click', function() {
            instance.pause();
        });

        // Stop
        $('.js-stop').on('click', function() {
            instance.stop();
        });

        // Rewind
        $('.js-rewind').on('click', function() {
            instance.rewind();
        });

        // Forward
        $('.js-forward').on('click', function() {
            instance.forward();
        });
        });
    })();
</script>
@endpush