biobulkbende.org/app/index.html

198 lines
8.9 KiB
HTML
Raw Normal View History

2020-09-16 12:23:28 +00:00
<!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>
2020-09-17 15:21:49 +00:00
<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 .">
2020-09-16 14:21:52 +00:00
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
2020-09-16 12:23:28 +00:00
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
2020-09-18 20:01:59 +00:00
<!-- build:js assets/scripts/Vendor.js -->
<script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
<!-- endbuild -->
2020-09-16 12:23:28 +00:00
</head>
<body>
<!-- HEADER -->
<header class="site-header">
<div class="wrapper">
<div class="site-header__logo">
2020-09-18 20:01:59 +00:00
<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
</div>
<div class="site-header__menu-icon">
2020-09-19 10:13:36 +00:00
<div class="site-header__menu-icon__middle"></div>
2020-09-16 14:21:52 +00:00
</div>
2020-09-16 12:23:28 +00:00
<div class="site-header__menu-content">
<div class="site-header__btn-container">
2020-09-18 20:01:59 +00:00
<a href="#" class="btn ">Place your Order</a>
</div>
2020-09-19 10:13:36 +00:00
<div class="site-header__language">
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
</div>
2020-09-18 20:01:59 +00:00
<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>
2020-09-19 10:13:36 +00:00
<li><a href="#members-area">Members area</a>
</ul>
</nav>
</div>
2020-09-16 14:21:52 +00:00
</div>
</header>
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- STARTING SECTION -->
2020-09-17 15:21:49 +00:00
<div class="large-hero">
2020-09-19 10:13:36 +00:00
<picture>
<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)">
<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
</picture>
2020-09-16 14:21:52 +00:00
2020-09-17 15:21:49 +00:00
<div class="large-hero__text-content">
<h1 class="large-hero__title">bio bulke bende</h1>
2020-09-19 10:13:36 +00:00
<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
2020-09-30 16:51:32 +00:00
<!-- <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> -->
2020-09-17 15:48:05 +00:00
<p><a href="#" class="btn btn--large">Join us!</a></p>
2020-09-16 14:21:52 +00:00
</div>
</div>
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- ABOUT US -->
2020-10-09 12:48:01 +00:00
<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding">
2020-09-24 18:24:52 +00:00
<div class="wrapper">
2020-09-30 16:51:32 +00:00
<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>
2020-09-24 18:24:52 +00:00
<div class="row row--gutters">
2020-10-09 12:48:01 +00:00
<div class="row__medium-8">
2020-09-30 16:51:32 +00:00
<div class="video-container">
2020-10-07 14:19:57 +00:00
<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>
2020-09-30 16:51:32 +00:00
</div>
2020-09-24 18:24:52 +00:00
</div>
2020-10-09 12:48:01 +00:00
<div class="row__medium-4">
2020-09-30 16:51:32 +00:00
<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>
2020-09-24 18:24:52 +00:00
</div>
</div>
2020-09-16 14:21:52 +00:00
</div>
</div>
</div>
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- 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>
2020-10-07 14:19:57 +00:00
</div>
</div>
<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
2020-09-30 16:51:32 +00:00
</div>
2020-10-07 14:19:57 +00:00
</div>
2020-09-30 16:51:32 +00:00
</div>
<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding page-section--tb-padding page-section--b-margin-external">
2020-10-07 14:19:57 +00:00
<div class="wrapper">
<div class="how-it-works how-it-works--atSmall-centered">
2020-10-09 12:48:01 +00:00
<div class="row row--gutters">
<div class="row__medium-6">
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
2020-10-09 12:48:01 +00:00
</div>
<div class="row__medium-6">
2020-10-09 16:14:11 +00:00
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--2" src="./assets/media/images/membership.png"> Become a <strong>Member</strong> </h2>
2020-10-09 12:48:01 +00:00
<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 class="how-it-works how-it-works--atSmall-centered">
2020-10-09 12:48:01 +00:00
<div class="row row--gutters">
<div class="row__medium-6">
2020-10-09 16:14:11 +00:00
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/workgroup.png"> Join a <strong>Work Group</strong> </h2>
2020-10-09 12:48:01 +00:00
<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">
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
2020-10-09 12:48:01 +00:00
</div>
</div>
</div>
<div class="how-it-works how-it-works--atSmall-centered">
2020-10-09 12:48:01 +00:00
<div class="row row--gutters">
<div class="row__medium-6">
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
2020-10-09 12:48:01 +00:00
</div>
<div class="row__medium-6">
2020-10-09 16:14:11 +00:00
<h2 class="how-it-works__title"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/order.png"> Order your <strong>Food</strong> </h2>
2020-10-09 12:48:01 +00:00
<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 class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
2020-10-09 12:48:01 +00:00
</div>
</div>
<div >
</div>
<div id="how-it-works-3" class="page-section">
<picture>
<source srcset="./assets/media/images/veg_large_cropped.png 1920w" media="(min-width: 1580px)">
<source srcset="./assets/media/images/veg_medium_cropped.png 1380w" media="(min-width: 1300px)">
<source srcset="./assets/media/images/veg_small_cropped.png 990w" media="(min-width: 1100px)">
<img srcset="./assets/media/images/veg_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
2020-10-09 12:48:01 +00:00
</picture>
<div class="how-it-works">
<div class="how-it-works--centered how-it-works--t-margin page-section--tb-padding">
2020-10-09 12:48:01 +00:00
<div class="wrapper wrapper--white wrapper--medium">
<div class="how-it-works__last-section">
<div class="wrapper wrapper--small">
2020-10-09 16:14:11 +00:00
<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>
2020-10-09 12:48:01 +00:00
<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>
<p><a href="#" class="btn btn--large"><b>Join us!</b></a></p>
</div>
</div>
</div>
</div>
2020-10-07 14:19:57 +00:00
</div>
2020-09-30 16:51:32 +00:00
</div>
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- AGENDA -->
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- MEMBERS -->
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- FOOTER -->
<footer>
<p><span class="site-footer__text">Copyright &copy; 2020 Bio Bulke Bende. All rights reserved.</span> <a href="#" class="btn">Join us!</a></p>
</footer>
2020-09-16 12:23:28 +00:00
2020-09-16 14:21:52 +00:00
<!-- MODAL -->
2020-09-18 20:01:59 +00:00
<!-- build:js assets/scripts/App.js -->
<script type="text/javascript" src="./temp/scripts/App.js"></script>
<!-- endbuild -->
2020-09-16 12:23:28 +00:00
</body>
</html>