Merge branch 'about'
This commit is contained in:
Tancre
commit
12c2dfab65
|
|
@ -0,0 +1,5 @@
|
|||
$myGreen: #4BC90F;
|
||||
$myLightGreen: #A5C90F;
|
||||
$myDarkGreen: #6F9C3D;
|
||||
$myOrange: #FF9F2F;
|
||||
$myRed: #FF3D04;
|
||||
|
|
@ -6,6 +6,14 @@
|
|||
display: inline-block;
|
||||
border-radius: 30px;
|
||||
|
||||
&--medium {
|
||||
margin-bottom:1.5rem;
|
||||
|
||||
@include atSmall(){
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: 1.1rem 1.9rem;
|
||||
|
||||
|
|
@ -13,6 +21,4 @@
|
|||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
.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 {
|
||||
font-weight: 300;
|
||||
line-height: 1.65;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
|
||||
@include atMedium{
|
||||
margin: 0 0 1.8rem 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
p a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.large-hero {
|
||||
border-bottom: 10px solid white;
|
||||
border-bottom: 10px solid orange;
|
||||
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
.page-section{
|
||||
padding: 1.2rem 0;
|
||||
position: relative;
|
||||
|
||||
|
||||
@include atMedium(){
|
||||
position: unset;
|
||||
padding: 4.5rem 0;
|
||||
}
|
||||
|
||||
|
||||
// &--no-b-padding-until-medium{
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
&--red{
|
||||
background-color: $myRed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--darkGreen{
|
||||
background-color: $myDarkGreen;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--lightGreen{
|
||||
background-color: $myLightGreen;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--arrow-down{
|
||||
width: 0;
|
||||
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;
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
.row{
|
||||
|
||||
@include clearfix();
|
||||
|
||||
&--t-padding{
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
&--gutters {
|
||||
margin-right: -65px;
|
||||
}
|
||||
|
||||
&--gutters-large {
|
||||
margin-right: -100px;
|
||||
}
|
||||
|
||||
&--gutters-small {
|
||||
margin-right: -45px;
|
||||
}
|
||||
|
||||
&--gutters > div {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
&--gutters-large > div {
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
&--gutters-small > div {
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
&__b-margin-until-medium{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include atLarge(){
|
||||
|
||||
&__b-margin-until-medium{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
&__medium-4 {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
&__medium-4--larger{
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
&__medium-6 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&__medium-8 {
|
||||
float: right;
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
&__medium-8--smaller{
|
||||
width: 63%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Begin Equal Height Rules */
|
||||
.flexbox &--equal-height-at-medium {
|
||||
|
||||
@include atMedium(){
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& > div {
|
||||
float: none;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.flexbox &--equal-height-at-large {
|
||||
|
||||
@include atMedium(){
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& > div {
|
||||
float: none;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -5,8 +5,12 @@
|
|||
@import './base/mixins';
|
||||
@import './modules/site-header';
|
||||
@import './modules/primary-nav';
|
||||
@import './modules/wrapper';
|
||||
@import './modules/large-hero';
|
||||
@import './modules/btn';
|
||||
|
||||
@import './modules/large-hero';
|
||||
@import './modules/wrapper';
|
||||
@import './modules/_page-section';
|
||||
@import './modules/_headline';
|
||||
@import './modules/_rows';
|
||||
@import './modules/_generic-content-container';
|
||||
@import './modules/_video-container';
|
||||
|
||||
|
|
|
|||
|
|
@ -61,29 +61,54 @@
|
|||
<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 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" >
|
||||
<h2>This section talks about us</h2>
|
||||
<h3>And about our food</h3>
|
||||
<img src="#" alt="A cool image">
|
||||
<div>
|
||||
<img src="#" alt="Another cool image">
|
||||
<div>
|
||||
<h2>We love to eat good food</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, < href="#">quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p>
|
||||
<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>
|
||||
<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 id="about-us" class="page-section page-section--red page-section--b-margin">
|
||||
<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 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>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -487,18 +487,26 @@ img {
|
|||
.primary-nav a.is-current-link {
|
||||
color: #fabb69; } }
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
max-width: 1300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
.wrapper--medium {
|
||||
max-width: 976px; }
|
||||
.btn {
|
||||
background-color: #00ab00;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: .75rem 1.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 30px; }
|
||||
.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 white;
|
||||
border-bottom: 10px solid orange;
|
||||
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||
position: relative; }
|
||||
.large-hero__image {
|
||||
|
|
@ -550,17 +558,183 @@ img {
|
|||
.large-hero__description {
|
||||
font-size: 1.875rem; } }
|
||||
|
||||
.btn {
|
||||
background-color: #00ab00;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: .75rem 1.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 30px; }
|
||||
.btn--large {
|
||||
padding: 1.1rem 1.9rem; }
|
||||
@media (min-width: 530px) {
|
||||
.btn--large {
|
||||
font-size: 1.25rem; } }
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
max-width: 1300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
.wrapper--medium {
|
||||
max-width: 976px; }
|
||||
|
||||
.page-section {
|
||||
padding: 1.2rem 0;
|
||||
position: relative; }
|
||||
@media (min-width: 800px) {
|
||||
.page-section {
|
||||
position: unset;
|
||||
padding: 4.5rem 0; } }
|
||||
.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; }
|
||||
.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 {
|
||||
/* Begin Equal Height Rules */ }
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table; }
|
||||
.row--t-padding {
|
||||
padding-top: 80px; }
|
||||
.row--gutters {
|
||||
margin-right: -65px; }
|
||||
.row--gutters-large {
|
||||
margin-right: -100px; }
|
||||
.row--gutters-small {
|
||||
margin-right: -45px; }
|
||||
.row--gutters > div {
|
||||
padding-right: 60px; }
|
||||
.row--gutters-large > div {
|
||||
padding-right: 100px; }
|
||||
.row--gutters-small > div {
|
||||
padding-right: 45px; }
|
||||
.row__b-margin-until-medium {
|
||||
margin-bottom: 1rem; }
|
||||
@media (min-width: 1200px) {
|
||||
.row__b-margin-until-medium {
|
||||
margin-bottom: 0rem; }
|
||||
.row__medium-4 {
|
||||
float: left;
|
||||
width: 33.33%; }
|
||||
.row__medium-4--larger {
|
||||
width: 27%; }
|
||||
.row__medium-6 {
|
||||
float: left;
|
||||
width: 50%; }
|
||||
.row__medium-8 {
|
||||
float: right;
|
||||
width: 66.66%; }
|
||||
.row__medium-8--smaller {
|
||||
width: 63%; } }
|
||||
@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: 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 {
|
||||
font-weight: 300;
|
||||
line-height: 1.65;
|
||||
margin: 0;
|
||||
font-size: 1.2rem; }
|
||||
@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: 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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 9.9 MiB |
Loading…
Reference in New Issue