TerraGreen

Form
About us page
Our team
Recycle page 3
Recycle page 2
Recycle page 1
Carousel slide 4
Industrial Pollution 1
Industrial Pollution 2
Carousel slide 3
Carousel slide 2
Non profit organization
Carousel slide 1
Cards on homepage
Gallery 1
Gallery 2
Gallery 3

We built this website because of the environmental issues we were encountering like climate change or pollution. We wanted to provide solutions for these problems. We feel we can spread awareness regarding environmental issues through campaigns therefore we designed a poster and sent it on mail to the user who subscribes to our newsletter.

Our website aims to improve the world that we live in. It aims to spread awareness about various climate change phenomena’s and their causes and encourages public to takes step like recycling, minimising wastage and dedicate their time for a good cause by participating in environmental campaigns.

We started off by drawing a raw design of our website, the elements it would include, and various pages we will link. After designing the framework of our website we divided the work of various pages and collaborated on Visual Studio code. First, we created a carousel using JavaScript and added 4 videos to it based on the environmental issues, after that we made 4 individual pages regarding the same which contains solutions regarding the problems using HTML and CSS. We built the cards with upper slider designed using HTML, CSS and Vanilla JS that contains links to those 4 pages. Then we built swiper slider which consist information regarding NGO’s. Then the most exciting part of our website which had backend involved was the form(we used Node Js and , whenever we enter the email that person will receive information of campaign along with poster from terragreen). We designed the poster using Figma and the form with HTML and CSS. Our website is responsive. We built an about us and recycle page too using basic HTML and CSS.

First problem we ran into was while building the carousel, adding the videos and changing its transition using Javascript was very difficult. Secondly while making our website responsive we faced issues in unit conversions like using px to rem to vh to vw. Third problem we faced was while implementing the form, which sends mail to user regarding campaigns. We had to use Express Js and Node Js , and we couldn’t host it on Github , so we did it on Heroku due to the backend part.

Our main accomplishment was the form being successful, that is a mail getting sent when user enters his/her email id. Our website turned out to be very clean and neat and it works on any size as it is responsive.

We learnt a lot of things like making our website responsive , appropriate use of units like vh,vw,px,rem,% etc. We learnt how to operate backend using Node Js and linking it to the button of our form for sending mails to the user’s mail id which we took as input.