mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-21 15:07:02 +00:00
443 lines
28 KiB
HTML
443 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||
|
||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||
|
||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer>
|
||
</script><script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
|
||
<title> CTA </title>
|
||
|
||
</head>
|
||
<body class="bg-gray-300">
|
||
|
||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||
d
|
||
</button>
|
||
|
||
<!-- start cta 1 -->
|
||
|
||
<section class="section_divider">
|
||
CTA 1
|
||
</section>
|
||
<section class="flex justify-center p-2 ">
|
||
<a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||
<p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||
</a>
|
||
</section>
|
||
|
||
<!-- end cta 1 -->
|
||
|
||
|
||
<!-- start cta 2 -->
|
||
<section class="section_divider">
|
||
CTA 2
|
||
</section>
|
||
|
||
|
||
<section class="flex justify-center p-2 ">
|
||
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||
<a href="#">
|
||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||
</a>
|
||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||
Read more
|
||
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||
</a>
|
||
</div>
|
||
|
||
</section>
|
||
<!-- end cta 2 -->
|
||
|
||
<!-- start cta 3 -->
|
||
<section class="section_divider">
|
||
CTA 3
|
||
</section>
|
||
<section class="flex justify-center p-2">
|
||
|
||
|
||
<div class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||
<a href="#">
|
||
<img class="rounded-t-lg" src="https://source.unsplash.com/random/?productivity,work" alt="">
|
||
</a>
|
||
<div class="p-5">
|
||
<a href="#">
|
||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||
</a>
|
||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||
Read more
|
||
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
<!-- end cta 3 -->
|
||
|
||
|
||
<!-- start cta 4 -->
|
||
<section class="section_divider">
|
||
CTA 4
|
||
</section>
|
||
|
||
<section class="flex justify-center p-2">
|
||
|
||
<a href="#" class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
|
||
<img class="object-cover h-full w-auto rounded-t-lg md:h-full md:w-48 md:rounded-none md:rounded-l-lg border-l-2 border-black" src="https://source.unsplash.com/random/?productivity,work,tree,fun" alt="">
|
||
<div class="flex flex-col justify-between p-4 leading-normal">
|
||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||
</div>
|
||
</a>
|
||
|
||
</section>
|
||
|
||
|
||
<!-- end cta 4 -->
|
||
|
||
<!-- start cta 5 -->
|
||
<section class="section_divider">
|
||
CTA 5
|
||
</section>
|
||
|
||
<section class="flex justify-center p-2">
|
||
|
||
<div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||
<a href="#">
|
||
<img class="p-8 rounded-t-lg" src="https://source.unsplash.com/random/?product" alt="product image">
|
||
</a>
|
||
<div class="px-5 pb-5">
|
||
<a href="#">
|
||
<h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h3>
|
||
</a>
|
||
<div class="flex items-center mt-2.5 mb-5">
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">5.0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
|
||
<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end cta 5 -->
|
||
|
||
<!-- start cta 6 -->
|
||
<section class="section_divider">
|
||
CTA 6
|
||
</section>
|
||
<section class="w-full bg-gradient-to-b from-gray-100 to-white dark:bg-gradient-to-b dark:from-cyan-600 dark:to-gray-300">
|
||
<div class="w-full px-4 py-20 mx-auto text-left md:text-center md:w-3/4 lg:w-2/4">
|
||
<p class="mb-2 text-base font-semibold text-purple-700">Start your free trial now</p>
|
||
<h2 class="mb-6 text-3xl font-extrabold tracking-tight md:text-4xl md:mb-6 md:leading-tight">Sign up for a free account to organize your customer feedback.</h2>
|
||
<div class="mb-0 space-x-0 md:space-x-2">
|
||
<a class="inline-flex items-center justify-center w-full mb-2 bg-purple-800 p-2 rounded font-bold text-white hover:bg-purple-900 sm:w-auto sm:mb-0" href="#">
|
||
Get Started
|
||
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||
</svg>
|
||
</a>
|
||
<a class="inline-flex items-center justify-center w-full mb-2 bg-gray-100 hover:bg-gray-300 p-2 rounded font-bold sm:w-auto sm:mb-0" href="#">
|
||
Book a Demo
|
||
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
<path
|
||
fill-rule="evenodd"
|
||
d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
|
||
clip-rule="evenodd"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
<!-- end cta 6 -->
|
||
|
||
<!-- start cta 7 -->
|
||
<section class="section_divider">
|
||
CTA 7
|
||
</section>
|
||
<section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
|
||
<div class="text-white bg-green-800 border-green-800 rounded-none card card-body sm:rounded-lg">
|
||
<div class="flex flex-col items-center justify-between px-1 py-4 lg:flex-row sm:py-3 sm:px-3">
|
||
<p class="mb-6 text-base font-semibold lg:mb-0">Sleep peacefully knowing that your website is performing at it’s best.</p>
|
||
<a href="#" class="w-full text-green-800 shadow bg-gray-300 p-2 rounded text-lg sm:w-auto ">Start for free</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- end cta 7 -->
|
||
|
||
|
||
<!-- start cta 8 -->
|
||
<section class="section_divider">
|
||
CTA 8
|
||
</section>
|
||
<section class="px-0 py-12 mx-auto max-w-7xl sm:px-4">
|
||
<div class="grid items-center grid-cols-1 gap-10 px-4 overflow-hidden text-pink-900 bg-pink-100 border-pink-100 rounded-none card card-body sm:rounded-lg md:px-10 md:grid-cols-5 lg:gap-0">
|
||
<div class="col-span-1 md:col-span-3">
|
||
<h2 class="mb-3 font-serif text-2xl font-normal leading-tight lg:text-3xl">Sleep peacefully knowing that your website is performing at it’s best.</h2>
|
||
<p class="mb-6 text-sm font-semibold lg:text-base">We deliver a guaranteed number of high-quality new leads every month. Combined with the sales tools to convert them into paying clients.</p>
|
||
<a href="#" class="w-full text-pink-900 shadow bg-gray-100 p-2 rounded sm:w-auto">Start for free</a>
|
||
</div>
|
||
<div class="col-span-1 md:col-span-2">
|
||
<img src="https://source.unsplash.com/random/640x480/?grayscale,electronics" class="h-full select-none lg:ml-48" alt="Mac App" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- end cta 8 -->
|
||
|
||
<!-- start cta 9 -->
|
||
<section class="section_divider">
|
||
CTA 9
|
||
</section>
|
||
<section class="text-white bg-gray-900">
|
||
<div class="flex flex-col items-stretch justify-between px-4 py-20 mx-auto max-w-7xl lg:flex-row sm:items-center">
|
||
<div>
|
||
<h2 class="mb-1 text-xl font-semibold text-left sm:text-2xl sm:text-center lg:text-left">Built for companies of all sizes</h2>
|
||
<p class="mb-6 text-lg font-normal text-left text-gray-200 sm:text-xl lg:mb-0 sm:text-center lg:text-left">Start your 14-day free trial or book a personal demo.</p>
|
||
</div>
|
||
<div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
|
||
<a href="#" class="w-full py-2 px-4 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded text-lg sm:w-auto">Start free trial</a>
|
||
<a href="#" class="w-full py-2 px-4 bg-gray-800 border-2 border-gray-300 text-gray-300 hover:border-gray-400 hover:bg-gray-400 hover:text-gray-800 rounded text-lg sm:w-auto">Book a demo</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- end cta 9 -->
|
||
|
||
<!-- start cta 10 -->
|
||
<section class="section_divider">
|
||
CTA 10
|
||
</section>
|
||
<section class="py-6 dark:bg-gray-800 dark:text-gray-50">
|
||
<div class="container mx-auto flex flex-col items-center justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:flex-row lg:justify-between">
|
||
<h1 class="text-3xl font-semibold leading-tight text-center lg:text-left">Nobis a dolores, quia sit ad quasi dolorem in?</h1>
|
||
<button class="px-8 py-3 text-lg font-semibold rounded dark:bg-violet-400 dark:text-gray-900">Contact</button>
|
||
</div>
|
||
</section>
|
||
<!-- end cta 10 -->
|
||
|
||
<!-- start cta 11 -->
|
||
<section class="section_divider">
|
||
CTA 11
|
||
</section>
|
||
<section class="py-6 dark:bg-gray-800 dark:text-gray-50">
|
||
<div class="container mx-auto flex flex-col justify-around p-4 text-center md:p-10 lg:flex-row">
|
||
<div class="flex flex-col justify-center lg:text-left">
|
||
<p class="mb-1 text-sm font-medium tracking-widest uppercase dark:text-violet-400">Hic eligendi necessitatibus quod quia</p>
|
||
<h1 class="py-2 text-3xl font-medium leading-tight title-font">Master Cleanse Reliac Heirloom</h1>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end">
|
||
<button class="inline-flex items-center px-6 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 dark:text-coolGray-900">
|
||
<path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
|
||
</svg>
|
||
<span class="flex flex-col items-start ml-4 leading-none">
|
||
<span class="mb-1 text-xs">GET IT ON</span>
|
||
<span class="font-semibold title-font">Google Play</span>
|
||
</span>
|
||
</button>
|
||
<button class="inline-flex items-center px-5 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 dark:text-coolGray-900">
|
||
<path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
|
||
</svg>
|
||
<span class="flex flex-col items-start ml-4 leading-none">
|
||
<span class="mb-1 text-xs">Download on the</span>
|
||
<span class="font-semibold title-font">App Store</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- end cta 11 -->
|
||
|
||
|
||
<!-- start cta 12 -->
|
||
<section class="section_divider">
|
||
CTA 12
|
||
</section>
|
||
<div class="w-full dark:bg-gray-500 bg-[url('https://source.unsplash.com/random/640x480/?grayscale')] bg-center bg-blend-multiply bg-cover">
|
||
<div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10">
|
||
<h1 class="text-5xl antialiased font-semibold leading-none text-center dark:text-gray-100">Get Our Updates</h1>
|
||
<p class="pt-2 pb-8 text-xl antialiased text-center dark:text-gray-100">Find out about events and other news</p>
|
||
<div class="flex flex-row">
|
||
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
||
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-gray-900">Subscribe</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- end cta 12 -->
|
||
|
||
<!-- start cat 13 -->
|
||
<section class="section_divider">
|
||
CTA 13
|
||
</section>
|
||
<section class="py-6 dark:bg-coolGray-800 dark:text-coolGray-50">
|
||
<div class="container mx-auto flex flex-col justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:space-x-12 lg:justify-between lg:flex-row">
|
||
<div class="flex flex-col space-y-4 text-center lg:text-left">
|
||
<h1 class="text-5xl font-bold leading-none">Stay in the loop</h1>
|
||
<p class="text-lg">Doloribus consectetur quasi ipsa quo neque culpa blanditiis ducimus recusandae a veritatis optio cumque, in harum ad nam!</p>
|
||
</div>
|
||
<div class="flex flex-row items-center self-center justify-center flex-shrink-0 shadow-md lg:justify-end">
|
||
<div class="flex flex-row">
|
||
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
||
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-coolGray-900">Subscribe</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- end cat 13 -->
|
||
|
||
<!-- start cta 14 -->
|
||
<section class="section_divider">
|
||
CTA 14
|
||
</section>
|
||
|
||
<div class="container m-auto px-6 py-40 ">
|
||
<div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto md:h-64 bg-100 shadow-2xl rounded-lg p-8 dark:bg-gray-800">
|
||
<div class="w-8/12 text-2xl">
|
||
<img alt="quote" class="float-left mr-1" src="https://assets-global.website-files.com/5b5a66e9f3166b36708705fa/5cf8fb1f994fb7168d0d66fb_quote-intro.svg">
|
||
<span class="flex dark:text-yellow-100">We are team of developers with houndreds hours spend on coding, we create professional apps, webs.</span>
|
||
</div>
|
||
<div class="relative shadow-md font-medium my-5 py-2 px-4 text-white dark:text-gray-800 cursor-pointer bg-yellow-600 hover:bg-yellow-500 rounded text-lg text-center w-48">
|
||
<span class="absolute h-3 right-0 top-0 animate-ping inline-flex rounded-full bg-yellow-600">
|
||
</span>
|
||
Call now
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- end cta 14 -->
|
||
|
||
<!-- start cta 15 -->
|
||
<section class="section_divider">
|
||
CTA 15
|
||
</section>
|
||
<div class="w-full bg-indigo-700">
|
||
<div class="mx-auto py-16 sm:py-20 px-4 sm:px-6 lg:px-8 max-w-2xl text-center">
|
||
<h2 class="space-y-2 text-3xl sm:text-4xl text-white font-extrabold uppercase">Sign up now to get 10% off</h2>
|
||
<p class="mt-4 text-lg text-indigo-200 leading-6">
|
||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit culpa architecto quam molestiae labore, fugit, ratione dolor neque sunt iste voluptas!
|
||
</p>
|
||
<div class="mt-10 flex flex-col sm:flex-row justify-around items-center uppercase font-medium tracking-widest">
|
||
<a href="#link" class="relative mb-5 sm:mb-0 px-5 py-3 w-48 rounded-md shadow bg-indigo-100 text-indigo-700 transform hover:bg-white active:top-0.5">Signup</a>
|
||
<a href="#link" class="relative px-5 py-3 w-48 rounded-md shadow bg-indigo-500 text-indigo-100 hover:bg-indigo-600 active:top-0.5">Maybe later</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- end cta 15 -->
|
||
|
||
<!-- start cta 16 -->
|
||
<section class="section_divider">
|
||
CTA 16
|
||
</section>
|
||
<div class="mx-auto w-full max-w-6xl flex flex-col sm:flex-row bg-gray-50">
|
||
|
||
<div class="relative py-4 sm:py-10 w-full sm:w-1/2 flex justify-center items-center">
|
||
<!-- https://fancytailwind.com/static/sport3-ffc61a71c74b9ea62a73e6c6822e290f.jpg -->
|
||
<img src="https:/source.unsplash.com/random/?grayscale" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-top" />
|
||
<h2 class="relative text-3xl sm:text-4xl md:text-5xl lg:text-7xl text-white font-bold font-oswald uppercase tracking-tighter sm:space-y-4" >
|
||
<span class="block">We don't take</span>
|
||
<span class="block"> The summer off.</span>
|
||
<span class="block"> We take it on.</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="relative py-4 px-5 w-full sm:w-1/2 flex justify-center items-center">
|
||
<img src="https://fancytailwind.com/static/sky1-2d513e4b36c6d0802a7cb3392a12eead.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover" />
|
||
<div class="relative my-auto w-full max-w-sm text-center">
|
||
<h2 class="mb-5 md:mb-10 sm:text-lg lg:text-xl text-white font-semibold uppercase tracking-wider">Exclusive summer offer</h2>
|
||
<div class="w-full flex flex-col lg:flex-row justify-center items-center text-xs sm:text-sm font-semibold uppercase space-y-3 lg:space-y-0">
|
||
<a href="#link" class="py-3 px-6 w-full lg:w-1/2 inline-block bg-black text-white transition-all duration-150 transform hover:scale-105 hover:z-10">Visit a club</a>
|
||
<a href="#link" class="py-3 px-6 w-full lg:w-1/2 inline-block bg-white text-black transition-all duration-150 transform hover:scale-105 hover:z-10">Member benefits</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- end cta 16 -->
|
||
|
||
|
||
<!-- start cta 17 -->
|
||
<section class="section_divider">
|
||
CTA 17
|
||
</section>
|
||
<section class="flex justify-center">
|
||
|
||
<div class="w-full max-w-3xl grid grid-cols-7 rounded-lg shadow-lg bg-white font-oswald overflow-hidden">
|
||
|
||
<div class="col-span-7 md:col-span-3 relative w-full h-44 md:h-full bg-red-500">
|
||
<img src="https://fancytailwind.com/static/music1-59ae9969ef29408305c6bfca033d6724.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover object-center filter sepia mix-blend-hard-light" />
|
||
</div>
|
||
|
||
<div class="col-span-7 md:col-span-4 relative py-5 px-8 w-full h-full flex flex-col items-center justify-center">
|
||
<span class="text-sm text-gray-300 font-semibold uppercase tracking-wider">Join the squad</span>
|
||
<h2 class="py-5 uppercase text-center space-y-2">
|
||
<span class="block text-4xl sm:text-5xl text-gray-900 font-semibold tracking-wide">Get 20% OFF</span>
|
||
<span class="block text-base sm:text-lg text-gray-700 tracking-wide">Your next order</span>
|
||
</h2>
|
||
<div class="py-5 w-full max-w-xs inline-flex flex-col space-y-4 uppercase">
|
||
<a href="#link" class="py-2 rounded-sm bg-red-500 text-center text-white tracking-wide hover:bg-red-600">Yes, please</a>
|
||
<a href="#link" class="py-2 rounded-sm bg-gray-200 text-center text-gray-700 tracking-wide hover:bg-gray-300">No, thanks</a>
|
||
</div>
|
||
<span class="mt-5 text-xs text-gray-300 font-semibold uppercase tracking-wider">Limited offer, don't miss out!</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- end cta 17 -->
|
||
|
||
|
||
<!-- start of script section -->
|
||
<script type="text/javascript">
|
||
let toogler = document.getElementById("dark_mood_toogler");
|
||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||
|
||
doc_html_el.addEventListener('keyup',(e)=>{
|
||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||
if(e.ctrlKey && e.keyCode =='220'){
|
||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||
|
||
}
|
||
})
|
||
doc_html_el.addEventListener('keyup',(e)=>{
|
||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||
if(e.ctrlKey && e.keyCode =='191'){
|
||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||
|
||
}
|
||
})
|
||
toogler.addEventListener('click',()=>{
|
||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||
console.log(doc_html_el.className);
|
||
})
|
||
</script>
|
||
<!-- end of script section -->
|
||
|
||
</body>
|
||
</html> |