mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2025-07-02 11:40:45 +00:00
how-it-works section finished
This commit is contained in:
Tancre
@ -19,22 +19,18 @@
|
||||
<header class="site-header">
|
||||
<div class="wrapper">
|
||||
<div class="site-header__logo">
|
||||
<img src="./assets/media/images/bbb_logo_white.png" alt="BBB 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>
|
||||
@ -50,14 +46,12 @@
|
||||
|
||||
<!-- STARTING SECTION -->
|
||||
<div class="large-hero">
|
||||
|
||||
<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">
|
||||
<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>
|
||||
@ -114,70 +108,83 @@
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<div class="how-it-works how-it-works--atSmall-centered how-it-works">
|
||||
<div class="row row--gutters">
|
||||
<div class="row__medium-6">
|
||||
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
|
||||
<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"><img class="how-it-works__icon how-it-works__icon--2" src="./assets/media/images/membership.png"> Become a <strong>Member</strong> </h2>
|
||||
<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 you’re 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"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/workgroup.png"> Join a <strong>Work Group</strong> </h2>
|
||||
<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">
|
||||
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
|
||||
<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">
|
||||
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
|
||||
<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"><img class="how-it-works__icon how-it-works__icon--3" src="./assets/media/images/order.png"> Order your <strong>Food</strong> </h2>
|
||||
<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 class="arrow arrow--how-it-works-2 arrow--lightGreen"></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/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">
|
||||
<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>
|
||||
<p><a href="#" class="btn btn--large"><b>Join us!</b></a></p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -186,8 +193,11 @@
|
||||
<!-- MEMBERS -->
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p><span class="site-footer__text">Copyright © 2020 Bio Bulke Bende. All rights reserved.</span> <a href="#" class="btn">Join us!</a></p>
|
||||
<footer class="footer">
|
||||
<p>
|
||||
<span class="site-footer__text">Copyright © 2020 Bio Bulke Bende. All rights reserved.</span>
|
||||
<a href="#" class="btn btn--l-margin">Join us!</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<!-- MODAL -->
|
||||
|
||||
Reference in New Issue
Block a user