Muse Band Webpage

This is a website I created for the english rock band Muse. using HTML, CSS and Bootstrap frameworks, this site is intened for fans of Muse to visit, and to find out about all things Muse, that includes an about page, gallery page and a subscribe page to sign up to recieve all the latest Muse news.

UX

I wanted to create this website to have a place where fans of the Band could go or anyone that was interested in the band to find out about them, get a taste for their music, and then if they like it to subscribe to keep up to date with them.

This is a wireframe mock up that I designed at the beginning of this section for the project. Download Wireframe Here

You can also view this PDF in the GitHub Repository

Features

• Homepage that allows the users to recognise what website they are on.
• About page that tells the users about the Band.
• Gallery Page that gives the users a small example of Muse's music and pictures.
• Subscribe page that allows the users to subscribe to all the lastest news.

Features Left to Implement

• One feature I could implement later would be a Tours page with a map showing where the band are touring.

Technologies Used

Here is a list of all the Technologies I used to implement the site.

• HTML/CSS
• Bootstrap 4
• Font Awesome and Google Fonts.

Testing

This is a List of the testing that was carried out on the Website.

• Checked that the webpage worked on different browsers, used Firefox and Internet explorer.
• Checked that the music and videos loaded and played on the gallery page.
• Checked that you could not miss out a field on the subscribe form page.
• checked all social media links in the footer worked and loaded on a seperate tab.
• Also checked that the webiste looked ok on a mobile platform.

One note about the music player on Internet explorer that it has a black background so not as noticable as chrome or firefox I would maybe change this in a future update.

Also to note that the form on the subscribe page does not work at the moment as was not needed to for this project.

Deployment

• The Project is deployed on GitHub pages see link here. Muse MS1 Project Pages
• Also see the Link for the GitHub Repository here. Muse MS1 Project Repository

Credits

I used most of the code from bootstrap for the website as well as a few blocks of code copied and modified from previous course modules for this project, as well as the below code and content as well.

Code

• Used code from this website for the main background image (https://css-tricks.com/perfect-full-page-background-image/)

Content

• The text and content for the about section was copied from this Wikipedia article

Media

• The photos that were used in this site were obtained from Muse's official gallery page