This site has been developed for the band ‘Hot Mass’ in order to display the band to prospective management and distributors as well as potential new fans.

Hot Mass are a band from Swansea, South Wales who are releasing their much anticipated sophomore full feature length album, ‘Happy, Smiling and Living the Dream’.

The site will be focused on displaying information about the band, their previous releases, upcoming shows, where to purchase merchandise, and how to get in touch with the band directly through various channels.

This site will be ideal for anyone wanting to get any info they need concerning all things ‘Hot Mass’.

This page will include features which will enable prospective agencies to find out what they need to know about ‘Hot Mass’.

It is aimed at clients who would be willing to add ‘Hot Mass’ to their artist rosters, so detailing of upcoming shows won’t be necessary as it’s the other aspects of the band’s business side that will need to be addressed.

The ideal goal for the band is to have a prospective client/agency move forward with their intention of signing the band to their roster. They want to be able to do this by detailing the necessary information that agencies like to see a band working on, previous music releases, new music releases, videos, merchandise for sale, and a general idea of what the band is and who they are sonically.

When first navigating to the page the user is given a single page. A simple colour scheme is incorporated to make it more visually appealing with clear contrast between text and background colour.

The Nav bar is fixed to the top of the page when scrolling to ensure that access to any section within the page is within one click.

The user is also given the option of an external press pack download in PDF form which collates the information on the page if they wish to save a copy for themselves rather than scrolling through the page. This navigates to a new browser window to ensure that the user still stays on the landing page once closed.

Every navigation link brings the user to a new section of the website.

Each navigation link has a hover feature to ensure that the user knows which link they're interacting with.

The image used is a large version of the bands logo hosted externally with a transparent background to eliminate any white backgrounds from the image file existing.

The colours featured in the logo image are what constitute the colour scheme used throughout the website. This allows for continuity and familiarity especially aestetically.

## Footer

The footer is placed at the very bottom of the page with an absolute position to ensure that it stays at the bottom.

### Features

The footer includes a text version of the bands name in the same font used in the logo image, to allow for extra branding and continuity.

Social media links are included in the footer to allow the user to navigate to the appropriate social media sites, each one has the same hover feature as the nav bar to ensure the user knows which link they're interacting with.

Each one brings the user to a new browser window once clicked, to ensure that once closed the user returns to the website.

The band section includes information about the band as well as an interactive gallery featuring javascript to make for an easier navigation and interaction when clicking the images.

### Scrolling pictures

The gallery when displayed on larger screen sizes includes smaller thumbnails of the other images included, once the site is loaded onto devices with smaller screens, the thumbnails are no longer displayed as they become disruptive if they're included at a size which is distinguishable.

Removing them means that the user experiences a much more aestetically pleasing visit without having to change the screen orientation or zoom in to identify what the pictures are without interacting with them, they simply need to use the navigation 'Next' and 'Previous' arrow buttons located on the left and right of the image displayed within the gallery.

This section includes a brief introduction to the band including a list of the members and the instruments they perform with.

This section includes a brief description of the sound the user is to expect when listening to the bands music.

This section details the bands plans moving forward with any prospective representatives as well as allowing the user to realise the band are active and forward thinking.

The band section includes a different colour scheme to the section above but incorporates colours featured in the logo image.

Including a javascript orientated gallery means that the user has the ability to interact with the images rather than being confronted with multiple images on display clogging up the viewport on whatever device they're using.

Including three defined areas of text means the user is able to easiliy distinguish text appropriately with clear defined borders.

The media section gives the user interaction with the bands various medias.

An embedded music player means the user is confronted with an externally hosted music player which is fully interactive without having to navigate away from the site.

This includes an interactive player with scrolling features and full control over the music playing.

Embedded video players means the user is able to interact with videos the band has created without having to navigate to an external site in order to view them.

The video players incorporate full control over the video with the option to bring the video to fullscreen without having the user to navigate externally. They also feature links to the orignal video hosted externally in the embedded header should the user wish to go to the original video and it's original location.

This section is featured to give the user a brief understanding of what the band has on offer for people to purchase branded merchandise.

This section gives a brief description about what the band has to offer and a link to the band camp site used.

This image is included to give the user access to whats on offer from the band before moving to the band camp site externally. This gives the user clear ideas of whats on offer before navigating further should they like an item on display.

### Features

The same colour scheme is incorporated to ensure continuity between the logo image colours used.

The contact section is included to allow the user to interact with the band by sending an enquiry of their own should they have any questions they'd like to ask.

The contact form includes enough information for the band to identify the user. The few fields required means that the user can interact with the band without having to input vast amounts of information in order to do so.

A submit button is included with the same font used throughout to stay in keeping with the theme used throughout the website. A hover feature is included to ensure that the user knows they're interacting with it.

This project was developed using gitpod and pushed to GitHub using the build function within gitpod.

Deploying the page to GitHub pages from it's repository required:

1. Log into Github
2. Select the repository labelled DPHamdev/hot-mass
3. Select Settings within the menu
4. Navigate to the pages tab
5. Within source, in the drop down labelled 'None', select Branch: main with the / (root) selected in other dropdown. Save these changes.
6. A green box displaying a link to the deployed website will appear under the GitHub Pages heading.

To run this page locally you're required to:

1. Open Gitpod from within the repository.
2. In the terminal window, type "python3 -m http.server"
3. Open the site in preview or browser once the port has been made public.
4. To close this and be able to work within the terminal window again, press "ctrl and c"

Slideshow gallery I used this template for the slideshow gallery including javascript https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

I used this template for the nav bar https://getbootstrap.com/docs/4.0/components/navbar/

I used this format for the contact form https://www.w3schools.com/html/html_forms.asp

I used this for the font icons https://fontawesome.com/

I used this font https://fonts.google.com/specimen/Amatic+SC?query=amatic

All images are owned by Hot Mass and express full use in using the images listed. —

Music Player I used this to embed the music player https://soundcloud.com/pages/embed

I used this to embed the video player https://support.google.com/youtube/answer/171780?hl=en-GB

—