The project "Harmony-Pilates" aims to promote an active lifestyle, particularly targeting individuals who work from home and spend prolonged periods sitting. Pilates, a form of exercise that involves controlled movements, not only strengthens muscles but also provides effective body stretching and enhances mental stability. It emphasizes the significance of movement in leading a fulfilling life. With this website, my intention is to raise awareness and understanding of pilates among people. By exploring the website, users will gain insights into the importance of balance and vitality in their lives.
Visit the deployed website here → Harmony Pilates Website
- User Experience
- Design
- Features
- Technologies and Media
- Deployment, Fork and Clone
- Testing
- Acknowledgments
- I want to know about Pilates.
- I want the website to be responsive on my device.
- I want the information to be easy to find.
- I want the website to be easy to navigate
- I want to start with pilates.
- I want to contact the harmony pilates
The website consists of a 7-page website, with 5 pages navigable via the navigation bar, the sixth is privacy policy page, which is placed at the bottom of the page and the seventh being a customized page to inform the user that the content of the form has been submitted. The home page is the default loading page. The logo is in the top left corner and the menu is in the top right corner. This navigation bar the menu on small screen devices becomes a dropdown menu.
I create the wireframes with the Balsamiq Wireframes.
Wireframes
home page
about page
history page
videos page
contact page
- I used the color
#603F8Bas a primary color for the titles, in the navigation bar, for my logo and the icons in the bottom. - As a secondary color I used
#FCD8C5. This color appears when the user hovers over the menue navbar. - The navigation bar and the bottom have this
#E0FFFFcolor. - As text color I used
333333.
The font I chose to use is playfair-display from Google Fonts and as a fall back font, sans-serif.
This website includes 7 pages and all of them are responsive. They are: Home, About, History, Videos, Contact, Form Submitted und privacy policy. On each page we have:
-
A favicon.
-
A navigation bar
On the home page the user will find the message Welcome to Harmony Pilates! which clearly gives the idea of what the website is about. The image shows a Pilates mat set up for exercise, featuring harmonious colors.
This page comprises three images of a person who shows some pilates poses, under the images is a text what about pilates is.
On this page is a text about the history of pilates. The text is between two picturs.
Here, the user will discover two videos showcasing a person practicing Pilates amidst nature.
TOn this page is a contact form and two figures at the bottom of the page.
This custom page was created to show up after a form is submitted, whether it's a contact form. The user cannot access it from the navigation bar.
On this page is a text about the privacy policy of the page.
- HTML5 to create the website structure.
- CSS3 to style the website.
- Git for version control.
- GitHub to store files for the website.
- Balsamiq Wireframes to create the wireframes.
- Chat GPT to generate texts about the history of pilates.
- Google Fonts to import the font used on the website.
- Favicon.io to create favicon.
- Am I Responsive? to display the website image across various devices.
- Unsplash and [Vecteezy]https://de.vecteezy.com/ to get images.
- [pixabay]https://pixabay.com/de/videos/ to get videos.
- Log in to GitHub.
- Go to the repository for the project.
- Click the settings button.
- Select Pages in the left navigation menu under Code and Automation.
- From the source dropdown select main branch and root. Press the save button.
- The site has been deployed. It may take a few minutes before the site goes live.
- Log in to GitHub.
- Go to the repository for the project.
- Click the Fork button in the top right corner.
- Log in to GitHub.
- Go to the repository for the project.
- Click on the green code button and select if you would like to clone with HTTPS, SSH or GitHub CLI and copy the link below.
- Navigate to the directory where you want to clone the repository and open terminal.
- Type git clone into the terminal and paste the link you have from number 3. Press enter. This command will download the entire repository to your local machine.
Please refer to TESTING.md file for all testing carried out.
I would like to acknowledge:
- Tristan Ackermann, Davit Zakharyan and Ganeshdip Dumbare who are supporting me.
- Jubril Akolade - My Code Institute mentor.