-
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
Showing
5 changed files
with
455 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,118 @@ | ||
| <section class="py-20"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mx-auto mb-12 max-w-xl text-center lg:max-w-2xl"> | ||
| <span class="text-xs font-semibold uppercase text-indigo-500">Lorem ipsum</span> | ||
| <h2 class="font-heading mb-4 mt-2 text-3xl font-bold leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2> | ||
| <p class="mb-8 text-base leading-relaxed text-gray-500 lg:text-xl lg:leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p> | ||
| <a class="mr-6 border-b-4 border-indigo-500 pb-2 text-lg" href="#">Monthly</a><a class="border-b-4 border-transparent pb-2 text-lg hover:border-indigo-500" href="#">Yearly</a> | ||
| </div> | ||
| <div class="-mx-4 -mb-6 flex flex-wrap items-center lg:mb-0"> | ||
| <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3"> | ||
| <div class="rounded bg-gray-50 p-6 md:p-12 lg:text-center"> | ||
| <h3 class="text-2xl font-bold text-indigo-500">Starter</h3> | ||
| <span class="font-heading mb-6 inline-block text-4xl font-bold md:text-6xl">$34,99</span> | ||
| <ul class="mb-6 text-left text-lg"> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>Complete documentation</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>Working materials in Figma</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>100GB cloud storage</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>500 team members</p> | ||
| </li> | ||
| </ul> | ||
| <a class="block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">Action</a> | ||
| </div> | ||
| </div> | ||
| <div class="mb-6 w-full px-4 lg:mb-0 lg:w-1/3"> | ||
| <div class="rounded bg-indigo-500 p-6 md:p-12 lg:text-center"> | ||
| <h3 class="text-2xl font-bold text-gray-50">Pro</h3> | ||
| <span class="mb-6 inline-block text-4xl font-bold text-white md:text-6xl">$65,99</span> | ||
| <ul class="mb-6 text-left text-lg"> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p class="text-lg text-white">Complete documentation</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p class="text-lg text-white">Working materials in Figma</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p class="text-lg text-white">100GB cloud storage</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p class="text-lg text-white">500 team members</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p class="text-lg text-white">Premium support</p> | ||
| </li> | ||
| </ul> | ||
| <a class="block w-full rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">Action</a> | ||
| </div> | ||
| </div> | ||
| <div class="w-full px-4 lg:w-1/3"> | ||
| <div class="rounded bg-gray-50 p-6 md:p-12 lg:text-center"> | ||
| <h3 class="text-2xl font-bold text-indigo-500">Premium</h3> | ||
| <span class="font-heading mb-6 inline-block text-4xl font-bold md:text-6xl">$99,99</span> | ||
| <ul class="mb-6 text-left text-lg"> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>Complete documentation</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>Working materials in Figma</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>100GB cloud storage</p> | ||
| </li> | ||
| <li class="mb-2 flex items-center"> | ||
| <svg class="mr-2 h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| <p>500 team members</p> | ||
| </li> | ||
| </ul> | ||
| <a class="block w-full rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">Action</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </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,74 @@ | ||
| <section class="bg-indigo-500 pb-24"> | ||
| <div class="container mx-auto px-4"> | ||
| <nav class="relative flex items-center justify-between py-8"> | ||
| <a class="text-2xl leading-none text-gray-600" href="#"> | ||
| <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-light.svg" alt="" width="auto" /> | ||
| </a> | ||
| <div class="lg:hidden"> | ||
| <button class="navbar-burger block text-indigo-50 hover:text-indigo-200 focus:outline-none"> | ||
| <svg class="h-4 w-4" fill="currentColor " viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | ||
| <title>Mobile menu</title> | ||
| <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <ul class="absolute left-1/2 top-1/2 ml-auto mr-auto hidden w-auto -translate-x-1/2 -translate-y-1/2 transform items-center space-x-12 lg:flex"> | ||
| <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">About</a></li> | ||
| <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Company</a></li> | ||
| <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Services</a></li> | ||
| <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Testimonials</a></li> | ||
| </ul> | ||
| <ul class="hidden w-auto items-center space-x-8 lg:flex"> | ||
| <li><a class="text-sm font-medium text-indigo-50 hover:text-indigo-200" href="#">Sign in</a></li> | ||
| <li><a class="inline-block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50" href="#">Sign up</a></li> | ||
| </ul> | ||
| </nav> | ||
| <div class="mt-16"> | ||
| <div class="container mx-auto px-4"> | ||
| <div class="mx-auto mb-16 max-w-xl text-center lg:max-w-4xl"> | ||
| <span class="text-xs font-semibold uppercase text-indigo-50">Develop your skill</span> | ||
| <h2 class="font-heading mb-8 mt-2 text-3xl font-bold leading-tight text-white md:text-4xl md:leading-tight lg:text-7xl lg:leading-tight">Take care of your performance every day.</h2> | ||
| <div><a class="mb-3 block rounded border border-white bg-white px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-50 hover:bg-indigo-50 md:mb-0 md:mr-3 md:inline-block" href="#">Try for Free</a><a class="block rounded border border-white px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:bg-white hover:text-indigo-500 md:inline-block" href="#">Learn More</a></div> | ||
| </div> | ||
| <div> | ||
| <button class="mx-auto block text-indigo-50 hover:text-indigo-100"> | ||
| <svg class="md:w-18 md:h-18 mx-auto mb-2 h-16 w-16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor"> | ||
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path> | ||
| </svg> | ||
| <span class="font-semibold">Watch Demo</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="navbar-menu fixed bottom-0 left-0 top-0 z-50 hidden w-5/6 max-w-sm"> | ||
| <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div> | ||
| <nav class="relative flex h-full w-full flex-col overflow-y-auto border-r bg-white px-6 py-6"> | ||
| <div class="mb-12 flex items-center"> | ||
| <a class="mr-auto text-2xl font-semibold leading-none" href="#"> | ||
| <img class="h-8" src="https://shuffle.dev/plain-assets/logos/plain-indigo.svg" alt="" width="auto" /> | ||
| </a> | ||
| <button class="navbar-close"> | ||
| <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <div> | ||
| <ul> | ||
| <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">About</a></li> | ||
| <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Company</a></li> | ||
| <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Services</a></li> | ||
| <li class="mb-1"><a class="block rounded p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500" href="#">Testimonials</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="mt-auto"> | ||
| <div class="pt-6"><a class="mb-3 block rounded border border-indigo-500 bg-indigo-500 px-5 py-3 text-center text-sm font-semibold text-white transition duration-200 hover:border-indigo-600 hover:bg-indigo-600" href="#">Sign in</a><a class="block rounded border border-indigo-500 px-5 py-3 text-center text-sm font-semibold text-indigo-500 transition duration-200 hover:border-indigo-600 hover:bg-indigo-500 hover:text-white" href="#">Sign up</a></div> | ||
| <p class="mb-4 mt-6 text-center text-sm text-gray-500"> | ||
| <span>© 2022 All rights reserved.</span> | ||
| </p> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| </section> | ||
|
|
Oops, something went wrong.