Cars and Coffee is a webite for people who have a passion for cars, it is an event website that has information of what Cars and Coffee is, information about when the event is happening and locations.
Users of this website will be able to navigate exactly what they are looking for through the navigation bar in the header of the page.
- The navigation is featured at the top of the page with the name of the website too.
- It includes a home page, about, gallery and a sign up page.
- The navigation bar has two icons either side of the name of the website which I got from Font Awesome.
- I chose a grey background colour for the header and a white colour for the text, I also chose a blue background colour to indicate which page the user is on.
- The home page has a background image of two cars. There is 3 boxes on the image which are quotes that people have said from being at a Cars and Coffee event, I decided to put these boxes on the image so the user will see it clearly.
- The about page has three h3 elements with three questions with icons and three answers that users will find the information they need, there is also a map location on the last question which brings the user to the location when clicked on the link.
- There is also a picture of 3 cars underneath the questions and answers.
- The gallery page has images of previous Cars and Coffee events, this shows the user what an event will look like and what to expect, it might excite the user to go to an event.
- The photos are displayed in a column count of 2 and reduce to a column count of 1 if looked at on a tablet/phone.
- The sign up page has a background image and has a sign up form for the user to stay informed of the next Cars and Coffee event.
- The sign up form has a black clear background using box shadow so that you can still see the background image, it has a first name, last name and email address input and also has submit button, I chose a blue colour for the submit button so it is clear for the user to find.
- If the user presses submit without filling out the entire form it will ask the user to please fill out ths field.
- I used the footer from the Love Running practive project, it consists of a Facebook, Twitter, YouTube and Instgram which will bring the user to these websites when clicked on the icon.
- I chose a blue colour for the social media icons to keep it consistent with the rest of the website.
- I to be able to access the website without any issues.
- I to gain information from the website.
- I want to be able to leave my information in a signup form.
- HTML
- CSS
- I encountered 2 bugs with my media queries for mobile as it was not responsive, I fixed this by researching how to correctly implement media queries so it is resposive across all devices.
- I had issues with my gallery images as they were stretched and pixilated, I fixed this by adding 'object-fit: contain; to my images which fixed this.
Deployment This section should describe the process you went through to deploy the project to a hosting platform (e.g. GitHub)
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab From the source section drop-down menu, select the Master Branch.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
'Cars on a runway'
'A birds eye view of cars and coffee'
'Cars and coffee event'
'Mercedes cars'
'Top view of cars and coffee'
'Blue ford car'
The footer social media icons and links our from the 'Love Running' project.
I would like to thank;
- My mentor Jubril Akolade who is always there for support and to answer any questions i have for him.
- The slack community (https://slack.com/intl/en-ie/https://slack.com/intl/en-ie/) which i can always rely on.
- I would like to thank the assessment team for taking their time to look over my project.