From dbb6c30cf248e1f6abb980a2086cb53720132b1b Mon Sep 17 00:00:00 2001 From: Deepika Sharma Date: Fri, 25 Oct 2024 15:42:25 +0530 Subject: [PATCH 1/2] Update blog.html Updated blog page with adding dark mode feature. --- blog.html | 942 ++++++++++++++++++++++++++---------------------------- 1 file changed, 449 insertions(+), 493 deletions(-) diff --git a/blog.html b/blog.html index f11b99b8..966bfe84 100644 --- a/blog.html +++ b/blog.html @@ -1,5 +1,6 @@ + @@ -7,7 +8,11 @@ - + + + +
@@ -632,12 +699,24 @@

Contact Us

Follow Us

- +
@@ -645,202 +724,116 @@

Follow Us

- - + + +
+ + + + + + + - \ No newline at end of file + + From f704722bcf47107b04d97c8d15438b8509472fcf Mon Sep 17 00:00:00 2001 From: Deepika Sharma Date: Fri, 25 Oct 2024 15:43:12 +0530 Subject: [PATCH 2/2] Create blog.css Added css for dark mode. --- blog.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 blog.css diff --git a/blog.css b/blog.css new file mode 100644 index 00000000..1fea89bd --- /dev/null +++ b/blog.css @@ -0,0 +1,41 @@ +body { + background-color: white; + color: black; + transition: background-color 0.3s, color 0.3s; +} + +body.dark-mode { + background-color: #121212; + color: #ffffff; +} + +header.dark-mode { + background-color: #1f1f1f; +} + +.mode-toggle { + cursor: pointer; + border: none; + background: transparent; + outline: none; + padding: 10px; +} + +.mode-toggle img { + width: 24px; + height: 24px; +} + +.navbar { + background-color: #f0f0f0; + transition: background-color 0.3s; +} + +body.dark-mode .navbar { + background-color: #333; +} + +body.dark-mode .navbar a:hover { + color: #4C51BF; + transform: translateY(-2px); +}