The-Rooftop-Farmers.github.io/index.html at main · The-Rooftop-Farmers/The-Rooftop-Farmers.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Code to make it viewable on all devices -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Tab Resources -->
    <title>Home | The Rooftop Farmers</title>
    <link rel="icon" href="WebpageExtras/media/logo.png" type="image/png">

    <!-- CSS -->
    <link rel="stylesheet" href="WebpageExtras/style.css">

    <!-- Discord Embed Properties -->
    <meta property="og:title" content="The Rooftop Farmers" />
    <meta property="og:description"
        content="The Rooftop Farmers, a duo of school students, are on a mission to get closer to achieving the SDGs through robotics." />
    <meta property="og:url" content="https://the-rooftop-farmers.github.io/" />
    <meta property="og:image" content="https://the-rooftop-farmers.github.io/WebpageExtras/media/logo.png" />
    <meta property="og:type" content="website" />
</head>

<body>
    <!-- Header -->
    <header>
        <div class="logo-title">
            <img src="WebpageExtras/media/logo.png" alt="The Rooftop Farmers Logo" class="header-logo">
            <div id="text-logo">The Rooftop Farmers</div>
        </div>
        <p>Robotics. Sustainability. Creativity. Students making a difference.</p>
    </header>

    <!-- Navigation Bar -->
    <nav>
        <a href="#about">About Us</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
        <a href="./home-farmer" target="_blank">Home Farmer</a>
    </nav>

    <!-- Main Body -->
    <main>
        <!-- About Section -->
        <section id="about">
            <h2>About Us</h2>
            <p>The Rooftop Farmers, a duo of school students, are on a mission to get closer to achieving the SDGs
                through robotics. With a keen interest in environmental conservation, they're making a difference with
                their passion and creativity.
            </p>

            <div class="team-members">
                <!-- Vihaan -->
                <div class="member">
                    <h3>Vihaan</h3>
                    <p>Loves Robotics, loves to create new things, and is also passionate about playing video games.
                        Passion in coding makes him a code freak. He has made many projects using Python, Java, and
                        more!
                        <br>
                        (+ the website you are looking at!)
                    </p>
                </div>

                <!-- Yogeshwar -->
                <div class="member">
                    <h3>Yogeshwar</h3>
                    <p>Interested in building different structures. He prepares different designs like aircraft models.
                        He is very much interested in Robotics and Electronics. He loves to create different models and
                        has participated in several competitions.
                    </p>
                </div>

                <!-- Malhar Sir -->
                <div class="member">
                    <h3>Our Mentor - <strong>Malhar Sir</strong></h3>
                    <p>
                        Mr. Malhar Ashtaputre, an M.Tech graduate from COEP Pune,
                        has five years of R&D experience at Hella India Automotive Pvt. Ltd.
                        Currently the Director of Shrividya Robotics, he is deeply passionate about teaching robotics
                        and programming,
                        inspiring students to innovate and excel in the field of technology and automation.
                    </p>
                </div>
            </div>

            <!-- Group Photo with Mentor and Home Farmer -->
            <img src="WebpageExtras/media/group_photo.jpg" alt="Picture 1 - Group Photo with Home Farmer"
                class="responsive-img">
            <p class="caption">Group Photo with Home Farmer</p>
        </section>

        <!-- Projects Sections -->
        <section id="projects">
            <h2>Our Projects</h2>
            <div class="projects-list">
                <!-- Home Farmer -->
                <div class="project-card">
                    <h3>Home Farmer</h3>
                    <img src="WebpageExtras/media/home_farmer_v2.jpg" alt="Home Farmer V2" class="project-img">
                    <p>
                        An automated rooftop farming robot designed and built by The Rooftop Farmers. It sows seeds,
                        waters plants, and monitors environmental conditions with sensors. Powered by Arduino and
                        stepper motors, it demonstrates how urban spaces can be converted into efficient, smart farms.
                    </p>
                    <div class="project-links">
                        <a href="./home-farmer" target="_blank" class="project-link">View Project Website</a>
                        <a href="https://github.com/The-Rooftop-Farmers/Home-Farmer" target="_blank"
                            class="project-link">View on GitHub</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- News Clippings -->
        <section id="news-clippings">
            <h2>News Clippings</h2>
            <div class="news-list">
                <div class="news-card">
                    <img src="WebpageExtras/media/news/2024/2024 divya marathi.jpg" alt="Divya Marathi News Clipping 2024">
                    <p class="caption">Local Divya Marathi Newspaper 2024</p>
                </div>
                <div class="news-card">
                    <img src="WebpageExtras/media/news/2024/2024 Lokmat Times.jpg" alt="Lokmat Times News Clipping 2024">
                    <p class="caption">Local Lokmat Times Newspaper 2024</p>
                </div>
                <div class="news-card">
                    <img src="WebpageExtras/media/news/2024/2024 pundhari.jpg" alt="Pundhari News Clipping 2024">
                    <p class="caption">Local Pundhari Newspaper 2024</p>
                </div>
                <div class="news-card">
                    <img src="WebpageExtras/media/news/2024/2024 Times of India Pune Edition.jpg" alt="Times of India Pune Edition News Clipping 2024">
                    <p class="caption">Times of India Pune Edition 2024</p>
                </div>
                <div class="news-card">
                    <img src="WebpageExtras/media/news/2024/2024 Times of India.jpg" alt="2024 Local Times of India News Clipping">
                    <p class="caption">Local Times of India Newspaper 2024</p>
                </div>
                <div class="news-card">
                    <img src="WebpageExtras/media/news/2025/24-08-2025 Sakal paper.jpg" alt="Sakal News Clipping 2025">
                    <p class="caption">Local Sakal Newspaper 2025</p>
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact">
            <h2>Contact</h2>
            <p>You can reach us at: <a href="javascript:void(0)" onclick="copyEmail();"
                    class="email-link">vihaan@therooftopfarmers.org</a></p>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        &copy; 2025 The Rooftop Farmers. All rights reserved.
    </footer>

    <!-- Javascript -->
    <script src="WebpageExtras/script.js"></script>
</body>

</html>