in nature = be in nature.
Ix xxxxxE = IE (Ireland)
Like myself, many are connected all the time, living a digital life, being sedentary. But what if everyone knew how easy and accessible is nature, the trails. How good it feels, how much their health can improve. So that's the website, a gallery of easy places to go made by a sedentary digital person.
In naturE is direct to the point with minimal information of places like in a restaurant menu. It is a "hybrid" blog-style website with an overview of places I visited and can recommend or not, primarily for sedentary or starters.
The colors follow a rust color pallet https://colors.dopely.top/palettes/o4cMvI0G7sX that reminds us of nature, vegetation, forest.
-
Navigation Bar
- Featured on all four pages, including links to the Home page and Counties. It is identical on each page to allow for easy navigation.
- This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
-
The landing page image
- The landing includes a photograph with text overlay to catch the attention to the name and have a modern minimalistic design.
- The background image has a transparency overlay with the same color as the body to be consistent and look the whole as one.
-
Mental Benefits section
- This section will allow the user to see some benefits the contact nature can provide.
- It has a rounded background as pills, each one leading to a healthier life.
-
The Footer and Links
- The section over the footer includes links to the counties, so the user will learn where he can go if gets lost down the page.
- The footer has an email contact, developer name, and year.
-
Counties Pages
- The counties pages will provide quick pieces of information and an overview of attractions.
- This section is valuable to the user as they will be able to easily see what is available like in a restaurant menu.
- More images of each place
- A succinct text of each place
- Page with apps and websites recommended
In the real mobile test, it had a bug where the right side had a big empty space. It was fixed by adding overflow-x: hidden; for the HTML and body elements in CSS.
- HTML
- No errors were returned when passing through the official W3C validator
- CSS
- No errors were found when passing through the official (Jigsaw) validator
Not found to the date.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - https://fpatrick.github.io/codep1/
- Mental health benefits text for the home page was taken from https://www.mind.org.uk/information-support/tips-for-everyday-living/nature-and-mental-health/how-nature-benefits-mental-health/
- Some information about trails was taken from https://.alltrails.com
- All the icons were taken from Font Awesome