@extends('layouts.master')
@section('title', 'Welcome to the online vegitable store')
@yield('navbar')
@section('intro')
@endsection

@section('content')
<div class="header-empty-space"></div>
<div class="empty-space col-xs-b15 col-sm-b30"></div>
<div class="empty-space col-xs-b50 col-sm-b30"></div>
{{-- <div class="empty-space col-xs-b15 col-sm-b30"></div>
    <div class="empty-space col-xs-b15 col-sm-b30"></div>
    <div class="empty-space col-xs-b15 col-sm-b30"></div>
    <div class="empty-space col-xs-b25 col-sm-b30"></div>
    <div class="empty-space col-xs-b45 col-sm-b30"></div>
    <div class="empty-space col-xs-b45 col-sm-b30"></div> --}}
{{-- <div class="empty-space col-sm-b30"></div> --}}
<style>
	.img-wrap {
		padding: 10px;
		border: solid 5px #b8cd06;
		box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
		position: relative;
		border-radius: 10px;
	}

	.wrap {
		padding: 10px;

	}


	.overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		right: 0;
		left: 0;
		border-radius: 5px;
	}

	.img-wrap .text-wrap {
		position: absolute;
		z-index: 3;
		bottom: 48%;
		color: white;
		text-align: center;
		width: 100%;
	}

	@media only screen and (max-width: 991px) and (min-width: 767px) {
		.img-wrap img {
			margin: 0 auto;
		}
	}
</style>


<div class="container">
	<div class="row">




		<div class="col-md-4 wrap">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="{{url('vegitables')}}">
						<h3 class="h3" style="color: white;"><span style="color: red">Kik</span>Vegie</h3>
					</a>

					<div class="empty-space col-xs-b15"></div>

					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="{{url('vegitables')}}">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click here</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="{{url('vegitables')}}">
					<div class="overlay"></div>
				</a>
				<img src=" https://res.cloudinary.com/dkmhku5qo/image/upload/v1569578772/Copy_1_of_600X600_1_ibvv8y.jpg"
					alt="" class="img-responsive">
			</div>

		</div>
		


		<div class="col-md-4 wrap ">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="{{url('kikmeats')}}" class="">
						<h3 class="h3" style="color: white;"><span style="color: red">Kik</span>Meats</h3>
					</a>


					<div class="empty-space col-xs-b15"></div>
					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="{{url('kikmeats')}}">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click here</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="https://kikfashion.kikma.com/">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569573603/Copy_3_of_600X600_pzlgih.jpg "
					alt="" class="img-responsive">
			</div>

		</div>
		<div class="col-md-4 wrap ">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="{{url('kikfruits')}}" class="soon">
						<h3 class="h3" style="color: white;"><span style="color: red">Kik</span> Fruity</h3>
					</a>
					<div class="empty-space col-xs-b15"></div>


					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="{{url('kikfruits')}}">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click here</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="{{url('kikfruits')}}">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569578763/Copy_of_600X600_1_humm2j.jpg"
					alt="" class="img-responsive">
			</div>

		</div>

		<div class="col-md-4 wrap soon">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="" class="">
						<h3 class="h3" style="color: white;"><span style="color: red">Kik</span>Grocie</h3>
					</a>

					<div class="empty-space col-xs-b15"></div>


					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="{{url('kikgrocie')}}">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click here</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>
				</div>
				<a href="{{url('kikgrocie')}}">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569578748/Copy_2_of_600X600_2_ntlh3j.jpg"
					alt="" class="img-responsive">
			</div>

		</div>
		<div class="col-md-4 wrap soon">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="" class="">
						<h3 class="h3" style="color: white;"><span style="color: red">Kik</span>fashion</h3>
					</a>


					<div class="empty-space col-xs-b15"></div>

					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6"> <a class="button size-1 style-3" href="">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click here</span>
								</span>
							</a>

						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569578731/600X600_1_dqvqhs.jpg" alt=""
					class="img-responsive">
			</div>

		</div>

		<div class="col-md-4 wrap soon">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="#" class="soon">
						<h3 class="h3" style="color: white;"><span style="color: red">Kik</span>Foods</h3>
					</a>


					<div class="empty-space col-xs-b15"></div>

					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="#">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Coming Soon</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="#">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569573595/Copy_4_of_600X600_bh1yts.jpg"
					alt="" class="img-responsive">
			</div>

		</div>

		<div class="col-md-4 wrap visible-xs visible-sm hidden-md soon">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="{{url('home')}}" class="soon">
						<h3 class="h3" style="color: white;"><span style="color: red">All</span> Products</h3>
					</a>


					<div class="empty-space col-xs-b15"></div>

					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="{{url('home')}}">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click Here</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="{{url('home')}}">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569917882/Copy_of_banner_2_mz0byi.jpg"
					alt="" class="img-responsive">
			</div>

		</div>

		<div class="col-md-12 wrap hidden-sm hidden-xs soon">

			<div class="img-wrap">
				<div class="text-wrap ">

					<a href="{{url('home')}}" class="soon">
						<h3 class="h3" style="color: white;"><span style="color: red">All</span> Products</h3>
					</a>


					<div class="empty-space col-xs-b15"></div>

					<div class="row">
						<div class="col-xs-3"></div>
						<div class="col-xs-6">
							<a class="button size-1 style-3" href="{{url('home')}}">
								<span class="button-wrapper">
									<span class="icon"><img src="img/icon-3.png" alt=""></span>
									<span class="text">Click Here</span>
								</span>
							</a>
						</div>
						<div class="col-xs-3"></div>
					</div>

				</div>
				<a href="{{url('home')}}">
					<div class="overlay"></div>
				</a>
				<img src="https://res.cloudinary.com/dkmhku5qo/image/upload/v1569917874/banner_2_1_ix02sa.jpg" alt=""
					class="img-responsive">
			</div>

		</div>

	</div>




	@endsection

	@section('scripts')
	<script>
		$(document).ready(function () {
			$(document).on('click', '.soon', function (e) {
				e.preventDefault();


				Swal.fire({
					title:'Coming soon',
					text:'',
					icon:'info',
					imageUrl:"{{asset('img/rsz_logo2.png')}}",
					imageHeight:100
					}
				)

			})
		})


	</script>
	@endsection