BodyMindSoul

THE FIVE TIBETAN RITES TOUR

Welcome to the BodyMindSoul website.

The BodyMindSoul is a website for THE FIVE TIBETAN RITES TOUR event held for people who want to try the health benefits of the Five Tibetan Yoga Exercises while also exploring the Ancient Mystery story of the Fountain of Youth.

Upon accessing the website users will find among 3 pages all the necessary information they'll need to join in on the tour as well as the opportunity to exercise at home:

• About
• Ancient Mystery & Sign Up form
• Exercise at home

CONTENTS

• BodyMindSoul
  • THE FIVE TIBETAN RITES TOUR
  • CONTENTS
  • USER EXPERIENCE UX
    • USER STORIES
    • WIREFRAMES
  • SITE STRUCTURE
  • DESIGN
  • FEATURES
  • EXISTING FEATURES
    • HEADER & NAVIGATION
      • TITLE :
      • NAVIGATION BAR :
    • HERO IMAGE & COVER TEXT
    • INFORMATION SECTION
    • ANCIENT MYSTERY STORY
    • SIGN UP FORM
    • AT HOME PAGE
    • FOOTER SECTION
  • FUTURE FEATURES
  • TESTING
    • CODE VALIDATION
    • BUGS AND FIXES
      • HTML
      • CSS
      • LIGHTHOUSE TESTING
        • Main page
        • Mystery story and Sign up page
        • Exercise at home page
  • DEPLOYMENT
  • CREDITS
    • CONTENT
    • MEDIA
  • RECOGNITION

USER EXPERIENCE UX

USER STORIES

• As a user i want to understand the purpose of the site when accessing
• As a user i want to be able to navigate through the website easily
• As a user i want to clearly understand the information provided on the website
• As a user i want to find out more about yoga benefits for metal and physical health
• As a user i want to have a reason to return to the website without attending the event
• As a user i want to connect with the BMS team on social media
• As a user i want to be able to contact the BMS support team for additional queries

WIREFRAMES

The WIREFRAMES for MindBodySoul were created in Balsamiq, initially for wider viewports, to help visualize the project. They slightly differ from the website's final look due to developements and new ideas during creation.

Jump to Top

SITE STRUCTURE

The BodyMindSoul website presenting THE FIVE TIBETAN RITES TOUR has three pages:

• ABOUT (which is the default loading page),

• ANCIENT MYSTERY & SIGN UP! (which displays a short story and sign up form) and

• EXERCISE AT HOME (which presents and explains the exercises).

Jump to Top

DESIGN

• TYPEFACE

The chosen font for the website was Joan, which falls back on serif. Choice was made due to the fonts uppercase version reflecting an antic style and "carved in stone" effect complementing the website's aesthetics togteher with it's lowercase form.

• COLOUR SCHEME

The colour scheme choice was partly based on the main page's hero image keeping a common attribute throughout the whole website. Purple, among other things, is associated with mystery. Lighter shades of purple are often used to soothe or calm a viewer. Darker blue and dirty white were used for providing contrast and ease readability.

Jump to Top

FEATURES

EXISTING FEATURES

HEADER & NAVIGATION

TITLE :

• Placed at the top left corner of the page it displays the name of the event: THE FIVE TIBETAN RITES TOUR which also links to the top of the page.
• Clearly states the reason of the website/event.

NAVIGATION BAR :

Contains three links leading to three separate pages of the website:

• ABOUT page is holding all the required information about the trip: location, dates, information, health benefits.

• ANCIENT MYSTERY & SIGN UP page has two sections

  • ANCIENT MYSTERY section displays the Ancient Mystery story about the Fountain of Youth as presented by Peter Kelder in his book: Ancient Secret of the Fountain of Youth
  • SIGN UP section is a form for users who want to join in on the tour.

• EXERCISE AT HOME page lists all five yoga exercises with step by step explanations and images

HERO IMAGE & COVER TEXT

• HERO IMAGE is for setting the mood and color theme of the website
• COVER TEXT provides with clear information of the purpose of the event

INFORMATION SECTION

• WHAT section displays descriptive information on what the trip is all about.
• WHERE section provides information on the whereabouts of the trip.
• WHEN section informs the user of the times and attendance options of the tour.
• WHY section empowers the purpose of the trip while also presenting the health benefits of these exercises.
• HOW section provides information on what to expect from this trip and how to get ready for it.

ANCIENT MYSTERY STORY

• ANCIENT MYSTERY
  • holds a short description and explanation of why THE FIVE TIBETAN RITES is considered to hold the secret of The Fountain of Youth
  • the story contains a link that will lead to the website for Peter Kelder's book The Ancient Secret of the Fountain of Youth displaying in pdf format.

SIGN UP FORM

• SIGN UP
  • form for collecting data from people who would like to participate in the event
  • requires details such as: Name, Email Address, Phone number, Date of Birth, Attendace period confirmation
  • has a MESSAGE US section where additional questions/queries/concerns can be raised

• SIGN UP FORM CONFIRMATION
  • upon submitting the form a confirmation message pops up regarding the form submission
  • the page will have all the features presented in the header and footer sections

AT HOME PAGE

• EXERCISE AT HOME PAGE
  • opens with a hero image and a quote about the relation between exercise and health

* gives an opportunity to people who are unable to attend the journey but would be interested in exercising at home
* lists all 5 tibetan rites in order with step by step explanations and images

FOOTER SECTION

• FOOTER
  • provides users with the opportunity to visit our social media sites and listen or listen to a wide selection of our calming playlists
  • displays all necessary contact information for people who want to get in touch with the team
  • contains a "jump to top" feature which is fixed positioned on the page

FUTURE FEATURES

• Organizing tours to different parts of the world
• Online yoga classes multiple times a week
• Video guides for: breathing exercises, meditation, sound healing and such.

Jump to Top

TESTING

• Website has been tested among the most commonly used types of browsers, such as: Google Chrome, Firefox, Safari and Microsoft Edge.
• Website's responsive design was tested for all common screen sizes (Iphone SE, Iphone 8 Plus, Iphone XS, Iphone SE 2nd gen, IPad Mini, Laptop, Desktop) with Developer Tools and Am I Responsive?

CODE VALIDATION

THE FIVE TIBETAN RITES TOUR website has been tested with both [W3C Validation Service](https://validator.w3.org/) and [W3C CSS Validation service](https://jigsaw.w3.org/css-validator/)

BUGS AND FIXES

HTML

• ABOUT PAGE

  • test

  

  • fix

  

  Since a heading was not needed in this section, as advised by the validation service, the 'section' element was replaced with a 'div' element instead.

• ANCIENT MYSTERY & SIGN UP PAGE

  • test

  

  • fix

  

  This was an oversight which occured while deciding between having separate labels for First Name and Last Name or having just one label for both entries. Label 'for' attribute was amended to match the first text input 'id'.

• EXERCISE AT HOME PAGE

  • test

  

• FORM SUBMISSION PAGE

  • test

  

CSS

• CSS file

  • test 01

  

  • test 02

  

  • fix

  

  The first phase of the validation highlighted that i have used the 'size' property that does not exist and advised for the 'resize' property to be used. Once I made the suggested changes and ran the code in the CSS validator again I saw that the issue has not been fixed and I have instantly realized that the property I initially meant to use there was the 'font-size' property.

LIGHTHOUSE TESTING

Main page

• mobile test

Mystery story and Sign up page

• mobile test

Exercise at home page

• mobile test

Jump to Top

DEPLOYMENT

• Deploying the website

The website was deployed to GitHub pages, steps are as follows:

1. In the GitHub repository navigate to Settings tab and select.
2. On the left side navigate to and select Pages.
3. Find Source then select branch as main and save.
4. Once done, a link is provided by GitHub for the published site along with a confirmation message stating "Your site is published at..".

• Forking GitHub repository

Forking a repository means to create a copy which allows to freely experiment in making changes without affecting the original project.

1. On GitHub navigate to the main page of repository
2. Find and click fork in the top right corner

• Cloning GitHub repository

Cloning repository creates a local copy on the computer for the remote GitHub repository.

1. On GitHub navigate to the main page of repository
2. Find and click code in the top right corner
3. Copy the URL for the repository
4. Open Git Bash
5. Change the current working directory to the location of your choice
6. Type git clone, and then paste copied URL
7. Press ENTER to create local clone

Jump to Top

CREDITS

CONTENT

• Font implemented from Google Fonts
• Applied icons were taken from Font Awesome
• The colors were picked using Color Picker
• The color palette was made using color-hex
• Wireframes were created using Balsamiq
• Book description came from Google Books
• The Five Tibetan Rite exercises and relevant quotes were taken from Peter Kelder's book "Ancient Secret of the Fountain of Youth"
• Inspiration for form thank you message came from Form Builder
• Idea to split image on Exercises at home page came from Youtube video

MEDIA

• The images were taken from Pexels
• The Five Tibetan Rites explanatory images came from Peter Kelder's book "Ancient Secret of the Fountain of Youth"

Jump to Top

RECOGNITION

The website was created for Code Institute's Full Stack Software Development Diploma Course as the first Milestone Project.

Therefore, I would like to take this opportunity to show my appreciation and thanks to my mentor Precious Ijege and the whole of Code Institute for all the help and support received throughout the creation of this project.

Jump to Top