This is an imaginary gym website created in partial fufillment of the requirements for Diploma in Software Development. The idea is to captivate users at a glance as well as advancing the site owner's services.

At Marshal Fitness Arena, We know how important your goals are to you, sometimes, it's a struggle to bring your best effort to your gym session. whether you're trying to lose weight, train for a race, keep your stress in check, or any of the other worthwhile reasons to make fitness a part of your life, staying consistent is key, even when you really don't feel like it, we work up the motivation for you at an affordable rate.

Website has been deployed to Github Pages

The skeletal framework of this website was designed using Balsamiq as a visual guide to represent the page schematic and screen blueprint.

Links to final version of the wireframe can be found below:

• Wireframe Final Version

The focus here is ensuring that users find value in what the gym provides, more so it was a deliberate act to make it usable, useful, desirable, findable, credible and accessible

• Home Page: subtly displays an embed-responsive-16by9 video-style of unisex with dark overlay on top and the About Us information
• Gallery Page: maximizes Bootstrap4 Carousel to showcase the training ground cum gym facilities and the company's ethos
• Classes Page: a Grid system with inner card elements presents different classes and benefits
• Contact Page: Contact page contains a contact form for users with a google Map location

The website has been built to look great on both mobile and desktop devices with the exception of adding Javascript to implement complex features and interactive elements to enhance user experience. The structure transforms accordingly across all devices. The colors were essential to communicate visual aesthetic state of mind to viewers, subconciously creating the urge to know more while conciously increasing the desire to gym at Marshal Fitness Arena.

I used Tinypng which utilised smart lossy compression techniques to reduce the file size of PNG and JPG files. This shrunk the image size to 41%. the site uses less bandwith and load faster.

• Background video on home page with dark overlay and and carousel-fade displaying motivational quotes to keep your eyes glued to the screen.
• Carousel-slide to showcase gym facilities in an enabling environment.
• Call-to-action buttons strategically positioned and escalated to get you signed Up.
• The call-to-action button triggers a chain reaction that cascades to the last point of call.
• Upon clicking the Join Us Now! button on any of the Classes a modal form pops up with all the input components validated. clicking Submit further triggers a second modal with a post-feedback success reaction depicted with thumbs-up, a fontawesome icon. The feedback modal can take you back to homepage upon clicking the web logo. Again there's a line below the feedback modal customized to launch a quick follow-up call or enquiries.
• Fading overlay opacity effect on the card images upon hover displays the timetable for each class session.

• There is an urge to implement Javascript, like adding interactivity and automation. Things like video players, interactive maps and form validatiion can foster user experience.

• LogoMaker was used for the logo design

Gym Users:

• As a user, I want to register and enroll in a beffiting class session
• As a user, I want to access the gym training grounds and facilities
• As a user, I want to know the location, opening hours vis-à-vis classes in sync with my timeline and goals
• As a user, I want the gym instructor to track my progress
• As a user, I want to exercise rightly in an enabling environment

Gym Owners:

• As a owner, I want my gym center to be desirable and accessible to users
• As a owner, I want to know what my contemporaries are doing and ways to improve
• As a owner, I want end-user feedback in shaping services to fit their needs more accurately
• As a owner, I want users to get notifications via newsletter when there are new offers

Website was tested on GTmetrix and Pingdom platforms

Languages:

• HTML
• CSS

Tools and Libraries:

• Bootstrap
• W3C Validator
• Font-Awesome
• Google Maps
• Tinypng
• GTmetrix
• Pingdom
• HTML and CSS Beautifier
• Google Fonts: Exo and Roboto fonts were imported from google fonts

• Am I Responsive used for UX Image section
• Unsplash for website images
• LogoMaker was used for the logo design

• Subtle display of video-style with dark overlay by Felipe Alarcon
• Header inspiration from Jumbodock
• Special thanks to Felipe Alarcon, I appreciate more than you' ll ever know
• Most sincere appreciation to my fellow students and Support team at Code Institute for their immeasurable feedback.
• I can't thank the Code Institute Slack community enough, yet another institution that never run out of ideas