mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-22 11:37:02 +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>
|
||||
Reference in New Issue
Block a user