Welcome to the Anytime Gym website!

A HTML5, CSS3 & Bootstrap website.

A live website can be found here

• The Strategy
• The Structure
• The Skeleton
• The Surface
• Features
• Technologies
• Testing
• Deployment
• Credits

• Users will get a positive and inspiring impression from the landing page.
• Users can easily navigate throughout the website to find the information needed.
• User will be encouraged to sign up for a membership throughout the website.

Users should have the ability to find all the information about the gym, its services and memberships on the website, as well as contact info and inspirational pictures.

They should find the website easy to navigate and allow them to gain knowledge about the gym as a potential member. They should be able to see information about the classes in terms of what level of cardio- and strength level.

The site should be clean and straightforward, and aim to point the user to easily become a member.

The site should provide the user with all the information needed about the gym and how to join to become a member. The site should also be easy to navigate through, and should be responsive on both desktop, tablet and mobile.

For the site owner

• I want to showcase the brand and feel of the gym through minimalistic and clean design.
• I want to showcase the feel of the atmosphere of the gym though inspirational pictures throughout the website.
• I want make it easy for users to find all the necessary information that they might be looking for.
• I want to make it accessible for potential customers to join the gym easily where ever they might be located on the site. (always linking to the sign-up form)
• I want to provide the gyms social channels, to connect with the gym in other ways.

For the site user

• I want to learn about what the gym’s philosophy is.
• I want to be able to see what the gym looks like.
• I want the website to provide easy access to the different sections of the website.
• I want it to be easy to find contact information, social media links and a map link to be able to se where the gym is located.
• I want to be able to get the necessary information about what kind of memberships the gym offers, as well as the cost.
• I want to be able to join the gym easily.
• I want to get a full view of what gym classes the gym provides and a detailed information of what the classes entails, and what time they are available.
• I want to be able to navigate through the site quick and easy.

• The elements should all be consistent, in terms of effects, colors, icons and buttons.
• Horizontal navbar, with the gym’s logo displayed on the left and link back to the landing page.
• The navbar for the mobile site version, will have the hamburger icon.
• Links to the gym’s social media channels will be in the footer.

The wireframes are created with Balsamiq.

Links to view the wireframes:

• Wireframes

You will see differences to the finished website. As I went on to developed the site there were certain aspects I thought I could improve from the original idea, to make it more in sync with my user stories.

• #343a40 (navbar & footer)

• #fafafa (text & icons)

• green (border for sign up form)

• orange (emphisize the cost of the memberships)

• success (buttons & progress bars)
• secondary (button for directions)

• Bebas Neue, regular 400 (overall text)
• Permanent Marker, regular 400 (emphisize the cost of the memberships)

• Navbar - Fixed on top of the page. This give the users access to the menu at anytime and place on the page. the navbar collapses into a hamburger icon when viewed on smaller devices like smart phones.
• Images & Video - I used images (both as background and in sections throughout the site) and a video to give the user a sense of the feel and theme of the gym.
• Social media - all social media links are centered in the footer of the site.
• Colors - There same colors was used throughout the site, exept for a stong orange to emphisize the cost of the memberships the gym offers.

• Image Carousel - The landing page features an image carousel, that showcasts 3 images from the gym, along with the logo, and words that will be selling point for the gym. The text on top of the image carousel has text shadow to biring it more to life. On each image-slide there is also a button for the user to click to be able to sign up and become a member.

• General information about what the gym offer its members.
• Icon on top of each category.

• Information on the classes the gym offers, as well as what times they are available.

• Progress bars: Shows what intensity the user can expect from attending a clas in terms of cardio-level and strenght-level.

• Collapse button: When clicked, the days and times for when the classes are available will appear.

• Information on what each membership will give you as a member.
• Different font and color on the price, to really make it stand out.
• A button on each membership offer to direct the user straigt to the sign up form.

• A map, from google maps, showing the location of the gym.

• Located in the footer of the site.
• Provides the user with all contact formats available, address, email, as well as a button with a link to directions.

• Form for the user to sign up on to become a member of the gym.
• Form for personal information.
• Form for payment details.
• Submit button - directs you to the submit page.

• Seperate page that congratulates you on your membership
• Provides you with a link to be able to download the gym's application.
• Button to redirect you back to the website.

• HTML
  • used to structure the website and create the elements for the website.
• CSS
  • used to style the markup and create custom styling.
• Bootstrap
  • used as the core structure of the website and make my site responsive. It also includes pre-built plugins such as jQuery.
• Google Developer tools
  • to help solve a bug and help style my elements before writing code.
• Google Fonts
  • used to import the font style and help create a unique brand.
• GitPod
  • used as the development environment to help write my code.
• GitHub
  • used to store the source code and repository.
• GitHub Pages
  • used to deploy my website.
• Balsamiq
  • used to help create my wireframes.

Google Developer tools helped me identify any flagged errors.

It also has the responsive feature, which helped to be able to see what the site looks like on multiple devices, and help achive the user experience.

Am I Responsive

The site has been tested in Google Chrome as well as Safari.

I have tested on the following devices:

• iPhone 6/7/8
• iPhone 6/7/8 Plus
• iPhone X
• iPad
• iPad Pro
• MacBook
• iMac

GitHub Pages:

1. Create a repository on GitHub and a project name/description.
2. Once this is done, there is an option to open this on GitPod by clicking on the green button.
3. Initialise your repo by using the git init command
4. Add files to Git (staging area) and use the git add . command
5. Use the git push command to push this
6. It will now ask for your GitHub credentials (enter this in the terminal).
7. Go to GitHub and load your repo
8. Click on Settings
9. Scroll down to GitHub Pages
10. Click on master branch.
11. Website is live!

• Fonts: Google Font
• Icon: Font Awesome
• Responsive CSS framework: Bootstrap
• Sign up/Payment form: BBBootstrap Team
• StackOverflow
• Insert gym-video W3Schools
• Responsive Google Map: Youtube/garnatti one
• Collapse button: Bootstrap
• Progress bars: Bootstrap
• Code Institute Modules - HTML Fundamentals, CSS Fundamentals & User Centric Frontend Development

Images

• Background (index.html)

  By Ivan Samkov https://www.pexels.com/photo/black-punching-bag-4162449/

• Carousel

  By Luis Vidal https://unsplash.com/photos/FodEsaNZs48

  By Meghan Holmes https://unsplash.com/photos/wy_L8W0zcpI

  By Geert Pieters https://unsplash.com/photos/3RnkZpDqsEI

• Classes

  By Victor Freitas https://www.pexels.com/photo/person-holding-black-barbell-703014/

  By Andrea Piacquadio https://www.pexels.com/photo/three-women-kneeling-on-floor-866023/

  By Element5 Digital https://www.pexels.com/photo/person-exercising-on-cycling-machine-in-gym-775025/

• Background (submit.html)

  By Victor Freitas https://www.pexels.com/photo/person-wearing-black-shorts-and-blue-lace-up-low-top-sneaker-holding-black-barbell-841131/

  Video

  By: Cottonbro https://www.pexels.com/video/two-men-exercising-in-a-gym-4761428/

Also thanks to:

My mentor: Arnold Kyeza - for support and guidance throughout the project.