YogaMoves is an Online Studio where people find the power to grow and achieve all of their fitness and wellness goals.

You can find the live site here

• As a user, i want to be able to understand the functionality at first look
• As a user, i want to be able to know why i should want to be a member
• As a user, i want to be able to easily Sign In
• As a user, i want to be able to get in contact with the YogaMoves Studio

• The intended user is anyone who wants to find the Practice Yoga

• Create a website that makes it clear why they would want to join our classes
• Make it easy to find the best class

• Verdana is the font used for the body (with sans serif as fallback) because it is easy to read and looks elegant

Home page images Source: Freepik Instructors images in about page source Alo Moves

I wanted to elicit a feeling of Motivation to start a new lifestyle and Yoga routine

I was inspired by Alo Moves

During the planning stage, I used 2D print to create wireframes for each page, and plan the structure of the site so I can have a clear idea about my goal design.

• Navigation Bar

  • Featured on all four pages, the full responsive navigation bar includes links to the Logo, Home page, Classes page and about page plus a button in the right side linked to the Sign In pag. It is identical in 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 allow the user to see exactly which location this site would be applicable to.
  • This section introduces the user to Love Running with an eye catching animation to grab their attention

• Discover What moves you Section

  • This section will allow the user to discover the diffrent types of yoga.

• contact page

  • This page will allow the user to easily contact a responsible in YogaMoves.

• Instructors section

  • This section allows the user to discover the available instructors in yogamoves.

• Explore our classes section

  • This section allows the user to compare between the available classes decide wich type of yoga he needs.

• Newsletter section

  • This section allows the user to subscribe in Yogamoves newsletter to stay in touch.

• The Footer

  • The footer section includes links to the relevant social media accounts to YogaMoves.

• The member Page

  • This page will allow the user to register in YogaMoves comunity to start their Yoga journey.

• HTML5
• CSS3

• Font Awesome icons for social media links
• Google Fonts to import 'Fjalla One' and 'Cantarell' fonts.
• GitHub as repository host
• Visual Studio Code to mock up functioning wireframe
• Gitpod to develop and commit to github
• GitHub Pages to deploy the site

No errors were returned when passing through the official:

• CSS Validator
• HTML Validator

Throughout the project i have tested the code with Lighthouse with good results but I stil have to improve the performance.

• Tested in responsinator

• I have gotten positive feedback on both usability and aesthetics from friends, family and professionals testing the site on their devices.

Result: Works as intended

• Pages-build-deployment cancelled for some commits.

• The site was deployed to GitHub pages by the following steps:
  1. Log in to GitHub and select Future Fuels repository.
  2. Navigate to Settings tab.
  3. Navigate to Pages from the left-hand menu.
  4. In Source select "Deploy from a branch".
  5. In Branch select "main".
  6. Select Save.
  7. After several minutes the live site was deployed

• Text content was written by me but I was inspired by AloMoves

• The logo is made by me Using Html and CSS.

• All the home page images are from Freepik.

• Instructors Images are from aloMoves.

• any other pictures are from freepik.