<section class="M10">
<div class="row clr-grey-light">
<div class="info-set">
<div class="info-set__inner">
<div class="info-set__panel info-set__panel--half">
<div class="info-set__panel__inner clr-white">
<div class="stat">
<div class="stat__label stat__label--split">
<em class="stat__label__start">Start</em>
<em class="stat__label__end">Finish</em>
</div>
<!--/stat__label-->
<div class="stat__value stat__value--progress">
<div class="stat__value__line" style="width:80%">
<strong class="stat__value__roundal" aria-label="80% towards target">8.0</strong>
</div>
<!--/stat__value__line-->
</div>
<!--/stat__value-->
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__panel-->
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner clr-white">
<div class="stat stat--full">
<em class="stat__label">Supporters</em>
<strong class="stat__value h1">843</strong>
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__panel-->
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner clr-white">
<div class="stat stat--full">
<em class="stat__label">Target</em>
<strong class="stat__value h1">£20,000</strong>
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__panel-->
</div>
<!--/info-set__inner-->
</div>
<!--/info-set-->
</div>
<!--/row-->
</section><section class="M12a">
<div class="row">
<div class="imageset">
<div class="imageset__inner">
<div class="imageset__main">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/700x440" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x400" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/480x300" alt="" />
</picture>
</div>
<!--/imageset__main-->
<div class="imageset__sub">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/700x220/aaaaaa" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200/aaaaaa" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/480x150/aaaaaa" alt="" />
</picture>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/700x220/999999" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200/999999" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/480x150/999999" alt="" />
</picture>
</div>
<!--/imageset__sub-->
</div>
<!--/imageset__inner-->
</div>
<!--/imageset-->
</div>
<!--/row-->
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit magna tellus, vitae ultricies erat mollis ac. In sodales ipsum a dui rhoncus vestibulum. Ut et felis ac lectus ultricies malesuada. Etiam est dolor, maximus eget nisl sit amet, pharetra condimentum nulla. Integer lacinia risus sed eros tristique, vitae posuere justo pharetra. Mauris lobortis sapien eu imperdiet blandit.
<section class="M21a">
<div class="row row--flush">
<div class="hero hero--xtall">
<div class="hero__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/hero-girl-and-graff.png" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/520x200" alt="" />
</picture>
</div>
<!--/hero__media-->
<div class="hero__content clr-black-alpha">
<div class="hero__content__inner">
<div class="hero__copy">
<h2 class="hero__copy__title h3">Featured event</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit magna tellus, vitae ultricies erat mollis ac. In sodales ipsum a dui rhoncus vestibulum. Ut et felis ac lectus ultricies malesuada. Etiam est dolor, maximus eget nisl sit amet,
pharetra condimentum nulla. Integer lacinia risus sed eros tristique, vitae posuere justo pharetra. Mauris lobortis sapien eu imperdiet blandit.</p>
<p class="hero__copy__action"><a href="#" class="btn"><span>Donate to this appeal</span></a></p>
</div>
<!--/hero__copy-->
</div>
<!--/hero__content__inner-->
</div>
<!--/hero__content-->
</div>
<!--/hero-->
</div>
<!--/row-->
</section><section class="M29a">
<div class="row row--flush clr-yellow">
<div class="cta-inline">
<h2 class="cta-inline__title">Are you homeless, sofa surfing or feel you're maybe at risk?</h2>
<div class="cta-inline__action"><a href="#" class="btn"><span>Get help now</span></a></div>
</div>
<!--/cta-inline-->
</div>
<!--/row-->
</section>If you're homeless or at risk of becoming homeless, or fear that your life maybe at risk, we can help you find the advice you need.
<section class="M29b">
<div class="row clr-teal">
<h2 class="title title--dot">Are you young, homeless and in need of help?</h2>
<div class="copy">
<p class="lead">If you're homeless or at risk of becoming homeless, or fear that your life maybe at risk, we can help you find the advice you need.</p>
<p class="copy__action">
<a href="#" class="btn"><span>Get help now</span></a>
</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>Download the Sleep Out pack (968kb pdf)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit magna tellus, vitae ultricies erat mollis ac.
<section class="M2">
<div class="row clr-teal">
<div class="download download--invert">
<div class="download__icon"><a href="#"><i class="icon-download" aria-label="Download the latest Room Sponsor updates"></i></a></div>
<p class="download__copy"><a href="#">Download the Sleep Out pack</a> (968kb pdf)</p>
</div>
<!--/download-->
<div class="copy copy--tight">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit magna tellus, vitae ultricies erat mollis ac.</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>
<div class="M31a">
<div class="row row--flush row--allow-overflow">
<div class="masthead">
<div class="masthead__inner">
<div class="masthead__logo">
<a href="#"><img src="/assets/toolkit/images/logo-centrepoint.png" alt="Centrepoint: Give homeless young people a future" /></a>
</div>
<!--/masthead__logo-->
<nav class="masthead__nav">
<ul class="masthead__nav__list">
<li class="masthead__nav__item"><a href="#">Contact us</a></li>
<li class="masthead__nav__item"><a href="#">For professionals</a></li>
<li class="masthead__nav__item masthead__nav__item--search" data-search-toggle>
<a href="#form-search" class="masthead__nav__search__toggle masthead__nav__search__toggle--show" data-search-trigger-show aria-label="Show search form"><i class="icon-search"><span class="icon-hide-text">Show search</span></i></a>
<a href="#form-search" class="masthead__nav__search__toggle masthead__nav__search__toggle--hide" data-search-trigger-hide aria-label="Hide search form"><i class="icon-cross"><span class="icon-hide-text">Hide search</span></i></a>
<form role="search" class="form--singlet masthead__nav__search__form" method="post" action="#" id="form-search" data-search-toggle-form data-fuzzy-search="/assets/toolkit/json/countries.json" aria-hidden="true">
<div class="form--singlet__field">
<input class="form--singlet__input" type="text" id="form-search__ff-search" name="form-search__ff-search" placeholder="Search" aria-label="Search" data-search-toggle-field data-fuzzy-search-field />
</div>
<div class="form--singlet__action">
<button class="form--singlet__button" type="submit" data-search-toggle-submit><i class="icon-search"><span class="icon-hide-text">Go</span></i></button>
</div>
</form>
</li>
</ul>
</nav>
<!--/masthead__nav-->
<div class="masthead__donate">
<a href="#" class="btn btn--primary"><span>Donate</span></a>
</div>
<!--/masthead__donate-->
</div>
<!--/masthead-->
</div>
<!--/masthead-->
</div>
<!--/row-->
</div>
<!--/M31a-->Many of the young people Centrepoint work with have slept rough - in parks, under bridges or in stairwells. We find a huge number of young people in London have spent their nights on the city's night buses. But there are thousands of other homeless young people that you may never see...the 'hidden homeless'.
<section class="M32a">
<div class="row">
<h2 class="title title--dot">What is Youth Homelessness?</h2>
<div class="copy">
<p class="lead">Many of the young people Centrepoint work with have slept rough - in parks, under bridges or in stairwells. We find a huge number of young people in London have spent their nights on the city's night buses. But there are thousands of other homeless
young people that you may never see...the 'hidden homeless'.</p>
<p class="copy__action">
<a href="#" class="btn"><span>Read about the issue in full</span></a>
</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>Providing safe housing, access to health and education services as well as training all costs a great deal. We rely on donations and fundraising to help support our young vulnerable people and need your help.
<section class="M32b">
<div class="row">
<h2 class="title title--dot">We do amazing work but need your help</h2>
<div class="copy">
<p class="lead">Providing safe housing, access to health and education services as well as training all costs a great deal. We rely on donations and fundraising to help support our young vulnerable people and need your help.</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>
John is the eldest of three children. He had a troubled and unstable childhood, with his schizophrenic father leaving the family when John was just four years old. John's mother would often take her frustrations out on her children and as the only boy, John often bore the brunt of her attacks. John's earliest memory is being kicked hard in the stomach by his mother. He was just five at the time.
<section class="M32c">
<div class="row row--flush">
<div class="hero hero--tall hero--invert hero--half hero--content-right">
<div class="hero__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/hero-boy-back-and-park-half.png" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/520x200" alt="" />
</picture>
<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
<div class="hero__media__mask"><span class="hero__media__mask__overlay" style="top: 2%; left: 28%; width: 580px; height: 580px;"></span></div>
</div>
<!--/hero__media-->
<div class="hero__content">
<div class="hero__content__inner">
<div class="hero__copy">
<h2 class="hero__copy__title h3">John's story</h2>
<blockquote class="quote quote--pull-left quote--grey-light">
<p>John is the eldest of three children. He had a troubled and unstable childhood, with his schizophrenic father leaving the family when John was just four years old. John's mother would often take her frustrations out on her children and as the only
boy, John often bore the brunt of her attacks. John's earliest memory is being kicked hard in the stomach by his mother. He was just five at the time.</p>
</blockquote>
<p class="hero__copy__action hero__copy__indent"><a href="#" class="btn"><span>Read John's full story</span></a></p>
</div>
<!--/hero__copy-->
</div>
<!--/hero__content__inner-->
</div>
<!--/hero__content-->
</div>
<!--/hero-->
</div>
<!--/row-->
</section>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.
For every £1 we receive in donations and fundraising, we use approximately £0.85p to provide young vulnerable people with the safe housing and essential services they need to survive. We also use our income across other are of the charity.
<section class="M32d">
<div class="row clr-yellow">
<div class="media-block">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<figure class="media-block__media__figure">
<a href="#"><img src="http://placehold.it/440x440" alt="" /></a>
<figcaption>This is some optional text under the graphic</figcaption>
</figure>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h3">How we use your donation</h2>
<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
<p>For every £1 we receive in donations and fundraising, we use approximately £0.85p to provide young vulnerable people with the safe housing and essential services they need to survive. We also use our income across other are of the charity.</p>
<p class="media-block__action"><a href="#" class="btn"><span>See our financials</span></a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/row-->
</section>John is the eldest of three children. He had a troubled and unstable childhood, with his schizophrenic father leaving the family when John was just four years old. John's mother would often take her frustrations out on her children and as the only boy, John often bore the brunt of her attacks. John's earliest memory is being kicked hard in the stomach by his mother. He was just five at the time.
<section class="M32e">
<div class="row row--flush">
<div class="hero hero--tall hero--invert hero--half">
<div class="hero__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/hero-boy-back-and-park-half.png" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/520x200" alt="" />
</picture>
<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
<div class="hero__media__mask"><span class="hero__media__mask__overlay" style="top: 2%; left: 28%; width: 580px; height: 580px;"></span></div>
</div>
<!--/hero__media-->
<div class="hero__content">
<div class="hero__content__inner">
<div class="hero__copy">
<h2 class="hero__copy__title h3">John's story</h2>
<blockquote class="quote quote--pull-left quote--grey-light">
<p>John is the eldest of three children. He had a troubled and unstable childhood, with his schizophrenic father leaving the family when John was just four years old. John's mother would often take her frustrations out on her children and as the only
boy, John often bore the brunt of her attacks. John's earliest memory is being kicked hard in the stomach by his mother. He was just five at the time.</p>
</blockquote>
<p class="hero__copy__action hero__copy__indent"><a href="#" class="btn"><span>Read John's full story</span></a></p>
</div>
<!--/hero__copy-->
</div>
<!--/hero__content__inner-->
</div>
<!--/hero__content-->
</div>
<!--/hero-->
</div>
<!--/row-->
</section>Centrepoint provides young people in need with safe accomodation and access to services for up to two years, depending on their circumstances. From this foundation, they can begin to tackle the problems that led them to become homeless. We help them to learn to trust people again and develop their self-respect.
<section class="M32f">
<div class="row">
<h2 class="title title--dot">So what's the solution?</h2>
<div class="copy">
<p class="lead">Centrepoint provides young people in need with safe accomodation and access to services for up to two years, depending on their circumstances. From this foundation, they can begin to tackle the problems that led them to become homeless. We help them
to learn to trust people again and develop their self-respect.</p>
<p class="copy__action">
<a href="#" class="btn"><span>Read more about the solution</span></a>
</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>We rely on lots of different help from people who have a passion for seeing young people get ahead in life. Take a look and see if there's something you could help us with today.
<section class="M3a">
<div class="row clr-grey-light">
<h2 class="title title--dot">There are plenty of other ways to help us</h2>
<div class="copy">
<p class="lead">We rely on lots of different help from people who have a passion for seeing young people get ahead in life. Take a look and see if there's something you could help us with today.</p>
</div>
<!--/copy-->
<div class="promos promos--with-lead">
<div class="promos__inner">
<div class="promos__item promos__item--lead">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280 " alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<!-- <h2 class="promos__item__title h4 h-secondary"><a href="#">Lead item title</a></h2> -->
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Call to action</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">Item title</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">Item title</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.
We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.
We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.
We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.
<section class="M32h">
<div class="row clr-grey-light">
<div class="masonry masonry--articles">
<h2 class="masonry__title title">Latest news</h2>
<div class="masonry__list" data-load-more aria-live="polite">
<div class="masonry__item">
<div class="article clr-white">
<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
<h2 class="article__title h4 h-secondary"><a href="#">Formally homeless Londoner opens his first art collection at Turner House</a></h2>
<div class="article__summary">
<div class="article__media">
<a href="#">
<img src="http://placehold.it/170x110" alt="" />
</a>
</div>
<!--/article__summary__media-->
<div class="article__copy">
<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
</div>
<!--/article__copy-->
</div>
<!--/article__summary-->
</div>
<!--/article-->
</div>
<!--/masonry__item-->
<div class="masonry__item">
<div class="article clr-white">
<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
<div class="article__summary">
<div class="article__copy">
<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
</div>
<!--/article__copy-->
</div>
<!--/article__summary-->
</div>
<!--/article-->
</div>
<!--/masonry__item-->
<div class="masonry__item">
<div class="article clr-white">
<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
<h2 class="article__title h4 h-secondary"><a href="#">Formally homeless Londoner opens his first art collection at Turner House</a></h2>
</div>
<!--/article-->
</div>
<!--/masonry__item-->
<div class="masonry__item">
<div class="article clr-white">
<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
<div class="article__summary">
<div class="article__copy">
<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
</div>
<!--/article__copy-->
</div>
<!--/article__summary-->
</div>
<!--/article-->
</div>
<!--/masonry__item-->
<div class="masonry__item">
<div class="article clr-white">
<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
</div>
<!--/article-->
</div>
<!--/masonry__item-->
<div class="masonry__item">
<div class="article clr-white">
<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
<div class="article__summary">
<div class="article__copy">
<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
</div>
<!--/article__copy-->
</div>
<!--/article__summary-->
</div>
<!--/article-->
</div>
<!--/masonry__item-->
<div class="masonry__more" data-load-more-trigger-wrap>
<a href="/assets/toolkit/ajaxhtml/masonry--articles--set-1.html" class="btn load-more__trigger" data-load-more-trigger><span>See more news</span></a>
</div>
<!--/load__more-->
<div class="masonry__load load">
<div data-load-more-loader class="load__loader is-hidden">Loading...</div>
<div data-load-more-error class="load__error is-hidden">Oops, there was a problem retrieving more items - please try again</div>
</div>
<!--/load-->
</div>
<!--/masonry__list-->
</div>
<!--/masonry-->
</div>
<!--/row-->
</section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<section class="M32i">
<div class="row">
<h2 class="title title--dot">Sign up to our newsletter</h2>
<div class="copy">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<!--/copy-->
<form class="form--standard form--validate form--inline" method="post" action="#" id="form-newsletter">
<div class="field">
<label for="form-newsletter__ff-email" class="field__label">Your email <span class="field__required">* <i>(required)</i></span></label>
<input type="email" id="form-newsletter__ff-email" name="form-newsletter__ff-email" placeholder="Your email *" aria-label="Your email (required)" required data-msg-required="Email is a required field" data-msg-email="Please provide a valid email address"
/>
</div>
<div class="form__action">
<button type="submit" class="btn"><span>Sign up</span></button>
</div>
<!--/form__action-->
</form>
</div>
<!--/row-->
</section>Will you help Abbi move on in life, so we can get more young people off the streets?
There are up to 83,000 young people experiencing homelessness every year. The more young people we can support into their first home the better their chances of employment and a long-term secure home.
<section class="M32j">
<div class="row row--flush">
<div class="hero hero--xtall">
<div class="hero__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/hero-girl-and-graff.png" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/520x200" alt="" />
</picture>
</div>
<!--/hero__media-->
<div class="hero__content clr-black-alpha">
<div class="hero__content__inner">
<div class="hero__copy">
<h2 class="hero__copy__title h3">Featured event</h2>
<p>Will you help Abbi move on in life, so we can get more young people off the streets?</p>
<p>There are up to 83,000 young people experiencing homelessness every year. The more young people we can support into their first home the better their chances of employment and a long-term secure home.</p>
<div class="stat-set stat-set--invert stat-set--black-alpha">
<div class="stat-set__item">
<div class="stat stat--invert">
<em class="stat__label">Raised</em>
<strong class="stat__value h1">£25,000</strong>
</div>
<!--/stat-->
</div>
<!--/stat-set__item-->
<div class="stat-set__item">
<div class="stat stat--invert">
<em class="stat__label">Raised</em>
<strong class="stat__value h1">£25,000</strong>
</div>
<!--/stat-->
</div>
<!--/stat-set__item-->
<div class="stat-set__item">
<div class="stat stat--invert">
<em class="stat__label">Raised</em>
<strong class="stat__value h1">£25,000</strong>
</div>
<!--/stat-->
</div>
<!--/stat-set__item-->
</div>
<!--/stat-set-->
<p class="hero__copy__action"><a href="#" class="btn"><span>Donate to this appeal</span></a></p>
</div>
<!--/hero__copy-->
</div>
<!--/hero__content__inner-->
</div>
<!--/hero__content-->
</div>
<!--/hero-->
</div>
<!--/row-->
</section>
<section class="M33a">
<div class="row row--flush-horizontal">
<div class="overlays">
<div class="overlays__inner">
<div class="overlays__item">
<div class="overlays__item__inner">
<a href="#" class="overlays__item__link">
<div class="overlays__item__media" data-image-cover>
<img class="overlays__item__media" src="/assets/toolkit/images/content/overlay-girl-blonde.png" alt="" />
</div>
<!--/overlays__item__media-->
<div class="overlays__item__content">
<div class="overlays__item__content__inner">
<h2 class="h3">Services</h2>
<p class="lead">We provide a safe place for young people to live and give them a better future.</p>
</div>
<!--/overlays__item__content__inner-->
</div>
<!--/overlays__item__content-->
</a>
</div>
<!--/overlays__item__inner-->
</div>
<!--/overlays__item-->
<div class="overlays__item">
<div class="overlays__item__inner">
<a href="#" class="overlays__item__link">
<div class="overlays__item__media" data-image-cover>
<img class="overlays__item__media" src="/assets/toolkit/images/content/overlay-girl-blonde.png" alt="" />
</div>
<!--/overlays__item__media-->
<div class="overlays__item__content">
<div class="overlays__item__content__inner">
<h2 class="h3">Services</h2>
<p class="lead">We provide a safe place for young people to live and give them a better future.</p>
</div>
<!--/overlays__item__content__inner-->
</div>
<!--/overlays__item__content-->
</a>
</div>
<!--/overlays__item__inner-->
</div>
<!--/overlays__item-->
</div>
<!--/overlays__inner-->
</div>
<!--/overlays-->
</div>
<!--/row-->
</section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<section class="M33b">
<div class="row">
<div class="promos">
<div class="promos__inner">
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section><section class="M33c">
<div class="row">
<div class="promos promos--mini">
<div class="promos__inner">
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section><section class="M33d">
<div class="row clr-grey-light">
<div class="promos">
<div class="promos__inner">
<div class="promos__item">
<div class="promos__item__inner">
<figure class="promos__item__figure">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
</div>
<!--/promos__item__copy-->
</figure>
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<figure class="promos__item__figure">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
</div>
<!--/promos__item__copy-->
</figure>
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<figure class="promos__item__figure">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
</div>
<!--/promos__item__copy-->
</figure>
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section><section class="M33e">
<div class="row row--flush-horizontal">
<div class="overlays">
<div class="overlays__inner">
<div class="overlays__item">
<div class="overlays__item__inner">
<a href="#" class="overlays__item__link">
<div class="overlays__item__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/overlay-girl-blonde.png" media="(min-width: 640px)" />
<!--[if IE 9]></video><![endif]-->
<img class="overlays__item__media" src="http://placehold.it/320x280" alt="" />
</picture>
</div>
<!--/overlays__item__media-->
<div class="overlays__item__content">
<div class="overlays__item__content__inner">
<h2 class="h3">Services</h2>
<p class="lead">We provide a safe place for young people to live and give them a better future.</p>
</div>
<!--/overlays__item__content__inner-->
</div>
<!--/overlays__item__content-->
</a>
</div>
<!--/overlays__item__inner-->
</div>
<!--/overlays__item-->
<div class="overlays__item">
<div class="overlays__item__inner">
<a href="#" class="overlays__item__link">
<div class="overlays__item__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/overlay-girl-blonde.png" media="(min-width: 640px)" />
<!--[if IE 9]></video><![endif]-->
<img class="overlays__item__media" src="http://placehold.it/320x280" alt="" />
</picture>
</div>
<!--/overlays__item__media-->
<div class="overlays__item__content">
<div class="overlays__item__content__inner">
<h2 class="h3">Services</h2>
<p class="lead">We provide a safe place for young people to live and give them a better future.</p>
</div>
<!--/overlays__item__content__inner-->
</div>
<!--/overlays__item__content-->
</a>
</div>
<!--/overlays__item__inner-->
</div>
<!--/overlays__item-->
</div>
<!--/overlays__inner-->
</div>
<!--/overlays-->
</div>
<!--/row-->
</section>raised by our amazing fundraisers
raised by our amazing fundraisers
<section class="M33f">
<div class="row clr-grey-light">
<div class="media-block-grid">
<div class="media-block-grid__inner">
<div class="media-block-grid__item">
<div class="media-block media-block--cover clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x220" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title">16.3 Million</h2>
<p class="lead">raised by our amazing fundraisers</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-grid__item-->
<div class="media-block-grid__item">
<div class="media-block media-block--cover clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x220" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title">16.3 Million</h2>
<p class="lead">raised by our amazing fundraisers</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-grid__item-->
</div>
<!--/media-block-grid__inner-->
</div>
<!--/media-block-grid-->
</div>
<!--/row-->
</section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<section class="M33g">
<div class="row">
<div class="promos">
<div class="promos__inner">
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section>We rely on lots of different help from people who have a passion for seeing young people get ahead in life. Take a look and see if there's something you could help us with today.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<section class="M33h">
<div class="row">
<h2 class="title title--dot">There are plenty of ways to support us</h2>
<div class="copy">
<p class="lead">We rely on lots of different help from people who have a passion for seeing young people get ahead in life. Take a look and see if there's something you could help us with today.</p>
</div>
<!--/copy-->
<div class="promos promos--lrg-space">
<div class="promos__inner">
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section><section class="M33i">
<div class="row">
<h2 class="title h3">Why young people become homeless in numbers</h2>
<div class="promos">
<div class="promos__inner">
<div class="promos__item">
<div class="promos__item__inner">
<figure class="promos__item__figure">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
</div>
<!--/promos__item__copy-->
</figure>
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<figure class="promos__item__figure">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
</div>
<!--/promos__item__copy-->
</figure>
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item">
<div class="promos__item__inner">
<figure class="promos__item__figure">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
</div>
<!--/promos__item__copy-->
</figure>
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
</div>
<!--/row-->
</section>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.
Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.
Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.
Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.
<section class="M33j">
<div class="row clr-yellow">
<div class="media-block-grid">
<div class="media-block-grid__inner">
<div class="media-block-grid__item">
<div class="media-block media-block--cover clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x220" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h4 h-secondary">Housing</h2>
<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-grid__item-->
<div class="media-block-grid__item">
<div class="media-block media-block--cover clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x220" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h4 h-secondary">Housing</h2>
<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-grid__item-->
<div class="media-block-grid__item">
<div class="media-block media-block--cover clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x220" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h4 h-secondary">Housing</h2>
<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-grid__item-->
<div class="media-block-grid__item">
<div class="media-block media-block--cover clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x220" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h4 h-secondary">Housing</h2>
<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-grid__item-->
</div>
<!--/media-block-grid__inner-->
</div>
<!--/media-block-grid-->
</div>
<!--/row-->
</section><section class="M33l">
<div class="row">
<h2 class="title h3">See other events</h2>
<nav class="pager">
<div class="pager__inner">
<div class="pager__item pager__item--prev">
<a href="#" class="pager__item__link">
<img class="pager__item__media" src="http://placehold.it/200x140" alt="" />
<div class="pager__item__text"><span>Adam Buxton joins Laughing Point</span></div>
</a>
</div>
<!--/pager__item-->
<div class="pager__item pager__item--next">
<a href="#" class="pager__item__link">
<img class="pager__item__media" src="http://placehold.it/200x140" alt="" />
<div class="pager__item__text"><span>The Yorkshire Three Peak Challenge</span></div>
</a>
</div>
<!--/pager__item-->
</div>
<!--/pager__inner-->
</nav>
</div>
<!--/row-->
</section><section class="M35a">
<div class="row clr-grey-light">
<div class="donate">
<h2 class="donate__title h4">Surprise us</h2>
<form class="donate__form form form--validate" action="#" method="" id="form-donate">
<div class="field">
<label for="form-donate__ff-amount" class="field__label">Donation amount <span class="field__required">* <i>(required)</i></span></label>
<div class="field__prefixed field__suffixed">
<span class="field__prefixed__prefix">£</span>
<input type="text" id="form-donate__ff-amount" name="form-donate__ff-amount" aria-label="Donation amount (required)" required data-msg-required="Please provide a donation amount" min="1" step="any" data-msg-min="Please enter a valid amount of £1 or more"
/>
<div class="field__suffixed__suffix">Monthly</div>
</div>
</div>
<div class="form__action form__action--small">
<button type="submit" class="btn"><span>Donate</span></button>
</div>
<!--/form__action-->
</form>
<p class="donate__or">Or</p>
<ul class="donate__alt">
<li><a href="#">Give by card</a></li>
<li><a href="#">Give by PayPal</a></li>
</ul>
</div>
<!--/donate-->
</div>
<!--/row-->
</section><section class="M35b">
<div class="row clr-grey-light">
<div class="promos">
<div class="promos__inner">
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">single</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by card</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">single</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by card</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">single</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by card</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
<div class="donate">
<h2 class="donate__title h4">Surprise us</h2>
<form class="donate__form form form--validate" action="#" method="" id="form-donate">
<div class="field">
<label for="form-donate__ff-amount" class="field__label">Donation amount <span class="field__required">* <i>(required)</i></span></label>
<div class="field__prefixed">
<span class="field__prefixed__prefix">£</span>
<input type="text" id="form-donate__ff-amount" name="form-donate__ff-amount" aria-label="Donation amount (required)" required data-msg-required="Please provide a donation amount" min="1" step="any" data-msg-min="Please enter a valid amount of £1 or more"
/>
</div>
</div>
<div class="form__action form__action--small">
<button type="submit" class="btn"><span>Donate</span></button>
</div>
<!--/form__action-->
</form>
<p class="donate__or">Or</p>
<ul class="donate__alt">
<li><a href="#">Give by card</a></li>
<li><a href="#">Give by PayPal</a></li>
</ul>
</div>
<!--/donate-->
</div>
<!--/row-->
</section>This should provide potential donors with a very clear understanding of what Centrepoint believe to be the minimum recommended amount of money to donate, but still giving users the option to choose the amount that suits them best.
This should provide potential donors with a very clear understanding of what Centrepoint believe to be the minimum recommended amount of money to donate, but still giving users the option to choose the amount that suits them best.
<section class="M35c">
<div class="row clr-grey-light">
<div class="tabs" data-tabs>
<select class="tabs__dropdown" data-tabs-dropdown>
<option value="#tabsMonthly">Give monthly</option>
<option value="#tabsOnce">Give once</option>
</select>
<div class="tabs__nav tabs__nav--lrg tabs__nav--white">
<a href="#tabsMonthly" class="tabs__nav__trigger" data-tabs-nav-item><span>Give monthly</span></a>
<a href="#tabsOnce" class="tabs__nav__trigger" data-tabs-nav-item><span>Give once</span></a>
</div>
<!--/tabs__nav-->
<!-- ************ MONTHLY TAB ************* -->
<div class="tabs__item" id="tabsMonthly" data-tabs-item>
<div class="copy">
<p class="lead">This should provide potential donors with a very clear understanding of what Centrepoint believe to be the minimum recommended amount of money to donate, but still giving users the option to choose the amount that suits them best.</p>
</div>
<!--/copy-->
<div class="promos">
<div class="promos__inner">
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
<div class="donate">
<h2 class="donate__title h4">Surprise us</h2>
<form class="donate__form form form--validate" action="#" method="" id="form-donate">
<div class="field">
<label for="form-donate__ff-amount" class="field__label">Donation amount <span class="field__required">* <i>(required)</i></span></label>
<div class="field__prefixed field__suffixed">
<span class="field__prefixed__prefix">£</span>
<input type="text" id="form-donate__ff-amount" name="form-donate__ff-amount" aria-label="Donation amount (required)" required data-msg-required="Please provide a donation amount" min="1" step="any" data-msg-min="Please enter a valid amount of £1 or more"
/>
<div class="field__suffixed__suffix">Monthly</div>
</div>
</div>
<div class="form__action form__action--small">
<button type="submit" class="btn"><span>Donate</span></button>
</div>
<!--/form__action-->
</form>
<p class="donate__or">Or</p>
<ul class="donate__alt">
<li><a href="#">Give by card</a></li>
<li><a href="#">Give by PayPal</a></li>
</ul>
</div>
<!--/donate-->
</div>
<!--/tabs__item-->
<!-- ************ ONCE TAB ************* -->
<div class="tabs__item" id="tabsOnce" data-tabs-item>
<div class="copy">
<p class="lead">This should provide potential donors with a very clear understanding of what Centrepoint believe to be the minimum recommended amount of money to donate, but still giving users the option to choose the amount that suits them best.</p>
</div>
<!--/copy-->
<div class="promos">
<div class="promos__inner">
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">single</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by card</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">single</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by card</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">single</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by card</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
<div class="donate">
<h2 class="donate__title h4">Surprise us</h2>
<form class="donate__form form form--validate" action="#" method="" id="form-donate">
<div class="field">
<label for="form-donate__ff-amount" class="field__label">Donation amount <span class="field__required">* <i>(required)</i></span></label>
<div class="field__prefixed">
<span class="field__prefixed__prefix">£</span>
<input type="text" id="form-donate__ff-amount" name="form-donate__ff-amount" aria-label="Donation amount (required)" required data-msg-required="Please provide a donation amount" min="1" step="any" data-msg-min="Please enter a valid amount of £1 or more"
/>
</div>
</div>
<div class="form__action form__action--small">
<button type="submit" class="btn"><span>Donate</span></button>
</div>
<!--/form__action-->
</form>
<p class="donate__or">Or</p>
<ul class="donate__alt">
<li><a href="#">Give by card</a></li>
<li><a href="#">Give by PayPal</a></li>
</ul>
</div>
<!--/donate-->
</div>
<!--/tabs__item-->
</div>
<!--/tabs-->
</div>
<!--/row-->
</section><section class="M35d">
<div class="row clr-grey-light">
<div class="promos">
<div class="promos__inner">
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
<div class="promos__item promos__item--padded">
<div class="promos__item__inner clr-white">
<div class="promos__item__media">
<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
</div>
<!--/promos__item__media-->
<div class="promos__item__copy">
<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
<p>This is more information to encourage the user to donate.</p>
<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
</div>
<!--/promos__item__copy-->
</div>
<!--/promos__item__inner-->
</div>
<!--/promos__item-->
</div>
<!--/promos__inner-->
</div>
<!--/promos-->
<div class="donate">
<h2 class="donate__title h4">Surprise us</h2>
<form class="donate__form form form--validate" action="#" method="" id="form-donate">
<div class="field">
<label for="form-donate__ff-amount" class="field__label">Donation amount <span class="field__required">* <i>(required)</i></span></label>
<div class="field__prefixed field__suffixed">
<span class="field__prefixed__prefix">£</span>
<input type="text" id="form-donate__ff-amount" name="form-donate__ff-amount" aria-label="Donation amount (required)" required data-msg-required="Please provide a donation amount" min="1" step="any" data-msg-min="Please enter a valid amount of £1 or more"
/>
<div class="field__suffixed__suffix">Monthly</div>
</div>
</div>
<div class="form__action form__action--small">
<button type="submit" class="btn"><span>Donate</span></button>
</div>
<!--/form__action-->
</form>
<p class="donate__or">Or</p>
<ul class="donate__alt">
<li><a href="#">Give by card</a></li>
<li><a href="#">Give by PayPal</a></li>
</ul>
</div>
<!--/donate-->
</div>
<!--/row-->
</section>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.
<section class="M36a">
<div class="row">
<div class="media-block">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JtjPWx_iqXY" frameborder="0" allowfullscreen></iframe>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h3">Our Patron, Prince William</h2>
<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/row-->
</section>
Central House
25 Campertown Street
London
EC1 8DZ
0808 800 4444
hello@centrepoint.org
9.30am - 5.30pm, Monday - Friday
<section class="M37a">
<div class="row">
<div class="copy">
<p>
Central House<br /> 25 Campertown Street<br /> London
<br /> EC1 8DZ
</p>
<p>
<strong class="large">0808 800 4444</strong><br />
<a href="mailto:hello@centrepoint.org">hello@centrepoint.org</a>
</p>
<p>9.30am - 5.30pm, Monday - Friday</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>This is a simple direction for users arriving by tube. lorem
This is a simple direction for users arriving by tube. lorem
This is a simple direction for users arriving by tube. lorem
This is a simple direction for users arriving by tube. lorem
<section class="M37b">
<div class="row clr-grey-light">
<div class="media-block media-block--cover media-block--lrg clr-white">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<div class="map media-block__media__map">
<iframe class="map__embed media-block__media__map__embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9573650505386!2d-0.0736466842297635!3d51.51399817963621!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876034abe110b8d%3A0x9848ab1be2552a52!2sCentrepoint%2C+Central+House%2C+25+Camperdown+St%2C+London+E1+8DZ%2C+UK!5e0!3m2!1sen!2sus!4v1463673294975"
width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
<a class="map__fallback media-block__media__map__link" href="https://www.google.com/maps/place/Centrepoint+Central+House+25+Camperdown+St+London+E1+8DZ/">
<img alt="Centrepoint, Central House, 25 Camperdown St, London E1 8DZ" src="http://maps.googleapis.com/maps/api/staticmap?center=Centrepoint+Central+House+25+Camperdown+St+London+E1+8DZ&zoom=16&scale=false&size=640x400&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:1%7CCentrepoint+Central+House+25+Camperdown+St+London+E1+8DZ" />
</a>
</div>
<!--/map-->
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<div class="media-block__copy__nuggets">
<div class="media-block__copy__nuggets__item">
<h2 class="media-block__title h4">By train</h2>
<p>This is a simple direction for users arriving by tube. lorem</p>
</div>
<!--/media-block__copy__nuggets__item-->
<div class="media-block__copy__nuggets__item">
<h2 class="media-block__title h4">By train</h2>
<p>This is a simple direction for users arriving by tube. lorem</p>
</div>
<!--/media-block__copy__nuggets__item-->
<div class="media-block__copy__nuggets__item">
<h2 class="media-block__title h4">By train</h2>
<p>This is a simple direction for users arriving by tube. lorem</p>
</div>
<!--/media-block__copy__nuggets__item-->
<div class="media-block__copy__nuggets__item">
<h2 class="media-block__title h4">By train</h2>
<p>This is a simple direction for users arriving by tube. lorem</p>
</div>
<!--/media-block__copy__nuggets__item-->
</div>
<!--/media-block__copy__nuggets-->
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/row-->
</section>We'll do our best to reply to your message within 48hrs. If it's an emergency, please phone our Helpline number.
[HELPINE FORM TBC]
[DONATING FORM TBC]
[VOLUNTEERING FORM TBC]
[POLICY FORM TBC]
[MEDIA FORM TBC]
<section class="M38a">
<div class="row">
<h2 class="title title--dot">Do you have a specific question?</h2>
<div class="copy">
<p class="lead">We'll do our best to reply to your message within 48hrs. If it's an emergency, please phone our Helpline number.</p>
</div>
<!--/copy-->
<div class="tabs" data-tabs>
<select class="tabs__dropdown" data-tabs-dropdown>
<option value="#tabsGeneral">General</option>
<option value="#tabsHelpline">Helpline</option>
<option value="#tabsDonating">Donating</option>
<option value="#tabsVolunteering">Volunteering</option>
<option value="#tabsPolicy">Policy & Participation</option>
<option value="#tabsMedia">Media</option>
</select>
<div class="tabs__nav">
<a href="#tabsGeneral" class="tabs__nav__trigger" data-tabs-nav-item><span>General</span></a>
<a href="#tabsHelpline" class="tabs__nav__trigger" data-tabs-nav-item><span>Helpline</span></a>
<a href="#tabsDonating" class="tabs__nav__trigger" data-tabs-nav-item><span>Donating</span></a>
<a href="#tabsVolunteering" class="tabs__nav__trigger" data-tabs-nav-item><span>Volunteering</span></a>
<a href="#tabsPolicy" class="tabs__nav__trigger" data-tabs-nav-item><span>Policy & Participation</span></a>
<a href="#tabsMedia" class="tabs__nav__trigger" data-tabs-nav-item><span>Media</span></a>
</div>
<!--/tabs__nav-->
<div class="tabs__item" id="tabsGeneral" data-tabs-item>
<form class="form--standard form--validate" method="post" action="#" id="form-contact">
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<div class="field">
<label for="form-contact__ff-subject" class="field__label">Subject</label>
<input type="text" id="form-contact__ff-subject" name="form-contact__ff-subject" placeholder="Subject" aria-label="Subject" />
</div>
<div class="field">
<label for="form-contact__ff-email" class="field__label">Your email <span class="field__required">* <i>(required)</i></span></label>
<input type="email" id="form-contact__ff-email" name="form-contact__ff-email" placeholder="Your email *" aria-label="Your email (required)" required data-msg-required="Email is a required field" data-msg-email="Please provide a valid email address" />
</div>
<div class="field">
<label for="form-contact__ff-message" class="field__label">Your message <span class="field__required">* <i>(required)</i></span></label>
<textarea id="form-contact__ff-message" name="form-contact__ff-message" placeholder="Your message *" aria-label="Your message *" required></textarea>
</div>
<div class="form__action">
<button type="submit" class="btn"><span>Send your message</span></button>
</div>
<!--/form__action-->
</form>
</div>
<!--/tabs__item__content-->
<div class="tabs__item" id="tabsHelpline" data-tabs-item>
<p style="text-align: center">[HELPINE FORM TBC]</p>
</div>
<!--/tabs__item__content-->
<div class="tabs__item" id="tabsDonating" data-tabs-item>
<p style="text-align: center">[DONATING FORM TBC]</p>
</div>
<!--/tabs__item__content-->
<div class="tabs__item" id="tabsVolunteering" data-tabs-item>
<p style="text-align: center">[VOLUNTEERING FORM TBC]</p>
</div>
<!--/tabs__item__content-->
<div class="tabs__item" id="tabsPolicy" data-tabs-item>
<p style="text-align: center">[POLICY FORM TBC]</p>
</div>
<!--/tabs__item__content-->
<div class="tabs__item" id="tabsMedia" data-tabs-item>
<p style="text-align: center">[MEDIA FORM TBC]</p>
</div>
<!--/tabs__item__content-->
</div>
<!--/tabs-->
</div>
<!--/row-->
</section><div class="M39a">
<div class="row row--flush">
<nav class="breadcrumbs" role="navigation" aria-label="You are here:">
<div class="breadcrumbs__inner">
<ol class="breadcrumbs__list">
<li><a href="#" aria-level="1">Home</a></li>
<li><a href="#" aria-level="2">What we do</a></li>
<li><span aria-level="3" aria-label="Current page: Housing">Housing</span></li>
</ol>
</div>
<!--/breadcrumbs__inner-->
</nav>
</div>
<!--/row-->
</div>
<!--/M39a-->Sleep Out for Centrepoint in November 2016 and raise money to support homeless young people in the UK. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa.
<section class="M39b">
<div class="row">
<h2 class="title h-primary title--dot">
<span class="title__sub"><a href="#">Fundraising</a></span> Sleep out
</h2>
<div class="copy">
<p class="lead">Sleep Out for Centrepoint in November 2016 and raise money to support homeless young people in the UK. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa.</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>Providing safe housing, access to health and education services as well as training all costs a great deal. We rely on donations and fundraising to help support our young vulnerable people and need your help.
<section class="M3a">
<div class="row">
<h2 class="title title--dot">We do amazing work but need your help</h2>
<div class="copy">
<p class="lead">Providing safe housing, access to health and education services as well as training all costs a great deal. We rely on donations and fundraising to help support our young vulnerable people and need your help.</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>Sleep Out for Centrepoint in November 2016 and raise money to support homeless young people in the UK. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa.
<section class="M3b">
<div class="row">
<h2 class="title h-primary title--dot">
<span class="title__sub"><a href="#">Fundraising</a></span> Sleep out
</h2>
<div class="copy">
<p class="lead">Sleep Out for Centrepoint in November 2016 and raise money to support homeless young people in the UK. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa.</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section><section class="M3c">
<div class="row">
<h1 class="title h-primary">Sleep out</h1>
</div>
<!--/row-->
</section>Relationship breakdown, usually between young people and their parents or step-parents, is a major cause of youth homelessness. Around six in ten young people who come to Centrepoint report they had to leave home because of arguments, relationship breakdown or being told to leave. Many have experienced long-term problems at home, often involving violence, leaving them without the family support networks that most of us take for granted.
Download our Family Life report (968kb pdf)
<section class="M3d">
<div class="row clr-teal">
<h2 class="title title--dot">Family breakdown</h2>
<div class="copy">
<p class="lead">Relationship breakdown, usually between young people and their parents or step-parents, is a major cause of youth homelessness. Around six in ten young people who come to Centrepoint report they had to leave home because of arguments, relationship
breakdown or being told to leave. Many have experienced long-term problems at home, often involving violence, leaving them without the family support networks that most of us take for granted.</p>
</div>
<!--/copy-->
<div class="download download--invert">
<div class="download__icon"><a href="#"><i class="icon-download" aria-label="Download the latest Room Sponsor updates"></i></a></div>
<p class="download__copy"><a href="#">Download our Family Life report</a> (968kb pdf)</p>
</div>
<!--/download-->
</div>
<!--/row-->
</section>Please don't take any chances if you're in immediate trouble and need assistance
<section class="M3e">
<div class="row clr-yellow">
<h2 class="title title--dot">
<span class="h-alt">Are you in fear of your life?</span> Call 999 now
</h2>
<div class="copy">
<p class="lead">Please don't take any chances if you're in immediate trouble and need assistance</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section><section class="M3f">
<div class="row">
<div class="copy">
<p class="copy__action">
<a href="#" class="btn"><span>Read about what we do</span></a>
</p>
</div>
<!--/copy-->
</div>
<!--/row-->
</section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna massa, condimentum vel ipsum vel, viverra varius dolor. Curabitur in neque in felis faucibus egestas. Integer faucibus et eros sed iaculis. Vestibulum dignissim vitae quam quis vulputate. In quis orci a augue blandit vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna massa, condimentum vel ipsum vel, viverra varius dolor. Curabitur in neque in felis faucibus egestas. Integer faucibus et eros sed iaculis. Vestibulum dignissim vitae quam quis vulputate. In quis orci a augue blandit vehicula.
Download the latest Room Sponsor updates (968kb pdf)
<section class="M3g">
<div class="row clr-grey-light">
<h2 class="title title--margin-sml">Already a Room Sponsor?</h2>
<div class="layout layout--reduced">
<div class="panel clr-white">
<div class="copy">
<h3 class="h4 h-secondary">How to update your direct debit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna massa, condimentum vel ipsum vel, viverra varius dolor. Curabitur in neque in felis faucibus egestas. Integer faucibus et eros sed iaculis. Vestibulum dignissim vitae quam quis
vulputate. In quis orci a augue blandit vehicula.</p>
<p class="copy__action">
<a href="#" class="btn"><span>Get in touch</span></a>
</p>
</div>
<!--/copy-->
</div>
<!--/panel-->
<div class="panel clr-white">
<div class="copy">
<h3 class="h4 h-secondary">Download the latest updates</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna massa, condimentum vel ipsum vel, viverra varius dolor. Curabitur in neque in felis faucibus egestas. Integer faucibus et eros sed iaculis. Vestibulum dignissim vitae quam quis
vulputate. In quis orci a augue blandit vehicula.</p>
</div>
<!--/copy-->
<div class="download">
<div class="download__icon"><a href="#"><i class="icon-download" aria-label="Download the latest Room Sponsor updates"></i></a></div>
<p class="download__copy"><a href="#">Download the latest Room Sponsor updates</a> (968kb pdf)</p>
</div>
<!--/download-->
</div>
<!--/panel-->
</div>
<!--/layout-->
</div>
<!--/row-->
</section>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
John - real story
<section class="M3h">
<div class="row">
<blockquote class="quote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim.</p>
<cite>John - real story</cite>
</blockquote>
</div>
<!--/row-->
</section><section class="M3">
<div class="row">
<h2 class="title">Our ambassadors</h2>
</div>
<!--/row-->
</section>Unfortunately Centrepoint cannot take emergency housing referrals. However we urge you to get in contact with Shelter who can provide you with emergency housing. The next step will be to be assessed by your local council housing authority, who may then refer to you Centrepoint.
Call Shelter on: 0808 800 4444 (free from UK landlines)
Mon-Fri 8am-8pm or Sat-Sun 8am-5pm
Email: help@shelter.org
Website: shelter.org
Accordion 0
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<section class="M40a">
<div class="row">
<div class="accordion" data-accordion>
<div class="accordion__item" id="accordionManual" data-accordion-item>
<a href="#accordionManual" class="accordion__item__trigger" data-accordion-nav-item>I think I might become homeless</a>
<div class="accordion__item__content">
<p>Unfortunately Centrepoint cannot take emergency housing referrals. However we urge you to get in contact with Shelter who can provide you with emergency housing. The next step will be to be assessed by your local council housing authority, who may
then refer to you Centrepoint.</p>
<p><span class="orange">Call Shelter on:</span> 0808 800 4444 (free from UK landlines)</p>
<p>Mon-Fri 8am-8pm or Sat-Sun 8am-5pm</p>
<p><span class="orange">Email:</span> <a href="mailto:help@shelter.org">help@shelter.org</a></p>
<p><span class="orange">Website:</span> <a href="http://www.shelter.org">shelter.org</a></p>
</div>
<!--/accordion__item__content-->
</div>
<!--/accordion__item-->
<div class="accordion__item" id="accordion0" data-accordion-item>
<a href="#accordion0" class="accordion__item__trigger" data-accordion-nav-item>Accordion 0</a>
<div class="accordion__item__content">
<p><strong>Accordion 0</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--/accordion__item__content-->
</div>
<!--/accordion__item-->
<div class="accordion__item" id="accordion1" data-accordion-item>
<a href="#accordion1" class="accordion__item__trigger" data-accordion-nav-item>Accordion 1</a>
<div class="accordion__item__content">
<p><strong>Accordion 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--/accordion__item__content-->
</div>
<!--/accordion__item-->
<div class="accordion__item" id="accordion2" data-accordion-item>
<a href="#accordion2" class="accordion__item__trigger" data-accordion-nav-item>Accordion 2</a>
<div class="accordion__item__content">
<p><strong>Accordion 2</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--/accordion__item__content-->
</div>
<!--/accordion__item-->
<div class="accordion__item" id="accordion3" data-accordion-item>
<a href="#accordion3" class="accordion__item__trigger" data-accordion-nav-item>Accordion 3</a>
<div class="accordion__item__content">
<p><strong>Accordion 3</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--/accordion__item__content-->
</div>
<!--/accordion__item-->
<div class="accordion__item" id="accordion4" data-accordion-item>
<a href="#accordion4" class="accordion__item__trigger" data-accordion-nav-item>Accordion 4</a>
<div class="accordion__item__content">
<p><strong>Accordion 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--/accordion__item__content-->
</div>
<!--/accordion__item-->
</div>
<!--/accordion-->
</div>
<!--/row-->
</section>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.
<section class="M41a">
<div class="row">
<div class="media-block">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner" data-image-cover>
<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h2 class="media-block__title h3">Our Patron, HRH Prince William</h2>
<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/row-->
</section><section class="M42a">
<div class="row clr-grey-light">
<div class="info-set info-set--bgfill clr-white">
<div class="info-set__inner">
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner">
<div class="stat">
<em class="stat__label">Date</em>
<strong class="stat__value stat__value--border h3">24 April, 2016</strong>
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__inner-->
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner">
<div class="stat stat--full">
<em class="stat__label">Registration fee</em>
<strong class="stat__value stat__value--border h3">£35</strong>
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__inner-->
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner">
<div class="stat stat--full">
<em class="stat__label">Sponsorship target</em>
<strong class="stat__value stat__value--border h3">£150</strong>
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__inner-->
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner">
<div class="info-set__panel__action">
<a href="#" class="btn"><span>Register now</span></a>
</div>
<!--/info-set__panel__action-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__inner-->
</div>
<!--/info-set__inner-->
</div>
<!--/info-set-->
</div>
<!--/row-->
</section>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.
This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.
This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.
This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.
<section class="M4a">
<div class="row">
<div class="filter" data-filter>
<div class="filter__toolbar">
<div class="filter__inner">
<nav class="filter__group filter__group--types">
<p class="filter__title">Stories:</p>
<ul class="filter__links">
<li class="filter__links__item">
<a href="/assets/toolkit/ajaxhtml/media-block-list--young-people.html" data-filter-ajax-trigger class="is-active"><span>Young people</span></a>
</li>
<li class="filter__links__item">
<a href="/assets/toolkit/ajaxhtml/media-block-list--supporters.html" data-filter-ajax-trigger><span>Supporters</span></a>
</li>
</ul>
</nav>
<!--/filter__types-->
<nav class="filter__group filter__group--sort">
<p class="filter__title">Sort:</p>
<ul class="filter__links">
<li class="filter__links__item">
<a href="#" data-filter-sort-trigger="data-filter-sort-time"><span>Latest</span></a>
</li>
<li class="filter__links__item">
<a href="#" data-filter-sort-trigger="data-filter-sort-alpha" class="is-active"><span>A-Z</span></a>
</li>
</ul>
</nav>
<!--/filter__sort-->
</div>
<!--/filter-->
</div>
<!--/filter__toolbar-->
<div class="filter__canvas" data-filter-ajax-canvas aria-live="polite">
<h2 class="title h3">Young people</h2>
<div class="media-block-list" data-filter-list>
<div class="media-block-list__item" data-filter-item data-filter-sort-time="1" data-filter-sort-alpha="3">
<div class="media-block media-block--keyline">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya (time: 1, alpha: 3)</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
<div class="media-block-list__item" data-filter-item data-filter-sort-time="2" data-filter-sort-alpha="1">
<div class="media-block media-block--keyline">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya (time: 2, alpha: 1)</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
<div class="media-block-list__item" data-filter-item data-filter-sort-time="3" data-filter-sort-alpha="4">
<div class="media-block media-block--keyline">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya (time: 3, alpha: 4)</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
<div class="media-block-list__item" data-filter-item data-filter-sort-time="4" data-filter-sort-alpha="2">
<div class="media-block media-block--keyline">
<div class="media-block__inner">
<div class="media-block__media">
<div class="media-block__media__inner">
<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
</div>
<!--/media-block__media__inner-->
</div>
<!--/media-block__media-->
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya (time: 4, alpha: 2)</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
</div>
<!--/media-block-list-->
</div>
<!--/filter__canvas-->
<div class="filter__load load">
<div data-filter-loader class="load__loader is-hidden">Loading...</div>
<div data-filter-error class="load__error is-hidden">Oops, there was a problem retrieving more items - please try again</div>
</div>
<!--/load-->
</div>
<!--/filter-->
</div>
<!--/row-->
</section>
Centrepoint provides a safe place to live for more than 7,800 young people, aged 16-25 every year and are commited to helping each one have a better future.
<section class="M6a">
<div class="row row--flush">
<div class="hero hero--xxtall hero--content-right">
<div class="hero__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/hero-girl-and-bench.png" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/520x200" alt="" />
</picture>
<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
</div>
<!--/hero__media-->
<div class="hero__content clr-black-alpha">
<div class="hero__content__inner">
<div class="hero__copy">
<h1 class="hero__copy__title h-primary">Welcome to Centrepoint</h1>
<p class="lead">Centrepoint provides a safe place to live for more than 7,800 young people, aged 16-25 every year and are commited to helping each one have a better future.</p>
<p class="lead"><a href="#">Read more about us</a></p>
</div>
<!--/hero__copy-->
</div>
<!--/hero__content__inner-->
</div>
<!--/hero__content-->
</div>
<!--/hero-->
</div>
<!--/row-->
</section>
Our research shows that nearly 80,000 young people experience homelessness in the UK each year.
<section class="M6b">
<div class="row row--flush">
<div class="hero">
<div class="hero__media" data-image-cover>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="/assets/toolkit/images/content/hero-girl-and-graff-sml.png" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/520x200" alt="" />
</picture>
<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
</div>
<!--/hero__media-->
<div class="hero__content clr-black-alpha">
<div class="hero__content__inner">
<div class="hero__copy">
<h2 class="hero__copy__title h-primary">Youth homelessness</h2>
<p class="lead">Our research shows that nearly 80,000 young people experience homelessness in the UK each year.</p>
</div>
<!--/hero__copy-->
</div>
<!--/hero__content__inner-->
</div>
<!--/hero__content-->
</div>
<!--/hero-->
</div>
<!--/row-->
</section><section class="M6c">
<div class="row">
<div class="image">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/1400x440" media="(min-width: 768px)" />
<source srcset="http://placehold.it/768x240" media="(min-width: 640px)" />
<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
<!--[if IE 9]></video><![endif]-->
<img src="http://placehold.it/480x150" alt="" />
</picture>
</div>
<!--/image-->
</div>
<!--/row-->
</section><section class="PG1a">
<div class="row">
<h2 class="title"><span class="h-alt">You are giving a monthly donation of:</span> £35</h2>
</div>
<!--/row-->
</section>
Cards accepted:
<section class="PG1b">
<div class="row">
<h2 class="title"><span class="h-alt">Your order:</span> £35</h2>
<p class="labelled-images">
<span class="labelled-images__label">Cards accepted:</span>
<img src="http://placehold.it/50x50" alt="" />
<img src="http://placehold.it/50x50" alt="" />
<img src="http://placehold.it/50x50" alt="" />
<img src="http://placehold.it/50x50" alt="" />
</p>
</div>
<!--/row-->
</section>Step 3 of 5
<section class="PG1c">
<div class="row row--flush">
<div class="steps">
<p class="steps__label">Step 3 of 5</p>
<ol class="steps__list">
<li class="steps__item">Donation details</li>
<li class="steps__item">Billing details</li>
<li class="steps__item steps__item--current"><span>Current step: </span>Bank/building society details</li>
<li class="steps__item">Gift aid</li>
<li class="steps__item">Stay in touch</li>
</ol>
</div>
<!--/steps-->
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<h2 class="title">3. Bank / Building society details</h2>
<img src="http://placehold.it/100x100" alt="" class="image-left" />
<div class="copy copy--left copy--overflow-hidden">
<h3 class="h5">Instruction to your bank or building society to pay by Direct Debit.</h3>
<p>Please pay Centrepoint Direct Debits from the account detailed in this instruction subject to the safeguards assured by the Direct Debit Guarantee. I understand that this instruction may remain with Centrepoint and, if so, details will be passed
electronically to my bank / building society.</p>
</div>
<!--/copy-->
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<div class="field field--lrg">
<label for="ff-account-holders-name" class="field__label">Account holder's name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-account-holders-name" name="ff-account-holders-name" placeholder="Account holder's name *" aria-label="Account holder's name (required)" required data-msg-required="Account holder's name is required" />
</div>
<div class="field field--med">
<label for="ff-account-number" class="field__label">Account number <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-account-number" name="ff-account-number" placeholder="Account number *" aria-label="Account number (required)" required data-msg-required="Account number is required" minlength="8" data-msg-minlength="Account number must be 8 digits"
maxlength="8" data-msg-maxlength="Account number must be 8 digits" min="0" data-msg-min="Account number must be numerical" />
</div>
<div class="field field--sml">
<label for="ff-sort-code" class="field__label">Sort code <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-sort-code" name="ff-sort-code" placeholder="Sort code *" aria-label="Sort code (required)" required data-msg-required="Sort code is required" minlength="6" data-msg-minlength="Sort code must be 6 digits" maxlength="6" data-msg-maxlength="Sort code must be 6 digits"
min="0" data-msg-min="Sort code must be numerical" />
</div>
<div class="form__action">
<div class="form__action__forward">
<button type="submit" class="btn"><span>Continue</span></button>
</div>
<!--/form__action__forward-->
<div class="form__action__back">
<a href="#">Back</a>
</div>
<!--/form__action__back-->
</div>
<!--/form__action-->
<div class="panel panel--spacing-xlrg clr-grey-light">
<div class="copy">
<h3 class="h5 h-alt">Direct Debit guarantee</h3>
<ul class="ul-tight">
<li>This Guarantee is offered by all banks and building societies that accept instructions to pay Direct Debits.</li>
<li>If there are any changes to the amount, date or frequency of your Direct Debit Centrepoint will notify you 14 working days in advance of your account being debited or as otherwise agreed. If you request Centrepoint to collect a payment, confirmation
of the amount and date will be given to you at the time of the request.</li>
<li>If an error is made in the payment of your Direct Debit, by Centrepoint or your bank or building society, you are entitled to a full and immediate refund of the amount paid from your bank or building society - If you receive a refund you are not
entitled to, you must pay it back when Centrepoint asks you to.</li>
<li>You can cancel a Direct Debit at any time by simply contacting your bank or building society. Written confirmation may be required. Please also notify us.</li>
</ul>
</div>
<!--/copy-->
</div>
<!--/panel-->
</form>
</div>
<!--/panel-->
</div>
<!--/row-->
</section>Step 2 of 5
<section class="PG1c">
<div class="row row--flush">
<div class="steps">
<p class="steps__label">Step 2 of 5</p>
<ol class="steps__list">
<li class="steps__item">Donation details</li>
<li class="steps__item steps__item--current"><span>Current step: </span>Billing details</li>
<li class="steps__item">Debit/credit card details</li>
<li class="steps__item">Gift aid</li>
<li class="steps__item">Stay in touch</li>
</ol>
</div>
<!--/steps-->
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<h2 class="title">2. Billing details</h2>
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<div class="field field--lrg">
<label for="ff-email" class="field__label">Your email <span class="field__required">* <i>(required)</i></span></label>
<input type="email" id="ff-email" name="ff-email" placeholder="Your email *" aria-label="Your email (required)" required data-msg-required="Email is required" data-msg-email="Email address must be valid" />
<em class="field__note" id="ff-input-email-note">We use your email to send you a receipt of your donation</em>
</div>
<div class="field field--lrg">
<label for="ff-first-name" class="field__label">First name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-first-name" name="ff-first-name" placeholder="First name *" aria-label="First name (required)" required data-msg-required="First name is required" />
</div>
<div class="field field--lrg">
<label for="ff-last-name" class="field__label">Last name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-last-name" name="ff-last-name" placeholder="Last name *" aria-label="Last name (required)" required data-msg-required="Last name is required" />
</div>
<div class="field field--med">
<label for="ff-phone" class="field__label">Phone</label>
<input type="tel" id="ff-phone" name="ff-phone" placeholder="Phone" aria-label="Phone" />
</div>
<!-- POSTCODE ANYWHERE -->
<!-- TEST WITH POSTCODE: WR5 3DA -->
<script>
(function(a, c, b, e) {
a[b] = a[b] || {};
a[b].initial = {
accountCode: "CENTR11193",
host: "CENTR11193.pcapredict.com"
};
a[b].on = a[b].on || function() {
(a[b].onq = a[b].onq || []).push(arguments)
};
var d = c.createElement("script");
d.async = !0;
d.src = e;
c = c.getElementsByTagName("script")[0];
c.parentNode.insertBefore(d, c)
})(window, document, "pca", "//CENTR11193.pcapredict.com/js/sensor.js");
</script>
<div class="field field--lrg">
<label for="CompanyName" class="field__label">Company name</label>
<input type="text" id="CompanyName" name="CompanyName" placeholder="Company name" aria-label="Company name" />
</div>
<div class="field field--lrg">
<label for="AddressLine1" class="field__label">Address line 1 <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="AddressLine1" name="AddressLine1" placeholder="Address line 1 *" aria-label="Address line 1 (required)" required data-msg-required="Address line 1 is required" />
</div>
<div class="field field--lrg">
<label for="AddressLine2" class="field__label">Address line 2</label>
<input type="text" id="AddressLine2" name="AddressLine2" placeholder="Address line 2" aria-label="Address line 2" />
</div>
<div class="field field--med">
<label for="TownCity" class="field__label">Town/city <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="TownCity" name="TownCity" placeholder="Town/city *" aria-label="Town/city (required)" required data-msg-required="Town/city is required" />
</div>
<div class="field field--sml">
<label for="PostalCode" class="field__label">Postal code <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="PostalCode" name="PostalCode" placeholder="Postal code *" aria-label="Postal code (required)" required data-msg-required="Postal code is required" />
</div>
<div class="field">
<label for="ff-country" class="field__label">Country <span class="field__required">* <i>(required)</i></span></label>
<select id="ff-country" name="ff-country" aria-label="Country (required)" required data-msg-required="Country is required">
<option selected disabled>Country *</option>
<option>United Kingdom</option>
</select>
</div>
<div class="form__action">
<div class="form__action__forward">
<button type="submit" class="btn"><span>Continue</span></button>
</div>
<!--/form__action__forward-->
<div class="form__action__back">
<a href="#">Back</a>
</div>
<!--/form__action__back-->
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/row-->
</section>Step 3 of 5
<section class="PG1c">
<div class="row row--flush">
<div class="steps">
<p class="steps__label">Step 3 of 5</p>
<ol class="steps__list">
<li class="steps__item">Donation details</li>
<li class="steps__item">Billing details</li>
<li class="steps__item steps__item--current"><span>Current step: </span>Debit/credit card details</li>
<li class="steps__item">Gift aid</li>
<li class="steps__item">Stay in touch</li>
</ol>
</div>
<!--/steps-->
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<h2 class="title">3. Debit / Credit card details</h2>
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<fieldset class="form__group form__group--booleans">
<legend>Please select payment method <span class="field__required">* <i>(required)</i></span></legend>
<div class="field field--boolean">
<input type="radio" id="ff-radio-1" name="ff-radio-set" required data-msg-required="Please choose a payment method" data-field-toggle="card-details" data-field-toggle-state="active" data-validation-reset checked />
<label for="ff-radio-1" class="field__label">Card</label>
</div>
<div class="field field--boolean">
<input type="radio" id="ff-radio-2" name="ff-radio-set" required data-msg-required="Please choose a payment method" data-field-toggle="card-details" data-field-toggle-state="inactive" data-validation-reset />
<label for="ff-radio-2" class="field__label">PayPal</label>
</div>
</fieldset>
<div class="form__section" data-field-toggle-id="card-details" data-field-toggle-id-state="active">
<div class="field">
<label for="ff-card-type" class="field__label">Card type <span class="field__required">* <i>(required)</i></span></label>
<select id="ff-card-type" name="ff-card-type" aria-label="Card type (required)" required data-msg-required="Card type is required">
<option selected disabled>Card type *</option>
<option>Visa</option>
<option>Amex</option>
</select>
</div>
<div class="field field--med">
<label for="ff-card-number" class="field__label">Card number <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-card-number" name="ff-card-number" placeholder="Card number *" aria-label="Card number (required)" required data-msg-required="Card number is required" minlength="16" data-msg-minlength="Card number must be 16 digits" maxlength="16"
data-msg-maxlength="Card number must be 16 digits" min="0" data-msg-min="Card number must be numerical" />
</div>
<fieldset class="form__group">
<legend>Expiry <span class="field__required">* <i>(required)</i></span></legend>
<div class="field-group">
<div class="field-group__item field-group__item--half">
<div class="field field--full">
<label for="ff-card-expiry-month" class="field__label">Month <span class="field__required">* <i>(required)</i></span></label>
<select id="ff-card-expiry-month" name="ff-card-expiry-month" aria-label="Month (required)" required data-msg-required="Expiry month is required">
<option selected disabled>Month *</option>
<option>01 - Jan</option>
</select>
</div>
</div>
<!--/field-group__item-->
<div class="field-group__item field-group__item--half field-group__item--separator">
<div class="field field--full">
<label for="ff-card-expiry-year" class="field__label">Year <span class="field__required">* <i>(required)</i></span></label>
<select id="ff-card-expiry-year" name="ff-card-expiry-year" aria-label="Year (required)" required data-msg-required="Expiry year is required">
<option selected disabled>Year *</option>
<option>2016</option>
</select>
</div>
</div>
<!--/field-group__item-->
</div>
<!--/field-group-->
</fieldset>
<div class="field field--med">
<label for="ff-cv2" class="field__label">CV2 <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-cv2" name="ff-cv2" placeholder="CV2 *" aria-label="CV2 (required)" required data-msg-required="CV2 number is required" minlength="3" data-msg-minlength="CV2 must be 3 digits" maxlength="3" data-msg-maxlength="CV2 must be 3 digits"
min="0" data-msg-min="CV2 must be numerical" />
<em class="field__note" id="ff-cv2">Last 3 digits on signature strip on back of card</em>
</div>
</div>
<!--/data-field-toggle-id-->
<div class="form__action">
<div class="form__action__forward">
<button type="submit" class="btn"><span>Continue</span></button>
</div>
<!--/form__action__forward-->
<div class="form__action__back">
<a href="#">Back</a>
</div>
<!--/form__action__back-->
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/row-->
</section>Step 1 of 5
<section class="PG1c">
<div class="row row--flush">
<div class="steps">
<p class="steps__label">Step 1 of 5</p>
<ol class="steps__list">
<li class="steps__item steps__item--current"><span>Current step: </span>Donation details</li>
<li class="steps__item">Billing details</li>
<li class="steps__item">Debit/credit card details</li>
<li class="steps__item">Gift aid</li>
<li class="steps__item">Stay in touch</li>
</ol>
</div>
<!--/steps-->
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<h2 class="title">1. Donation details</h2>
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<div class="field">
<label for="ff-donation-frequency" class="field__label">Frequency of donation <span class="field__required">* <i>(required)</i></span></label>
<select id="ff-donation-frequency" name="ff-donation-frequency" aria-label="Frequency of donation (required)" required data-msg-required="Frequency donation is required">
<option selected disabled>Frequency of donation *</option>
<option>Monthly</option>
<option>Option 2</option>
</select>
</div>
<fieldset class="form__group form__group--booleans">
<legend>Start date of direct debit <span class="field__required">* <i>(required)</i></span></legend>
<div class="field field--boolean">
<input type="radio" id="ff-direct-debit-date-1" name="ff-direct-debit-date" required data-msg-required="Direct Debit date is required" />
<label for="ff-direct-debit-date-1" class="field__label">1st June 2016</label>
</div>
<div class="field field--boolean">
<input type="radio" id="ff-direct-debit-date-2" name="ff-direct-debit-date" required />
<label for="ff-direct-debit-date-2" class="field__label">15th June 2016</label>
</div>
</fieldset>
<div class="form__action">
<div class="form__action__forward">
<button type="submit" class="btn"><span>Continue</span></button>
</div>
<!--/form__action__forward-->
<div class="form__action__back">
<a href="#">Back</a>
</div>
<!--/form__action__back-->
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/row-->
</section>Step 3 of 5
<section class="PG1c">
<div class="row row--flush">
<div class="steps">
<p class="steps__label">Step 3 of 5</p>
<ol class="steps__list">
<li class="steps__item">Donation details</li>
<li class="steps__item">Billing details</li>
<li class="steps__item">Bank/building society details</li>
<li class="steps__item steps__item--current"><span>Current step: </span>Gift aid</li>
<li class="steps__item">Stay in touch</li>
</ol>
</div>
<!--/steps-->
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<h2 class="title">4. Gift aid</h2>
<div class="copy copy--left">
<h3 class="h5">Gift aid</h3>
<p>Increase your gift by 25% at no extra cost to you, if you are a UK taxpayer, under the Gift Aid scheme.</p>
</div>
<!--/copy-->
<div class="panel clr-grey-light">
<div class="field field--boolean">
<input type="checkbox" id="ff-gift-aid" name="ff-gift-aid" />
<label for="ff-gift-aid" class="field__label">Yes, I am a UK taxpayer and I would like Centrepoint to treat all the donations I make from 1 April 2011, until I notify you otherwise, as Gift Aid donations.</label>
</div>
</div>
<div class="copy copy--left">
<p>To cancel this declaration, change your name or home address, or if you no longer pay sufficient tax on your income and/or capital gains, please <a href="#">contact us</a>.</p>
</div>
<!--/copy-->
<div class="form__action">
<div class="form__action__forward">
<button type="submit" class="btn"><span>Continue</span></button>
</div>
<!--/form__action__forward-->
<div class="form__action__back">
<a href="#">Back</a>
</div>
<!--/form__action__back-->
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/row-->
</section>Step 3 of 5
<section class="PG1c">
<div class="row row--flush">
<div class="steps">
<p class="steps__label">Step 3 of 5</p>
<ol class="steps__list">
<li class="steps__item">Donation details</li>
<li class="steps__item">Billing details</li>
<li class="steps__item">Bank/building society details</li>
<li class="steps__item"><span>Current step: </span>Gift aid</li>
<li class="steps__item steps__item--current"><span>Current step: </span>Stay in touch</li>
</ol>
</div>
<!--/steps-->
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<h2 class="title">5. Stay in touch</h2>
<div class="copy copy--left">
<p class="h5">We would love to stay in touch and tell you about the amazing work that your donation is helping us to acheive.</p>
<p>By opting in you will receive monthly email newsletters from Centrepoint that describes out work, success and the impact that we've made in the lives of young vulnerable people. We will only contact you via email and will never pass on, sell or give
your personal details to anyone else.</p>
</div>
<!--/copy-->
<div class="field">
<label for="ff-find-us" class="field__label">How did you find us?</label>
<select id="ff-find-us" name="ff-find-us" aria-label="How did you find us?">
<option selected disabled>How did you find us?</option>
<option>Google</option>
<option>Word of mouth</option>
<option>Another option</option>
</select>
</div>
<div class="field">
<label for="ff-why-donate" class="field__label">What prompted your donation today?</label>
<select id="ff-why-donate" name="ff-why-donate" aria-label="What prompted your donation today?" data-field-toggle="donation-reason-other">
<option selected disabled>What prompted your donation today?</option>
<option data-field-toggle-state="inactive">Advert in the cinema</option>
<option data-field-toggle-state="inactive">Email from Centrepoint</option>
<option data-field-toggle-state="inactive">Mail in the post from Centrepoint</option>
<option data-field-toggle-state="inactive">Phone call from Centrepoint</option>
<option data-field-toggle-state="inactive">Facebook</option>
<option data-field-toggle-state="inactive">Other social media</option>
<option data-field-toggle-state="inactive">TV advert</option>
<option data-field-toggle-state="inactive">Leaflet in a newspaper</option>
<option data-field-toggle-state="inactive">Face-to-Face fundraiser</option>
<option data-field-toggle-state="inactive">Advert on the train or tube</option>
<option data-field-toggle-state="active">Advert in a newspaper (please specify below)</option>
<option data-field-toggle-state="active">Advert in a magazine (please specify below)</option>
<option data-field-toggle-state="active">Advert on a website (please specify below)</option>
<option data-field-toggle-state="active">Other Advert on a website (please specify below)</option>
</select>
</div>
<div class="field" data-field-toggle-id="donation-reason-other" data-field-toggle-id-state="inactive">
<label for="ff-why-donate-other" class="field__label">Other reason for donating</label>
<input type="text" id="ff-why-donate-other" name="ff-why-donate-other" placeholder="Other reason for donating" aria-label="Other reason for donating" />
</div>
<div class="panel clr-grey-light">
<p class="h5">Thank you for donating to Centrepoint today.</p>
<p>We’d love to show you the impact of your support and share how young people continue to need your help. Please let us know how you would like to control your communications in the way that suits you best:</p>
<fieldset class="form__group form__group--booleans">
<legend class="accessible-hide">Communication options</legend>
<div class="field field--boolean">
<input type="checkbox" id="ff-contact-email" name="ff-contact-email" />
<label for="ff-contact-email" class="field__label">Please contact me by email</label>
</div>
<div class="field field--boolean">
<input type="checkbox" id="ff-contact-sms" name="ff-contact-sms" />
<label for="ff-contact-sms" class="field__label">Please contact me by SMS</label>
</div>
<div class="field field--boolean">
<input type="checkbox" id="ff-contact-phone" name="ff-contact-phone" />
<label for="ff-contact-phone" class="field__label">Please contact me by phone</label>
</div>
</fieldset>
<p>A few ticks in a box means you could enable us to provide young people with a home and a future. Last year our supporters helped us change the lives of over 9,000 homeless young people. By letting us know we can count on you, we can help more.</p>
<p>We promise never to sell or swap your details. You can opt out of marketing and change how we communicate with you at any time. Please call <a href="tel:+44800232320">0800 23 23 20</a></li>0800 23 23 20 and speak to one of our friendly team or email
<a href="mailto:supportercare@centrepoint.org">supportercare@centrepoint.org</a> to do this and ask us any questions.</p>
</div>
<div class="form__action">
<div class="form__action__forward">
<button type="submit" class="btn"><span>Donate now by Direct Debit</span></button>
</div>
<!--/form__action__forward-->
<div class="form__action__back">
<a href="#">Back</a>
</div>
<!--/form__action__back-->
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/row-->
</section><section class="PG3a">
<div class="row">
<div class="load">
<div class="load__loader load__loader--lrg">Loading...</div>
</div>
<!--/load-->
</div>
<!--/row-->
</section>Confirmation of your order
| Item | Price | Qty | Total |
|---|---|---|---|
| Title of item | £35 | 3 | £105 |
| Title of item | £35 | 3 | £105 |
<section class="PG4a">
<div class="row row--flush-horizontal">
<div class="receipt">
<div class="receipt__content">
<h2 class="title h3">Thank you!</h2>
<div class="copy">
<p class="lead">Confirmation of your order</p>
</div>
<!--/copy-->
</div>
<!--/receipt__content-->
<ul class="receipt__summary">
<li>
<strong>Order ID</strong>
<span>#123456789</span>
</li>
<li>
<strong>Order total</strong>
<span>£9999</span>
</li>
<li>
<strong>Date</strong>
<span>1st June 2016</span>
</li>
<li>
<strong>Payment</strong>
<span>Debit card</span>
</li>
</ul>
<table class="receipt__items">
<thead>
<tr>
<th class="receipt__items__item-col">Item</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td data-table-label="Item">Title of item</td>
<td data-table-label="Price">£35</td>
<td data-table-label="Qty">3</td>
<td data-table-label="Total">£105</td>
</tr>
<tr>
<td data-table-label="Item">Title of item</td>
<td data-table-label="Price">£35</td>
<td data-table-label="Qty">3</td>
<td data-table-label="Total">£105</td>
</tr>
</tbody>
</table>
</div>
<!--/receipt-->
</div>
<!--/row-->
</section><section class="PG5a">
<div class="row clr-grey-light">
<div class="info-set clr-white">
<div class="info-set__inner">
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner">
<div class="stat stat--full">
<em class="stat__label">Price</em>
<strong class="stat__value stat__value--border h2">£144</strong>
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__panel-->
<div class="info-set__panel info-set__panel--half">
<div class="info-set__panel__inner clr-white">
<div class="stat stat--full">
<em class="stat__label">What we provide</em>
<div class="stat__value stat__value--border">
<ul class="ul-mini">
<li>Gives a safe place to sleep</li>
<li>Provides access to health check-ups</li>
<li>Gives a young person nutritious meals</li>
</ul>
</div>
<!--/stat__value-->
</div>
<!--/stat-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__panel-->
<div class="info-set__panel info-set__panel--quarter">
<div class="info-set__panel__inner clr-white">
<div class="info-set__panel__action info-set__panel__action--top-pad">
<a href="#" class="btn"><span>Buy now</span></a>
</div>
<!--/info-set__panel__action-->
</div>
<!--/info-set__panel__inner-->
</div>
<!--/info-set__panel-->
</div>
<!--/info-set__inner-->
</div>
<!--/info-set-->
</div>
<!--/row-->
</section><section class="PG6">
<div class="row">
<h2 class="title title--dot">Some kind of title</h2>
<div class="copy">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<!--/copy-->
<div class="tabs" data-tabs>
<select class="tabs__dropdown" data-tabs-dropdown>
<option value="#tabsPostcard"> Postcard</option>
<option value="#tabsEcard"> Ecard</option>
</select>
<div class="tabs__nav tabs__nav--lrg">
<a href="#tabsPostcard" class="tabs__nav__trigger" data-tabs-nav-item><span><i class="icon-postcard"></i> Postcard</span></a>
<a href="#tabsEcard" class="tabs__nav__trigger" data-tabs-nav-item><i class="icon-ecard"></i> <span>Ecard</span></a>
</div>
<!--/tabs__nav-->
<!-- ************ MONTHLY TAB ************* -->
<div class="tabs__item" id="tabsPostcard" data-tabs-item>
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<div class="copy">
<p>To send your Postcard, please fill out the form below, including the address of the person you wish to send this postcard to. If you don't want to send a message, simply leave this field blank.</p>
<p>All Postcards are sent 2nd class and should arrive within 5 working days.</p>
<p>Fields marked with an asterisk<span class="field__required">* <i>(required)</i></span> are required.</p>
</div>
<!--/copy-->
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<fieldset class="form__section">
<legend class="form__section__title title h3">Your details</legend>
<div class="field">
<label for="ff-input-text" class="field__label">Your name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-input-text" name="ff-input-text" placeholder="Your name *" aria-label="Your name (required)" required data-msg-required="Please provide your name" />
</div>
<div class="field">
<label for="ff-textarea" class="field__label">Your message <span class="field__required">* <i>(required)</i></span></label>
<textarea id="ff-textarea" name="ff-textarea" placeholder="Your message *" aria-label="Your message *" required rows="5"></textarea>
</div>
</fieldset>
<fieldset class="form__section">
<legend class="form__section__title title h3">Recipients details</legend>
<div class="field">
<label for="ff-input-text" class="field__label">Full name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-input-text" name="ff-input-text" placeholder="Full name *" aria-label="Full name (required)" required data-msg-required="Please provide full name" />
</div>
<!-- POSTCODE ANYWHERE -->
<!-- TEST WITH POSTCODE: WR5 3DA -->
<script>
(function(a, c, b, e) {
a[b] = a[b] || {};
a[b].initial = {
accountCode: "CENTR11193",
host: "CENTR11193.pcapredict.com"
};
a[b].on = a[b].on || function() {
(a[b].onq = a[b].onq || []).push(arguments)
};
var d = c.createElement("script");
d.async = !0;
d.src = e;
c = c.getElementsByTagName("script")[0];
c.parentNode.insertBefore(d, c)
})(window, document, "pca", "//CENTR11193.pcapredict.com/js/sensor.js");
</script>
<div class="field field--lrg">
<label for="CompanyName" class="field__label">Company name</label>
<input type="text" id="CompanyName" name="CompanyName" placeholder="Company name" aria-label="Company name" />
</div>
<div class="field field--lrg">
<label for="AddressLine1" class="field__label">Address line 1 <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="AddressLine1" name="AddressLine1" placeholder="Address line 1 *" aria-label="Address line 1 (required)" required data-msg-required="Address line 1 is required" />
</div>
<div class="field field--lrg">
<label for="AddressLine2" class="field__label">Address line 2</label>
<input type="text" id="AddressLine2" name="AddressLine2" placeholder="Address line 2" aria-label="Address line 2" />
</div>
<div class="field field--med">
<label for="TownCity" class="field__label">Town/city <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="TownCity" name="TownCity" placeholder="Town/city *" aria-label="Town/city (required)" required data-msg-required="Town/city is required" />
</div>
<div class="field field--sml">
<label for="PostalCode" class="field__label">Postal code <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="PostalCode" name="PostalCode" placeholder="Postal code *" aria-label="Postal code (required)" required data-msg-required="Postal code is required" />
</div>
<div class="field">
<label for="ff-country" class="field__label">Country <span class="field__required">* <i>(required)</i></span></label>
<select id="ff-country" name="Country" aria-label="Country (required)" required data-msg-required="Country is required">
<option selected disabled>Country *</option>
<option>United Kingdom</option>
</select>
</div>
</fieldset>
<div class="form__action">
<button type="submit" class="btn"><span>Add to basket</span></button>
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/tabs__item-->
<!-- ************ ONCE TAB ************* -->
<div class="tabs__item" id="tabsEcard" data-tabs-item>
<div class="panel panel--keyline panel--reduced">
<form class="form--standard form--validate" method="post" action="#">
<div class="copy">
<p>To send your eCard, please fill out the form below, including the email address of the person you're sending this eCard to. If you don't want to send a message, simply leave this field blank.</p>
<p>Fields marked with an asterisk<span class="field__required">* <i>(required)</i></span> are required.</p>
</div>
<!--/copy-->
<!--placeholder for error summary/hidden by default-->
<div class="form__errors">
<p class="form__errors__lead"><strong>There was a problem with the information you entered:</strong></p>
<ul class="form__errors__list"></ul>
</div>
<!--/form__errors-->
<fieldset class="form__section">
<legend class="form__section__title title h3">Your details</legend>
<div class="field">
<label for="ff-input-text" class="field__label">Your name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-input-text" name="ff-input-text" placeholder="Your name *" aria-label="Your name (required)" required data-msg-required="Please provide your name" />
</div>
<div class="field">
<label for="ff-textarea" class="field__label">Your message <span class="field__required">* <i>(required)</i></span></label>
<textarea id="ff-textarea" name="ff-textarea" placeholder="Your message *" aria-label="Your message *" required rows="5"></textarea>
</div>
</fieldset>
<fieldset class="form__section">
<legend class="form__section__title title h3">Recipients details</legend>
<div class="field">
<label for="ff-input-text" class="field__label">First name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-input-text" name="ff-input-text" placeholder="First name *" aria-label="First name (required)" required data-msg-required="Please provide first name" />
</div>
<div class="field">
<label for="ff-input-text" class="field__label">Last name <span class="field__required">* <i>(required)</i></span></label>
<input type="text" id="ff-input-text" name="ff-input-text" placeholder="Last name *" aria-label="Last name (required)" required data-msg-required="Please provide last name" />
</div>
<div class="field">
<label for="ff-input-email-required" class="field__label">Email address<span class="field__required">* <i>(required)</i></span></label>
<input type="email" id="ff-input-email-required" name="ff-input-email-required" placeholder="Email address *" aria-label="Email address (required)" required data-msg-required="Email is a required field" data-msg-email="Please provide a valid email address"
/>
</div>
</fieldset>
<div class="form__action">
<button type="submit" class="btn"><span>Add to basket</span></button>
</div>
<!--/form__action-->
</form>
</div>
<!--/panel-->
</div>
<!--/tabs__item-->
</div>
<!--/tabs-->
</div>
<!--/row-->
</section>All Postcards are sent 2nd class and should arrive within 5 working days.
All eCards are emailed to recipients immediately.
<section class="PG7">
<div class="row">
<div class="basket">
<div class="basket__inner">
<h2 class="accessible-hide">Your basket</h2>
<div class="basket__overview">
<div class="basket__overview__inner">
<div class="basket__overview__total">
<div class="basket__overview__item"><span class="basket__overview__label">Sub total</span> <span class="basket__overview__value">£55</span></div>
<div class="basket__overview__item"><span class="basket__overview__label">VAT @ 20%</span> <span class="basket__overview__value">£11</span></div>
<div class="basket__overview__item basket__overview__item--total"><span class="basket__overview__label">Order total</span> <span class="basket__overview__value">£55</span></div>
</div>
<!--/basket__overview__total-->
<div class="basket__overview__actions">
<a href="#" class="basket__checkout btn btn--wide"><span>Proceed to checkout</span></a><br />
<a href="#" class="basket__paypal">Pay with PayPal</a>
</div>
<!--/basket__overview__actions-->
</div>
<!--/basket__total__inner-->
</div>
<!--/basket__overview-->
<div class="basket__summary">
<div class="basket__list">
<div class="basket__item">
<div class="basket__item__inner">
<div class="basket__item__media">
<a href="#"><img src="http://placehold.it/200x140" alt="" /></a>
</div>
<!--/basket__item__media-->
<div class="basket__item__info">
<h3 class="basket__item__title h3 h-secondary"><a href="#">More than a room</a></h3>
<p class="basket__item__price h3">£35.99</p>
<p class="basket__item__message"><em>Optional personalised gift message</em></p>
<p class="basket__item__copy">Help a homeless young person escape homelessness forever.</p>
<div class="basket__item__meta">
<p class="basket__item__qty">Quantity: <b>1</b></p>
<p class="basket__item__actions"><a href="#" class="basket__edit">Edit</a> <a href="#" class="basket__delete">Delete</a></p>
</div>
<!--/basket__item__meta-->
</div>
<!--/basket__item__info-->
</div>
<!--/basket__item__inner-->
</div>
<!--/basket__item-->
<div class="basket__item">
<div class="basket__item__inner">
<div class="basket__item__media">
<a href="#"><img src="http://placehold.it/200x140" alt="" /></a>
</div>
<!--/basket__item__media-->
<div class="basket__item__info">
<h3 class="basket__item__title h3 h-secondary"><a href="#">More than a room</a></h3>
<p class="basket__item__price h3">£35.99</p>
<p class="basket__item__message"><em>Optional personalised gift message</em></p>
<p class="basket__item__copy">Help a homeless young person escape homelessness forever.</p>
<div class="basket__item__meta">
<p class="basket__item__qty">Quantity: <b>1</b></p>
<p class="basket__item__actions"><a href="#" class="basket__edit">Edit</a> <a href="#" class="basket__delete">Delete</a></p>
</div>
<!--/basket__item__meta-->
</div>
<!--/basket__item__info-->
</div>
<!--/basket__item__inner-->
</div>
<!--/basket__item-->
<div class="basket__item">
<div class="basket__item__inner">
<div class="basket__item__media">
<a href="#"><img src="http://placehold.it/200x140" alt="" /></a>
</div>
<!--/basket__item__media-->
<div class="basket__item__info">
<h3 class="basket__item__title h3 h-secondary"><a href="#">More than a room</a></h3>
<p class="basket__item__price h3">£35.99</p>
<p class="basket__item__message"><em>Optional personalised gift message</em></p>
<p class="basket__item__copy">Help a homeless young person escape homelessness forever.</p>
<div class="basket__item__meta">
<p class="basket__item__qty">Quantity: <b>1</b></p>
<p class="basket__item__actions"><a href="#" class="basket__edit">Edit</a> <a href="#" class="basket__delete">Delete</a></p>
</div>
<!--/basket__item__meta-->
</div>
<!--/basket__item__info-->
</div>
<!--/basket__item__inner-->
</div>
<!--/basket__item-->
</div>
<!--/basket__list-->
<div class="basket__list__actions">
<a href="#" class="btn btn--white basket__add"><span>Add more gifts</span></a><br />
<a href="#" class="basket__clear">Clear basket</a>
</div>
<!--/basket__list__actions-->
<div class="basket__info">
<h3 class="h4 h-secondary">Postal delivery times:</h3>
<p>All Postcards are sent 2nd class and should arrive within 5 working days.</p>
<h3 class="h4 h-secondary">eCard delivery times:</h3>
<p>All eCards are emailed to recipients immediately.</p>
</div>
<!--/basket__info-->
</div>
<!--/basket__summary-->
</div>
<!--/basket__inner-->
</div>
<!--/basket-->
</div>
<!--/row-->
</section><section class="xx">
<div class="row">
<div class="media-block-list">
<div class="media-block-list__item">
<div class="media-block media-block--keyline media-block--no-media">
<div class="media-block__inner">
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
<div class="media-block-list__item">
<div class="media-block media-block--keyline media-block--no-media">
<div class="media-block__inner">
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
<div class="media-block-list__item">
<div class="media-block media-block--keyline media-block--no-media">
<div class="media-block__inner">
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
<div class="media-block-list__item">
<div class="media-block media-block--keyline media-block--no-media">
<div class="media-block__inner">
<div class="media-block__copy">
<div class="media-block__copy__inner">
<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
<p><a href="#">Read more</a></p>
</div>
<!--/media-block__copy__inner-->
</div>
<!--/media-block__copy-->
</div>
<!--/media-block__inner-->
</div>
<!--/media-block-->
</div>
<!--/media-block-list__item-->
</div>
<!--/media-block-list-->
<div class="paging">
<div class="paging__step paging__step--prev"><a href="#" class="paging__link">« Prev</a></div>
<ul class="paging__list">
<li><a href="#" class="paging__link"><span>Page </span>1</a></li>
<li><a href="#" class="paging__link"><span>Page </span>2</a></li>
<li><a href="#" class="paging__link paging__link--active"><span>Current page </span>3</a></li>
<li><a href="#" class="paging__link"><span>Page </span>4</a></li>
</ul>
<div class="paging__step paging__step--next"><a href="#" class="paging__link">Next »</a></div>
</div>
<!--/paging-->
</div>
<!--/row-->
</section>