diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/Plants.jpg b/assets/Plants.jpg new file mode 100644 index 000000000..2ea86cfa6 Binary files /dev/null and b/assets/Plants.jpg differ diff --git a/assets/gallery1.jpg b/assets/gallery1.jpg new file mode 100644 index 000000000..546104535 Binary files /dev/null and b/assets/gallery1.jpg differ diff --git a/assets/gallery2.jpg b/assets/gallery2.jpg new file mode 100644 index 000000000..20c4abb04 Binary files /dev/null and b/assets/gallery2.jpg differ diff --git a/assets/gallery3.jpg b/assets/gallery3.jpg new file mode 100644 index 000000000..2cdd1a85d Binary files /dev/null and b/assets/gallery3.jpg differ diff --git a/assets/gallery4.jpg b/assets/gallery4.jpg new file mode 100644 index 000000000..e0fdc309c Binary files /dev/null and b/assets/gallery4.jpg differ diff --git a/assets/header.jpeg b/assets/header.jpeg new file mode 100644 index 000000000..986fc0f92 Binary files /dev/null and b/assets/header.jpeg differ diff --git a/assets/intro.jpg b/assets/intro.jpg new file mode 100644 index 000000000..ab97cacd7 Binary files /dev/null and b/assets/intro.jpg differ diff --git a/assets/lighting_guide.jpg b/assets/lighting_guide.jpg new file mode 100644 index 000000000..2394fc1eb Binary files /dev/null and b/assets/lighting_guide.jpg differ diff --git a/assets/plant-icon.png b/assets/plant-icon.png new file mode 100644 index 000000000..66a45a0c4 Binary files /dev/null and b/assets/plant-icon.png differ diff --git a/assets/repotting.jpeg b/assets/repotting.jpeg new file mode 100644 index 000000000..0c40274e3 Binary files /dev/null and b/assets/repotting.jpeg differ diff --git a/assets/the_map_of_plants.jpg b/assets/the_map_of_plants.jpg new file mode 100644 index 000000000..450d70c28 Binary files /dev/null and b/assets/the_map_of_plants.jpg differ diff --git a/assets/watering_chart.jpg b/assets/watering_chart.jpg new file mode 100644 index 000000000..6cdf96465 Binary files /dev/null and b/assets/watering_chart.jpg differ diff --git a/assets/yellow_leaves.jpg b/assets/yellow_leaves.jpg new file mode 100644 index 000000000..cc32b68a0 Binary files /dev/null and b/assets/yellow_leaves.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..9de8f7f83 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + Plant Party Fansite + + + + + +
+

Plant Party Fansite

+ +
+
+
+

🍀 Welcome to Plant Kingdom 🍀

+

+ Welcome to Plant Kingdom—a space to discover, care for, and appreciate the beauty and benefits of plants. Plants enrich our lives by purifying the air, enhancing our well-being, and bringing natural beauty into our homes and gardens. +

+ Trees + +

🌱 About Plants 🌱

+

Plants are essential to life on Earth. They provide oxygen, food, medicine, and habitats for countless species. Here’s a quick look at what makes plants so fascinating:

+ +
+
+ + + \ No newline at end of file diff --git a/pages/care.html b/pages/care.html new file mode 100644 index 000000000..dd741f82c --- /dev/null +++ b/pages/care.html @@ -0,0 +1,144 @@ + + + + + + + + Care + + + +
+

Plant Party Fansite

+ +
+
+
+
+

This is a quick guide on how to take care of your plants!

+
+ +
+ +
+ +
+
+

Light 🌞

+

Different plants thrive under different amounts of light so it's important to know how much your specific plant needs. Most indoor plants prefer indirect light.

+
    +
  • Shade/Low light: Very little natural light; far from light sources
    • +
  • Low Indirect Light: Light that's filtered or reflected; a dim room with a north-facing window or a spot far from a window
    • +
  • Bright Indirect Light aka "Medium Light": A bright light source, but not in the direct path of the sun. Most common for house plants!
    • +
  • Partial Sun: Direct sun, but not intense "peak" sun heat/light
    • +
  • Full Sun: Direct, unfiltered sun for several hours a day. +
    • +
+
+ lighting guide + +
+ + +
+
+

Watering💦

+

+ Identify your specific plant's watering needs. A rule of (green) thumb is that if the top inch of soil is dry, it's time to water! + Make sure your plants have proper drainage holes or else standing water can lead to root rot +

+
+ watering guide +
+ +
+
+

Soil and Potting

+

+ Use the Right Soil: Most houseplants do well in a general-purpose potting mix. However, some plants like succulents or cacti need a fast-draining soil mix to prevent root rot. +
+ Repot when needed: When a plant outgrows its pot (you may see roots poking out of the drainage holes), it’s time to repot. Choose a pot about 1-2 inches wider than the current one. +

+
+ repotting guide +
+ +
+
+

Temperature and Humidity

+

+ Ideal Temperature Range: Most houseplants thrive in temperatures between 65-75°F (18-24°C). Avoid placing them near heaters, air conditioners, or drafty windows. +
+ Humidity Help: Many plants, especially tropical varieties, love humidity. Misting, using a humidifier, or grouping plants together can help maintain a higher humidity level. +

+
+
+ + +
+
+

Troubleshooting common issues

+
    +
  • Yellowing Leaves: Often a sign of overwatering, nutrient deficiency, or low light.
    • +
  • Drooping Leaves: This can indicate underwatering or a lack of humidity
    • +
  • Brown Leaf Tips: Low humidity or too much direct sun might be the cause
    • +
+
+ yellowing leaves +
+ +
+

Level up your plant game

+ +
    +
  • + Fertilize During Growing Seasons: Most plants benefit from a bit of plant food during the spring and summer. Use a balanced, water-soluble fertilizer once a month during this time +
    • +
  • + Skip Fertilizer in Fall and Winter: During cooler months, plants usually go dormant, so fertilizing isn’t necessary. +
    • +
  • + Regular Checkups: Look for signs of pests like tiny webs, holes in leaves, or sticky residue. Common pests include spider mites, aphids, and scale. +
    • +
  • + Natural Remedies: If you spot pests, try spraying the plant with a mix of water and mild soap or using neem oil, which is a natural insecticide. +
    • +
+
+
+
+ + + \ No newline at end of file diff --git a/pages/facts.html b/pages/facts.html index b4ae215c4..e7e769ea1 100644 --- a/pages/facts.html +++ b/pages/facts.html @@ -4,9 +4,97 @@ - Document + + + Facts about plants + - +
+

Plant Party Fansite

+ +
+
+
+

🌱 Funny facts about plants and not only 🌱

+ Plants +

+

🍀 Facts 🍀

+ +

🪴 Fun facts 🪴

+ +

+
+
+ \ No newline at end of file diff --git a/pages/gallery.html b/pages/gallery.html index b4ae215c4..b1d329926 100644 --- a/pages/gallery.html +++ b/pages/gallery.html @@ -4,9 +4,103 @@ - Document + Plant Party Fansite + + + - +
+

Plant Party Fansite

+ +
+ +
+
+

Monstera Deliciosa

+
+ Large green Monstera Deliciosa plant +
+

+ Monstera deliciosa, also known as the split-leaf philodendron or Swiss cheese plant, + is a tropical plant often kept as a houseplant. This easy-to-grow climbing evergreen + provides a dramatic focal point due to its size and unique shape. Monstera deliciosa + has glossy, heart-shaped split leaves and is relatively easy to care for. It is a fast grower, + about 1 to 2 feet a year, and takes about three years to reach full-grown maturity. +

+ + Learn more about the Monstera Deliciosa plant + +
+
+
+ +
+

Orchids

+
+ Orchid plant with vibrant pink flowers in full bloom +
+

+ Orchids are beautiful indoor plants. They make wonderful plants for decorating the home. + The flowers are colorful, unique, and long-lasting. They have a reputation of being difficult + to grow indoors, but by selecting certain species and providing the proper environmental + conditions, success is almost guaranteed. +

+ + Learn more about Orchid plant + +
+
+
+ +
+

Snake Plant

+
+ Snake plant with tall, pointy leaves edged in yellow. +
+

+ Snake plants are one of the most popular houseplants, for good reason. It's incredibly + drought-tolerant, able to go weeks without water in low and medium lighting conditions. + They tolerate low light (hence why they're so often seen in office buildings) but will + thrive in bright light, sending up new leaves and stronger variegation. +

+ + Learn more about the Snake Plant + +
+
+
+ +
+

Fiddle Leaf Fig

+
+ Tall Fiddle Leaf Fig plant in a modern white pot +
+

+ Fiddle leaf fig (Ficus lyrata) sometimes gets a finicky reputation. It's not the easiest + houseplant to grow, but its lovely large leaves and tree form make it worth a little effort + and a good choice even for the beginning gardener. These small trees are well adapted to indoor + temperatures and filtered light and are hardy enough to survive less-than-ideal conditions. +

+ + Learn more about the Fiddle Leaf Fig plant + +
+
+
+
+ + + - \ No newline at end of file + diff --git a/pages/index.html b/pages/index.html deleted file mode 100644 index b4ae215c4..000000000 --- a/pages/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - - - - \ No newline at end of file diff --git a/style/care.css b/style/care.css new file mode 100644 index 000000000..d0f528c65 --- /dev/null +++ b/style/care.css @@ -0,0 +1,69 @@ + +.intro { + margin-top: 1em; + height: 275px; + display: flex; + width:100%; +} + +#summary { + width:55%; + background-color: #436105; + background-image: url(../assets/intro.jpg); + background-size: cover; + + +} + +#summary p{ + display: block; + height: 10px; + width: 400px; + margin-left: auto; + margin-right: 1em; + background-color: white; + padding: 1em; +} + +#table-of-contents{ + background-color: white; + padding-left: 20px; + width: 50%; +} + +#table-of-contents h2 { + margin: 0; +} + +.content { + margin-left: 1em; + /* background-color: red; */ + max-width: 1000px; + margin: .5em auto; + padding: .5em 2em; + display: flex; + flex-direction: column; +} + +#Light, #Watering, #Soil, #Troubleshooting { + display: flex; + flex-wrap: wrap; + /* align-items: flex-start; */ + justify-content: space-around; + gap: 20px; + /* background-color: red; */ + margin: 1em; +} + +.text { + flex: 1; + padding: 1em; +} + + +img { + display: block; + margin-left: auto; + margin-right: auto; + size: auto; +} \ No newline at end of file diff --git a/style/facts.css b/style/facts.css new file mode 100644 index 000000000..46c3f641c --- /dev/null +++ b/style/facts.css @@ -0,0 +1,24 @@ +h2 { + font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-align: center; + text-shadow: 2px 2px yellow; + font-size: 30px; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; +} + +ul { + list-style: none + } + +li { + width: 95%; + flex-wrap: wrap; + font-size: 20px; +} + + diff --git a/style/gallery.css b/style/gallery.css new file mode 100644 index 000000000..d5c158b1d --- /dev/null +++ b/style/gallery.css @@ -0,0 +1,42 @@ +main{ + text-align: center; + padding-bottom: 40px; +} + +section { + margin-top: 60px; +} + +.container{ + display: flex; + gap: 40px; + flex-wrap: wrap; + justify-content: center; +} + +.reverse{ + flex-direction: row-reverse; +} + +section img { + width: 400px; +} + +.text { + width: 400px; +} + +section p { + line-height: 30px; + text-align: justify; + margin-top: 0; +} + +.plant-link { + color: rgb(2, 167, 2); + font-size: 18px; +} + +.plant-link:hover{ + color: rgb(1, 66, 1); +} \ No newline at end of file diff --git a/style/index.css b/style/index.css new file mode 100644 index 000000000..f49b21876 --- /dev/null +++ b/style/index.css @@ -0,0 +1,78 @@ +h2 { + text-align: center; + animation: blinker 2s step-start infinite; + color:rgb(46, 147, 15); + font-size: 30px; +} + +@keyframes blinker { + 50% { + opacity: 0.5; + } +} + +section p { + margin: 1em; + padding: 10px; + font-size: 18px; +} + +img { + display: block; + margin: auto; + width:50%; +} + +h3 { + margin: 1em; +} + +section ul { + margin: 1em; + padding: 20px; + gap: 10px; + display: grid; + grid-template-rows: repeat(2, 1fr); + list-style: none; +} + + +section ul li p{ + margin: 1em 1em; + padding: 20px; + color: rgb(46, 147, 15); + width: 80%; + height: auto; + text-align: center; + transition: transform 0.3s; + animation: float 6s ease-in-out infinite; + place-self: center; + +} + +@keyframes float { + 80% { + transform: translateY(10px) scale(1.2); + } +} + +.Photosynthesis { + grid-row: 1; + grid-column: 1; +} + +.Diversity { + grid-row: 1; + grid-column: 2; +} + +.Indoor { + + grid-column: 2; + grid-column: 1; +} + +.Reproduction { + grid-column: 2; + grid-column: 2; +} \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 000000000..e57f2cea3 --- /dev/null +++ b/style/style.css @@ -0,0 +1,57 @@ +body{ + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100vh; +} + +main { + padding-bottom: 4em; +} + +header{ + text-align: center; + height: 175px; + background-color: #436105; + background-image: url("../assets/header.jpeg"); + background-size: 1000px; + background-position: center; + background-repeat: no-repeat; + padding: 1em; + +} + +h1{ + margin: 0; + font-family: Georgia, 'Times New Roman', Times, serif; + text-shadow: 2px 2px yellow; +} + +nav li{ + display: inline; + padding: .25em 2em; + margin: 10px; + background-color: green; + opacity: .9; +} + + +.menu-link{ + color:black; + text-decoration: none; + font-weight: bold; + font-size: 18px; +} + +.menu-link:hover{ + text-shadow: 1px 1px yellow; +} + +footer{ + text-align: center; + background-color: #e4f569; + width: 100%; +} \ No newline at end of file