A website built to help promote a cover band based in Peterborough called Cosmic Rodney. The website will contain contact information and contact options. It is built with mobile first approach. The aim of the page is to create a fun feeling website that represents the bands ethos. It is also design with simplicity first to create an easy learning experience for all users.

Hosted on GitHub Pages Repository on GitHub.com

This project is created for the use of members of the band Cosmic Rodney. It is not avaliable for sharing.

The predicted users of the site will be Fans, Pub owners, Event planners and Band Agents.

1. A fan of Cosmic Rodney looking for information on future events.
2. Pub owners looking to book Cosmic Rodeny for future events.
3. Event planners looking to aquire entertainment for corporate or personal events.
4. Agents looking to potentially contact the band after viewing there media.
5. Fans looking to write directly to the band.
6. A fan of Cosmic Rodney looking for band member information.

• Yellow:
• Varient of white:
• Black:
• Very dark greyish red:

Header font throughout the website are chosen to mimic the Logo style:

*Font-family: 'luckiest-guy', Sans-serif; 

Elements such as paragraphs are a complementing font:

*Font-family: 'Open Sans', Sans-serif;

Here you will find the Wireframes created for the website on Yumpu Designed using Balsamiq

• Easy Navigation
• Hover affects on Nav and logo
• Zoom function on Reviews and Band bio
• Carousel of images
• Gallery displayed with Lightbox
• Contact form
• Social Media buttons
• Extra content buttons
• Responsive Mobile first design
• Bootstrap
  • HTML class utilites
  • Grid system
  • Layout Change
• Band bio
• Events Page
• Band Logo

• Live contact form
  • Contact form has no post data. Will be live once I learn that skill set.
• Previous band members page.
  • This is request from the band for previous members but is not required yet.
• GPS for guidance to venues
  • During Testing it showed that the GPS links are not correct. This needs rectifying.

Technologies used in the making of this page are:

• HTML
  • Used to structure the site.
• CSS
  • Used to style the website.
• Google Chrome
  • Used to inspect the website via dev tools.
• Google
  • Used to conduct searches.
• Ekko Lightbox
  • Used to display gallery items.
• Hover.Css
  • Used to create simple css hover animations.
• Codepen
  • Used to create a simple header and footer
• Bootsnipp
  • Used to create a simple events calendar.
• Bootstrap 4
  • Used for helping create a mobile responsive website.
• CDN.js
  • Used to create simple css hover animations. -Gitpod
  • Used to build the website. -GitHub
  • Used for Repository. -Gitpages
  • Used to Host the website.
• Am I Responsive?
  • Used to check the responsive design of the website.
• Befunky
  • Used to resize all images on the website

The site was tested by users and software. It has been tested on Google Chrome v83.0.4103.97 and Mozilla Firefox v77.0.1 (64) on Acer Ryzen 5 and also a desktop PC. It has also been tested on Ipad Pro.

Jessica was asked to test the page and to feed back on any problems that she encountered or for any feed back she might have.

• Problems Encountered

  • Gallery page displayed a scroll bar on screens sized 414 x 736.
    • Issue was due to a container problem but has been changed.

• Feed Back.

  • Syntax Error with text on Contact Page
    • Syntax wording did not match with flow of page.
    • The text has now been corrected.

Phillip was asked to test the page and to feed back on any problems that he encountered or for any feed back he might have.

• Problems Encountered

  • No problems encountered

• Feed Back.

  • Font color used for review section.
    • Font color changed to make it more visable.

Laura was asked to give feedback of the layout of the page.

• Feed Back.

  • Layout on Meet the band page sizes 414 x 736 was not smooth.

    • Layout has been changed to create a better user experience on mobiles.

  • Header on Homepage leading to reviews didn't stand out enough.

    • A black background has been added to the container to break the section up more.

David is a member of the bband and was asked to test the website on Ipad screen size 768 x 1024.

• Problems
  • No problems encountered.

Used to look for any potential problems.

• Problems.
  • Gallery did not contain any alt tags. This has been changed.
  • Event page contained h3 tag after a label tag and is not allowed. This has been changed.

This website was used to check the layout on various screen sizes.

• Problems
  • Gallery footer doesnt stick to page on screen size 768 x 1024.
    • This problem has been fixed.

The website is hosted on GitHub Pages

The process:

• Host a git repository on Github.
• In the settings for the repository scroll down till Github Pages section.
• Select which Branch you would like in source section. (Normally Master Branch)
• Change the address of your website if required
• Save changes.
• The page is now ready to be viewed.
• The generic page set up will be 'yourusername'.github.io/'thereponame'

• All images from this website are obtained from Cosmic Rodney Facebook page

• Band Bio information is personally composed by the band members.

• Gallery Ekko lightbox is botained from Ekko lightbox

• Nav bar basic structure obtained from CodePen

• Hover affects obtained from Hover.css

• Event Calendar obtained from Bootsnipp

• Thanks to Seun Owonikoko @seun_mentor
• Stuart Crang For encouraging me to join the course
• My current Linkedin Group for help and motivation.
• Cosmic Rodney for allowing me to build a site for them.
• Code institute for providing me with the tools to chase my dreams