mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2024-12-24 12:25:23 +00:00
about first part
This commit is contained in:
Tancre
parent
12c2dfab65
commit
e9b2412f50
BIN
app/assets/media/images/foodcoop.png
Normal file
BIN
app/assets/media/images/foodcoop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -1,6 +1,10 @@
|
||||
.headline{
|
||||
margin:auto;
|
||||
|
||||
&--l-margin{
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
&--s-width {
|
||||
max-width: 500px;
|
||||
|
||||
|
||||
7
app/assets/scss/modules/_icon.scss
Normal file
7
app/assets/scss/modules/_icon.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.icon{
|
||||
|
||||
&--foodcoop{
|
||||
width: 255px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
@ -61,9 +61,17 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@include atSmall{
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
@include atMedium{
|
||||
position: relative;
|
||||
top: 70px;
|
||||
top: 20px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%);
|
||||
|
||||
@ -40,6 +40,11 @@
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
&__medium-3--larger {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&__medium-4 {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
@ -63,6 +68,11 @@
|
||||
width: 63%;
|
||||
}
|
||||
|
||||
&__medium-9--smaller {
|
||||
float: right;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Begin Equal Height Rules */
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
.video-container {
|
||||
position:relative;
|
||||
padding-bottom:56.25%;
|
||||
padding-top:30px;
|
||||
padding-bottom:61.15%;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
box-shadow: -3px 3px 10px #000000ba;
|
||||
margin-bottom: 15px;
|
||||
margin-right: -18px;
|
||||
margin-left: -18px;
|
||||
|
||||
@include atSmall{
|
||||
padding-bottom:60%;
|
||||
}
|
||||
|
||||
@include atMedium{
|
||||
padding-bottom:59%;
|
||||
}
|
||||
|
||||
|
||||
@include atLarge{
|
||||
padding-bottom:56.25%;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container iframe, .video-container object, .video-container embed {
|
||||
.video-container video{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
|
||||
@ -9,4 +9,8 @@
|
||||
&--medium{
|
||||
max-width: 976px;
|
||||
}
|
||||
|
||||
&--t-margins{
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
@ -13,4 +13,5 @@
|
||||
@import './modules/_rows';
|
||||
@import './modules/_generic-content-container';
|
||||
@import './modules/_video-container';
|
||||
@import './modules/_icon';
|
||||
|
||||
|
||||
@ -76,7 +76,10 @@
|
||||
<div class="row row--gutters">
|
||||
<div class="row__medium-8 row__medium-8--smaller">
|
||||
<div class="video-container">
|
||||
<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>
|
||||
<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 row__medium-4--larger">
|
||||
@ -93,20 +96,23 @@
|
||||
|
||||
<!-- 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 class="wrapper wrapper--t-margins">
|
||||
<div class="row">
|
||||
<div class="row__medium-9 row__medium-9--smaller">
|
||||
<div class="headline headline--l-margin">
|
||||
<h2 class="headline__title ">What is a foodcoop?</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 class="row__medium-3 row__medium-3--larger">
|
||||
<img class="icon icon--foodcoop" src="./assets/media/images/foodcoop.png">
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
@ -567,6 +567,8 @@ img {
|
||||
margin-right: auto; }
|
||||
.wrapper--medium {
|
||||
max-width: 976px; }
|
||||
.wrapper--t-margins {
|
||||
margin-top: 100px; }
|
||||
|
||||
.page-section {
|
||||
padding: 1.2rem 0;
|
||||
@ -599,16 +601,25 @@ img {
|
||||
bottom: -60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); }
|
||||
@media (min-width: 530px) {
|
||||
.page-section--arrow-down {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%); } }
|
||||
@media (min-width: 800px) {
|
||||
.page-section--arrow-down {
|
||||
position: relative;
|
||||
top: 70px;
|
||||
top: 20px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%); } }
|
||||
|
||||
.headline {
|
||||
margin: auto; }
|
||||
.headline--l-margin {
|
||||
margin-left: 55px; }
|
||||
.headline--s-width {
|
||||
max-width: 500px; }
|
||||
@media (min-width: 800px) {
|
||||
@ -665,6 +676,9 @@ img {
|
||||
@media (min-width: 1200px) {
|
||||
.row__b-margin-until-medium {
|
||||
margin-bottom: 0rem; }
|
||||
.row__medium-3--larger {
|
||||
float: left;
|
||||
width: 30%; }
|
||||
.row__medium-4 {
|
||||
float: left;
|
||||
width: 33.33%; }
|
||||
@ -677,7 +691,10 @@ img {
|
||||
float: right;
|
||||
width: 66.66%; }
|
||||
.row__medium-8--smaller {
|
||||
width: 63%; } }
|
||||
width: 63%; }
|
||||
.row__medium-9--smaller {
|
||||
float: right;
|
||||
width: 70%; } }
|
||||
@media (min-width: 800px) {
|
||||
.flexbox .row--equal-height-at-medium {
|
||||
display: flex; } }
|
||||
@ -717,24 +734,33 @@ img {
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 61.15%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: -3px 3px 10px #000000ba;
|
||||
margin-bottom: 15px;
|
||||
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 iframe, .video-container object, .video-container embed {
|
||||
.video-container video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.icon--foodcoop {
|
||||
width: 255px;
|
||||
margin-left: 60px; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user