Moon Child Yoga is a website made to inspire users to dedicate time for keeping their own well-being using Yoga practices, Massage and Reiki. There is an option to book a date and a type of Yoga, and a group yoga class which helps more people connect while learning how to balance, stretch and breathe. You can book Online Yoga class or a class in person, it can be one-on-one or a group yoga class. Massage is only available in Poland at the moment. 'Moon Child Yoga' is a pseudonym for Dominka Urbanska, a yogi, reiki master and a massage therapist.
Image design made with Canva Website.
The original idea included already known logo and the images wrapped around with text provided all by Dominika. Wireframes are made in Balsamiq.
The colour scheme for the website was chosen in agreement with Dominka. Her logo was in dark colours and with blue representing night and deep water, while her photos are pink and purple which helped decide on the shades. Good use of website called Coolors when choosing colours. The image of the color palette is below.
The Font for the website is called 'Playfair' and was taken from Google Fonts and the icons in the footer and payment icon that directs to PayPal link were taken from Font Awesome
The Homepage is focused on the inspiration this Yoga teacher found while exploring Asia, India and learned about the practices she teaches today, presented with some photos. The Booking form has many options like different types of Yoga classes conducted mostly online. The Gallery is oriented towards some of the Asanas(yoga poses) that Dominka mastered as a teacher and some more information about her skills.
Navigation bar which navigates to "Home", "Book Here", "Gallery - About" with one click, is placed in the middle of the page, under the logo. The links to social networks like Facebook and Instagram, and a middle button to navigate to top of page when you scroll too far down to get back on top with a single click. "Back to top" button available on all pages.
Homepage contains text about the beginnings of Dominika's yoga practice, as a student, and some photos showing certificates and people involved in her educational part of the journey to becoming a yoga teacher. This is valuable to the user so user can relate to someone learning and finding her passion.
Booking form contains a poster of Dominika and is used to book a yoga class or massage class. This is of value to the user while booking a class online or in person and can make a direct payment through PayPal. The layout for the form is intentionally including a lot of space between so the form and the image are emphasised better.
Gallery contains images of yoga poses in many different places all masterfully presented by Dominika and related text under about her career before and after Yoga teacher training, her skills and education. This is of value to the user because of yoga poses showing skills and abilities of this yoga teacher, and her learning path.
Footer contains Facebook and Instagram links, which both open in a new tab, and a middle link for getting back to the top of the page towards navigation. This is of value to the user because it provides social media links where we could get in touch with this yoga teacher and see more of her abilites and skills that make her who she is. The middle button "Back to top" is valuable for accessing navigation with one click.
Booking many types of Massage is one of the next steps in making this website. The idea is to own her own yoga studio and have space for massage and options of many types of massage since, at the moment, Dominka is attending University in Poland to improve her massage skills. Also, adding more informations about Reiki to the page is in plan for the future of this website.
Tested the webpage using the Lighthouse in Chrome Browser and the image below shows the results
.
Fixed width of webside and found a solution on Stackoverflow.
Firefox testing - the borders around images are made originally white and grey in Chrome Browser,borders on homepage appear dark/black in Firefox Display and while scrolling over the content the Firefox Browser 'blinks' (blackens the whole screen for a second) in-between scrolling.
IPhone 6 display showed no issues or irregularities.
IPad display showed the webpage without issues or irregularities.
HTML
CSS
There was no bugs in making this webpage.
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://totalnomartina.github.io/moon-child-yoga/
If you would like to make a local copy of this repository, you can clone it by typing the following command in your IDE terminal:
git clone https://github.com/totalnoMartina/moon-child-yoga.git
Alternatively, if you use Gitpod, you can click here to generate a new workspace using this repository.
In making of the webpage, Dominika, the Yoga teacher, provided all of the informations in text and all images. Logo was designed by her, too. As she already is teaching yoga and having her social account that represents her yoga teachings, she had many photos. Text was taken from CV and cover letters. She helped a lot in creating the booking form page. Image of Dali Dhamma was taken from his website.
While exploring options that make a good website I thought the idea of a button that brings you back to top of page when you scroll far down is a great one, I found out how to go about that on the link here. Barbara Radovic, from Croatia, helped with word-proofing the text.
Gallery is made with an inline-flex property which I was inspired by this link
The entire content was provided by Dominka, this amazing yoga teacher, she had cover letters and CV samples written, and many images were taken by her friends all around the world. The form was helped to be created by Dominika in text, offers, prices and structure.
All images are provided by Dominka Urbanska and I was given permission to use it on this site. There is an image of Dali Dhamma, yoga teacher which was taken from his website.