From 402c59eb92167f662316c808a2e059c0338e6ac2 Mon Sep 17 00:00:00 2001 From: AftabMankapure Date: Fri, 16 Feb 2024 12:43:47 +0530 Subject: [PATCH 1/2] added dark mode --- css_files/mode.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 26 +++++++++++++++++++++++- 2 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 css_files/mode.css diff --git a/css_files/mode.css b/css_files/mode.css new file mode 100644 index 0000000..0c92034 --- /dev/null +++ b/css_files/mode.css @@ -0,0 +1,50 @@ +body { + color: black; + background-color: white; + + } + .dark-class { + color: white; + background-color: rgb(12, 10, 10); + } + + .toggleButton { + width: 5rem; + height: 2rem; + position: relative; + display: inline-block; + } + .toggleButton input { + opacity: 0; + } + .roundButton { + background-color: black; + top: 0; + left: 0; + position: absolute; + right: 0; + bottom: 0; + cursor: pointer; + } + .roundButton:before { + left: 0; + bottom: 0; + position: absolute; + content: ""; + background-color: grey; + transition: 1s; + height: 2rem; + width: 2rem; + } + input:checked+.roundButton { + background-color: white; + } + input:checked+.roundButton:before { + transform: translateX(3rem); + } + .roundButton.circle { + border-radius: 2rem; + } + .roundButton.circle:before { + border-radius: 50%; + } \ No newline at end of file diff --git a/index.html b/index.html index 47ce212..5081216 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,16 @@ + + + + + - +
@@ -52,6 +59,12 @@
  • FAQ
  • Blog
  • Contact
    • +
  • + +
    • + +