A website for a 24 hour gym based in Swansea, South Wales. The name is a play on the phrase “Wait Up” meaning to stay awake until someone arrives or to go more slowly until someone catches up. The website features a gallery, information on equipment at the gym, an about page with map showing its precise location, classes page with a table of daily classes and a meet the instructors section. The website also features a contact page for more information on membership deals.

The aim of the website is to:

1. Gain new memberships to the gym. The website hopes to provide information about the gym, its location, opening times, facilities, offers. This will appeal to any person interested in fitness, the website aims to appeal to students in the area by offering a discount.
2. Retain members of the gym. The website will be a point where current members can find out opening times and information on classes at the gym. The website will contain media showing people enjoying and exercising at the gym, it will provide information needed to make a decision on joining the gym such as details of organised classes and their schedule and it will provide information on location, opening hours and contact details.

1. As a new visitor to the website, I want to easily navigate the site, so I can find what I need efficiently.
2. As a new visitor to the website, I want view the gym’s gallery, and see what facilities are available.
3. As a new visitor to the website, I want see what fitness classes are on offer.
4. As a potential client, I want to know what offers are available for membership.
5. As a potential client, I want to know where the gym is located and if there is car parking available.
6. As an interested client, I want to know how to contact the gym for membership.
7. As an interested observer and/or potential client, I want to follow the gym on social media, so I can keep up with its latest news and events.
8. As a returning client to the website, I want to know what time a particular fitness class is.

• Home
• About
• Classes
• Contact

Each page has a responsive navigation bar with a convenient placing of logo text at the top left, this directs to the home page when clicked. The footer is identical on each page featuring copyright information and linked icons to the gym’s social medias.

All pages feature responsiveness to changing screen sizes ensuring that the website can work effectively and promote the gym to the visitor no matter what device they are using.

The first notable feature of the Home page is the hero image. It provides impact and gives a great sense of what the gym looks and feels like highlighting the expansive range of equipment present but also showing a modern and clean look, evoking a positive emotional response in the user. The image expands and retracts with changing screen sizes but never looks stretched or pixelated.

Layered on the hero image is a cover text which instantly captures the attention of the visitor. The text lists concisely important information about the gym. One main feature is a link to the contact page where a potential customer can quickly ask the gym a question regarding membership or anything at all.

A gallery responsive of changing screen sizes (showing 3 images on a small screen up to 9 on a large screen) shows quickly what the gym looks like, what equipment is available and features members at the gym enjoying the facilities there.

More information is given on the expansive range of equipment and high grade facilities below the gallery in a listing form with icons to promote a positive emotional response in the user.

The About page gives the user information on the quality of the gym, and reassures any potential nervous customers who have never been to a gym that all experiences are welcomed.

A phone number is displayed which may direct the user to speak to a member of staff at the gym who will use their customer service skills to promote the business to them and gain a new member.

A map is displayed on the lower half of the page which visually shows the location of the gym. It shows that it is in a developed and safe area of the city with plenty of links to transport if needed.

The Classes page features a table showing all fitness classes available, a potential customer can be attracted to join by seeing a particular class they are interested in. Current members of the gym can easily locate the Classes page and find the time of their preferred class which is displayed in the table at the top of the page.

A fun section profiling the instructors at the gym is located on the page, here a smiling and approachable image of each instructor is provided to evoke a positive emotional response in the user. Some information is provided on their expertise and qualifications, showing the professionalism of the staff at the gym.

The Contact page features a contact form allowing the user to enter their details and a text box to write a question or message to the gym. A radio button is present to indicate whether the user is a student or not, to receive a discount on membership.

The bottom of the form contains a send button.

• Header Text Logo – Featured on every page. Easily recognisable link to the Home page.
• Header Navigation Bar – Featured on every page. Links to each page provides quick and easy navigation through the website.
• Footer Social Media Icons – Featured on every page. Easy access to the gyms social media pages which open in a new tab, to stop directing user away from website.
• Footer Copyright Info – Protects the business.
• Responsiveness – Responsive Bootstrap application allows for readability on all screen sizes.
• Hero Image – Creates impact, evokes emotional response in user.
• Cover Text – Quick and succinct information clearly displayed and link to contact page for user to message company regarding deals and offers.
• Gallery – Showing best qualities of the gym and evoking positive emotional response.
• Icons – Create a fun dynamic and readability to webpage.
• Table – Condenses information on fitness classes in one easy to understand section. Promotes different classes that are available to retain members and attract new.
• Image – Images of Gym Instructors smiling promotes positive emotional response in users.
• Contact Form – Easy to use and quick method of contact to ask questions and step towards purchasing membership. Features to implement in future
• Add video – Muted and auto-play video as a hero on the home page showing members exercising. Video in gallery showing a tour of the gym and its facilities
• Logo – A designed logo for the gym instead of text
• Live capacity – A feature to show live % capacity at the gym
• FAQ page – Answering most asked questions
• Careers page – A page for potential employees to show interest in working at the gym
• Safety page – A page detailing safety measures and any restrictions that may be in place
• Payment system – A feature to instantly pay for membership

• This project uses HTML and CSS programming languages.
• GitHub and GitPod – Used as an IDE to build the website along with VS Code.
• GitBash – Used for Git version control and pushing to GitHub.
• BootstrapCDN - The project uses Bootstrap5.0 to simplify the structure of the website and to allow for responsiveness.
• Maps.ie – To create working map
• FontAwesome - To provide icons to headings and text
• Google Fonts – To style website fonts
• TinyPNG – To compress and optimize images before uploading to website
• Material.io – Color tool to create palettes for UI and measure accessibility of colour combinations.
• Balsamiq – To create wireframes for design of the website

Testing information can be found here in TESTING.md file

This project was developed using GitPod IDE, committed to git and pushed to GitHub.

• All content was created by Shaun Davies
• README.md and TESTING.md format taken from the amazing Anna Greaves.

• Photos used were obtained from Ivan Samkov, Scott Webb, Andrea Piacquadio, Andrew Dick, Monstera on Pexels and Rodrigo Sarsfield, Danielle Cerullo, Milan Csizmadia, Quan Lee and Jonathan Borba on Unsplash.

• Thank you to my mentor Akshat Garg for his patience and help through my journey of creating my first project.

The content of this website is for educational purposes only.