-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
347c693
commit 30af337
Showing
4 changed files
with
338 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| <section> | ||
| <div class="skew skew-top mr-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| <div class="skew skew-top ml-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| <div class="py-20 bg-gray-50 radius-for-skewed"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mb-16 text-center"> | ||
| <span class="text-green-600 font-bold">Dolor sit amet consectutar</span> | ||
| <h2 class="text-4xl lg:text-5xl font-bold font-heading">Our Blog</h2> | ||
| </div> | ||
| <div class="flex flex-wrap justify-center -mx-3"> | ||
| <div class="flex flex-wrap w-full lg:w-1/2"> | ||
| <div class="w-full px-3 mb-5"> | ||
| <a href="#"> | ||
| <div class="relative h-64 mx-auto rounded"> | ||
| <img class="relative h-full w-full rounded object-cover" src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80" alt=""> | ||
| <div class="absolute inset-0 bg-gray-900 opacity-75 rounded"></div> | ||
| <div class="absolute inset-0 p-6 flex flex-col items-start"> | ||
| <span class="mb-auto py-1 px-3 text-sm bg-white rounded-full text-green-600 uppercase font-bold">Travel</span> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <p class="text-xl lg:text-2xl text-white font-bold">Lorem ipsum dolor sit amet</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 px-3 mb-5"> | ||
| <a href="#"> | ||
| <div class="relative mx-auto rounded h-128"> | ||
| <img class="relative h-full w-full rounded object-cover" src="https://images.unsplash.com/photo-1413752362258-7af2a667b590?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="absolute inset-0 bg-gray-900 opacity-75 rounded"></div> | ||
| <div class="absolute inset-0 p-6 flex flex-col items-start"> | ||
| <span class="mb-auto py-1 px-3 text-sm bg-white rounded-full text-green-600 uppercase font-bold">Travel</span> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <p class="text-xl lg:text-2xl text-white font-bold">Vestibulum vehicula leo eget libero eleifend.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 px-3 mb-5"> | ||
| <a href="#"> | ||
| <div class="relative mx-auto rounded h-128"> | ||
| <img class="relative h-full w-full rounded object-cover" src="https://images.unsplash.com/photo-1459213599465-03ab6a4d5931?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="absolute inset-0 bg-gray-900 opacity-75 rounded"></div> | ||
| <div class="absolute inset-0 p-6 flex flex-col items-start"> | ||
| <span class="mb-auto py-1 px-3 text-sm bg-white rounded-full text-green-600 uppercase font-bold">Travel</span> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <p class="text-xl lg:text-2xl text-white font-bold">Aenean convallis sapien a dignissim placerat.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-wrap w-full lg:w-1/2"> | ||
| <div class="w-full lg:w-1/2 px-3 mb-5"> | ||
| <a href="#"> | ||
| <div class="relative mx-auto rounded h-128"> | ||
| <img class="relative h-full w-full rounded object-cover" src="https://images.unsplash.com/photo-1413752362258-7af2a667b590?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="absolute inset-0 bg-gray-900 opacity-75 rounded"></div> | ||
| <div class="absolute inset-0 p-6 flex flex-col items-start"> | ||
| <span class="mb-auto py-1 px-3 text-sm bg-white rounded-full text-green-600 uppercase font-bold">Travel</span> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <p class="text-xl lg:text-2xl text-white font-bold">Vestibulum vehicula leo eget libero eleifend.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 px-3 mb-5"> | ||
| <a href="#"> | ||
| <div class="relative mx-auto rounded h-128"> | ||
| <img class="relative h-full w-full rounded object-cover" src="https://images.unsplash.com/photo-1413752362258-7af2a667b590?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="absolute inset-0 bg-gray-900 opacity-75 rounded"></div> | ||
| <div class="absolute inset-0 p-6 flex flex-col items-start"> | ||
| <span class="mb-auto py-1 px-3 text-sm bg-white rounded-full text-green-600 uppercase font-bold">Travel</span> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <p class="text-xl lg:text-2xl text-white font-bold">Vestibulum vehicula leo eget libero eleifend.</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="w-full px-3 mb-5"> | ||
| <a href="#"> | ||
| <div class="relative mx-auto rounded h-64"> | ||
| <img class="relative h-full w-full rounded object-cover" src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80" alt=""> | ||
| <div class="absolute inset-0 bg-gray-900 opacity-75 rounded"></div> | ||
| <div class="absolute inset-0 p-6 flex flex-col items-start"> | ||
| <span class="mb-auto py-1 px-3 text-sm bg-white rounded-full text-green-600 uppercase font-bold">Travel</span> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <p class="text-xl lg:text-2xl text-white font-bold">Lorem ipsum dolor sit amet</p> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="mt-10"><a class="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose outline-none transition duration-200" href="#">View More Articles</a></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="skew skew-bottom mr-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| <div class="skew skew-bottom ml-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| <section> | ||
| <div class="skew skew-top mr-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| <div class="skew skew-top ml-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| <div class="py-20 bg-gray-50 radius-for-skewed"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mb-6 flex flex-wrap justify-center"> | ||
| <div class="mb-16 w-full text-center"> | ||
| <span class="text-green-600 font-bold">Dolor sit amet consectutar</span> | ||
| <h2 class="text-4xl lg:text-5xl font-bold font-heading">Our Blog</h2> | ||
| </div> | ||
| <div class="flex flex-wrap -mx-3 mb-16"> | ||
| <div class="mb-6 lg:mb-0 w-full lg:w-1/2 px-3"> | ||
| <div class="h-full flex flex-col rounded shadow"> | ||
| <img class="rounded-t object-cover h-80 lg:h-full w-full" src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80" alt=""> | ||
| <div class="mt-auto p-6 rounded-b bg-white"> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <h2 class="my-2 text-2xl font-bold">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h2> | ||
| <p class="mb-6 text-gray-400 leading-loose">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum. Integer sit amet erat sit amet lectus lacinia mattis. Donec est tortor, fermentum at urna a, accumsan suscipit sem.</p> | ||
| <a class="text-green-600 hover:text-green-700 font-bold" href="#">Learn More</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-wrap w-full lg:w-1/2"> | ||
| <div class="mb-6 w-full lg:w-1/2 px-3"> | ||
| <div class="rounded overflow-hidden shadow"> | ||
| <img class="lg:h-48 rounded-t" src="https://images.unsplash.com/photo-1413752362258-7af2a667b590?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="p-6 rounded-b bg-white"> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <h2 class="my-2 text-2xl font-bold">Morbi scelerisque nulla et lectus</h2> | ||
| <a class="text-green-600 hover:text-green-700 font-bold" href="#">Learn More</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="mb-6 w-full lg:w-1/2 px-3"> | ||
| <div class="rounded overflow-hidden shadow"> | ||
| <img class="lg:h-48 rounded-t" src="https://images.unsplash.com/photo-1459213599465-03ab6a4d5931?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="p-6 rounded-b bg-white"> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <h2 class="my-2 text-2xl font-bold">Morbi scelerisque nulla et lectus</h2> | ||
| <a class="text-green-600 hover:text-green-700 font-bold" href="#">Learn More</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="mb-6 w-full lg:w-1/2 px-3"> | ||
| <div class="rounded overflow-hidden shadow"> | ||
| <img class="lg:h-48 rounded-t" src="https://images.unsplash.com/photo-1459213599465-03ab6a4d5931?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="p-6 rounded-b bg-white"> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <h2 class="my-2 text-2xl font-bold">Morbi scelerisque nulla et lectus</h2> | ||
| <a class="text-green-600 hover:text-green-700 font-bold" href="#">Learn More</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="mb-6 w-full lg:w-1/2 px-3"> | ||
| <div class="rounded overflow-hidden shadow"> | ||
| <img class="lg:h-48 rounded-t" src="https://images.unsplash.com/photo-1413752362258-7af2a667b590?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1055&q=80" alt=""> | ||
| <div class="p-6 rounded-b bg-white"> | ||
| <span class="text-sm text-gray-400">24 Jan, 2021</span> | ||
| <h2 class="my-2 text-2xl font-bold">Morbi scelerisque nulla et lectus</h2> | ||
| <a class="text-green-600 hover:text-green-700 font-bold" href="#">Learn More</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div><a class="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose outline-none transition duration-200" href="#">View More Articles</a></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="skew skew-bottom mr-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| <div class="skew skew-bottom ml-for-radius"> | ||
| <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewbox="0 0 10 10" preserveaspectratio="none"> | ||
| <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon> | ||
| </svg> | ||
| </div> | ||
| </section> |
Oops, something went wrong.