mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-18 01:47:00 +00:00
added some client component and blog page
This commit is contained in:
merajjahir
@@ -337,9 +337,38 @@
|
||||
<section class="section_divider">
|
||||
<div>Blog 8</div>
|
||||
</section>
|
||||
|
||||
<section class= " dark:bg-gradient-to-b dark:bg-gray-800 pb-5">
|
||||
<div class="bg-gray-300">
|
||||
<div class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32 dark:text-coolGray-900">
|
||||
<h1 class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl dark:text-coolGray-900">Provident blanditiis wlk exercitationem</h1>
|
||||
<p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl dark:text-gray-900">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img src="https://source.unsplash.com/random/480x320" alt="" class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 dark:bg-gray-800"> -->
|
||||
<div class="w-full md:w-3/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 ">
|
||||
<div class="overflow-hidden rounded-t">
|
||||
<img src="https://images.unsplash.com/photo-1645119675435-fc5b106eddeb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=320&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTMzODQyMQ&ixlib=rb-1.2.1&q=80&w=480" class=" dark:bg-gray-800 hover:scale-110 w-full transition-all duration-700 rounded-t-lg shadow-lg border-2" alt="">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class=" p-10 dark:bg-white w-full">
|
||||
<div class="post-header">
|
||||
<div class="">
|
||||
<a href="#" class="text-md text-blue-500 before:content-['-'] " rel="category">Teamwork</a>
|
||||
</div>
|
||||
<h2 class=" mt-2">
|
||||
<a class="text-2xl font-semibold text-gray-800 " href="./blog-post.html">Amet Dolor Bibendum Parturient Cursus</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-md text-gray-600 mt-2 text-justify">
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- blog 8 end -->
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
207
public/componets/clients/clients.html
Normal file
207
public/componets/clients/clients.html
Normal file
@@ -0,0 +1,207 @@
|
||||
|
||||
<!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://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
|
||||
<!-- swiper cdn -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
|
||||
|
||||
<title>Client </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<!-- client 1 start -->
|
||||
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Client 1</div>
|
||||
</section>
|
||||
<div class="container py-20 mx-auto ">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="mt-lg-2 my-auto">
|
||||
<h2 class="text-md font-bold uppercase text-gray-400 mb-3">Our Clients</h2>
|
||||
<h3 class="text-4xl mb-3 ">Trusted by over 300+ clients</h3>
|
||||
<p class=" text-md mb-0 ">We bring solutions to make life easier for our customers.</p>
|
||||
</div>
|
||||
|
||||
<div class=" items-end">
|
||||
<div class="grid grid-cols-4 ml-20">
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z1.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z2.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z3.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z4.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z5.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z6.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z7.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
<div class="">
|
||||
<figure class="w-1/2"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z8.png" alt=""></figure>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- client 1 start -->
|
||||
|
||||
|
||||
<!-- client 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Client 2</div>
|
||||
</section>
|
||||
<div class="container mx-auto py-20">
|
||||
<h2 class="text-md font-bold uppercase text-gray-400 mb-3">Our Clients</h2>
|
||||
<div class="flex mb-10 ">
|
||||
<div class=" mr-10">
|
||||
<h3 class="text-3xl mb-0">We are trusted by over 300+ clients. Join them by using our services and grow your business.</h3>
|
||||
</div>
|
||||
<div class="">
|
||||
<p class="lead mb-0">Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Maecenas faucibus mollis interdum. Cras justo odio mollis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class=" ">
|
||||
<div class=" ">
|
||||
<figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z1.png" alt=""></figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" ">
|
||||
<div class=" ">
|
||||
<figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z2.png" alt=""></figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" ">
|
||||
<div class="">
|
||||
<figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z3.png" alt=""></figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" ">
|
||||
<div class=" ">
|
||||
<figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z4.png" alt=""></figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="">
|
||||
<figure class="w-1/2 shadow-lg p-4"><img src="https://sandbox.elemisthemes.com/assets/img/brands/z5.png" alt=""></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- client 2 end -->
|
||||
|
||||
|
||||
<!-- client 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Client 3 </div>
|
||||
</section>
|
||||
|
||||
<div class="container py-20 mx-auto">
|
||||
<h2 class="text-xl uppercase text-gray-400 text-center mb-8">Trusted by Over 5000 Clients</h2>
|
||||
<div class="swiper ">
|
||||
<div class="swiper-wrapper cursor-pointer" >
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="1 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c1.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="2 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c2.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="3 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c3.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="4 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c4.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="5 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c5.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="6 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c6.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="7 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c7.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="8 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c8.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="9 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c9.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="10 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c10.png" alt=""></div>
|
||||
<div class="swiper-slide px-5 w-1/3 " role="group" aria-label="11 / 11"><img src="https://sandbox.elemisthemes.com/assets/img/brands/c11.png" alt=""></div>
|
||||
</div>
|
||||
<!--/.swiper-wrapper -->
|
||||
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const swiper = new Swiper('.swiper', {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
loop:true,
|
||||
|
||||
breakpoints: {
|
||||
320: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 40
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<!-- client 3 end -->
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
220
public/template/blog_page/1_blog_page.html
Normal file
220
public/template/blog_page/1_blog_page.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<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">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Blog page 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- header 24 start -->
|
||||
|
||||
<style>
|
||||
@media(max-width:1520px) {
|
||||
.left-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* small css for the mobile nav close */
|
||||
#nav-mobile-btn.close span:first-child {
|
||||
transform: rotate(45deg);
|
||||
top: 4px;
|
||||
position: relative;
|
||||
background: #a0aec0;
|
||||
}
|
||||
|
||||
#nav-mobile-btn.close span:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
margin-top: 0px;
|
||||
background: #a0aec0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
|
||||
<div
|
||||
class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
|
||||
|
||||
<a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
|
||||
<svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill-rule="evenodd">
|
||||
<path
|
||||
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
|
||||
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
|
||||
</a>
|
||||
|
||||
<nav id="nav"
|
||||
class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
|
||||
<a href="#"
|
||||
class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600 ">Home</a>
|
||||
<a href="#features"
|
||||
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Features</a>
|
||||
<a href="#pricing"
|
||||
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Pricing</a>
|
||||
<a href="#testimonials"
|
||||
class="font-bold duration-100 transition-color hover:text-indigo-600 dark:text-pink-500 dark:hover:text-indigo-600">Testimonials</a>
|
||||
<div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
|
||||
<a href="#_" class="w-full py-2 font-bold text-center text-pink-500 ">Login</a>
|
||||
<a href="#_"
|
||||
class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
|
||||
Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
|
||||
<a href="#_"
|
||||
class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
|
||||
<a href="#_"
|
||||
class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
|
||||
Started</a>
|
||||
<svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
|
||||
viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
|
||||
<stop stop-color="#E614F2" offset="0%" />
|
||||
<stop stop-color="#FC3832" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
|
||||
<stop stop-color="#657DE9" offset="0%" />
|
||||
<stop stop-color="#1C0FD7" offset="100%" />
|
||||
</linearGradient>
|
||||
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
|
||||
id="a">
|
||||
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
|
||||
</filter>
|
||||
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
|
||||
id="d">
|
||||
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
|
||||
</filter>
|
||||
<path
|
||||
d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
|
||||
id="b" />
|
||||
<path
|
||||
d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
|
||||
id="e" />
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" opacity=".9">
|
||||
<g transform="rotate(65 416.452 409.167)">
|
||||
<use fill="#000" filter="url(#a)" xlink:href="#b" />
|
||||
<use fill="url(#c)" xlink:href="#b" />
|
||||
</g>
|
||||
<g transform="rotate(29 421.929 414.496)">
|
||||
<use fill="#000" filter="url(#d)" xlink:href="#e" />
|
||||
<use fill="url(#f)" xlink:href="#e" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="nav-mobile-btn"
|
||||
class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
|
||||
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
|
||||
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
if (document.getElementById('nav-mobile-btn')) {
|
||||
document.getElementById('nav-mobile-btn').addEventListener('click', function () {
|
||||
if (this.classList.contains('close')) {
|
||||
document.getElementById('nav').classList.add('hidden');
|
||||
this.classList.remove('close');
|
||||
} else {
|
||||
document.getElementById('nav').classList.remove('hidden');
|
||||
this.classList.add('close');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- header 24 end -->
|
||||
|
||||
<!-- hero 16 start -->
|
||||
<section class= " dark:bg-gradient-to-b dark:bg-gray-800 pb-5">
|
||||
<div class="bg-gray-300">
|
||||
<div class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32 dark:text-coolGray-900">
|
||||
<h1 class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl dark:text-coolGray-900">Provident blanditiis wlk exercitationem</h1>
|
||||
<p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl dark:text-gray-900">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img src="https://source.unsplash.com/random/480x320" alt="" class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 dark:bg-gray-800"> -->
|
||||
<div class="w-full md:w-3/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 ">
|
||||
<div class="overflow-hidden rounded-t">
|
||||
<a href="" class="relative">
|
||||
<span class="bg-red-100 w-full"></span>
|
||||
<span class="absolute inset-2/4">Click Here</span>
|
||||
|
||||
<img src="https://images.unsplash.com/photo-1645119675435-fc5b106eddeb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=320&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTMzODQyMQ&ixlib=rb-1.2.1&q=80&w=480" class="relative dark:bg-gray-800 hover:scale-110 w-full transition-all duration-700 rounded-t-lg shadow-lg border-2" alt="">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class=" p-10 dark:bg-white w-full">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<a href="#" class="text-md text-blue-500 before:content-['-'] " rel="category">Teamwork</a>
|
||||
</div>
|
||||
<h2 class=" mt-2">
|
||||
<a class="text-2xl font-semibold text-gray-800 " href="./blog-post.html">Amet Dolor Bibendum Parturient Cursus</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-md text-gray-600 mt-2 text-justify">
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- hero 16 end -->
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
46
public/template/blog_page/2_blog_page.html
Normal file
46
public/template/blog_page/2_blog_page.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Blog page 2</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
46
public/template/blog_page/3_blog_page.html
Normal file
46
public/template/blog_page/3_blog_page.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Blog page 3</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
46
public/template/blog_page/4_blog_page.html
Normal file
46
public/template/blog_page/4_blog_page.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Blog page 4</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
@@ -13,6 +13,26 @@
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- cusotom hero section -->
|
||||
|
||||
<!-- <section class="flex flex-col items-center py-20 bg-gray-200">
|
||||
<div class="flex justify-center flex-col py-20 bg-gray-200 rounded">
|
||||
<div class="mb-3 text-3xl font-semibold text-gray-800 text-center">
|
||||
Bussiness News
|
||||
</div>
|
||||
<div class="text-lg text-gray-400 w-2/4 mx-auto text-center">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate doloremque recusandae similique impedit nobis, minima autem incidunt a at voluptatum explicabo ratione illum, eum quis!
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mt-10 overflow-hidden relative">
|
||||
<img class="rounded drop-shadow-lg hover:scale-110 transition-all duration-500" src="https://source.unsplash.com/random/?office?work/" height="500" alt="">
|
||||
<a href="f#" class="absolute text-green-800 z-[1000]"> blog lorem22</a>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- cusotom hero section -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@@ -23,7 +23,7 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* small css for the mobile nav close */
|
||||
#nav-mobile-btn.close span:first-child {
|
||||
transform: rotate(45deg);
|
||||
@@ -31,18 +31,18 @@
|
||||
position: relative;
|
||||
background: #a0aec0;
|
||||
}
|
||||
|
||||
|
||||
#nav-mobile-btn.close span:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
margin-top: 0px;
|
||||
background: #a0aec0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
|
||||
|
||||
<header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
|
||||
<div
|
||||
class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
|
||||
|
||||
|
||||
<a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
|
||||
<svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -54,7 +54,7 @@
|
||||
</svg>
|
||||
<span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
|
||||
</a>
|
||||
|
||||
|
||||
<nav id="nav"
|
||||
class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
|
||||
<a href="#"
|
||||
@@ -72,7 +72,7 @@
|
||||
Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div
|
||||
class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
|
||||
<a href="#_"
|
||||
@@ -122,17 +122,17 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="nav-mobile-btn"
|
||||
class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
|
||||
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
|
||||
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
if (document.getElementById('nav-mobile-btn')) {
|
||||
document.getElementById('nav-mobile-btn').addEventListener('click', function () {
|
||||
if (this.classList.contains('close')) {
|
||||
@@ -144,7 +144,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- header 24 end -->
|
||||
|
||||
@@ -176,117 +176,115 @@
|
||||
|
||||
|
||||
<!-- section 1 start -->
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.accordion-content {
|
||||
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800 ">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
|
||||
<div class=" grid place-items-center md:place-items-start ">
|
||||
<div class="w-12/12 md:w-6/12 rounded border">
|
||||
<div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
|
||||
<h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do? </h3>
|
||||
<p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam,
|
||||
</p>
|
||||
|
||||
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
||||
|
||||
<!-- What is term -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>What is term?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>How can it be defined?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>Chamber reached do he nothing be?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" grid place-items-center md:place-items-start drop-shadow-lg dark:drop-shadow-[0_10px_8px_rgba(209,213,219,0.1)] ">
|
||||
<div class="w-12/12 md:w-6/12 rounded-lg ">
|
||||
<div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
|
||||
<h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do? </h3>
|
||||
<p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam,
|
||||
</p>
|
||||
|
||||
|
||||
<div class="mt-8 lg:mt-0 ">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="">
|
||||
<!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
|
||||
<img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
|
||||
</div>
|
||||
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
||||
|
||||
<!-- What is term -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>What is term?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>How can it be defined?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>Chamber reached do he nothing be?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const accordionHeader = document.querySelectorAll(".accordion-header");
|
||||
accordionHeader.forEach((header) => {
|
||||
header.addEventListener("click", () => {
|
||||
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
||||
let accordionMaxHeight = accordionContent.style.maxHeight;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Condition handling
|
||||
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
||||
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
||||
header.querySelector(".fas").classList.remove("fa-plus");
|
||||
header.querySelector(".fas").classList.add("fa-minus");
|
||||
header.parentElement.classList.add("bg-indigo-50");
|
||||
} else {
|
||||
accordionContent.style.maxHeight = `0px`;
|
||||
header.querySelector(".fas").classList.add("fa-plus");
|
||||
header.querySelector(".fas").classList.remove("fa-minus");
|
||||
header.parentElement.classList.remove("bg-indigo-50");
|
||||
}
|
||||
});
|
||||
|
||||
<div class="mt-8 lg:mt-0 ">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="">
|
||||
<!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
|
||||
<img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const accordionHeader = document.querySelectorAll(".accordion-header");
|
||||
accordionHeader.forEach((header) => {
|
||||
header.addEventListener("click", () => {
|
||||
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
||||
let accordionMaxHeight = accordionContent.style.maxHeight;
|
||||
|
||||
// Condition handling
|
||||
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
||||
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
||||
header.querySelector(".fas").classList.remove("fa-plus");
|
||||
header.querySelector(".fas").classList.add("fa-minus");
|
||||
header.parentElement.classList.add("bg-indigo-50");
|
||||
} else {
|
||||
accordionContent.style.maxHeight = `0px`;
|
||||
header.querySelector(".fas").classList.add("fa-plus");
|
||||
header.querySelector(".fas").classList.remove("fa-minus");
|
||||
header.parentElement.classList.remove("bg-indigo-50");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
<!-- section 1 end -->
|
||||
|
||||
|
||||
@@ -356,157 +354,98 @@
|
||||
|
||||
|
||||
|
||||
<!-- pricing 18 start -->
|
||||
<!-- pricing 18 start -->
|
||||
|
||||
<div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||
<div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||
|
||||
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
|
||||
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
|
||||
<h3
|
||||
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
|
||||
Simple, Transparent Pricing for Everyone</h3>
|
||||
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
|
||||
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
|
||||
<h3
|
||||
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
|
||||
Simple, Transparent Pricing for Everyone</h3>
|
||||
|
||||
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
|
||||
<!-- Basic Pricing -->
|
||||
<div class="relative flex flex-col items-center block sm:flex-row">
|
||||
<div
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
|
||||
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
|
||||
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
|
||||
features below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap px-6 mt-8">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pro Pricing -->
|
||||
<div
|
||||
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
|
||||
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
|
||||
<!-- Basic Pricing -->
|
||||
<div class="relative flex flex-col items-center block sm:flex-row">
|
||||
<div
|
||||
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
|
||||
Most Popular</div>
|
||||
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
|
||||
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
|
||||
access to the
|
||||
following:</p>
|
||||
</div>
|
||||
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
|
||||
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
|
||||
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
|
||||
features below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
|
||||
This Plan</a>
|
||||
<div class="flex flex-wrap px-6 mt-8">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium Pricing -->
|
||||
<div
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
|
||||
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
|
||||
<!-- Pro Pricing -->
|
||||
<div
|
||||
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
|
||||
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
|
||||
Most Popular</div>
|
||||
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
|
||||
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
|
||||
all the following
|
||||
features:</p>
|
||||
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
|
||||
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
|
||||
access to the
|
||||
following:</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap px-8 mt-8">
|
||||
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@@ -514,7 +453,7 @@
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
|
||||
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
@@ -525,7 +464,7 @@
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
|
||||
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
@@ -543,20 +482,79 @@
|
||||
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium Pricing -->
|
||||
<div
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
|
||||
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
|
||||
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
|
||||
all the following
|
||||
features:</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap px-8 mt-8">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- pricing 18 end -->
|
||||
|
||||
<!-- pricing 18 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user