1512 lines
113 KiB
HTML
1512 lines
113 KiB
HTML
<div>
|
||
<section class="bg-black bg-[url(/assets/images/blog/banner_bg.png)] bg-center bg-no-repeat pb-12 pt-36 text-white sm:pt-[200px] lg:pb-80">
|
||
<div class="container">
|
||
<div class="relative">
|
||
<div class="text-center lg:max-w-[754px] ltr:lg:text-left rtl:lg:text-right">
|
||
<h2 class="text-3xl font-black sm:text-5xl md:text-6xl">
|
||
We'll help <span class="text-primary">digitally</span> transform <span class="text-secondary">your business.</span>
|
||
</h2>
|
||
<p class="mt-7 text-base font-semibold xl:text-lg">
|
||
lorem ipsum is a placeholder text to demonstrate the visual form of a typeface without relying on very meaningful content like this one
|
||
for example.
|
||
</p>
|
||
<div class="mt-10 flex items-center justify-center gap-6 lg:justify-start">
|
||
<button type="button" class="btn bg-white py-[19px] shadow-[10px_15px_30px_rgba(199,128,161,0.2)]">All Postsa</button>
|
||
<button type="button" class="btn py-[19px] px-8 text-white shadow-[10px_15px_30px_rgba(199,128,161,0.2)]">Trending</button>
|
||
</div>
|
||
</div>
|
||
<div class="top-0 mt-10 w-full max-w-[686px] ltr:right-0 rtl:left-0 lg:absolute" data-aos="fade-left" data-aos-duration="1000">
|
||
<img src="/assets/images/blog/blog_banner.png" class="rtl:rotate-y-180" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-gradient-to-t from-white/60 to-transparent py-12 dark:bg-none lg:py-24">
|
||
<div class="container">
|
||
<div class="flex flex-col items-center gap-5 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
|
||
<div class="lg:max-w-[790px]">
|
||
<div class="flex gap-3">
|
||
<div class="h-[30px] w-[5px] bg-secondary"></div>
|
||
<h5 class="text-2xl font-extrabold text-black dark:text-white">Latest Blogs</h5>
|
||
</div>
|
||
<div class="mt-5 flex flex-col gap-4 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20 md:flex-row">
|
||
<div class="flex rounded-[10px]">
|
||
<div>
|
||
<div class="relative overflow-hidden rounded-[10px] md:max-w-[360px]">
|
||
<img src="/assets/images/blog/blogs1.jpg" alt="" />
|
||
<p class="absolute top-5 left-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">
|
||
LIFESTYLE
|
||
</p>
|
||
</div>
|
||
<div class="mt-3 mb-4 flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-lg font-semibold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>16 Unheard Ways To Achieve Greater Walker</a
|
||
>
|
||
<div class="mt-[14px] flex gap-6">
|
||
<div class="flex items-center gap-2">
|
||
<a href="javascript:">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="9" cy="4.5" r="3" stroke="#7780A1" stroke-width="1.5"></circle>
|
||
<path
|
||
d="M11.25 15.4613C10.5681 15.6464 9.8052 15.75 9 15.75C6.10051 15.75 3.75 14.4069 3.75 12.75C3.75 11.0931 6.10051 9.75 9 9.75C11.8995 9.75 14.25 11.0931 14.25 12.75C14.25 13.009 14.1926 13.2603 14.0846 13.5"
|
||
stroke="#7780A1"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</a>
|
||
<p class="text-sm font-semibold">Admin</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<a href="javascript:">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M6.7213 14.1831L7.18561 13.5941L6.7213 14.1831ZM9 4.12541L8.45963 4.64551C8.60102 4.79241 8.79612 4.87541 9 4.87541C9.20388 4.87541 9.39898 4.79241 9.54037 4.64551L9 4.12541ZM11.2787 14.1831L11.743 14.7721L11.2787 14.1831ZM5.36961 12.1708C5.04978 11.9076 4.57713 11.9535 4.31391 12.2733C4.05069 12.5932 4.09658 13.0658 4.4164 13.329L5.36961 12.1708ZM1.59199 10.1485C1.79074 10.5119 2.24647 10.6454 2.60988 10.4466C2.9733 10.2479 3.10677 9.79216 2.90801 9.42875L1.59199 10.1485ZM2.25 6.85276C2.25 5.30976 3.12161 4.02553 4.29622 3.48861C5.42355 2.97331 6.96414 3.09175 8.45963 4.64551L9.54037 3.60531C7.66098 1.6527 5.45157 1.31122 3.67262 2.12438C1.94095 2.91593 0.75 4.74856 0.75 6.85276H2.25ZM6.25699 14.7721C6.63944 15.0736 7.06194 15.4049 7.49302 15.6568C7.92386 15.9085 8.4346 16.1249 9 16.1249V14.6249C8.8154 14.6249 8.57614 14.5524 8.24981 14.3617C7.92371 14.1711 7.58186 13.9065 7.18561 13.5941L6.25699 14.7721ZM11.743 14.7721C12.8019 13.9374 14.1903 12.9557 15.2777 11.7313C16.3907 10.478 17.25 8.91043 17.25 6.85276H15.75C15.75 8.4423 15.102 9.67014 14.1561 10.7353C13.1845 11.8293 11.9623 12.6892 10.8144 13.5941L11.743 14.7721ZM17.25 6.85276C17.25 4.74856 16.059 2.91593 14.3274 2.12438C12.5484 1.31122 10.339 1.6527 8.45963 3.60531L9.54037 4.64551C11.0359 3.09175 12.5765 2.97331 13.7038 3.48861C14.8784 4.02553 15.75 5.30976 15.75 6.85276H17.25ZM10.8144 13.5941C10.4181 13.9065 10.0763 14.1711 9.75019 14.3617C9.42386 14.5524 9.1846 14.6249 9 14.6249V16.1249C9.5654 16.1249 10.0761 15.9085 10.507 15.6568C10.9381 15.4049 11.3606 15.0736 11.743 14.7721L10.8144 13.5941ZM7.18561 13.5941C6.58203 13.1183 5.98392 12.6764 5.36961 12.1708L4.4164 13.329C5.04031 13.8425 5.70661 14.3382 6.25699 14.7721L7.18561 13.5941ZM2.90801 9.42875C2.50096 8.68449 2.25 7.84347 2.25 6.85276H0.75C0.75 8.11484 1.0741 9.20162 1.59199 10.1485L2.90801 9.42875Z"
|
||
fill="#7780A1"
|
||
></path>
|
||
</svg>
|
||
</a>
|
||
<p class="text-sm font-semibold">350</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<a href="javascript:">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_1110_13575)">
|
||
<path
|
||
d="M9.81499 16.0408L10.4604 16.4228L10.4604 16.4228L9.81499 16.0408ZM10.2216 15.3539L9.57615 14.9719L10.2216 15.3539ZM7.7784 15.3539L7.13299 15.7359H7.13299L7.7784 15.3539ZM8.18498 16.0408L8.83039 15.6587L8.18498 16.0408ZM0.75 7.875C0.75 8.28921 1.08579 8.625 1.5 8.625C1.91421 8.625 2.25 8.28921 2.25 7.875H0.75ZM2.47836 11.6481C2.31985 11.2654 1.88112 11.0836 1.49844 11.2422C1.11576 11.4007 0.934029 11.8394 1.09254 12.2221L2.47836 11.6481ZM5.84218 14.2436L5.82926 14.9935H5.82926L5.84218 14.2436ZM3.81494 13.9645L3.52792 14.6575H3.52793L3.81494 13.9645ZM16.2145 11.9351L16.9075 12.2221L16.2145 11.9351ZM12.1578 14.2436L12.1449 13.4937L12.1578 14.2436ZM14.1851 13.9645L14.4721 14.6575H14.4721L14.1851 13.9645ZM14.7094 2.0526L14.3175 2.69208L14.7094 2.0526ZM15.9474 3.29063L16.5869 2.89876V2.89876L15.9474 3.29063ZM3.29063 2.0526L2.89876 1.41312V1.41312L3.29063 2.0526ZM2.0526 3.29063L1.41312 2.89876H1.41312L2.0526 3.29063ZM7.05209 14.4074L7.42917 13.7591L7.42916 13.7591L7.05209 14.4074ZM10.4604 16.4228L10.867 15.7359L9.57615 14.9719L9.16958 15.6587L10.4604 16.4228ZM7.13299 15.7359L7.53956 16.4228L8.83039 15.6587L8.42382 14.9719L7.13299 15.7359ZM9.16958 15.6587C9.13625 15.7151 9.0781 15.7499 8.99998 15.7499C8.92187 15.7499 8.86372 15.7151 8.83039 15.6587L7.53956 16.4228C8.19235 17.5257 9.80762 17.5257 10.4604 16.4228L9.16958 15.6587ZM7.875 2.25H10.125V0.75H7.875V2.25ZM15.75 7.875V8.625H17.25V7.875H15.75ZM5.85511 13.4937C4.91351 13.4775 4.45251 13.4168 4.10195 13.2716L3.52793 14.6575C4.16782 14.9225 4.88782 14.9773 5.82926 14.9935L5.85511 13.4937ZM1.09254 12.2221C1.54926 13.3247 2.4253 14.2007 3.52792 14.6575L4.10195 13.2716C3.36687 12.9672 2.78284 12.3831 2.47836 11.6481L1.09254 12.2221ZM15.75 8.625C15.75 9.5089 15.7496 10.1343 15.7161 10.6258C15.683 11.1106 15.6202 11.4101 15.5216 11.6481L16.9075 12.2221C17.0943 11.7709 17.1743 11.289 17.2126 10.7279C17.2504 10.1735 17.25 9.48838 17.25 8.625H15.75ZM12.1707 14.9935C13.1122 14.9773 13.8322 14.9225 14.4721 14.6575L13.8981 13.2716C13.5475 13.4168 13.0865 13.4775 12.1449 13.4937L12.1707 14.9935ZM15.5216 11.648C15.2172 12.3831 14.6331 12.9672 13.8981 13.2716L14.4721 14.6575C15.5747 14.2007 16.4507 13.3247 16.9075 12.2221L15.5216 11.648ZM10.125 2.25C11.3671 2.25 12.2459 2.25079 12.9287 2.31571C13.6003 2.37956 14.0043 2.50013 14.3175 2.69208L15.1012 1.41312C14.5127 1.05247 13.8521 0.896737 13.0707 0.822442C12.3004 0.749209 11.338 0.75 10.125 0.75V2.25ZM17.25 7.875C17.25 6.66199 17.2508 5.69956 17.1776 4.92933C17.1033 4.14795 16.9475 3.48728 16.5869 2.89876L15.3079 3.6825C15.4999 3.99574 15.6204 4.39972 15.6843 5.07131C15.7492 5.75406 15.75 6.63294 15.75 7.875H17.25ZM14.3175 2.69208C14.7212 2.93945 15.0606 3.27884 15.3079 3.6825L16.5869 2.89876C16.2158 2.29326 15.7067 1.78417 15.1012 1.41312L14.3175 2.69208ZM7.875 0.75C6.66199 0.75 5.69956 0.749209 4.92933 0.822442C4.14795 0.896737 3.48728 1.05247 2.89876 1.41312L3.6825 2.69208C3.99574 2.50013 4.39972 2.37956 5.07131 2.31571C5.75406 2.25079 6.63294 2.25 7.875 2.25V0.75ZM2.25 7.875C2.25 6.63294 2.25079 5.75406 2.31571 5.07131C2.37956 4.39972 2.50013 3.99574 2.69208 3.6825L1.41312 2.89876C1.05247 3.48728 0.896737 4.14795 0.822442 4.92933C0.749209 5.69956 0.75 6.66199 0.75 7.875H2.25ZM2.89876 1.41312C2.29326 1.78417 1.78417 2.29326 1.41312 2.89876L2.69208 3.6825C2.93945 3.27884 3.27884 2.93945 3.6825 2.69208L2.89876 1.41312ZM8.42382 14.9719C8.27335 14.7176 8.13454 14.4816 7.99807 14.2943C7.85237 14.0944 7.67724 13.9033 7.42917 13.7591L6.67502 15.0557C6.68022 15.0587 6.71056 15.0745 6.78586 15.1778C6.87039 15.2938 6.9681 15.4573 7.13299 15.7359L8.42382 14.9719ZM5.82926 14.9935C6.16207 14.9992 6.36046 15.0034 6.50878 15.0198C6.64318 15.0347 6.6723 15.0541 6.67502 15.0557L7.42916 13.7591C7.17862 13.6133 6.92166 13.5564 6.67386 13.5289C6.43998 13.503 6.16006 13.499 5.8551 13.4937L5.82926 14.9935ZM10.867 15.7359C11.0319 15.4573 11.1296 15.2938 11.2141 15.1778C11.2894 15.0745 11.3198 15.0587 11.3249 15.0557L10.5708 13.7591C10.3227 13.9033 10.1476 14.0944 10.0019 14.2943C9.86543 14.4816 9.72662 14.7176 9.57615 14.9719L10.867 15.7359ZM12.1449 13.4937C11.8399 13.499 11.56 13.503 11.3261 13.5289C11.0783 13.5564 10.8214 13.6133 10.5708 13.7591L11.3249 15.0557C11.3277 15.0541 11.3568 15.0347 11.4912 15.0198C11.6395 15.0034 11.8379 14.9992 12.1707 14.9935L12.1449 13.4937Z"
|
||
fill="#7780A1"
|
||
></path>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_1110_13575">
|
||
<rect width="18" height="18" fill="white"></rect>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</a>
|
||
<p class="text-sm font-semibold">30</p>
|
||
</div>
|
||
</div>
|
||
<p class="mt-4 text-sm font-medium">Lorem ipsum dolor amet consectetur adipisicing elit eiusm tempor incididunt...</p>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="group flex gap-[14px]">
|
||
<div class="flex-none">
|
||
<div class="relative h-[120px] w-[120px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/blogs2.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-1">
|
||
<a
|
||
href="javascript:"
|
||
class="text-lf font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>5 Easy Ways You Can Turn Future Into Success</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
<p class="mt-2.5 text-sm font-medium">Lorem ipsum dolor sit amet consectetur elit sed do.</p>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray opacity-50"></div>
|
||
<div class="flex gap-[14px]">
|
||
<div class="flex-none">
|
||
<div class="relative h-[120px] w-[120px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/blogs3.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-1">
|
||
<a
|
||
href="javascript:"
|
||
class="text-lf font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Etiam Vel Neqe</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
<p class="mt-2.5 text-sm font-medium">Lorem ipsum dolor sit amet consectetur elit sed do.</p>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray opacity-50"></div>
|
||
<div class="flex gap-[14px]">
|
||
<div class="flex-none">
|
||
<div class="relative h-[120px] w-[120px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/blogs4.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="flex-1">
|
||
<a
|
||
href="javascript:"
|
||
class="text-lf font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Etiam Vel Neqe</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
<p class="mt-2.5 text-sm font-medium">Lorem ipsum dolor sit amet consectetur elit sed do.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex gap-4">
|
||
<div class="h-[30px] w-[5px] bg-primary"></div>
|
||
<h5 class="text-2xl font-extrabold text-black dark:text-white">Popular Posts</h5>
|
||
</div>
|
||
<div class="mt-5 space-y-5 rounded-[10px] border border-[#BBBBBB]/50 p-4 dark:border-[#7780A1]/20">
|
||
<div class="flex gap-3">
|
||
<div class="flex-none">
|
||
<div class="relative h-20 w-20 overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/popular1.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-[15px] font-bold leading-5 text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Your Light Is About To Stop Being Relevant</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray opacity-50"></div>
|
||
<div class="flex gap-3">
|
||
<div class="flex-none">
|
||
<div class="relative h-20 w-20 overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/popular2.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-[15px] font-bold leading-5 text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Your Light Is About To Stop Being Relevant</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">24 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray opacity-50"></div>
|
||
<div class="flex gap-3">
|
||
<div class="flex-none">
|
||
<div class="relative h-20 w-20 overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/popular3.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-[15px] font-bold leading-5 text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>3 Easy Ways To Make Your iPhone Faster</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray opacity-50"></div>
|
||
<div class="flex gap-3">
|
||
<div class="flex-none">
|
||
<div class="relative h-20 w-20 overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/popular4.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-[15px] font-bold leading-5 text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Secrets Your Parents Never Told You About Bulb</a
|
||
>
|
||
<div class="mt-2.5 flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-12 lg:py-24">
|
||
<div class="container">
|
||
<div class="flex items-center gap-3">
|
||
<div class="h-[30px] w-[5px] bg-secondary"></div>
|
||
<h5 class="text-2xl font-extrabold text-black dark:text-white">Trending</h5>
|
||
</div>
|
||
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-2" data-aos="flip-left" data-aos-duration="1000">
|
||
<div class="group relative h-[300px] flex-1 overflow-hidden rounded-[10px] sm:h-auto">
|
||
<div class="absolute inset-0 z-[1] bg-gradient-to-b from-transparent to-black"></div>
|
||
<img
|
||
src="/assets/images/blog/trending1.jpg"
|
||
class="h-full w-full rotate-0 object-cover duration-200 group-hover:rotate-2 group-hover:scale-110"
|
||
alt=""
|
||
/>
|
||
<h5 class="absolute top-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:left-5 rtl:right-5">TECH</h5>
|
||
<div class="absolute bottom-4 left-5 right-5 z-[1] text-white">
|
||
<a
|
||
href="javascript:"
|
||
class="text-xl font-black duration-200 hover:text-secondary dark:hover:text-secondary sm:text-[32px] sm:leading-10"
|
||
>Apple Watch: What does the future hold?
|
||
</a>
|
||
<p class="my-3 text-sm font-semibold">
|
||
Days fish waters gathered given made third under blessed, is face. Is won’t lights it man can’t...
|
||
</p>
|
||
<div class="border-b border-white/40"></div>
|
||
<div class="mt-[14px] flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||
<div class="group relative h-[263px] w-full overflow-hidden rounded-[10px] lg:max-w-[263px]">
|
||
<div class="absolute inset-0 z-[1] bg-gradient-to-b from-transparent to-black"></div>
|
||
<img
|
||
src="/assets/images/blog/trending2.jpg"
|
||
class="h-full w-full rotate-0 object-cover duration-200 group-hover:rotate-2 group-hover:scale-110"
|
||
alt=""
|
||
/>
|
||
<h5 class="absolute top-5 rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:right-5 rtl:left-5">STYLE</h5>
|
||
<div class="absolute bottom-4 left-5 right-5 z-[1] text-white">
|
||
<a href="javascript:" class="text-[19px] font-bold duration-200 hover:text-secondary dark:hover:text-secondary"
|
||
>The Top Trends For Summer Wedding Dressing</a
|
||
>
|
||
<div class="mt-[14px] flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group relative h-[263px] w-full overflow-hidden rounded-[10px] lg:max-w-[263px]">
|
||
<div class="absolute inset-0 z-[1] bg-gradient-to-b from-transparent to-black"></div>
|
||
<img
|
||
src="/assets/images/blog/trending4.jpg"
|
||
class="h-full w-full rotate-0 object-cover duration-200 group-hover:rotate-2 group-hover:scale-110"
|
||
alt=""
|
||
/>
|
||
<h5 class="absolute top-5 rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:right-5 rtl:left-5">STYLE</h5>
|
||
<div class="absolute bottom-4 left-5 right-5 z-[1] text-white">
|
||
<a href="javascript:" class="text-[19px] font-bold duration-200 hover:text-secondary dark:hover:text-secondary"
|
||
>UBC researchers use drones to track jellyfish blooms</a
|
||
>
|
||
<div class="mt-[14px] flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">17 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group relative h-[263px] w-full overflow-hidden rounded-[10px] lg:max-w-[263px]">
|
||
<div class="absolute inset-0 z-[1] bg-gradient-to-b from-transparent to-black"></div>
|
||
<img
|
||
src="/assets/images/blog/trending3.jpg"
|
||
class="h-full w-full rotate-0 object-cover duration-200 group-hover:rotate-2 group-hover:scale-110"
|
||
alt=""
|
||
/>
|
||
<h5 class="absolute top-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:right-5 rtl:left-5">GUIDE</h5>
|
||
<div class="absolute bottom-4 left-5 right-5 z-[1] text-white">
|
||
<a href="javascript:" class="text-[19px] font-bold duration-200 hover:text-secondary dark:hover:text-secondary"
|
||
>Guide to Throwing the Perfect Summer Pool Party</a
|
||
>
|
||
<div class="mt-[14px] flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">12 Dec 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group relative h-[263px] w-full overflow-hidden rounded-[10px] lg:max-w-[263px]">
|
||
<div class="absolute inset-0 z-[1] bg-gradient-to-b from-transparent to-black"></div>
|
||
<img
|
||
src="/assets/images/blog/trending5.jpg"
|
||
class="h-full w-full rotate-0 object-cover duration-200 group-hover:rotate-2 group-hover:scale-110"
|
||
alt=""
|
||
/>
|
||
<h5 class="absolute top-5 rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold text-white ltr:right-5 rtl:left-5">LIFE</h5>
|
||
<div class="absolute bottom-4 left-5 right-5 z-[1] text-white">
|
||
<a href="javascript:" class="text-[19px] font-bold duration-200 hover:text-secondary dark:hover:text-secondary"
|
||
>Park’s Shinoda says ‘no way’ to a hologram Chester Bennington</a
|
||
>
|
||
<div class="mt-[14px] flex items-center gap-2">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83325V8.49992L9.66667 10.1666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72513C5.64725 2.1579 6.78572 1.83325 8.00001 1.83325C11.6819 1.83325 14.6667 4.81802 14.6667 8.49992C14.6667 12.1818 11.6819 15.1666 8.00001 15.1666C4.31811 15.1666 1.33334 12.1818 1.33334 8.49992C1.33334 7.28563 1.65799 6.14716 2.22522 5.16658"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">28 jan 2023</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-gradient-to-b from-white/60 to-transparent py-12 dark:bg-gradient-to-b dark:from-white/10 dark:to-transparent lg:py-24">
|
||
<div class="container">
|
||
<div class="mb-5 flex justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="h-[30px] w-[5px] bg-primary"></div>
|
||
<h5 class="text-2xl font-extrabold text-black dark:text-white">More Stories</h5>
|
||
</div>
|
||
<div class="flex gap-[14px]">
|
||
<button
|
||
type="button"
|
||
class="Stories-slider-button-prev flex h-[30px] w-[30px] items-center justify-center rounded-full bg-black/[0.04] text-[#08111F] duration-200 hover:bg-black hover:text-white rtl:rotate-y-180 dark:bg-white/[0.04] dark:text-white dark:hover:bg-secondary dark:hover:text-white"
|
||
>
|
||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M5.95007 1.20007L1.48924 5.34228C1.06317 5.73791 1.06317 6.41223 1.48924 6.80787L5.95007 10.9501"
|
||
stroke="currentcolor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="Stories-slider-button-next flex h-[30px] w-[30px] items-center justify-center rounded-full bg-black/[0.04] text-[#08111F] duration-200 hover:bg-black hover:text-white rtl:rotate-y-180 dark:bg-white/[0.04] dark:text-white dark:hover:bg-secondary dark:hover:text-white"
|
||
>
|
||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M1.05011 10.7999L5.51095 6.65772C5.93701 6.26209 5.93701 5.58777 5.51095 5.19213L1.05011 1.04993"
|
||
stroke="currentcolor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rounded-[10px] border border-[#BBBBBB]/50 p-3 dark:border-[#7780A1]/20 sm:p-5">
|
||
<swiper [config]="config">
|
||
<ng-template swiperSlide>
|
||
<div class="relative h-[346px] overflow-hidden rounded-[10px]">
|
||
<div class="absolute inset-0 bg-black/30"></div>
|
||
<img src="/assets/images/blog/stories1.jpg" class="h-full w-full object-cover" alt="" />
|
||
<div class="absolute bottom-5 ltr:left-5 rtl:right-5">
|
||
<p class="inline-block rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold text-white">FASHION</p>
|
||
<h5 class="mt-3 text-xl font-extrabold text-white">16 Unheard Ways To Achieve Greater Walker</h5>
|
||
<div class="mt-[14px] flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold text-white">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-white">
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83337V8.50004L9.66667 10.1667"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72526C5.64725 2.15802 6.78572 1.83337 8.00001 1.83337C11.6819 1.83337 14.6667 4.81814 14.6667 8.50004C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.50004C1.33334 7.28575 1.65799 6.14728 2.22522 5.16671"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold text-white">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ng-template>
|
||
|
||
<ng-template swiperSlide>
|
||
<div class="relative h-[346px] overflow-hidden rounded-[10px]">
|
||
<div class="absolute inset-0 bg-black/30"></div>
|
||
<img src="/assets/images/blog/stories2.jpg" class="h-full w-full object-cover" alt="" />
|
||
<div class="absolute bottom-5 ltr:left-5 rtl:right-5">
|
||
<p class="inline-block rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold text-white">TIPS</p>
|
||
<h5 class="mt-3 text-xl font-extrabold text-white">Ten top tips to improve your financial management</h5>
|
||
<div class="mt-[14px] flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold text-white">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-white">
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83337V8.50004L9.66667 10.1667"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72526C5.64725 2.15802 6.78572 1.83337 8.00001 1.83337C11.6819 1.83337 14.6667 4.81814 14.6667 8.50004C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.50004C1.33334 7.28575 1.65799 6.14728 2.22522 5.16671"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold text-white">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ng-template>
|
||
|
||
<ng-template swiperSlide>
|
||
<div class="relative h-[346px] overflow-hidden rounded-[10px]">
|
||
<div class="absolute inset-0 bg-black/30"></div>
|
||
<img src="/assets/images/blog/stories3.jpg" class="h-full w-full object-cover" alt="" />
|
||
<div class="absolute bottom-5 ltr:left-5 rtl:right-5">
|
||
<p class="inline-block rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold text-white">TIPS</p>
|
||
<h5 class="mt-3 text-xl font-extrabold text-white">Ten top tips to improve your financial management</h5>
|
||
<div class="mt-[14px] flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold text-white">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-white">
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83337V8.50004L9.66667 10.1667"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72526C5.64725 2.15802 6.78572 1.83337 8.00001 1.83337C11.6819 1.83337 14.6667 4.81814 14.6667 8.50004C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.50004C1.33334 7.28575 1.65799 6.14728 2.22522 5.16671"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold text-white">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ng-template>
|
||
</swiper>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="relative bg-black py-12 dark:bg-[#1C2331] lg:py-24">
|
||
<div class="absolute inset-0 bg-[url(/assets/images/blog/newsletter.svg)] bg-center bg-repeat opacity-50"></div>
|
||
<div class="container">
|
||
<div class="relative z-[1] flex flex-col items-center justify-between gap-5 text-center lg:flex-row ltr:lg:text-left rtl:lg:text-right">
|
||
<div>
|
||
<h2 class="text-3xl font-extrabold text-primary sm:text-[40px] sm:leading-[50px]">JOIN OUR NEWSLETTER!</h2>
|
||
<p class="mt-2.5 text-xl font-semibold text-white">Enter your email to receive our newsletter.</p>
|
||
<div class="relative mx-auto mt-10 lg:mx-0">
|
||
<input
|
||
type="email"
|
||
placeholder="example@gmail.com*"
|
||
class="relative w-full border border-white bg-transparent py-[18px] text-base font-semibold !text-white outline-none ltr:pl-4 ltr:pr-36 rtl:pr-4 rtl:pl-36"
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="absolute top-1/2 -translate-y-1/2 bg-secondary py-3 px-8 text-sm font-extrabold text-white duration-200 hover:bg-primary ltr:right-2 rtl:left-2"
|
||
>
|
||
SUBMIT
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="max-w-[440px]" data-aos="fade-left" data-aos-duration="1000">
|
||
<img src="/assets/images/blog/newsletter.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-gradient-to-b from-white/60 to-transparent py-12 dark:bg-none lg:py-24">
|
||
<div class="container">
|
||
<div class="mb-9 flex justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="h-[30px] w-[5px] bg-secondary"></div>
|
||
<h5 class="text-2xl font-extrabold text-black dark:text-white">Celebration</h5>
|
||
</div>
|
||
<div class="flex gap-[14px]">
|
||
<button
|
||
type="button"
|
||
class="feedback-slider-button-prev flex h-[30px] w-[30px] items-center justify-center rounded-full bg-black/[0.04] text-[#08111F] duration-200 hover:bg-black hover:text-white rtl:rotate-y-180 dark:bg-white/[0.04] dark:text-white dark:hover:bg-secondary dark:hover:text-white"
|
||
>
|
||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M5.95007 1.20007L1.48924 5.34228C1.06317 5.73791 1.06317 6.41223 1.48924 6.80787L5.95007 10.9501"
|
||
stroke="currentcolor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="feedback-slider-button-next flex h-[30px] w-[30px] items-center justify-center rounded-full bg-black/[0.04] text-[#08111F] duration-200 hover:bg-black hover:text-white rtl:rotate-y-180 dark:bg-white/[0.04] dark:text-white dark:hover:bg-secondary dark:hover:text-white"
|
||
>
|
||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M1.05011 10.7999L5.51095 6.65772C5.93701 6.26209 5.93701 5.58777 5.51095 5.19213L1.05011 1.04993"
|
||
stroke="currentcolor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<swiper [config]="config1">
|
||
<ng-template swiperSlide>
|
||
<div class="relative h-[346px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/celebration1.jpg" class="h-full w-full object-cover" alt="" />
|
||
<p class="absolute top-5 rounded bg-secondary py-1 px-2.5 text-[12px] text-white ltr:left-5 rtl:right-5">LIFESTYLE</p>
|
||
</div>
|
||
<div>
|
||
<div class="mt-[14px] mb-3 flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="">
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-lg font-extrabold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Secrets Your Parents Never Told You About Bulb</a
|
||
>
|
||
</div>
|
||
</ng-template>
|
||
|
||
<ng-template swiperSlide>
|
||
<div class="relative h-[346px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/celebration2.jpg" class="h-full w-full object-cover" alt="" />
|
||
<p class="absolute top-5 rounded bg-primary py-1 px-2.5 text-[12px] text-white ltr:left-5 rtl:right-5">TRAVEL</p>
|
||
</div>
|
||
<div>
|
||
<div class="mb-3 mt-[14px] flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="">
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-lg font-extrabold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>SuperShe Island: Women-only luxury retreat opening in Finland</a
|
||
>
|
||
</div>
|
||
</ng-template>
|
||
|
||
<ng-template swiperSlide>
|
||
<div class="relative h-[346px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/celebration3.jpg" class="h-full w-full object-cover" alt="" />
|
||
<p class="absolute top-5 rounded bg-primary py-1 px-2.5 text-[12px] text-white ltr:left-5 rtl:right-5">TRAVEL</p>
|
||
</div>
|
||
<div>
|
||
<div class="mb-3 mt-[14px] flex gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<img src="/assets/images/blog/shaun.png" class="w-9" alt="" />
|
||
<p class="text-[13px] font-semibold">Shaun Park</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-white">
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">20 May 2022</p>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-lg font-extrabold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Overtourism and the big chill: travel trends in 2018</a
|
||
>
|
||
</div>
|
||
</ng-template>
|
||
</swiper>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mb-12 dark:bg-none sm:p-5 lg:mb-24">
|
||
<div class="mx-auto max-w-[1440px] bg-black py-12 dark:bg-gray-dark sm:rounded-[32px] lg:py-24">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
|
||
<div class="flex-1">
|
||
<div class="mb-5 flex gap-3">
|
||
<div class="h-[30px] w-[5px] bg-secondary"></div>
|
||
<h5 class="text-2xl font-extrabold text-white">Most Recent</h5>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||
<div class="relative overflow-hidden rounded-[10px]">
|
||
<div class="h-[150px]">
|
||
<img src="/assets/images/blog/recent1.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<a
|
||
href="javascript:"
|
||
class="text-xl font-bold text-black duration-200 line-clamp-2 hover:text-secondary dark:hover:text-secondary"
|
||
>Still Standing Tall</a
|
||
>
|
||
<p class="mt-2 mb-3 text-sm font-medium line-clamp-2">Life begins at the end of your at comfort zone.</p>
|
||
<div class="border-b border-[#EFEFEF]"></div>
|
||
<div class="mt-2 flex justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<img src="/assets/images/blog/william1.png" alt="" />
|
||
<p class="c">William Wong</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">17 Jan 2023</p>
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="absolute top-5 rounded bg-secondary px-2.5 py-1 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5"
|
||
>
|
||
NATURA
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative overflow-hidden rounded-[10px]">
|
||
<div class="h-[150px]">
|
||
<img src="/assets/images/blog/recent2.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<a
|
||
href="javascript:"
|
||
class="text-xl font-bold text-black duration-200 line-clamp-2 hover:text-secondary dark:hover:text-secondary"
|
||
>Sunny Side Up</a
|
||
>
|
||
<p class="mt-2 mb-3 text-sm font-medium line-clamp-2">No place is ever as bad as they tell you it’s going to be.</p>
|
||
<div class="border-b border-[#EFEFEF]"></div>
|
||
<div class="mt-2 flex justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<img src="/assets/images/blog/william2.png" alt="" />
|
||
<p class="c">Mat Vogels</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">08 Jan 2023</p>
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="absolute top-5 rounded bg-primary px-2.5 py-1 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5"
|
||
>
|
||
PHOTOGRAPHY
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative overflow-hidden rounded-[10px]">
|
||
<div class="h-[150px]">
|
||
<img src="/assets/images/blog/recent3.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<a
|
||
href="javascript:"
|
||
class="text-xl font-bold text-black duration-200 line-clamp-2 hover:text-secondary dark:hover:text-secondary"
|
||
>Through the Mist</a
|
||
>
|
||
<p class="mt-2 mb-3 text-sm font-medium line-clamp-2">Travel makes you see what a tiny place you occupy in the world.</p>
|
||
<div class="border-b border-[#EFEFEF]"></div>
|
||
<div class="mt-2 flex justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<img src="/assets/images/blog/william1.png" alt="" />
|
||
<p class="c">William Wong</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">13 Mar 2023</p>
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="absolute top-5 rounded bg-secondary px-2.5 py-1 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5"
|
||
>
|
||
VACATION
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative overflow-hidden rounded-[10px]">
|
||
<div class="h-[150px]">
|
||
<img src="/assets/images/blog/recent4.jpg" class="h-full w-full object-cover" alt="" />
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<a
|
||
href="javascript:"
|
||
class="text-xl font-bold text-black duration-200 line-clamp-2 hover:text-secondary dark:hover:text-secondary"
|
||
>Awaken Early</a
|
||
>
|
||
<p class="mt-2 mb-3 text-sm font-medium line-clamp-2">The European languages are members of the same family. Their...</p>
|
||
<div class="border-b border-[#EFEFEF]"></div>
|
||
<div class="mt-2 flex justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<img src="/assets/images/blog/william2.png" alt="" />
|
||
<p class="c">Mat Vogels</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">11 Feb 2023</p>
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="absolute top-5 rounded bg-primary px-2.5 py-1 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5"
|
||
>
|
||
VACATION
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-none lg:w-[470px]">
|
||
<div class="mb-5 flex gap-3">
|
||
<div class="h-[30px] w-[5px] bg-primary"></div>
|
||
<h5 class="text-2xl font-extrabold text-white">Featured Posts</h5>
|
||
</div>
|
||
<div class="space-y-6">
|
||
<div class="relative h-[306px] w-full overflow-hidden rounded-[10px]">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-[#000]/5 via-[#000]/60 to-[#000]/75"></div>
|
||
<img src="/assets/images/blog/featured1.jpg" class="h-full w-full object-cover" alt="" />
|
||
<div class="absolute bottom-5 left-5 right-5">
|
||
<a href="javascript:" class="text-xl font-bold text-white hover:text-secondary dark:hover:text-secondary">The Road Ahead</a>
|
||
<p class="mt-2 text-sm font-medium text-white">The road ahead might be paved - it might not be.</p>
|
||
<div class="mt-3 border-b border-white/40"></div>
|
||
<div class="mt-3 flex justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<img src="/assets/images/blog/william2.png" alt="" />
|
||
<p class="text-sm font-semibold text-white">Mat Vogels</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83337V8.50004L9.66667 10.1667"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72526C5.64725 2.15802 6.78572 1.83337 8.00001 1.83337C11.6819 1.83337 14.6667 4.81814 14.6667 8.50004C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.50004C1.33334 7.28575 1.65799 6.14728 2.22522 5.16671"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-sm font-semibold text-white">05 Sep 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="absolute top-5 rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5"
|
||
>
|
||
PHOTOGRAPHY
|
||
</p>
|
||
</div>
|
||
<div class="relative h-[306px] overflow-hidden rounded-[10px]">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-[#000]/5 via-[#000]/60 to-[#000]/75"></div>
|
||
<img src="/assets/images/blog/featured2.jpg" class="h-full w-full object-cover" alt="" />
|
||
<div class="absolute bottom-5 left-5 right-5">
|
||
<a href="javascript:" class="text-xl font-bold text-white hover:text-secondary dark:hover:text-secondary">From Top Down</a>
|
||
<p class="mt-2 text-sm font-medium text-white">Once a year, go someplace you’ve never been before.</p>
|
||
<div class="mt-3 border-b border-white/40"></div>
|
||
<div class="mt-3 flex justify-between">
|
||
<div class="flex items-center gap-2.5">
|
||
<img src="/assets/images/blog/william1.png" alt="" />
|
||
<p class="text-sm font-semibold text-white">William Wong</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83337V8.50004L9.66667 10.1667"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72526C5.64725 2.15802 6.78572 1.83337 8.00001 1.83337C11.6819 1.83337 14.6667 4.81814 14.6667 8.50004C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.50004C1.33334 7.28575 1.65799 6.14728 2.22522 5.16671"
|
||
stroke="white"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-sm font-semibold text-white">07 Sep 2022</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="absolute top-5 rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white ltr:left-5 rtl:right-5">
|
||
ADVENTURE
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-white py-6 dark:bg-[#1C2331]">
|
||
<div class="container">
|
||
<div class="grid grid-cols-2 justify-center gap-7 text-center md:grid-cols-4">
|
||
<div>
|
||
<span>
|
||
<svg class="mx-auto h-12 w-12" viewBox="0 0 51 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M46.3333 25C46.3333 25 44.2647 26.8557 40.1274 28.5106L34.2765 30.851C30.1392 32.5059 28.0706 33.3333 25.5 33.3333C22.9294 33.3333 20.8608 32.5059 16.7235 30.851L10.8726 28.5106C6.73529 26.8557 4.66666 25 4.66666 25"
|
||
stroke="#B476E5"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
<path
|
||
d="M4.66666 33.3334C4.66666 33.3334 6.73529 35.1891 10.8726 36.844L16.7235 39.1843C20.8608 40.8393 22.9294 41.6667 25.5 41.6667C27.4874 41.6667 29.1747 41.1721 31.75 40.1829M40.1274 36.844C44.2647 35.1891 46.3333 33.3334 46.3333 33.3334"
|
||
stroke="#47BDFF"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
<path
|
||
d="M10.8726 13.1561C6.73529 14.811 4.66666 15.6385 4.66666 16.6667C4.66666 17.6949 6.73529 18.5224 10.8726 20.1773L16.7235 22.5177C20.8608 24.1726 22.9294 25 25.5 25C28.0706 25 30.1392 24.1726 34.2765 22.5177L40.1274 20.1773C44.2647 18.5224 46.3333 17.6949 46.3333 16.6667C46.3333 15.6385 44.2647 14.811 40.1274 13.1561L34.2765 10.8157C30.1392 9.16083 28.0706 8.33337 25.5 8.33337C23.5126 8.33337 21.8252 8.82797 19.25 9.81715"
|
||
stroke="#47BDFF"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<div
|
||
class="mt-5 text-[34px] font-black leading-10 text-black dark:text-white"
|
||
[countUp]="60"
|
||
[options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
|
||
[reanimateOnClick]="false"
|
||
>
|
||
{{0}}
|
||
</div>
|
||
<p class="mt-2.5 text-base font-bold">Unique content blocks</p>
|
||
</div>
|
||
<div>
|
||
<span>
|
||
<svg class="mx-auto h-12 w-12" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M6.25 20.8333V33.3333C6.25 36.7851 9.04822 39.5833 12.5 39.5833M37.5 10.4166C37.5 6.96485 34.7018 4.16663 31.25 4.16663H22.9167C15.0599 4.16663 11.1316 4.16663 8.69078 6.6074C7.32998 7.9682 6.72786 9.79139 6.46144 12.5"
|
||
stroke="#47BDFF"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
<path
|
||
d="M43.7464 20.8333C43.7212 16.302 43.5202 13.848 41.9194 12.2472C40.0888 10.4166 37.1426 10.4166 31.25 10.4166H25C19.1074 10.4166 16.1612 10.4166 14.3306 12.2472C12.5 14.0778 12.5 17.0241 12.5 22.9166V33.3333C12.5 39.2259 12.5 42.1721 14.3306 44.0027C16.1612 45.8333 19.1074 45.8333 25 45.8333H31.25C37.1426 45.8333 40.0888 45.8333 41.9194 44.0027C43.75 42.1721 43.75 39.2259 43.75 33.3333V31.25"
|
||
stroke="#B476E5"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<div
|
||
class="mt-5 text-[34px] font-black leading-10 text-black dark:text-white"
|
||
[countUp]="20"
|
||
[options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
|
||
[reanimateOnClick]="false"
|
||
>
|
||
{{0}}
|
||
</div>
|
||
<p class="mt-2.5 text-base font-bold">Positive feedback</p>
|
||
</div>
|
||
<div>
|
||
<span>
|
||
<svg class="mx-auto h-12 w-12" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M43.75 35.4167V25C43.75 21.1664 42.5995 17.6016 40.625 14.6319M6.25 35.4167V25C6.25 14.6447 14.6447 6.25 25 6.25C27.9934 6.25 30.823 6.95147 33.3333 8.199"
|
||
stroke="#47BDFF"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
<path d="M45.8333 32.2916V36.4583" stroke="#B476E5" stroke-width="3" stroke-linecap="round" />
|
||
<path d="M4.16667 32.2916V36.4583" stroke="#B476E5" stroke-width="3" stroke-linecap="round" />
|
||
<path
|
||
d="M16.6667 28.843C16.6667 27.2505 16.6667 26.4542 16.3026 25.9005C16.1194 25.6219 15.8763 25.3917 15.5925 25.2281C15.0286 24.9032 14.2669 24.9783 12.7436 25.1285C10.1768 25.3816 8.89341 25.5081 7.97369 26.2009C7.50821 26.5516 7.11745 26.9986 6.82596 27.514C6.25 28.5323 6.25 29.874 6.25 32.5575V35.8193C6.25 38.4761 6.25 39.8044 6.83745 40.8303C7.05733 41.2143 7.33294 41.5606 7.6545 41.857C8.51359 42.6487 9.76758 42.8959 12.2756 43.3905C14.0405 43.7386 14.923 43.9126 15.5742 43.5461C15.8146 43.4108 16.027 43.2277 16.1994 43.0071C16.6667 42.4093 16.6667 41.4745 16.6667 39.6049V28.843Z"
|
||
stroke="#B476E5"
|
||
stroke-width="3"
|
||
/>
|
||
<path
|
||
d="M33.3333 28.843C33.3333 27.2505 33.3333 26.4542 33.6974 25.9005C33.8806 25.6219 34.1237 25.3917 34.4075 25.2281C34.9714 24.9032 35.7331 24.9783 37.2564 25.1285C39.8232 25.3816 41.1066 25.5081 42.0263 26.2009C42.4918 26.5516 42.8825 26.9986 43.174 27.514C43.75 28.5323 43.75 29.874 43.75 32.5575V35.8193C43.75 38.4761 43.75 39.8044 43.1625 40.8303C42.9427 41.2143 42.6671 41.5606 42.3455 41.857C41.4864 42.6487 40.2324 42.8959 37.7244 43.3905C35.9595 43.7386 35.077 43.9126 34.4257 43.5461C34.1854 43.4108 33.973 43.2277 33.8006 43.0071C33.3333 42.4093 33.3333 41.4745 33.3333 39.6049V28.843Z"
|
||
stroke="#B476E5"
|
||
stroke-width="3"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<div
|
||
class="mt-5 text-[34px] font-black leading-10 text-black dark:text-white"
|
||
[countUp]="24"
|
||
[options]="{startVal :0 ,duration: 10,suffix: 'hours',enableScrollSpy:true,scrollSpyOnce : true}"
|
||
[reanimateOnClick]="false"
|
||
>
|
||
{{0}}
|
||
</div>
|
||
<p class="mt-2.5 text-base font-bold">Average support time</p>
|
||
</div>
|
||
<div>
|
||
<span>
|
||
<svg class="mx-auto h-12 w-12" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M12.4157 16.025C7.29137 17.1845 4.7292 17.7642 4.11963 19.7244C3.51005 21.6846 5.25677 23.7272 8.7502 27.8123L9.654 28.8692C10.6467 30.03 11.1431 30.6105 11.3664 31.3285C11.5897 32.0466 11.5146 32.821 11.3645 34.3699L11.2279 35.78C10.6997 41.2304 10.4357 43.9556 12.0316 45.1671C13.6274 46.3786 16.0264 45.274 20.8243 43.0649L22.0656 42.4934C23.429 41.8656 24.1107 41.5517 24.8333 41.5517C25.5559 41.5517 26.2377 41.8656 27.6011 42.4934L28.8423 43.0649C33.6403 45.274 36.0392 46.3786 37.6351 45.1671C39.231 43.9556 38.9669 41.2304 38.4388 35.78"
|
||
stroke="#B476E5"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
<path
|
||
d="M40.9165 27.8123C44.4099 23.7272 46.1566 21.6847 45.5471 19.7244C44.9375 17.7642 42.3753 17.1845 37.251 16.0251L35.9252 15.7251C34.4691 15.3956 33.741 15.2309 33.1564 14.7871C32.5718 14.3433 32.1968 13.6707 31.447 12.3255L30.7643 11.1008C28.1254 6.36693 26.806 4 24.8333 4C22.8607 4 21.5413 6.36693 18.9024 11.1008"
|
||
stroke="#47BDFF"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<div
|
||
class="mt-5 text-[34px] font-black leading-10 text-black dark:text-white"
|
||
[countUp]="99"
|
||
[options]="{startVal :0 ,duration: 10,suffix: '%',enableScrollSpy:true,scrollSpyOnce : true}"
|
||
[reanimateOnClick]="false"
|
||
>
|
||
{{0}}
|
||
</div>
|
||
<p class="mt-2.5 text-base font-bold">Visitor return rate</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-12 lg:py-24">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-5 lg:flex-row">
|
||
<div class="space-y-5 lg:max-w-[650px] xl:max-w-[726px]">
|
||
<div class="item-center flex gap-2.5">
|
||
<div class="h-[30px] w-[5px] bg-secondary"></div>
|
||
<div>
|
||
<p class="text-2xl font-extrabold text-black dark:text-white">Random Posts</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 flex flex-col gap-6 sm:flex-row">
|
||
<div class="overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/random1.jpg" alt="" />
|
||
</div>
|
||
<div>
|
||
<div class="mb-[14px]">
|
||
<p class="inline-block rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">Photographs</p>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="mt-3 text-xl font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>How 7 things will change the way you approach photographs</a
|
||
>
|
||
<div class="mt-3 flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">10 Jan 2023</p>
|
||
</div>
|
||
<p class="mt-3 text-sm font-medium">
|
||
Tincidunt dolor neque, risus aliquet ac cursus sodales placerat. Elit, nisl convallis diam imperdiet feugiat. Sagittis, neque
|
||
commodo.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:flex-row">
|
||
<div class="overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/random2.jpg" alt="" />
|
||
</div>
|
||
<div>
|
||
<div class="mb-[14px]">
|
||
<p class="inline-block rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">DESIGN</p>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="mt-3 text-xl font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Online professional animation courses for beginners</a
|
||
>
|
||
<div class="mt-3 flex items-center gap-2.5">
|
||
<span>
|
||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M8 5.83333V8.49999L9.66667 10.1667"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
></path>
|
||
<path
|
||
d="M4.66668 2.72521C5.64725 2.15798 6.78572 1.83333 8.00001 1.83333C11.6819 1.83333 14.6667 4.8181 14.6667 8.49999C14.6667 12.1819 11.6819 15.1667 8.00001 15.1667C4.31811 15.1667 1.33334 12.1819 1.33334 8.49999C1.33334 7.2857 1.65799 6.14724 2.22522 5.16666"
|
||
stroke="#969AA9"
|
||
stroke-width="1.5"
|
||
stroke-linecap="round"
|
||
></path>
|
||
</svg>
|
||
</span>
|
||
<p class="text-[13px] font-semibold">12 Jan 2023</p>
|
||
</div>
|
||
<p class="mt-3 text-sm font-medium">
|
||
Turpis pulvinar quam nec porta faucibus blandit nulla diam ut. Nisi, amet sit vitae mattis. Dictum enim dictum quam pretium
|
||
pretium.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="item-center flex gap-2.5">
|
||
<div class="h-[30px] w-[5px] bg-primary"></div>
|
||
<div>
|
||
<p class="text-2xl font-extrabold text-black dark:text-white">Latest Videos</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 mb-5 flex gap-3">
|
||
<div class="relative max-w-[165px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/videos1.jpg" class="h-full w-full object-cover" alt="" />
|
||
<a
|
||
href="javascript:"
|
||
class="absolute bottom-2.5 flex h-6 w-6 items-center justify-center bg-secondary text-white ltr:left-2.5 rtl:right-2.5"
|
||
>
|
||
<svg class="h-3 w-3" viewBox="0 0 666 731" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M665.83 365.429C666.127 387.492 660.46 409.227 649.428 428.336C638.392 447.445 622.402 463.221 603.147 473.997L188.054 713.651C169.095 724.942 147.439 730.901 125.371 730.901C103.308 730.901 81.6524 724.943 62.6937 713.651C43.4337 702.875 27.4484 687.099 16.4124 667.989C5.38116 648.88 -0.284969 627.145 0.0110307 605.083V125.776C-0.280636 103.719 5.3913 81.9947 16.423 62.8907C27.4542 43.792 43.4444 28.0213 62.6937 17.2507C81.6524 5.95893 103.308 0 125.371 0C147.439 0 169.095 5.9584 188.054 17.2507L603.147 256.864C622.402 267.64 638.392 283.416 649.428 302.525C660.46 321.635 666.126 343.369 665.83 365.432V365.429Z"
|
||
fill="currentcolor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<div class="mb-3">
|
||
<p class="inline-block rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">LIFE STYLE</p>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-base font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Julie Chair A Modern Durable Plastic ALMA Design Chair</a
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray/50"></div>
|
||
<div class="mt-5 mb-5 flex gap-3">
|
||
<div class="relative max-w-[165px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/videos2.jpg" class="h-full w-full object-cover" alt="" />
|
||
<a
|
||
href="javascript:"
|
||
class="absolute bottom-2.5 flex h-6 w-6 items-center justify-center bg-secondary text-white ltr:left-2.5 rtl:right-2.5"
|
||
>
|
||
<svg class="h-3 w-3" viewBox="0 0 666 731" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M665.83 365.429C666.127 387.492 660.46 409.227 649.428 428.336C638.392 447.445 622.402 463.221 603.147 473.997L188.054 713.651C169.095 724.942 147.439 730.901 125.371 730.901C103.308 730.901 81.6524 724.943 62.6937 713.651C43.4337 702.875 27.4484 687.099 16.4124 667.989C5.38116 648.88 -0.284969 627.145 0.0110307 605.083V125.776C-0.280636 103.719 5.3913 81.9947 16.423 62.8907C27.4542 43.792 43.4444 28.0213 62.6937 17.2507C81.6524 5.95893 103.308 0 125.371 0C147.439 0 169.095 5.9584 188.054 17.2507L603.147 256.864C622.402 267.64 638.392 283.416 649.428 302.525C660.46 321.635 666.126 343.369 665.83 365.432V365.429Z"
|
||
fill="currentcolor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<div class="mb-3">
|
||
<p class="inline-block rounded bg-primary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">CARS</p>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="mt-3 text-base font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>An Exciting Car Representing Aston Martin's Future</a
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-dashed border-gray/50"></div>
|
||
<div class="mt-5 flex gap-3">
|
||
<div class="relative max-w-[165px] overflow-hidden rounded-[10px]">
|
||
<img src="/assets/images/blog/videos3.jpg" class="h-full w-full object-cover" alt="" />
|
||
<a
|
||
href="javascript:"
|
||
class="absolute bottom-2.5 flex h-6 w-6 items-center justify-center bg-secondary text-white ltr:left-2.5 rtl:right-2.5"
|
||
>
|
||
<svg class="h-3 w-3" viewBox="0 0 666 731" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M665.83 365.429C666.127 387.492 660.46 409.227 649.428 428.336C638.392 447.445 622.402 463.221 603.147 473.997L188.054 713.651C169.095 724.942 147.439 730.901 125.371 730.901C103.308 730.901 81.6524 724.943 62.6937 713.651C43.4337 702.875 27.4484 687.099 16.4124 667.989C5.38116 648.88 -0.284969 627.145 0.0110307 605.083V125.776C-0.280636 103.719 5.3913 81.9947 16.423 62.8907C27.4542 43.792 43.4444 28.0213 62.6937 17.2507C81.6524 5.95893 103.308 0 125.371 0C147.439 0 169.095 5.9584 188.054 17.2507L603.147 256.864C622.402 267.64 638.392 283.416 649.428 302.525C660.46 321.635 666.126 343.369 665.83 365.432V365.429Z"
|
||
fill="currentcolor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<div class="mb-3">
|
||
<p class="inline-block rounded bg-secondary py-1 px-2.5 text-[12px] font-extrabold leading-4 text-white">LIFE STYLE</p>
|
||
</div>
|
||
<a
|
||
href="javascript:"
|
||
class="text-base font-bold text-black duration-200 hover:text-secondary dark:text-white dark:hover:text-secondary"
|
||
>Ultra by Ultra Is A Ultimate Minimalist Wallet Solution.</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|