• Wave surf, yoga & eco retreat is a site for like-minded people looking for a special retreat to enjoy surfing, yoga and meditation.
• In unique surroundings in Portugal.
• This is an eco-retreat set up by the founders Daniel and Sarah Smith.
• The site is targeted towards adults between 25-50 who are interested in self-development, personal growth, and healthy lifestyle.
• Often active, adventurous, environmentally conscious, and interests in sustainable travel option.
• The is website offers a range of interest including surfing, yoga, meditation and healthy sustainable food.

Navigation Bar

• Featured on all four pages and the thank you page.
• The full responsive navigation bar includes links to the Logo, Accommodation, Retreat, Kitchen, and Book page and is identical in each page to allow for easy navigation.
• The logo links back to the home page in the header and the footer.
• 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 hero image with text overlay to allow the user to see what the surfing location looks like and the country it is in.
• There is a btn to book the retreat overlaying the hero image.

About section

• Explains the story behind Wave retreat and why you would want to stay here.
• It also introduces the founders Daniel and Sarah Smith. With there background and experince.

Package section

• This are is to show some of things included in the package. Accommodation, Surfing and yoga. using images to show examples of each area.
• Also explaining skill levels required for activites.

Kitchen

• Full width image showing the loacation where guests will eat.
• With overlay text and link to sample menu.

Footer

• The footer section includes links to the relevant social media sites for Wave.
• The links will open to a new tab to allow easy navigation for the user.
• The footer also includes the loacation address and contact details.

Accommodation page

• An overview of the accommodation available at Wave retreat.
• Explaining the design and how many people can sleep.
• Explains in detail the interior and the fascilities available in an unordered list.
• Also included are the check in and check out times.

Retreat page

• This page explains the diffrent options available at the retreat with surfing, yoga and mediatation.
• It starts with a full width scrolling image of a girl surfing at sunset.
• With Text over lay explaining the page.

• Bellow are the different sections of surfing, yoga and meditation.
• Exlplaining the different levels beginner, intremediate and advance options.
• Daily schedule added to see how each day would look like for the guests.

• Finnished with a full width yoga image on the beach before the footer.

Kitchen

• Full width hero image showing where guests will eat.
• This has a text overlay.

• Bellow this an explanaition of how the dishes are inspired ad preppared.
• With an unordered list of a selection of options for breakfast buffet and dinner buffet.
• This is the page that is linked to the landing page.

• Next is the gallery of 8 images as example dishes.
• With a transition on each zooming in slightly.

Book

• The booking page has a full width hero image of a group of people jumping on the beach in the sunset.
• The booking form is a overlay.

• The user will be asked to submit their full name and email address.
• Then taken to a thank you page.

• I have tested this website using google dev tools and inspected each page.
• Checked for different screen sizes, 1344px, 1200px, 944px, 704px and 544px screens.
• I ran into problem with navigation bar and the landing page view in the about section at 544px.
• But managed to fix this by reducing the font size in navigation bar and changing the collum in the about section.
• The look and feel of website works really well on diffrent browsers and screen sizes.
• I changed the gallery to work on each screen size so it was visually appealing.
• Also adjusted the padding on pages for each screen size.
• All links throughout the website work and help navigate the guest through the site to eventually contact and book.
• Once the form is filled in they are taken to a thank you page.

HTML

• No errors were returned when passing through the official W3C validator.

CSS

• No errors were found when passing through the official (Jigsaw) validator.

Accessibility and performance

• Using lighthouse in devtools I confirmed that the website is performing well, accessible and colors and fonts chosen are readable.

Text

• The text for the all pages written by Kristian Smith

Code

• The code to make the booking form was taken from Code Institute [Love Running] (https://github.com/KristianDsmith/love-running)

• The code to make the package section on landing page taken from video by. Jonas Schmemedtmann

Icons

• The icons in the footer, landing, kicthen, package and accommodation pages were taken from [ionicons.com] (https://www.ionicons.com)

Google Fonts

• Google fonts were used to import the 'Rubik' font into the style.css file which is used on all pages throughout the project.

• The photos used on the landing, accommodation, retreat, kitchen, book and thank you pages are from this Open Source site pexels.com

• 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://kristiandsmith.github.io/wave-project-1-official/index.html