@extends('layouts.main_page_website')
 <style>
	 .element {
	display: block;
	position: absolute;
	top: 10px;
	right:-80px;
	top: -15px\0/; /* ie8 and 9 */
	right:-32px\0/; /* ie8 and 9 */
	-ms-transform:rotate(45deg); /* IE9 */
	-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
	-o-transform: rotate(45deg);  /* Opera 10.5 */
	-webkit-transform: rotate(45deg);  /* Saf3.1+ */
	transform: rotate(45deg);  /* Newer browsers */
	/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); *//* IE6,IE7, but produces nasty results, so I disabled it */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

   :root .element { top: 15px\0/IE9; }  /* back to right value in IE9 */


.image-label{
  width:200px;
  height: 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  /* border-radius:100%; */
  background:#FFCC33;
  color: black;
  font-size:11px;

  position:absolute;
  /* transform:translate(50%,-50%); */
}
 </style>
@section('content')
<div class="tg-banner tg-haslayout" style="height: 30%;">
			<div class="tg-imglayer">
				<img src="images/bg-pattran.png" alt="image desctription">
			</div>
			<div class="container" >
				<div class="row">
					<div class="tg-banner-content tg-haslayout">
						<div class="tg-pagetitle animated flipInY">
							<h1>Media</h1>
						</div>
						<ol class="tg-breadcrumb">
							<!-- <li><a href="#">Home</a></li> -->
							<li class="active">News and blogs</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
		<!--************************************
				Banner End
		*************************************-->
		<!--************************************
				Main Start
		*************************************-->
		<main id="tg-main" class="tg-main tg-haslayout">

			<!--************************************
					GFF News and Blogs section start
			*************************************-->
			<section class="tg-main-section tg-haslayout">
				<div class="container">
					<div class="tg-section-name">
						<h2>GFF News and Blogs</h2>
					</div>
					<div class="row">
					<div class="col-sm-11 col-xs-11 pull-right">

							<div class="tg-prohistory tg-haslayout">
								<div class="row">
									@forelse ($nb_information as $nb_info)
									<div class="col-md-4 col-sm-6 col-xs-6 animated bounceIn" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
										<article class="tg-post">
											<figure class="tg-postimg">
												<a href="/media-nb-preview/{{$nb_info->id}}">
													<img src="{{$nb_info->img_path}}" alt="{{$nb_info->type}}.img">
												<div class="element image-label">
													<b><span>{{$nb_info->type}}</span></b>
												  </div>
												</a>
												<figcaption>
													<ul class="tg-postmetadata">
														<li><a href="#">posted on {{$nb_info->created_at}}</a></li>
													</ul>
												</figcaption>
											</figure>

											<div class="tg-description">
												<p><b><a href="/media-nb-preview/{{$nb_info->id}}">{{$nb_info->title}}</a></b></p>
											</div>
											<div class="tg-description">
												<p>{{$nb_info->sub_title}}</p>
											</div>
										</article>
									</div>
									@empty
									<div style="text-align: center">
										<h6 style="color: red">Not News/Blogs yet</h6>
									</div>
									@endforelse
								</div>
								<div style="text-align: center">
									{{ $nb_information->links() }}

								</div>
							</div>


						</div>
					</div>
				</div>
			</section>
			<!--************************************
					GFF News and Blogs section end
			*************************************-->

			<!--************************************
					Statistics Start
			*************************************-->
			<section class="tg-main-section tg-haslayout tg-bgdark" style="display: ">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 col-xs-12">
							<div class="tg-statistics">
								<div class="tg-statistic tg-goals">
									<span class="tg-icon icon-Icon1"></span>
									<h2><span class="tg-statistic-count" data-from="0" data-to="2700" data-speed="8000" data-refresh-interval="50">2700</span></h2>
									<h3>Goals</h3>
								</div>
								<div class="tg-statistic tg-activeplayers">
									<span class="tg-icon icon-Icon2"></span>
									<h2><span class="tg-statistic-count" data-from="0" data-to="1673" data-speed="8000" data-refresh-interval="50">1673</span></h2>
									<h3>Active Players</h3>
								</div>
								<div class="tg-statistic tg-activeteams">
									<span class="tg-icon icon-Icon3"></span>
									<h2><span class="tg-statistic-count" data-from="0" data-to="236" data-speed="8000" data-refresh-interval="50">236</span></h2>
									<h3>Active Teams</h3>
								</div>
								<div class="tg-statistic tg-earnedawards">
									<span class="tg-icon icon-Icon4"></span>
									<h2><span class="tg-statistic-count" data-from="0" data-to="197" data-speed="8000" data-refresh-interval="50">197</span></h2>
									<h3>Earned Awards</h3>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--************************************
					Statistics End
			*************************************-->
				<!--************************************
					About Us Start
			*************************************-->
			<section class="tg-main-section tg-haslayout" style="display: none">
				<div class="container">
					<div class="tg-section-name">
						<h2>About pro soccer</h2>
					</div>
					<div class="col-sm-11 col-xs-11 pull-right">
						<div class="row">
							<div class="tg-aboutussection">
								<div class="row">
									<div class="col-md-6 col-sm-12 col-xs-12">
										<figure>
											<img src="images/img-01.jpg" alt="image description" class="element">
										</figure>
									</div>
									<div class="col-md-6 col-sm-12 col-xs-12">
										<div class="tg-contentbox">
											<div class="tg-section-heading"><h2>consectetur adipisicing elit sed do eiusmid tempor incididunt labore</h2></div>
											<div class="tg-description">
												<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt utia labore et dolore magna aliqua enim ad minim veniam quistrud on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur cepteur sint occaecat.</p>
											</div>
											<div class="tg-btnbox">
												<a class="tg-btn" href="#"><span>read more</span></a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--************************************
					About Us End
			*************************************-->
			<!--************************************
					Video Start
			*************************************-->
			<section class="tg-videobox tg-haslayout" style="display: none">
				<figure>
					<img src="images/bg-video.jpg" alt="image description" style="width: 100%;">
					<figcaption>
					<a class="tg-playbtn" href="https://www.youtube.com/watch?v=Jb1AGLtKX-0&feature=emb_logo?iframe=true" data-rel="prettyPhoto[iframe]"></a>

						<!-- <h2>accusantium doloremque lauda totam rem aperiam ipsa</h2> -->
					</figcaption>
				</figure>
			</section>
			<!--************************************
					Video End
			*************************************-->
			<!--************************************
					Top Rated Player Start
			*************************************-->
			<section class="tg-main-section tg-haslayout" style="display: none">
				<div class="container">
					<div class="tg-section-name">
						<h2>top Rated Player</h2>
					</div>
					<div class="col-sm-11 col-xs-11 pull-right">
						<div class="row">
							<div class="tg-topratedplayer tg-haslayout">
								<div class="row">
									<div class="col-md-7 col-sm-12 col-xs-12">
										<div id="tg-playerscrollbar" class="tg-players tg-playerscrollbar">
											<div class="tg-player">
												<div class="col-sm-6 col-xs-6 pull-right">
													<div class="tg-playcontent">
														<a class="tg-theme-tag" href="#">SWEEPER</a>
														<h3><a href="#">Hustlin’ Owls</a></h3>
														<span class="tg-stars"><span></span></span>
														<div class="tg-description">
															<p>Incididunt utia labore et dolore siti magna aliqua adinim lipat</p>
														</div>
														<ul class="tg-socialicons">
															<li><a href="#"><i class="fa fa-facebook"></i></a></li>
															<li><a href="#"><i class="fa fa-twitter"></i></a></li>
															<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
															<li><a href="#"><i class="fa fa-dribbble"	></i></a></li>
														</ul>
													</div>
												</div>
												<div class="col-sm-6 col-xs-6">
													<figure>
														<a href="#">
															<img src="images/player/img-01.png" alt="image description">
														</a>
													</figure>
												</div>
											</div>
											<div class="tg-player">
												<div class="col-sm-6 col-xs-6 pull-right">
													<div class="tg-playcontent">
														<a class="tg-theme-tag" href="#">SWEEPER</a>
														<h3><a href="#">Hustlin’ Owls</a></h3>
														<span class="tg-stars"><span></span></span>
														<div class="tg-description">
															<p>Incididunt utia labore et dolore siti magna aliqua adinim lipat</p>
														</div>
														<ul class="tg-socialicons">
															<li><a href="#"><i class="fa fa-facebook"></i></a></li>
															<li><a href="#"><i class="fa fa-twitter"></i></a></li>
															<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
															<li><a href="#"><i class="fa fa-dribbble"	></i></a></li>
														</ul>
													</div>
												</div>
												<div class="col-sm-6 col-xs-6">
													<figure>
														<a href="#">
															<img src="images/player/img-02.png" alt="image description">
														</a>
													</figure>
												</div>
											</div>
											<div class="tg-player">
												<div class="col-sm-6 col-xs-6 pull-right">
													<div class="tg-playcontent">
														<a class="tg-theme-tag" href="#">SWEEPER</a>
														<h3><a href="#">Hustlin’ Owls</a></h3>
														<span class="tg-stars"><span></span></span>
														<div class="tg-description">
															<p>Incididunt utia labore et dolore siti magna aliqua adinim lipat</p>
														</div>
														<ul class="tg-socialicons">
															<li><a href="#"><i class="fa fa-facebook"></i></a></li>
															<li><a href="#"><i class="fa fa-twitter"></i></a></li>
															<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
															<li><a href="#"><i class="fa fa-dribbble"	></i></a></li>
														</ul>
													</div>
												</div>
												<div class="col-sm-6 col-xs-6">
													<figure>
														<a href="#">
															<img src="images/player/img-03.png" alt="image description">
														</a>
													</figure>
												</div>
											</div>
											<div class="tg-player">
												<div class="col-sm-6 col-xs-6 pull-right">
													<div class="tg-playcontent">
														<a class="tg-theme-tag" href="#">SWEEPER</a>
														<h3><a href="#">Hustlin’ Owls</a></h3>
														<span class="tg-stars"><span></span></span>
														<div class="tg-description">
															<p>Incididunt utia labore et dolore siti magna aliqua adinim lipat</p>
														</div>
														<ul class="tg-socialicons">
															<li><a href="#"><i class="fa fa-facebook"></i></a></li>
															<li><a href="#"><i class="fa fa-twitter"></i></a></li>
															<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
															<li><a href="#"><i class="fa fa-dribbble"	></i></a></li>
														</ul>
													</div>
												</div>
												<div class="col-sm-6 col-xs-6">
													<figure>
														<a href="#">
															<img src="images/player/img-01.png" alt="image description">
														</a>
													</figure>
												</div>
											</div>
											<div class="tg-player">
												<div class="col-sm-6 col-xs-6 pull-right">
													<div class="tg-playcontent">
														<a class="tg-theme-tag" href="#">SWEEPER</a>
														<h3><a href="#">Hustlin’ Owls</a></h3>
														<span class="tg-stars"><span></span></span>
														<div class="tg-description">
															<p>Incididunt utia labore et dolore siti magna aliqua adinim lipat</p>
														</div>
														<ul class="tg-socialicons">
															<li><a href="#"><i class="fa fa-facebook"></i></a></li>
															<li><a href="#"><i class="fa fa-twitter"></i></a></li>
															<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
															<li><a href="#"><i class="fa fa-dribbble"	></i></a></li>
														</ul>
													</div>
												</div>
												<div class="col-sm-6 col-xs-6">
													<figure>
														<a href="#">
															<img src="images/player/img-02.png" alt="image description">
														</a>
													</figure>
												</div>
											</div>
											<div class="tg-player">
												<div class="col-sm-6 col-xs-6 pull-right">
													<div class="tg-playcontent">
														<a class="tg-theme-tag" href="#">SWEEPER</a>
														<h3><a href="#">Hustlin’ Owls</a></h3>
														<span class="tg-stars"><span></span></span>
														<div class="tg-description">
															<p>Incididunt utia labore et dolore siti magna aliqua adinim lipat</p>
														</div>
														<ul class="tg-socialicons">
															<li><a href="#"><i class="fa fa-facebook"></i></a></li>
															<li><a href="#"><i class="fa fa-twitter"></i></a></li>
															<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
															<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
														</ul>
													</div>
												</div>
												<div class="col-sm-6 col-xs-6">
													<figure>
														<a href="#">
															<img src="images/player/img-03.png" alt="image description">
														</a>
													</figure>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-5 col-sm-12 col-xs-12">
										<div class="tg-contentbox">
											<div class="tg-section-heading"><h2>consectetur adipisicing elit sed do eiusmid tempor incididunt labore</h2></div>
											<div class="tg-description">
												<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt utia labore et dolore magna aliqua enim ad minim veniam quistrud on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur cepteur sint occaecat.</p>
											</div>
											<div class="tg-btnbox">
												<a class="tg-btn" href="#"><span>view all</span></a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--************************************
					Top Rated Player End
			*************************************-->
			<!--************************************
					Testimonials Start
			*************************************-->
			<section class="tg-testimonial tg-haslayout tg-bgdark" style="display: none">
				<div class="container">
					<div class="row">
						<div id="tg-testimonial-slider" class="tg-testimonial-slider tg-haslayout">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<figure>
										<img src="images/trophy.png" alt="image description">
									</figure>
									<div class="tg-contentbox">
										<div class="tg-section-heading">
											<h2>uefa champions league, 2014</h2>
										</div>
										<div class="tg-description">
											<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolorena aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat.</p>
										</div>
										<ul class="tg-socialicons">
											<li>
												<a href="#">
													<i class="fa fa-facebook"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-twitter"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-linkedin"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-dribbble"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<figure>
										<img src="images/trophy.png" alt="image description">
									</figure>
									<div class="tg-contentbox">
										<div class="tg-section-heading">
											<h2>uefa champions league, 2014</h2>
										</div>
										<div class="tg-description">
											<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolorena aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat.</p>
										</div>
										<ul class="tg-socialicons">
											<li>
												<a href="#">
													<i class="fa fa-facebook"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-twitter"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-linkedin"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-dribbble"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<figure>
										<img src="images/trophy.png" alt="image description">
									</figure>
									<div class="tg-contentbox">
										<div class="tg-section-heading">
											<h2>uefa champions league, 2014</h2>
										</div>
										<div class="tg-description">
											<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolorena aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat.</p>
										</div>
										<ul class="tg-socialicons">
											<li>
												<a href="#">
													<i class="fa fa-facebook"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-twitter"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-linkedin"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-dribbble"></i>
												</a>
											</li>
										</ul>
									</div>

								</div>
								<div class="swiper-slide">
									<figure>
										<img src="images/trophy.png" alt="image description">
									</figure>
									<div class="tg-contentbox">
										<div class="tg-section-heading">
											<h2>uefa champions league, 2014</h2>
										</div>
										<div class="tg-description">
											<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolorena aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur sint occaecat.</p>
										</div>
										<ul class="tg-socialicons">
											<li>
												<a href="#">
													<i class="fa fa-facebook"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-twitter"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-linkedin"></i>
												</a>
											</li>
											<li>
												<a href="#">
													<i class="fa fa-dribbble"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="tg-themebtnprev"><span class="fa fa-angle-left"></span></div>
							<div class="tg-themebtnnext"><span class="fa fa-angle-right"></span></div>
						</div>
					</div>
				</div>
			</section>
			<!--************************************
					Testimonials End
			*************************************-->
			<!--************************************
					Our Sponser Start
			*************************************-->
			<section class="tg-main-section tg-haslayout" style="display: none">
				<div class="container">
					<div class="tg-section-name">
						<h2>our sponsers</h2>
					</div>
					<div class="col-sm-11 col-xs-11 pull-right">
						<div class="row">
							<div class="tg-latestresult tg-oursponsers">
								<div class="row">
									<div class="col-md-5 col-sm-12 col-xs-12">
										<div class="tg-contentbox">
											<div class="tg-section-heading"><h2>consectetur adipisicing elit sedia tempor labore</h2></div>
											<div class="tg-description">
												<p>Consectetur adipisicing elit sed do eiusmod temport incididunt utia labore et dolore magna aliqua enima ad minim veniam quistrud on ullamco laboris nisiut aliquip ex ea commodo consequat.</p>
											</div>
											<div class="tg-btnbox">
												<a class="tg-btn" href="#"><span>view all</span></a>
											</div>
										</div>
									</div>
									<div class="col-md-7 col-sm-12 col-xs-12">
										<div id="tg-upcomingmatch-slider" class="tg-upcomingmatch-slider tg-upcomingmatch">
											<div class="swiper-wrapper">
												<div class="swiper-slide">
													<div class="tg-match">
														<div class="tg-matchdetail">
															<div class="tg-box">
																<strong class="tg-teamlogo">
																	<img src="images/sponser/img-01.png" alt="image description">
																</strong>
															</div>
															<div class="tg-box">
																<span>sponsored in 2016</span>
																<h3>Champions league</h3>
															</div>
														</div>
													</div>
												</div>
												<div class="swiper-slide">
													<div class="tg-match">
														<div class="tg-matchdetail">
															<div class="tg-box">
																<strong class="tg-teamlogo">
																	<img src="images/sponser/img-02.png" alt="image description">
																</strong>
															</div>
															<div class="tg-box">
																<span>sponsored in 2016</span>
																<h3>Champions league</h3>
															</div>
														</div>
													</div>
												</div>
												<div class="swiper-slide">
													<div class="tg-match">
														<div class="tg-matchdetail">
															<div class="tg-box">
																<strong class="tg-teamlogo">
																	<img src="images/sponser/img-03.png" alt="image description">
																</strong>
															</div>
															<div class="tg-box">
																<span>sponsored in 2016</span>
																<h3>Champions league</h3>
															</div>
														</div>
													</div>
												</div>
												<div class="swiper-slide">
													<div class="tg-match">
														<div class="tg-matchdetail">
															<div class="tg-box">
																<strong class="tg-teamlogo">
																	<img src="images/sponser/img-01.png" alt="image description">
																</strong>
															</div>
															<div class="tg-box">
																<span>sponsored in 2016</span>
																<h3>Champions league</h3>
															</div>
														</div>
													</div>
												</div>
												<div class="swiper-slide">
													<div class="tg-match">
														<div class="tg-matchdetail">
															<div class="tg-box">
																<strong class="tg-teamlogo">
																	<img src="images/sponser/img-02.png" alt="image description">
																</strong>
															</div>
															<div class="tg-box">
																<span>sponsored in 2016</span>
																<h3>Champions league</h3>
															</div>
														</div>
													</div>
												</div>
												<div class="swiper-slide">
													<div class="tg-match">
														<div class="tg-matchdetail">
															<div class="tg-box">
																<strong class="tg-teamlogo">
																	<img src="images/sponser/img-03.png" alt="image description">
																</strong>
															</div>
															<div class="tg-box">
																<span>sponsored in 2016</span>
																<h3>Champions league</h3>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tg-themebtnnext"><span class="fa fa-angle-down"></span></div>
											<div class="tg-themebtnprev"><span class="fa fa-angle-up"></span></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--************************************
					Our Sponser End
			*************************************-->
		</main>
		<!--************************************
				Main End
		*************************************-->


@stop