about section finished
This commit is contained in:
Tancre
parent
49cbef62df
commit
7a776a7295
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,12 +1,28 @@
|
|||
.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 0 1.8rem 0;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
|
||||
@include atSmall{
|
||||
font-size: 1.125rem;
|
||||
@include atMedium{
|
||||
margin: 0 0 1.8rem 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,42 +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-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;
|
||||
}
|
||||
}
|
||||
|
||||
&--no-b-padding-until-large{
|
||||
padding-bottom: 0;
|
||||
|
||||
@include atMedium(){
|
||||
padding-bottom: 4.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&--blue{
|
||||
background-color: blue;
|
||||
&--red{
|
||||
background-color: $myRed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--testimonials{
|
||||
background: #e0e6ef;
|
||||
|
||||
// @include atMedium(){
|
||||
|
||||
// &.lazyloaded {
|
||||
// background: url('../../assets/images/testimonials-bg.jpg') top center no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
// }
|
||||
&--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;
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
&--gutters > div {
|
||||
padding-right: 65px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
&--gutters-large > div {
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
@include atLarge(){
|
||||
|
||||
&__b-margin-until-medium{
|
||||
margin-bottom: 0rem;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
&__medium-4--larger{
|
||||
width: 37%;
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
&__medium-6 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -9,6 +9,8 @@
|
|||
@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,26 +61,29 @@
|
|||
<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" class="page-section">
|
||||
<div id="about-us" class="page-section page-section--red page-section--b-margin">
|
||||
<div class="wrapper">
|
||||
<h2 class="page-section__title">About us</h2>
|
||||
<h3 class="page-section__title">And about our food</h3>
|
||||
<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--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 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 row__b-margin-until-medium">
|
||||
<div class="generic-content-container">
|
||||
<h3>We started the co-op in the summer of 2019...</h3>
|
||||
<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>
|
||||
<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 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>
|
||||
|
|
@ -89,6 +92,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>
|
||||
</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 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -494,6 +494,11 @@ img {
|
|||
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) {
|
||||
|
|
@ -564,25 +569,76 @@ img {
|
|||
max-width: 976px; }
|
||||
|
||||
.page-section {
|
||||
padding: 1.2rem 0; }
|
||||
padding: 1.2rem 0;
|
||||
position: relative; }
|
||||
@media (min-width: 800px) {
|
||||
.page-section {
|
||||
position: unset;
|
||||
padding: 4.5rem 0; } }
|
||||
.page-section--no-b-padding-until-medium {
|
||||
padding-bottom: 0; }
|
||||
.page-section--b-margin {
|
||||
margin-bottom: 70px; }
|
||||
@media (min-width: 800px) {
|
||||
.page-section--no-b-padding-until-medium {
|
||||
padding-bottom: 4.5rem; } }
|
||||
.page-section--no-b-padding-until-large {
|
||||
padding-bottom: 0; }
|
||||
@media (min-width: 800px) {
|
||||
.page-section--no-b-padding-until-large {
|
||||
padding-bottom: 4.5rem; } }
|
||||
.page-section--blue {
|
||||
background-color: blue;
|
||||
.page-section--b-margin {
|
||||
margin-bottom: -140px; } }
|
||||
.page-section--red {
|
||||
background-color: #FF3D04;
|
||||
color: #fff; }
|
||||
.page-section--testimonials {
|
||||
background: #e0e6ef; }
|
||||
.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 */ }
|
||||
|
|
@ -599,21 +655,21 @@ img {
|
|||
.row--gutters-small {
|
||||
margin-right: -45px; }
|
||||
.row--gutters > div {
|
||||
padding-right: 65px; }
|
||||
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: 800px) {
|
||||
@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: 37%; }
|
||||
width: 27%; }
|
||||
.row__medium-6 {
|
||||
float: left;
|
||||
width: 50%; }
|
||||
|
|
@ -635,15 +691,50 @@ img {
|
|||
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 0 1.8rem 0; }
|
||||
@media (min-width: 530px) {
|
||||
margin: 0;
|
||||
font-size: 1.2rem; }
|
||||
@media (min-width: 800px) {
|
||||
.generic-content-container p {
|
||||
font-size: 1.125rem; } }
|
||||
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
Loading…
Reference in New Issue