@extends('template.landing')
@section('title')
@section('main')
<style type="text/css">
	.header header{
	  transition: .5s;
	  background-color: #03192e;
	}
	.header h2 a{
	  text-decoration: none;
	  transition: .5s;
	  color: #ffa84a;
	  font-weight: bold;
	  text-shadow: 2px 2px 10px #ffa84a;
	}
	.header a.text-contact,
	section .text-contact{
	  transition: .5s;
	  background-color: #ffa84a;
	  color: #fff;
	  font-weight: bold;
	  text-decoration: none;
	  transition: .5s ease;
	}
	.header a.text-contact:hover,
	section .text-contact:hover{
	  transition: .5s;
	  filter: contrast(80%);
	}
	.header .cover-mode{
	  transition: .5s;
	  background-color: #fff;
	}
	.header .button-mode{
	  transition: .5s;
	  background-color: #ffa84a;
	}
	.header a.menu-item{
	  transition: .5s;
	  color: #fff;
	  text-decoration: none;
	}
	.header a.menu-item:hover{
	  transition: .5s;
	  opacity: 80%;
	}
	.header .bars{
	  transition: .5s;
	  width: 30px;
	  height: 4px;
	  background-color: #fff;
	  margin-top: 2.2px;
	  border-radius: 10px;
	}
	.header .menu-responsive{
	  transition: .5s;
	  height: calc(100vh - 10vh);
	  width: 100%;
	  top: 10vh;
	  background-color: #03192e;
	  font-size: 120%;
	  color: #fff;
	}
	.cek{
		background-color: #ffa84a;
		transition: .5s;
		color: #fff;
	}
</style>
<div class="blog pt-5" id="blog">
	<div class="text-center">
		<h1><strong>Blog</strong></h1>
		<hr class="prestasiblog">
		<div class="content-blog">
			@foreach($blog as $b)
			<div class="float-start col-lg-3 col-md-6 col-12">
				<div class="m-3 cek" style="overflow: hidden; border-radius: 20px; text-align: left; border: 1px solid #fff;">
					<img src="{{ asset('mystyle/image/blog/'.$b->featured_image) }}" width="100%" height="220px" style="border-radius: 20px;">
					<h4 class="mt-2 ps-2 pe-2"><strong>{{ $b->judul }}</strong></h4>
					<a style="background-color: #de8a1d; color: white" class="ms-2 me-2 mb-2 btn baca" href="/blog/read/{{ $b->id }}">Baca Selengkapnya</a>
				</div>
			</div>
			@endforeach
			<div class="clearfix"></div>
		</div>
	</div>
</div>
@endsection