diff --git a/index.html b/index.html index 47fc3daf..b9665d42 100644 --- a/index.html +++ b/index.html @@ -1140,6 +1140,18 @@

Creative writing

+ +
+ plant +
+
+

Interactive Virtual Plant Care Guide

+

+ The best guide for your gardening journey! +

+
+ + diff --git a/projects/Plant care/index.html b/projects/Plant care/index.html new file mode 100644 index 00000000..98800f2b --- /dev/null +++ b/projects/Plant care/index.html @@ -0,0 +1,26 @@ + + + + + + Virtual Plant Care Guide + + + +
+

Virtual Plant Care Guide

+

Select a plant to learn how to care for it:

+
+ + + + +
+
+

Plant Care Details

+

Select a plant to view its care guide.

+
+
+ + + diff --git a/projects/Plant care/script.js b/projects/Plant care/script.js new file mode 100644 index 00000000..5bab277b --- /dev/null +++ b/projects/Plant care/script.js @@ -0,0 +1,17 @@ + +const careInfo = { + cactus: "Cacti thrive in bright sunlight and well-draining soil. Water sparingly—only when the soil is dry. Overwatering is the most common cause of issues with cacti. They prefer warmer temperatures and don't require much humidity.", + fern: "Ferns enjoy indirect sunlight and high humidity. Water them regularly to keep the soil moist, but avoid waterlogging. They also thrive in slightly cooler environments, so keep them away from direct heat sources.", + succulent: "Succulents need lots of light and very little water. They grow best in dry conditions, so make sure their soil drains well. Water deeply but infrequently, allowing the soil to dry out completely between waterings.", + orchid: "Orchids require indirect light and high humidity. Water them once a week by soaking the roots, but make sure they have proper drainage to avoid root rot. They also benefit from orchid-specific fertilizer during their growing season." +}; + +const plantButtons = document.querySelectorAll('.plant-btn'); +const careInfoDisplay = document.getElementById('care-info'); + +plantButtons.forEach(button => { + button.addEventListener('click', function() { + const selectedPlant = this.getAttribute('data-plant'); + careInfoDisplay.textContent = careInfo[selectedPlant]; + }); +}); diff --git a/projects/Plant care/styles.css b/projects/Plant care/styles.css new file mode 100644 index 00000000..45385b38 --- /dev/null +++ b/projects/Plant care/styles.css @@ -0,0 +1,128 @@ +/* styles.css */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #b2f9fc, #69eacb); + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + color: #333; + overflow: hidden; +} + +.container { + background: white; + padding: 40px; + border-radius: 20px; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); + max-width: 750px; + width: 100%; + text-align: center; + transition: all 0.3s ease; +} + +.container:hover { + transform: translateY(-10px); +} + +h1 { + font-size: 2.8rem; + color: #2c9676; + margin-bottom: 20px; + letter-spacing: 1.5px; + text-transform: uppercase; +} + +p { + font-size: 1.2rem; + margin-bottom: 30px; + color: #444; + line-height: 1.6; +} + +.plant-selection { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 15px; + margin-bottom: 30px; +} + +.plant-btn { + padding: 15px 25px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 50px; + font-size: 1.1rem; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + text-transform: uppercase; +} + +.plant-btn:hover { + background-color: #43A047; + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3); +} + +.plant-btn:active { + transform: translateY(2px); + box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2); +} + +.plant-care-details { + background-color: #f9f9f9; + padding: 25px; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + transition: background-color 0.3s ease; + max-width: 100%; +} + +.plant-care-details:hover { + background-color: #f0f8ff; +} + +#care-info { + font-size: 1.2rem; + color: #555; + line-height: 1.6; +} + +h2 { + margin-bottom: 15px; + font-size: 1.8rem; + color: #2c9676; + text-transform: uppercase; +} + +@media (max-width: 768px) { + .container { + padding: 30px; + } + + h1 { + font-size: 2.2rem; + } + + p { + font-size: 1.1rem; + } + + .plant-btn { + padding: 12px 18px; + font-size: 1rem; + } + + #care-info { + font-size: 1.1rem; + } +}