@include('temp2/common/header')
<!--main start-->
    <!-- Start Hero Slider -->
    <div class="hero-slider heroflex flexslider clearfix" data-autoplay="yes" data-pagination="no" data-arrows="yes" data-style="fade" data-speed="7000" data-pause="yes">
      	<ul class="slides">
          @foreach($bannerdata as $bannerdata)
            @if(!empty($bannerdata->image))
                <li class="parallax" style="background-image:url({{url($bannerdata->image)}})!important;background-size:100% AUTO;">
                <div class="flex-caption" data-appear-animation="fadeInRight" data-appear-animation-delay="500">
                @if(!empty($bannerdata->imagetitle))
                <strong>{{($bannerdata->imagetitle)}}</strong>
                @endif
                @if(!empty($bannerdata->description))
                <p style="font-size:20px;">{!! $bannerdata->description !!}</p>
                @endif
                </div>
            @endif 
          @endforeach         	
      	</ul>
        <canvas id="canvas-animation"></canvas>
    </div>
    <!-- End Hero Slider -->
    <!--<div class="upcoming-event-bar event-dynamic">
        <div class="container">
            <div class="row">
            	<div class="col-md-5 col-sm-5">
                	<span class="label label-primary">Upcoming Event</span>
                	<h3><a href="single-event.html" class="event-title">Celebrating the youth participation</a></h3>
                   	<span class="meta-data">On <span class="event-date">13 Jul, 15</span> at <span class="event-time">08:00 AM</span> at</span><span class="meta-data event-location"> <span class="event-location-address">State Route, Madison US</span></span>
                </div>
                <div class="col-md-5 col-sm-7">
                    <div id="counter" class="counter clearfix" data-date="July 13, 2015">
                        <div class="timer-col"> <span id="days"></span> <span class="timer-type">Days</span> </div>
                        <div class="timer-col"> <span id="hours"></span> <span class="timer-type">Hours</span> </div>
                        <div class="timer-col"> <span id="minutes"></span> <span class="timer-type">Minutes</span> </div>
                        <div class="timer-col"> <span id="seconds"></span> <span class="timer-type">Seconds</span> </div>
                    </div>
                </div>
                <div class="col-md-2 text-align-right">
                    <ul class="action-buttons">
                        <li title="Share event"><a href="#" data-trigger="focus" data-placement="top" data-content="" data-toggle="popover" data-original-title="Share Event" class="event-share-link"><i class="icon-share"></i></a></li>
                        <li title="Get directions" class="hidden-xs"><a href="#" class="cover-overlay-trigger event-direction-link"><i class="icon-compass"></i></a></li>
                        <li title="Contact event manager"><a href="#" data-toggle="modal" data-target="#Econtact" class="event-contact-link"><i class="icon-mail"></i></a></li>
                    </ul>
                    <a href="#" class="btn btn-primary btn-sm event-tickets event-register-button">Register</a>
                </div>
            </div>
        </div>
    </div>-->
    <!-- background-image: url(images/decor/ser.png);" -->
    <div class="main">
        <div class="lead-content clearfix" style="margin-top:-131px; background-color:black; ">
            <div class="lead-content-wrapper" >
                <div class="container">
                    <div class="row">
                        <!-- <h3>Our Services</h3>   -->
                        @foreach($service as $service)                
                        <div class="col-md-3 col-sm-2 featured card">                        
                            <center>
                            <figure>                 
                            @if(!empty($service->image))                      
                                <a href="{{url($service->image)}}" data-rel="prettyPhoto" class="media-box"><img src="{{url($service->image)}}"></a>
                            @endif                        
                            </figure>
                            <h3 style="height:50px;">{{$service->title}}</h3>
                            <p style="height:100px;">{!! substr($service->description,0,200) !!}</p>
                            <a href="{{url($service->route.'/'.$service->id)}}"><button class="btn btn-danger"><b>VIEW</b></button></a></center>
                        </div> 
                    @endforeach                  
                    </div>
                </div>
            </div>
        </div>

    <!-- Lead Content -->
    <!-- <div class="lead-content clearfix">
    	<div class="lead-content-wrapper">
    		<div class="container">
            	<div class="row"><a class="pull-right basic-link">All Products</a>
                <h3>Our Products</h3>
                @foreach($product as $product)  
                    <div class="col-md-3 col-sm-4 featured-block card">                        
                        <figure>
                        @if(!empty($product->image2))
                        	<a href=""><img src="{{url($product->image2)}}"></a>
                        @endif
                    	</figure>
                        <a href="{{url('/singleproduct/'.$product->id)}}"><h3>{{substr($product->productname,0,20)}}</h3></a>
                   		<p>{!! substr($product->description,0,100) !!}</p>
                        <a href="" style="width: 42%; line-height: 0; font-weight:500;" class="btn btn-danger btn-sm"><span style="font-size:13px;">Buy Now At  </span><span style="font-size:20px; color:black;">&nbsp;&nbsp;&nbsp;<i class="fa fa-usd" aria-hidden="true"></i>{{$product->pricesale}}</span></a>
                    </div>
                @endforeach  
                                  
                </div>
        	</div>
        </div>
    </div> -->
    <!-- Start Body Content -->
    <!-- style="background-image: url(images/decor/eve.png);" -->
  	<div class="main" role="main" style="background-image: linear-gradient(278deg, #ff0000e0, #e2d300a6);">
    	<div id="content" class="content full">
        
        	<div class="container">
            	<div class="row">                    
                    <div class="col-md-12 col-sm-7">
                        <div class="element-block events-listing">
                            <div class="events-listing-header">
                                <a href="{{'allevent'}}" class="pull-right basic-link" style="color:black; font-weight: 600;">All Events</a>
                                <h3 class="element-title" style="color:black; font-weight: 600;" >Upcoming Events</h3>
                                <hr class="sm">
                            </div>
                            <div class="events-listing-content" style="background: #00000085; padding: 20px; border-top-left-radius: 45px; box-shadow: 0 0px 50px #0000005c; border-bottom-right-radius: 40px;">
                            @foreach($allevent as $allevent)
                                <div class="event-list-item event-dynamic evtbox" style="margin: 10px; border-bottom: 4px groove;">
                                	<div class="event-list-item-date">                                    	
                                        <figure>
                                        @if(empty($allevent->youtube))
                                            @if(!empty($allevent->image))
                                                <a href="{{url($allevent->image)}}" data-rel="prettyPhoto" class="media-box"><img style="border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px;" class="evtimg" src="{{url($allevent->image)}}"></a>
                                            @endif
                                        @else
                                            <iframe height="150" width="150" src="{{$allevent->youtube}}"></iframe>
                                        @endif
                                        </figure>
                                        
                                    </div>
                                    <div class="event-list-item-info">
                                    	<div class="lined-info">
                                        	<a class="event-title" ><span style="font-size:22px; color:white">{{$allevent->eventtitle}}</span></a>
                                        </div>
                                    	<div class="lined-info">
                                        	<span class="meta-data" style="font-size:15px; color:white;"><i class="fa fa-clock-o"></i> <span class="event-time">AT {{$allevent->eventetime}} ON {{date('M d Y',strtotime($allevent->eventedate))}} </span></span>
                                        </div>
                                    	<div class="lined-info event-location">
                                        	<span class="meta-data" style="font-size:15px; color:white;"><span class="event-location-address">{!! substr($allevent->description,0,150) !!}<a href="{{url('/singleevent/'.$allevent->id)}}" class="basic-link" style="font-weight: 700; color: lightskyblue;">....<u>Continue reading</u></a></span></span>
                                        </div>
                                    </div>
                                    <div class="event-list-item-actions">
                                    	<a href="{{url('/contribute/'.$allevent->id)}}" class="btn btn-default btn-transparent" style="border-color: white; color: white;" >Contribute</a>
                                    	<ul class="action-buttons">
                                        	<li title="Share event"><a href="#" data-trigger="focus" data-placement="top" data-content="" data-toggle="popover" data-original-title="Share Event" class="event-share-link" style="color:white;"><i class="icon-share"></i></a></li>
                                        	<li title="Get directions" class="hidden-xs"><a href="#" class="cover-overlay-trigger event-direction-link" style="color:white;"><i class="icon-compass"></i></a></li>
                                        	<li title="Contact event manager"><a href="#" data-toggle="modal" data-target="#Econtact" class="event-contact-link" style="color:white;"><i class="icon-mail"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            @endforeach                                
                            </div>
                        </div>
                    </div>
                </div>
        	</div>           

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

               <style>
.evtimg:hover{
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.evtbox:hover{
    transform: scale(1.05);
}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 800px; /* Should be removed. Only for demonstration */
}
.column1 {
  float: left;
  width: 49%;
  height: 400px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */

.bottom {
  position: absolute;
  top: 60%;
  left: 16px;
  
  line-height: 1;
  position: relative;
  text-align:left;
  color: white;
  font-family: 'Times New Roman', serif;
}
</style>
<div class="row">
  <div class="column" style="background-image:url({{url($article1->image)}});">
  <div class="bottom" style="top: 70%; font-size:60px; padding: 20px;">{{$article1->title}}</div>
    <a href="{{url('/singlearticle/'.$article1->id)}}"><button class="btn btn-danger" style="margin:520px 0px; float:right;"><b>Read More</b></button></a>
  </div>
  @foreach($articles as $articles)
  <div class="column1" style="background-image:url({{url($articles->image)}});">
  <div class="bottom" style="font-size:52px; padding: 20px;">{{$articles->title}}</div>
  <a href="{{url('/singlearticle/'.$articles->id)}}"><button class="btn btn-danger" style="margin:200px 25px; float:right;"><b>Read More</b></button></a>
  </div>
  @endforeach
</div>
           	<div class="lgray-bg padding-tb45">
            	<div class="container blogcont">
                    <div class="col">
                        <div class="col-md-12"><a href="{{'blog'}}" class="pull-right basic-link">All Blogs</a>
                            <h3>From our Blogs</h3>
                            <hr class="sm">
                            <div class="col">                                
                                <div class="col-md-12">
                                    <ul class="blog-classic-listing">
                                        <div class="row">
                                    @if(!empty($blog))
                                    @foreach($blog as $blog)
                                            <div class="col-sm-4">
                                            <li class="blogli" style="font-family: Volkhov;">
                                                <div class="">
                                                @if(empty($blog->youtube))
                                                    @if(!empty($blog->image))
                                                    <div href="{{ url($blog->image)}}" data-rel="prettyPhoto" class="image-box">                                                        
                                                        <img class="imgred" src="{{ url($blog->image)}}" alt="">
                                                    </div>
                                                    @endif   
                                                @else
                                                    <iframe height="206" width="366" style="border-top-left-radius: 20px; border-top-right-radius: 20px;" src="{{$blog->youtube}}"></iframe>
                                                @endif 
                                                </div>                                                 
                                                
                                                <div class="blogdate"><center><span class=""><b>13</b> Apr</span></center></div>
                                              
                                                <div class="blogtides">
                                                    <a ><strong class="post-title" style="font-size:30px;">{!! substr($blog->title,0,16) !!}...</strong></a>
                                                    <div class="meta-data">BY ADMIN ON {{date('M d Y',strtotime($blog->created_at))}} in General</div>
                                                    <p>{!! substr($blog->metadescription,0,100) !!}</p>
                                                    <center><div style="width:47%"><a  href="{{url('/singleblog/'.$blog->id)}}" style="color:black"><span  class="contread">Continue reading </span><i class="fa fa-arrow-right" aria-hidden="true"></i></a> </div></center>
                                                </div>
                                            </div>
                                        </li>                                        
                                    @endforeach
                                    @endif  
                                        </div>                                      
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   	</div>
       
    <!-- End Body Content -->
    <!-- Gallery updates -->
    <div class="gallery-updates cols5 clearfix">
    	<ul>
        @if(!empty($gallery))
        @foreach($gallery as $gallery)
            @if(!empty($gallery->image))
        	<li class="format-image"><a href="{{ url($gallery->image)}}" data-rel="prettyPhoto" class="media-box"><img src="{{ url($gallery->image)}}" alt=""></a></li>
            @endif 
		@endforeach
        @endif
            <!--<li class="format-image"><a href="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" data-rel="prettyPhoto" class="media-box"><img src="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" alt=""></a></li>
        	<li class="format-standard">
            	<div class="flexslider galleryflex" data-autoplay="yes" data-pagination="yes" data-arrows="no" data-style="slide" data-pause="yes">
                    <ul class="slides">
                      	<li class="item"><a href="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" data-rel="prettyPhoto[postname1]"><img src="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" alt=""></a></li>
                      	<li class="item"><a href="https://via.placeholder.com/800x500?text=IMAGE+PLACEHOLDER" data-rel="prettyPhoto[postname1]"><img src="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" alt=""></a></li>
              		</ul>
               	</div>
          	</li>-->
        </ul>
        <div class="gallery-updates-overlay">
        	<div class="container">
            	<i class="icon-multiple-image"></i>
                <h2>Our Previous Events</h2>
            </div>
        </div>
    </div>
    
<!--main end-->
@include('temp2/common/footer')