Skip to content

Instantly share code, notes, and snippets.

@comalex

comalex/gist:dc40ac11a1333060a0554392e4fd3905

Created April 9, 2026 15:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save comalex/dc40ac11a1333060a0554392e4fd3905 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save comalex/dc40ac11a1333060a0554392e4fd3905 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<div data-device="Desktop" data-type="Support sectors" style="width: 100%; height: 100%; padding-left: 160px; padding-right: 160px; padding-top: 80px; padding-bottom: 80px; background: var(--color-bg-static-elevation-raised, #F9F9F9); overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex">
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 64px; display: flex">
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Ways you can support us</div>
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 40px; font-family: Poppins; font-weight: 600; line-height: 48px; word-wrap: break-word">You can help us by...</div>
</div>
<div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 32px; display: inline-flex">
<div data-cta-btn="False" data-cta-link="True" data-device="Mobile" style="flex: 1 1 0; align-self: stretch; padding: 24px; background: var(--color-bg-static-neutral-subtlest, white); box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.04), 0px 8px 24px -6px rgba(0, 0, 0, 0.11); border-radius: 24px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 32px; display: inline-flex">
<div data-type="16" style="width: 80px; height: 80px; position: relative; background: var(--primitives-color-transparent, rgba(255, 255, 255, 0))">
<div style="width: 68.13px; height: 68.13px; left: 5.52px; top: 5.52px; position: absolute; background: var(--color-bg-static-4-default, #FFC600)"></div>
<div style="width: 45.60px; height: 37.60px; left: 16.80px; top: 37.60px; position: absolute; background: var(--color-bg-static-6-default, #2A7DE1)"></div>
<div style="width: 37.60px; height: 36.80px; left: 20.80px; top: 3.20px; position: absolute; background: var(--color-bg-static-2-default, #FF4D00)"></div>
<div style="width: 11.20px; height: 12.80px; left: 42.40px; top: 12px; position: absolute; background: var(--color-bg-static-5-default, #FFA0D2)"></div>
<div style="width: 11.58px; height: 7.28px; left: 17.84px; top: 34.98px; position: absolute; transform: rotate(-114deg); transform-origin: top left; background: var(--color-bg-static-7-default, #1ECAD3)"></div>
<div style="width: 11.58px; height: 7.28px; left: 56px; top: 31.99px; position: absolute; transform: rotate(-66deg); transform-origin: top left; background: var(--color-bg-static-7-default, #1ECAD3)"></div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 28px; font-family: Poppins; font-weight: 600; line-height: 38.40px; word-wrap: break-word">Donating</div>
<div style="align-self: stretch; height: 42px; color: var(--color-text-strong, #5B5B5B); font-size: 16px; font-family: Poppins; font-weight: 400; line-height: 25.20px; word-wrap: break-word">At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; display: flex">
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Make a donation</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Give a corporate gift</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="False" style="align-self: stretch; height: 39px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Lodge funds from a challenge</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
</div>
</div>
</div>
<div data-cta-btn="False" data-cta-link="True" data-device="Mobile" style="flex: 1 1 0; padding: 24px; background: var(--color-bg-static-neutral-subtlest, white); box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.04), 0px 8px 24px -6px rgba(0, 0, 0, 0.11); border-radius: 24px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 32px; display: inline-flex">
<div data-type="17" style="width: 80px; height: 80px; position: relative; background: var(--primitives-color-transparent, rgba(255, 255, 255, 0))">
<div style="width: 68.13px; height: 68.13px; left: 5.52px; top: 5.52px; position: absolute; background: var(--color-bg-static-2-default, #FF4D00)"></div>
<div style="width: 58.37px; height: 52.23px; left: 18.40px; top: 24.80px; position: absolute; background: var(--color-bg-static-7-default, #1ECAD3)"></div>
<div style="width: 48.80px; height: 48.80px; left: 15.20px; top: 15.20px; position: absolute; background: var(--color-bg-static-4-default, #FFC600)"></div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 28px; font-family: Poppins; font-weight: 600; line-height: 38.40px; word-wrap: break-word">Take part in an event</div>
<div style="align-self: stretch; height: 42px; color: var(--color-text-strong, #5B5B5B); font-size: 16px; font-family: Poppins; font-weight: 400; line-height: 25.20px; word-wrap: break-word">At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; display: flex">
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">See our latest events</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Set up your own fundraiser</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="False" style="align-self: stretch; height: 39px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Get in touch</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
</div>
</div>
</div>
<div data-cta-btn="False" data-cta-link="True" data-device="Mobile" style="flex: 1 1 0; align-self: stretch; padding: 24px; background: var(--color-bg-static-neutral-subtlest, white); box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.04), 0px 8px 24px -6px rgba(0, 0, 0, 0.11); border-radius: 24px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 32px; display: inline-flex">
<div data-type="12" style="width: 80px; height: 80px; position: relative; background: var(--primitives-color-transparent, rgba(255, 255, 255, 0))">
<div style="width: 68.13px; height: 68.13px; left: 5.52px; top: 5.52px; position: absolute; background: var(--color-bg-static-6-default, #2A7DE1)"></div>
<div style="width: 35.85px; height: 16px; left: 57.71px; top: 43.20px; position: absolute; transform: rotate(45deg); transform-origin: top left; background: var(--color-bg-static-5-default, #FFA0D2)"></div>
<div style="width: 35.01px; height: 35.06px; left: 22.40px; top: 4.80px; position: absolute; background: var(--color-bg-static-2-default, #FF4D00)"></div>
<div style="width: 50.40px; height: 50.40px; left: 4px; top: 23.80px; position: absolute; background: var(--color-bg-static-4-default, #FFC600)"></div>
<div style="width: 14.40px; height: 2.40px; left: 23.20px; top: 53.40px; position: absolute; opacity: 0.80; outline: 2.73px var(--color-bg-static-6-strongest, #194B87) solid; outline-offset: -1.36px"></div>
</div>
<div style="align-self: stretch; flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 28px; font-family: Poppins; font-weight: 600; line-height: 38.40px; word-wrap: break-word">Volunteering</div>
<div style="align-self: stretch; height: 42px; color: var(--color-text-strong, #5B5B5B); font-size: 16px; font-family: Poppins; font-weight: 400; line-height: 25.20px; word-wrap: break-word">At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; display: flex">
<div data-underline="False" style="align-self: stretch; height: 39px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="width: 289px; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Volunteer with Childline</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// Ways you can support us
color: var(--color-text-strongest, #181818);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// You can help us by...
color: var(--color-text-strongest, #181818);
font-size: 40px;
font-family: Poppins;
font-weight: 600;
line-height: 48px;
word-wrap: break-word
---
// Donating
color: var(--color-text-strongest, #181818);
font-size: 28px;
font-family: Poppins;
font-weight: 600;
line-height: 38.40px;
word-wrap: break-word
---
// At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.
color: var(--color-text-strong, #5B5B5B);
font-size: 16px;
font-family: Poppins;
font-weight: 400;
line-height: 25.20px;
word-wrap: break-word
---
// Make a donation
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Give a corporate gift
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Lodge funds from a challenge
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Take part in an event
color: var(--color-text-strongest, #181818);
font-size: 28px;
font-family: Poppins;
font-weight: 600;
line-height: 38.40px;
word-wrap: break-word
---
// At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.
color: var(--color-text-strong, #5B5B5B);
font-size: 16px;
font-family: Poppins;
font-weight: 400;
line-height: 25.20px;
word-wrap: break-word
---
// See our latest events
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Set up your own fundraiser
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Get in touch
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Volunteering
color: var(--color-text-strongest, #181818);
font-size: 28px;
font-family: Poppins;
font-weight: 600;
line-height: 38.40px;
word-wrap: break-word
---
// At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.
color: var(--color-text-strong, #5B5B5B);
font-size: 16px;
font-family: Poppins;
font-weight: 400;
line-height: 25.20px;
word-wrap: break-word
---
// Volunteer with Childline
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
mobile
<div data-device="Mobile" data-type="Support sectors" style="width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; padding-top: 48px; padding-bottom: 48px; background: var(--color-bg-static-elevation-raised, #F9F9F9); overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex">
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 40px; display: flex">
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Ways you can support us</div>
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 28px; font-family: Poppins; font-weight: 600; line-height: 33.60px; word-wrap: break-word">You can help us by...</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: flex">
<div data-cta-btn="False" data-cta-link="True" data-device="Mobile" style="align-self: stretch; height: 421px; padding: 24px; background: var(--color-bg-static-neutral-subtlest, white); box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.04), 0px 8px 24px -6px rgba(0, 0, 0, 0.11); border-radius: 16px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: flex">
<div data-type="16" style="width: 60px; height: 60px; position: relative; background: var(--primitives-color-transparent, rgba(255, 255, 255, 0))">
<div style="width: 68.13px; height: 68.13px; left: -4.48px; top: -4.48px; position: absolute; background: var(--color-bg-static-4-default, #FFC600)"></div>
<div style="width: 34.20px; height: 28.20px; left: 12.60px; top: 28.20px; position: absolute; background: var(--color-bg-static-6-default, #2A7DE1)"></div>
<div style="width: 28.20px; height: 27.60px; left: 15.60px; top: 2.40px; position: absolute; background: var(--color-bg-static-2-default, #FF4D00)"></div>
<div style="width: 8.40px; height: 9.60px; left: 31.80px; top: 9px; position: absolute; background: var(--color-bg-static-5-default, #FFA0D2)"></div>
<div style="width: 8.69px; height: 5.46px; left: 13.38px; top: 26.24px; position: absolute; transform: rotate(-114deg); transform-origin: top left; background: var(--color-bg-static-7-default, #1ECAD3)"></div>
<div style="width: 8.69px; height: 5.46px; left: 42px; top: 24px; position: absolute; transform: rotate(-66deg); transform-origin: top left; background: var(--color-bg-static-7-default, #1ECAD3)"></div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 24px; font-family: Poppins; font-weight: 600; line-height: 33.60px; word-wrap: break-word">Donating</div>
<div style="align-self: stretch; color: var(--color-text-strong, #5B5B5B); font-size: 16px; font-family: Poppins; font-weight: 400; line-height: 25.20px; word-wrap: break-word">At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Make a donation</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Give a corporate gift</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="False" style="align-self: stretch; height: 39px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Lodge funds from a challenge</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
</div>
</div>
</div>
<div data-cta-btn="False" data-cta-link="True" data-device="Mobile" style="align-self: stretch; padding: 24px; background: var(--color-bg-static-neutral-subtlest, white); box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.04), 0px 8px 24px -6px rgba(0, 0, 0, 0.11); border-radius: 16px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: flex">
<div data-type="17" style="width: 60px; height: 60px; position: relative; background: var(--primitives-color-transparent, rgba(255, 255, 255, 0))">
<div style="width: 68.13px; height: 68.13px; left: -4.48px; top: -4.48px; position: absolute; background: var(--color-bg-static-2-default, #FF4D00)"></div>
<div style="width: 43.78px; height: 39.17px; left: 13.80px; top: 18.60px; position: absolute; background: var(--color-bg-static-7-default, #1ECAD3)"></div>
<div style="width: 36.60px; height: 36.60px; left: 11.40px; top: 11.40px; position: absolute; background: var(--color-bg-static-4-default, #FFC600)"></div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 24px; font-family: Poppins; font-weight: 600; line-height: 33.60px; word-wrap: break-word">Take part in an event</div>
<div style="align-self: stretch; color: var(--color-text-strong, #5B5B5B); font-size: 16px; font-family: Poppins; font-weight: 400; line-height: 25.20px; word-wrap: break-word">At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">See our latest events</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="True" style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Set up your own fundraiser</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
<div data-indent="None" data-weight="Thin" style="align-self: stretch; overflow: hidden; border-radius: 1000px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
<div style="align-self: stretch; height: 0px; outline: 1px var(--color-border-default, #8D8D8D) solid; outline-offset: -0.50px"></div>
</div>
</div>
<div data-underline="False" style="align-self: stretch; height: 39px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Get in touch</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
</div>
</div>
</div>
<div data-cta-btn="False" data-cta-link="True" data-device="Mobile" style="align-self: stretch; height: 390px; padding: 24px; background: var(--color-bg-static-neutral-subtlest, white); box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.04), 0px 8px 24px -6px rgba(0, 0, 0, 0.11); border-radius: 16px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; display: flex">
<div data-type="12" style="width: 60px; height: 60px; position: relative; background: var(--primitives-color-transparent, rgba(255, 255, 255, 0))">
<div style="width: 68.13px; height: 68.13px; left: -4.48px; top: -4.48px; position: absolute; background: var(--color-bg-static-6-default, #2A7DE1)"></div>
<div style="width: 26.26px; height: 26.29px; left: 16.80px; top: 3.60px; position: absolute; background: var(--color-bg-static-2-default, #FF4D00)"></div>
<div style="width: 37.80px; height: 37.80px; left: 3px; top: 17.85px; position: absolute; background: var(--color-bg-static-4-default, #FFC600)"></div>
<div style="width: 10.80px; height: 1.80px; left: 17.40px; top: 40.05px; position: absolute; opacity: 0.80; outline: 2.73px var(--color-bg-static-6-strongest, #194B87) solid; outline-offset: -1.36px"></div>
</div>
<div style="align-self: stretch; flex: 1 1 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; display: flex">
<div style="align-self: stretch; color: var(--color-text-strongest, #181818); font-size: 24px; font-family: Poppins; font-weight: 600; line-height: 33.60px; word-wrap: break-word">Volunteering</div>
<div style="align-self: stretch; height: 42px; color: var(--color-text-strong, #5B5B5B); font-size: 16px; font-family: Poppins; font-weight: 400; line-height: 25.20px; word-wrap: break-word">At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.</div>
</div>
<div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
<div data-underline="False" style="align-self: stretch; height: 39px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
<div style="align-self: stretch; justify-content: space-between; align-items: center; display: inline-flex">
<div style="justify-content: center; display: flex; flex-direction: column; color: var(--color-text-brand-1, #2E385F); font-size: 16px; font-family: Poppins; font-weight: 600; line-height: 25.20px; word-wrap: break-word">Volunteer with Childline</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 14px; height: 14px; left: 5px; top: 5px; position: absolute; outline: 1.50px var(--color-icon-brand-1, #2E385F) solid; outline-offset: -0.75px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// Ways you can support us
color: var(--color-text-strongest, #181818);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// You can help us by...
color: var(--color-text-strongest, #181818);
font-size: 28px;
font-family: Poppins;
font-weight: 600;
line-height: 33.60px;
word-wrap: break-word
---
// Donating
color: var(--color-text-strongest, #181818);
font-size: 24px;
font-family: Poppins;
font-weight: 600;
line-height: 33.60px;
word-wrap: break-word
---
// At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.
color: var(--color-text-strong, #5B5B5B);
font-size: 16px;
font-family: Poppins;
font-weight: 400;
line-height: 25.20px;
word-wrap: break-word
---
// Make a donation
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Give a corporate gift
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Lodge funds from a challenge
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Take part in an event
color: var(--color-text-strongest, #181818);
font-size: 24px;
font-family: Poppins;
font-weight: 600;
line-height: 33.60px;
word-wrap: break-word
---
// At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.
color: var(--color-text-strong, #5B5B5B);
font-size: 16px;
font-family: Poppins;
font-weight: 400;
line-height: 25.20px;
word-wrap: break-word
---
// See our latest events
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Set up your own fundraiser
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Get in touch
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
---
// Volunteering
color: var(--color-text-strongest, #181818);
font-size: 24px;
font-family: Poppins;
font-weight: 600;
line-height: 33.60px;
word-wrap: break-word
---
// At nunc consectetur nibh ac egestas. Ipsum dui netus velit eget facilisi.
color: var(--color-text-strong, #5B5B5B);
font-size: 16px;
font-family: Poppins;
font-weight: 400;
line-height: 25.20px;
word-wrap: break-word
---
// Volunteer with Childline
color: var(--color-text-brand-1, #2E385F);
font-size: 16px;
font-family: Poppins;
font-weight: 600;
line-height: 25.20px;
word-wrap: break-word
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment