Code For Philly mockup. View our progress here: codeforphilly.github.io/cfp-mockup/
The goal of this particular project is just to re-do the homepage first, and connect it to the existing old pages and laddr. The issues on our "Issues" page in this repo are ones that the leadership team has identified as things they would like changed. However we're open to other ideas of course.
https://codeforphilly.org/projects/code_for_philly_website_redesign
There are 2 things to change in index.html:
- the project card in the "Portfolio Grid", and
- the modal that pop ups when you click on the project card.
You can change index.html by going to https://github.com/CodeForPhilly/cfp-mockup/blob/main/index.html then clicking the edit button, which looks like a pencil. It's close to the "Raw" and "Blame" buttons.
Below are instructions on how to change index.html. Here is an example change: https://github.com/ZacharyRSmith/cfp-mockup/pull/1/files
How to change the project card:
In index.html, search for <!-- Portfolio Grid -->. Here, you will find the project card to change. Change:
- the img
- the heading
- the subheading
How to change the popup modal:
- Copy html/projects/template_modal.html to any location where you can replace all the
TODOs.
- For
id="portfolioModalTODO", you'll set the id to the project card's href minus the#. Ex.:id="portfolioModal3. - For
<!-- MODAL TODO -->, replace TODO with the modal number. Ex.:<!-- MODAL 3 -->. - Replace the rest of the TODOs.
- Now that your HTML is ready, find the modal to replace in index.html by searching for the popup modal id. Replace it with your HTML.
- Make changes in index.html
- Either:
- run
node sync_nav_and_footer.js, or - manually update the final HTML pages by copying & pasting from index.html to the other pages (currently sponsor.html and volunteer.html).