Skip to content

Instantly share code, notes, and snippets.

@comalex

comalex/gist:a0857e60188d17bb51653f00ca8bc22d

Created April 9, 2026 06:10
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save comalex/a0857e60188d17bb51653f00ca8bc22d to your computer and use it in GitHub Desktop.
Download ZIP
Services
Raw
gistfile1.txt
desktop:
https://www.figma.com/design/jaL0OPnttpFudgCKGdJ2MQ/ISPCC_Website-UI_Luckybeard?node-id=743-9920&m=dev
<div data-device="Desktop" data-type="Services and Programmes" style={{width: '100%', height: '100%', paddingTop: 80, paddingBottom: 80, position: 'relative', background: 'var(--color-bg-static-neutral-subtlest, white)', overflow: 'hidden', justifyContent: 'flex-start', alignItems: 'center', display: 'inline-flex'}}>
<div style={{width: 863.74, height: 777.22, left: 675, top: 328.10, position: 'absolute', transform: 'rotate(-24deg)', transformOrigin: 'top left', opacity: 0.70, background: 'linear-gradient(0deg, var(--primitives-color-tint-100, rgba(255, 255, 255, 0.20)) 0%, var(--primitives-color-tint-100, rgba(255, 255, 255, 0.20)) 100%), var(--color-bg-static-3-subtle, #D7C9EE)'}} />
<div style={{width: 566, paddingLeft: 160, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 40, display: 'inline-flex'}}>
<div data-size="Smalll" style={{justifyContent: 'flex-start', alignItems: 'center', gap: 16, display: 'inline-flex'}}>
<div data-leading-icon="false" data-selected="True" data-size="Large" data-state="Default" data-trailing-icon="false" style={{height: 44, minWidth: 68, paddingLeft: 12, paddingRight: 12, paddingTop: 8, paddingBottom: 8, background: 'var(--color-bg-static-3-strong, #6640A0)', borderRadius: 12, justifyContent: 'center', alignItems: 'center', gap: 8, display: 'flex'}}>
<div style={{flex: '1 1 0', textBoxTrim: 'trim-both', textBoxEdge: 'cap alphabetic', textAlign: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column', color: 'var(--color-text-inverse-strongest, white)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 18, wordWrap: 'break-word'}}>Services</div>
</div>
<div data-leading-icon="false" data-selected="False" data-size="Large" data-state="Default" data-trailing-icon="false" style={{height: 44, minWidth: 68, paddingLeft: 12, paddingRight: 12, paddingTop: 8, paddingBottom: 8, background: 'var(--color-compSpecific-selector-bg-unselected-default, rgba(255, 255, 255, 0))', borderRadius: 12, outline: '1.50px var(--color-compSpecific-selector-border-unselected-default, rgba(0, 0, 0, 0.40)) solid', outlineOffset: '-1.50px', justifyContent: 'center', alignItems: 'center', gap: 8, display: 'flex'}}>
<div style={{flex: '1 1 0', textBoxTrim: 'trim-both', textBoxEdge: 'cap alphabetic', textAlign: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column', color: 'var(--color-compSpecific-selector-textAndIcon-unselected-default, #737373)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 18, wordWrap: 'break-word'}}>Programmes</div>
</div>
</div>
<div style={{alignSelf: 'stretch', color: 'var(--color-text-strongest, #181818)', fontSize: 40, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 48, wordWrap: 'break-word'}}>Our services</div>
<div style={{alignSelf: 'stretch', color: 'var(--color-text-strong, #5B5B5B)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 25.20, wordWrap: 'break-word'}}>Lorem ipsum dolor sit amet consectetur. Tempor diam venenatis amet senectus aliquam mi. Et in vitae nisi iaculis. Non eget malesuada elementum varius nunc. Eu duis habitant sodales. Sollicitudin malesuada tempor curabitur nibh morbi quisque in viverra morbi. Eget metus pellentesque a vitae vitae tortor consec semper. Tristique pellentesque purus consequat semper ac.</div>
</div>
<div style={{width: 874, paddingLeft: 64, paddingRight: 64, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', display: 'inline-flex'}}>
<div style={{alignSelf: 'stretch', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 32, display: 'inline-flex', flexWrap: 'wrap', alignContent: 'flex-start'}}>
<div data-image="True" data-property-1="1" style={{width: 352, height: 216, paddingTop: 160, paddingBottom: 24, paddingLeft: 24, paddingRight: 24, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-3-default, #7F50C8)', overflow: 'hidden', borderRadius: 24, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 32, display: 'inline-flex'}}>
<img style={{width: 424, height: 283, left: -36, top: -33, position: 'absolute'}} src="https://placehold.co/424x283" />
<div style={{width: 301.81, height: 298.91, left: 23, top: -178.97, position: 'absolute', transform: 'rotate(-9deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-5-default, #FFA0D2)'}} />
<div style={{width: 104.62, height: 104.66, left: 36.40, top: 139.73, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-2-default, #FF4D00)'}} />
<div style={{width: 352, height: 72, left: 0, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'}}>Childline</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="2" style={{width: 352, height: 216, paddingTop: 160, paddingBottom: 24, paddingLeft: 24, paddingRight: 24, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-6-default, #2A7DE1)', overflow: 'hidden', borderRadius: 24, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 32, display: 'inline-flex'}}>
<img style={{width: 742, height: 425, left: -195, top: -54, position: 'absolute'}} src="https://placehold.co/742x425" />
<div style={{width: 301.81, height: 298.91, left: 352.29, top: 116.44, position: 'absolute', transform: 'rotate(-171deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-2-default, #FF4D00)'}} />
<div style={{width: 80.26, height: 79.95, left: 39.46, top: 104.01, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-4-default, #FFC600)'}} />
<div style={{width: 352, height: 100, left: 0, top: 116, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'flex-start', alignItems: 'flex-end', gap: 16, display: 'inline-flex'}}>
<div style={{flex: '1 1 0', color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'}}>Childline therapeutic support</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="3" style={{width: 352, height: 216, paddingTop: 160, paddingBottom: 24, paddingLeft: 24, paddingRight: 24, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-2-default, #FF4D00)', overflow: 'hidden', borderRadius: 24, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 32, display: 'inline-flex'}}>
<img style={{width: 455, height: 303, left: 400, top: 303, position: 'absolute', transform: 'rotate(180deg)', transformOrigin: 'top left'}} src="https://placehold.co/455x303" />
<div style={{width: 352, height: 72, left: 0, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{width: 301.81, height: 298.91, left: -49, top: -198.97, position: 'absolute', transform: 'rotate(-9deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-4-default, #FFC600)'}} />
<div style={{width: 78.71, height: 84.04, left: 36.36, top: 128.19, position: 'absolute', transform: 'rotate(-120deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-7-default, #1ECAD3)'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'}}>Missing children’s hotline</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="4" style={{width: 352, height: 216, paddingTop: 160, paddingBottom: 24, paddingLeft: 24, paddingRight: 24, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-50, rgba(0, 0, 0, 0.10)) 0%, var(--primitives-color-shade-50, rgba(0, 0, 0, 0.10)) 100%), var(--color-bg-static-7-default, #1ECAD3)', overflow: 'hidden', borderRadius: 24, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 32, display: 'inline-flex'}}>
<img style={{width: 412, height: 275, left: -56, top: -29, position: 'absolute'}} src="https://placehold.co/412x275" />
<div style={{width: 301.81, height: 298.91, left: 353.29, top: 97.44, position: 'absolute', transform: 'rotate(-171deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-8-default, #B4DDFF)'}} />
<div style={{width: 104.62, height: 104.66, left: 35.40, top: 141.73, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-4-default, #FFC600)'}} />
<div style={{width: 352, height: 72, left: 0, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'}}>Space from Anxiety</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="5" style={{width: 352, height: 216, paddingTop: 160, paddingBottom: 24, paddingLeft: 24, paddingRight: 24, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-1-default, #2E385F)', overflow: 'hidden', borderRadius: 24, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 32, display: 'inline-flex'}}>
<img style={{width: 556, height: 370, left: 433, top: 352, position: 'absolute', transform: 'rotate(180deg)', transformOrigin: 'top left'}} src="https://placehold.co/556x370" />
<div style={{width: 352, height: 72, left: 0, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{width: 301.81, height: 298.91, left: -42, top: -200.97, position: 'absolute', transform: 'rotate(-9deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-5-default, #FFA0D2)'}} />
<div style={{width: 80.26, height: 79.95, left: 80.46, top: 117.01, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-8-default, #B4DDFF)'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'}}>ISPCC Support line</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
</div>
</div>
</div>
// Services
color: 'var(--color-text-inverse-strongest, white)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 18, wordWrap: 'break-word'
---
// Programmes
color: 'var(--color-compSpecific-selector-textAndIcon-unselected-default, #737373)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 18, wordWrap: 'break-word'
---
// Our services
color: 'var(--color-text-strongest, #181818)', fontSize: 40, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 48, wordWrap: 'break-word'
---
// Lorem ipsum dolor sit amet consectetur. Tempor diam venenatis amet senectus aliquam mi. Et in vitae nisi iaculis. Non eget malesuada elementum varius nunc. Eu duis habitant sodales. Sollicitudin malesuada tempor curabitur nibh morbi quisque in viverra morbi. Eget metus pellentesque a vitae vitae tortor consec semper. Tristique pellentesque purus consequat semper ac.
color: 'var(--color-text-strong, #5B5B5B)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 25.20, wordWrap: 'break-word'
---
// Childline
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'
---
// Childline therapeutic support
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'
---
// Missing children’s hotline
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'
---
// Space from Anxiety
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'
---
// ISPCC Support line
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 28, wordWrap: 'break-word'
Mobile:
https://www.figma.com/design/jaL0OPnttpFudgCKGdJ2MQ/ISPCC_Website-UI_Luckybeard?node-id=796-10668&m=dev
<div data-device="Mobile" data-type="Services and Programmes" style={{width: '100%', height: '100%', paddingTop: 48, paddingBottom: 48, position: 'relative', background: 'var(--color-bg-static-neutral-subtlest, white)', overflow: 'hidden', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}>
<div style={{width: 863.74, height: 777.22, left: -390, top: 729.10, position: 'absolute', transform: 'rotate(-24deg)', transformOrigin: 'top left', opacity: 0.70, background: 'linear-gradient(0deg, var(--primitives-color-tint-100, rgba(255, 255, 255, 0.20)) 0%, var(--primitives-color-tint-100, rgba(255, 255, 255, 0.20)) 100%), var(--color-bg-static-3-subtle, #D7C9EE)'}} />
<div style={{alignSelf: 'stretch', paddingBottom: 40, paddingLeft: 24, paddingRight: 24, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 24, display: 'flex'}}>
<div data-size="Smalll" style={{justifyContent: 'flex-start', alignItems: 'center', gap: 14, display: 'inline-flex'}}>
<div data-leading-icon="false" data-selected="True" data-size="Large" data-state="Default" data-trailing-icon="false" style={{height: 44, minWidth: 68, paddingLeft: 12, paddingRight: 12, paddingTop: 8, paddingBottom: 8, background: 'var(--color-bg-static-3-strong, #6640A0)', borderRadius: 12, justifyContent: 'center', alignItems: 'center', gap: 8, display: 'flex'}}>
<div style={{flex: '1 1 0', textBoxTrim: 'trim-both', textBoxEdge: 'cap alphabetic', textAlign: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column', color: 'var(--color-text-inverse-strongest, white)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'}}>Services</div>
</div>
<div data-leading-icon="false" data-selected="False" data-size="Large" data-state="Default" data-trailing-icon="false" style={{height: 44, minWidth: 68, paddingLeft: 12, paddingRight: 12, paddingTop: 8, paddingBottom: 8, background: 'var(--color-compSpecific-selector-bg-unselected-default, rgba(255, 255, 255, 0))', borderRadius: 12, outline: '1.50px var(--color-compSpecific-selector-border-unselected-default, rgba(0, 0, 0, 0.40)) solid', outlineOffset: '-1.50px', justifyContent: 'center', alignItems: 'center', gap: 8, display: 'flex'}}>
<div style={{flex: '1 1 0', textBoxTrim: 'trim-both', textBoxEdge: 'cap alphabetic', textAlign: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column', color: 'var(--color-compSpecific-selector-textAndIcon-unselected-default, #737373)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'}}>Programmes</div>
</div>
</div>
<div style={{alignSelf: 'stretch', color: 'var(--color-text-strongest, #181818)', fontSize: 28, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 33.60, wordWrap: 'break-word'}}>Our services</div>
<div style={{alignSelf: 'stretch', color: 'var(--color-text-strong, #5B5B5B)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 25.20, wordWrap: 'break-word'}}>Lorem ipsum dolor sit amet consectetur. Tempor diam venenatis amet senectus aliquam mi. Et in vitae nisi iaculis. Non eget malesuada elementum varius nunc. Eu duis habitant sodales. Sollicitudin malesuada tempor curabitur nibh morbi quisque in viverra morbi. Eget metus pellentesque a vitae vitae tortor consec semper. Tristique pellentesque purus consequat semper ac.</div>
</div>
<div style={{flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', display: 'flex'}}>
<div style={{width: 327, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: 20, display: 'flex'}}>
<div data-image="True" data-property-1="1" style={{alignSelf: 'stretch', height: 216, paddingTop: 80, paddingBottom: 16, paddingLeft: 16, paddingRight: 16, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-3-default, #7F50C8)', overflow: 'hidden', borderRadius: 16, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 20, display: 'flex'}}>
<img style={{width: 424, height: 283, left: -48, top: -33, position: 'absolute'}} src="https://placehold.co/424x283" />
<div style={{width: 301.81, height: 298.91, left: 23, top: -178.97, position: 'absolute', transform: 'rotate(-9deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-5-default, #FFA0D2)'}} />
<div style={{width: 104.62, height: 104.66, left: 36.40, top: 139.73, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-2-default, #FF4D00)'}} />
<div style={{width: 352, height: 72, left: -12, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'}}>Childline</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="2" style={{alignSelf: 'stretch', height: 216, paddingTop: 80, paddingBottom: 16, paddingLeft: 16, paddingRight: 16, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-6-default, #2A7DE1)', overflow: 'hidden', borderRadius: 16, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 20, display: 'flex'}}>
<img style={{width: 742, height: 425, left: -207, top: -54, position: 'absolute'}} src="https://placehold.co/742x425" />
<div style={{width: 301.81, height: 298.91, left: 352.29, top: 116.44, position: 'absolute', transform: 'rotate(-171deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-2-default, #FF4D00)'}} />
<div style={{width: 80.26, height: 79.95, left: 39.46, top: 104.01, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-4-default, #FFC600)'}} />
<div style={{width: 352, height: 100, left: -12, top: 116, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'flex-start', alignItems: 'flex-end', gap: 14, display: 'inline-flex'}}>
<div style={{flex: '1 1 0', color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'}}>Childline therapeutic support</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="3" style={{alignSelf: 'stretch', height: 216, paddingTop: 80, paddingBottom: 16, paddingLeft: 16, paddingRight: 16, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-2-default, #FF4D00)', overflow: 'hidden', borderRadius: 16, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 20, display: 'flex'}}>
<img style={{width: 455, height: 303, left: 388, top: 303, position: 'absolute', transform: 'rotate(180deg)', transformOrigin: 'top left'}} src="https://placehold.co/455x303" />
<div style={{width: 352, height: 72, left: -12, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{width: 301.81, height: 298.91, left: -49, top: -198.97, position: 'absolute', transform: 'rotate(-9deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-4-default, #FFC600)'}} />
<div style={{width: 78.71, height: 84.04, left: 36.36, top: 128.19, position: 'absolute', transform: 'rotate(-120deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-7-default, #1ECAD3)'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'}}>Missing children’s hotline</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="4" style={{alignSelf: 'stretch', height: 216, paddingTop: 80, paddingBottom: 16, paddingLeft: 16, paddingRight: 16, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-50, rgba(0, 0, 0, 0.10)) 0%, var(--primitives-color-shade-50, rgba(0, 0, 0, 0.10)) 100%), var(--color-bg-static-7-default, #1ECAD3)', overflow: 'hidden', borderRadius: 16, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 20, display: 'flex'}}>
<img style={{width: 412, height: 275, left: -68, top: -29, position: 'absolute'}} src="https://placehold.co/412x275" />
<div style={{width: 301.81, height: 298.91, left: 353.29, top: 97.44, position: 'absolute', transform: 'rotate(-171deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-8-default, #B4DDFF)'}} />
<div style={{width: 104.62, height: 104.66, left: 35.40, top: 141.73, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-4-default, #FFC600)'}} />
<div style={{width: 352, height: 72, left: -12, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'}}>Space from Anxiety</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
<div data-image="True" data-property-1="5" style={{alignSelf: 'stretch', height: 216, paddingTop: 80, paddingBottom: 16, paddingLeft: 16, paddingRight: 16, position: 'relative', background: 'linear-gradient(0deg, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 0%, var(--primitives-color-shade-25, rgba(0, 0, 0, 0.04)) 100%), var(--color-bg-static-1-default, #2E385F)', overflow: 'hidden', borderRadius: 16, flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-start', gap: 20, display: 'flex'}}>
<img style={{width: 556, height: 370, left: 421, top: 352, position: 'absolute', transform: 'rotate(180deg)', transformOrigin: 'top left'}} src="https://placehold.co/556x370" />
<div style={{width: 352, height: 72, left: -12, top: 144, position: 'absolute', background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--primitives-color-shade-800, rgba(0, 0, 0, 0.90)) 100%)', backgroundBlendMode: 'hard_light'}} />
<div style={{width: 301.81, height: 298.91, left: -42, top: -200.97, position: 'absolute', transform: 'rotate(-9deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-5-default, #FFA0D2)'}} />
<div style={{width: 80.26, height: 79.95, left: 80.46, top: 117.01, position: 'absolute', transform: 'rotate(-112deg)', transformOrigin: 'top left', background: 'var(--color-bg-static-8-default, #B4DDFF)'}} />
<div style={{alignSelf: 'stretch', justifyContent: 'space-between', alignItems: 'center', display: 'inline-flex'}}>
<div style={{color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'}}>ISPCC Support line</div>
<div style={{width: 32, height: 32, position: 'relative'}}>
<div style={{width: 18.67, height: 18.67, left: 6.67, top: 6.67, position: 'absolute', outline: '1.50px var(--color-icon-inverse-strongest, white) solid', outlineOffset: '-0.75px'}} />
</div>
</div>
</div>
</div>
</div>
</div>
// Services
color: 'var(--color-text-inverse-strongest, white)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'
---
// Programmes
color: 'var(--color-compSpecific-selector-textAndIcon-unselected-default, #737373)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '500', lineHeight: 24, wordWrap: 'break-word'
---
// Our services
color: 'var(--color-text-strongest, #181818)', fontSize: 28, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 33.60, wordWrap: 'break-word'
---
// Lorem ipsum dolor sit amet consectetur. Tempor diam venenatis amet senectus aliquam mi. Et in vitae nisi iaculis. Non eget malesuada elementum varius nunc. Eu duis habitant sodales. Sollicitudin malesuada tempor curabitur nibh morbi quisque in viverra morbi. Eget metus pellentesque a vitae vitae tortor consec semper. Tristique pellentesque purus consequat semper ac.
color: 'var(--color-text-strong, #5B5B5B)', fontSize: 16, fontFamily: 'Poppins', fontWeight: '400', lineHeight: 25.20, wordWrap: 'break-word'
---
// Childline
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'
---
// Childline therapeutic support
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'
---
// Missing children’s hotline
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'
---
// Space from Anxiety
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'
---
// ISPCC Support line
color: 'var(--color-text-inverse-strongest, white)', fontSize: 20, fontFamily: 'Poppins', fontWeight: '600', lineHeight: 32, wordWrap: 'break-word'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment