Siteoly - Card Designs

The fatest way to build websites from Google Sheets.

<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-4 " href="/">
	<div class="bg-white rounded-lg overflow-hidden  shadow-xl hover:shadow-md text-center transition-all" style="background-color:; color:;">
		<div class="py-24 rounded-t-lg bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>						
		<div class="p-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>
			<p class="mt-1 mb-3 text-sm text-gray-500 uppercase">Turkey</p>	
			<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>							  
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-4 " href="/">
	<div class=" text-center" style="background-color:; color:;">
		<div class="w-48 h-48 mx-auto rounded-full shadow-xl hover:shadow-md transition-all bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>						
		<div class="p-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>
			<p class="mt-1 mb-3 text-sm text-gray-500 uppercase">Turkey</p>	
			<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>							  
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-4 " href="/">
	<div class=" text-center" style="background-color:; color:;">
		<div class="w-48 h-48 mx-auto rounded-lg shadow-xl hover:shadow-md transition-all bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>						
		<div class="p-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>
			<p class="mt-1 mb-3 text-sm text-gray-500 uppercase">Turkey</p>	
			<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>							  
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-4 " href="/">
	<div class=" text-center p-4 bg-white rounded-lg shadow-xl hover:shadow-md transition-all  " style="background-color:; color:;">
		<div class="w-full h-48 rounded mx-auto bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>						
		<div class="p-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>
			<p class="mt-1 mb-3 text-sm text-gray-500 uppercase">Turkey</p>	
			<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>							  
		</div>		
	</div>
</a>

<a class="w-full sm:w-6/12 md:w-6/12 lg:w-6/12  mb-4 px-4 " href="/">
	<div class="flex flex-col px-4  py-6 bg-white rounded-lg shadow-xl hover:shadow-md transition-all  " style="background-color:; color:;">
		<div class="mb-4 text-gray-500">@ugurpeker</div>
		<div class="flex">
			<div class="w-24 h-24 mr-6 inline-flex items-center justify-center rounded-full">
			  <div class="w-24 h-24 mx-auto rounded bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>	
			</div>
			<div class="">
				<h5 class="text-xl font-semibold">Ugur Peker</h5>
				<p class="mt-1 text-xs mb-3 text-gray-600 uppercase">Engineer & Photographer & Traveller</p>		
				<p class="mt-1  text-xs text-gray-500 uppercase">Turkey</p>								  
			</div>	
		</div>		
	</div>
</a>

<a class="w-full sm:w-6/12 md:w-6/12 lg:w-6/12  mb-4 px-4 " href="/">
	<div class="flex flex-col px-4  py-6 bg-white rounded-lg shadow-xl hover:shadow-md transition-all  " style="background-color:; color:;">
		<div class="mb-4 text-gray-500">@ugurpeker</div>
		<div class="flex">
			<div class="w-24 h-24 mr-6 inline-flex items-center justify-center rounded-full">
			  <div class="w-24 h-24 mx-auto rounded-full bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>	
			</div>
			<div class="">
				<h5 class="text-xl font-semibold">Ugur Peker</h5>
				<p class="mt-1 text-xs mb-3 text-gray-600 uppercase">Engineer & Photographer & Traveller</p>		
				<p class="mt-1  text-xs text-gray-500 uppercase">Turkey</p>								  
			</div>	
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12 p-4" href="/">
	<div class="bg-white mb-12 shadow-xl hover:shadow-md transition-all" style="background-color:; color:;">
		<div class="relative overflow-hidden w-full h-64"><div class="absolute top-0 right-0 -mr-12 -mt-6 w-64 h-64 rounded-full rotate-45 bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>						
		<div class="p-8 -mt-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>
			<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>	
			<p class="flex justify-end mt-1 text-sm text-gray-500 uppercase mt-12">Turkey</p>	
									  
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12 p-4 mb-12" href="/">
	<div class="bg-white hover:bg-gray-100 shadow-sm rounded transition-all" style="background-color:; color:;">
		<div class="overflow-hidden w-full h-64 rounded rounded-bl-none rounded-br-none overflow-hidden"><div class="absolute top-0 right-0 w-full h-full bg-cover relative" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>						
		<div class="p-4 -mt-12  relative z-10">
			<div class="p-4 bg-white rounded-lg shadow-xl ">
				<h5 class="text-xl font-semibold">Ugur Peker</h5>
				<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>	
				<p class="flex justify-end mt-1 text-sm text-gray-500 uppercase mt-12">Turkey</p>	
										  
			</div>
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12 p-4 mb-12" href="/">
	<div class="bg-white overflow-hidden rounded shadow-xl hover:shadow-md transition-all" style="background-color:; color:;">
		<div class="w-full h-64 relative z-10">
			<div class="absolute top-0 right-0 w-full h-full bg-cover relative" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
			<div class="bg-gray-300 z-10 absolute transform rotate-45 bottom-0 left-0 w-48 h-48 -mb-12" style=" margin-left:-10rem; margin-bottom:-6rem;"></div>
		</div>						
		<div class="p-4 relative ">
			<div class="flex flex-col items-end justify-end text-right pl-8">
				<h5 class="text-xl font-semibold border-b pb-4 mb-4">Ugur Peker</h5>
				<p class="mt-1 text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>	
				<p class="flex justify-end mt-1 text-sm text-gray-500 uppercase mt-12">Turkey</p>
			</div>
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12 p-4 mb-12" href="/">
	<div class="bg-white relative overflow-hidden rounded shadow-xl hover:shadow-md transition-all" style="background-color:; color:;">
		<div class="w-full h-64 relative z-10">
			<div class="absolute top-0 right-0 w-full h-full bg-cover relative" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>			
			<div class="z-10 absolute transform text-white left-0 bottom-0 w-full h-12" style="">
		<svg fill="inherit" stroke="transparent" version="1.1" class="w-full h-full  fill-current" viewBox="0 0 100 20" preserveAspectRatio="none"><path d="m0 0 100 20h-100z"/></svg>
	</div>
		</div>						
		<div class="p-4 relative ">
			<div class="flex flex-col items-end justify-end text-right pl-8">
				<h5 class="text-xl font-semibold mb-3">Ugur Peker</h5>
				<p class="text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>	
				<p class="flex justify-end mt-1 text-sm text-gray-500 uppercase mt-12">Turkey</p>
			</div>
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12 p-4 mb-12" href="/">
	<div class="bg-white relative overflow-hidden rounded shadow-xl hover:shadow-md transition-all" style="background-color:; color:;">
		<div class="w-full h-64 relative z-10">
			<div class="absolute top-0 right-0 w-full h-full bg-cover relative" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
			<div class="absolute top-0 left-0 w-full h-full bg-black opacity-25" style=""></div>
		</div>						
		<div class="p-4 relative z-10">
			<div class="relative flex justify-center">
				<div class="-mt-12 w-16 h-16 rounded-full bg-cover relative shadow-md" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
			</div>
			<div class="flex flex-col items-center justify-center text-center mt-4">
				<h5 class="text-xl font-semibold mb-3">Ugur Peker</h5>
				<p class="text-xs text-gray-600 uppercase">Engineer & Photographer & Traveller</p>	
				<p class="flex justify-end mt-1 text-sm text-gray-500 uppercase mt-12">Turkey</p>
			</div>
		</div>
	</div>
</a>
<a class="w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-2  mb-4" href="/">
	<div class="bg-white relative p-2 rounded hover:shadow-md overflow-hidden transition-all" style="background-color:; color:;">
		<div class="relative flex justify-center">
			<div class="w-full h-24  bg-cover relative rounded" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
		</div>
		<div class="flex flex-col items-start justify-center text-left mt-4">
			<h5 class="text-md font-semibold mb-0">Ugur Peker</h5>
			<p class="flex justify-end text-sm text-gray-500">Turkey</p>
		</div>
	</div>
</a>
<a class="w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-2 mb-4" href="/">
	<div class="bg-white relative p-2" style="background-color:; color:;">
		<div class="relative bg-white w-24 h-24 m-auto flex justify-center relative rounded-full shadow-lg hover:shadow-md overflow-hidden transition-all p-3">
			<div class="w-full h-full  bg-cover relative rounded-full" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
		</div>
		<div class="flex flex-col items-center justify-center text-center mt-3">
			<h5 class="text-md font-semibold mb-0">Ugur Peker</h5>	
			<p class="flex justify-end mt-0 text-sm text-gray-500">Turkey</p>			
		</div>
	</div>
</a>
<a class="w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-2 mb-4" href="/">
	<div class="bg-white relative" style="background-color:; color:;">
		<div class="relative flex justify-center">
			<div class="w-24 h-24  bg-cover relative rounded-full shadow-lg hover:shadow-md focus:shadow-sm overflow-hidden transition-all" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
		</div>
		<div class="flex flex-col items-center justify-center text-center mt-4">
			<h5 class="text-md mb-0 px-2">Ugur Peker</h5>			
		</div>
	</div>
</a>
<a class="w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-2 mb-4" href="/">
	<div class="bg-white relative p-2 rounded-lg hover:shadow-md overflow-hidden transition-all" style="background-color:; color:;">
		<div class="relative flex justify-center">
			<div class="w-full h-24  bg-cover relative rounded-lg" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
		</div>
		<div class="flex flex-col items-center justify-center text-center mt-4">
			<h5 class="text-md font-semibold mb-0 px-2">Ugur Peker</h5>			
		</div>
	</div>
</a>
<a class="w-1/2 sm:w-1/3 md:w-1/3 lg:w-1/4 px-2 mb-4" href="/">
	<div class="bg-white relative rounded-lg border border-gray-300 shadow-lg hover:shadow-sm" style="background-color:; color:;">		
		<div class="flex flex-col items-start justify-start text-left mt-3 p-3 max-w-48">
			<h5 class="text-lg font-semibold mb-0">Ugur Peker</h5>	
			<p class="text-md text-gray-600 mt-2 ">Engineer & Photographer & Traveller</p>	
			<p class="flex justify-end mt-2 text-sm text-gray-500 uppercase">Turkey</p>			
		</div>
		<div class="relative w-full h-48 -mt-8 flex justify-end overflow-hidden transition-all rounded-lg">
			<div class="w-48 h-48 -mr-8 mt-8 bg-cover relative rounded-full" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
		</div>
	</div>
</a>
<a class="w-1/2 sm:w-1/3 md:w-1/3 lg:w-1/4 px-2 mb-4" href="/">
	<div class="bg-white relative p-2" style="background-color:; color:;">
		<div class="relative bg-gray-200 h-24 flex justify-center relative rounded-lg mx-4">
			<div class="w-24 h-24 mt-12 bg-cover relative rounded-full shadow-xl hover:shadow-md overflow-hidden transition-all " style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>				
		</div>
		<div class="flex flex-col items-center justify-center text-center mt-16">
			<h5 class="text-md font-semibold mb-0">Ugur Peker</h5>	
			<p class="flex justify-end mt-0 text-sm text-gray-500">Turkey</p>			
		</div>
	</div>
</a>

<a class="w-full sm:w-6/12 md:w-6/12 lg:w-6/12  mb-4 px-4 " href="/">
	<div class="flex flex-col px-4  py-6 bg-white rounded-lg shadow-xl hover:shadow-md transition-all  " style="background-color:; color:;">		
		<div class="flex items-start">			
			<div class="mr-8 flex-grow">
				<h5 class="text-xl font-semibold">Ugur Peker<span class="ml-4 text-xs text-gray-500 uppercase">Turkey</span>	</h5>
				<p class="mt-1 text-sm mb-3 text-gray-600">Engineer & Photographer & Traveller</p>		
											  
			</div>
			<div class="w-24 h-24 inline-flex items-center justify-center rounded-full">
			  <div class="w-24 h-24 mx-auto rounded-full bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>	
			</div>			
		</div>		
	</div>
</a>

<a class="w-full sm:w-6/12 md:w-6/12 lg:w-6/12  mb-4 px-4 " href="/">
	<div class="flex flex-col px-4  py-6 bg-white rounded-lg shadow-xl hover:shadow-md transition-all  " style="background-color:; color:;">		
		<div class="flex items-start">			
			<div class="mr-8 flex-grow">
				<h5 class="text-xl font-semibold">Ugur Peker<span class="ml-4 text-xs text-gray-500 uppercase">Turkey</span>	</h5>
				<p class="mt-1 text-sm mb-3 text-gray-600">Engineer & Photographer & Traveller</p>		
											  
			</div>
			<div class="w-24 h-24 inline-flex items-center justify-center rounded-lg">
			  <div class="w-24 h-24 mx-auto rounded-lg bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>	
			</div>			
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-4 " href="/">
	<div class="bg-white relative shadow-xl hover:shadow-md text-left transition-all" style="border-radius:24px; background-color:; color:;">
		<div class="bg-cover transform hover:-translate-y-5 duration-300 transition-all" style="padding-top:150%; border-radius:24px; background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>						
		<div class="p-6 pt-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>			
			<p class="mt-1 mb-3 text-sm text-gray-600">Engineer & Photographer & Traveller</p>
			<p class="mt-1 text-sm text-gray-500 uppercase">Turkey</p>				
		</div>		
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-6 " href="/">
	<div class="bg-white relative shadow-xl hover:shadow-md text-left transition-all" style="border-radius:24px;">		
		<div class="px-6 py-4">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>			
			<p class="mt-1 text-sm text-gray-600">Engineer & Photographer & Traveller</p>			
		</div>	
		<div class="-mx-2 overflow-hidden  "><div class="bg-cover" style="padding-top:120%; border-radius:24px; background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>
		<div class="px-6 py-4">			
			<p class="mt-1 text-sm text-gray-500 uppercase">Turkey</p>				
		</div>			
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 px-6 " href="/">
	<div class="bg-white relative rounded-lg shadow-xl hover:shadow-md text-left transition-all" style="border-radius:1rem;">		
		<div class="flex w-48 h-48 mt-24 m-auto relative "><div class="-mt-24 relative w-full h-full rounded-full  bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>
		<div class="flex flex-col justify-center items-center text-center px-12 py-4 -mt-20">
			<h5 class="text-xl font-semibold">Ugur Peker</h5>			
			<p class="mt-8 text-lg text-gray-600">Engineer & Photographer & Traveller</p>
			<p class="mt-8 text-sm text-gray-500 uppercase">Turkey</p>					
		</div>	
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4" href="/">
	<div class="bg-white relative rounded-lg shadow-xl hover:shadow-md text-left transition-all p-8 pb-8 " style="border-radius:1rem;">			
		<div class="flex flex-col justify-start items-start text-left ">
			<h5 class="text-4xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-lg text-gray-600">Engineer & Photographer & Traveller</p>			
		</div>
		<div class="flex w-40 h-40 mt-8 ml-auto -mr-4 relative "><div class="relative w-full h-full rounded-full  bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>
		<div class="flex flex-col justify-start items-start text-left ">			
			<p class="mt-0 text-sm text-gray-500 uppercase">Turkey</p>					
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4" href="/">
	<div class="bg-white relative rounded-lg shadow-xl hover:shadow-md text-left transition-all p-8 pb-8 " style="border-radius:1rem;">			
		<div class="flex flex-col justify-start items-start text-left ">
			<h5 class="text-4xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-lg text-gray-600">Engineer & Photographer & Traveller</p>			
		</div>
		<div class="flex w-40 h-40 mt-8 ml-auto -mr-4 relative "><div class="relative w-full h-full bg-cover" style="clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>
		<div class="flex flex-col justify-start items-start text-left ">			
			<p class="mt-4 text-sm text-gray-500 uppercase">Turkey</p>					
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4" href="/">
	<div class="bg-white relative rounded-lg shadow-xl hover:shadow-md text-left transition-all p-8 pb-8 " style="border-radius:1rem;">			
		<div class="flex flex-col justify-start items-start text-left ">
			<h5 class="text-4xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-lg text-gray-600">Engineer & Photographer & Traveller</p>			
		</div>
		<div class="flex w-40 h-40 mt-8 ml-auto -mr-4 relative "><div class="relative w-full h-full bg-cover" style="clip-path: polygon(14% 30%, 54% 0, 100% 18%, 100% 68%, 67% 100%, 27% 77%, 0 98%, 20% 57%); background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>
		<div class="flex flex-col justify-start items-start text-left ">			
			<p class="mt-4 text-sm text-gray-500 uppercase">Turkey</p>					
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4" href="/">
	<div class="bg-white relative rounded-lg shadow-xl hover:shadow-md text-left transition-all " style="border-radius:1rem;">
		<div class="relative flex w-full h-48"><div class="relative rounded-t-lg w-full h-full bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div></div>
		<div class="absolute text-primary-300 bottom-0 w-full h-48 left-0  rounded-lg overflow-hidden ">
			<svg fill="inherit" stroke="transparent" version="1.1" class="w-full h-full  fill-current" viewBox="0 0 100 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
			 <path d="m100 17.751c0-12.388-13.36-18.209-22.395-16.629-18.546 3.2421-17.907 16.413-48.115 10.529-23.416-4.5613-29.49 2.2415-29.49 10.349v28.001h100z" opacity=".3"/>
			 <path d="m0 33.276c0-10.549 7.7782-12.674 27.523-8.0834 19.971 4.643 33.004 6.7855 43.272 8.6775 19.472 3.5877 25.797 5.8512 29.205 16.13h-100z" opacity=".3"/>
			 <path d="m100 31.709c0-15.825-17.464-6.4068-39.914-9.7926-20.274-3.0576-20.612-3.8968-30.881-2.0048-19.472 3.5877-25.797 19.809-29.205 30.088h100z" opacity=".3"/>
			</svg>
		</div>
		<div class="relative flex flex-col justify-center items-center text-center p-8 pb-24">
			<h5 class="text-2xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-md text-gray-900">Engineer & Photographer & Traveller</p>						
		</div>		
		<div class="relative flex flex-col justify-center items-center text-center p-4 ">			
			<p class="mt-4 text-sm text-gray-900 uppercase">Turkey</p>					
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4" href="/">
	<div class="bg-white relative rounded-lg shadow-xl hover:shadow-md text-left transition-all p-4" style="border-radius:2rem;">
		<div class="relative flex w-full h-64 text-blue-300 overflow-hidden rounded-lg" style="border-radius:1.75rem;" >
			<div class="relative w-full h-full bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
			<div class="absolute text-white bottom-0 w-full h-24 left-0">
				<svg fill="inherit" stroke="transparent" version="1.1" class="w-full h-full  fill-current" viewBox="0 0 100 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
				 <path d="m100 17.751c0-12.388-13.36-18.209-22.395-16.629-18.546 3.2421-17.907 16.413-48.115 10.529-23.416-4.5613-29.49 2.2415-29.49 10.349v28.001h100z" opacity=".3"/>
 <path d="m100 31.709c0-15.825-17.464-6.4068-39.914-9.7926-20.274-3.0576-20.612-3.8968-30.881-2.0048-19.472 3.5877-25.797 19.809-29.205 30.088h100z" opacity=".4"/>
 <path d="m0 33.276c0-10.549 14.231 2.9087 34.359 5.3051 16.268 1.9368 23.039-5.9906 40.139-6.5626 13.385-0.44775 22.094 7.7028 25.502 17.982h-100z" opacity=".5"/>
 <path d="m8.1186 45.81c5.4991-1.2207 11.339-3.4157 31.083 1.1746 19.971 4.643 22.037-5.8909 32.305-3.9989 12.621 2.3255 20.673 4.0936 28.48-0.53335l0.013171 7.5477h-100c1.8416-2.3926 2.0154-2.8353 8.1186-4.1901z"/>
				</svg>
			</div>
		</div>		
		<div class="relative flex flex-col justify-center items-center text-center p-8 pb-4">
			<h5 class="text-2xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-md text-gray-900">Engineer & Photographer & Traveller</p>						
		</div>		
		<div class="relative flex flex-col justify-center items-center text-center p-4 ">			
			<p class="mt-4 text-sm text-gray-900 uppercase">Turkey</p>					
		</div>
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4 " href="/">
	<div class="bg-white relative rounded-full shadow-xl hover:shadow-md text-left transition-all p-4" style="border-radius:8rem;">
		<div class="relative flex w-full h-64 overflow-hidden rounded-full" style="border-radius:7rem;" >
			<div class="relative w-full h-full bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
			<div class="absolute bottom-0 w-full h-24 left-0 text-primary-600 ">
				<svg fill="inherit" stroke="transparent" version="1.1" class="w-full h-full  fill-current" viewBox="0 0 100 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
				 <defs>
  <linearGradient id="linearGradient5150" x1="68.51" x2="68.51" y1="43.448" y2="48.718" gradientUnits="userSpaceOnUse">
   <stop stop-color="#fff" offset="0"/>
   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient5202" x1="36.89" x2="36.89" y1="21.086" y2="42.024" gradientUnits="userSpaceOnUse">
   <stop stop-color="#fff" offset="0"/>
   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient5210" x1="6.1246" x2="6.1246" y1="31.341" y2="44.872" gradientUnits="userSpaceOnUse">
   <stop stop-color="#fff" offset="0"/>
   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient5223" x1="72.925" x2="72.925" y1="3.7098" y2="25.787" gradientUnits="userSpaceOnUse">
   <stop stop-color="#fff" offset="0"/>
   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <path d="m100 17.751c0-12.388-13.36-18.209-22.395-16.629-18.546 3.2421-17.907 16.413-48.115 10.529-23.416-4.5613-29.49 2.2415-29.49 10.349v28.001h100z" opacity=".3"/>
  <path d="m100 17.751c0-12.388-13.36-18.209-22.395-16.629-18.546 3.2421-17.907 16.413-48.115 10.529-23.416-4.5613-29.49 2.2415-29.49 10.349v28.001h100z" fill="url(#linearGradient5223)" opacity=".3"/>
 </g>
 <g>
  <path d="m100 31.709c0-15.825-17.464-6.4068-39.914-9.7926-20.274-3.0576-20.612-3.8968-30.881-2.0048-19.472 3.5877-25.797 19.809-29.205 30.088h100z" opacity=".4"/>
  <path d="m100 31.709c0-15.825-17.464-6.4068-39.914-9.7926-20.274-3.0576-20.612-3.8968-30.881-2.0048-19.472 3.5877-25.797 19.809-29.205 30.088h100z" fill="url(#linearGradient5202)" opacity=".4"/>
 </g>
 <g>
  <path d="m0 33.276c0-10.549 14.231 2.9087 34.359 5.3051 16.268 1.9368 23.039-5.9906 40.139-6.5626 13.385-0.44775 22.094 7.7028 25.502 17.982h-100z" opacity=".5"/>
  <path d="m0 33.276c0-10.549 14.231 2.9087 34.359 5.3051 16.268 1.9368 23.039-5.9906 40.139-6.5626 13.385-0.44775 22.094 7.7028 25.502 17.982h-100z" fill="url(#linearGradient5210)" opacity=".5"/>
 </g>
 <g>
  <path d="m8.1186 45.81c5.4991-1.2207 11.339-3.4157 31.083 1.1746 19.971 4.643 22.037-5.8909 32.305-3.9989 12.621 2.3255 20.673 4.0936 28.48-0.53335l0.013171 7.5477h-100c1.8416-2.3926 2.0154-2.8353 8.1186-4.1901z"/>
  <path d="m8.1186 45.81c5.4991-1.2207 11.339-3.4157 31.083 1.1746 19.971 4.643 22.037-5.8909 32.305-3.9989 12.621 2.3255 20.673 4.0936 28.48-0.53335l0.013171 7.5477h-100c1.8416-2.3926 2.0154-2.8353 8.1186-4.1901z" fill="url(#linearGradient5150)" opacity=".5"/>
 </g>
				</svg>
			</div>
		</div>		
		<div class="relative flex flex-col justify-center items-center text-center p-8 pb-4">
			<h5 class="text-2xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-md ">Engineer & Photographer & Traveller</p>
			<p class="mt-4 text-sm font-semibold uppercase pt-8 text-primary-600 ">Turkey</p>				
		</div>	
	</div>
</a>
<a class="w-full sm:w-6/12 md:w-6/12 lg:w-4/12  mb-12 p-4 " href="/">
	<div class="bg-white relative shadow-xl hover:shadow-md text-left transition-all duration-500 transform -skew-x-12 hover:-translate-x-2 hover:-translate-y-2" style="border-radius:2rem;">		
		<div class="absolute flex w-full h-full overflow-hidden rounded-full" style="border-radius:2rem;" >
			<div class="relative w-full h-full bg-cover" style="background-image:url(https://images.unsplash.com/photo-1581321825690-944511645947?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);"></div>
			<div class="absolute top-0 left-0 w-full h-full bg-primary-600 opacity-75" style=""></div>			
		</div>		
		<div class="relative flex flex-col justify-start items-start text-left pl-12 pr-8 pb-12 pt-12 transform skew-x-12 text-white">
			<h5 class="text-2xl font-semibold leading-tight">Ugur Peker</h5>			
			<p class="mt-6 text-md ">Engineer & Photographer & Traveller</p>
			<p class="mt-4 text-sm font-semibold uppercase pt-8 ">Turkey</p>				
		</div>	
	</div>
</a>