mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-18 09:57:00 +00:00
added some client component and blog page
This commit is contained in:
merajjahir
663
dist/tailshape.css
vendored
663
dist/tailshape.css
vendored
File diff suppressed because it is too large
Load Diff
@@ -338,7 +338,36 @@
|
||||
<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 -->
|
||||
|
||||
|
||||
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">
|
||||
@@ -177,7 +177,6 @@
|
||||
|
||||
<!-- section 1 start -->
|
||||
|
||||
|
||||
<style>
|
||||
.accordion-content {
|
||||
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
||||
@@ -185,13 +184,12 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<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=" 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">
|
||||
|
||||
Reference in New Issue
Block a user