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

401 lines
26 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>
<title>Blog </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- blog 1 start -->
<section class="section_divider">
<div>Blog 1</div>
</section>
<section class="py-6 sm:py-12 dark:bg-gray-800 dark:text-gray-100">
<div class="container p-6 mx-auto space-y-8">
<div class="space-y-2 text-center">
<h2 class="text-3xl font-bold">Partem reprimique an pro</h2>
<p class="font-serif text-sm dark:text-gray-400">Qualisque erroribus usu at, duo te agam soluta mucius.</p>
</div>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 lg:grid-cols-4">
<article class="flex flex-col dark:bg-gray-900">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?1">
</a>
<div class="flex flex-col flex-1 p-6">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
<span>June 1, 2020</span>
<span>2.1K views</span>
</div>
</div>
</article>
<article class="flex flex-col dark:bg-gray-900">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?2">
</a>
<div class="flex flex-col flex-1 p-6">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
<span>June 2, 2020</span>
<span>2.2K views</span>
</div>
</div>
</article>
<article class="flex flex-col dark:bg-gray-900">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?3">
</a>
<div class="flex flex-col flex-1 p-6">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
<span>June 3, 2020</span>
<span>2.3K views</span>
</div>
</div>
</article>
<article class="flex flex-col dark:bg-gray-900">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?4">
</a>
<div class="flex flex-col flex-1 p-6">
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
<span>June 4, 2020</span>
<span>2.4K views</span>
</div>
</div>
</article><!---->
</div>
</div>
</section>
<!-- blog 1 end -->
<!-- blog 2 start -->
<section class="section_divider">
<div>Blog 2</div>
</section>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
<a rel="noopener noreferrer" href="#" class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 dark:bg-gray-900">
<img src="https://source.unsplash.com/random/480x360" alt="" class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 dark:bg-gray-500">
<div class="p-6 space-y-2 lg:col-span-5">
<h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">Noster tincidunt reprimique ad pro</h3>
<span class="text-xs dark:text-gray-400">February 19, 2021</span>
<p>Ei delenit sensibus liberavisse pri. Quod suscipit no nam. Est in graece fuisset, eos affert putent doctus id.</p>
</div>
</a>
<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?1">
<div class="p-6 space-y-2">
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
<span class="text-xs dark:text-gray-400">January 21, 2021</span>
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
</div>
</a>
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?2">
<div class="p-6 space-y-2">
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
<span class="text-xs dark:text-gray-400">January 22, 2021</span>
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
</div>
</a>
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?3">
<div class="p-6 space-y-2">
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
<span class="text-xs dark:text-gray-400">January 23, 2021</span>
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
</div>
</a>
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?4">
<div class="p-6 space-y-2">
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
<span class="text-xs dark:text-gray-400">January 24, 2021</span>
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
</div>
</a>
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?5">
<div class="p-6 space-y-2">
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
<span class="text-xs dark:text-gray-400">January 25, 2021</span>
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
</div>
</a>
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?6">
<div class="p-6 space-y-2">
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
<span class="text-xs dark:text-gray-400">January 26, 2021</span>
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
</div>
</a><!---->
</div>
<div class="flex justify-center">
<button type="button" class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400">Load more posts...</button>
</div>
</div>
</section>
<!-- blog 2 end -->
<!-- blog 3 start -->
<section class="section_divider">
<div>Blog 3</div>
</section>
<section class="w-full mx-auto flex justify-center">
<div class="relative flex flex-col max-w-xl p-5 divide-y xl:flex-row xl:divide-y-0 xl:divide-x dark:bg-gray-900 dark:text-gray-100 divide-gray-700">
<div class="p-3 space-y-1 xl:ml-6">
<h3 class="text-3xl font-semibold">Lorem ipsum dolor sit amet</h3>
<p class="text-sm dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam possimus repellat incidunt odit eligendi mollitia quaerat autem nobis fugiat natus?</p>
</div>
<div class="flex items-center p-3 w-full space-x-3">
<img alt="" src="https://source.unsplash.com/100x100/?portrait" class="object-cover w-12 h-12 rounded-full shadow dark:bg-gray-500">
<div class="space-y-1">
<span class="text-sm">April 03, 2021</span>
<div class="flex flex-wrap space-y-2">
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">javascript</a>
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">serverless</a>
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">aws</a>
</div>
</div>
</div>
</div>
</section>
<!-- blog 3 end -->
<!-- blog 4 start -->
<section class="section_divider">
<div>Blog 4</div>
</section>
<div class="dark:bg-gray-800 dark:text-gray-100">
<div class="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm dark:bg-gray-900">
<div class="flex items-center justify-between">
<span class="text-sm dark:text-gray-400">Jun 1, 2020</span>
<a rel="noopener noreferrer" href="#" class="px-2 py-1 font-bold rounded dark:bg-green-400 dark:text-gray-900">Javascript</a>
</div>
<div class="mt-3">
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold hover:underline">Nos creasse pendere crescit angelos etc</a>
<p class="mt-2">Tamquam ita veritas res equidem. Ea in ad expertus paulatim poterunt. Imo volo aspi novi tur. Ferre hic neque vulgo hae athei spero. Tantumdem naturales excaecant notaverim etc cau perfacile occurrere. Loco visa to du huic at in dixi aër.</p>
</div>
<div class="flex items-center justify-between mt-4">
<a rel="noopener noreferrer" href="#" class="hover:underline dark:text-green-400">Read more</a>
<div>
<a rel="noopener noreferrer" href="#" class="flex items-center">
<img src="https://source.unsplash.com/50x50/?portrait" alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full dark:bg-gray-500">
<span class="hover:underline dark:text-gray-400">Leroy Jenkins</span>
</a>
</div>
</div>
</div>
</div>
<!-- blog 4 end -->
<!-- blog 5 start -->
<section class="section_divider">
<div>Blog 5</div>
</section>
<div class=" mx-auto max-w-md p-6 overflow-hidden rounded-lg shadow dark:bg-gray-900 dark:text-gray-100">
<article>
<h2 class="text-xl font-bold">Sed diam massa, semper a condimentum</h2>
<p class="mt-4 dark:text-gray-400">Morbi porttitor mi in diam scelerisque commodo. Proin sed laoreet libero. Fusce faucibus porttitor lacus, at blandit mauris blandit eget. Donec facilisis lorem et risus commodo, quis auctor nulla varius. Pellentesque facilisis feugiat turpis, id molestie augue semper quis. Nunc ornare eget est sit amet elementum.</p>
<div class="flex items-center mt-8 space-x-4">
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-10 h-10 rounded-full dark:bg-gray-500">
<div>
<h3 class="text-sm font-medium">Leroy Jenkins</h3>
<time datetime="2021-02-18" class="text-sm dark:text-gray-400">Feb 18th 2021</time>
</div>
</div>
</article>
</div>
<!-- blog 5 end -->
<!-- blog 6 start -->
<section class="section_divider">
<div>Blog 6</div>
</section>
<div class="dark:bg-gray-800 dark:text-gray-50">
<div class="container grid grid-cols-12 mx-auto dark:bg-gray-900">
<div class="bg-no-repeat bg-cover dark:bg-gray-700 col-span-full lg:col-span-4" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;"></div>
<div class="flex flex-col p-6 col-span-full row-span-full lg:col-span-8 lg:p-10">
<div class="flex justify-start">
<span class="px-2 py-1 text-xs rounded-full dark:bg-green-400 dark:text-gray-900">Label</span>
</div>
<h1 class="text-3xl font-semibold">Lorem ipsum dolor sit.</h1>
<p class="flex-1 pt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, reprehenderit adipisci tempore voluptas laborum quod.</p>
<a rel="noopener noreferrer" href="#" class="inline-flex items-center pt-2 pb-6 space-x-2 text-sm dark:text-green-400">
<span>Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
<div class="flex items-center justify-between pt-2">
<div class="flex space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 dark:text-gray-400">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
</svg>
<span class="self-center text-sm">by Leroy Jenkins</span>
</div>
<span class="text-xs">3 min read</span>
</div>
</div>
</div>
</div>
<!-- blog 6 end -->
<!-- blog 7 start -->
<section class="section_divider">
<div>Blog 7</div>
</section>
<div class="dark:bg-gray-800 dark:text-gray-50">
<div class="container grid grid-cols-12 mx-auto">
<div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
<div class="flex flex-col items-center p-8 py-12 text-center">
<span>12 June</span>
<h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
<div class="pt-6 pb-4 space-y-2">
<span>12 June</span>
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
<span>Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div class="pt-6 pb-4 space-y-2">
<span>12 June</span>
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
<span>Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div class="pt-6 pb-4 space-y-2">
<span>12 June</span>
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
<span>Read more</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- blog 7 end -->
<!-- blog 8 start -->
<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 -->
<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