Add locations info to about page

[KyleA99]

Fixes #8431

What changes did you make?

• I created a new about-card-our-locations.html file in _includes/about-page/

• I created a new our-locations-images.html file in _includes/about-page/

• I added the new about-card-our-locations.html file to /pages/about.html

• I added a new li for the new card to the sticky-nav element

• Note: Please see the comment I made regarding potential deficiencies in this pull request.

Why did you make the changes (we will use this info to test)?

• These changes were added to provide information regarding our transition from being an in-person organization to fully-remote.
• Information was also included to indicate our transition to remote-first collaboration was largely fueled by the COVID-19 pandemic.

CodeQL Alerts

After the PR has been submitted and the resulting GitHub actions/checks have been completed, developers should check the PR for CodeQL alert annotations.

Check the PR's comments. If present on your PR, the CodeQL alert looks similar as shown

Please let us know that you have checked for CodeQL alerts. Please do not dismiss alerts.

• I have checked this PR for CodeQL alerts and none were found.
• I found CodeQL alert(s), and (select one):
  • I have resolved the CodeQL alert(s) as noted
  • I believe the CodeQL alert(s) is a false positive (Merge Team will evaluate)
  • I have followed the Instructions below, but I am still stuck (Merge Team will evaluate)

Instructions for resolving CodeQL alerts

If CodeQL alert/annotations appear, refer to How to Resolve CodeQL alerts.

In general, CodeQL alerts should be resolved prior to PR reviews and merging

Screenshots of Proposed Changes To The Website (if any, please do not include screenshots of code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

---

From your project repository, check out a new branch and test the changes.

git checkout -b KyleA99-add-locations-info-about-page-8431 gh-pages
git pull https://github.com/KyleA99/website.git add-locations-info-about-page-8431

[KyleA99]

• The subheading sections “From In-Person…” and “Former in-person...” Are not styled completely correctly as I didn’t see any classes in _about.scss that accurately dealt with font-size and weight for subheaders.

• I did not see an SVG for the locations card in /assets/images/about/section-header-elements/

• The image’s corners are defaulting to black - this was not an issue on the events page as the dark background hid this. However, for the about page, light background displays the dark corners.

• The images are not in an individual row. Rather there is a row for each image. I think this is due to the width of the .page-card—about class not being wide enough to accommodate 3 .event-card items (414px each)

• There was no class for the horizontal divider line above “Former in-person…” text section.

• So, as a summary, my feature branch does not line up exactly with the mockup because I wasnt sure if I was allowed to start making custom css classes (even if I followed the H4LA style guide). It sounded like collaboration with designers and more tenured devs is required for this.

[nathanjkim-codes]

Review ETA: 9/28 EOD

Availability:
Monday: 8:00 PM - 11:00 PM PT
Tuesday: 8:00 PM - 11:00 PM PT

[egcuriel]

Review ETA: 09/30/2026 EOD
Availability: M-F (8 pm - 11 pm)

[nathanjkim-codes]

Hi @KyleA99, thank you for working on this!

I tested the PR locally and also read your comment about the styling.

I was able to see the same things you mentioned. The three location cards are showing in separate rows, the horizontal line is missing, and the subheadings look different from the mockup.

I understand that you were not sure if you should add new CSS classes for these changes. I think it would be good to ask the team how they want to handle the styling.

I also noticed one small thing. The issue says “Our Locations,” but the mockup says “Our Location,” and the current PR also says “Our Location.” Maybe we should confirm which title we should use.

Thank you!

[KyleA99]

@egcuriel @nathanjkim-codes agreed with the "Location" -> "Locations" change. I fixed that. I'm assuming this was correct, and if it isnt, merge team will address.

[anthonylo87]

Review ETA: 09/30/2026 EOD
Availability: M-F evenings

[egcuriel]

Hi @KyleA99,

As you mentioned your comments there some discrepancies between the mockup and the changes requested on the parent issue. You've followed the instructions on the parent issue, so I approve. If there is any new changes please request a review from me. Thank you!