Project pre-git
Nathan Steel
3 years ago
parent
87c16beed3
commit
2aae545b57
@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="FeedTheCommunity is a local Grimsby/N.E. Lincolnshire food bank with the aim to fight food poverty.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<title>Foodbank | Feed The Community</title>
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<header id="header" class="header">
|
||||
<div id="header-container" class="header-container">
|
||||
<a class="logo" href="/"><img src="/images/ftc_logo.webp" alt="Feed The Community Logo" height="57" width="167"></a>
|
||||
<div class="burger-container" id="burger"><div class="burger"></div><span class="vh">Burger menu</span></div>
|
||||
<nav class="desktop-nav" id="desktop-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
<nav class="mobile-nav" id="mobile-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section id="hero" class="hero-s">
|
||||
<div class="container hero-content">
|
||||
<h1>FAQ</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container section section--no-bg">
|
||||
|
||||
<details open>
|
||||
<summary><h2>When are you open, and where are you located?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>We are open on a Monday between 11am-2pm. We are based at St Christopher's Methodist Church on Convamore Road. </p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>Who can use the food bank?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>Anyone can access the food bank and you can self refer. However, you must be able to show that you are in financial hardship and are unable to support yourself.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>What do I need to bring with me to the foodbank?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>You must bring with you proof of hardship (Bank statements/proof of benefits) and some carrier bags.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>Can you help with anything other than food?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>Our main mission is preventing food poverty. However, we can redirect you to other services if we can.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>If you are closed where else can I get help with a food parcel?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>We are a member of the food poverty alliance. You can find alternative help by the <a href="http://www.weareone-outreachnortheast.org/services/food-banks" rel="noopener" target="_blank">We are ONE Foundation</a></p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>Do you deliver food parcels?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>Unfortunately no</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>I want to volunteer, how do I get in touch?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>Please use one of the methods at the bottom of this page. We would be greatful for any help you may be able to offer. </p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>Can I donate food?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>Donations can be brought into St Christopher's Church on a Monday 11am-2pm. We are partically greatful for non-perishable food produce however any food will help as long as it's in date.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>I am a local business looking to donate, who do I contact?</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>Please contact Sue on <a href="tel:07727260285">07727260285</a>.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><h2>What if I have a specific question</h2></summary>
|
||||
<div class="detail__body">
|
||||
<p>If you have any questions that are not currently in the FAQ, please contact use via:</p>
|
||||
<ul>
|
||||
<li>Phone: <a href="tel:07727260285">07727260285</a></li>
|
||||
<li>Email: <a href="mailto:feedthecommunity@outlook.com">feedthecommunity@outlook.com</a></li>
|
||||
<li>Facebook: <a href="https://www.facebook.com/feedthecommunitygy" rel="noopener" target="_blank">https://www.facebook.com/feedthecommunitygy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container footer__container">
|
||||
<section>
|
||||
<div class="footer__logo__container">
|
||||
<img class="footer__logo" src="/images/logo_icon.webp" alt="" height="44" width="41">
|
||||
<p class="footer__title">Feed The Community</a>
|
||||
</div>
|
||||
<p>Registered Charity No: <strong>1198636</strong></p>
|
||||
<section class="footer__sub">
|
||||
<p class="footer__title">Connect</p>
|
||||
<div>
|
||||
<a class="footer__icon" href="https://www.facebook.com/feedthecommunitygy" target="_blank" rel="noopener" aria-label="Facebook Link"><img src="/images/fb.svg" alt="" width="32" height="32"/></a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="footer__title">Get in touch</p>
|
||||
<ul>
|
||||
<li><a class="footer__link" href="tel:07727260285">07727260285</a></li>
|
||||
<li><a class="footer__link" href="mailto:feedthecommunity@outlook.com">feedthecommunity@outlook.com</a></li>
|
||||
<li><a class="footer__link" href="https://goo.gl/maps/vw3jrmJMQLEfQSk47" rel="noopener" target="_blank">St Christopher's Methodist Church, Grimsby</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<footer class="subfooter">
|
||||
<section class="container">
|
||||
<p class="siteby">© 2023 | Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a></p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<script src="/js/burger.js"></script>
|
||||
<script src="/js/header-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg height="1024" preserveAspectRatio="xMidYMid meet" width="1024" xmlns="http://www.w3.org/2000/svg"><g><title/><rect fill="none" height="1026" id="canvas_background" width="1026" x="-1" y="-1"/></g><g><title/><g fill="#000000" id="svg_1" transform="translate(0,1024) scale(0.10000000149011612,-0.10000000149011612) "><path d="m4869,9439c-559,-33 -1115,-178 -1618,-420c-1221,-588 -2102,-1719 -2371,-3044c-189,-929 -67,-1900 344,-2750c589,-1219 1718,-2097 3041,-2365c929,-189 1900,-67 2750,344c878,424 1597,1143 2021,2021c202,418 335,865 394,1324c109,840 -28,1690 -394,2446c-424,878 -1143,1597 -2021,2021c-665,322 -1407,468 -2146,423zm1769,-2361l-3,-473l-460,-5c-520,-6 -488,0 -544,-88c-57,-91 -61,-122 -61,-494l0,-338l535,0l535,0l0,-445l0,-445l-535,0l-535,0l0,-1330l0,-1330l-515,0l-515,0l0,1330l0,1330l-460,0l-460,0l0,445l0,445l460,0l460,0l0,321c0,349 10,457 56,616c126,434 462,783 857,888c144,39 206,42 715,44l472,1l-2,-472z" fill="#FFF" id="svg_2"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 990 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="FeedTheCommunity is a local Grimsby/N.E. Lincolnshire food bank with the aim to fight food poverty.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<title>Foodbank | Feed The Community</title>
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<header id="header" class="header">
|
||||
<div id="header-container" class="header-container">
|
||||
<a class="logo" href="/"><img src="/images/ftc_logo.webp" alt="Feed The Community Logo" height="57" width="167"></a>
|
||||
<div class="burger-container" id="burger"><div class="burger"></div><span class="vh">Burger menu</span></div>
|
||||
<nav class="desktop-nav" id="desktop-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
<nav class="mobile-nav" id="mobile-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section id="hero" class="hero-m hero--image">
|
||||
<div class="container hero-content">
|
||||
<h1>Feed The Community</h1>
|
||||
<h2>Fighting Food Poverty</h2>
|
||||
<a href="/support.html" class="button button--hero">Support Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container section">
|
||||
<h2>Our Mission</h2>
|
||||
<p>Commitment, transparency, innovation. These three values have stood at the center of the FTC mission since our founding in 2020. We are a foodbank charity in Grimsby. We wholeheartedly commit to the work we do with passion and dedication, transparently sharing it with the local community and inviting others to take part. On top of this, we challenge ourselves to think creatively, applying an innovative approach to all that we do. This mission drives the continued success of FTC.</p>
|
||||
</section>
|
||||
|
||||
<section class="container section">
|
||||
<h2>About Us</h2>
|
||||
<p>Feed the Community was created on the 25th October 2020 by Lacey Langridge during the covid 19 outbreak. Initially the food bank was run from her home, where herself and volunteers delivered food packages to those in need.</p>
|
||||
<p>In February 2021 FTC (as they are otherwise known) became an associate of 'WE ARE ONE' who helped with a shared data system and really supported FTC in the training of opening up a physical food bank.</p>
|
||||
<p>On 16th April 2021 they set up a food bank at the Fusion Centre on Ladysmith Road. This was a big turning point for FTC as they were now able to reach more people who was in need.</p>
|
||||
<p>Unfortunately, the premises was then outgrown as the need in the community became greater.</br>
|
||||
FTC then moved into St Christopher's Methodist Church 25th May 2022 where they remain today.</p>
|
||||
<p>FTC became a recognised charity on 14th April 2022.</p>
|
||||
<a href="/support.html" class="button button--fill">Support Us Today</a>
|
||||
</section>
|
||||
|
||||
<section class="container section">
|
||||
<h2>Fundraising</h2>
|
||||
<div class="fundraiser-container">
|
||||
<a href="#" class="fundraiser fundraiser--1">
|
||||
<img src="/images/fb-auctions.webp" alt="" width="240" height="240">
|
||||
<p>Facebook Auctions</p>
|
||||
</a>
|
||||
<a href="#" class="fundraiser fundraiser--2">
|
||||
<img src="/images/gofundme.png" alt="" width="240" height="240">
|
||||
<p>gofundme</p>
|
||||
</a>
|
||||
<a href="#" class="fundraiser fundraiser--3">
|
||||
<img src="/images/ebay.png" alt="" width="240" height="240">
|
||||
<p>ebay</p>
|
||||
</a>
|
||||
<a href="#" class="fundraiser fundraiser--4">
|
||||
<img src="/images/fb-marketplace.webp" alt="" width="240" height="240">
|
||||
<p>Facebook Marketplace</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container footer__container">
|
||||
<section>
|
||||
<div class="footer__logo__container">
|
||||
<img class="footer__logo" src="/images/logo_icon.webp" alt="" height="44" width="41">
|
||||
<p class="footer__title">Feed The Community</a>
|
||||
</div>
|
||||
<p>Registered Charity No: <strong>1198636</strong></p>
|
||||
<section class="footer__sub">
|
||||
<p class="footer__title">Connect</p>
|
||||
<div>
|
||||
<a class="footer__icon" href="https://www.facebook.com/feedthecommunitygy" target="_blank" rel="noopener" aria-label="Facebook Link"><img src="/images/fb.svg" alt="" width="32" height="32"/></a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="footer__title">Get in touch</p>
|
||||
<ul>
|
||||
<li><a class="footer__link" href="tel:07727260285">07727260285</a></li>
|
||||
<li><a class="footer__link" href="mailto:feedthecommunity@outlook.com">feedthecommunity@outlook.com</a></li>
|
||||
<li><a class="footer__link" href="https://goo.gl/maps/vw3jrmJMQLEfQSk47" rel="noopener" target="_blank">St Christopher's Methodist Church, Grimsby</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<footer class="subfooter">
|
||||
<section class="container">
|
||||
<p class="siteby">© 2023 | Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a></p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<script src="/js/burger.js"></script>
|
||||
<script src="/js/header-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
let accordions = document.getElementsByClassName('accordion');
|
||||
let accordionBodies = document.getElementsByClassName('accordion__item__body');
|
||||
|
||||
for (const accordion of accordions) {
|
||||
accordion.addEventListener('click', function (e) {
|
||||
if(e.target.classList.contains('accordion__item__header')){
|
||||
let accBody = document.getElementById(e.target.id + '__body');
|
||||
accBody.classList.toggle("accordion__item__body__hidden");
|
||||
}
|
||||
console.log('accordion clicked', e);
|
||||
});
|
||||
}
|
||||
|
||||
// Hide all accordion bodies if there's JS
|
||||
for (let accordionBody of accordionBodies) {
|
||||
accordionBody.classList.add('accordion__item__body__hidden');
|
||||
}
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
//const body = document.body;
|
||||
|
||||
function findAncestor(el, cls){
|
||||
while ((el = el.parentElement) && !el.classList.contains(cls));
|
||||
return el;
|
||||
}
|
||||
|
||||
// Event delegation. Body click, then check for buttons
|
||||
body.addEventListener('click', (e) => {
|
||||
if(e.target.classList.contains('button-close')){
|
||||
let alertD = findAncestor(e.target, 'alert--dismissable');
|
||||
if (typeof(alertD) != 'undefined' && alertD != null){
|
||||
alertD.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
const burger = document.getElementById("burger");
|
||||
const body = document.body;
|
||||
let mobileNav = document.getElementById('mobile-nav');
|
||||
|
||||
// Hide burger if JS loaded
|
||||
mobileNav.classList.add('mobile-nav--hidden');
|
||||
burger.addEventListener('click', burgerToggle);
|
||||
|
||||
function burgerToggle() {
|
||||
mobileNav.classList.toggle('mobile-nav--hidden');
|
||||
body.classList.toggle('burger-open');
|
||||
}
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
const cookiePrompt = document.getElementById('cookie-prompt');
|
||||
let acceptedCookies = getCookie("acceptCookies");
|
||||
|
||||
makePopup();
|
||||
|
||||
const cookieAccept = document.getElementById('cookie-accept');
|
||||
const cookieDecline = document.getElementById('cookie-decline');
|
||||
|
||||
cookieAccept.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
// Only add cookie if it's not there
|
||||
if (acceptedCookies == 0){
|
||||
acceptCookie();
|
||||
}
|
||||
});
|
||||
cookieDecline.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
alert('Boohoo');
|
||||
});
|
||||
|
||||
function makePopup(){
|
||||
// Cookie exists
|
||||
if (acceptedCookies == 0){
|
||||
showCookiePopup();
|
||||
}
|
||||
else if (acceptedCookies == 1){
|
||||
// Nothing, no need to do anything
|
||||
}
|
||||
else{
|
||||
showCookiePopup();
|
||||
setCookie("acceptCookies", 0, 365);
|
||||
}
|
||||
}
|
||||
|
||||
function showCookiePopup(){
|
||||
cookiePrompt.classList.remove('cookie-prompt--hidden');
|
||||
}
|
||||
|
||||
function acceptCookie(){
|
||||
setCookie("acceptCookies", 1, 365);
|
||||
cookiePrompt.classList.add('cookie-prompt--hidden');
|
||||
}
|
||||
|
||||
function setCookie(cname, cvalue, exdays) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||
let expires = "expires="+ d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/" + ";SameSite=Lax";
|
||||
}
|
||||
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
//const header = document.getElementById("header");
|
||||
const headerHeight = header.offsetHeight;
|
||||
const headerContainer = document.getElementById("header-container");
|
||||
const threshold = header.getBoundingClientRect();
|
||||
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY >= (headerHeight/2) || window.pageYOffset >= (headerHeight/2)){
|
||||
header.classList.add('header--scroll');
|
||||
headerContainer.classList.add('header-container--scroll');
|
||||
}
|
||||
else {
|
||||
header.classList.remove('header--scroll');
|
||||
headerContainer.classList.remove('header-container--scroll');
|
||||
}
|
||||
}
|
||||
|
||||
window.onscroll = () => {
|
||||
requestAnimationFrame(handleScroll)
|
||||
}
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
/* To toggle the different hero stylings in demo */
|
||||
const small = document.getElementById("small-hero");
|
||||
const med = document.getElementById("med-hero");
|
||||
const full = document.getElementById("full-hero");
|
||||
|
||||
const hero = document.getElementById("hero");
|
||||
const main = document.getElementById("main");
|
||||
const credit = document.getElementById("hero__credit");
|
||||
|
||||
small.addEventListener('click', function(){burgerToggle('s')}, false);
|
||||
med.addEventListener('click', function(){burgerToggle('m')}, false);
|
||||
full.addEventListener('click', function(){burgerToggle('f')}, false);
|
||||
|
||||
function burgerToggle(size) {
|
||||
/* Remove all then re-add what's needed */
|
||||
hero.classList.remove('hero-s');
|
||||
hero.classList.remove('hero-m');
|
||||
hero.classList.remove('hero-f');
|
||||
hero.classList.remove('hero--para');
|
||||
main.classList.remove('main--para');
|
||||
credit.classList.remove('hero__credit--hidden');
|
||||
|
||||
if (size == 'm'){
|
||||
hero.classList.add('hero-m');
|
||||
}else if (size == 'f'){
|
||||
hero.classList.add('hero-f');
|
||||
hero.classList.add('hero--para');
|
||||
main.classList.add('main--para');
|
||||
}else{
|
||||
hero.classList.add('hero-s');
|
||||
credit.classList.add('hero__credit--hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,70 @@
|
||||
const toastContainer = document.createElement('section');
|
||||
let toastCounter = 0;
|
||||
|
||||
document.body.onload = function(){
|
||||
addToastContainer();
|
||||
}
|
||||
|
||||
function addToastContainer(){
|
||||
toastContainer.classList.add('toast-container');
|
||||
|
||||
// Add the toast container before the first child of body
|
||||
document.firstElementChild.insertBefore(toastContainer, document.body);
|
||||
}
|
||||
|
||||
function randomToast(){
|
||||
const toasts = ['You\'ve done an error', 'Yea, it\'s broken, try later', 'Yeeheehee, I am the Grinch witch', 'Sucessfully added', 'Thank you!'];
|
||||
newToast(toasts[Math.floor(Math.random() * (toasts.length - 1))]);
|
||||
}
|
||||
|
||||
function newToast(innerText){
|
||||
let toast = createToast(innerText);
|
||||
addToast(toast);
|
||||
}
|
||||
|
||||
async function addToast(toast){
|
||||
toastContainer.appendChild(toast);
|
||||
countToasts();
|
||||
|
||||
await new Promise(r => setTimeout(r, 2400));
|
||||
|
||||
// May have been removed by user
|
||||
if(document.getElementById(toast.id)){
|
||||
toastContainer.removeChild(toast);
|
||||
}
|
||||
}
|
||||
|
||||
function createToast(innerText){
|
||||
// Output so that screenreaders announce it
|
||||
let toast = document.createElement('output');
|
||||
let toastInner = document.createElement('div');
|
||||
toast.appendChild(toastInner);
|
||||
// For screenreaders again, output may not exist
|
||||
toast.setAttribute('role','status');
|
||||
|
||||
// Set an Id, so that it can be user removed, etc.
|
||||
let toastId = 'toast_'+toastCounter;
|
||||
toastCounter++;
|
||||
|
||||
toastInner.innerText = innerText;
|
||||
toastInner.classList.add('toast__inner');
|
||||
toast.classList.add('toast');
|
||||
toast.setAttribute('id', toastId);
|
||||
|
||||
return toast;
|
||||
}
|
||||
|
||||
function countToasts(){
|
||||
let toasts = document.getElementsByClassName('toast');
|
||||
let toastCounter2 = 0;
|
||||
for (const toast of toasts) {
|
||||
toastCounter2++;
|
||||
if(toastCounter2 > 5){
|
||||
let rToast = document.getElementById('toast_'+(toastCounter-5));
|
||||
if(rToast){
|
||||
toastContainer.removeChild(rToast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,15 @@
|
||||
@media(prefers-color-scheme:dark){
|
||||
body{color:#CCC;background:#101}
|
||||
a:link,a:visited{color:#9CF}
|
||||
a:hover,a:visited:hover{color:#C34}
|
||||
h1{color:#FFF}h2{color:#EEE}
|
||||
h3,h4,h5,h6{color:#EEE}
|
||||
td,th{border-color:#444}
|
||||
thead tr{background:#101}
|
||||
tbody tr:nth-child(odd){background:#222}
|
||||
tbody tr:hover{background:#333}
|
||||
pre{background:#333;color:#EEE;border-color:#555}
|
||||
code{background:#333}
|
||||
.tag{border-color:#555}
|
||||
}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
/* Accordion */
|
||||
.accordion, details{
|
||||
border:1px solid $lightWhite;
|
||||
}
|
||||
.accordion__item{}
|
||||
.accordion__item + .accordion__item {border-top:1px solid $lightWhite;}
|
||||
.accordion__item__header, details summary{margin:0;border:none;border-bottom:1px solid $lightWhite;border-radius:0;width:100%;text-align:left;padding:1.2rem 1.6rem;font-size:1.6rem;background:$white;cursor:pointer;}
|
||||
.accordion__item__header:focus{border-bottom:1px solid $lightWhite;}
|
||||
.accordion__item__body,.detail__body{padding:1.2rem 1.6rem;}
|
||||
.accordion__item__body__hidden{display:none}
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
/* Alerts */
|
||||
.alert{
|
||||
border-radius:1.24rem;
|
||||
padding:1.24rem;
|
||||
position:relative;
|
||||
margin:1rem 0;
|
||||
border:1px solid $lightWhite;
|
||||
}
|
||||
.alert--dismissable{
|
||||
padding-right:3rem;
|
||||
}
|
||||
.alert--dismissable .button-close{
|
||||
position:absolute;
|
||||
top:0;right:0;
|
||||
padding:1.9rem 1rem;
|
||||
margin:0;
|
||||
}
|
||||
.alert--success{
|
||||
background: $success;
|
||||
}
|
||||
.alert--fail{
|
||||
background: $fail;
|
||||
}
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
/* Buttons */
|
||||
.button,a.button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
border:1px solid $primary;
|
||||
border-radius:.6rem;
|
||||
padding:1.2rem 1.6rem;
|
||||
display:inline-block;
|
||||
color:$primary;
|
||||
margin:.6rem .2rem;
|
||||
text-align:center;
|
||||
background:transparent;
|
||||
font-size:1.3rem;
|
||||
line-height:1.3rem;
|
||||
letter-spacing:.07rem;
|
||||
cursor:pointer;
|
||||
font-weight:bold;
|
||||
}
|
||||
.button:hover,a.button:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
.button:focus,button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: $grey;;
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
}
|
||||
.button--fill,
|
||||
a.button--fill,
|
||||
button.button--fill,
|
||||
input[type="submit"].button--fill,
|
||||
input[type="reset"].button--fill,
|
||||
input[type="button"].button--fill {
|
||||
background:$primary;
|
||||
color:$white;
|
||||
}
|
||||
.button--fill:hover,a.button--fill:hover,button.button--fill:hover,
|
||||
input[type="submit"].button--fill:hover,
|
||||
input[type="reset"].button--fill:hover,
|
||||
input[type="button"].button--fill:hover,
|
||||
.button--fill:focus,button:focus,
|
||||
input[type="submit"].button--fill:focus,
|
||||
input[type="reset"].button--fill:focus,
|
||||
input[type="button"].button--fill:focus {
|
||||
color: $black;
|
||||
background: $white;
|
||||
outline: 0;
|
||||
}
|
||||
.button--alt,
|
||||
a.button--alt,
|
||||
button.button--alt,
|
||||
input[type="submit"].button--alt,
|
||||
input[type="reset"].button--alt,
|
||||
input[type="button"].button--alt {
|
||||
background:$alt;
|
||||
border-color:$alt;
|
||||
color:$white;
|
||||
}
|
||||
.button--alt:hover,a.button--alt:hover,button.button--alt:hover,
|
||||
input[type="submit"].button--alt:hover,
|
||||
input[type="reset"].button--alt:hover,
|
||||
input[type="button"].button--alt:hover,
|
||||
.button--alt:focus,button:focus,
|
||||
input[type="submit"].button--alt:focus,
|
||||
input[type="reset"].button--alt:focus,
|
||||
input[type="button"].button--alt:focus {
|
||||
color: $grey;
|
||||
border-color: $buttonHoverColour;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button-close{
|
||||
box-sizing: content-box;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: .25em .25em;
|
||||
color: $black;
|
||||
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
|
||||
border: 0;
|
||||
border-radius: .375rem;
|
||||
opacity: .5;
|
||||
vertical-align:middle;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
/* Card */
|
||||
.card{
|
||||
background: $lighterWhite;
|
||||
text-align:center;
|
||||
transition:transform .2s;
|
||||
width: 240px;
|
||||
display: inline-block;
|
||||
vertical-align:top;
|
||||
margin:1rem;
|
||||
overflow:hidden;
|
||||
}
|
||||
.card:hover{
|
||||
/*transform:scale(1.04);
|
||||
filter: brightness(1.03);*/
|
||||
}
|
||||
.card__header{
|
||||
padding: 2rem;
|
||||
width:100%;
|
||||
height:auto;
|
||||
background:red;
|
||||
color:$white;
|
||||
position:relative;
|
||||
padding:0;margin:0;
|
||||
}
|
||||
.card__header--image{
|
||||
padding:0;
|
||||
width:100%;
|
||||
}
|
||||
.card__header img{
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
}
|
||||
.card__header__absolute{
|
||||
color:$white;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.card__content{
|
||||
padding:2.2rem;
|
||||
}
|
||||
.card__footer{
|
||||
padding:1.2rem;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.flip-card{
|
||||
&:hover{
|
||||
.flip-card__front{
|
||||
display: none;
|
||||
}
|
||||
.flip-card__back{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.flip-card__front{
|
||||
display:block;
|
||||
}
|
||||
.flip-card__back{
|
||||
display:none;
|
||||
}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
/* Code */
|
||||
pre{
|
||||
background:$code;padding:1rem;margin:1rem 0;
|
||||
white-space:pre-wrap;overflow-x:auto;
|
||||
border:1px solid $code;border-radius:6px}
|
||||
code{
|
||||
background:$code;padding:.1rem .4rem;
|
||||
border:1px solid $code;border-radius:6px;
|
||||
font-size:1.5rem;color:$codeText}
|
||||
pre code{border:none}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
/* Cookies */
|
||||
.cookie-prompt{
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
background:$lightWhite;
|
||||
border-top: 1px solid $grey;
|
||||
width:100%;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
.cookie-prompt--hidden{
|
||||
display:none;
|
||||
}
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
/* Hero */
|
||||
#hero{
|
||||
-webkit-transition: all .3s linear;
|
||||
-moz-transition: all .3s linear;
|
||||
-o-transition: all .3s linear;
|
||||
transition: all .3s linear;
|
||||
}
|
||||
.hero__credit{
|
||||
position:absolute;
|
||||
bottom:0;right:0;
|
||||
padding:1.24rem;
|
||||
border-radius: 1rem 0 0 0;
|
||||
background:$lightWhite;
|
||||
}
|
||||
.hero__credit--hidden{
|
||||
display:none;
|
||||
}
|
||||
.hero-s{padding:4.64rem;background:$primary}
|
||||
.hero-m{
|
||||
height:400px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
max-height:70vh;
|
||||
}
|
||||
.hero-f{
|
||||
height:100vh;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
.hero--image{
|
||||
background-image:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)), url("./images/hero.jpg");
|
||||
}
|
||||
.hero-content{
|
||||
text-align:center;
|
||||
}
|
||||
.hero-m .hero-content,
|
||||
.hero-f .hero-content{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
}
|
||||
.hero-s *, .hero-m *, .hero-f *{
|
||||
color: $white;
|
||||
}
|
||||
.hero--para{
|
||||
background-attachment:fixed;
|
||||
}
|
||||
.main--para{
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
/* Lists */
|
||||
ul{padding-left:0;margin-left:0;list-style:inside}
|
||||
ul li{margin:.35rem}
|
||||
li>ul{margin-left:1em}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
@import 'accordion';
|
||||
@import 'alerts';
|
||||
@import 'buttons';
|
||||
@import 'card';
|
||||
@import 'code';
|
||||
@import 'cookies';
|
||||
@import 'hero';
|
||||
@import 'lists';
|
||||
@import 'quotes';
|
||||
@import 'tables';
|
||||
@import 'tags';
|
||||
@import 'toast';
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
/* Quotes */
|
||||
blockquote{
|
||||
margin:1.7rem .2rem;
|
||||
border-left:2px solid;
|
||||
padding:1rem .4rem;padding-left:2rem}
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
/* Tables */
|
||||
.tblcon{overflow-x:auto}
|
||||
table{text-align:left;width:100%;
|
||||
border-collapse:collapse;
|
||||
overflow-wrap:normal;
|
||||
margin:24px 0}
|
||||
th{font-weight:bold}
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid $tableBorder; }
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0; }
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0; }
|
||||
thead tr{border-color:red}
|
||||
tbody tr:nth-child(odd) td{background-color: $offWhite}
|
||||
tbody tr:hover td{background:$code}
|
||||
|
||||
@media print{.container{max-width:none}}
|
||||
@media(min-width:720px){
|
||||
ul li{margin:auto}
|
||||
}
|
||||
@media(max-width:320px){
|
||||
body{overflow-wrap:anywhere}
|
||||
img{width:100%;height:auto}
|
||||
}
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
/* Tags */
|
||||
.tag{
|
||||
font-size:.8rem;vertical-align:middle;
|
||||
padding:.2rem .5rem;border-radius:.33rem;
|
||||
border:1px solid $tag}
|
||||
.tag--m{font-size:1rem;}
|
||||
.tag--l{font-size:1.2rem;}
|
||||
.tag--fill{background:$primary;color:$white;border-color:$primary}
|
||||
.tag--alt{background:$alt;color:$white;border-color:$alt}
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
/* Toasts */
|
||||
.toast-container{
|
||||
position:fixed;
|
||||
z-index:9;
|
||||
bottom: 0;
|
||||
padding:1rem;
|
||||
pointer-events:none; /* Prevent interaction */
|
||||
width:100%;
|
||||
}
|
||||
.toast{
|
||||
text-align:center;
|
||||
display:block;
|
||||
}
|
||||
.toast__inner{
|
||||
margin:0 auto;
|
||||
font:1.4rem sans-serif;color:$content;
|
||||
padding: 1.2rem 2rem;border-radius:.3rem;
|
||||
background:#222;
|
||||
color:$white;text-align:center;
|
||||
box-shadow: 0px 2px 8px -5px rgba(0, 0, 0, 1);
|
||||
display:inline-block;
|
||||
}
|
||||
.toast + .toast{
|
||||
margin-top:.4rem;
|
||||
}
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
$content: #444;
|
||||
$black: #000;
|
||||
$white: #FFF;
|
||||
$lightWhite: #EEE;
|
||||
$lighterWhite: #DDD;
|
||||
$offWhite: #FCFCFC;
|
||||
$code: #F8F8F8;
|
||||
$codeText: #555;
|
||||
$tableBorder: #E1E1E1;
|
||||
$h1: $black;
|
||||
$lightBlack: #111;
|
||||
$lighterBlack: #222;
|
||||
$grey: #333;
|
||||
$linkHover: #07C;
|
||||
$linkVisited: #0000CC;
|
||||
$buttonHoverColour: #888;
|
||||
$primary: #275D57;
|
||||
$alt: #DF7E77;
|
||||
$focus: #33C3F0;
|
||||
$tag: #DDD;
|
||||
$success: #D1E7DD;
|
||||
$fail: #F8D7DA;
|
||||
$background: #FAECE1;
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
/* Core */
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,body{height:100%}
|
||||
html{font-size:10px}
|
||||
body{
|
||||
font:1.6rem/1.62 sans-serif;color:$content;
|
||||
display:-webkit-flex;display:-ms-flexbox;display:flex;
|
||||
flex-direction:column}
|
||||
main{
|
||||
flex:1 0 auto;
|
||||
margin-top:5.31rem;
|
||||
}
|
||||
|
||||
img{
|
||||
display:block;
|
||||
}
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
/* Form stuff */
|
||||
.form{
|
||||
padding:2rem;
|
||||
background:$offWhite;
|
||||
border: 1px solid $lightWhite;
|
||||
border-radius:1rem;
|
||||
margin:2rem 0;
|
||||
}
|
||||
input[type="email"],input[type="number"],
|
||||
input[type="search"],input[type="text"],
|
||||
input[type="tel"],input[type="url"],
|
||||
input[type="password"],
|
||||
textarea,select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: $white;
|
||||
border: 1px solid $tableBorder;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
/* Removes awkward default styles on some inputs for iOS */
|
||||
input[type="email"],input[type="number"],
|
||||
input[type="search"],input[type="text"],
|
||||
input[type="tel"],input[type="url"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
textarea {
|
||||
min-height: 65px;
|
||||
resize: vertical;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px; }
|
||||
input[type="email"]:focus,input[type="number"]:focus,
|
||||
input[type="search"]:focus,input[type="text"]:focus,
|
||||
input[type="tel"]:focus,input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,select:focus {
|
||||
border: 1px solid $focus;
|
||||
outline: 0; }
|
||||
label,legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
fieldset {
|
||||
padding: 0;
|
||||
border-width: 0; }
|
||||
input[type="checkbox"],input[type="radio"] {
|
||||
display: inline; }
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-weight: normal; }
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.24rem;
|
||||
box-sizing: border-box;
|
||||
overflow:auto; }
|
||||
|
||||
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding: .44rem;
|
||||
margin: .6rem 0;
|
||||
}
|
||||
.grid-visible{
|
||||
background: #EEE;
|
||||
text-align: center;
|
||||
border-radius: .44rem;
|
||||
}
|
||||
|
||||
/* For devices larger than 360px */
|
||||
@media (min-width: 360px) {
|
||||
.container {
|
||||
// width: 85%;
|
||||
// padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container { width: 80%; }
|
||||
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve{margin-left: 4%; }
|
||||
.one:first-child,
|
||||
.two:first-child,.three:first-child,.four:first-child,
|
||||
.five:first-child,.six:first-child,.seven:first-child,
|
||||
.eight:first-child,.nine:first-child,.ten:first-child,
|
||||
.eleven:first-child,.twelve:first-child{margin-left: 0; }
|
||||
|
||||
.one { width: 4.66666666667%; }
|
||||
.two { width: 13.3333333333%; }
|
||||
.three { width: 22%; }
|
||||
.four { width: 30.6666666667%; }
|
||||
.five { width: 39.3333333333%; }
|
||||
.six { width: 48%; }
|
||||
.seven { width: 56.6666666667%; }
|
||||
.eight { width: 65.3333333333%; }
|
||||
.nine { width: 74.0%; }
|
||||
.ten { width: 82.6666666667%; }
|
||||
.eleven { width: 91.3333333333%; }
|
||||
.twelve { width: 100%; margin-left: 0; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-one { margin-left: 8.66666666667%; }
|
||||
.offset-two { margin-left: 17.3333333333%; }
|
||||
.offset-three { margin-left: 30%; }
|
||||
.offset-four { margin-left: 34.6666666667%; }
|
||||
.offset-five { margin-left: 43.3333333333%; }
|
||||
.offset-six { margin-left: 52%; }
|
||||
.offset-seven { margin-left: 60.6666666667%; }
|
||||
.offset-eight { margin-left: 69.3333333333%; }
|
||||
.offset-nine { margin-left: 78.0%; }
|
||||
.offset-ten { margin-left: 86.6666666667%; }
|
||||
.offset-eleven,.offset-eleven:first-child { margin-left: 95.3333333333%; }
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
/* Header */
|
||||
.header{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
background: $white;
|
||||
border-bottom:1px solid $lighterWhite;
|
||||
z-index:9;
|
||||
}
|
||||
.header-container{
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
padding:1.305rem;
|
||||
/*max-height:52px;*/
|
||||
max-width:960px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
}
|
||||
.header--scroll{
|
||||
position:fixed;
|
||||
}
|
||||
.header-container--scroll{
|
||||
padding:.24rem 1.24rem;
|
||||
}
|
||||
.logo{font-weight:bold}
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
@import 'reset';
|
||||
|
||||
@import 'colours';
|
||||
|
||||
@import 'core';
|
||||
@import 'typography';
|
||||
|
||||
@import 'forms';
|
||||
@import 'grid';
|
||||
@import 'header';
|
||||
@import 'nav';
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
.desktop-nav{display:none}
|
||||
.mobile-nav{height:100%;
|
||||
width:100%;
|
||||
position:fixed;
|
||||
top:51px;left:0;right:0;
|
||||
padding:1.24rem;
|
||||
background:#FFF;border-left:1px solid #EEE;
|
||||
z-index:8;}
|
||||
nav>a{
|
||||
padding:.2rem 0;
|
||||
display:block;
|
||||
border-top:1px dotted #101}
|
||||
nav>a:first-child{border:none}
|
||||
.mobile-nav--hidden{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.burger-container{
|
||||
position:relative;height:20px;width:28px;
|
||||
cursor:pointer;z-index:9}
|
||||
.burger,.burger::after,.burger::before{
|
||||
position:absolute;
|
||||
height:4px;width:28px;content:"";
|
||||
transition:transform 300ms cubic-bezier(.4,1,.5,1);
|
||||
background:$black;}
|
||||
.burger::before{margin-top:8px}
|
||||
.burger::after{margin-top:16px}
|
||||
.burger-open{overflow:hidden;}
|
||||
|
||||
@media(min-width:720px){
|
||||
.desktop-nav{display:inline-block}
|
||||
nav>a{margin-left:2rem;padding:auto;display:inline;border:none}
|
||||
nav>a:first-child{padding:1rem 0;margin-left:0}
|
||||
.burger-container{display:none}
|
||||
.burger-open{overflow:auto;}
|
||||
.mobile-nav{display:none}
|
||||
}
|
||||
@media(max-width:320px){
|
||||
.burger-container{display:block}
|
||||
}
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/* Typography */
|
||||
h1,h2,h3,h4,h5,h6{line-height:1.2;margin:1rem 0}
|
||||
h1{color:$lightBlack;font-size:3rem;font-weight:bold;margin:.8rem 0}
|
||||
h1:first-of-type{margin-top:0;line-height:1;}
|
||||
h2{color:$lighterBlack;font-size:2.2rem;font-weight:bold; margin:.6rem 0}
|
||||
h3{color:$grey;font-size:1.8rem; margin:.4rem 0}
|
||||
h4,h5,h6{color:$content;font-size:1.5rem; margin:.2rem 0}
|
||||
|
||||
/* Links */
|
||||
a{text-decoration:none}
|
||||
a:link,a:visited{color:$linkVisited}
|
||||
a:hover,a:visited:hover{color:$linkHover}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
@import 'core/main';
|
||||
@import 'components/main';
|
||||
@import 'utilities/main';
|
||||
@import 'site/main';
|
||||
@import 'pages/main';
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
@import 'site';
|
||||
|
||||
@ -0,0 +1,368 @@
|
||||
/* Site specific */
|
||||
$headerHeight: 84px;
|
||||
|
||||
strong{
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.section{
|
||||
padding:1.75rem 1.24rem;
|
||||
margin:1.75rem auto;
|
||||
background: $white;
|
||||
}
|
||||
.section--no-bg{
|
||||
padding:0; /*1.24rem*/
|
||||
background: none;
|
||||
}
|
||||
nav a{
|
||||
color: $black;
|
||||
&:hover, &:visited:hover{
|
||||
color:$primary;
|
||||
border-bottom:1px solid $primary;
|
||||
}
|
||||
&:visited{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
main{
|
||||
margin-top:$headerHeight;
|
||||
background:$background;
|
||||
}
|
||||
.hero--image{
|
||||
background-size:cover;
|
||||
background-position-x:center;
|
||||
background-position-y:top;
|
||||
}
|
||||
a.button--hero{
|
||||
border-color:$white;
|
||||
background:$offWhite;
|
||||
color:$primary;
|
||||
font-size:1.5rem;
|
||||
margin-top:1.2rem;
|
||||
&:hover{
|
||||
background:$white;
|
||||
color:$black;
|
||||
}
|
||||
}
|
||||
.section h2{
|
||||
border-bottom:1px solid $lightWhite;
|
||||
padding-bottom:1.4rem;
|
||||
margin-bottom:1.4rem;
|
||||
}
|
||||
.hero-m .hero-content{
|
||||
top:auto;
|
||||
transform:translate(-50%, 0);
|
||||
bottom: 50px;
|
||||
h1{
|
||||
font-size:3.8rem;
|
||||
}
|
||||
h2{
|
||||
font-size:2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
details{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
details summary,
|
||||
details .detail__body{
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.header{
|
||||
height: $headerHeight;
|
||||
/*
|
||||
background:#39897B;
|
||||
*/
|
||||
}
|
||||
.header--scroll{
|
||||
height:auto;
|
||||
}
|
||||
.mobile-nav{
|
||||
top:$headerHeight;
|
||||
}
|
||||
main{
|
||||
/*
|
||||
background:#C8BDB4;
|
||||
*/
|
||||
}
|
||||
nav > a{
|
||||
padding:.7rem;
|
||||
}
|
||||
.fundraiser-container{
|
||||
display:grid;
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
@media(min-width:360px){
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||
}
|
||||
}
|
||||
.fundraiser{
|
||||
/*
|
||||
float:left;
|
||||
width:25%;
|
||||
*/
|
||||
|
||||
border-bottom:1px solid $lighterWhite;
|
||||
text-align:center;
|
||||
padding-bottom:1rem;
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
img{
|
||||
align-items:center;
|
||||
width:100%;
|
||||
height:auto;
|
||||
/*
|
||||
flex: 1 0 auto;
|
||||
*/
|
||||
}
|
||||
|
||||
p{
|
||||
padding-top:.6rem;
|
||||
margin-bottom:auto;
|
||||
}
|
||||
|
||||
&:nth-child(odd){
|
||||
border-bottom:1px solid $lightWhite;
|
||||
}
|
||||
&:hover{
|
||||
border-bottom:1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top:1rem;
|
||||
}
|
||||
p + .button {
|
||||
margin-top:2rem;
|
||||
}
|
||||
.footer{
|
||||
border-top:1px solid $lightBlack;
|
||||
background: lighten($primary,10);
|
||||
padding:1.6rem 0;
|
||||
padding-bottom: 2.4rem;
|
||||
}
|
||||
.footer *{
|
||||
color: $white;
|
||||
}
|
||||
.footer__sub{
|
||||
margin-top:2rem;
|
||||
}
|
||||
.footer__title,{
|
||||
font-weight:bold;
|
||||
font-size:1.85rem;
|
||||
margin-bottom:1rem;
|
||||
margin-top:.8rem;
|
||||
}
|
||||
.footer__logo__container{
|
||||
display:flex;
|
||||
gap: 1.6rem;
|
||||
align-items: center;
|
||||
margin-bottom:1rem;
|
||||
.footer__title{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
.footer__logo{
|
||||
border-radius: 9999px;
|
||||
}
|
||||
a.footer__link{
|
||||
color: $white;
|
||||
&:hover{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.subfooter{
|
||||
border-top:1px solid $lighterBlack;
|
||||
background: $primary;
|
||||
padding:.8rem 0;
|
||||
}
|
||||
.subfooter *{
|
||||
color: $white;
|
||||
}
|
||||
.subfooter a{
|
||||
color: $white;
|
||||
text-decoration:underline;
|
||||
&:hover{
|
||||
color:$lighterWhite;
|
||||
}
|
||||
}
|
||||
.footer__container{
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
gap:3rem;
|
||||
}
|
||||
a.footer__icon{
|
||||
width:32px;
|
||||
height:32px;
|
||||
display:inline-block;
|
||||
}
|
||||
.siteby{
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.section summary h2{
|
||||
font-size:1.6rem;
|
||||
border:none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card__content{
|
||||
background:$white;
|
||||
padding:1rem;
|
||||
}
|
||||
.team-grid{
|
||||
display:grid;
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
@media(min-width:700px){
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
@media(min-width:1000px){
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
|
||||
& .card{
|
||||
width:100%;
|
||||
height:auto;
|
||||
background: $white;
|
||||
position:relative;
|
||||
}
|
||||
}
|
||||
|
||||
.card__image{
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
.flip-card{
|
||||
margin:0;
|
||||
position:relative;
|
||||
height:286px;
|
||||
width:100%;
|
||||
&:hover{
|
||||
.flip-card__front{
|
||||
display: block; // Overwrite of _cards
|
||||
@media(min-width:320px){
|
||||
.card__content{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flip-card__back{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flip-card__front{
|
||||
position:relative;
|
||||
}
|
||||
.flip-card__front .card__content{
|
||||
@media(min-width:320px){
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
max-width:85%;
|
||||
}
|
||||
background: $primary;
|
||||
background: rgba($primary, .8);
|
||||
*{color:$white;}
|
||||
|
||||
h2{
|
||||
border:0;
|
||||
padding:0;
|
||||
}
|
||||
h3{
|
||||
font-size:1.6rem;
|
||||
}
|
||||
}
|
||||
.flip-card__back{
|
||||
display:block;
|
||||
@media(min-width:320px){
|
||||
display:none;
|
||||
.card__content{
|
||||
position:relative;
|
||||
& p{
|
||||
position:relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flip-card__back .card__content{
|
||||
@media(min-width:320px){
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: $primary;
|
||||
background: rgba($primary, .8);
|
||||
|
||||
& p{
|
||||
padding:1rem;
|
||||
position:absolute;
|
||||
top:50%;left:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
width:100%;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.donate-container{
|
||||
display:grid;
|
||||
gap:1rem;
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
@media(min-width:720px){
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
|
||||
section{
|
||||
padding:1rem;
|
||||
h3{
|
||||
border-bottom:1px solid $lightWhite;
|
||||
padding-bottom:1rem;
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
a.button{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-container{
|
||||
display:grid;
|
||||
gap:1rem;
|
||||
margin:0 auto;
|
||||
margin-top:1rem;
|
||||
gap:1rem;
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
@media(min-width:720px){
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
@media(min-width:960px){
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
}
|
||||
a, a:visited{
|
||||
display:block;
|
||||
background:lighten($primary,10);
|
||||
padding:1rem;
|
||||
text-align:center;
|
||||
color:$white;
|
||||
&:hover{
|
||||
background:lighten($primary,15);
|
||||
}
|
||||
|
||||
&:nth-child(odd){
|
||||
background:$primary;
|
||||
&:hover{
|
||||
background:lighten($primary,15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
@import 'utilities';
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
/* Utilities */
|
||||
.hidden{display:none;}
|
||||
.tac{text-align:center;}
|
||||
|
||||
.vh{
|
||||
position:absolute;
|
||||
clip:rect(1px,1px,1px,1px);
|
||||
height:1px;width:1px;
|
||||
padding:2px 8px;overflow:hidden;
|
||||
white-space:nowrap;
|
||||
background:$white;z-index:10}
|
||||
.vh:focus{
|
||||
clip:auto;overflow:auto;
|
||||
height:auto;width:auto}
|
||||
|
||||
.u-full-width {
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-max-full-width {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box; }
|
||||
.u-pull-right {
|
||||
float: right; }
|
||||
.u-pull-left {
|
||||
float: left; }
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="FeedTheCommunity is a local Grimsby/N.E. Lincolnshire food bank with the aim to fight food poverty.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<title>Foodbank | Feed The Community</title>
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<header id="header" class="header">
|
||||
<div id="header-container" class="header-container">
|
||||
<a class="logo" href="/"><img src="/images/ftc_logo.webp" alt="Feed The Community Logo" height="57" width="167"></a>
|
||||
<div class="burger-container" id="burger"><div class="burger"></div><span class="vh">Burger menu</span></div>
|
||||
<nav class="desktop-nav" id="desktop-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
<nav class="mobile-nav" id="mobile-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section id="hero" class="hero-s">
|
||||
<div class="container hero-content">
|
||||
<h1>Support Us</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container section">
|
||||
<h2>Volunteer</h2>
|
||||
<p>We are always on the lookout for new volunteers. As our organisation is growing larger we <strong>NEED</strong> people who have a can do, positive attitude. If you can spare a few hours a week please get in touch with us using one of the contact options below.</p>
|
||||
<section class="contact-container">
|
||||
<a href="tel:07727260285">
|
||||
<p>Phone:<br/>07727260285</p>
|
||||
</a>
|
||||
<a href="mailto:feedthecommunity@outlook.com">
|
||||
<p>Email:<br/>feedthecommunity@outlook.com</p>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/feedthecommunitygy" rel="noopener" target="_blank">
|
||||
<p>Facebook:<br/>/feedthecommunitygy</p>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="container section">
|
||||
<h2>Donate</h2>
|
||||
<div class="donate-container">
|
||||
<section>
|
||||
<h3>In person</h3>
|
||||
<p>We are always in need of non-perishable food produce. This can be dropped off at St Christopher's Methodist Church on a Monday 11am-2pm.</p>
|
||||
<p>We also raise funds for our food bank by way of an online auction on Facebook, good, saleable items are also gladly accepted, but please call/Facebook for us to organise a collection of this.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Online</h3>
|
||||
<p>You can donate online by clicking the donate button below. Any amount, small or large is greatly appreciated.</p>
|
||||
<p>If you would like to fundraise for us, we also can be found on the Facebook Raise Money button.</p>
|
||||
<a class="button button--fill" href="http://paypal.com/gb/fundraiser/charity/4588081" rel="noopener" target="_blank">Donate</a>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="container section">
|
||||
<h2>Fundraising</h2>
|
||||
<div class="fundraiser-container">
|
||||
<a href="#" class="fundraiser fundraiser--1">
|
||||
<img src="/images/fb-auctions.webp" alt="" width="240" height="240">
|
||||
<p>Facebook Auctions</p>
|
||||
</a>
|
||||
<a href="#" class="fundraiser fundraiser--2">
|
||||
<img src="/images/gofundme.png" alt="" width="240" height="240">
|
||||
<p>gofundme</p>
|
||||
</a>
|
||||
<a href="#" class="fundraiser fundraiser--3">
|
||||
<img src="/images/ebay.png" alt="" width="240" height="240">
|
||||
<p>ebay</p>
|
||||
</a>
|
||||
<a href="#" class="fundraiser fundraiser--4">
|
||||
<img src="/images/fb-marketplace.webp" alt="" width="240" height="240">
|
||||
<p>Facebook Marketplace</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container footer__container">
|
||||
<section>
|
||||
<div class="footer__logo__container">
|
||||
<img class="footer__logo" src="/images/logo_icon.webp" alt="" height="44" width="41">
|
||||
<p class="footer__title">Feed The Community</a>
|
||||
</div>
|
||||
<p>Registered Charity No: <strong>1198636</strong></p>
|
||||
<section class="footer__sub">
|
||||
<p class="footer__title">Connect</p>
|
||||
<div>
|
||||
<a class="footer__icon" href="https://www.facebook.com/feedthecommunitygy" target="_blank" rel="noopener" aria-label="Facebook Link"><img src="/images/fb.svg" alt="" width="32" height="32"/></a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="footer__title">Get in touch</p>
|
||||
<ul>
|
||||
<li><a class="footer__link" href="tel:07727260285">07727260285</a></li>
|
||||
<li><a class="footer__link" href="mailto:feedthecommunity@outlook.com">feedthecommunity@outlook.com</a></li>
|
||||
<li><a class="footer__link" href="https://goo.gl/maps/vw3jrmJMQLEfQSk47" rel="noopener" target="_blank">St Christopher's Methodist Church, Grimsby</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
</footer>
|
||||
<footer class="subfooter">
|
||||
<section class="container">
|
||||
<p class="siteby">© 2023 | Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a></p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<script src="/js/burger.js"></script>
|
||||
<script src="/js/header-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="FeedTheCommunity is a local Grimsby/N.E. Lincolnshire food bank with the aim to fight food poverty.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<title>Foodbank | Feed The Community</title>
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
<a href="#main" class="vh">Jump directly to main content</a>
|
||||
<header id="header" class="header">
|
||||
<div id="header-container" class="header-container">
|
||||
<a class="logo" href="/"><img src="/images/ftc_logo.webp" alt="Feed The Community Logo" height="57" width="167"></a>
|
||||
<div class="burger-container" id="burger"><div class="burger"></div><span class="vh">Burger menu</span></div>
|
||||
<nav class="desktop-nav" id="desktop-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
<nav class="mobile-nav" id="mobile-nav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/team.html">The Team</a>
|
||||
<a href="/support.html">Support Us</a>
|
||||
<a href="/faq.html">FAQ</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section id="hero" class="hero-s">
|
||||
<div class="container hero-content">
|
||||
<h1>The Team</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container section section--no-bg">
|
||||
<div class="team-grid">
|
||||
|
||||
<div class="card flip-card">
|
||||
<div class="flip-card__front">
|
||||
<img class="card__image" src="/images/team/lacey.webp" width="320" height="286" alt="">
|
||||
<div class="card__content">
|
||||
<h2>Lacey Langridge</h2>
|
||||
<h3>Founder & CEO</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flip-card__back">
|
||||
<div class="card__content">
|
||||
<p>Lacey is a mum of 3 and wanted to make a difference during the covid 19 crisis. She is the founder and CEO of FTC. She is also a Law Student and still plays an active role in leading this charity in the right direction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flip-card">
|
||||
<img class="card__image" src="/images/team/lindsey.webp" width="320" height="286" alt="">
|
||||
<div class="flip-card__front">
|
||||
<div class="card__content">
|
||||
<h2>Lindsey Dickinson</h2>
|
||||
<h3>Chair Woman</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flip-card__back">
|
||||
<div class="card__content">
|
||||
<p>Lindsey is a mum to 2 children, and a nurse at Scunthorpe Hospital. She enjoys family time and socialising with others. She became the chair woman of the charity as she is passionate about making a difference to the local community.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flip-card">
|
||||
<img class="card__image" src="/images/team/susan.webp" width="320" height="286" alt="">
|
||||
<div class="flip-card__front">
|
||||
<div class="card__content">
|
||||
<h2>Susan Williams</h2>
|
||||
<h3>Food Bank Co-ordinator / Treasurer / Secretary</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flip-card__back">
|
||||
<div class="card__content">
|
||||
<p>Susan is a very committed member of our team and will be the person that you most see on a regular basis. She is a book of knowledge and will be able to answer most enquiries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flip-card">
|
||||
<img class="card__image" src="/images/team/debbie.webp" width="320" height="286" alt="">
|
||||
<div class="flip-card__front">
|
||||
<div class="card__content">
|
||||
<h2>Debbie Burley</h2>
|
||||
<h3>Trustee</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flip-card__back">
|
||||
<div class="card__content">
|
||||
<p>Debbie is a wife and doting mum of 3. She also works full time as a manager. Debbie helps on the trustee board offering ideas and inspiration to the team.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container footer__container">
|
||||
<section>
|
||||
<div class="footer__logo__container">
|
||||
<img class="footer__logo" src="/images/logo_icon.webp" alt="" height="44" width="41">
|
||||
<p class="footer__title">Feed The Community</a>
|
||||
</div>
|
||||
<p>Registered Charity No: <strong>1198636</strong></p>
|
||||
<section class="footer__sub">
|
||||
<p class="footer__title">Connect</p>
|
||||
<div>
|
||||
<a class="footer__icon" href="https://www.facebook.com/feedthecommunitygy" target="_blank" rel="noopener" aria-label="Facebook Link"><img src="/images/fb.svg" alt="" width="32" height="32"/></a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="footer__title">Get in touch</p>
|
||||
<ul>
|
||||
<li><a class="footer__link" href="tel:07727260285">07727260285</a></li>
|
||||
<li><a class="footer__link" href="mailto:feedthecommunity@outlook.com">feedthecommunity@outlook.com</a></li>
|
||||
<li><a class="footer__link" href="https://goo.gl/maps/vw3jrmJMQLEfQSk47" rel="noopener" target="_blank">St Christopher's Methodist Church, Grimsby</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<footer class="subfooter">
|
||||
<section class="container">
|
||||
<p class="siteby">© 2023 | Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a></p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<script src="/js/burger.js"></script>
|
||||
<script src="/js/header-scroll.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue