From 21c1a55d8d237de9f34603e0c40f25680bfa44f1 Mon Sep 17 00:00:00 2001 From: Shilajit2002 Date: Tue, 7 Nov 2023 22:23:13 +0530 Subject: [PATCH 1/2] Pizza Sauce Added --- index.html | 62 ++++++++++++++++++++++++++---------------------------- 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index e140dc6..7de0b5d 100644 --- a/index.html +++ b/index.html @@ -1,35 +1,33 @@ - - -My Favorite Pizza - - - - - - - - - - - -
-
- Pizza with pepperoni and cheese. -
-
-

Pizza!

-

My Favorite Toppings:

-
    -
  • Pepperoni
    • -
  • Mozzarella Cheese
    • -
  • Mushrooms
    • -
-
-
- - + + My Favorite Pizza + + + + + + + + + +
+
+ Pizza with pepperoni and cheese. +
+
+

Pizza!

+

My Favorite Toppings:

+
    +
  • Pepperoni
    • +
  • Mozzarella Cheese
    • +
  • Mushrooms
    • +
  • Marinara
    • +
+
+
+ - - From 86de57b9b7746bc9bcc7bee7b0d72cae544283f9 Mon Sep 17 00:00:00 2001 From: Shilajit2002 Date: Tue, 7 Nov 2023 23:58:52 +0530 Subject: [PATCH 2/2] Dark & Light Mode Created --- index.html | 5 +++++ script.js | 21 +++++++++++++++++++++ style.css | 47 ++++++++++++++++++++++++++++++----------------- 3 files changed, 56 insertions(+), 17 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 7de0b5d..3aad482 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,11 @@

Pizza!

  • Marinara
    • + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2f78b45 --- /dev/null +++ b/script.js @@ -0,0 +1,21 @@ +const pageContainer = document.getElementsByClassName("pageContainer")[0]; + +const btn = document.getElementById("btn"); + +const h1 = document.getElementsByTagName('h1')[0]; + +pageContainer.style.backgroundColor = "white"; + +h1.style.color = "#8b1b00"; + +btn.addEventListener('click', () => { + if (pageContainer.style.backgroundColor === "white") { + pageContainer.style.backgroundColor = "black"; + btn.innerHTML = "White Mode"; + h1.style.color = "#f85c35"; + } else { + pageContainer.style.backgroundColor = "white"; + btn.innerHTML = "Dark Mode"; + h1.style.color = "#8b1b00"; + } +}) \ No newline at end of file diff --git a/style.css b/style.css index 657aa61..fe16fbc 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,3 @@ - /* STYLE.CSS: One stylesheet to rule them all. @@ -12,19 +11,18 @@ body { background-color: #5f5345; } - + .pageContainer { width: 940px; margin: 20px auto 0 auto; padding: 20px; - background-color: #fff; } - + .imageContainer { float: left; width: 620px; } - + .textContainer { float: left; width: 300px; @@ -35,30 +33,45 @@ body { img { width: 100%; } - + h1 { - font-family: 'Fredericka the Great', cursive; + font-family: "Fredericka the Great", cursive; font-size: 64px; - color: #8b1b00; } - -p, li { - font-family: 'Lato', sans-serif; + +p, +li { + font-family: "Lato", sans-serif; font-size: 22px; - color: #51473b; + color: #8a6f4e; } - - - /* ---- Advanced ---- */ /* This tag is a bit advanced for this lesson, but is needed to wrap the pageContainer around any sized content that is floated within it. */ -.pageContainer:after { +.pageContainer:after { content: " "; display: table; clear: both; } - + +#btn { + margin-left: 20px; + margin-top: 20px; + border-style: none; + padding: 10px; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, + rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, + rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px; + cursor: pointer; + background-color: rgb(0, 119, 255); + color: whitesmoke; + opacity: 0.8; +} + +#btn:hover { + opacity: 1; +}