how-it-works section finished

This commit is contained in:
Tancre 2020-10-15 22:35:24 +02:00
parent af96ccbf7e
commit 1524bffa31
94 changed files with 1429 additions and 114 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 855 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 939 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 732 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 424 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 578 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 988 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -3,6 +3,7 @@
} }
body { body {
position: relative;
font-family: 'roboto', sans-serif; font-family: 'roboto', sans-serif;
color: #333; color: #333;
} }

View File

@ -13,7 +13,7 @@
@include atMedium{ @include atMedium{
position: relative; position: relative;
bottom: -70px; bottom: -40px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -35,15 +35,15 @@
@include atMedium{ @include atMedium{
position: relative; position: relative;
bottom: -50px; bottom: -30px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
@include atLarge{ @include atLarge{
position: relative; position: relative;
bottom: -50px; bottom: -30px;
left: 50%; left: 70%;
transform: translateX(-50%); transform: translateX(-50%);
} }
} }

View File

@ -6,6 +6,10 @@
display: inline-block; display: inline-block;
border-radius: 30px; border-radius: 30px;
&--l-margin{
margin-left: 20px;
}
&--medium { &--medium {
margin-bottom:1.5rem; margin-bottom:1.5rem;

View File

@ -0,0 +1,8 @@
.footer{
position: absolute;
bottom: -40px;
width: 100%;
background-color: $myRed;
color: white;
text-align: center;
}

View File

@ -1,10 +1,11 @@
.generic-content-container{ .generic-content-container{
&--t-b-margin{ &--t-b-margin{
margin-top: 5rem; margin-top: 4rem;
margin-bottom: 70px; margin-bottom: 2.5rem;
@include atLarge{ @include atLarge{
margin-top: 5rem;
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
@ -17,7 +18,7 @@
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
margin: 0; margin: 0;
font-size: 1.2rem; font-size: 1.1rem;
@include atMedium{ @include atMedium{
margin: 0 0 1.8rem 0; margin: 0 0 1.8rem 0;

View File

@ -24,7 +24,7 @@
&__title { &__title {
font-weight: 400; font-weight: 400;
font-size: 1.7rem; font-size: 1.6rem;
@include atMedium(){ @include atMedium(){
font-size: 2.1rem; font-size: 2.1rem;
@ -33,7 +33,7 @@
&__subtitle { &__subtitle {
font-weight: 300; font-weight: 300;
font-size: 1.4rem; font-size: 1.3rem;
@include atMedium(){ @include atMedium(){
font-size: 1.6rem; font-size: 1.6rem;

View File

@ -1,5 +1,5 @@
.how-it-works{ .how-it-works{
margin: 50px 0px; margin-bottom: 2.5rem;
strong { strong {
font-weight: 800; font-weight: 800;
@ -14,10 +14,10 @@
} }
&--atSmall-t-margin{ &--atSmall-t-margin{
margin-top: 70px !important; margin-top: 6rem !important;
@include atSmall{ @include atMedium{
margin-top: 20px; margin-top: 4rem !important;
} }
@include atLarge{ @include atLarge{
@ -44,8 +44,12 @@
} }
&__last-section{ &__last-section{
padding: 100px 0px 50px 0px; padding: 3rem 0px 50px 0px;
background-color: rgba(white,0.9); background-color: rgba(white,0.9);
@include atLarge{
padding: 100px 0px 50px 0px;
}
} }
p{ p{
@ -72,11 +76,32 @@
} }
&__title-small{
font-weight: 300;
font-size: 1.4rem;
margin-bottom: 45px;
@include atMedium(){
margin-top: 10px;
font-size: 2.1rem;
}
}
&__img{ &__img{
display: none; // display: none;
// @include atLarge{
// display: inline-block;
// }
&--small-only{
display: inline-block;
margin: 10px 0px;
@include atLarge{ @include atLarge{
display: inline-block; display: none;
}
} }
} }
@ -94,15 +119,24 @@
} }
&__icon--2{ &__icon--2{
width: 130px; width: 100px;
margin-right: .8rem; margin-right: .8rem;
margin-bottom: -45px; margin-bottom: -35px;
} }
&__icon--3{ &__icon--3{
width: 130px; width: 100px;
margin-right: .8rem; margin-right: .8rem;
margin-bottom: -35px; margin-bottom: -30px;
margin-top: 1.2rem;
@include atMedium{
margin-top: 3.2rem;
}
@include atLarge{
margin-top: 0rem;
}
} }

View File

@ -8,7 +8,7 @@
} }
&__text-content { &__text-content {
padding-top: 88px; // padding-top: 88px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0px; left: 0px;
@ -24,7 +24,7 @@
&__title { &__title {
font-family: "CocogooseBold"; font-family: "CocogooseBold";
color: white; color: white;
font-size: 2.5rem; font-size: 2.2rem;
margin: 0; margin: 0;
@include atSmall(){ @include atSmall(){
@ -41,7 +41,7 @@
// font-family: "CocogooseNormal"; // font-family: "CocogooseNormal";
font-weight: 400; font-weight: 400;
color: white; color: white;
font-size: 1.4rem; font-size: 1.3rem;
margin: 0; margin: 0;
@include atSmall(){ @include atSmall(){

View File

@ -22,12 +22,21 @@
} }
&--t-padding{ &--t-padding{
padding-top: 1.2rem; padding-top: 5.2rem;
@include atMedium(){ @include atMedium(){
position: unset; position: unset;
padding-top: 4.5rem; padding-top: 4.5rem;
} }
&-larger{
padding-top: 5.2rem;
@include atMedium(){
position: unset;
padding-top: 6rem;
}
}
} }
&--b-padding-small{ &--b-padding-small{

View File

@ -2,7 +2,7 @@
padding-top: 10px; padding-top: 10px;
@include atMedium(){ @include atMedium(){
padding: 31px 0px; padding: 22px 0px;
} }
&--pull-right{ &--pull-right{
@ -22,6 +22,7 @@
list-style: none; list-style: none;
display: inline-block; display: inline-block;
padding-right: 7px; padding-right: 7px;
padding-top: 10px;
@include atMedium(){ @include atMedium(){
float: left; float: left;

View File

@ -2,6 +2,14 @@
@include clearfix(); @include clearfix();
&--large-only{
display: none;
@include atLarge{
display: inline-block;
}
}
&--gutters { &--gutters {
margin-right: -60px; margin-right: -60px;
} }

View File

@ -23,19 +23,21 @@
} }
&__language{ &__language{
margin: 13px auto 5px auto; position: absolute;
top: 10px;
left: -5px;
border-radius: 15px; border-radius: 15px;
overflow: hidden; overflow: hidden;
width: 25px; width: 25px;
height: 25px; height: 25px;
@include atMedium(){ @include atMedium(){
position: unset;
margin: 40px 20px 0px 0px; margin: 40px 20px 0px 0px;
float: right; float: right;
} }
} }
&__menu-icon{ &__menu-icon{
width: 20px; width: 20px;
height: 19px; height: 19px;
@ -108,14 +110,17 @@
z-index: -10; z-index: -10;
padding-top: 90px; padding-top: 90px;
text-align: center; text-align: center;
display: none;
&--is-visible{ &--is-visible{
display: block;
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
z-index: 1; z-index: 1;
} }
@include atMedium(){ @include atMedium(){
display: inline;
opacity: 1; opacity: 1;
z-index: 1; z-index: 1;
padding-top: 0; padding-top: 0;
@ -125,7 +130,7 @@
&__logo{ &__logo{
position: absolute; position: absolute;
top: 0px; top: -1px;
padding: 5px 15px; padding: 5px 15px;
left: 50%; left: 50%;
transform-origin: 50% 0%; transform-origin: 50% 0%;

View File

@ -1,6 +1,6 @@
.video-container { .video-container {
position:relative; position:relative;
padding-bottom:61.15%; padding-bottom:63.15%;
height:0; height:0;
overflow:hidden; overflow:hidden;
box-shadow: -3px 3px 10px #000000ba; box-shadow: -3px 3px 10px #000000ba;

View File

@ -1,4 +1,4 @@
@import './base/_normalize'; @import './base/normalize';
@import './base/variables'; @import './base/variables';
@import './base/fonts'; @import './base/fonts';
@import './base/global'; @import './base/global';
@ -8,12 +8,12 @@
@import './modules/btn'; @import './modules/btn';
@import './modules/large-hero'; @import './modules/large-hero';
@import './modules/wrapper'; @import './modules/wrapper';
@import './modules/_page-section'; @import './modules/page-section';
@import './modules/_headline'; @import './modules/headline';
@import './modules/_rows'; @import './modules/rows';
@import './modules/_generic-content-container'; @import './modules/generic-content-container';
@import './modules/_video-container'; @import './modules/video-container';
@import './modules/_how-it-works.scss'; @import './modules/how-it-works';
@import './modules/_arrow.scss'; @import './modules/arrow';
@import './modules/footer';

View File

@ -21,20 +21,16 @@
<div class="site-header__logo"> <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>
<div class="site-header__menu-icon"> <div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div> <div class="site-header__menu-icon__middle"></div>
</div> </div>
<div class="site-header__menu-content"> <div class="site-header__menu-content">
<div class="site-header__btn-container"> <div class="site-header__btn-container">
<a href="#" class="btn ">Place your Order</a> <a href="#" class="btn ">Place your Order</a>
</div> </div>
<div class="site-header__language"> <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> </div>
<nav class="primary-nav primary-nav--pull-right"> <nav class="primary-nav primary-nav--pull-right">
<ul> <ul>
<li><a href="#about-us">About us</a></li> <li><a href="#about-us">About us</a></li>
@ -50,14 +46,12 @@
<!-- STARTING SECTION --> <!-- STARTING SECTION -->
<div class="large-hero"> <div class="large-hero">
<picture> <picture>
<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)"> <source srcset="./assets/media/images/our_vegetables_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/our_vegetables_medium.png 1380w" media="(min-width: 990px)">
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)"> <source srcset="./assets/media/images/our_vegetables_small.png 990w" media="(min-width: 640px)">
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image"> <img srcset="./assets/media/images/our_vegetables_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
</picture> </picture>
<div class="large-hero__text-content"> <div class="large-hero__text-content">
<h1 class="large-hero__title">bio bulke bende</h1> <h1 class="large-hero__title">bio bulke bende</h1>
<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2> <h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
@ -114,66 +108,79 @@
</div> </div>
</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="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 row--gutters">
<div class="row__medium-6"> <div class="row__medium-6 row--large-only">
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png"> <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>
<div class="row__medium-6"> <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 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> <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>
</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="how-it-works how-it-works--atSmall-centered">
<div class="row row--gutters"> <div class="row row--gutters">
<div class="row__medium-6"> <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> <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>
<div class="row__medium-6"> <div class="row__medium-6 row--large-only">
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png"> <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>
</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="how-it-works how-it-works--atSmall-centered">
<div class="row row--gutters"> <div class="row row--gutters">
<div class="row__medium-6"> <div class="row__medium-6 row--large-only">
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png"> <img class="how-it-works__img" src="./assets/media/images/order_food_large.JPG" alt="To order your food is easy!">
</div> </div>
<div class="row__medium-6"> <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> <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>
</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 class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
</div> </div>
</div>
<div >
</div>
<div id="how-it-works-3" class="page-section"> <div id="how-it-works-3" class="page-section">
<picture> <picture>
<source srcset="./assets/media/images/veg_large_cropped.png 1920w" media="(min-width: 1580px)"> <source srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
<source srcset="./assets/media/images/veg_medium_cropped.png 1380w" media="(min-width: 1300px)"> <source srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
<source srcset="./assets/media/images/veg_small_cropped.png 990w" media="(min-width: 1100px)"> <source srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
<img srcset="./assets/media/images/veg_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image"> <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> </picture>
<div class="how-it-works"> <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="wrapper wrapper--white wrapper--medium">
<div class="how-it-works__last-section"> <div class="how-it-works__last-section">
<div class="wrapper wrapper--small"> <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> <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>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 btn--large"><b>Join us!</b></a></p> <p><a href="#" class="btn"><b>Join us!</b></a></p>
</div> </div>
</div> </div>
</div> </div>
@ -186,8 +193,11 @@
<!-- MEMBERS --> <!-- MEMBERS -->
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer class="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> <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> </footer>
<!-- MODAL --> <!-- MODAL -->

View File

@ -336,6 +336,7 @@ template {
box-sizing: border-box; } box-sizing: border-box; }
body { body {
position: relative;
font-family: 'roboto', sans-serif; font-family: 'roboto', sans-serif;
color: #333; } color: #333; }
@ -361,13 +362,16 @@ img {
padding: 32px 0px 32px 0px; padding: 32px 0px 32px 0px;
float: right; } } float: right; } }
.site-header__language { .site-header__language {
margin: 13px auto 5px auto; position: absolute;
top: 10px;
left: -5px;
border-radius: 15px; border-radius: 15px;
overflow: hidden; overflow: hidden;
width: 25px; width: 25px;
height: 25px; } height: 25px; }
@media (min-width: 800px) { @media (min-width: 800px) {
.site-header__language { .site-header__language {
position: unset;
margin: 40px 20px 0px 0px; margin: 40px 20px 0px 0px;
float: right; } } float: right; } }
.site-header__menu-icon { .site-header__menu-icon {
@ -423,20 +427,23 @@ img {
position: relative; position: relative;
z-index: -10; z-index: -10;
padding-top: 90px; padding-top: 90px;
text-align: center; } text-align: center;
display: none; }
.site-header__menu-content--is-visible { .site-header__menu-content--is-visible {
display: block;
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
z-index: 1; } z-index: 1; }
@media (min-width: 800px) { @media (min-width: 800px) {
.site-header__menu-content { .site-header__menu-content {
display: inline;
opacity: 1; opacity: 1;
z-index: 1; z-index: 1;
padding-top: 0; padding-top: 0;
transform: scale(1); } } transform: scale(1); } }
.site-header__logo { .site-header__logo {
position: absolute; position: absolute;
top: 0px; top: -1px;
padding: 5px 15px; padding: 5px 15px;
left: 50%; left: 50%;
transform-origin: 50% 0%; transform-origin: 50% 0%;
@ -460,7 +467,7 @@ img {
padding-top: 10px; } padding-top: 10px; }
@media (min-width: 800px) { @media (min-width: 800px) {
.primary-nav { .primary-nav {
padding: 31px 0px; } } padding: 22px 0px; } }
@media (min-width: 800px) { @media (min-width: 800px) {
.primary-nav--pull-right { .primary-nav--pull-right {
float: right; } } float: right; } }
@ -474,7 +481,8 @@ img {
.primary-nav li { .primary-nav li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
padding-right: 7px; } padding-right: 7px;
padding-top: 10px; }
@media (min-width: 800px) { @media (min-width: 800px) {
.primary-nav li { .primary-nav li {
float: left; float: left;
@ -509,6 +517,8 @@ img {
padding: .75rem 1.2rem; padding: .75rem 1.2rem;
display: inline-block; display: inline-block;
border-radius: 30px; } border-radius: 30px; }
.btn--l-margin {
margin-left: 20px; }
.btn--medium { .btn--medium {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem; }
@media (min-width: 530px) { @media (min-width: 530px) {
@ -527,7 +537,6 @@ img {
.large-hero__image { .large-hero__image {
display: block; } display: block; }
.large-hero__text-content { .large-hero__text-content {
padding-top: 88px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0px; left: 0px;
@ -540,7 +549,7 @@ img {
.large-hero__title { .large-hero__title {
font-family: "CocogooseBold"; font-family: "CocogooseBold";
color: white; color: white;
font-size: 2.5rem; font-size: 2.2rem;
margin: 0; } margin: 0; }
@media (min-width: 530px) { @media (min-width: 530px) {
.large-hero__title { .large-hero__title {
@ -551,7 +560,7 @@ img {
.large-hero__subtitle { .large-hero__subtitle {
font-weight: 400; font-weight: 400;
color: white; color: white;
font-size: 1.4rem; font-size: 1.3rem;
margin: 0; } margin: 0; }
@media (min-width: 530px) { @media (min-width: 530px) {
.large-hero__subtitle { .large-hero__subtitle {
@ -604,11 +613,17 @@ img {
position: unset; position: unset;
padding: 4.5rem 0; } } padding: 4.5rem 0; } }
.page-section--t-padding { .page-section--t-padding {
padding-top: 1.2rem; } padding-top: 5.2rem; }
@media (min-width: 800px) { @media (min-width: 800px) {
.page-section--t-padding { .page-section--t-padding {
position: unset; position: unset;
padding-top: 4.5rem; } } padding-top: 4.5rem; } }
.page-section--t-padding-larger {
padding-top: 5.2rem; }
@media (min-width: 800px) {
.page-section--t-padding-larger {
position: unset;
padding-top: 6rem; } }
.page-section--b-padding-small { .page-section--b-padding-small {
padding-bottom: 1rem; } padding-bottom: 1rem; }
@media (min-width: 800px) { @media (min-width: 800px) {
@ -646,13 +661,13 @@ img {
max-width: 1000px; } } max-width: 1000px; } }
.headline__title { .headline__title {
font-weight: 400; font-weight: 400;
font-size: 1.7rem; } font-size: 1.6rem; }
@media (min-width: 800px) { @media (min-width: 800px) {
.headline__title { .headline__title {
font-size: 2.1rem; } } font-size: 2.1rem; } }
.headline__subtitle { .headline__subtitle {
font-weight: 300; font-weight: 300;
font-size: 1.4rem; } font-size: 1.3rem; }
@media (min-width: 800px) { @media (min-width: 800px) {
.headline__subtitle { .headline__subtitle {
font-size: 1.6rem; } } font-size: 1.6rem; } }
@ -676,6 +691,11 @@ img {
content: ""; content: "";
clear: both; clear: both;
display: table; } display: table; }
.row--large-only {
display: none; }
@media (min-width: 1200px) {
.row--large-only {
display: inline-block; } }
.row--gutters { .row--gutters {
margin-right: -60px; } margin-right: -60px; }
.row--gutters > div { .row--gutters > div {
@ -710,10 +730,11 @@ img {
display: flex; } display: flex; }
.generic-content-container--t-b-margin { .generic-content-container--t-b-margin {
margin-top: 5rem; margin-top: 4rem;
margin-bottom: 70px; } margin-bottom: 2.5rem; }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.generic-content-container--t-b-margin { .generic-content-container--t-b-margin {
margin-top: 5rem;
margin-bottom: 0px; } } margin-bottom: 0px; } }
.generic-content-container--t-center { .generic-content-container--t-center {
@ -723,7 +744,7 @@ img {
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
margin: 0; margin: 0;
font-size: 1.2rem; } font-size: 1.1rem; }
@media (min-width: 800px) { @media (min-width: 800px) {
.generic-content-container p { .generic-content-container p {
margin: 0 0 1.8rem 0; margin: 0 0 1.8rem 0;
@ -734,7 +755,7 @@ img {
.video-container { .video-container {
position: relative; position: relative;
padding-bottom: 61.15%; padding-bottom: 63.15%;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
box-shadow: -3px 3px 10px #000000ba; box-shadow: -3px 3px 10px #000000ba;
@ -760,7 +781,7 @@ img {
height: 100%; } height: 100%; }
.how-it-works { .how-it-works {
margin: 50px 0px; } margin-bottom: 2.5rem; }
.how-it-works strong { .how-it-works strong {
font-weight: 800; } font-weight: 800; }
.how-it-works--atSmall-centered { .how-it-works--atSmall-centered {
@ -769,10 +790,10 @@ img {
.how-it-works--atSmall-centered { .how-it-works--atSmall-centered {
text-align: left; } } text-align: left; } }
.how-it-works--atSmall-t-margin { .how-it-works--atSmall-t-margin {
margin-top: 70px !important; } margin-top: 6rem !important; }
@media (min-width: 530px) { @media (min-width: 800px) {
.how-it-works--atSmall-t-margin { .how-it-works--atSmall-t-margin {
margin-top: 20px; } } margin-top: 4rem !important; } }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.how-it-works--atSmall-t-margin { .how-it-works--atSmall-t-margin {
margin-top: 100px; } } margin-top: 100px; } }
@ -788,8 +809,11 @@ img {
.how-it-works--t-margin { .how-it-works--t-margin {
margin-top: -45px; } } margin-top: -45px; } }
.how-it-works__last-section { .how-it-works__last-section {
padding: 100px 0px 50px 0px; padding: 3rem 0px 50px 0px;
background-color: rgba(255, 255, 255, 0.9); } background-color: rgba(255, 255, 255, 0.9); }
@media (min-width: 1200px) {
.how-it-works__last-section {
padding: 100px 0px 50px 0px; } }
.how-it-works p { .how-it-works p {
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
@ -807,11 +831,20 @@ img {
.how-it-works__title { .how-it-works__title {
margin-top: 10px; margin-top: 10px;
font-size: 2.1rem; } } font-size: 2.1rem; } }
.how-it-works__img { .how-it-works__title-small {
display: none; } font-weight: 300;
font-size: 1.4rem;
margin-bottom: 45px; }
@media (min-width: 800px) {
.how-it-works__title-small {
margin-top: 10px;
font-size: 2.1rem; } }
.how-it-works__img--small-only {
display: inline-block;
margin: 10px 0px; }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.how-it-works__img { .how-it-works__img--small-only {
display: inline-block; } } display: none; } }
.how-it-works__icon--1 { .how-it-works__icon--1 {
width: 150px; } width: 150px; }
@media (min-width: 800px) { @media (min-width: 800px) {
@ -822,13 +855,20 @@ img {
width: 225px; width: 225px;
margin-left: 80px; } } margin-left: 80px; } }
.how-it-works__icon--2 { .how-it-works__icon--2 {
width: 130px; width: 100px;
margin-right: .8rem;
margin-bottom: -45px; }
.how-it-works__icon--3 {
width: 130px;
margin-right: .8rem; margin-right: .8rem;
margin-bottom: -35px; } margin-bottom: -35px; }
.how-it-works__icon--3 {
width: 100px;
margin-right: .8rem;
margin-bottom: -30px;
margin-top: 1.2rem; }
@media (min-width: 800px) {
.how-it-works__icon--3 {
margin-top: 3.2rem; } }
@media (min-width: 1200px) {
.how-it-works__icon--3 {
margin-top: 0rem; } }
.how-it-works__icon--4 { .how-it-works__icon--4 {
width: 100px; width: 100px;
margin-bottom: -30px; margin-bottom: -30px;
@ -848,7 +888,7 @@ img {
@media (min-width: 800px) { @media (min-width: 800px) {
.arrow--about { .arrow--about {
position: relative; position: relative;
bottom: -70px; bottom: -40px;
left: 50%; left: 50%;
transform: translateX(-50%); } } transform: translateX(-50%); } }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -866,14 +906,14 @@ img {
@media (min-width: 800px) { @media (min-width: 800px) {
.arrow--how-it-works-1 { .arrow--how-it-works-1 {
position: relative; position: relative;
bottom: -50px; bottom: -30px;
left: 50%; left: 50%;
transform: translateX(-50%); } } transform: translateX(-50%); } }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.arrow--how-it-works-1 { .arrow--how-it-works-1 {
position: relative; position: relative;
bottom: -50px; bottom: -30px;
left: 50%; left: 70%;
transform: translateX(-50%); } } transform: translateX(-50%); } }
.arrow--how-it-works-2 { .arrow--how-it-works-2 {
position: absolute; position: absolute;
@ -900,4 +940,12 @@ img {
.arrow--lightGreen { .arrow--lightGreen {
border-top: 85px solid #A5C90F; } border-top: 85px solid #A5C90F; }
.footer {
position: absolute;
bottom: -40px;
width: 100%;
background-color: #FF3D04;
color: white;
text-align: center; }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 855 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 513 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 939 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 578 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([,function(e,n,t){"use strict";t.r(n);t(2)},function(e,n){!function(e,n,t,o){var r=[],s={_version:"3.11.3",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout((function(){n(t[e])}),0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},a=function(){};a.prototype=s,a=new a;var i=[];var l=t.documentElement,f="svg"===l.nodeName.toLowerCase();!function(){var e,n,t,o,s,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],(n=r[f]).name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=typeof n.fn==="function"?n.fn():n.fn,s=0;s<e.length;s++)1===(l=e[s].split(".")).length?a[l[0]]=o:(a[l[0]]&&(!a[l[0]]||a[l[0]]instanceof Boolean)||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=o),i.push((o?"":"no-")+l.join("-"))}}(),function(e){var n=l.className,t=a._config.classPrefix||"";if(f&&(n=n.baseVal),a._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}a._config.enableClasses&&(e.length>0&&(n+=" "+t+e.join(" "+t)),f?l.className.baseVal=n:l.className=n)}(i),delete s.addTest,delete s.addAsyncTest;for(var u=0;u<a._q.length;u++)a._q[u]();e.Modernizr=a}(window,window,document)}]);

View File

@ -0,0 +1,951 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0; }
/**
* Render the `main` element consistently in IE.
*/
main {
display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent; }
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */ }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline; }
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none; }
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none; }
@font-face {
font-family: "CocogooseNormal";
src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); }
@font-face {
font-family: "CocogooseLight";
src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); }
@font-face {
font-family: "CocogooseBold";
src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); }
@font-face {
font-family: "CocogooseExtra";
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"); }
@font-face {
font-family: "BS-light";
src: url("../media/fonts/bahnschrift/BS_Static_Light.ttf") format("truetype"); }
@font-face {
font-family: "BS-bold";
src: url("../media/fonts/bahnschrift/BS_Static_Bold.ttf") format("truetype"); }
* {
box-sizing: border-box; }
body {
position: relative;
font-family: 'roboto', sans-serif;
color: #333; }
img {
max-width: 100%;
height: auto; }
.site-header {
position: fixed;
width: 100%;
z-index: 2;
transition: background-color .3s ease-out; }
.site-header--is-expanded {
background-color: orange;
padding-bottom: 18px; }
@media (min-width: 800px) {
.site-header {
position: absolute;
position: fixed;
background-color: rgba(0, 0, 0, 0.4); } }
@media (min-width: 800px) {
.site-header__btn-container {
padding: 32px 0px 32px 0px;
float: right; } }
.site-header__language {
position: absolute;
top: 10px;
left: -5px;
border-radius: 15px;
overflow: hidden;
width: 25px;
height: 25px; }
@media (min-width: 800px) {
.site-header__language {
position: unset;
margin: 40px 20px 0px 0px;
float: right; } }
.site-header__menu-icon {
width: 20px;
height: 19px;
position: absolute;
z-index: 10;
top: 10px;
right: 10px; }
.site-header__menu-icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 0;
transition: transform .3s ease-out; }
.site-header__menu-icon__middle {
position: absolute;
top: 8px;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transition: all .3s ease-out;
transform-origin: 0 50%; }
.site-header__menu-icon::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 100%;
transition: transform .3s ease-out; }
@media (min-width: 800px) {
.site-header__menu-icon {
display: none; } }
.site-header__menu-icon--close-x::before {
transform: rotate(45deg) scaleX(1.25); }
.site-header__menu-icon--close-x .site-header__menu-icon__middle {
transform: scaleX(0);
opacity: 0; }
.site-header__menu-icon--close-x::after {
transform: rotate(-45deg) scaleX(1.25) translateY(1px); }
.site-header__menu-content {
opacity: 0;
transform: scale(1.2);
transtion: all .3s ease-out;
position: relative;
z-index: -10;
padding-top: 90px;
text-align: center;
display: none; }
.site-header__menu-content--is-visible {
display: block;
transform: scale(1);
opacity: 1;
z-index: 1; }
@media (min-width: 800px) {
.site-header__menu-content {
display: inline;
opacity: 1;
z-index: 1;
padding-top: 0;
transform: scale(1); } }
.site-header__logo {
position: absolute;
top: -1px;
padding: 5px 15px;
left: 50%;
transform-origin: 50% 0%;
transform: translateX(-50%) scale(0.8);
transition: transform .3s ease-out;
background-color: rgba(0, 0, 0, 0.5); }
.site-header__logo--orange-bg {
transition: background-color .3s ease-out;
background-color: orange; }
@media (min-width: 800px) {
.site-header__logo {
padding: 0;
top: 3px;
position: relative;
float: left;
left: auto;
transform: translateX(0);
background-color: rgba(0, 0, 0, 0); } }
.primary-nav {
padding-top: 10px; }
@media (min-width: 800px) {
.primary-nav {
padding: 22px 0px; } }
@media (min-width: 800px) {
.primary-nav--pull-right {
float: right; } }
.primary-nav ul {
margin: 0;
padding: 0; }
.primary-nav ul::after {
content: "";
clear: both;
display: table; }
.primary-nav li {
list-style: none;
display: inline-block;
padding-right: 7px;
padding-top: 10px; }
@media (min-width: 800px) {
.primary-nav li {
float: left;
display: block;
padding-right: 20px; } }
.primary-nav li:last-child {
padding-right: 0; }
@media (min-width: 800px) {
.primary-nav li:last-child {
padding-right: 20px; } }
.primary-nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
display: block;
padding: 5px 8px;
font-size: .8rem;
background: rgba(0, 0, 0, 0.5);
border-radius: 30px; }
@media (min-width: 800px) {
.primary-nav a {
background: transparent;
font-size: 1.10rem;
padding: 12px 0; }
.primary-nav a.is-current-link {
color: #fabb69; } }
.btn {
background-color: #00ab00;
color: #fff;
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block;
border-radius: 30px; }
.btn--l-margin {
margin-left: 20px; }
.btn--medium {
margin-bottom: 1.5rem; }
@media (min-width: 530px) {
.btn--medium {
font-size: 1.1rem; } }
.btn--large {
padding: 1.1rem 1.9rem; }
@media (min-width: 530px) {
.btn--large {
font-size: 1.25rem; } }
.large-hero {
border-bottom: 10px solid orange;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
position: relative; }
.large-hero__image {
display: block; }
.large-hero__text-content {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
transform: translateY(-50%);
text-align: center; }
@media (min-width: 800px) {
.large-hero__text-content {
padding-top: 60px; } }
.large-hero__title {
font-family: "CocogooseBold";
color: white;
font-size: 2.2rem;
margin: 0; }
@media (min-width: 530px) {
.large-hero__title {
font-size: 3.2rem; } }
@media (min-width: 800px) {
.large-hero__title {
font-size: 4.8rem; } }
.large-hero__subtitle {
font-weight: 400;
color: white;
font-size: 1.3rem;
margin: 0; }
@media (min-width: 530px) {
.large-hero__subtitle {
font-size: 1.8rem; } }
@media (min-width: 800px) {
.large-hero__subtitle {
font-size: 2.4rem; } }
.large-hero__description {
color: #FFF;
font-weight: 00;
font-size: 1.1rem;
max-width: 50rem;
margin-left: auto;
margin-right: auto; }
@media (min-width: 530px) {
.large-hero__description {
font-size: 1.3rem; } }
@media (min-width: 800px) {
.large-hero__description {
font-size: 1.875rem; } }
.wrapper {
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1300px;
margin-left: auto;
margin-right: auto; }
.wrapper--medium {
max-width: 976px; }
.wrapper--centered {
text-align: center; }
@media (min-width: 1200px) {
.wrapper--centered {
text-align: left; } }
.wrapper--small {
max-width: 750px; }
.page-section {
position: relative; }
.page-section--t-margin-external {
margin-top: -70px; }
@media (min-width: 800px) {
.page-section--b-margin-external {
margin-bottom: -140px; } }
.page-section--tb-padding {
padding: 1.2rem 0; }
@media (min-width: 800px) {
.page-section--tb-padding {
position: unset;
padding: 4.5rem 0; } }
.page-section--t-padding {
padding-top: 5.2rem; }
@media (min-width: 800px) {
.page-section--t-padding {
position: unset;
padding-top: 4.5rem; } }
.page-section--t-padding-larger {
padding-top: 5.2rem; }
@media (min-width: 800px) {
.page-section--t-padding-larger {
position: unset;
padding-top: 6rem; } }
.page-section--b-padding-small {
padding-bottom: 1rem; }
@media (min-width: 800px) {
.page-section--b-padding-small {
position: unset;
padding-top: 3.8rem; } }
.page-section--b-margin {
margin-bottom: 70px; }
@media (min-width: 800px) {
.page-section--b-margin {
margin-bottom: -140px; } }
.page-section--red {
background-color: #FF3D04;
color: #fff; }
.page-section--darkGreen {
background-color: #6F9C3D;
color: #fff; }
.page-section--lightGreen {
background-color: #A5C90F;
color: #fff; }
.headline {
margin: auto; }
.headline strong {
font-weight: 800; }
.headline--lt-margin {
margin-top: -5px; }
@media (min-width: 1200px) {
.headline--lt-margin {
margin-left: 55px; } }
.headline--s-width {
max-width: 500px; }
@media (min-width: 800px) {
.headline--s-width {
max-width: 1000px; } }
.headline__title {
font-weight: 400;
font-size: 1.6rem; }
@media (min-width: 800px) {
.headline__title {
font-size: 2.1rem; } }
.headline__subtitle {
font-weight: 300;
font-size: 1.3rem; }
@media (min-width: 800px) {
.headline__subtitle {
font-size: 1.6rem; } }
.headline--centered {
text-align: center; }
.headline--lightGreen {
color: #A5C90F; }
.headline--orange {
color: #FF9F2F; }
.headline--b-margin {
margin-bottom: 2.5rem; }
@media (min-width: 800px) {
.headline--b-margin {
margin-bottom: 4.5rem; } }
.headline a {
font-weight: 400; }
.row {
/* Begin Equal Height Rules */ }
.row::after {
content: "";
clear: both;
display: table; }
.row--large-only {
display: none; }
@media (min-width: 1200px) {
.row--large-only {
display: inline-block; } }
.row--gutters {
margin-right: -60px; }
.row--gutters > div {
padding-right: 60px; }
@media (min-width: 1200px) {
.row__medium-3--larger {
float: left;
width: 30%; }
.row__medium-4 {
float: left;
width: 33.33%; }
.row__medium-6 {
float: left;
width: 50%; }
.row__medium-8 {
float: right;
width: 66.66%; }
.row__medium-9--smaller {
float: right;
width: 70%; } }
@media (min-width: 800px) {
.flexbox .row--equal-height-at-medium {
display: flex; } }
.flexbox .row--equal-height-at-medium > div {
float: none;
display: flex; }
@media (min-width: 800px) {
.flexbox .row--equal-height-at-large {
display: flex; } }
.flexbox .row--equal-height-at-large > div {
float: none;
display: flex; }
.generic-content-container--t-b-margin {
margin-top: 4rem;
margin-bottom: 2.5rem; }
@media (min-width: 1200px) {
.generic-content-container--t-b-margin {
margin-top: 5rem;
margin-bottom: 0px; } }
.generic-content-container--t-center {
text-align: center; }
.generic-content-container p {
font-weight: 300;
line-height: 1.25;
margin: 0;
font-size: 1.1rem; }
@media (min-width: 800px) {
.generic-content-container p {
margin: 0 0 1.8rem 0;
font-size: 1.4rem; } }
.generic-content-container p a {
font-weight: 700; }
.video-container {
position: relative;
padding-bottom: 63.15%;
height: 0;
overflow: hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-right: -18px;
margin-left: -18px; }
@media (min-width: 530px) {
.video-container {
padding-bottom: 60%; } }
@media (min-width: 800px) {
.video-container {
padding-bottom: 59%; } }
@media (min-width: 1200px) {
.video-container {
padding-bottom: 56.25%;
margin-right: 0px;
margin-left: 0px; } }
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.how-it-works {
margin-bottom: 2.5rem; }
.how-it-works strong {
font-weight: 800; }
.how-it-works--atSmall-centered {
text-align: center; }
@media (min-width: 1200px) {
.how-it-works--atSmall-centered {
text-align: left; } }
.how-it-works--atSmall-t-margin {
margin-top: 6rem !important; }
@media (min-width: 800px) {
.how-it-works--atSmall-t-margin {
margin-top: 4rem !important; } }
@media (min-width: 1200px) {
.how-it-works--atSmall-t-margin {
margin-top: 100px; } }
.how-it-works--centered {
position: absolute;
top: 0px;
width: 100%;
text-align: center; }
@media (min-width: 530px) {
.how-it-works--t-margin {
margin-top: 10px; } }
@media (min-width: 800px) {
.how-it-works--t-margin {
margin-top: -45px; } }
.how-it-works__last-section {
padding: 3rem 0px 50px 0px;
background-color: rgba(255, 255, 255, 0.9); }
@media (min-width: 1200px) {
.how-it-works__last-section {
padding: 100px 0px 50px 0px; } }
.how-it-works p {
font-weight: 300;
line-height: 1.25;
margin: 0;
font-size: 1.2rem; }
@media (min-width: 800px) {
.how-it-works p {
margin: 0 0 1.8rem 0;
font-size: 1.4rem; } }
.how-it-works__title {
font-weight: 300;
font-size: 1.7rem;
margin-bottom: 45px; }
@media (min-width: 800px) {
.how-it-works__title {
margin-top: 10px;
font-size: 2.1rem; } }
.how-it-works__title-small {
font-weight: 300;
font-size: 1.4rem;
margin-bottom: 45px; }
@media (min-width: 800px) {
.how-it-works__title-small {
margin-top: 10px;
font-size: 2.1rem; } }
.how-it-works__img--small-only {
display: inline-block;
margin: 10px 0px; }
@media (min-width: 1200px) {
.how-it-works__img--small-only {
display: none; } }
.how-it-works__icon--1 {
width: 150px; }
@media (min-width: 800px) {
.how-it-works__icon--1 {
width: 200px; } }
@media (min-width: 1200px) {
.how-it-works__icon--1 {
width: 225px;
margin-left: 80px; } }
.how-it-works__icon--2 {
width: 100px;
margin-right: .8rem;
margin-bottom: -35px; }
.how-it-works__icon--3 {
width: 100px;
margin-right: .8rem;
margin-bottom: -30px;
margin-top: 1.2rem; }
@media (min-width: 800px) {
.how-it-works__icon--3 {
margin-top: 3.2rem; } }
@media (min-width: 1200px) {
.how-it-works__icon--3 {
margin-top: 0rem; } }
.how-it-works__icon--4 {
width: 100px;
margin-bottom: -30px;
margin-right: 20px; }
.arrow {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent; }
.arrow--about {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.arrow--about {
position: relative;
bottom: -40px;
left: 50%;
transform: translateX(-50%); } }
@media (min-width: 1200px) {
.arrow--about {
position: relative;
bottom: -70px;
left: 50%;
transform: translateX(-50%); } }
.arrow--how-it-works-1 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.arrow--how-it-works-1 {
position: relative;
bottom: -30px;
left: 50%;
transform: translateX(-50%); } }
@media (min-width: 1200px) {
.arrow--how-it-works-1 {
position: relative;
bottom: -30px;
left: 70%;
transform: translateX(-50%); } }
.arrow--how-it-works-2 {
position: absolute;
bottom: -60px;
z-index: 1;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.arrow--how-it-works-2 {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%); } }
@media (min-width: 1200px) {
.arrow--how-it-works-2 {
position: relative;
bottom: 0px;
left: 50%;
transform: translateX(-50%); } }
.arrow--red {
border-top: 85px solid #FF3D04; }
.arrow--darkGreen {
border-top: 85px solid #6F9C3D; }
.arrow--lightGreen {
border-top: 85px solid #A5C90F; }
.footer {
position: absolute;
bottom: -40px;
width: 100%;
background-color: #FF3D04;
color: white;
text-align: center; }
/*# sourceMappingURL=style.css.map */

File diff suppressed because one or more lines are too long

208
docs/index.html Normal file
View File

@ -0,0 +1,208 @@
<!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="./assets/styles/style.css">
<!-- build:js assets/scripts/Vendor.js -->
<script type="text/javascript" src="./assets/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="./assets/scripts/App.js"></script>
<!-- endbuild -->
</body>
</html>