From 8f67376d852a5defe8ccea0aace311c87af20b63 Mon Sep 17 00:00:00 2001 From: Mansa Dixit <96430645+mansadixit@users.noreply.github.com> Date: Sat, 8 Oct 2022 15:28:32 +0530 Subject: [PATCH 1/4] Create Dark Light Mode Switching Website --- Dark Light Mode Switching Website | 1 + 1 file changed, 1 insertion(+) create mode 100644 Dark Light Mode Switching Website diff --git a/Dark Light Mode Switching Website b/Dark Light Mode Switching Website new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Dark Light Mode Switching Website @@ -0,0 +1 @@ + From 35acdadec02f24de1ca86e2a96ee9531b90f1e09 Mon Sep 17 00:00:00 2001 From: Mansa Dixit <96430645+mansadixit@users.noreply.github.com> Date: Sat, 8 Oct 2022 15:34:43 +0530 Subject: [PATCH 2/4] Delete Dark Light Mode Switching Website --- Dark Light Mode Switching Website | 1 - 1 file changed, 1 deletion(-) delete mode 100644 Dark Light Mode Switching Website diff --git a/Dark Light Mode Switching Website b/Dark Light Mode Switching Website deleted file mode 100644 index 8b13789..0000000 --- a/Dark Light Mode Switching Website +++ /dev/null @@ -1 +0,0 @@ - From 73b6e5e42a0cb39990cb991438bf84dfe59ed1b1 Mon Sep 17 00:00:00 2001 From: Mansa Dixit <96430645+mansadixit@users.noreply.github.com> Date: Sat, 8 Oct 2022 15:36:28 +0530 Subject: [PATCH 3/4] Added Dark And Light Mode Website Switching --- Dark Light Mode Switching Website/index.html | 57 ++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 Dark Light Mode Switching Website/index.html diff --git a/Dark Light Mode Switching Website/index.html b/Dark Light Mode Switching Website/index.html new file mode 100644 index 0000000..fbdc6af --- /dev/null +++ b/Dark Light Mode Switching Website/index.html @@ -0,0 +1,57 @@ + + + + + + + + Dark and Light Mode + + + + + + + + + + + + + + + Day-Night Mode + + + +
+

Day and Night Mode

+
+ + +
+
+
+

Get Ready for Indigenous Peoples’ Day

+

The second Monday in October is Indigenous Peoples’ Day in the United States. The holiday honors the + cultures and contributions of Native Americans. It also recognizes the hostilities to which American + Indians have been subjected, including displacement, forced assimilation, foreign diseases, and + warfare. Learn more about the celebration and the diverse societies that make up the First Nations. +

+
+
+

Discover More

+

How prized? According to Beattie, 9th and 11th Britannica Editions can sell for as much as $300 to + $400 per set, if in good, clean condition. And Roundtree says a fine set of 11th Edition Britannicas + can command as much as $3,000.

+
+
+
+ + + + From fcded186a1cb95a9df298dcdd1ed3185a09135cd Mon Sep 17 00:00:00 2001 From: Mansa Dixit <96430645+mansadixit@users.noreply.github.com> Date: Sat, 8 Oct 2022 15:41:14 +0530 Subject: [PATCH 4/4] Added Dark and Light Mode Switching Website I have added my mini project where a website switches between Dark and Light Modes, using HTML, CSS and JavaScript. Kindly consider the pull request. --- Dark Light Mode Switching Website/README.md | 7 ++ Dark Light Mode Switching Website/main.js | 13 +++ Dark Light Mode Switching Website/style.css | 100 ++++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 Dark Light Mode Switching Website/README.md create mode 100644 Dark Light Mode Switching Website/main.js create mode 100644 Dark Light Mode Switching Website/style.css diff --git a/Dark Light Mode Switching Website/README.md b/Dark Light Mode Switching Website/README.md new file mode 100644 index 0000000..88b8f57 --- /dev/null +++ b/Dark Light Mode Switching Website/README.md @@ -0,0 +1,7 @@ + +## Day and Night switch mode + +Simple day and night switch made with vanilla js + + + diff --git a/Dark Light Mode Switching Website/main.js b/Dark Light Mode Switching Website/main.js new file mode 100644 index 0000000..11af492 --- /dev/null +++ b/Dark Light Mode Switching Website/main.js @@ -0,0 +1,13 @@ +const $ = (s) => document.getElementById(s); +const but = $("button").style; +const main = $("main").style; +function setWhite() { + but.zIndex = "1"; + main.backgroundColor = "#fff"; + main.color = "#000"; +} +function setBlack() { + but.zIndex = "100"; + main.backgroundColor = "#000"; + main.color = "#fff"; +} diff --git a/Dark Light Mode Switching Website/style.css b/Dark Light Mode Switching Website/style.css new file mode 100644 index 0000000..2d3caa5 --- /dev/null +++ b/Dark Light Mode Switching Website/style.css @@ -0,0 +1,100 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; +} + +main { + width: 100%; + background-color: white; + color: black; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + width: 100%; + text-align: center; +} + +div { + position: relative; + height: 10vh; +} + +section { + width: 50%; + margin: 1vw auto; +} + +section article { + border: 1px navy solid; + width: 80%; + margin: 1vh auto; + padding: 1px; +} + +section article h2 { + width: 100%; + text-align: center; +} + +section article p { + width: 80%; + margin: 1vh auto; + padding: 5px; +} + +div button { + position: absolute; + background-color: black; + color: white; + text-align: left; + border: none; + font-size: 7vw; + transform: rotateZ(90deg); + border: 1px solid navy; +} + +div button:nth-child(even) { + z-index: 100; + color: black; + background-color: white; + transform: rotateZ(-90deg); +} + +div button:nth-child(odd) { + z-index: 10; +} + +@media screen and (max-width: 600px) { + section { + width: 90%; + margin: 1vw auto; + } + + section article { + border: 1px navy solid; + width: 90%; + margin: 1vh auto; + padding: 1px; + } + + section article h2 { + width: 100%; + text-align: center; + } + + section article p { + width: 90%; + margin: 1vh auto; + padding: 5px; + } +} \ No newline at end of file