biobulkbende
/
biobulkbende.org
mirror of https://github.com/biobulkbende/biobulkbende.org.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

embedded video from vimeo + fixes css video

This commit is contained in:
Tancre 2020-11-25 11:56:26 +01:00
parent 8367b55f04
commit cf5eb9813d
8 changed files with 370 additions and 1139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
app/assets/scss/modules/_arrow.scss
View File

@ -1,85 +1,84 @@
.arrow{
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
.arrow {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
&--about{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
&--about {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}
@include atMedium {
position: relative;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
}
}
@include atLarge {
position: relative;
bottom: -55px;
left: 50%;
transform: translateX(-50%);
}
}
&--how-it-works-1{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
&--how-it-works-1 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atMedium {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: 0px;
left: 70%;
transform: translateX(-50%);
}
}
@include atLarge {
position: relative;
bottom: 0px;
left: 70%;
transform: translateX(-50%);
}
}
&--how-it-works-2{
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform:translateX(-50%);
&--how-it-works-2 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atMedium {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
@include atLarge{
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}
@include atLarge {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}
&--red{
border-top: 85px solid $myRed;
}
&--red {
border-top: 85px solid $myRed;
}
&--darkGreen{
border-top: 85px solid $myDarkGreen;
}
&--darkGreen {
border-top: 85px solid $myDarkGreen;
}
&--lightGreen{
border-top: 85px solid $myLightGreen;
}
}
&--lightGreen {
border-top: 85px solid $myLightGreen;
}
}

118
app/assets/scss/modules/_rows.scss
View File

@ -1,74 +1,70 @@
.row{
.row {
@include clearfix();
@include clearfix();
&--large-only {
display: none;
&--large-only{
display: none;
@include atLarge {
display: inline-block;
}
}
@include atLarge{
display: inline-block;
}
}
&--gutters {
margin-right: -60px;
margin-bottom: 15px;
}
&--gutters {
margin-right: -60px;
}
&--gutters > div {
padding-right: 60px;
}
&--gutters > div {
padding-right: 60px;
}
@include atLarge() {
&__medium-3--larger {
float: left;
width: 30%;
}
@include atLarge(){
&__medium-4 {
float: left;
width: 33.33%;
}
&__medium-3--larger {
float: left;
width: 30%;
}
&__medium-6 {
float: left;
width: 50%;
}
&__medium-4 {
float: left;
width: 33.33%;
}
&__medium-8 {
float: right;
width: 66.66%;
}
&__medium-6 {
float: left;
width: 50%;
}
&__medium-9--smaller {
float: right;
width: 70%;
}
}
&__medium-8 {
float: right;
width: 66.66%;
}
/* Begin Equal Height Rules */
.flexbox &--equal-height-at-medium {
@include atMedium() {
display: flex;
}
&__medium-9--smaller {
float: right;
width: 70%;
}
& > div {
float: none;
display: flex;
}
}
}
/* Begin Equal Height Rules */
.flexbox &--equal-height-at-medium {
.flexbox &--equal-height-at-large {
@include atMedium() {
display: flex;
}
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
.flexbox &--equal-height-at-large {
@include atMedium(){
display: flex;
}
& > div {
float: none;
display: flex;
}
}
}
& > div {
float: none;
display: flex;
}
}
}

49
app/assets/scss/modules/_video-container.scss
View File

@ -1,32 +1,31 @@
.video-container {
position:relative;
padding-bottom:63.15%;
height:0;
overflow:hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-right: -18px;
margin-left: -18px;
position: relative;
padding-bottom: 63.15%;
height: 0;
overflow: hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-right: -18px;
margin-left: -18px;
@include atSmall{
padding-bottom:60%;
}
@include atSmall {
padding-bottom: 60%;
}
@include atMedium{
padding-bottom:59%;
}
@include atMedium {
padding-bottom: 59%;
}
@include atLarge{
padding-bottom:56.25%;
margin-right: 0px;
margin-left: 0px;
}
@include atLarge {
padding-bottom: 54.5%;
margin-right: 0px;
margin-left: 0px;
}
}
.video-container video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

5
app/en/index.html
View File

@ -86,10 +86,7 @@
<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>
<iframe class="content--video--right" src="https://player.vimeo.com/video/483485409" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="row__medium-4">

394
app/index.html
View File

@ -4,19 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Biobulkbende</title>
<meta
name="keywords"
content="Biobulkbende, Organic, Autonomous, Food, Cooperative"
/>
<meta
name="description"
content="The first organic autonomous foodcoop in Rotterdam."
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700"
rel="stylesheet"
type="text/css"
/>
<meta name="keywords" content="Biobulkbende, Organic, Autonomous, Food, Cooperative" />
<meta name="description" content="The first organic autonomous foodcoop in Rotterdam." />
<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 -->
@ -29,26 +19,17 @@
<div class="wrapper">
<div class="site-header__logo">
<!-- <span clss="icon icon--logo_white"></span> -->
<img
src="./assets/media/images/logo_white.png"
alt="Biobulkbende logo with an almond"
/>
<img src="./assets/media/images/logo_white.png" alt="Biobulkbende 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="https://foodsoft.biobulkbende.org" class="btn"
>Place your Order</a
>
<a href="https://foodsoft.biobulkbende.org" 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>
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag" /></a>
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
@ -69,29 +50,14 @@
<!-- 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"
/>
<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">Biobulkbende</h1>
<h2 class="large-hero__subtitle">
The first organic autonomous<br />foodcoop in Rotterdam
</h2>
<h2 class="large-hero__subtitle">The first organic autonomous<br />foodcoop in 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 open-modal">Join us!</a></p>
@ -99,117 +65,40 @@
</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 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">
Biobulkbende is an association completely run by its members.
Together we collectively purchase organic food from local producers
and distributors.
</h2>
<h2 class="headline__subtitle">
In the context of the current food system, with all its flaws and
vulnerabilities, we believe it is important to have more control
over the food we buy and consume. Food does not have to be treated
strictly as a commodity, access to food doesn't have to rely on
impenetrable logistics systems, and overwhelming packaging does not
have to be the norm. Access to high quality, organic and affordable
food is very important for us, and we think that it should be
available to everyone.
</h2>
<div class="headline headline--s-width headline--centered headline--b-margin">
<h2 class="headline__title">Biobulkbende is an association completely run by its members. Together we collectively purchase organic food from local producers and distributors.</h2>
<h2 class="headline__subtitle">In the context of the current food system, with all its flaws and vulnerabilities, we believe it is important to have more control over the food we buy and consume. Food does not have to be treated strictly as a commodity, access to food doesn't have to rely on impenetrable logistics systems, and overwhelming packaging does not have to be the norm. Access to high quality, organic and affordable food is very important for us, and we think that it should be available to everyone.</h2>
<picture>
<source
data-srcset="./assets/media/images/about-2_extra-large.jpg 1920w"
media="(min-width: 1380px)"
/>
<source
data-srcset="./assets/media/images/about-2_large.jpg 1380w"
media="(min-width: 990px)"
/>
<source
data-srcset="./assets/media/images/about-2_medium.jpg 990w"
media="(min-width: 640px)"
/>
<source
data-srcset="./assets/media/images/about-2_small.jpg 640w"
media="(min-width: 390px)"
/>
<img
class="lazyload headline__img"
data-srcset="./assets/media/images/about-2_smaller.jpg 390w"
alt="The pick up day is arrived!"
/>
<source data-srcset="./assets/media/images/about-2_extra-large.jpg 1920w" media="(min-width: 1380px)" />
<source data-srcset="./assets/media/images/about-2_large.jpg 1380w" media="(min-width: 990px)" />
<source data-srcset="./assets/media/images/about-2_medium.jpg 990w" media="(min-width: 640px)" />
<source data-srcset="./assets/media/images/about-2_small.jpg 640w" media="(min-width: 390px)" />
<img class="lazyload headline__img" data-srcset="./assets/media/images/about-2_smaller.jpg 390w" alt="The pick up day is arrived!" />
</picture>
<h2 class="headline__title">
In 2019, we took matters into our own hands and started the first
organic food co-op in Rotterdam.
</h2>
<h2 class="headline__subtitle">
Inspired by the Amsterdam food co-op Vokomokum, The Park Slope co-op
and many others, our co-op is run on a volunteer-basis by all
members. As members of this co-op, we all contribute a small part of
our time in order to keep our co-op running according to our values:
building a community, sharing organic food, sourcing ingredients
that is are not produced through any exploitation of labour and are
environmentally friendly. We source our fresh food from local
farmers and suppliers from the Rijnmond region, while our dry goods
and cans come from the organic food supplier De Nieuwe Band / Odin.
</h2>
<h2 class="headline__title">In 2019, we took matters into our own hands and started the first organic food co-op in Rotterdam.</h2>
<h2 class="headline__subtitle">Inspired by the Amsterdam food co-op Vokomokum, The Park Slope co-op and many others, our co-op is run on a volunteer-basis by all members. As members of this co-op, we all contribute a small part of our time in order to keep our co-op running according to our values: building a community, sharing organic food, sourcing ingredients that is are not produced through any exploitation of labour and are environmentally friendly. We source our fresh food from local farmers and suppliers from the Rijnmond region, while our dry goods and cans come from the organic food supplier De Nieuwe Band / Odin.</h2>
<picture>
<source
data-srcset="./assets/media/images/about_1_large.jpg 1380w"
media="(min-width: 1380px)"
/>
<source
data-srcset="./assets/media/images/about_1_medium.jpg 990w"
media="(min-width: 990px)"
/>
<source
data-srcset="./assets/media/images/about_1_small.jpg 640w"
media="(min-width: 640px)"
/>
<img
class="lazyload headline__img"
data-srcset="./assets/media/images/about_1_smaller.jpg 390w"
alt="The pick up day is arrived!"
/>
<source data-srcset="./assets/media/images/about_1_large.jpg 1380w" media="(min-width: 1380px)" />
<source data-srcset="./assets/media/images/about_1_medium.jpg 990w" media="(min-width: 990px)" />
<source data-srcset="./assets/media/images/about_1_small.jpg 640w" media="(min-width: 640px)" />
<img class="lazyload headline__img" data-srcset="./assets/media/images/about_1_smaller.jpg 390w" alt="The pick up day is arrived!" />
</picture>
<h2 class="headline__subtitle">
We come together every first Monday of the month from 18:00 to 20:00
at the Wijkcoop010 in de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>.
People who are interested to become a member can join the
introduction at 19:00.
</h2>
<h2 class="headline__subtitle">We come together every first Monday of the month from 18:00 to 20:00 at the Wijkcoop010 in de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>. People who are interested to become a member can join the introduction at 19:00.</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/intro.mp4" />
Your browser does not support the video tag.
</video>
<iframe class="content--video--right" src="https://player.vimeo.com/video/483485409" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="row__medium-4">
<div
class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center"
>
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
<a href="#" class="btn btn--medium open-modal">Join us!</a>
<p>
We are happy to have new members at the moment. Send us an
<a href="mailto: info@biobulkbende.org">email</a> or simply drop
by on our next pick-up day and say hello!
<a href="mailto: info@biobulkbende.org">email</a> or simply drop by on our next pick-up day and say hello!
</p>
<div class="arrow arrow--about arrow--red"></div>
</div>
@ -219,39 +108,19 @@
</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 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="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"
/>
<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__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 (local) suppliers of their own choosing. A
collective do-it-with-others supermarket.<br /><br />
<b>Biobulkbende</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. Biobulkbende exists only through the
cooperation of the members involved. There is no profit and
everyone in the community contributes to the co-op on a
volunteer basis.
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 (local) suppliers of their own choosing. A collective do-it-with-others supermarket.<br /><br />
<b>Biobulkbende</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. Biobulkbende exists only through the cooperation of the members involved. There is no profit and everyone in the community contributes to the co-op on a volunteer basis.
</h2>
</div>
</div>
@ -261,204 +130,94 @@
</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 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="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!"
/>
<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>
<span class="icon icon--membership how-it-works__icon--membership"></span>
Being a <strong>Member</strong>
</h2>
<p>
As a member of Biobulkbende, you have access to high-quality
organic food, straight from the producers and / or distributors,
at much lower prices than in the supermarket. In return, you pay
a membership fee of €15 and contribute a bit of your time and
energy each month (3h±) 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>
<p>As a member of Biobulkbende, you have access to high-quality organic food, straight from the producers and / or distributors, at much lower prices than in the supermarket. In return, you pay a membership fee of €15 and contribute a bit of your time and energy each month (3h±) 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"
/>
<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="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>
<span class="icon icon--workgroup how-it-works__icon--workgroup-order"></span>
<strong>Workgroups</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 cooking, set-up, membership, orders, finance,
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>
<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 cooking, set-up, membership, orders, finance, 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!"
/>
<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"
/>
<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!"
/>
<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>
<span class="icon icon--order how-it-works__icon--workgroup-order"></span>
Ordering <strong>food</strong>
</h2>
<p>
As soon as you become a member you can place your first order,
yay! Together we order in dry-food (from toothpaste to pasta) in
bulk packaging. Fresh food doesn't have to be in bulk. We also
have items that are popular, like oats, in stock to save costs
and plastic! Payment is done during pick-up day through bank
transfer or pin. For 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
pick-up day.
As soon as you become a member you can place your first order, yay! Together we order in dry-food (from toothpaste to pasta) in bulk packaging. Fresh food doesn't have to be in bulk. We also have items that are popular, like oats, in stock to save costs and plastic! Payment is done during pick-up day through bank transfer or pin. For 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 pick-up 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"
/>
<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: 1600px)"
/>
<source
data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w"
media="(min-width: 1050px)"
/>
<source
data-srcset="./assets/media/images/pickup_day_small.jpg 990w"
media="(min-width: 700px)"
/>
<source
data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w"
media="(min-width: 515px)"
/>
<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"
/>
<source data-srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1600px)" />
<source data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 1050px)" />
<source data-srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 700px)" />
<source data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 515px)" />
<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="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>
<h2 class="how-it-works__title"><span class="icon icon--pickup how-it-works__icon--pickup"></span><strong>Pick-up day</strong></h2>
<p>Every 1st Monday of the month, from 18:00 - 20:00 our co-op comes together to pick up our fresh, local and bulky orders. The pick-up day is more then just picking up your order. It's also a chance to meet other members and have an affordable vegan dinner cooked by our members. During the pick-up day we have an introduction for people interested to join the co-op. This takes place at 7pm sharp.</p>
<p>
Every 1st Monday of the month, from 18:00 - 20:00 our co-op
comes together to pick up our fresh, local and bulky orders.
The pick-up day is more then just picking up your order. It's
also a chance to meet other members and have an affordable
vegan dinner cooked by our members. During the pick-up day we
have an introduction for people interested to join the co-op.
This takes place at 7pm sharp.
</p>
<p>
<a href="#" class="btn btn--pickupday open-modal"
><b>Join us!</b></a
>
</p>
<p>
Attending the introduction is mandatory so that you learn all
the ins and outs of the co-op right from the start. After you
have joined the introduction you can become a member!
<a href="#" class="btn btn--pickupday open-modal"><b>Join us!</b></a>
</p>
<p>Attending the introduction is mandatory so that you learn all the ins and outs of the co-op right from the start. After you have joined the introduction you can become a member!</p>
</div>
</div>
</div>
@ -473,9 +232,7 @@
<!-- FOOTER -->
<footer class="footer">
<p>
<span class="site-footer__text"
>Copyright &copy; 2020 Biobulkbende. All rights reserved.</span
>
<span class="site-footer__text">Copyright &copy; 2020 Biobulkbende. All rights reserved.</span>
<a href="#" class="btn btn--l-margin open-modal">Join us!</a>
</p>
</footer>
@ -488,24 +245,15 @@
<div class="wrapper">
<p class="modal__description">
Shoot us an email at
<a href="mailto: info@biobulkbende.org">info@biobulkbende.org</a> if
you want to join the introduction.
<a href="mailto: info@biobulkbende.org">info@biobulkbende.org</a> if you want to join the introduction.
</p>
</div>
<div class="social-icons">
<a href="#" class="social-icons__icon"
><span class="icon icon--facebook"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--twitter"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--instagram"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--youtube"></span
></a>
<a href="#" class="social-icons__icon"><span class="icon icon--facebook"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--twitter"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--instagram"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--youtube"></span></a>
</div>
</div>
<div class="modal__close">X</div>

11
docs/assets/styles/style.css
View File

@ -355,14 +355,12 @@ template {
@font-face {
font-family: "CocogooseExtra";
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf")
format("truetype");
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
}
@font-face {
font-family: "BS-regular";
src: url("../media/fonts/bahnschrift/BS_Static_Regular.ttf")
format("truetype");
src: url("../media/fonts/bahnschrift/BS_Static_Regular.ttf") format("truetype");
}
@font-face {
@ -911,6 +909,7 @@ a {
}
.row--gutters {
margin-right: -60px;
margin-bottom: 15px;
}
.row--gutters > div {
padding-right: 60px;
@ -1009,7 +1008,7 @@ a {
}
@media (min-width: 1200px) {
.video-container {
padding-bottom: 56.25%;
padding-bottom: 54.5%;
margin-right: 0px;
margin-left: 0px;
}
@ -1181,7 +1180,7 @@ a {
@media (min-width: 1200px) {
.arrow--about {
position: relative;
bottom: -60px;
bottom: -55px;
left: 50%;
transform: translateX(-50%);
}

389
docs/en/index.html
View File

@ -4,19 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Biobulkbende</title>
<meta
name="keywords"
content="Biobulkbende, Organic, Autonomous Foodcoop, Food, Cooperative"
/>
<meta
name="description"
content="Biobulkbende 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"
/>
<meta name="keywords" content="Biobulkbende, Organic, Autonomous Foodcoop, Food, Cooperative" />
<meta name="description" content="Biobulkbende 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="../assets/styles/style.css" />
<!-- build:js assets/scripts/Vendor.js -->
@ -29,26 +19,17 @@
<div class="wrapper">
<div class="site-header__logo">
<!-- <span clss="icon icon--logo_white"></span> -->
<img
src="../assets/media/images/logo_white.png"
alt="Biobulkbende's logo with an almond"
/>
<img src="../assets/media/images/logo_white.png" alt="Biobulkbende's 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="https://foodsoft.biobulkbende.org" class="btn"
>Place your Order</a
>
<a href="https://foodsoft.biobulkbende.org" class="btn">Place your Order</a>
</div>
<div class="site-header__language">
<a href="../index.html"
><img
src="../assets/media/images/netherlands_flag.gif"
alt="Netherlands flag"
/></a>
<a href="../index.html"><img src="../assets/media/images/netherlands_flag.gif" alt="Netherlands flag" /></a>
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
@ -69,29 +50,14 @@
<!-- 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"
/>
<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">Biobulkbende</h1>
<h2 class="large-hero__subtitle">
The first organic autonomous<br />foodcoop in Rotterdam
</h2>
<h2 class="large-hero__subtitle">The first organic autonomous<br />foodcoop in 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 open-modal">join us!</a></p>
@ -99,115 +65,40 @@
</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 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">
Biobulkbende is an association completely run by the members.
Together we collectively purchase organic food from local producers
and distributors.
</h2>
<h2 class="headline__subtitle">
In the context of the current food system, with all its flaws and
vulnerabilities, we believe it is important to have more control
over the food we buy and consume. Food doesnt have to be treated
strictly as a commodity, access to food doesn't have to rely on
impenetrable logistics systems, and overwhelming packaging does not
have to be the norm. Access to high quality, organic and affordable
food is very important for us, and we think that it should be
available to everyone.
</h2>
<div class="headline headline--s-width headline--centered headline--b-margin">
<h2 class="headline__title">Biobulkbende is an association completely run by the members. Together we collectively purchase organic food from local producers and distributors.</h2>
<h2 class="headline__subtitle">In the context of the current food system, with all its flaws and vulnerabilities, we believe it is important to have more control over the food we buy and consume. Food doesnt have to be treated strictly as a commodity, access to food doesn't have to rely on impenetrable logistics systems, and overwhelming packaging does not have to be the norm. Access to high quality, organic and affordable food is very important for us, and we think that it should be available to everyone.</h2>
<picture>
<source
data-srcset="../assets/media/images/about-2_extra-large.jpg 1920w"
media="(min-width: 1380px)"
/>
<source
data-srcset="../assets/media/images/about-2_large.jpg 1380w"
media="(min-width: 990px)"
/>
<source
data-srcset="../assets/media/images/about-2_medium.jpg 990w"
media="(min-width: 640px)"
/>
<source
data-srcset="../assets/media/images/about-2_small.jpg 640w"
media="(min-width: 390px)"
/>
<img
class="lazyload headline__img"
data-srcset="../assets/media/images/about-2_smaller.jpg 390w"
alt="The pick up day is arrived!"
/>
<source data-srcset="../assets/media/images/about-2_extra-large.jpg 1920w" media="(min-width: 1380px)" />
<source data-srcset="../assets/media/images/about-2_large.jpg 1380w" media="(min-width: 990px)" />
<source data-srcset="../assets/media/images/about-2_medium.jpg 990w" media="(min-width: 640px)" />
<source data-srcset="../assets/media/images/about-2_small.jpg 640w" media="(min-width: 390px)" />
<img class="lazyload headline__img" data-srcset="../assets/media/images/about-2_smaller.jpg 390w" alt="The pick up day is arrived!" />
</picture>
<h2 class="headline__title">
In 2019, we took matters into our own hands and started the first
organic food co-op in Rotterdam.
</h2>
<h2 class="headline__subtitle">
Inspired by the Amsterdam food co-op Vokomokum, The Park Slope co-op
and many others, our co-op is run on a volunteer-basis by all
members. As members of this co-op, we all conribute a small part of
our time in order to keep our co-op running according to our values:
building a community, sharing organic food, sourcing ingredients
that is are not produced through any exploitation of labour and are
environmentally friendly. We source our fresh food from local
farmers and suppliers from the Rijnmond region, while our dry goods
and cans come from the organic food supplier De Nieuwe Band / Odin.
</h2>
<h2 class="headline__title">In 2019, we took matters into our own hands and started the first organic food co-op in Rotterdam.</h2>
<h2 class="headline__subtitle">Inspired by the Amsterdam food co-op Vokomokum, The Park Slope co-op and many others, our co-op is run on a volunteer-basis by all members. As members of this co-op, we all conribute a small part of our time in order to keep our co-op running according to our values: building a community, sharing organic food, sourcing ingredients that is are not produced through any exploitation of labour and are environmentally friendly. We source our fresh food from local farmers and suppliers from the Rijnmond region, while our dry goods and cans come from the organic food supplier De Nieuwe Band / Odin.</h2>
<picture>
<source
data-srcset="../assets/media/images/about_1_large.jpg 1380w"
media="(min-width: 1380px)"
/>
<source
data-srcset="../assets/media/images/about_1_medium.jpg 990w"
media="(min-width: 990px)"
/>
<source
data-srcset="../assets/media/images/about_1_small.jpg 640w"
media="(min-width: 640px)"
/>
<img
class="lazyload headline__img"
data-srcset="../assets/media/images/about_1_smaller.jpg 390w"
alt="The pick up day is arrived!"
/>
<source data-srcset="../assets/media/images/about_1_large.jpg 1380w" media="(min-width: 1380px)" />
<source data-srcset="../assets/media/images/about_1_medium.jpg 990w" media="(min-width: 990px)" />
<source data-srcset="../assets/media/images/about_1_small.jpg 640w" media="(min-width: 640px)" />
<img class="lazyload headline__img" data-srcset="../assets/media/images/about_1_smaller.jpg 390w" alt="The pick up day is arrived!" />
</picture>
<h2 class="headline__subtitle">
We come together every first monday of the month from 18:00 to 20:00
at the Wijkcoop010 in de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>.
People who are interested to become a member can join the
introduction at 19:00.
</h2>
<h2 class="headline__subtitle">We come together every first monday of the month from 18:00 to 20:00 at the Wijkcoop010 in de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>. People who are interested to become a member can join the introduction at 19:00.</h2>
</div>
<div class="row row--gutters">
<div class="row__medium-8">
<div class="video-container">
<iframe
class="content--video--right"
sandbox="allow-same-origin allow-scripts allow-popups"
src="https://p.eertu.be/videos/embed/96fff60e-2208-4be9-8bc6-65fdca4d25b6"
frameborder="0"
allowfullscreen
></iframe>
<iframe class="content--video--right" src="https://player.vimeo.com/video/483485409" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="row__medium-4">
<div
class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center"
>
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
<a href="#" class="btn btn--medium open-modal">Join us!</a>
<p>
We are happy to have new members at the moment. Send us an
<a href="mailto:info@biobulkbende.org">email</a> or simply drop
by on our next pickup day and say hello!
<a href="mailto:info@biobulkbende.org">email</a> or simply drop by on our next pickup day and say hello!
</p>
<div class="arrow arrow--about arrow--red"></div>
</div>
@ -217,39 +108,19 @@
</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 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="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"
/>
<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__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 (local) suppliers of their own choosing. A
collective do-it-with-others supermarket.<br /><br />
<b>Biobulkbende</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. Biobulkbende exists only through the
cooperation of the members involved. There is no profit and
everyone in the community contributes to the co-op on a
volunteer basis.
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 (local) suppliers of their own choosing. A collective do-it-with-others supermarket.<br /><br />
<b>Biobulkbende</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. Biobulkbende exists only through the cooperation of the members involved. There is no profit and everyone in the community contributes to the co-op on a volunteer basis.
</h2>
</div>
</div>
@ -259,203 +130,94 @@
</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 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="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!"
/>
<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>
<span class="icon icon--membership how-it-works__icon--membership"></span>
Being a <strong>Member</strong>
</h2>
<p>
As a member of Biobulkbende, you have access to high-quality
organic food, straight from the producers and / or distributors,
at much lower prices than in the supermarket. In return, you pay
a membership fee of 15 euros and contribute a bit of your time
and energy each month (3h ±) 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>
<p>As a member of Biobulkbende, you have access to high-quality organic food, straight from the producers and / or distributors, at much lower prices than in the supermarket. In return, you pay a membership fee of 15 euros and contribute a bit of your time and energy each month (3h ±) 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"
/>
<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="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>
<span class="icon icon--workgroup how-it-works__icon--workgroup-order"></span>
<strong>Workgroups</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 cooking, set-up, membership, orders, finance,
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>
<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 cooking, set-up, membership, orders, finance, 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!"
/>
<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"
/>
<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!"
/>
<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>
<span class="icon icon--order how-it-works__icon--workgroup-order"></span>
Ordering <strong>food</strong>
</h2>
<p>
Ordering food is easy. We use a free software called
<a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. As soon
as you become a member you can place your first order, yay!
Together we order in dry-food (from toothpaste to pasta) in bulk
packaging. Fresh food doesn't have to be in bulk. We also have
items that are popular, like oats, in stock to save of costs and
plastic! Payment is done during pick-up day through banktransfer
or pin.
<a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. As soon as you become a member you can place your first order, yay! Together we order in dry-food (from toothpaste to pasta) in bulk packaging. Fresh food doesn't have to be in bulk. We also have items that are popular, like oats, in stock to save of costs and plastic! Payment is done during pick-up day through banktransfer or pin.
</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"
/>
<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: 1600px)"
/>
<source
data-srcset="../assets/media/images/pickup_day_medium.jpg 1380w"
media="(min-width: 1050px)"
/>
<source
data-srcset="../assets/media/images/pickup_day_small.jpg 990w"
media="(min-width: 700px)"
/>
<source
data-srcset="../assets/media/images/pickup_day_smaller.jpg 640w"
media="(min-width: 515px)"
/>
<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"
/>
<source data-srcset="../assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1600px)" />
<source data-srcset="../assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 1050px)" />
<source data-srcset="../assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 700px)" />
<source data-srcset="../assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 515px)" />
<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="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>
<h2 class="how-it-works__title"><span class="icon icon--pickup how-it-works__icon--pickup"></span><strong>Pick-up day</strong></h2>
<p>Every 1st Monday of the month, from 18:00 - 20:00 our co-op comes together to pick up our fresh, local and bulky orders. The pick-up day is more then just picking up your order. It's also a chance to meet other members and have an affordable vegan dinner cooked by our members. During the pick-up day we have an introduction for people interested to join the co-op. This takes place at 7pm sharp.</p>
<p>
Every 1st Monday of the month, from 18:00 - 20:00 our co-op
comes together to pick up our fresh, local and bulky orders.
The pick-up day is more then just picking up your order. It's
also a chance to meet other members and have an affordable
vegan dinner cooked by our members. During the pick-up day we
have an introduction for people interested to join the co-op.
This takes place at 7pm sharp.
</p>
<p>
<a href="#" class="btn btn--pickupday open-modal"
><b>Join us!</b></a
>
</p>
<p>
Attending the introduction is mandatory so that you learn all
the ins and outs of the co-op right from the start. After you
have joined the introduction you can become a member!
<a href="#" class="btn btn--pickupday open-modal"><b>Join us!</b></a>
</p>
<p>Attending the introduction is mandatory so that you learn all the ins and outs of the co-op right from the start. After you have joined the introduction you can become a member!</p>
</div>
</div>
</div>
@ -470,9 +232,7 @@
<!-- FOOTER -->
<footer class="footer">
<p>
<span class="site-footer__text"
>Copyright &copy; 2020 Biobulkbende. All rights reserved.</span
>
<span class="site-footer__text">Copyright &copy; 2020 Biobulkbende. All rights reserved.</span>
<a href="#" class="btn btn--l-margin open-modal">Join us!</a>
</p>
</footer>
@ -485,24 +245,15 @@
<div class="wrapper">
<p class="modal__description">
Shoot us an email at
<a href="mailto: info@biobulkbende.org">info@biobulkbende.org</a> if
you want to join the introduction.
<a href="mailto: info@biobulkbende.org">info@biobulkbende.org</a> if you want to join the introduction.
</p>
</div>
<div class="social-icons">
<a href="#" class="social-icons__icon"
><span class="icon icon--facebook"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--twitter"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--instagram"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--youtube"></span
></a>
<a href="#" class="social-icons__icon"><span class="icon icon--facebook"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--twitter"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--instagram"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--youtube"></span></a>
</div>
</div>
<div class="modal__close">X</div>

398
docs/index.html
View File

@ -5,19 +5,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Biobulkbende</title>
<meta
name="keywords"
content="Biobulkbende, Organic, Autonomous Foodcoop, Food, Cooperative"
/>
<meta
name="description"
content="Biobulkbende 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"
/>
<meta name="keywords" content="Biobulkbende, Organic, Autonomous Foodcoop, Food, Cooperative" />
<meta name="description" content="Biobulkbende 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="./assets/styles/style.css" />
<!-- build:js assets/scripts/Vendor.js -->
@ -30,34 +20,23 @@
<div class="wrapper">
<div class="site-header__logo">
<!-- <span clss="icon icon--logo_white"></span> -->
<img
src="./assets/media/images/logo_white.png"
alt="Biobulkbende's logo met een amandel."
/>
<img src="./assets/media/images/logo_white.png" alt="Biobulkbende's logo met een amandel." />
</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="https://foodsoft.biobulkbende.org" class="btn"
>Plaats je bestelling</a
>
<a href="https://foodsoft.biobulkbende.org" class="btn">Plaats je bestelling</a>
</div>
<div class="site-header__language">
<a href="./en"
><img
src="./assets/media/images/english_flag.jpg"
alt="Engelse vlag."
/></a>
<a href="./en"><img src="./assets/media/images/english_flag.jpg" alt="Engelse vlag." /></a>
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li><a href="#about-us" id="about-us-link">Over ons</a></li>
<li>
<a href="#how-it-works" id="how-it-works-link"
>Hoe werkt het?</a
>
<a href="#how-it-works" id="how-it-works-link">Hoe werkt het?</a>
</li>
<!-- <li><a href="#agenda">Agenda</a></li> -->
<li>
@ -72,23 +51,10 @@
<!-- 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="Onze verse groentes."
class="large-hero__image"
/>
<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="Onze verse groentes." class="large-hero__image" />
</picture>
<div class="large-hero__text-content">
<h1 class="large-hero__title">Biobulkbende</h1>
@ -104,116 +70,40 @@
<!-- 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 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">
Biobulkbende is een vereniging die volledig door zijn leden wordt
bestuurd en gerund. Als vereniging kopen we collectief biologisch
voedsel in van lokale producenten en distributeurs.
</h2>
<h2 class="headline__subtitle">
Ons huidige systeem van voedselproductie zit vol gebreken en
kwetsbaarheden. Daarom vinden wij het belangrijk om meer controle te
krijgen over het voedsel dat we kopen en consumeren. Voedsel gaat
niet alleen over geld, toegang tot voedsel hoort niet afhankelijk te
zijn van ondoordringbare en ondoorgrondelijke logistiek, en
overdadige verpakkingen zijn niet vanzelfsprekend. Toegang tot
hoogwaardig, biologisch en betaalbaar voedsel is belangrijk voor ons
- en we vinden dat iedereen er recht op heeft.
</h2>
<div class="headline headline--s-width headline--centered headline--b-margin">
<h2 class="headline__title">Biobulkbende is een vereniging die volledig door zijn leden wordt bestuurd en gerund. Als vereniging kopen we collectief biologisch voedsel in van lokale producenten en distributeurs.</h2>
<h2 class="headline__subtitle">Ons huidige systeem van voedselproductie zit vol gebreken en kwetsbaarheden. Daarom vinden wij het belangrijk om meer controle te krijgen over het voedsel dat we kopen en consumeren. Voedsel gaat niet alleen over geld, toegang tot voedsel hoort niet afhankelijk te zijn van ondoordringbare en ondoorgrondelijke logistiek, en overdadige verpakkingen zijn niet vanzelfsprekend. Toegang tot hoogwaardig, biologisch en betaalbaar voedsel is belangrijk voor ons - en we vinden dat iedereen er recht op heeft.</h2>
<picture>
<source
data-srcset="./assets/media/images/about-2_extra-large.jpg 1920w"
media="(min-width: 1380px)"
/>
<source
data-srcset="./assets/media/images/about-2_large.jpg 1380w"
media="(min-width: 990px)"
/>
<source
data-srcset="./assets/media/images/about-2_medium.jpg 990w"
media="(min-width: 640px)"
/>
<source
data-srcset="./assets/media/images/about-2_small.jpg 640w"
media="(min-width: 390px)"
/>
<img
class="lazyload headline__img"
data-srcset="./assets/media/images/about-2_smaller.jpg 390w"
alt="Onze producten."
/>
<source data-srcset="./assets/media/images/about-2_extra-large.jpg 1920w" media="(min-width: 1380px)" />
<source data-srcset="./assets/media/images/about-2_large.jpg 1380w" media="(min-width: 990px)" />
<source data-srcset="./assets/media/images/about-2_medium.jpg 990w" media="(min-width: 640px)" />
<source data-srcset="./assets/media/images/about-2_small.jpg 640w" media="(min-width: 390px)" />
<img class="lazyload headline__img" data-srcset="./assets/media/images/about-2_smaller.jpg 390w" alt="Onze producten." />
</picture>
<h2 class="headline__title">
In 2019 hebben we zelf het heft in handen genomen en zijn we
begonnen met de eerste biologische voedselcoöperatie van Rotterdam.
</h2>
<h2 class="headline__subtitle">
Net als de Amsterdamse coöperatie Vokomokum, de Park Slope Food Coop
en vele anderen, draait onze coöperatie volledig op de vrijwillige
bijdragen van al onze leden. Als leden van de co-op dragen we
allemaal een klein deel van onze tijd bij aan het runnen ervan, in
lijn met onze waarden. Zo bouwen we samen een gemeenschap, delen we
biologisch voedsel met elkaar, en zoeken we naar milieuvriendelijke
ingrediënten buiten de gebruikelijke exploitatieve ketens. We halen
onze verse producten bij lokale boeren en leveranciers uit de regio
Rijnmond. Onze conserven en houdbare producten komen van de
biologische groothandel De Nieuwe Band / Odin.
</h2>
<h2 class="headline__title">In 2019 hebben we zelf het heft in handen genomen en zijn we begonnen met de eerste biologische voedselcoöperatie van Rotterdam.</h2>
<h2 class="headline__subtitle">Net als de Amsterdamse coöperatie Vokomokum, de Park Slope Food Coop en vele anderen, draait onze coöperatie volledig op de vrijwillige bijdragen van al onze leden. Als leden van de co-op dragen we allemaal een klein deel van onze tijd bij aan het runnen ervan, in lijn met onze waarden. Zo bouwen we samen een gemeenschap, delen we biologisch voedsel met elkaar, en zoeken we naar milieuvriendelijke ingrediënten buiten de gebruikelijke exploitatieve ketens. We halen onze verse producten bij lokale boeren en leveranciers uit de regio Rijnmond. Onze conserven en houdbare producten komen van de biologische groothandel De Nieuwe Band / Odin.</h2>
<picture>
<source
data-srcset="./assets/media/images/about_1_large.jpg 1380w"
media="(min-width: 1380px)"
/>
<source
data-srcset="./assets/media/images/about_1_medium.jpg 990w"
media="(min-width: 990px)"
/>
<source
data-srcset="./assets/media/images/about_1_small.jpg 640w"
media="(min-width: 640px)"
/>
<img
class="lazyload headline__img"
data-srcset="./assets/media/images/about_1_smaller.jpg 390w"
alt="Onze producten."
/>
<source data-srcset="./assets/media/images/about_1_large.jpg 1380w" media="(min-width: 1380px)" />
<source data-srcset="./assets/media/images/about_1_medium.jpg 990w" media="(min-width: 990px)" />
<source data-srcset="./assets/media/images/about_1_small.jpg 640w" media="(min-width: 640px)" />
<img class="lazyload headline__img" data-srcset="./assets/media/images/about_1_smaller.jpg 390w" alt="Onze producten." />
</picture>
<h2 class="headline__subtitle">
We komen elke eerste maandag van de maand samen tussen 18:00 en
20:00 bij de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>. Ben je
geïnteresseerd in een lidmaatschap van de co-op? Dan kun je daar
maandelijks de introductie bijwonen om 19:00.
</h2>
<h2 class="headline__subtitle">We komen elke eerste maandag van de maand samen tussen 18:00 en 20:00 bij de <b>Zomerhofstraat 75</b>, <b>ZOHO</b>. Ben je geïnteresseerd in een lidmaatschap van de co-op? Dan kun je daar maandelijks de introductie bijwonen om 19:00.</h2>
</div>
<div class="row row--gutters">
<div class="row__medium-8">
<div class="video-container">
<iframe
class="content--video--right"
sandbox="allow-same-origin allow-scripts allow-popups"
src="https://p.eertu.be/videos/embed/96fff60e-2208-4be9-8bc6-65fdca4d25b6"
frameborder="0"
allowfullscreen
></iframe>
<iframe class="content--video--right" src="https://player.vimeo.com/video/483485409" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="row__medium-4">
<div
class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center"
>
<div class="generic-content-container generic-content-container--t-b-margin generic-content-container--t-center">
<a href="#" class="btn btn--medium open-modal">Word lid!</a>
<p>
We staan altijd open voor nieuwe leden. Stuur ons een
<a href="mailto:info@biobulkbende.org">e-mail</a> of kom
kennismaken bij onze maandelijkse introductie!
<a href="mailto:info@biobulkbende.org">e-mail</a> of kom kennismaken bij onze maandelijkse introductie!
</p>
<div class="arrow arrow--about arrow--red"></div>
</div>
@ -223,41 +113,19 @@
</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 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="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"
/>
<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">
Wat is een <strong>voedselco-op?</strong>
</h2>
<h2 class="headline__title">Wat is een <strong>voedselco-op?</strong></h2>
<h2 class="headline__subtitle">
Een co-op is een collectief waarin alle leden samen werken in
het belang van de hele groep. Een voedselco-op is specifiek
een groep mensen die samen voedsel inkopen van (lokale)
producenten van hun keuze. Een soort
doe-het-samen-supermarkt.<br /><br />
De leden van <b>Biobulkbende</b> bestellen gezamenlijk voedsel
van lokale producenten, leveranciers en distributeurs. Door in
bulk te bestellen en dicht bij de bron te blijven, kunnen we
hoogwaardig voedsel inkopen tegen groothandelprijzen.
<b>Biobulkbende</b> bestaat alleen bij gratie van de bijdragen
en samenwerking van alle betrokken leden. Er is geen
winstoogmerk en iedereen in de co-op draagt bij op vrijwillige
basis.
Een co-op is een collectief waarin alle leden samen werken in het belang van de hele groep. Een voedselco-op is specifiek een groep mensen die samen voedsel inkopen van (lokale) producenten van hun keuze. Een soort doe-het-samen-supermarkt.<br /><br />
De leden van <b>Biobulkbende</b> bestellen gezamenlijk voedsel van lokale producenten, leveranciers en distributeurs. Door in bulk te bestellen en dicht bij de bron te blijven, kunnen we hoogwaardig voedsel inkopen tegen groothandelprijzen. <b>Biobulkbende</b> bestaat alleen bij gratie van de bijdragen en samenwerking van alle betrokken leden. Er is geen winstoogmerk en iedereen in de co-op draagt bij op vrijwillige basis.
</h2>
</div>
</div>
@ -267,207 +135,91 @@
</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 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="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!"
/>
<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>
<span class="icon icon--membership how-it-works__icon--membership"></span>
<strong>Lidmaatschap</strong>
</h2>
<p>
Als lid van <b>Biobulkbende</b> heb je toegang tot hoogwaardig
biologisch voedsel, rechtstreeks van de producent of de
distributeur, tegen veel lagere prijzen dan in de supermarkt. In
ruil daarvoor betaal je een eenmalige contributie van €15 en
geef je maandelijks een beetje van je tijd en energie (ongeveer
3 uur) om de co-op te runnen. Als lid van de co-op heb je
medezeggenschap over de werking van de co-op, de besluitvorming
en de toekomstige richting die we inslaan.
</p>
<p>Als lid van <b>Biobulkbende</b> heb je toegang tot hoogwaardig biologisch voedsel, rechtstreeks van de producent of de distributeur, tegen veel lagere prijzen dan in de supermarkt. In ruil daarvoor betaal je een eenmalige contributie van €15 en geef je maandelijks een beetje van je tijd en energie (ongeveer 3 uur) om de co-op te runnen. Als lid van de co-op heb je medezeggenschap over de werking van de co-op, de besluitvorming en de toekomstige richting die we inslaan.</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"
/>
<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="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>
<span class="icon icon--workgroup how-it-works__icon--workgroup-order"></span>
<strong>Werkgroepen</strong>
</h2>
<p>
Een werkgroep is een groep leden die samen verantwoordelijk zijn
voor een specifieke behoefte van de co-op. Voorbeelden hiervan
zijn de kookgroep, helpen opzetten, administratie van leden,
bestellingen, financieën, enzovoorts. Als lid van de co-op
vragen we je om ook bij een werkgroep te gaan. Wanneer je je
inschrijft, helpen we je kiezen op basis van je interesses en
wat de co-op het meest nodig heeft. Leden kunnen van werkgroep
wisselen in de loop van hun lidmaatschap.
</p>
<p>Een werkgroep is een groep leden die samen verantwoordelijk zijn voor een specifieke behoefte van de co-op. Voorbeelden hiervan zijn de kookgroep, helpen opzetten, administratie van leden, bestellingen, financieën, enzovoorts. Als lid van de co-op vragen we je om ook bij een werkgroep te gaan. Wanneer je je inschrijft, helpen we je kiezen op basis van je interesses en wat de co-op het meest nodig heeft. Leden kunnen van werkgroep wisselen in de loop van hun lidmaatschap.</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!"
/>
<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"
/>
<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!"
/>
<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
><strong>Voedsel</strong> bestellen
</h2>
<h2 class="how-it-works__title-small"><span class="icon icon--order how-it-works__icon--workgroup-order"></span><strong>Voedsel</strong> bestellen</h2>
<p>
Een bestelling plaatsen is makkelijk. We maken gebruik van vrije
software van
<a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. Als
nieuw lid van de co-op kun je een eerste bestelling plaatsen! We
bestellen houdbare producten (van tandpasta tot spaghetti) in
bulk. Verse producten kunnen individueel besteld worden. We
hebben ook enkele populaire producten (zoals havermout) op
voorraad om kosten en plastic te besparen. Tijdens de ophaaldag
kun je je bestelling ophalen en betalen.
Een bestelling plaatsen is makkelijk. We maken gebruik van vrije software van
<a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. Als nieuw lid van de co-op kun je een eerste bestelling plaatsen! We bestellen houdbare producten (van tandpasta tot spaghetti) in bulk. Verse producten kunnen individueel besteld worden. We hebben ook enkele populaire producten (zoals havermout) op voorraad om kosten en plastic te besparen. Tijdens de ophaaldag kun je je bestelling ophalen en betalen.
</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"
/>
<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: 1600px)"
/>
<source
data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w"
media="(min-width: 1050px)"
/>
<source
data-srcset="./assets/media/images/pickup_day_small.jpg 990w"
media="(min-width: 700px)"
/>
<source
data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w"
media="(min-width: 515px)"
/>
<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"
/>
<source data-srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1600px)" />
<source data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 1050px)" />
<source data-srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 700px)" />
<source data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 515px)" />
<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="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>Ophaaldag</strong>
</h2>
<h2 class="how-it-works__title"><span class="icon icon--pickup how-it-works__icon--pickup"></span><strong>Ophaaldag</strong></h2>
<p>Elke eerste maandag van de maand, tussen 18:00 en 20:00, komt de co-op bij elkaar om onze verse, lokale en lijvige bestellingen op te halen. Ophaaldag draait niet alleen om het ophalen van je bestelling. Dit is ook je kans om andere leden te leren kennen en samen te genieten van een betaalbare veganistische maaltijd van de kookwerkgroep. Op elke ophaaldag houden we een introductiebijeenkomst voor potentiële nieuwe leden. De introductie vindt plaats om 19:00.</p>
<p>
Elke eerste maandag van de maand, tussen 18:00 en 20:00, komt
de co-op bij elkaar om onze verse, lokale en lijvige
bestellingen op te halen. Ophaaldag draait niet alleen om het
ophalen van je bestelling. Dit is ook je kans om andere leden
te leren kennen en samen te genieten van een betaalbare
veganistische maaltijd van de kookwerkgroep. Op elke ophaaldag
houden we een introductiebijeenkomst voor potentiële nieuwe
leden. De introductie vindt plaats om 19:00.
</p>
<p>
<a href="#" class="btn btn--pickupday open-modal"
><b>Word lid!</b></a
>
</p>
<p>
Het bijwonen van een introductie is verplicht voor nieuwe
leden, zodat je de ins en outs direct meekrijgt. Na het
bijwonen van de introductie kun je ervoor kiezen om lid te
worden!
<a href="#" class="btn btn--pickupday open-modal"><b>Word lid!</b></a>
</p>
<p>Het bijwonen van een introductie is verplicht voor nieuwe leden, zodat je de ins en outs direct meekrijgt. Na het bijwonen van de introductie kun je ervoor kiezen om lid te worden!</p>
</div>
</div>
</div>
@ -482,9 +234,7 @@
<!-- FOOTER -->
<footer class="footer">
<p>
<span class="site-footer__text"
>Copyright &copy; 2020 Biobulkbende. All rights reserved.</span
>
<span class="site-footer__text">Copyright &copy; 2020 Biobulkbende. All rights reserved.</span>
<a href="#" class="btn btn--l-margin open-modal">Word lid!</a>
</p>
</footer>
@ -503,18 +253,10 @@
</div>
<div class="social-icons">
<a href="#" class="social-icons__icon"
><span class="icon icon--facebook"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--twitter"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--instagram"></span
></a>
<a href="#" class="social-icons__icon"
><span class="icon icon--youtube"></span
></a>
<a href="#" class="social-icons__icon"><span class="icon icon--facebook"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--twitter"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--instagram"></span></a>
<a href="#" class="social-icons__icon"><span class="icon icon--youtube"></span></a>
</div>
</div>
<div class="modal__close">X</div>