https://sadfaerie.github.io/committee/
Build a static (front-end only) website for a band: The Committee.
The design is to match the band image: dark, gloom and raw.
The band's fans listen to metal music and prefer dark themes.
Visitors should be able to:
- get information about the band and its members
- listen to audio files
- watch music videos
- get information about future events
- contact the band via contact form and via links to social media sites.
Prior to using the imagery, I have obtained written permission from The Committee - band.
All photos, songs and lyrics are property of The Committee, and can be found here: http://thecommitteeband.weebly.com
- HTML
- CSS
- JS
- desktop monitors: 13", 15", 21"
- Xiaomi MI, Android 7.1.2
- iPad mini 2, iOS 11.3
- Google Pixel 1, Android 8.1.0
- iPhone 5SE, iOS 10
- Google Chrome
- Safari
- IE
- Firefox
- :hover used to highlight band members photos proved unusable on touch devices, and was addressed by adding:
@media (hover:hover) {
.................
}
- css @media property was used extensively to achieve consistens layout when displaying the project on various devices
- removed .hover for sliders as it was causing problems on touch devices
// slider for lyrics
// hide .lyrics elements
$(".slideToggle").hide('slow');
// $(".slider").hover(function() { -- changing to click, due to hover issues on touch devices
$(".slider").hover(function() {
// toggle child elements of current object
$(this).parent().children(".slideToggle").slideToggle();
});
https://validator.w3.org/i18n-checker/ - passed
https://validator.w3.org/nu/ - passed
https://codeinstitute.net
https://sitepoint.com (JQuery tutorials: fade and parallax.js)
https://www.w3schools.com (Less tutorial)
https://stackoverflow.com (used during testing to troubleshoot encountered problems)
https://validator.w3.org/ (used for validation and troubleshooting)