Blog Sections
Blog Sections style 1
From the Blog
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Tips and tricks for building a Startup Company
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- blogs start -->
<div id="blogs" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
<div class="container xl:max-w-6xl mx-auto px-4">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">From the</span> Blog</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- row -->
<div class="flex flex-wrap flex-row justify-center -mx-4">
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow wow fadeInUp" data-wow-duration="1s">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_1.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_2.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Tips and tricks for building a Startup Company</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
</div>
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_3.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
</div><!-- end row -->
</div>
</div><!-- end blogs -->
Blog Sections style 2
From the Blog
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Tips and tricks for building a Startup Company
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- blogs start -->
<div id="blogs" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">From the</span> Blog</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- row -->
<div class="flex flex-wrap flex-row justify-center -mx-4">
<div class="flex-shrink w-11/12 max-w-full lg:w-1/2 px-4">
<!-- Card -->
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden">
<div class="relative overflow-hidden md:flex-shrink md:w-1/3 rounded">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_1.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1 md:flex-shrink md:w-2/3 md:ltr:pl-8 md:rtl:pr-8 md:pt-0">
<div class="mb-2">
<h3 class="text-2xl leading-normal lg:text-xl lg:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="lg:hidden text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="flex-shrink w-11/12 max-w-full lg:w-1/2 px-4">
<!-- Card -->
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden">
<div class="relative overflow-hidden md:flex-shrink md:w-1/3 rounded">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_2.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1 md:flex-shrink md:w-2/3 md:ltr:pl-8 md:rtl:pr-8 md:pt-0">
<div class="mb-2">
<h3 class="text-2xl leading-normal lg:text-xl lg:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Tips and tricks for building a Startup Company</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="lg:hidden text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="flex-shrink w-11/12 max-w-full lg:w-1/2 px-4">
<!-- Card -->
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden">
<div class="relative overflow-hidden md:flex-shrink md:w-1/3 rounded">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_3.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1 md:flex-shrink md:w-2/3 md:ltr:pl-8 md:rtl:pr-8 md:pt-0">
<div class="mb-2">
<h3 class="text-2xl leading-normal lg:text-xl lg:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="lg:hidden text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="flex-shrink w-11/12 max-w-full lg:w-1/2 px-4">
<!-- Card -->
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden">
<div class="relative overflow-hidden md:flex-shrink md:w-1/3 rounded">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_4.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1 md:flex-shrink md:w-2/3 md:ltr:pl-8 md:rtl:pr-8 md:pt-0">
<div class="mb-2">
<h3 class="text-2xl leading-normal lg:text-xl lg:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="lg:hidden text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
</div><!-- end row -->
</div>
</div><!-- end blogs -->
Blog Sections style 3
From the Blog
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Tips and tricks for building a Startup Company
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Tips and tricks for building a Startup Company
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- blogs start -->
<div id="blogs" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
<div class="container xl:max-w-6xl mx-auto px-4">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">From the</span> Blog</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- row -->
<div class="flex flex-wrap flex-row justify-center -mx-4">
<div class="flex-shrink w-11/12 max-w-full md:w-full px-4">
<!-- carousel slider -->
<div id="thumbnail-slider" class="mb-12 lg:mb-6 nav-inset-button nav-primary-button carousel -mx-2" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "pageDots":false, "prevNextButtons": true , "imagesLoaded": true }'>
<div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_1.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_2.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Tips and tricks for building a Startup Company</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
</div>
<div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_3.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_2.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Tips and tricks for building a Startup Company</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
</div>
<div class="max-w-full w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden shadow">
<div class="relative overflow-hidden">
<a href="#">
<div class="absolute inset-0 hover:bg-black opacity-0 transition duration-700 hover:opacity-20"></div>
<img class="max-w-full h-auto" src="src/img-min/blog/blog_3.jpg" alt="alt title">
</a>
</div>
<div class="py-6 px-8 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end blogs -->
Blog Sections style 4
From the Blog
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Tips and tricks for building a Startup Company
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- blogs start -->
<div id="blogs" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">From the</span> Blog</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- row -->
<div class="flex flex-wrap flex-row justify-center -mx-4">
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden wow fadeInUp" data-wow-duration="1s">
<div class="relative overflow-hidden">
<a href="#">
<img class="max-w-full h-auto duration-700 transform hover:scale-110" src="src/img-min/blog/blog_1.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
<div class="relative overflow-hidden">
<a href="#">
<img class="max-w-full h-auto duration-700 transform hover:scale-110" src="src/img-min/blog/blog_2.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Tips and tricks for building a Startup Company</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
</div>
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="relative overflow-hidden">
<a href="#">
<img class="max-w-full h-auto duration-700 transform hover:scale-110" src="src/img-min/blog/blog_3.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
</div><!-- end row -->
</div>
</div><!-- end blogs -->
Blog Sections style 5
From the Blog
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Tips and tricks for building a Startup Company
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- blogs start -->
<div id="blogs" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-white dark:bg-gray-800">
<div class="container xl:max-w-6xl mx-auto px-4">
<!-- section header -->
<header class="text-center mx-auto mb-12">
<h2 class="text-2xl md:text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100"><span class="font-light">From the</span> Blog</h2>
<hr class="block w-12 h-0.5 mx-auto my-5 bg-blue-700 border-blue-700">
</header><!-- end section header -->
<!-- row -->
<div class="flex flex-wrap flex-row justify-center -mx-4">
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden wow fadeInUp" data-wow-duration="1s">
<div class="relative overflow-hidden">
<a href="#">
<img class="max-w-full h-auto duration-700 transform hover:scale-110" src="src/img-min/blog/blog_1.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 px-6 rounded-md z-10 -mt-16 bg-white dark:bg-gray-800 mx-6 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">New web design layout trends in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
<div class="relative overflow-hidden">
<a href="#">
<img class="max-w-full h-auto duration-700 transform hover:scale-110" src="src/img-min/blog/blog_2.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 px-6 rounded-md z-10 -mt-16 bg-white dark:bg-gray-800 mx-6 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Tips and tricks for building a Startup Company</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
</div>
<div class="flex-shrink w-11/12 max-w-full md:w-1/2 lg:w-1/3 px-4">
<!-- Card -->
<div class="flex flex-col bg-white dark:bg-gray-800 mb-12 rounded overflow-hidden wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="relative overflow-hidden">
<a href="#">
<img class="max-w-full h-auto duration-700 transform hover:scale-110" src="src/img-min/blog/blog_3.jpg" alt="alt title">
</a>
</div>
<div class="pt-6 px-6 rounded-md z-10 -mt-16 bg-white dark:bg-gray-800 mx-6 flex-1">
<div class="mb-2">
<h3 class="text-2xl md:text-xl leading-normal md:leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-200"><a href="#" class="hover:text-blue-700 dark:hover:text-gray-100">Web Vitals will become SEO ranking signals in 2021</a></h3>
<div class="text-gray-600">
<svg class="bi bi-calendar ltr:mr-2 rtl:ml-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- End card -->
</div>
</div><!-- end row -->
</div>
</div><!-- end blogs -->