TreePlantation.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plant Trees</title>

    <link rel="stylesheet" href="./assets/css/TreePlantation.css">
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</head>
<link rel="css/TreePlantation.css">
<body>
    <!-- #HEADER -->
    <header class="header">
        <div class="container">
            <h1 class="logo">Plant Trees</h1>
            <nav class="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#benefits">Benefits of Tree Planting</a></li>
                    <li><a href="#how-to-help">How to Help</a></li>
                    <li><a href="#statistics">Statistics</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- #MAIN -->
    <main>
        <article>
            <!-- #HOME -->
            <section class="section home" id="home">
                <div class="container">
                    <h2 class="section-title">Welcome to Plant Trees</h2>
                    <p class="line">
                        Join our initiative to combat climate change and restore the environment by planting trees.
                    </p>
                </div>
            </section>

            <!-- #ABOUT -->
            <section class="section about" id="about">
                <div class="container">
                    <h2 class="section-title">About Us</h2>
                    <p>
                        At Plant Trees, we aim to encourage reforestation and the protection of green spaces. Our goal is to raise awareness of the vital role trees play in mitigating climate change, improving air quality, and sustaining biodiversity.
                    </p>
                    <p>
                        Trees not only absorb carbon dioxide but also support ecosystems, prevent soil erosion, and provide habitats for countless species. By planting trees, we can restore degraded lands and create healthier urban environments.
                    </p>
                </div>
            </section>

            <!-- #BENEFITS -->
            <section class="section benefits" id="benefits">
                <div class="container">
                    <h2 class="section-title">Benefits of Tree Planting</h2>
                    <p>
                        Planting trees offers a wide range of environmental, social, and economic benefits:
                    </p>
                    <ul>
                        <li>Sequesters carbon dioxide, reducing the impact of climate change.</li>
                        <li>Provides clean air by filtering pollutants.</li>
                        <li>Improves soil health and prevents erosion.</li>
                        <li>Supports wildlife by offering habitat and food sources.</li>
                        <li>Cools urban areas, reducing the need for air conditioning.</li>
                        <li>Enhances mental well-being and physical health in communities.</li>
                    </ul>
                </div>
            </section>

            <!-- #HOW-TO-HELP -->
            <section class="section how-to-help" id="how-to-help">
                <div class="container">
                    <h2 class="section-title">How You Can Help</h2>
                    <p class="line">
                        Get involved with tree planting and help protect our planet.
                    </p>

                    <div class="help-grid">
                        <!-- Join Tree-Planting Drives -->
                        <div class="help-item">
                            <div class="helping-icon">
                                <img src="assets/images/tree_icon.jpg" alt="Tree Plant Icon">
                            </div>
                            <div class="help-info">
                                <h3>Join Tree-Planting Drives</h3>
                                <p>Participate in local or global tree-planting campaigns.</p>
                            </div>
                        </div>

                        <!-- Conserve Forests -->
                        <div class="help-item">
                            <div class="help-icon">
                                <img src="assets/images/forest-icon.png" alt="Forest Icon">
                            </div>
                            <div class="help-info">
                                <h3>Conserve Forests</h3>
                                <p>Support efforts to protect forests and prevent deforestation.</p>
                            </div>
                        </div>

                        <!-- Advocate for Green Spaces -->
                        <div class="help-item">
                            <div class="help-green-icon">
                                <img src="assets/images/green-space-icon.jpg" alt="Green Space Icon">
                            </div>
                            <div class="help-info">
                                <h3>Advocate for Green Spaces</h3>
                                <p>Promote the creation and preservation of urban green spaces in your community.</p>
                            </div>
                        </div>

                        <!-- Spread Awareness -->
                        <div class="help-item">
                            <div class="help-icon">
                                <img src="assets/images/awareness-icon.png" alt="Awareness Icon">
                            </div>
                            <div class="help-info">
                                <h3>Spread Awareness</h3>
                                <p>Educate others on the importance of trees and encourage them to participate in reforestation.</p>
                            </div>
                        </div>
                    </div>

                    <p class="help-call-to-action">
                        Together, we can plant millions of trees and make a lasting difference.
                    </p>
                </div>
            </section>

            <!-- #STATISTICS -->
            <section class="section statistics" id="statistics">
                <div class="container">
                    <h2 class="section-title">Tree Planting Statistics</h2>
                    <p class="line">
                        Here are some important facts about the impact of trees:
                    </p>

                    <div class="stats-grid">
                        <!-- Carbon Sequestration Statistic -->
                        <div class="stat-item">
                            <div class="icon">
                                <img src="./assets/images/co2_icon.jpg" alt="CO2 Icon">
                            </div>
                            <div class="stat-info">
                                <h3 class="stat-number">48 lbs</h3>
                                <p class="stat-description">
                                    The average tree absorbs 48 pounds of CO2 per year.
                                </p>
                            </div>
                        </div>

                        <!-- Reforestation Statistic -->
                        <div class="stat-item">
                            <div class="icon">
                                <img src="assets/images/reforestation.png" alt="Reforest Icon">
                            </div>
                            <div class="stat-info">
                                <h3 class="stat-number">2B+</h3>
                                <p class="stat-description">
                                    Trees planted worldwide in reforestation projects since 2015.
                                </p>
                            </div>
                        </div>

                        <!-- Forest Area Statistic -->
                        <div class="stat-item">
                            <div class="icon">
                                <img src="assets/images/forest-icon.png" alt="Forest Icon">
                            </div>
                            <div class="stat-info">
                                <h3 class="stat-number">10M</h3>
                                <p class="stat-description">
                                    Hectares of forest restored annually through tree planting efforts.
                                </p>
                            </div>
                        </div>

                        <!-- Biodiversity Statistic -->
                        <div class="stat-item">
                            <div class="icon">
                                <img src="assets/images/biodiversity.png" alt="Biodiversity Icon">
                            </div>
                            <div class="stat-info">
                                <h3 class="stat-number">1M+</h3>
                                <p class="stat-description">
                                    Species of animals rely on trees for habitat and food.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- #CONTACT -->
            <section
                class="section contact"
                id="contact"
                style="
                    padding: 40px 0;
                    margin: 40px 0;
                    background-image: url(https://e1.pxfuel.com/desktop-wallpaper/165/739/desktop-wallpaper-bird-sparrow-nature-save-nature.jpg);
                    background-size: cover;
                    background-position: center;
                    color: white;
                "
                >
                <div
                    class="container"
                    style="
                    max-width: 800px;
                    width: 90%;
                    margin: 0 auto;
                    padding: 40px;
                    background-color: rgba(0, 0, 0, 0.7);
                    border-radius: 10px;
                    "
                >
                    <h2
                    class="section-title"
                    style="
                        font-size: 2.5em;
                        color: #ffffff;
                        text-align: center;
                        margin-bottom: 20px;
                    "
                    >
                    Get in Touch
                    </h2>
                    <p
                    style="font-size: 1.2em; text-align: center; margin-bottom: 30px"
                    >
                    Have any questions or want to learn more about our initiatives?
                    Reach out to us!
                    </p>

                    <form
                    class="contact-form"
                    style="display: flex; flex-direction: column; gap: 15px"
                    >
                    <input
                        type="text"
                        placeholder="Your Name"
                        required
                        style="
                        padding: 15px;
                        font-size: 1em;
                        border: none;
                        border-radius: 5px;
                        "
                    />
                    <input
                        type="email"
                        placeholder="Your Email"
                        required
                        style="
                        padding: 15px;
                        font-size: 1em;
                        border: none;
                        border-radius: 5px;
                        "
                    />
                    <textarea
                        placeholder="Your Message"
                        required
                        style="
                        padding: 15px;
                        font-size: 1em;
                        border: none;
                        border-radius: 5px;
                        resize: vertical;
                        "
                    ></textarea>
                    <button
                        class="btn"
                        type="submit"
                        style="
                        padding: 15px;
                        font-size: 1em;
                        background-color: #28a745;
                        color: white;
                        border: none;
                        border-radius: 5px;
                        cursor: pointer;
                        transition: background-color 0.3s;
                        "
                    >
                        Send Message
                    </button>
                    </form>
                </div>
                </section>
            </section>
        </article>
    </main>

    <!-- #FOOTER -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div>
                    <h3>About Us</h3>
                    <p>We are dedicated to promoting tree planting to combat climate change and protect biodiversity.</p>
                </div>
                <div>
                    <h3>Contact Us</h3>
                    <p>Email: info@planttrees.org</p>
                    <p>Phone: +123 456 7890</p>
                </div>
                <div>
                    <h3>Follow Us</h3>
                    <div class="footer-social-icons">
                        <div class="social-links">
                          <a href="https://www.facebook.com/"><ion-icon name="logo-facebook"></ion-icon></a>
                          <a href="https://x.com/"><ion-icon name="logo-twitter"></ion-icon></a>
                          <a href="https://www.instagram.com/"><ion-icon name="logo-instagram"></ion-icon></a>
                          <a href="https://www.linkedin.com/"><ion-icon name="logo-linkedin"></ion-icon></a>
                          <a href="https://www.youtube.com/"><ion-icon name="logo-youtube"></ion-icon></a>
                        </div>
                        <div class="message">Stay Connected</div>
                      </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 Plant Trees. All rights reserved.</p>
            </div>
       