This is a website based on an imagined nationwide car meet, where people from all around the nation that own iconic cars, can meet up, have a chat and show off their cars. This websites main goal is to attract members of the public who are car enthusiasts, especially those who like iconic cars. The websites goal is to show users where spesific car meets will take place (iconic car meets) all around the country. The website does not sell tickets to the events however, the users can book a stand for their car on the website using the 'Contact us' section of the page. There will be stand out images of some of the most iconic cars throughout the website and especially on our gallery page. We will have some pictures from our recent car meets and a schedule for when the next meets will take place. Also, within the header there is a 'Sign up' section, users can go here to become a member of Iconic car meets. There will also be a 'Contact us' section where users can contact us if they would like to have their car on a stand or on track. Users can also use this sections to ask any further questions they may have.
Here you can find a demo of the deployed website here
Here you will find screenshots of the deployed website here
I have chosen to base my project around iconic cars as they are a huge interest to me and something I can relate to easily. There is also a very large gap on the internet regarding car shows and locations. The primary focus of this website, is to allow full functional interaction with it's users to allow for a quick and easy user experience. My main goal was to create a interactive website to allow users to gain easy accessibility to information they require without any hassle. I choose to use a simple layout using an attractive landing page image, to catch users attention. I opted for a colour scheme of black and orange, the reason for this is I feel darker screens are easier on the eyes and also orange compliments the black to create a welcoming feeling.
This websites users are interested in iconic cars and locations of iconic car meets. As well as to get a more information regarding the car meets. The site owners goal is to provide a webpage that allows users to read a reliable source of information in regards to iconic car meets e.g (location, time, date).
All Wireframes were designed using Balsamiq Follow the links below
| Desktop on Acer Aspire 5 |
|---|
| Home Page |
| About Page |
| Gallery |
| Contact US |
| Sign UP |
| Tablet in iPad/iPad Pro view |
|---|
| Home Page |
| About Page |
| Gallery |
| Contact US |
| Sign UP |
| Mobile in iPhone 5, 6, 7, 8, X |
|---|
| Home Page |
| About Page |
| Gallery |
| Contact US |
| Sign UP |
- A frequent user, I would like to sign up to become a memeber.
- A frequent user, I would like to contact you to be able to place my show car on a stand or a track.
- A frequest user, What rules do I have to follow when going to events
- An owner, I want to show how easy event are to find and visit.
- An owner, I want to make things easier for users to be able to show there cars on stands and tracks.
- An owner, I would like to gain memebers who can meet together at events.
- An infrequent user, I would like to check out what locations and times meets this month will be at.
- An infrequent user, I would like to contact them about a few extra questions I have.
- A new user, I would love to check out some pictures of previous events.
- A new user, do they have any social media.
Home page
- Landing Image: This shows the users exactly what this website is about and draws attention to the 'Home Page'
- Call to action button: Allows users to shortcut to the times and locations section.
- Join the club: Explains who we are and what we do as a website.
- Times and locations: Gives all the dates, times, price and locations of upcoming events.
About Page
- Rules and regulations: Allows users to see rules and regulations of all events.
- Essential Information: Gives users all the information needed when going to an event.
Gallery
- Pictures: Shows images of previous events.
Contact US:
- Contact Form: Allows users to get in contact via email to ask questions or apply for there car to be on show or on track at an event.
- Address & Email: Give users an alternative option to get in touch with the business.
- Map: Shows the location of the business.
Sign UP
- Sign up form: Allows users to become a memeber of Iconic Car Meets.
Header and Footer
- Navigation Links: Links to each page of the website.
- Logo: Business official logo.
- Hamburger menu: For use on smaller tablets and mobile.
- Social Links: Allows users to visit the businesses social networks.
- copywrite: Shows who designed the website and states that it is copywrite.
The header and footer are consistant through out the website.
- Forum could be added to allow members to communicate with each other.
- A larger gallery, which is broken down into individual events so users know what to expect.
- Memebership area could be added for paying members.
- Shop section where users can purchase merchandise.
- Yearly events calendar where users can see events up to a year in advance.
- w3c Validator - To check for any errors in the HTML code.
- Jigsaw - To check for any errors in the style.css file.
- Developer mozilla Helped create the hamburger menu.
- Gitpod - Used to devlop the website.
- GitHub - Used to host the project.
- Font Awesome - Used to style the social media links on the footer and the call to action button on the landing image.
- Google Fonts - Used to add fonts Oswold and Montserrat.
- BeFunky - Used to edit pictures.
- Unsplash - Used for images on the forms.
- HTML - This was used to create the structure and provide the contents to my website.
- CSS - This was used to create the styling for my website.
Please see the testing process here
How to deploy the project
Hosted on github pages
- Load up GitHub and find the correct repository.
- Using the project's repsoitory menu, at the top on the menu select settings.
- Scroll down until you see the pages section
- Now click on the drop-down menu and select the option Master Branch.
- The page refreshes and scrolls you back to the top, scroll down back to the pages section.
- The link to your deployed website will now be there.
Follow this link to see how to depoloy to GitHub pages.
How to run code locally
- Load up GitHub
- Find the project's repository
- Under the repository's name click Clone
- In the clone with HTTPS copy the url.
- Choose your IDE and open git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Now type Git Clone, and paste the url copied from github.
- Just press enter and you clone will be copied over.
Text for about us section was copied from [santapod raceway. (Text has been edited for my website purpose) Youtube for the basic structure of my forms Youtube for the basic hamburger menu
- Personal images taken myself and edited using funkypic and windows editor.
- unsplash used for the images on the forms.
- Text for about us section was copied from santapod raceway. (Text has been edited for my website purpose)
- Youtube for the basic structure of my forms and the hamburger menu.
Precious Ijege for the incredible mentoring support. The Code Institute student care and mentors. Anthony from slack was a great help through out my project.