Mother Earth has been developed as part of Code Institute's April 2022 Hackathon. Mother earth helps you plan for a more sustainable future in a playful way through simple tips, quiz, events, rewards. By raising self-awareness we can enable peole to reconnect to themselves ,reconnect to nature and truly comprehend humanity's impact on the planet by creating a quiz app feature, tree planting donation feature and some extra resources. The team members for this project were: Nigel Doberer, Salwin Achankunju_5P, Yusuf F, Jochen Mayer, Eugenia Muscat & Sandra Atino under the guidance of our facilitator, DaveHorrocks_ci.
Deployed website can be viewed here.
- As a user, I want to understand the purpose of the site easily.
- As a user, I want to navigate throughout the site easily and efficiently.
- As a user, I want to experience responsive design, so I can use the site on different devices.
- As a user, I want to find easy to understand content about sustainability
- As a user, I want to enjoy simple and streamlined design that emulates the purpose of the site.
- As a user, I want to enjoy images that reflect the aim of the site and convey the idea of a beautiful earth
- As a user, I want to find social media links so i can easily reach out to the company for any queries.
-
Responsive design - the site has been developed using Bootstrap and custom CSS to ensure the site is responsive across all devices.
-
Social media links - In the footer there are links to various social media links.
-
About Page - Gives users a good understanding of why the site exists and what its mission is.
-
Login Page - The login page has the front-end of login feature. This page is the base for future implementation of user-registrations.
- Registration/Login - In the future users can register for an account and login.
The wireframes for this project were developed using Balsamiq.
-
Desktop Wireframes:
![About page]
-
Mobile Wireframes:
A simple clean design with easy to use buttons handles the navigation throughout the app.
- All images used are from pexels ,freepik and are free to used for edcational purposes.
- attributes
Google Fonts was used to select the fonts.
-
The main font used throughout the site is '---------' which belongs to the sans-serif typeface family. The font is clean and elegant, making it a good choice for web design.
-
We have used the '---------------' font for titles and headers all over the site.
-
Sans Serif is set as the fallback font if for any reason the main fonts aren't being imported into the site correctly.
- HTML
- CSS3
- JavaScript
- Python
-
hover css
-
animate.css
-
Am I Responsive? was used to create the mock ups.
-
Balsamiq was used to create the wireframes.
-
Bootstrap 5.1.3 was used to contribute to responsiveness and styling of the site.
-
Font Awesome was used for the icons.
-
Git was used for version control ad to push code to GitHub.
-
GitHub was used to store the repository.
-
GitPod was used as the IDE to develop the project.
-
GitHub Projects was used to manage the workflow of the project.
-
Google Fonts were used to select fonts for the site.
The following steps were followed to deploy the project to a live website in GitHub, using Github Pages:
- Ensure changes have been added and commited in Gitpod and pushed to GitHub.
- Login to GitHub.
- Locate the relevant repository on GitHub. This is the repository for...
- At the top of the repository, locate the 'Settings' link and click on this.
- On the left of the page, under Options, scroll down until you get to Pages and click on Pages.
- Under Source, in the first box called "None", click the dropdown and select "master".
- Then select Save.
- The page will refresh and you will see a link above the Save button. This is the link to the live site. Note that it may take a few minutes for the site to be deployed.
- There are no differences between the deployed version and the development version of this project.
The repository can be forked on GitHub, this creates a copy of the repository that can be viewed or amended without affecting the original repository. This can be done using the following steps:
- Login to GitHub and locate the repository as before.
- At the top right of the repository (under your avatar) locate the Fork button and click this button.
- There should now be a copy of the repository in your own GitHub account, which you can amend.
A clone of the repository can be made, which will create a local copy on your own computer. Changes can be made to this local copy and it will not affect the original repository. Follow these steps to clone the Sunrise Yoga repository.
- Login to GitHub and locate the repository as before.
- Click the button called "Code".
- Under HTTPS copy the link provided, in this case ().
- Go to Gitpod or whichever IDE you are using and open the Terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone' followed by the url you copied in step 3.
- Press "Enter" to create the local clone.
- You can refer to the GitHub documentation for more detailed information on the above process here.
- Quiz content from Earth day quiz
- Quotes from david attenborough
- Content regarding ways to save our planet modifed from several websites
- Fonts used are from Google Fonts
- Icons used are from Font Awesome
- Hero image used from Pexels
- importance of tree planting 30s video fromyoutube
- Logo and banner designed using: freepik
- Hackathon banner designed & modified fromcanva
- Images of------ in the ----- section are from google Commons
- Illustrations from UnDraw
We thank Code Institute for organizing this Hackathon.
- All the Team members
- our Facilitator Dave