The Doors-Rock Band Website

Milestone project- User Centric Frontend Development

Front-end only, Single Page Website for a 1960's band who wants to keep up with social media trends.

UX

Website is created for fans and potential fans of all ages.Because of that I tried to make it as simple and readable as possible. Design is in gray and white colors as well as images. Deasign project which i have done in balsamiq you can find in main folder or here

User can find on the website:

• informations and images of band and members
• few samples of songs
• music videos and videos about band
• contact form in case that he wants to book a concert or ask question
• links to band social media such us Facebook, Youtube, Twitter

Features

Project is divided on 5 main sections:

1. Header - Responsive navbar and Parallax effect background image.
2. The Band - Description and images where I used Bootstrap Carousel.
3. Music - Clicking on cover album iimage opens modal window where are song samples, tracklists of albums and date release.
4. Video - Few responsive embed youtube music videos
5. Footer - Which includes validate contact form and social media links.

Features Left to Implement

• Animated timeline with band concerts

Technologies Used

1. HTML
2. CSS
3. Bootstrap(3.3.7) -for responsive layout and components as carousel and modal window
4. Javascript for side menu
5. Font Awsome
   • social link icons
6. Google Fonts

Testing

• Site was tested in multiple browsers and on multiple mobile devices.
• I checked code in HTML and CSS validator.
• I made sure that all of the links and videos are work.
• I filled up contact form to check inputs validation.
• Website uses Bootstrap framework which is is mobile responsive.

Deployment

Website is deployed to github pages, exactly at this link

Credits

• The text and images was copied from the The Doors official website

• The videos and songs used in this site were obtained from The Doors Youtube channel