diff --git a/css/feature.css b/css/feature.css
new file mode 100644
index 00000000..4abed60d
--- /dev/null
+++ b/css/feature.css
@@ -0,0 +1,24 @@
+/* Updated styling for the new Tip Box to match the dark theme */
+.tip-box {
+ background-color: #24292f; /* Darker background color */
+ border: 1px solid #444c56; /* Darker border color */
+ border-left: 5px solid #00b894; /* A green border on the left (you can keep this) */
+ border-radius: 5px;
+ padding: 1.5rem;
+ margin-top: 2rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+ font-family: sans-serif;
+ max-width: 400px;
+}
+
+.tip-box h4 {
+ font-size: 1.1rem;
+ color: #c9d1d9; /* Lighter text color for readability */
+ margin-top: 0;
+}
+
+.tip-box p {
+ font-size: 1rem;
+ line-height: 1.5;
+ color: #8b949e; /* Lighter text color */
+}
diff --git a/feature/feature.js b/feature/feature.js
new file mode 100644
index 00000000..37e27bc1
--- /dev/null
+++ b/feature/feature.js
@@ -0,0 +1,32 @@
+const tips = [
+ "Don't be afraid to ask questions! The community is here to help.",
+ "Always read the project's CONTRIBUTING.md file before you start.",
+ "Start with small changes, like fixing a typo in the documentation.",
+ "When you create a pull request, link it to the issue you are solving.",
+ "Provide clear and concise commit messages.",
+ "Reviewers will give you feedback. It's a learning opportunity!",
+ "Always be polite and respectful to maintainers and other contributors.",
+ ];
+
+ // Get references to the HTML elements
+ const tipText = document.getElementById('tip-text');
+ const newTipButton = document.getElementById('new-tip-button');
+
+ // Function to get a random tip from the array
+ function getRandomTip() {
+ const randomIndex = Math.floor(Math.random() * tips.length);
+ return tips[randomIndex];
+ }
+
+ // Function to update the tip text on the page
+ function updateTip() {
+ tipText.textContent = getRandomTip();
+ }
+
+ // Add an event listener to the button
+ if (newTipButton) {
+ newTipButton.addEventListener('click', updateTip);
+ }
+
+ // Display a random tip when the page first loads
+ updateTip();
diff --git a/index.html b/index.html
index 1f6f9d4a..3299ab31 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
-
+
@@ -248,6 +247,13 @@
Find Great Open Source Opportunities.
+
+
Helpful Tip for Contributors
+
+ Don't be afraid to ask questions! The open-source community is here to help.
+