Image credit: https://ui.dev/amiresponsive

The main objective of this website is to introduce yoga and meditation into people's daily lives since the benefits are many. The website will introduce all the benefits in summarized text and encouragement to sign up for a newsletter where they will be provided with more information on yoga and meditation. The website will start by motivating the visitor to want to know more about yoga and meditation and how it can improve their overall health for example lower stress, reduce anxiety, improve sleep, etc.

Navigation Bar

The top of the website consists of a responsive navigation bar where the logo is placed on the far left and the menu on the right. The logo was made with the help of Looka, a website that generates logos based on input about the brand such as color, sentiment, and branch. The menu bar consists of ”Home”, ”Inspiration” and ”Contact”, all of them being links for easy user navigation.

Benefits of yoga and meditation

In the Home section the user can read about the benefits of practicing yoga and meditation where the main goal is to provide facts and information, the benefits of yoga and meditation on its own, and as a combination for greater health. Each text section is intentionally made short with relevant key points to inspire the user/reader to keep their interest and the continuation to explore the website.

The website was successfully deployed via GitHub by the following steps:

1. Login to Github.com
2. Enter the ”Settings” tab via the ”Your Repositories” page
3. Scroll down to ”Pages”
4. Select ”Main branch” for deployment

Yoga Focus deployment link:

https://victoria-wirf.github.io/yoga-focus/

W3C & Jigsaw validator

Testing of the Yoga Focus HTML and CSS code has successfully been made on C3W and Jigsaw and can be found via the following links:

Accessibility testing was also successfully completed via:https://websiteaccessibilitychecker.com/checker/index.php

Grammar and spelling testing came out successful with: https://app.grammarly.com/

To esthetically showcase the Yoga Focus website on different screens the following website was used :

https://ui.dev/amiresponsive

The image is on top of the README page.

Guidelines and recommendations on how to write a README have been derived from the Code Institute template: https://github.com/Code-Institute-Solutions/readme-template

Codetheweb

The main idea of the Yoga Focus website was inspired by the codetheweb website which has an organized and fun coding style that I personally like. https://codetheweb.blog/steps-to-creating-a-website/

Content

The facts and information about meditation is inspired by the following websites: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3193654/

https://osteopathic.org/what-is-osteopathic-medicine/benefits-of-yoga/#:~:text=Yoga's%20incorporation%20of%20meditation%20and,sharpens%20concentration%2C%E2%80%9D%20says%20Dr.

Images

All images are derived from the following website: www.pexels.com  Some images used were too large or needed some adjustment and cropping and this was successfully managed via: https://tinyjpg.com/ ( compressing images, hero image)

Fonts

The fonts used are derived from the Google fonts library via the following link: https://fonts.google.com/

A color generator was used to find a suitable color scheme for the Yoga Focus website. The focus was to find a color that exuded calm, peace, and relaxation. The hero image with a person sitting in a yoga lotus pose was used as a reference to find the right colors. The color generator can be found on the following website.

https://coolors.co/