Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add style enhancement in blog pages and light/dark mode #1984

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add style enhancement in blog pages and light/dark mode #1984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 71 additions & 5 deletions blogs/Phoenix.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
<link rel="stylesheet" href="./blog.css">
<link rel="icon" type="image/x-icon" href="logo.png" />
<title>Blog: The Miraculous Tale of Bless</title>
</head>

<body>

<header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
<!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
<div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
<a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
<div class="logo"><a class="logo-border" href="#">
Expand All @@ -23,10 +24,49 @@
<a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
</ul>
</div>
</header> -->

<header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
<div class="header-container">
<a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
<div class="logo-container">
<a class="logo-border" href="#">
<img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
</a>
</div>
<div class="logo-container">
<!-- <i class="ri-moon-line " id="switch"></i> -->
<i class="ri-moon-line " id="switch"></i>
<a href="../index.html" class="logo-home">
<img src="./img/home.png" class="home" alt="">
</a>
</div>
<!-- </ul> -->
</div>
</header>

<script>
document.addEventListener('DOMContentLoaded', function () {
const switchIcon = document.getElementById('switch');

switchIcon.addEventListener('click', function () {
// Toggle the dark-mode class on the body
document.body.classList.toggle('dark-mode');

// Toggle icon classes between ri-moon-line and ri-sun-line
if (switchIcon.classList.contains('ri-moon-line')) {
switchIcon.classList.remove('ri-moon-line');
switchIcon.classList.add('ri-sun-line');
} else {
switchIcon.classList.remove('ri-sun-line');
switchIcon.classList.add('ri-moon-line');
}
});
});
</script>

<div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
<div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b22-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">
<div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b22-poster.jpg')] bg-no-repeat bg-cover snap-center rounded-xl">

</div>

Expand Down Expand Up @@ -110,7 +150,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
<div class=" flex-1 flex flex-col items-center justify-center ">
<div class="text-2xl">Follow us on</div>
<div class="flex mt-2 flex-row space-x-3 my-0">
<div>
<div class="hover:scale-110 transition-all">
<a href="#" class=" w-5 ml-3">
<!-- Facebook icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
Expand All @@ -119,7 +159,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
</svg>
</a>
</div>
<div>
<div class="hover:scale-110 transition-all">
<a href="#" class=" w-10 ml-3 mr-3">
<!-- Instagram icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
Expand All @@ -128,7 +168,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
</svg>
</a>
</div>
<div>
<div class="hover:scale-110 transition-all">
<a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
<!-- Github icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
Expand All @@ -140,6 +180,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
</div>
</div>
<!-- Social icons end -->

<!-- Scroll to top -->
<div class="md:pr-8 hover-effect">
<a href="#top">
<button id="bttbutton" title="backtotop">
<img src="../image.svg" class="top-arrow" />
</button>
</a>
</div>
<!-- Scroll to top -->

<script>
const bttButton = document.getElementById('bttbutton');

window.addEventListener('scroll', function() {
// Calculer la hauteur de la fenêtre + position de défilement
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;
// Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
if (scrollPosition <= 0) {
bttButton.style.display = "none";
} else {
bttButton.style.display = "block";
}
});
</script>
</div>

<div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
Expand Down
90 changes: 84 additions & 6 deletions blogs/abhinav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" referrerpolicy="no-referrer" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="">
<link rel="stylesheet" href="./blog.css">
<link rel="icon" type="image/x-icon" href="logo.png" />

.
<!-- <link rel="stylesheet" href="../output.css" /> -->
<title>Blog: Abhinav</title>

</head>
<body>
<header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
<!-- <header class="w-full h-20 top-0 z-20 bg-slate-300 fixed">
<div class="w-full h-full justify-between flex flex-cols items-center py-0 px-0 xl:px-[1.5rem] ">
<a href="../blog.html" class="mx-4 w-12 h-12"><img src="./img/back.png" alt=""></a>
<div class="logo"><a class="logo-border" href="#">
Expand All @@ -21,8 +25,57 @@
<a href="../index.html" class="mr-10 ml-4 w-12 h-12"><img src="./img/home.png" alt=""></a>
</ul>
</div>
</header> -->

<header class="header bg-header-offwhite body-font items-center bg-slate-100 nav-hidden add_border" id="header">
<div class="header-container">
<a href="../blog.html" class="logo back-arrow"><img src="./img/back.png" alt=""></a>
<div class="logo-container">
<a class="logo-border" href="#">
<img class="rounded-full logo-size w-20 h-20" src="../Assets/Images/logo.jpg" alt="logo" />
</a>
</div>
<div class="logo-container">
<!-- <i class="ri-moon-line " id="switch"></i> -->
<i class="ri-moon-line " id="switch"></i>
<a href="../index.html" class="logo-home">
<img src="./img/home.png" class="home" alt="">
</a>
</div>
<!-- </ul> -->
</div>
<!-- google translate -->
<div id="google_translate_element">
<script
type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script>
</div>


<!-- google translate -->
</header>

<script>
document.addEventListener('DOMContentLoaded', function () {
const switchIcon = document.getElementById('switch');

switchIcon.addEventListener('click', function () {
// Toggle the dark-mode class on the body
document.body.classList.toggle('dark-mode');

// Toggle icon classes between ri-moon-line and ri-sun-line
if (switchIcon.classList.contains('ri-moon-line')) {
switchIcon.classList.remove('ri-moon-line');
switchIcon.classList.add('ri-sun-line');
} else {
switchIcon.classList.remove('ri-sun-line');
switchIcon.classList.add('ri-moon-line');
}
});
});
</script>

<div class="xl:w-[117rem] my-0 mx-0 xl:mx-auto">
<div class="mx-auto my-auto w-[80vw] xl:w-[114rem] md:h-[30rem] h-[25rem] xl:h-[40rem] my-[5rem] xl:mx-auto bg-[url('./img/b9-poster.png')] bg-no-repeat bg-cover snap-center rounded-xl">

Expand Down Expand Up @@ -111,7 +164,7 @@ <h3 class="text-xl xl:text-2xl font-semibold tracking-wide">Fortunately, the fol
<!-- Footer section -->


<footer class="bg-black z-50 text-white ">
<footer class="bg-black text-white shadow-inner pt-4 pb-8">

<div class=" flex p-5 justify-between ">

Expand Down Expand Up @@ -148,7 +201,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
<div class=" flex-1 flex flex-col items-center justify-center ">
<div class="text-2xl">Follow us on</div>
<div class="flex mt-2 flex-row space-x-3 my-0">
<div>
<div class="hover:scale-110 transition-all">
<a href="#" class=" w-5 ml-3">
<!-- Facebook icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
Expand All @@ -157,7 +210,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
</svg>
</a>
</div>
<div>
<div class="hover:scale-110 transition-all">
<a href="#" class=" w-10 ml-3 mr-3">
<!-- Instagram icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
Expand All @@ -166,7 +219,7 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
</svg>
</a>
</div>
<div>
<div class="hover:scale-110 transition-all">
<a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
<!-- Github icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
Expand All @@ -179,6 +232,32 @@ <h3 class="text-2xl ">Subscribe to our newsletter</h3>
</div>
<!-- Social icons end -->

<!-- Scroll to top -->
<div class="md:pr-8 hover-effect">
<a href="#top">
<button id="bttbutton" title="backtotop">
<img src="../image.svg" class="top-arrow" />
</button>
</a>
</div>
<!-- Scroll to top -->

<script>
const bttButton = document.getElementById('bttbutton');

window.addEventListener('scroll', function() {
// Calculer la hauteur de la fenêtre + position de défilement
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;
// Afficher le bouton si le scroll est supérieur à la hauteur de l'écran
if (scrollPosition <= 0) {
bttButton.style.display = "none";
} else {
bttButton.style.display = "block";
}
});
</script>

</div>

<div class=" bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1 ">
Expand All @@ -194,6 +273,5 @@ <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
</div>

</footer>

</body>
</html>
Loading