resources/views/pets/index.blade.php
@extends('layouts.app')
@section('content')
<div class="">
<div class="flex justify-center">
<div class="px-4">
<div class="px-4 py-8 text-center">
<h1 class="text-gray-500 text-4xl">Index the pets</h1>
<p class="text-gray-600 ">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</div>
<div class="container ml-auto mr-auto">
<hr class="ml-auto mr-auto mb-5" style="width:70%;">
<div class="">
<div class="md:flex justify-center">
<div class="px-6 sm:px-20 mb-3 pt-3">
<img class="w-70 h-40 rounded-lg" src="../img/background.jpg" alt="">
</div>
<div class="px-6 mb-5">
<article>
<div class="text-left sm:text-left xl:text-left">
<h2 class="text-teal-900 font-bold text-4xl">Name pet</h2>
<p class="text-teal-400 font-bold mb-2">2 years 3 mounths</p>
<p class="text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Amet at atque blanditiis consectetur corporis.
</p>
<div class="mt-3">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-3">#doglovers</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-3">#adopt</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#happy</span>
</div>
</div>
</article>
</div>
<div class="text-center px-6 mb-3 mt-5 pt-5">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-light py-2 px-4 rounded-full">
Go to adopt
</button>
</div>
</div>
</div>
<hr class="ml-auto mr-auto mb-5" style="width:70%;">
<div class="">
<div class="md:flex justify-center">
<div class="px-6 sm:px-20 mb-3 pt-3">
<img class="w-70 h-40 rounded-lg" src="../img/background.jpg" alt="">
</div>
<div class="px-6 mb-5">
<article>
<div class="text-left sm:text-left xl:text-left">
<h2 class="text-teal-900 font-bold text-4xl">Name pet</h2>
<p class="text-teal-400 font-bold mb-2">2 years 3 mounths</p>
<p class="text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Amet at atque blanditiis consectetur corporis.
</p>
<div class="mt-3">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-3">#doglovers</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-3">#adopt</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#happy</span>
</div>
</div>
</article>
</div>
<div class="text-center px-6 mb-3 mt-5 pt-5">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-light py-2 px-4 rounded-full">
Go to adopt
</button>
</div>
</div>
</div>
<hr class="ml-auto mr-auto mb-5" style="width:70%;">
<div class="">
<div class="md:flex justify-center">
<div class="px-6 sm:px-20 mb-3 pt-3">
<img class="w-70 h-40 rounded-lg" src="../img/background.jpg" alt="">
</div>
<div class="px-6 mb-5">
<article>
<div class="text-left sm:text-left xl:text-left">
<h2 class="text-teal-900 font-bold text-4xl">Name pet</h2>
<p class="text-teal-400 font-bold mb-2">2 years 3 mounths</p>
<p class="text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Amet at atque blanditiis consectetur corporis.
</p>
<div class="mt-3">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-3">#doglovers</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-3">#adopt</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#happy</span>
</div>
</div>
</article>
</div>
<div class="text-center px-6 mb-3 mt-5 pt-5">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-light py-2 px-4 rounded-full">
Go to adopt
</button>
</div>
</div>
</div>
<hr class="ml-auto mr-auto mb-5" style="width:70%;">
</div>
</div>
@endsection