Adding Phippy family image to footer

[thetwopct]

https://pr-588-cncfci.pantheonsite.io

Closes #534

Signed-off-by: James Hunt 10615884+thetwopct@users.noreply.github.com

[GarethAcidWorks]

Hey James, sending this over to Rohit now, he's been adding in the new character anyway so some nudging around required generally. Hopefully he can get resolved today

[thetwopct]

Thanks! Just so the comment in Slack does not get lost, here it is:

I've tried to export what I need from the file you sent, but it's not great. The reflection size needs to be smaller in height and the bottom section ideally needs to be transparent (this version has a black overlay which will probably affect the color of the footer contents). As we will be needing to update this footer in future its better to get this process right now from the export/composition side otherwise we'll have to manually edit every image each time the footer updates. I think better to send this page and image example to the animator and they should be able to provide what we need https://pr-588-cncfci.pantheonsite.io/ https://pr-588-cncfci.pantheonsite.io/wp-content/themes/cncf-twenty-two/images/phippy-family-footer.png

Requirements:

• horizon of image is exactly in center of image height
• equal spacing left and right
• bottom part (below horizon) - the reflection should taper off earlier / reflection is smaller and tapers to transparency (no hard line)
• top part (above horizon) background is 100% transparent as needs to sit over off-white gradient

[thetwopct]

@cjyabraham This is ready for review.

• Added Phippy to the footer of home page on website
• Uses custom srcset with webP and PNG versions of the image for mobile and desktop. On desktop the webP size is acceptable (250kb), PNG is 1Mb, but can't get it smaller without compromising quality
• Newsletter form is now aligned to the left (removed padding) to better align on the left side of the site. There was also an inconsistency where the select box was not padded, so now all form fields look the same.

The Phippy image has some white space to the left and right which needs trimming but @GarethAcidWorks said to go ahead with this version anyway. In future (when the characters next update?), the image should be trimmed to the green hills on edges, this will allow the image to easily go outside the page container and give a better effect on the page; that will also require some CSS changes.

[cjyabraham]

Looks great!