LoveRunning

This project is a responsive website for a health group called "Love Running". The site's target users are anyone capable and interested in the benefits of social running groups. The goal of the site is to spread awareness of their club, and gain participants in their events.
The site was built using solely HTML and CSS.
At present this live deployed website is being hosted on GitHub pages and can be viewed at this link: "https://sheenakennedy.github.io/LoveRunning/" .
A small JS file is included only for form testing, and will be replaced.

Files include:

1. aboutme
2. index.html (Home page)
3. gallery.html
4. signup.html
5. style.css
6. index.js (Form testing, to be replaced)

3 interconnected display pages: (Home, Gallery and Sign Up).
Home page:

• includes hero image and cover text div, club ethos, font awesome icons, and detailed event information
  

Gallery page:

• displays related club images in masonry style design, with a filler span for gallery balance.
  

Sign Up page:

• includes a functional form that has a header, icon, requests personal information, and running preference from the user, and a submit button to post to designated "formdump" on Code Institute.net. Hover feature is present to highlite border of user response boxes to red for emphasis and direction.
  

• All pages include consistant logo, heading, menu and footer.
  

• Menu will underline in menu which page the user is currently viewing.
  

Responsiveness:

3 media queries present for website responsiveness based on max-width breakdown.

1) for desktop and tablet screens larger than 943px wide:

• Menu across all pages will display Logo and Heading aligned left, and menu page links aligned right.

• Home: Hero image covers screen width, and the overlapping cover text div is aligned right with padding. Club ethos viewing is divided into 3 parts (left, center and right), as well events are listed horizontally across screen.
  

• Gallery: images will display in 4 coulumns.
  

• Sign Up: form lines will display at their full size at left of screen. Heading includes an icon. Each label, form entry box and submit button taking up their own line.

2) for smaller tablets and larger phone screen sizes like the Iphone+'s that fall smaller than 943px but larger than 800px wide:

• Home: Hero image will clip edges as screen gets smaller, leaving the center view of the image unchanged. Overtext div will shift to align left. The logo and heading remain aligned left, but the menu pages align left under the logo/heading. The club ethos and event information sections will also all align centered to optimize smaller viewing.
• Gallery: Logo/heading remains the same. Menu will align left. Gallery images will display in 3 columns.
• Sign Up: form display will remain the same. Image background will remain in place, the center view unchanged as image clips at edges.

3) for mobile screens smaller than 800px wide:

• Home: Display will remain the same as tablet view.
• Gallery: Logo/heading will remain the same, menu will align left. Gallery images will display in 2 columns.
• Sign Up: form display and background image will remain the same as tablet view.

At present, repository includes a javascript file (index.js) which was provided in a class exercise with the purpose of testing the form functionality on the Sign Up page (signup.html).
This specific and precise js file is not mine and I do not claim to have written it. I include it as a working placeholder until I have progressed further in the class to write my own.
Upon which, it will be replaced.