Merge pull request #1518 from SumaLatha2023/main

Redesigned Word of The Day

index.html

@@ -1224,15 +1224,20 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
         </div>
     </div>
 </section>
+
 <!-- Word of the Day Section -->
-<div id="word-of-the-day" style="background-color: rgb(248, 181, 181); padding: 20px; margin-right: 35px; border-radius: 5px; color: black;">
-    <h2>Word of the Day</h2>
-    <p id="word"></p>
-    <p id="definition"></p>
+<div id="word-of-the-day">
+
+    <h2>
+        Word of the Day
+    </h2>
+    <span>📘</span>
+    <hr>
+    <p id="word">Placeholder Word</p>
+    <p id="definition">Placeholder Definition</p>
 </div>
 
 
-
 <!-- Newsletter Section -->
 <section id="wordwise-newsletter" class="wordwise-newsletter-section">
   <div class="wordwise-newsletter-container">

style.css

@@ -2449,14 +2449,84 @@ h1 {
   border: none;
 }
 
-/* Word of the Day Dark Mode Styles */
-[data-theme="dark"] #word-of-the-day,
-[data-theme="dark"] #word-of-the-day h2,
-[data-theme="dark"] #word-of-the-day #word,
+/* Light mode styles */
+#word-of-the-day {
+  border: 2px solid rgb(248, 181, 181);
+  padding: 20px;
+  border-radius: 5px;
+  color: black;
+  width: 90%;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-left: 60px;
+  margin-bottom: 60px;
+}
+
+/* Header style */
+#word-of-the-day h2 {
+  font-size: xx-large;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #242e4c;
+}
+
+/* Icon style */
+#word-of-the-day span {
+  font-size: 1.2em;
+  margin-right: 8px;
+}
+
+/* Divider line */
+#word-of-the-day hr {
+  border: none;
+  height: 1px;
+  background-color: #333;
+  margin: 10px auto;
+  width: 80%;
+}
+
+/* Word style */
+#word-of-the-day #word {
+  font-weight: bold;
+  font-size: 1.2em;
+  color: #333;
+  margin: 10px 0;
+}
+
+/* Definition style */
+#word-of-the-day #definition {
+  font-size: 1em;
+  color: #555;
+  margin: 10px 0;
+}
+
+/* Dark mode styles using [data-theme="dark"] */
+[data-theme="dark"] #word-of-the-day {
+  border: 2px solid #555;
+  color: #ddd;
+  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] #word-of-the-day h2 {
+  color: #ffffff; /* Brighter white for the header */
+}
+
+[data-theme="dark"] #word-of-the-day hr {
+  background-color: #888;
+}
+
+[data-theme="dark"] #word-of-the-day #word {
+  color: #e0e0e0; /* Light white for the word */
+}
+
 [data-theme="dark"] #word-of-the-day #definition {
-    color: black;
+  color: #e0e0e0; /* Slightly dimmer white for the definition */
 }
 
+/* 
+
 
 
 footer .text-lg {
@@ -3654,4 +3724,5 @@ nav1{
   .wordwise-footer-content {
     text-align: center;
   }
-}
+}
+