Find peace within yourself with yoga.

At Yoga City you receive high-level guidance. You will be pampered and challenged at the same time. You will learn which feelings you have and how to listen to those feelings. You are completely focused on yourself and on the other hand we are more connected than ever.

Come and connect with us.

Live website

User Story 1: Inexperienced people who want to start practicing yoga.
User Story 2: Advanced yoga practitioners who want more than just yoga.
User Story 3: People who want to be spiritual connected.
User Story 4: People who want to have more flexible muscles.
User Story 5: People who want to find more inner peace.
User Story 6: People who want to start learning more about there feelings.
User Story 7: People who want to be physically and mentally challenged.
User Story 8: People who want to find peace within thereselfs.

This website is for people in Noord-Holland who want to practise yoga within a save environment. A beautiful location where you can feel connected to yourself and others. The yoga lessons are available every workday at different locations trough Noord-Holland. The three available locations are bigger cities in Noord-Holland.

The website is easy to read and easy to use. The website provides basic yoga information, the available locations and a sign up form. The sign up form is a very clear form with radio buttons for the preferred yoga day and location. Every location has his own Google Map with the yoga location in the middle. Every page has a link to the sign-up form.

Every page has the same fixed header.
Every page has the same footer.

index.html
The page starts with a yoga image to get in the right yoga mood.
Underneath the image will all the general information about Yoga City with links to the three locations.
Followed by basic yoga information and yoga history.

alkmaar.html
hoorn.html
zaandam.html
All three pages with the same structure.
Starting with three yoga images.
Followed by the location information and a sign-up link.
Underneath a full width Google Map with the location name in the middle.

signup.html
The sign up page will have a yoga image on the background.
On top of the image will be the sign-up form.
With radionbuttons for every yoga location and radiobuttons for every yoga day.
Followed by a name and email text field and a button for sending the form.
When the form is send, you will be directed to the Thank You page.

thankyou.html
This page will have one big Thank You image.

Header:
Same fixed header on every page.
White background and golden title with menu.

Menu:
On large devices: the menu items will be all lined up horizontally within a golden rectangle.
On medium and small devices: the menu items will be in a hamburger icon.
The active page will have a grey border around the active menu item.
When the page Alkmaar, Hoorn or Zaandam is selected, the active border will be around the Location menu item.

Footer:
The footer is white with grey icons, all lined up horizontally.
On small, medium and large devices, the icons will always stay all horizontally.

All Pages:
White background, text in dark grey, titles in gold.
Big yoga images. Full width or side by side.
With a sign-up link, which will link you to signup.html.

Form:
See trough form with five radio buttons for each week day, all lined up vertically.
Followed by three radio buttons for each location, all lined up vertically.
Two wide required text fields with name and email address.
When the send button is pressed, it will lead you to the thankyou.html page.

Maps: Each location will have his own Google Map with his own Google Maps API Key and his own JavaScript form.
The location name in the middle of the map.

All text with font family: 'Noto Sans JP'.
All text with font color: #666666 (dark grey).
All titles with font color: #bf9b30 (gold)
Header image quote text in font color black.

Header
The uppercase title will be on the left in the color gold with text shadow #666666 (dark grey).
The navigation menu will be horizontally on the right on large devices.
The active page will have a grey border around the active menu item.
When hover over a menu item, that item will get a grey shadow at the bottom.
When the locations menu item is pressed, there will be a collapsable menu with the available locations.
The collapsed menu will have the location names vertical, dark grey text with a white background.
On small and medium devices the menu will become a collapsable menu or hamburger menu.
The hamburger menu will have a golden border.

Footer
Starting on the left with an email icon, which will direct you to your email program.
Next the phone icon, which will directly start calling.
Followed by the Facebook, Twitter, YouTube and Instagram icon, which will lead you to the right external webpage.

Home page / index.html
Starting with a big image, full width on all devices.
When hover over the big image, there will appear a text quote in the top center in black.
Followed by a white block with text.
The titles and the sign up link are color gold.
The sign up link will link to the sign-up page.
The sign up link will change to color silver when hover over.
And at the bottom here will be four images.
On large devices there will be two images, full width. And then again two images, full width.
On medium and small devices there will be one image, full width. Four images underneath each other.

Locations
Each location will have the same build up.
Starting with three images.
On small and medium devices the three images will be full width underneath each other.
On large devices there will be one image, full width. Underneath that image will be two images next to each other, full width.
Followed by a white block with text.
The titles and the sign up link are color gold.
The sign up link will link to the sign-up page.
Next to each title will be a playful icon.
At the bottom will be a map, full width, with a marker with the location name.
The map will be zoomed in and the area surrounding of the yoga location is clearly visible.
The title and location text will be in big white letters for good visabilatyin, the background of the marker will be color gold.
The golden background will have a little tip underneath, so it looks like a text balloon.

Sign Up
One big image will fill the page, full width.
On small and medium devices the form will be place in the center.
On large devices the form will be place on the left.
The sign up form will have the color dark grey and is a little bit transparant so you can still see the image.
The title will be color gold with next to the title a playful icon.
The rest of the text will be white.
Three verticaly radio buttons for each location.
The locations are in alphabetical order.
Automatically the first selectable radiobutton is selected.
Followed by five verticaly radio buttons for each day of the week.
Automatically the first selectable radiobutton is selected.
Underneath the radio buttons will be two text input field underneath each other for the name and e-mail address.
These are required field.
The borders will be color white, with hoover over effect to change them to color gold.
When the send button is pressed and the required fields are not filled in, the borders of the required text fields will change to red with a red cross at the end.
At the bottom will be a submit button with white text and the background color gold.
With hoover over effect to change the text color to gold and the background color to silver.

Thank You
This page is only accessible when the sign-up form is send.
No menu item will be active on this page.

The following wireframes were created using Balsamiq to design the website layout options:
Small devices
Medium devices
Large devices

The webpage consists of the following features:

Bootstrap form
The sign-up form uses Bootstrap form features.
Radio buttons, to choose the preferred options.
The form has required text fields for the name and email address.

Bootstrap Icons
All grey icons are used in the footer for social media, phone and email, linked to the right place.
In the fixed header is a home icon, linked to the index.html.
In the fixed header is a hamburger icon only on small and medium devices.
Next to a lot of titles is a playful icon, they are not linked.

Bootstrap Button
The sign-up form uses a Bootstrap button, which is styled with CSS.

Bootstrap Navbar
Makes the locations button a drop down list.

Google Maps
Each location has his own API key and his own JavaScript file.

Text Quote
JavaScript file for creating a text quote on top of the header image.

Required form items
JavaScript file used for the required parts of the sign up form.

HTML5 for the structure of the website
CSS for the styling
JavaScript for the Google Maps, header image quote and required fields of the sign up form.

Balsamiq for the mockups.
Bootstrap for the collapsible navbar, button and the footer icons
Google Fonts for the font family 'Noto Sans JP'
Gitpod was the IDE used to write the code for this website
GitHub for version control

HTML Validator for testing the HTML code
CSS Validator for testing the CSS code
Google Chrome Developer Tools for testing different device sizes

Responsiveness
Every page was tested for responsiveness on small, medium and large devices.
Through the Google Chrome Developer Tools I tested the following types:

• iPhone 5/SE (portrait: 320x568 & landscape: 568x320)
• Galaxy S5/Moto G4 (portrait: 360x640 & landscape: 640x360)
• iPhone 6/7/8 (portrait: 375x667 & landscape: 667x375)
• iPhone X (portrait: 375x812 & landscape: 812x375)
• Pixel 2 (portrait: 411x731 & landscape: 731x411)
• Pixel 2 XL (portrait: 411x823 & landscape: 823x411)
• iPhone 6/7/8 Plus (portrait: 414x736 & landscape: 736x414)
• iPad (portrait: 768x1024 & landscape: 1024x768)
• iPad Pro (portrait: 1024x1366 & landscape: 1366x1024)

This site was also tested in Responsinator.

Header
The header is fixed and responsive to small, medium and large devices.

Navigation menu
The links in the navigation menu are linked to the right internal webpage.

Footer
In the footer the social media links will be found, which are external links. There are also contact icons, which will can be used to get in contact right away.

Sign-up form
The sign-up form has required attributes which are needed before submitting the form.

HTML validator tested on the following pages: index.html, alkmaar.html, hoorn.html, zaandam.html, signup.html, thankyou.html
CSS validator tested on the following page: style.css

I started working on this project in Repl.it because I worked on it from different devices. Every time I was on my own laptop I copied everything to GitPod and pushed it to GitHub. Like this I also always had an extra backup, when needed.

This website contains the following html pages:

• index.html
• alkmaar.html
• hoorn.html
• zaandam.html
• signup.html
• thankyou.html

• assets

• css
• images
• js
• mockups
• screenshots

After this page is checked by the examinators, I will make the locations pages private in GitHub for the protection of my API key's.

First you need an account on GitHub which you can download from here.

1. Click Create a New Repository.
2. At Repository template you can select a template, if you have one.
3. At Repository name you can choose the name for you new repository.
4. At Description (optional) you give you repository a decription.
5. Next you can choose if you want a Public or a Private repository.
6. Initialize this repository with a README you click this checkbox if you like to create a README file.
7. Click the green button with Create repository.

To create a branch link you have to go to your repository in GitHub and follow the following steps:

1. Click on settings.
2. Scroll down to GitHub Pages.
3. At Source the button stands on None, click it and select master branch.
4. Your site is ready to be published at (your branch name).

When you make some changes in GitPod you can push them to GitHub.

1. In GitPod click on Source Control: Git.
2. In the textfield you can give your changes a message name.
3. Underneath the line CHANGES, you see all the changes that have been made. Press the + button behind the page name which you want to be pushed. You can also press the + button next to the line CHANGES, to push all the made changes.
4. Klink the Commit.
5. On the right, press the GitPod logo with the name Pull Request.
6. A yellow field appears. Click the blue button with Push.

To start you need to have a Google Account and start at the Google Cloud Platform Console.

1. On the top of the Google Cloud Platform Console, next to the text Google Cloud Platform you see a drop project drop down menu.
2. When you click it, you will get a pop up with all your projects, if you have any.
3. Click on New Project.
4. Fill in your Project Name and click Create.
5. Go to your new project and click on Credentials.
6. Go to Credentials in APIs & Services.
7. Click on Create Credentials and API Key.
8. Copy your API Key code and paste into your website.

The full content is made up and written by me.

The photos used in this website were obtained from Unsplashed.

Everything I learned from the Code Institute Fullstack Web Development course.
I used W3Schools for extra general coding knowledge.
I used the Google Maps site to create three API key's and for general information.
I used Bootstrap for info about forms and offcourse to use the icons, buttons and navbar.