forked from mrwyndham/fastpocket
116 lines
5.1 KiB
Markdown
116 lines
5.1 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Horizontal Style
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/BlogSections/HorizontalStyle.tsx"
|
|
<>
|
|
{/* <!-- Card Blog --> */}
|
|
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|
{/* <!-- Grid --> */}
|
|
<div className="grid lg:grid-cols-2 gap-6">
|
|
{/* <!-- Card --> */}
|
|
<a className="group sm:flex rounded-xl" href="#">
|
|
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
|
|
<img
|
|
className="w-full absolute top-0 start-0 object-cover"
|
|
src="https://images.unsplash.com/photo-1664574654529-b60630f33fdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
|
alt="Image Description"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grow">
|
|
<div className="p-4 flex flex-col h-full sm:p-6">
|
|
<div className="mb-3">
|
|
<p className="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
|
|
Business
|
|
</p>
|
|
</div>
|
|
<h3 className="text-lg sm:text-2xl font-semibold text-secondary-content group-hover:text-primary">
|
|
FastPocket becomes an official Instagram Marketing Partner
|
|
</h3>
|
|
<p className="mt-2 text-secondary-content">
|
|
Great news we're eager to share.
|
|
</p>
|
|
|
|
<div className="mt-5 sm:mt-auto">
|
|
{/* <!-- Avatar --> */}
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
className="w-[46px] rounded-full"
|
|
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
|
alt="Image Description"
|
|
/>
|
|
</div>
|
|
<div className="ms-2.5 sm:ms-4">
|
|
<h4 className="font-semibold text-secondary-content">
|
|
Aaron Larsson
|
|
</h4>
|
|
<p className="text-xs text-base-300">Feb 15, 2021</p>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Avatar --> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
|
|
{/* <!-- Card --> */}
|
|
<a className="group sm:flex rounded-xl" href="#">
|
|
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
|
|
<img
|
|
className="w-full absolute top-0 start-0 object-cover"
|
|
src="https://images.unsplash.com/photo-1669824774762-65ddf29bee56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
|
alt="Image Description"
|
|
/>
|
|
</div>
|
|
<div className="grow">
|
|
<div className="p-4 flex flex-col h-full sm:p-6">
|
|
<div className="mb-3">
|
|
<p className="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
|
|
Announcements
|
|
</p>
|
|
</div>
|
|
<h3 className="text-lg sm:text-2xl font-semibold text-secondary-content group-hover:text-primary">
|
|
Announcing a free plan for small teams
|
|
</h3>
|
|
<p className="mt-2 text-secondary-content">
|
|
At Wake, our mission has always been focused on bringing
|
|
openness.
|
|
</p>
|
|
|
|
<div className="mt-5 sm:mt-auto">
|
|
{/* <!-- Avatar --> */}
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
className="w-[46px] rounded-full"
|
|
src="https://images.unsplash.com/photo-1669720229052-89cda125fc3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
|
alt="Image Description"
|
|
/>
|
|
</div>
|
|
<div className="ms-2.5 sm:ms-4">
|
|
<h4 className="font-semibold text-secondary-content">
|
|
Hanna Wolfe
|
|
</h4>
|
|
<p className="text-xs text-base-300">Feb 4, 2021</p>
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Avatar --> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
</div>
|
|
{/* <!-- End Grid --> */}
|
|
</div>
|
|
{/* <!-- End Card Blog --> */}
|
|
</>
|
|
```
|