biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2024-12-25 04:35:24 +00:00
Code Issues Projects Releases Wiki Activity

about section finished

Browse Source
This commit is contained in:
Tancre 2020-09-30 18:51:32 +02:00
parent 49cbef62df
commit 7a776a7295
11 changed files with 327 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/scss/base/_variables.scss
View File

@ -0,0 +1,5 @@
$myGreen: #4BC90F;
$myLightGreen: #A5C90F;
$myDarkGreen: #6F9C3D;
$myOrange: #FF9F2F;
$myRed: #FF3D04;

10
app/assets/scss/modules/_btn.scss
View File

@ -6,6 +6,14 @@
display: inline-block; display: inline-block;
border-radius: 30px; border-radius: 30px;
&--medium {
margin-bottom:1.5rem;
@include atSmall(){
font-size: 1.1rem;
}
}
&--large { &--large {
padding: 1.1rem 1.9rem; padding: 1.1rem 1.9rem;
@ -13,6 +21,4 @@
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
} }

22
app/assets/scss/modules/_generic-content-container.scss
View File

@ -1,12 +1,28 @@
.generic-content-container{ .generic-content-container{
&--t-b-margin{
margin-top: 5rem;
margin-bottom: 70px;
@include atLarge{
margin-top: 7rem;
margin-bottom: 0px;
}
}
&--t-center{
text-align: center;
}
p { p {
font-weight: 300; font-weight: 300;
line-height: 1.65; line-height: 1.65;
margin: 0 0 1.8rem 0; margin: 0;
font-size: 1.2rem;
@include atSmall{ @include atMedium{
font-size: 1.125rem; margin: 0 0 1.8rem 0;
font-size: 1.4rem;
} }
} }

54
app/assets/scss/modules/_headline.scss Normal file
View File

@ -0,0 +1,54 @@
.headline{
margin:auto;
&--s-width {
max-width: 500px;
@include atMedium(){
max-width: 1000px;
}
}
&__title {
font-weight: 500;
font-size: 1.7rem;
@include atMedium(){
font-size: 2.1rem;
}
}
&__subtitle {
font-weight: 300;
font-size: 1.4rem;
@include atMedium(){
font-size: 1.8rem;
}
}
&--centered {
text-align: center;
}
&--lightGreen {
color: $myLightGreen;
}
&--orange {
color: $myOrange;
}
&--b-margin {
margin-bottom: 2.5rem;
@include atMedium(){
margin-bottom: 4.5rem;
}
}
a {
font-weight: 400;
}
}

89
app/assets/scss/modules/_page-section.scss
View File

@ -1,42 +1,85 @@
.page-section{ .page-section{
padding: 1.2rem 0; padding: 1.2rem 0;
position: relative;
@include atMedium(){ @include atMedium(){
position: unset;
padding: 4.5rem 0; padding: 4.5rem 0;
} }
&--no-b-padding-until-medium{
padding-bottom: 0;
@include atMedium(){ // &--no-b-padding-until-medium{
padding-bottom: 4.5rem; // padding-bottom: 0;
// @include atMedium(){
// padding-bottom: 4.5rem;
// }
// }
// &--no-b-padding-until-large{
// padding-bottom: 0;
// @include atMedium(){
// padding-bottom: 4.5rem;
// }
// }
&--b-margin{
margin-bottom: 70px;
@include atMedium{
margin-bottom: -140px;
} }
} }
&--no-b-padding-until-large{ &--red{
padding-bottom: 0; background-color: $myRed;
@include atMedium(){
padding-bottom: 4.5rem;
}
}
&--blue{
background-color: blue;
color: #fff; color: #fff;
} }
&--testimonials{ &--darkGreen{
background: #e0e6ef; background-color: $myDarkGreen;
color: #fff;
}
// @include atMedium(){ &--lightGreen{
background-color: $myLightGreen;
color: #fff;
}
// &.lazyloaded { &--arrow-down{
// background: url('../../assets/images/testimonials-bg.jpg') top center no-repeat; width: 0;
// background-size: cover; height: 0;
// } border-left: 70px solid transparent;
// } border-right: 70px solid transparent;
border-top: 85px solid $myRed;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
@include atMedium{
position: relative;
top: 70px;
margin: auto;
left: 0;
transform: translateX(0%);
} }
} }
// &--testimonials{
// background: #e0e6ef;
// // @include atMedium(){
// // &.lazyloaded {
// // background: url('../../assets/images/testimonials-bg.jpg') top center no-repeat;
// // background-size: cover;
// // }
// // }
// }
}

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

@ -19,7 +19,7 @@
} }
&--gutters > div { &--gutters > div {
padding-right: 65px; padding-right: 60px;
} }
&--gutters-large > div { &--gutters-large > div {
@ -34,7 +34,7 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@include atMedium(){ @include atLarge(){
&__b-margin-until-medium{ &__b-margin-until-medium{
margin-bottom: 0rem; margin-bottom: 0rem;
@ -46,7 +46,7 @@
} }
&__medium-4--larger{ &__medium-4--larger{
width: 37%; width: 27%;
} }
&__medium-6 { &__medium-6 {

24
app/assets/scss/modules/_video-container.scss Normal file
View File

@ -0,0 +1,24 @@
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-bottom: 15px;
margin-right: -18px;
margin-left: -18px;
@include atLarge{
margin-right: 0px;
margin-left: 0px;
}
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

2
app/assets/scss/style.scss
View File

@ -9,6 +9,8 @@
@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/_rows'; @import './modules/_rows';
@import './modules/_generic-content-container'; @import './modules/_generic-content-container';
@import './modules/_video-container';

46
app/index.html
View File

@ -61,26 +61,29 @@
<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>
<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 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> <p><a href="#" class="btn btn--large">Join us!</a></p>
</div> </div>
</div> </div>
<!-- ABOUT US --> <!-- ABOUT US -->
<div id="about-us" class="page-section"> <div id="about-us" class="page-section page-section--red page-section--b-margin">
<div class="wrapper"> <div class="wrapper">
<h2 class="page-section__title">About us</h2> <div class="headline headline--s-width headline--centered headline--b-margin">
<h3 class="page-section__title">And about our food</h3> <h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
<div class="row row--gutters"> <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 class="row__medium-8 row__medium-8--larger row__b-margin-until-medium">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XnC3sBJRwv0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div> </div>
<div class="row__medium-4 row__medium-4--larger row__b-margin-until-medium"> <div class="row row--gutters">
<div class="generic-content-container"> <div class="row__medium-8 row__medium-8--smaller">
<h3>We started the co-op in the summer of 2019...</h3> <div class="video-container">
<p>...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.<p> <iframe class="content--video--right" width="560" height="315" src="https://www.youtube-nocookie.com/embed/XnC3sBJRwv0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Duis aute irure dolor in <strong>reprehenderit in</strong> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidata non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo incididunt ut labore et dolore magna aliqua.</p> </div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum velit esse cillum <strong>dolore eu fugiat.</strong></p> </div>
<div class="row__medium-4 row__medium-4--larger">
<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="page-section--arrow-down"></div>
</div> </div>
</div> </div>
</div> </div>
@ -89,6 +92,23 @@
<!-- HOW IT WORKS --> <!-- HOW IT WORKS -->
<div id="how-it-works" class="page-section page-section--darkGreen">
<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>
</div>
<div id="how-it-works-2" class="page-section page-section--lightGreen">
<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>
</div>
<!-- AGENDA --> <!-- AGENDA -->

131
app/temp/styles/style.css
View File

@ -494,6 +494,11 @@ img {
padding: .75rem 1.2rem; padding: .75rem 1.2rem;
display: inline-block; display: inline-block;
border-radius: 30px; } border-radius: 30px; }
.btn--medium {
margin-bottom: 1.5rem; }
@media (min-width: 530px) {
.btn--medium {
font-size: 1.1rem; } }
.btn--large { .btn--large {
padding: 1.1rem 1.9rem; } padding: 1.1rem 1.9rem; }
@media (min-width: 530px) { @media (min-width: 530px) {
@ -564,25 +569,76 @@ img {
max-width: 976px; } max-width: 976px; }
.page-section { .page-section {
padding: 1.2rem 0; } padding: 1.2rem 0;
position: relative; }
@media (min-width: 800px) { @media (min-width: 800px) {
.page-section { .page-section {
position: unset;
padding: 4.5rem 0; } } padding: 4.5rem 0; } }
.page-section--no-b-padding-until-medium { .page-section--b-margin {
padding-bottom: 0; } margin-bottom: 70px; }
@media (min-width: 800px) { @media (min-width: 800px) {
.page-section--no-b-padding-until-medium { .page-section--b-margin {
padding-bottom: 4.5rem; } } margin-bottom: -140px; } }
.page-section--no-b-padding-until-large { .page-section--red {
padding-bottom: 0; } background-color: #FF3D04;
@media (min-width: 800px) {
.page-section--no-b-padding-until-large {
padding-bottom: 4.5rem; } }
.page-section--blue {
background-color: blue;
color: #fff; } color: #fff; }
.page-section--testimonials { .page-section--darkGreen {
background: #e0e6ef; } background-color: #6F9C3D;
color: #fff; }
.page-section--lightGreen {
background-color: #A5C90F;
color: #fff; }
.page-section--arrow-down {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 85px solid #FF3D04;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%); }
@media (min-width: 800px) {
.page-section--arrow-down {
position: relative;
top: 70px;
margin: auto;
left: 0;
transform: translateX(0%); } }
.headline {
margin: auto; }
.headline--s-width {
max-width: 500px; }
@media (min-width: 800px) {
.headline--s-width {
max-width: 1000px; } }
.headline__title {
font-weight: 500;
font-size: 1.7rem; }
@media (min-width: 800px) {
.headline__title {
font-size: 2.1rem; } }
.headline__subtitle {
font-weight: 300;
font-size: 1.4rem; }
@media (min-width: 800px) {
.headline__subtitle {
font-size: 1.8rem; } }
.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 { .row {
/* Begin Equal Height Rules */ } /* Begin Equal Height Rules */ }
@ -599,21 +655,21 @@ img {
.row--gutters-small { .row--gutters-small {
margin-right: -45px; } margin-right: -45px; }
.row--gutters > div { .row--gutters > div {
padding-right: 65px; } padding-right: 60px; }
.row--gutters-large > div { .row--gutters-large > div {
padding-right: 100px; } padding-right: 100px; }
.row--gutters-small > div { .row--gutters-small > div {
padding-right: 45px; } padding-right: 45px; }
.row__b-margin-until-medium { .row__b-margin-until-medium {
margin-bottom: 1rem; } margin-bottom: 1rem; }
@media (min-width: 800px) { @media (min-width: 1200px) {
.row__b-margin-until-medium { .row__b-margin-until-medium {
margin-bottom: 0rem; } margin-bottom: 0rem; }
.row__medium-4 { .row__medium-4 {
float: left; float: left;
width: 33.33%; } width: 33.33%; }
.row__medium-4--larger { .row__medium-4--larger {
width: 37%; } width: 27%; }
.row__medium-6 { .row__medium-6 {
float: left; float: left;
width: 50%; } width: 50%; }
@ -635,15 +691,50 @@ img {
float: none; float: none;
display: flex; } display: flex; }
.generic-content-container--t-b-margin {
margin-top: 5rem;
margin-bottom: 70px; }
@media (min-width: 1200px) {
.generic-content-container--t-b-margin {
margin-top: 7rem;
margin-bottom: 0px; } }
.generic-content-container--t-center {
text-align: center; }
.generic-content-container p { .generic-content-container p {
font-weight: 300; font-weight: 300;
line-height: 1.65; line-height: 1.65;
margin: 0 0 1.8rem 0; } margin: 0;
@media (min-width: 530px) { font-size: 1.2rem; }
@media (min-width: 800px) {
.generic-content-container p { .generic-content-container p {
font-size: 1.125rem; } } margin: 0 0 1.8rem 0;
font-size: 1.4rem; } }
.generic-content-container p a { .generic-content-container p a {
font-weight: 700; } font-weight: 700; }
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
box-shadow: -3px 3px 10px #000000ba;
margin-bottom: 15px;
margin-right: -18px;
margin-left: -18px; }
@media (min-width: 1200px) {
.video-container {
margin-right: 0px;
margin-left: 0px; } }
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

2
app/temp/styles/style.css.map
View File

File diff suppressed because one or more lines are too long