Click here to see a live version of the website

This is my first website that I ever build.In this project, I have build a frontend-only and responsive website using the technologies that I have learned throughout User Centric Frontend Development course.

• HTML5
• CSS3
• Bootstrap

1. Build a static (front-end only) website for a band. As a starting point, use wireframes.
2. The band is a rock band and have around 50 years experience of performing live at numerous events around the world.
3. Their primary target audiences are their fans and potential fans who wish to use the site to see and hear clips from their back catalog, and any new material as it becomes available.
4. Also, the band would like to use the site to showcase their music and publicise their availability to perform at events.

• Create a website of around 4-5 pages, or (if using a single scrolling page) these should be separate page areas.
• Incorporate main navigation and grid layout (you might want to use Flexbox or Bootstrap to accomplish this).
• Whenever possible, strive to use semantic HTML5 elements to structure your HTML code better.
• Make sure your site is as responsive as possible. You can test this by checking the website on different screen sizes and browsers.
• We advise that you write down user stories and create wireframes/mockups before embarking on full-blown development.
• The site can also make use of CSS frameworks such as Bootstrap, just make sure you maintain a clear separation between the library code and your code.
• You should conduct and document tests to ensure that all of your website’s functionality works well.
• Write a README.md file for your project that explains what the project does and the need that it fulfills.
• Use Git & GitHub for version control. Each new piece of functionality should be in a separate commit.

In terms of the overall look and feel of the site, I wanted it to be fairly simple but effective. I tried to use only a few colors and same background image for the different pages to make it simple but also consistent and easy for the user eye. I wanted the navigation to be simple and explicit.There for we have in the navigation bar Home, About us, Music, Videos, Fan Club and Book us. The Home page is very simple and it shows a picture of the band and info for the fans in Europe.About us page is with some information about the band not too much because the user will get bored and also there is Wikipedia if you want the entire history of the band. Music and Videos page like the name suggests you have here tracks/ videos to listen too . Fan club page is the section for their fans where they can buy tickets for the concerts and also visit the band gift shop.And finally the book us page is for those who wants to hire the band to sing live at their events by simply completing a form. I have used Bootstrap for the grid system, CSS styles, key frames and media quires and HTML5 structure.The only thing that is bordering me in this project is that i couldn't style the audio element () using only CSS.

I used GitHub Pages for deployment using my master branch as the source.

For the testing I used :

• Google Developer Tools (responsive mode)
• Running the website in different browsers
• Running the website on different devices phones and tablets (apple, android)

The text about the band was copied from the Wikipedia

The photos in the site were obtained from Google. The videos are from Vimeo.