Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-23 08:37:02 +00:00
Code Issues Projects Releases Wiki Activity
Files
de7dada84f07fcccb4c0cd7b9ee6513850d1caf6
tailShape/public/componets/clients/clients.html
merajjahir de7dada84f added some client component and blog page
2022-03-12 19:19:24 +06:00

207 lines
9.3 KiB
HTML
Raw Blame History

<!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 View Git Blame Copy Permalink