CVS eBike hire is a website for users to hire e-bikes in Cononley, North Yorkshire. The site immediately shows the user the exciting experience of an e-bike with an informative video and reviews. There is also an easy-to-find booking form, FAQs, accessory information and a contact form.

The Project Goals are:

• To allow the user to gain information about the company
• To show the users the fun of ebikes and the reliability of hiring them through CVS
• To encourage the user to fill in the booking form

As the site owner:

• I want users to be able to see that CVS ebike hire is a reliable and enjoyable service
• I want the user to be able to access our details, such as location and contact information, easily
• I want the user to have access to further information and be able to ask questions if needed
• I want the user to be interested in hiring from us and fill out the booking form

As a user:

• I want to know how reliabe and friendly CVS eBike hire are
• I want to know if eBikes are something I can afford
• I want to know if eBike hire is child friendly
• I want to know the location and opening times of the CVS store
• I want to be able to contact CVS for further information
• I want to book ebikes for the day

I chose to use two main colours throughout my website: a light grey (#646464) and a light green (#74C4A0). These colours are based on CVS store. I wanted the website for the ebike hire business to match the theme of the village store, to create a sense of continuity and to give the user a feel for the countryside they will be riding through. I chose a background image of Cononley village, which compliments the colours of the site well. I have also used a transparent white background behind elements to make the information easier to read for the user.

For the menu, logo and larger headings I have used the font 'Dancing Script', as I feel this font encorporates nicely into the theme of the site and gives a very countryside, quaint feeling. For the informative text I have used 'Lato' font as this is an easy to read font that works well with 'Dancing Script' and is easy to read at most sizes.

I have included the wireframes for a desktop, ipad and mobile version of this site - Click Here

• This site was designed using HTML5, CSS3 and Bootstrap frameworks.
• The homepage of this site inspires the user to hire e-bikes. The advertisement shows the extent of e-bikes and creates a positive impression, and the reviews show the user how reliable and friendly CVS store is.
• The booking apge provides booking information, including pricing, available accessories and a booking form complete with calendar.
• The contact page provides the user with further information including FAQs and a contact form for any other queries.

• A regularly updated 'updates' section, that includes popular routes, local pubs and inspiring photograph sites. I would place this on the home page, as this feature would act as inspiration for users to book.
• I would like the confirmation pop ups to ONLY appear when the form is filled in corectly. This will require JS though.

• HTML5
• CSS3
• Bootstrap Framework
• FontAwesome
• Google Fonts
• GitPod
• GitHub

• Navigating using the navbar:

  1. Opened the website.
  2. Clicked on all the links in the navbar.
  3. Made sure I was taken to the correct page within the website.
  4. Repeated for each page.

• Booking an e-bike:

  1. Opened the website.
  2. Clicked 'Bookings' button in the nav bar.
  3. Clicked on the submit button with an empty form, to see that the required fields appeared.
  4. Entered an invalid email to check the relevant error message appears.
  5. Entered an invalid number of bikes to check the relevant error message appears.
  6. Entered all inputs to check the form submits successfully. Checked a confirmation message appeared. (I am aware that the confirmation message appears without the form being filled in, I will need JS to fix this)

• Contacting CVS store for further information

  1. Opened the website.
  2. Clicked on the "Contact" button in the nav bar.
  3. Clicked on the submit button with an empty form, to see that the required fields appeared.
  4. Entered an invalid email to check the relevant error message appears.
  5. Entered all inputs to check the form submits successfully. Checked a confirmation message appeared. (I am aware that the confirmation message appears without the form being filled in, I will need JS to fix this)

• Navigating home using the logo

  1. Opened the website.
  2. Clicked on a page that was not the homepage, using the nav bar.
  3. Clicked on the logo, to check I returned to the homepage.

• Using the 'Book Now' link.

  1. Opened the website.
  2. Clicked on the 'Book Now' button at the bottom of the home page.
  3. Checked I was taken to the Bookings page.

• Using the social media links in the footer to access social media sites

  1. Opened the website.
  2. Clicked on all social links (Tripadvisor, Facebook, Twitter, Instagram) in the footer.
  3. Made sure they opened the correct website in a new tab.
  4. Repeated for each page.

• Using the website link in the footer to access Cononley Village Store website.

  1. Opened the website.
  2. Clicked on the website link in the footer.
  3. Made sure it opened the correct website in a new tab.
  4. Repeated for each page.

• I used the W3C for html validation.
• I used W3C for css validation.

• I wrote my code in GitPod
• I then pushed my code to the associated GitHub repository.
• In the repository settings, I scrolled to the GitHub Pages. I selected the 'master branch', under the 'source' menu.
• I published the project to GitHub pages, which provided me with a url https://natashacmyers.github.io/cvsebikehire/
• Through further inspection, there are no differences to the site after publication.

• The background image for this site was obtained from https://www.cononleypc.org.uk/
• The video on the homepage of this site was obtainted from https://www.youtube.com/watch?v=sU_VELPDkgU&feature=emb_title

• Bootstrap - I have used bootstrap through this site for responsive design and layout themes.
• www.bootdey.com - Thank you to bootdey.com for inspiring my reviews section.
• Code Institute Tutors - The CI tutors have helped me with dilemmas along the way and given helpful tips.
• Mentor - My mentor has helped me to decide on where I should focus my time and given me helpful tips along the way.