mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2024-12-24 12:25:23 +00:00
hot-it-works almost finished (error with images)
This commit is contained in:
Tancre
parent
a4e97c6bcf
commit
af96ccbf7e
BIN
app/assets/media/images/boxes_small_cropped.jpg
Normal file
BIN
app/assets/media/images/boxes_small_cropped.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
BIN
app/assets/media/images/veg_medium_cropped.png
Normal file
BIN
app/assets/media/images/veg_medium_cropped.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
app/assets/media/images/veg_small_cropped.png
Normal file
BIN
app/assets/media/images/veg_small_cropped.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 988 KiB |
85
app/assets/scss/modules/_arrow.scss
Normal file
85
app/assets/scss/modules/_arrow.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.arrow{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 70px solid transparent;
|
||||
border-right: 70px solid transparent;
|
||||
|
||||
&--about{
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
|
||||
@include atMedium{
|
||||
position: relative;
|
||||
bottom: -70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@include atLarge{
|
||||
position: relative;
|
||||
bottom: -70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&--how-it-works-1{
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
|
||||
@include atMedium{
|
||||
position: relative;
|
||||
bottom: -50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@include atLarge{
|
||||
position: relative;
|
||||
bottom: -50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&--how-it-works-2{
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
|
||||
@include atMedium{
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@include atLarge{
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&--red{
|
||||
border-top: 85px solid $myRed;
|
||||
}
|
||||
|
||||
&--darkGreen{
|
||||
border-top: 85px solid $myDarkGreen;
|
||||
}
|
||||
|
||||
&--lightGreen{
|
||||
border-top: 85px solid $myLightGreen;
|
||||
}
|
||||
|
||||
}
|
||||
@ -6,8 +6,11 @@
|
||||
}
|
||||
|
||||
&--lt-margin{
|
||||
margin-left: 55px;
|
||||
margin-top: -5px;
|
||||
|
||||
@include atLarge{
|
||||
margin-left: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
&--s-width {
|
||||
|
||||
@ -5,17 +5,42 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
&--atSmall-centered{
|
||||
text-align: center;
|
||||
|
||||
@include atLarge{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&--atSmall-t-margin{
|
||||
margin-top: 70px !important;
|
||||
|
||||
@include atSmall{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@include atLarge{
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&--centered{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--t-margin{
|
||||
margin-top: -30px;
|
||||
|
||||
@include atSmall{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@include atMedium{
|
||||
margin-top: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
&__last-section{
|
||||
@ -47,9 +72,25 @@
|
||||
|
||||
}
|
||||
|
||||
&__img{
|
||||
display: none;
|
||||
|
||||
@include atLarge{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon--1{
|
||||
width: 225px;
|
||||
margin-left: 60px;
|
||||
width: 150px;
|
||||
|
||||
@include atMedium{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@include atLarge{
|
||||
width: 225px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon--2{
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
.page-section{
|
||||
position: relative;
|
||||
|
||||
&--t-margin-external{
|
||||
margin-top: -70px;
|
||||
}
|
||||
|
||||
&--b-margin-external{
|
||||
|
||||
@include atMedium(){
|
||||
margin-bottom: -140px;
|
||||
}
|
||||
}
|
||||
|
||||
&--tb-padding{
|
||||
padding: 1.2rem 0;
|
||||
|
||||
@ -52,37 +63,6 @@
|
||||
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 atSmall{
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
@include atMedium{
|
||||
position: relative;
|
||||
top: 20px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// &--testimonials{
|
||||
// background: #e0e6ef;
|
||||
|
||||
|
||||
@ -10,11 +10,16 @@
|
||||
max-width: 976px;
|
||||
}
|
||||
|
||||
&--centered{
|
||||
text-align: center;
|
||||
|
||||
@include atLarge{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&--small{
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
&--t-margins{
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
@ -14,5 +14,6 @@
|
||||
@import './modules/_generic-content-container';
|
||||
@import './modules/_video-container';
|
||||
@import './modules/_how-it-works.scss';
|
||||
@import './modules/_arrow.scss';
|
||||
|
||||
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
<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 class="arrow arrow--about arrow--red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,29 +95,31 @@
|
||||
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding">
|
||||
<div class="wrapper wrapper--t-margins">
|
||||
<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 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 page-section--b-padding-small">
|
||||
<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 class="wrapper">
|
||||
|
||||
<div class="how-it-works">
|
||||
<div class="how-it-works how-it-works--atSmall-centered">
|
||||
<div class="row row--gutters">
|
||||
<div class="row__medium-6">
|
||||
<img src="./assets/media/images/pickup_day_short.png">
|
||||
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
|
||||
</div>
|
||||
<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>
|
||||
@ -126,22 +128,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="how-it-works">
|
||||
<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"><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">
|
||||
<img src="./assets/media/images/pickup_day_short.png">
|
||||
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="how-it-works">
|
||||
<div class="how-it-works how-it-works--atSmall-centered">
|
||||
<div class="row row--gutters">
|
||||
<div class="row__medium-6">
|
||||
<img src="./assets/media/images/pickup_day_short.png">
|
||||
<img class="how-it-works__img" src="./assets/media/images/pickup_day_short.png">
|
||||
</div>
|
||||
<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>
|
||||
@ -149,6 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -157,14 +160,14 @@
|
||||
|
||||
<div id="how-it-works-3" class="page-section">
|
||||
<picture>
|
||||
<source srcset="./assets/media/images/veg_large_cropped.png 1920w" media="(min-width: 1380px)">
|
||||
<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
|
||||
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
|
||||
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||||
<source srcset="./assets/media/images/veg_large_cropped.png 1920w" media="(min-width: 1580px)">
|
||||
<source srcset="./assets/media/images/veg_medium_cropped.png 1380w" media="(min-width: 1300px)">
|
||||
<source srcset="./assets/media/images/veg_small_cropped.png 990w" media="(min-width: 1100px)">
|
||||
<img srcset="./assets/media/images/veg_smaller.png 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||||
</picture>
|
||||
|
||||
<div class="how-it-works">
|
||||
<div class="how-it-works--centered how-it-works--t-margin">
|
||||
<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">
|
||||
|
||||
@ -582,13 +582,21 @@ img {
|
||||
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; }
|
||||
.wrapper--t-margins {
|
||||
margin-top: 100px; }
|
||||
|
||||
.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) {
|
||||
@ -621,38 +629,16 @@ img {
|
||||
.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: 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: 20px;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
transform: translateX(0%); } }
|
||||
|
||||
.headline {
|
||||
margin: auto; }
|
||||
.headline strong {
|
||||
font-weight: 800; }
|
||||
.headline--lt-margin {
|
||||
margin-left: 55px;
|
||||
margin-top: -5px; }
|
||||
@media (min-width: 1200px) {
|
||||
.headline--lt-margin {
|
||||
margin-left: 55px; } }
|
||||
.headline--s-width {
|
||||
max-width: 500px; }
|
||||
@media (min-width: 800px) {
|
||||
@ -777,15 +763,30 @@ img {
|
||||
margin: 50px 0px; }
|
||||
.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: 70px !important; }
|
||||
@media (min-width: 530px) {
|
||||
.how-it-works--atSmall-t-margin {
|
||||
margin-top: 20px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.how-it-works--atSmall-t-margin {
|
||||
margin-top: 100px; } }
|
||||
.how-it-works--centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center; }
|
||||
.how-it-works--t-margin {
|
||||
margin-top: -30px; }
|
||||
@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: 100px 0px 50px 0px;
|
||||
background-color: rgba(255, 255, 255, 0.9); }
|
||||
@ -806,9 +807,20 @@ img {
|
||||
.how-it-works__title {
|
||||
margin-top: 10px;
|
||||
font-size: 2.1rem; } }
|
||||
.how-it-works__img {
|
||||
display: none; }
|
||||
@media (min-width: 1200px) {
|
||||
.how-it-works__img {
|
||||
display: inline-block; } }
|
||||
.how-it-works__icon--1 {
|
||||
width: 225px;
|
||||
margin-left: 60px; }
|
||||
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: 130px;
|
||||
margin-right: .8rem;
|
||||
@ -822,4 +834,70 @@ img {
|
||||
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: -70px;
|
||||
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: -50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); } }
|
||||
@media (min-width: 1200px) {
|
||||
.arrow--how-it-works-1 {
|
||||
position: relative;
|
||||
bottom: -50px;
|
||||
left: 50%;
|
||||
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; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user