Restore A Cortina is a static front-end website used to document the journey of the restoration of a MK1 Ford Cortina.
It is a blog style site that guides the viewer through the remarkable transformation of a rusted broken shell to the running drag racing beast that she is today.
I decided to create this as a resource for restoration enthusiasts as well as a way of reminding the owner of how far his car has come since Lockdown 1.
The site is built using HTML5 for content and structure of the website, CSS for styling and layout and I have used Bootstrap for the nav bar and carousel and to maintain responsive screen sizing throughout. The site currently consists of 3 pages: Home Page: The landing page for the website, containing an introduction, a few images of the subject and some helpful links to sites and companies used in the restoration. Guide Page: This page contains some of the images from the restoration, an unordered list that is ordered in the stages of the restoration. Each list item will be linked to a separate page with the process and images of the title of the list. Videos Page: This page contains more photos and videos of each part of the restoration. Each photo is titled and descriptive to help find the specific part of the restoration.
index.html - The home page of the site guide.html - The step by step unordered list with accompanied images videos.html - Images and videos of the restoration process. I could have called this page gallery, but I felt videos made it more obvious as to what the page contains. images/ - Folder containing all media related files used on the site:
- carousel/ - Folder of images in the carousel
- cortinaaftershow.jpg - First image in the carousel.
- mk1cortinashowcropped.jpg - 2nd image in the carousel. This is the image for the link to the MK1 Cortina Owners Club.
- robsenginesml.jpg - 3rd image in the carousel.
- linketc/ - Folder of the images used for links. I have also stored the royalty free images here that I have used for examples of finished cortina's for ideas on colour scheme and different styles of Cortina's that Rob used as inspiration for this project.
- anotherrandom.jpg - 5 door Cortina, White with a red stripe. This was looking at chrome on the grill and trim.
- cortina1964.jpg - Racing style paint work
- burtonpower.svg - The logo of the company ussed to stroke and bore the engine.
- dannyweld.svg - The logo of the company used for welding and spraying the Cortina.
- mk1cortinashow.jpg - The main picture of the Facebook page for the owners club.
- modalbuttonsbeforechange.jpg - This is an image of the original buttons I was implementing. I didn't want to rely on Bootstrap so much so changed it.
- rallystyleGT.jpg - We used this to look at the details such as the 'C' pillar vents to try and find the correct ones for the GT.
- randomlotuscortina.jpg - We used this to look at the details such as the 'C' pillar vents to try and find the correct ones for the GT.
- responsivesiteexample.png - Image within this readme.
- screenshotnotusednavelements.png - A screenshot of the Nav elements I decided against using for this site.
- standardgt.jpg - Another image the we used when looking at the detailing on different Cortina versions.
- gallery/ - This folder contains all of the photos taken from the restoration on the Cortina. I also added links to videos into the website, all of which are contained within the gallery page.
- archespainted.jpg - A photo of the extended arches attached to the Cortina, after they were painted.
- gearboxandsubframe.jpg - Taken from the underside of the Cortina.
- glassandgrill.jpg - Photo taken of the front, after paining and the windscreen and grill were added.
- initialstate.jpg - This is an image of the Cortina with all body work complete, before primer, smoothing and painting.
- onroadaftershow.jpg - This was taken just before the Cortina was recovered. The fuel pump casing has a crack in it and was letting in too much air, this stopped enough fuel from being pulled into the engine.
- originalstate.jpg - This is how the Cortina looked when it was purchased.
- paintedfinished.jpg - Just after Spraying and laquering.
- primered.jpg - Midway through primering and smoothing the body.
- rightside.jpg - Right hand side of the Cortina before engine was fitted.
- robsengine.jpg - Full size image of the Cologne engine, installed and running.
- rollingchassisfinished.jpg - Before engine was put in but with gearbox and running gear fitted.
- rollingchassispaint.jpg - Just after grill and lights are fitted.
- rollingchassispainted.jpg - Painted but no laquer.
- rustdamage.jpg - Body filler and rust damage before welding.
- smoothing.jpg - After a cover coat to check for areas that still need smoothing or sanding.
- thumbnailforfinalwalkaround.jpg - Image used for the final walkaround video before being transported back home.
- weldingwork.jpg - Rear quarter after rust and holes have been cut out and newly shaped panel welded on.
- weldingworkfront.jpg - smoothing paint showing the inconsistencies in the front of the Cortina.
I have added a screenshot of each of the pages within /wireframes.
During the creation and editing of the site, I used 3 main commands in the terminal. To add the changes to commit, I used git add . This adds all changes to the commit. Next I used: git commit -m "I would then decribe my changes between the speech marks." Finally I used: git push to create the commit and sync it.
To set up the project locally, follow these steps:
Clone the repository:
git clone [https://github.com/rhcompbuilds/CIMilestone1]
Open the project folder in your preferred code editor or file browser.
Open index.html, gallery.html, or guide.html in your browser to view the respective pages.
Bootstrap, the necessary CDN links are included in the <head> section of the HTML files.
The project is deployed on GitHub Pages and can be accessed at: [https://rhcompbuilds.github.io/CIMilestone1/] Attribution
Images: All images and videos are privately taken and stored locally on my PC.
Bootstrap: Bootstrap is used for responsive design. The relevant attribution is included in the code.
Thanks to Spencer Bariball for his support & guidance with this project.