biobulkbende.org/app/index.html
2020-10-15 22:35:24 +02:00

208 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
</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">About us</a></li>
<li><a href="#how-it-works">How it works</a></li>
<li><a href="#agenda">Agenda</a></li>
<li><a href="#members-area">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">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </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">
<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">
<div class="wrapper">
<div class="how-it-works 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" src="./assets/media/images/foodcoop2.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-yourself supermarket.</h2>
</div>
</div>
</div>
<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
</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">
<div class="wrapper">
<div class="how-it-works 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" 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"><img class="how-it-works__icon how-it-works__icon--2" src="./assets/media/images/membership.png"> Become a <strong>Member</strong> </h2>
<p>If youre a member of our BioBulkBende, you have access to great 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 to keep our co-op running.</p>
</div>
</div>
</div>
</div>
<picture>
<source srcset="./assets/media/images/member_medium.JPG 800w" media="(min-width: 650px)">
<img 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">
</picture>
<div class="wrapper">
<div class="how-it-works how-it-works--atSmall-centered">
<div class="row row--gutters">
<div class="row__medium-6">
<h2 class="how-it-works__title-small"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/workgroup.png"> 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, you have to join a work group.</p>
</div>
<div class="row__medium-6 row--large-only">
<img class="how-it-works__img" src="./assets/media/images/workgroup_large.JPG" alt="Working togheter is part of being a foocoop!">
</div>
</div>
</div>
</div>
<picture>
<source srcset="./assets/media/images/workgroup_medium.JPG 800w" media="(min-width: 650px)">
<img srcset="./assets/media/images/workgroup_small.JPG 650w" alt="The pick up day is arrived!" class="how-it-works__img--small-only">
</picture>
<div class="wrapper">
<div class="how-it-works how-it-works--atSmall-centered">
<div class="row row--gutters">
<div class="row__medium-6 row--large-only">
<img class="how-it-works__img" 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"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/order.png"> Order your <strong>Food</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>
</div>
</div>
</div>
</div>
<picture>
<source srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)">
<img srcset="./assets/media/images/order_food_small.JPG 650w" alt="To order your food is easy!" class="how-it-works__img--small-only">
</picture>
<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
</div>
<div id="how-it-works-3" class="page-section">
<picture>
<source srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
<source srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
<source srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
<source srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 390px)">
<img 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">
<div class="wrapper wrapper--small">
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--4" src="./assets/media/images/pickup.png"><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 &copy; 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>