This is a website, for The Monkees, they've been rockin' since the 60's and have been growing ever since. This site facilitates their growth with a catalougue of their greatest hits with space to expand for any new content, social links, images from their past, qoutes from the members, gig dates and a contact form so a user can enquire about booking them for a private function.

This is the place to be if you love The Monkees!

Here's a link to the deployed site - https://tenbonks.github.io/The-Monkees-Project/#

I created a wireframe using "Pencil" and a mockup using "Adobe XD", the website is created with the target audience being current/potential fans for "The Monkees". It allows a user to see the bands music (via mp3 and mp4), famous qoutes from the members, any news relative to the band and also a live section where it showcases gig dates and a contact form. All of this is acheived in a single scrolling page with vividly coloured sections, along with the links in the header, it is very easy to view the content and find what the user is looking for.

1. As a FAN, I want to view news stories, so I can stay up to date with my favourite band
2. As a FAN, I want to see if they are available, so I can book them for my wedding
3. as a FAN, I want to listen to The Monkees, so I can relive some memories
4. as a FAN, I want to see if they still have tickets for their St Kilda show, so I can attend
5. as a FAN, I want to see if they have any social spaces, So I can join them

The order the section are layed out are as follows...

1. Music - This contains one mp4, and 4 mp3's, showcasing the band's music.
2. Members - This contains the 4 members of band, with one of their well known qoutes.
3. News - this contains news relevant to the band such as new tours
4. Live - This contains an area with their gigs, and the ability to contact the band for their services.
5. Footer - social links and back to the top

• A sign up to news letter, originally I thought about implementing this but didn't see it as necessary.
• I wanted to use JS to make the song cards be the album artwork with a play button in the middle, this style is widely used in other apps, such as Spotify and I-tunes, to make it look cleaner and a bit more modern.
• Expandable sections so there will be an arrow at the bottom of each section which will drop down the section to reveal more content.

This project was made using HTML, CSS, and some JS was used but this was acheived using Bootstrap 4/JQuery

I have been testing this site during development and heavily after to make sure everything is working as it should, I'll use the user stories, to show you how easy it is to acheive what they wanted using this site.

• USER 1 - Click the nav or scroll to the "news" section, view the news.
• USER 2 - Click the nav or scroll to the "Live" section, click the "Contact Us" button, fill all the fields out, hit send. A reply will be sent within 3 working days.
• USER 3 - Click the nav or scroll to the "Music" section, click on either of the many media elements available for you.
• USER 4 - Click the nav or scroll to the "live" section, click on the tickets button inline with the "St Kilda" row
• USER 5 - Click on the social link you want in the header or footer if viewing on a tablet or larger, if on a small device social links can be found in the footer.

After testing the user stories, I conducted a general test on elements to make sure they are functioning as they should.

• The Navs in the header all work and take you to where they should, "The Monkees" logo in the header takes you back to the top.
• The modal works as it should, all fields MUST be filled to submit.
• The music and video elements are working and all controls responsing.
• All social links take you to the correct social space.
• all emlements are responsive and fit well on xs-xl devices.
• All buttons work and take you to the correct venue in the live section.
• Contact us buttons in live section and footer all functioning.
• Certain elements are hidden on small devices as they should be.

I Deployed this site using Github pages, there are no differences from this version to the development version. All the files are available on git hub to run my code locally.

• The text featured in the news article for Pete Torks death was copied from - https://www.monkees.com/
• The quotes used in the Members section were copied from - https://www.brainyquote.com/topics/monkees

The photos used in this site were obtained from...

• Transparent wallpaper in the content sections - www.transparenttextures.com/
• 4 members on chairs - The Current
• 4 members with PT at front with microphone - flashbak.com
• 4 members and a ladder - rollingstone.com
• Monkees playing on stage upon loading the page, member photos in the "Member section", album art, mp4 files, mp3 files the last 3 can be seen in the "Music section" - Code Institute Band assets

I received inspiration for this project from...

• Parralax Background idea - Traversy Media (Youtube) - Enabled me to implement what I had pictured in my head with the appealing scrolling effect
• The Decemberists website - http://www.decemberists.com/ - gave me the thought of using a single-page design.
• Maranatha Llesanmi, my mentor for useful guidance and reviews during the development of my site, thank you.
• Slack for various challeneges I encountered, such as removing the "Download" option from the media controls, so thanks to everyone in the user-centric-frontend channel for support
• The footer was heavily inspired from the one learned during the Resume-Site project through Code Institute.