Recreate an image for our homepage

[ExperimentsInHonesty]

Overview

We need a new composite issue for our homepage to replace an image we don't know the origin of all the elements and a credit file to match

Action Items

• [ ] Recreate the image from the sources provided (using Hack for LA figma) and add it to the comment called "Credit" below when completed

Resources/Instructions

• HfLA Figma

For the Civic Tech Infrastructure image:

The link for the base image is: https://unsplash.com/photos/unRkg2jH1j0

Click here to see the image from Unsplash

We will need to recreate it to look like this image

Click here to see the image of the Civic Tech Infrastructure credit on the feature-homepage-launch branch

We will need to use the Unsplash image and get new icons to recreate the changed parts

images of

• hammers and wrench
  • https://www.flaticon.com/search/1?word=wrench%20hammer
  • this seems like it would work: https://www.flaticon.com/free-icon/work-tool_6825937 (if we remove the circle at bottom of wrench)
• gears
  • https://thenounproject.com/icon/gears-1338890/
• book
  • https://thenounproject.com/icon/guide-4302066/
• magnifying glass
  • https://thenounproject.com/icon/magnifying-glass-1297870/
• bar chart
  • this seems like it would work: https://thenounproject.com/icon/bar-chart-209270/
• hands
  • this seems like it would work: https://www.flaticon.com/free-icon/group_992577

---

Main image

Name: Civic Tech Infrastructure Used in: Homepage Artist: Adeolu Eletu Provider: Unsplash Altered by: [YOUR NAME](YOUR LINKED OR PORTFOLIO LINK)

[ExperimentsInHonesty]

credit

1 composite image Name: Civic Tech Infrastructure Used in: Homepage Compiled by: [YOUR NAME](YOUR LINKED OR PORTFOLIO LINK) Provider: HfLA composite image

2 main image Name: man looking at marketing analytics Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Adeolu Eletu Provider: Unsplash

3 Hammer & Wrench Name: Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Provider:

4 Gears Name: Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Provider:

5 Book Name: Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Provider:

6 Magnifying glass Name: Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Provider:

7 Bar chart Name: Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Provider:

8 Hands Name: Used in: Civic Tech Infrastructure (HfLA composite image) Artist: Provider:

[JessicaLucindaCheng]

@JessicaLucindaCheng To Dos

• [x] Add a screenshot of what it looks like with the Provider missing
  • Notes: It recenters the text vertically
• [x] Figure out if the top of the image can be aligned with the top of Name text

[JessicaLucindaCheng]

@ExperimentsInHonesty During the Dev/PM meeting on May 8th, you asked what it would look like if the Provider field was removed or didn't exist from of the credits; below are my findings.

Test

On the Credits page, to test what it would look like if there was no Provider field for some of the credits, I temporarily removed the Provider field from the following credits:

• Avatar
• Book
• Building
• Button
• Candidates
• Employees
• Environmental Impact

Problem

The result was it recenters the text vertically and doesn't look good. Here are screenshots of the Provider field removed from some of the credits:

Click to see desktop view


Click to see mobile view


Possible Solution

To align the Credits text so it starts at the top of its flex container for each credit, I added align-self: flex-start; to the .icon-info class in _sass/components/_credit-items.scss.

• Note: I did not align the text with the top of the images because the images are centered vertically and the images are different heights (i.e. Citizen Engagement credit image).

Here are screenshots of adding align-self: flex-start; to the .icon-info class

Click here desktop view


Click here mobile view


Edit:

• The contents of this comment will be part of this ER: #5938

[github-actions[bot]]

Hi @GRK1998, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)