211 lines
11 KiB
HTML
211 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Bio Bulk Bende</title>
|
||
<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative">
|
||
<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
|
||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
|
||
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
|
||
|
||
<!-- build:js assets/scripts/Vendor.js -->
|
||
<script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
|
||
<!-- endbuild -->
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<header class="site-header">
|
||
<div class="wrapper">
|
||
<div class="site-header__logo">
|
||
<!-- <span clss="icon icon--logo_white"></span> -->
|
||
<img src="./assets/media/images/logo_white.png" alt="Bio Bulk Bende logo with an almond">
|
||
</div>
|
||
<div class="site-header__menu-icon">
|
||
<div class="site-header__menu-icon__middle"></div>
|
||
</div>
|
||
<div class="site-header__menu-content">
|
||
<div class="site-header__btn-container">
|
||
<a href="#" class="btn ">Place your Order</a>
|
||
</div>
|
||
<div class="site-header__language">
|
||
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
|
||
</div>
|
||
<nav class="primary-nav primary-nav--pull-right">
|
||
<ul>
|
||
<li><a href="#about-us" id="about-us-link">About us</a></li>
|
||
<li><a href="#how-it-works" id="how-it-works-link">How it works</a></li>
|
||
<!-- <li><a href="#agenda">Agenda</a></li> -->
|
||
<li><a href="https://foodsoft.biobulkbende.org">Members area</a>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<!-- STARTING SECTION -->
|
||
<div class="large-hero">
|
||
<picture>
|
||
<source srcset="./assets/media/images/our_vegetables_large.png 1920w" media="(min-width: 1380px)">
|
||
<source srcset="./assets/media/images/our_vegetables_medium.png 1380w" media="(min-width: 990px)">
|
||
<source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)">
|
||
<img srcset="./assets/media/images/our_vegetables_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||
</picture>
|
||
<div class="large-hero__text-content">
|
||
<h1 class="large-hero__title">bio bulke bende</h1>
|
||
<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
|
||
<p class="large-hero__description">Local and organic food produced by farmers in the Rijnmond region for an affordable price
|
||
Through cooperation, members gain access to high-quality organic products from transparent sources and for fair prices.</p>
|
||
<p><a href="#" class="btn btn--large">Join us!</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ABOUT US -->
|
||
<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding" data-matching-link="#about-us-link">
|
||
<div class="wrapper">
|
||
<div class="headline headline--s-width headline--centered headline--b-margin">
|
||
<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
|
||
<h2 class="headline__subtitle">...because we wanted to be able to get good quality, delicious food from local suppliers and farmers. Inspired by the Amsterdam food co-op <a href="#">Vokomokum</a>, we decided to start our own.</h2>
|
||
</div>
|
||
<div class="row row--gutters">
|
||
<div class="row__medium-8">
|
||
<div class="video-container">
|
||
<video class="content--video--right" width="560" height="315" controls>
|
||
<source src="./assets/media/videos/bbb_video.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
<div class="row__medium-4">
|
||
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
|
||
<a href="#" class="btn btn--medium">Join us!</a>
|
||
<p>We are happy to have new members at the moment. Join us now or simply drop by on our next pickup day and say hello! </p>
|
||
<div class="arrow arrow--about arrow--red"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- HOW IT WORKS -->
|
||
<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding page-section--t-margin-external page-section--b-margin-external" data-matching-link="#how-it-works-link">
|
||
<div class="wrapper">
|
||
<div class="how-it-works how-it-works-1 how-it-works--atSmall-t-margin how-it-works--atSmall-centered">
|
||
<div class="row row--gutters">
|
||
<div class="row__medium-3--larger">
|
||
<img class="how-it-works__icon how-it-works__icon--1 lazyload" data-src="./assets/media/images/foodcoop.png">
|
||
</div>
|
||
<div class="row__medium-9--smaller">
|
||
<div class="headline headline--lt-margin">
|
||
<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2>
|
||
<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-with-others supermarket.<br><br>
|
||
<b>Bio bulk bende</b> members order collectively from local suppliers and distributors. This means we get as close to the wholesale prices as possible by cutting out middle men and ordering in bulk. Bio bulk bende exists only through the cooperation of the members involved, there is no profit and everyone in the community takes part on a volunteer basis.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external" data-matching-link="#how-it-works-link">
|
||
<div class="wrapper">
|
||
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered how-it-works">
|
||
<div class="row row--gutters">
|
||
<div class="row__medium-6 row--large-only">
|
||
<img class="how-it-works__img lazyload" data-src="./assets/media/images/member_large.JPG" alt="Once you are member you are part of our community!">
|
||
</div>
|
||
<div class="row__medium-6">
|
||
<h2 class="how-it-works__title-small"><span class="icon icon--membership how-it-works__icon--membership"></span> Become a <strong>Member</strong> </h2>
|
||
<p>If you’re a member of our BioBulkBende, you have access to high-quality locally produced organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros and contribute a bit of your time and energy each month to keep our co-op running. As a member of the co-op you have a say in how the co-op works, how decisions are made and what direction we take together.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<picture>
|
||
<source data-srcset="./assets/media/images/member_medium.JPG 800w" media="(min-width: 650px)">
|
||
<img data-srcset="./assets/media/images/member_small.JPG 650w" alt="Once you are member you are part of our community!" class="how-it-works__img--small-only lazyload">
|
||
</picture>
|
||
|
||
<div class="wrapper">
|
||
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered" data-matching-link="#how-it-works-link">
|
||
<div class="row row--gutters">
|
||
<div class="row__medium-6">
|
||
<h2 class="how-it-works__title-small"><span class="icon icon--workgroup how-it-works__icon--workgroup-order"></span> Join a <strong>Work Group</strong> </h2>
|
||
<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, joining a work group is a requirement. When you join, we help you pick what work group matches your interests as well as what matches the needs of the co-op. Members can change work groups when their interests change.</p>
|
||
</div>
|
||
<div class="row__medium-6 row--large-only">
|
||
<img class="how-it-works__img lazyload" data-src="./assets/media/images/workgroup_large.JPG" alt="Working togheter is part of being a foocoop!">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<picture>
|
||
<source data-srcset="./assets/media/images/workgroup_medium.JPG 800w" media="(min-width: 650px)">
|
||
<img data-srcset="./assets/media/images/workgroup_small.JPG 650w" alt="The pick up day is arrived!" class="how-it-works__img--small-only lazyload">
|
||
</picture>
|
||
|
||
<div class="wrapper">
|
||
<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered">
|
||
<div class="row row--gutters">
|
||
<div class="row__medium-6 row--large-only">
|
||
<img class="how-it-works__img lazyload" data-src="./assets/media/images/order_food_large.JPG" alt="To order your food is easy!">
|
||
</div>
|
||
<div class="row__medium-6">
|
||
<h2 class="how-it-works__title-small"><span class="icon icon--order how-it-works__icon--workgroup-order"></span> Order your <strong>Food</strong> </h2>
|
||
<p>Only members can place an order, but anyone can become a member! For food ordering, we use a free software called <a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. You can learn more about how to order by joining us at any upcoming pickup day.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<picture>
|
||
<source data-srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)">
|
||
<img data-srcset="./assets/media/images/order_food_small.JPG 650w" alt="To order your food is easy!" class="how-it-works__img--small-only lazyload">
|
||
</picture>
|
||
<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
|
||
</div>
|
||
|
||
<div id="how-it-works-3" class="page-section">
|
||
<picture>
|
||
<source data-srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
|
||
<source data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
|
||
<source data-srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
|
||
<source data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 390px)">
|
||
<img class="lazyload" data-srcset="./assets/media/images/pickup_day_extra_smaller.jpg 390w" alt="The pick up day is arrived!" class="large-hero__image">
|
||
</picture>
|
||
<div class="how-it-works ">
|
||
<div class="how-it-works--centered how-it-works--t-margin page-section--tb-padding">
|
||
<div class="wrapper wrapper--white wrapper--medium">
|
||
<div class="how-it-works__last-section how-it-works-3">
|
||
<div class="wrapper wrapper--small">
|
||
<h2 class="how-it-works__title"><span class="icon icon--pickup how-it-works__icon--pickup"></span><strong>Pick-up day</strong></h2>
|
||
<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p><br><br>
|
||
<p><a href="#" class="btn"><b>Join us!</b></a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AGENDA -->
|
||
|
||
<!-- MEMBERS -->
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="footer">
|
||
<p>
|
||
<span class="site-footer__text">Copyright © 2020 Bio Bulke Bende. All rights reserved.</span>
|
||
<a href="#" class="btn btn--l-margin">Join us!</a>
|
||
</p>
|
||
</footer>
|
||
|
||
<!-- MODAL -->
|
||
<!-- build:js assets/scripts/App.js -->
|
||
<script type="text/javascript" src="./temp/scripts/App.js"></script>
|
||
<!-- endbuild -->
|
||
</body>
|
||
</html> |