This is a website for the (fictional) band Midnight Change. This website showcases the 60โs rock band music, images and videos. The website also shows that Midnight Change are available to hire for various types of events.
This website is for fans and potential fans of Midnight Change. The website will also be useful for those searching for live entertainment for their special occasions.
- As a fan of Midnight Change, I would love a place to listen to all the hits from my favorite rock band, see them live and look at pictures of my favorite members in action, so I can reminisce on the good old days.
- As a fan of the greatest rock band, Midnight Change, I would like to know when they release new music so I can keep up to date with them.
- As a bride to be I am searching for the perfect band to make my special day even more magical, I want to listen to music from the band and see what they are like while performing live, so I can make sure I am making the right choice.
Here are the links to the wireframes
- The navbar consists of links to all the pages.
- A banner with a sign-up button that allows users to leave contact details to be updated with new music from midnight change.
- A short introduction to each band member.
- A section with links to the bands upcoming shows, how to contact the band about hiring them, and past events they have performed at.
- This section gives the user the option to choose to listen to music, watch videos, or look at images from the band and directs them to the section they choose.
- A banner with a title.
- A section about the band as a whole.
- A section with more in depth information about each individual band member.
- A banner with a with a title.
- A phone number with a link to call the band.
- An address for the band
- An email with a link to email the band.
- Social media links
- An embedded Google Map to the bands address.
- A banner with a with a title.
- A section of photos of the band.
- A section of videos of the band.
- A section of music of the band.
- Short section with information about the band.
- An embedded SoundCloud audio player.
- Facebook link.
- Twitter link.
- YouTube link.
In this section I used the following technologies:
- HTML
- CSS
- Javascript
- Cloud9
- GitHub
- SoundCloud
- YouTube
- Canva
- Gimp
I have tested this website multiple times and am confident the site works well.
- Simple for the user to understand.
- All links work.
- No need for the browser back button.
- Responsive for all devices
- Some images are hidden on mobile devices and everything is resized proportionally.
- Tested multiple user stories with no issues.
Example:
- Fan looking for media:
- Locate the media from the navbar (each link will bring you to the desired section of the media page).
- Locate the media from the gallery section of the homepage (each link will bring you to the desired section of the media page).
- Listen to audio in the footer of the website.
This testing has been done for all user stories.
- Facebook and Twitter links are to accounts that do not exist.
- Getting the pictures and text to stack properly on mobile view. I ended up displaying images and text on mobile and not desktop and re-sizing them.
- GitHub
- The text for the webiste was written by me.
- The photos and videos used in this site were obtained from Pexels and Pixabay to portay a band.
- The music for this site was taken from Bensound. The music was used for the audio and placed over the band video.
- I created the logo for this website. I also created the band name and all text on the site.
- I received inspiration for this project from the tutors at Code Institute, and my mentor Dick Vlaanderen for some Javascript tips.