@extends('web.app')
@section('main-content')
<h1 class="title faq">WINNERS</h1>
    <!-- <section class=" our-winners">
        <div class="years">
              <a href="#" class="active">
                  <div class="dot">
                      <p>All</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2017</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2016</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2015</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2014</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2013</p>
                      <span><i></i></span>
                  </div>
              </a><a href="#">
                  <div class="dot">
                      <p>2012</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2011</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2010</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2009</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2008</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2007</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2006</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2005</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2004</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2003</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2002</p>
                      <span><i></i></span>
                  </div>
              </a>
              <a href="#">
                  <div class="dot">
                      <p>2001</p>
                      <span><i></i></span>
                  </div>
              </a>
              <div class="years-line"></div>
          </div>
          </section>
          <section class="filter_section">
        <div class="container">
            <div class="row">
              <div class="filter_main">
                  <button>FILTERS <i class="fa fa-angle-down" aria-hidden="true"></i></button>
              </div>
              <div class="filter_list">
                 <div class="filter_item select">
                    <div class="chosen-container chosen-container-single chosen-with-drop" style="width: 100%;" title="">
                          <a class="chosen-single select1"><span>All Styles</span><div><b></b></div></a>
                        <div class="chosen-drop option1">
                            <ul class="chosen-results" id="c_scroll">
                                <li class="active-result result-selected highlighted" data-option-array-index="0" style="">All Styles</li>
                                <li class="active-result" data-option-array-index="1" style="">200MPH</li>
                                <li class="active-result" data-option-array-index="2" style="">Classics</li>
                                <li class="active-result" data-option-array-index="3" style="">Convertibles</li>
                                <li class="active-result" data-option-array-index="4" style="">Coupes</li>
                                <li class="active-result" data-option-array-index="5" style="">Estates / 4x4</li>
                                <li class="active-result" data-option-array-index="6" style="">Grand Touring</li>
                                <li class="active-result" data-option-array-index="7" style="">Hot Hatch</li>
                                <li class="active-result" data-option-array-index="8" style="">Hybrid / Green / Electric</li>
                                <li class="active-result" data-option-array-index="9" style="">New Additions</li>
                                <li class="active-result" data-option-array-index="10" style="">Recommended</li>
                                <li class="active-result" data-option-array-index="11" style="">Saloons</li>
                                <li class="active-result" data-option-array-index="12" style="">Special Offers</li>
                                <li class="active-result" data-option-array-index="13" style="">Sports bikes</li>
                                <li class="active-result" data-option-array-index="14" style="">Superbikes</li>
                                <li class="active-result" data-option-array-index="15" style="">Track</li>
                                <li class="active-result" data-option-array-index="16" style="">Will’s Favourites</li>
                            </ul>
                        </div>
                    </div>
                 </div> 
                 <div class="filter_item select">
                    <div class="chosen-container chosen-container-single chosen-with-drop" style="width: 100%;" title="">
                          <a class="chosen-single select2"><span>All Styles</span><div><b></b></div></a>
                        <div class="chosen-drop option2">
                            <ul class="chosen-results" id="c_scroll">
                                <li class="active-result result-selected highlighted" data-option-array-index="0" style="">All Styles</li>
                                {{-- <li class="active-result" data-option-array-index="1" style="">200MPH</li>
                                <li class="active-result" data-option-array-index="2" style="">Classics</li>
                                <li class="active-result" data-option-array-index="3" style="">Convertibles</li>
                                <li class="active-result" data-option-array-index="4" style="">Coupes</li>
                                <li class="active-result" data-option-array-index="5" style="">Estates / 4x4</li>
                                <li class="active-result" data-option-array-index="6" style="">Grand Touring</li>
                                <li class="active-result" data-option-array-index="7" style="">Hot Hatch</li>
                                <li class="active-result" data-option-array-index="8" style="">Hybrid / Green / Electric</li>
                                <li class="active-result" data-option-array-index="9" style="">New Additions</li>
                                <li class="active-result" data-option-array-index="10" style="">Recommended</li>
                                <li class="active-result" data-option-array-index="11" style="">Saloons</li>
                                <li class="active-result" data-option-array-index="12" style="">Special Offers</li>
                                <li class="active-result" data-option-array-index="13" style="">Sports bikes</li>
                                <li class="active-result" data-option-array-index="14" style="">Superbikes</li>
                                <li class="active-result" data-option-array-index="15" style="">Track</li>
                                <li class="active-result" data-option-array-index="16" style="">Will’s Favourites</li> --}}
                            </ul>
                        </div>
                    </div>
                 </div>
                 <div class="filter_item select">
                    <div class="chosen-container chosen-container-single chosen-with-drop" style="width: 100%;" title="">
                          <a class="chosen-single select3"><span>All Styles</span><div><b></b></div></a>
                        <div class="chosen-drop option3">
                            <ul class="chosen-results" id="c_scroll">
                                <li class="active-result result-selected highlighted" data-option-array-index="0" style="">All Styles</li>
                                {{-- <li class="active-result" data-option-array-index="1" style="">200MPH</li>
                                <li class="active-result" data-option-array-index="2" style="">Classics</li>
                                <li class="active-result" data-option-array-index="3" style="">Convertibles</li>
                                <li class="active-result" data-option-array-index="4" style="">Coupes</li>
                                <li class="active-result" data-option-array-index="5" style="">Estates / 4x4</li>
                                <li class="active-result" data-option-array-index="6" style="">Grand Touring</li>
                                <li class="active-result" data-option-array-index="7" style="">Hot Hatch</li>
                                <li class="active-result" data-option-array-index="8" style="">Hybrid / Green / Electric</li>
                                <li class="active-result" data-option-array-index="9" style="">New Additions</li>
                                <li class="active-result" data-option-array-index="10" style="">Recommended</li>
                                <li class="active-result" data-option-array-index="11" style="">Saloons</li>
                                <li class="active-result" data-option-array-index="12" style="">Special Offers</li>
                                <li class="active-result" data-option-array-index="13" style="">Sports bikes</li>
                                <li class="active-result" data-option-array-index="14" style="">Superbikes</li>
                                <li class="active-result" data-option-array-index="15" style="">Track</li>
                                <li class="active-result" data-option-array-index="16" style="">Will’s Favourites</li> --}}
                            </ul>
                        </div>
                    </div>
                 </div> 
                 <div class="filter_item search">
                      <div class="search-wrapper">
                        <form>
                          <i class="fa fa-search" aria-hidden="true"></i>
                          <input type="text" name="focus" required="" class="search-box" placeholder="Enter search term">
                          <button class="close-icon" type="reset"></button>
                        </form>
                      </div>
                 </div>
                 <div class="filter_item reset_div">
                    <a href="#" class="reset_btn"><i class="fa fa-refresh" aria-hidden="true"></i> Reset</a>
                 </div>
                 <div class="filter_item winners_btn">
                    <a href="#" class="btn">Winners map</a>
                 </div>
               </div>
            </div>
    
        </div>
    </section> -->
<div class="text-center"><h3><b>Will you be appearing here soon?</b></h3></div>
<div class="container">
    <ul class="timeline">
        <!-- <li>
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>March 2018</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <iframe width="100%" height="250" src="{{ url('public/uploads/video/Winabike_march_winner_varun.mp4') }}" frameborder="0" allowfullscreen=""></iframe>
                </div>
                <div class="tl-body">
                    <h3>Imagine winning the bike of your dreams!</h3>
                </div>
            </div>
        </li> -->
        <li class="timeline-inverted">
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>March 2018</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <iframe width="100%" height="250" src="https://www.youtube.com/embed/fE9eSeP9i_Q" frameborder="0" allowfullscreen=""></iframe>    
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    <h3>Imagine winning the bike of your dreams!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>
       <li>
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>March 2018</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <img src="{{ url('public/img/march_winner.jpg') }}">
                </div>
                <div class="tl-body">
                    <!--                <h3>Imagine winning the bike of your dreams!</h3>-->
                </div>
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Feb 2018</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <iframe width="100%" height="250" src="https://www.youtube.com/embed/BCpYJhm9b54" frameborder="0" allowfullscreen=""></iframe>    
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    <h3>Imagine winning the bike of your dreams!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>
        <li>
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Jan 2018</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <img src="{{ url('public/img/The-missing-Raghavendra-Raghu.png') }}">
                </div>
                <div class="tl-body">
                    <!--                <h3>Imagine winning the bike of your dreams!</h3>-->
                </div>
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Jan 2018</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">

                    <img src="{{ url('public/img/jan_winner.jpg') }}">
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    <h3>Next winner 31st March!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>
        <li>
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Nov 2017</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <iframe width="100%" height="250" src="https://www.youtube.com/embed/4mAU33uGETI?rel=0" frameborder="0" allowfullscreen=""></iframe>
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    {{-- <h3>Our next winner is on November 10<sup>th</sup>. in the meantime enjoy the video!</h3> --}}
                    <h3>Imagine winning the bike of your dreams!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Nov 2017</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    {{-- <iframe width="100%" height="250" src="https://www.youtube.com/embed/4mAU33uGETI" frameborder="0" allowfullscreen=""></iframe> --}}
                    <img src="{{ url('img/november_winner.jpg') }}">
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    <h3>Next winner December 31st!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>

        <li>
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Aug 2017</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    <iframe width="100%" height="250" src="https://www.youtube.com/embed/rre0ssVQW8o?rel=0" frameborder="0" allowfullscreen=""></iframe>
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    {{-- <h3>Our next winner is on November 10<sup>th</sup>. in the meantime enjoy the video!</h3> --}}
                    <h3>Imagine winning the bike of your dreams!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="tl-circ wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></div>
            <div class="timeline_date wow bounceIn" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"><span>Aug 2017</span></div>
            <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" style="visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
                <div class="tl-heading">
                    {{-- <iframe width="100%" height="250" src="https://www.youtube.com/embed/rre0ssVQW8o" frameborder="0" allowfullscreen=""></iframe> --}}
                    <img src="{{ url('img/winner_biker.jpg') }}">
                </div>
                <div class="tl-body">
                    <!--<h5>Winner 384 - Robert Dowdell</h5>-->
                    <h3>Next winner November 12th!</h3>
                    <!-- <h5>Week 33 2017</h5>-->
                    <!--<div class="call_to_action">
                        <a class="btn" href="#">VIEW FULL RESULTS »</a>
                    </div>-->
                </div>
            </div>
        </li>

    </ul>
</div>
@endsection