diff --git a/app/assets/media/images/boxes_small.jpg b/app/assets/media/images/boxes_small.jpg deleted file mode 100644 index 8775aea..0000000 Binary files a/app/assets/media/images/boxes_small.jpg and /dev/null differ diff --git a/app/assets/media/images/boxes_small_cropped.jpg b/app/assets/media/images/boxes_small_cropped.jpg deleted file mode 100644 index 0127b02..0000000 Binary files a/app/assets/media/images/boxes_small_cropped.jpg and /dev/null differ diff --git a/app/assets/media/images/foodcoop.png b/app/assets/media/images/foodcoop.png deleted file mode 100644 index 91734df..0000000 Binary files a/app/assets/media/images/foodcoop.png and /dev/null differ diff --git a/app/assets/media/images/foodcoop_large.png b/app/assets/media/images/foodcoop_large.png new file mode 100644 index 0000000..0443c64 Binary files /dev/null and b/app/assets/media/images/foodcoop_large.png differ diff --git a/app/assets/media/images/logo.jpg b/app/assets/media/images/logo.jpg deleted file mode 100644 index 341a260..0000000 Binary files a/app/assets/media/images/logo.jpg and /dev/null differ diff --git a/app/assets/media/images/member_large.JPG b/app/assets/media/images/member_large.JPG new file mode 100644 index 0000000..9b190cc Binary files /dev/null and b/app/assets/media/images/member_large.JPG differ diff --git a/app/assets/media/images/member_medium.JPG b/app/assets/media/images/member_medium.JPG new file mode 100644 index 0000000..2ad9594 Binary files /dev/null and b/app/assets/media/images/member_medium.JPG differ diff --git a/app/assets/media/images/member_small.JPG b/app/assets/media/images/member_small.JPG new file mode 100644 index 0000000..bab1769 Binary files /dev/null and b/app/assets/media/images/member_small.JPG differ diff --git a/app/assets/media/images/order_food_large.JPG b/app/assets/media/images/order_food_large.JPG new file mode 100644 index 0000000..08ddb89 Binary files /dev/null and b/app/assets/media/images/order_food_large.JPG differ diff --git a/app/assets/media/images/order_food_medium.JPG b/app/assets/media/images/order_food_medium.JPG new file mode 100644 index 0000000..144beb4 Binary files /dev/null and b/app/assets/media/images/order_food_medium.JPG differ diff --git a/app/assets/media/images/order_food_small.JPG b/app/assets/media/images/order_food_small.JPG new file mode 100644 index 0000000..66299ef Binary files /dev/null and b/app/assets/media/images/order_food_small.JPG differ diff --git a/app/assets/media/images/our_vegetables_large.png b/app/assets/media/images/our_vegetables_large.png new file mode 100644 index 0000000..0c9d7c1 Binary files /dev/null and b/app/assets/media/images/our_vegetables_large.png differ diff --git a/app/assets/media/images/our_vegetables_medium.png b/app/assets/media/images/our_vegetables_medium.png new file mode 100644 index 0000000..043979e Binary files /dev/null and b/app/assets/media/images/our_vegetables_medium.png differ diff --git a/app/assets/media/images/our_vegetables_small.png b/app/assets/media/images/our_vegetables_small.png new file mode 100644 index 0000000..a287fde Binary files /dev/null and b/app/assets/media/images/our_vegetables_small.png differ diff --git a/app/assets/media/images/our_vegetables_smaller.png b/app/assets/media/images/our_vegetables_smaller.png new file mode 100644 index 0000000..bd7b121 Binary files /dev/null and b/app/assets/media/images/our_vegetables_smaller.png differ diff --git a/app/assets/media/images/pickup_day.png b/app/assets/media/images/pickup_day.png deleted file mode 100644 index 54cde96..0000000 Binary files a/app/assets/media/images/pickup_day.png and /dev/null differ diff --git a/app/assets/media/images/pickup_day2.jpg b/app/assets/media/images/pickup_day2.jpg deleted file mode 100644 index 628873c..0000000 Binary files a/app/assets/media/images/pickup_day2.jpg and /dev/null differ diff --git a/app/assets/media/images/pickup_day_extra_smaller.jpg b/app/assets/media/images/pickup_day_extra_smaller.jpg new file mode 100644 index 0000000..5a213e7 Binary files /dev/null and b/app/assets/media/images/pickup_day_extra_smaller.jpg differ diff --git a/app/assets/media/images/pickup_day_large.jpg b/app/assets/media/images/pickup_day_large.jpg new file mode 100644 index 0000000..2b42bb9 Binary files /dev/null and b/app/assets/media/images/pickup_day_large.jpg differ diff --git a/app/assets/media/images/pickup_day_medium.jpg b/app/assets/media/images/pickup_day_medium.jpg new file mode 100644 index 0000000..9c33b2f Binary files /dev/null and b/app/assets/media/images/pickup_day_medium.jpg differ diff --git a/app/assets/media/images/pickup_day_short.png b/app/assets/media/images/pickup_day_short.png deleted file mode 100644 index bb6a7a4..0000000 Binary files a/app/assets/media/images/pickup_day_short.png and /dev/null differ diff --git a/app/assets/media/images/pickup_day_small.jpg b/app/assets/media/images/pickup_day_small.jpg new file mode 100644 index 0000000..b4ee91b Binary files /dev/null and b/app/assets/media/images/pickup_day_small.jpg differ diff --git a/app/assets/media/images/pickup_day_smaller.jpg b/app/assets/media/images/pickup_day_smaller.jpg new file mode 100644 index 0000000..c07955b Binary files /dev/null and b/app/assets/media/images/pickup_day_smaller.jpg differ diff --git a/app/assets/media/images/veg.png b/app/assets/media/images/veg.png deleted file mode 100644 index 6ef00e4..0000000 Binary files a/app/assets/media/images/veg.png and /dev/null differ diff --git a/app/assets/media/images/veg_large.png b/app/assets/media/images/veg_large.png deleted file mode 100644 index 1d73d12..0000000 Binary files a/app/assets/media/images/veg_large.png and /dev/null differ diff --git a/app/assets/media/images/veg_large_cropped.png b/app/assets/media/images/veg_large_cropped.png deleted file mode 100644 index b591b56..0000000 Binary files a/app/assets/media/images/veg_large_cropped.png and /dev/null differ diff --git a/app/assets/media/images/veg_medium.png b/app/assets/media/images/veg_medium.png deleted file mode 100644 index 7d7433d..0000000 Binary files a/app/assets/media/images/veg_medium.png and /dev/null differ diff --git a/app/assets/media/images/veg_medium_cropped.png b/app/assets/media/images/veg_medium_cropped.png deleted file mode 100644 index d7c3310..0000000 Binary files a/app/assets/media/images/veg_medium_cropped.png and /dev/null differ diff --git a/app/assets/media/images/veg_small.png b/app/assets/media/images/veg_small.png deleted file mode 100644 index 2dc9a4b..0000000 Binary files a/app/assets/media/images/veg_small.png and /dev/null differ diff --git a/app/assets/media/images/veg_small_cropped.png b/app/assets/media/images/veg_small_cropped.png deleted file mode 100644 index bc7ee37..0000000 Binary files a/app/assets/media/images/veg_small_cropped.png and /dev/null differ diff --git a/app/assets/media/images/veg_smaller.png b/app/assets/media/images/veg_smaller.png deleted file mode 100644 index 1adb977..0000000 Binary files a/app/assets/media/images/veg_smaller.png and /dev/null differ diff --git a/app/assets/media/images/workgroup_large.JPG b/app/assets/media/images/workgroup_large.JPG new file mode 100644 index 0000000..0eb6632 Binary files /dev/null and b/app/assets/media/images/workgroup_large.JPG differ diff --git a/app/assets/media/images/workgroup_medium.JPG b/app/assets/media/images/workgroup_medium.JPG new file mode 100644 index 0000000..7ed633f Binary files /dev/null and b/app/assets/media/images/workgroup_medium.JPG differ diff --git a/app/assets/media/images/workgroup_small.JPG b/app/assets/media/images/workgroup_small.JPG new file mode 100644 index 0000000..74a8435 Binary files /dev/null and b/app/assets/media/images/workgroup_small.JPG differ diff --git a/app/assets/scss/base/_global.scss b/app/assets/scss/base/_global.scss index 2fee0f1..f7a1205 100644 --- a/app/assets/scss/base/_global.scss +++ b/app/assets/scss/base/_global.scss @@ -3,6 +3,7 @@ } body { + position: relative; font-family: 'roboto', sans-serif; color: #333; } diff --git a/app/assets/scss/modules/_arrow.scss b/app/assets/scss/modules/_arrow.scss index 9e90305..8ed5203 100644 --- a/app/assets/scss/modules/_arrow.scss +++ b/app/assets/scss/modules/_arrow.scss @@ -13,7 +13,7 @@ @include atMedium{ position: relative; - bottom: -70px; + bottom: -40px; left: 50%; transform: translateX(-50%); } @@ -35,15 +35,15 @@ @include atMedium{ position: relative; - bottom: -50px; + bottom: -30px; left: 50%; transform: translateX(-50%); } @include atLarge{ position: relative; - bottom: -50px; - left: 50%; + bottom: -30px; + left: 70%; transform: translateX(-50%); } } diff --git a/app/assets/scss/modules/_btn.scss b/app/assets/scss/modules/_btn.scss index b0f1ed8..c1103ce 100644 --- a/app/assets/scss/modules/_btn.scss +++ b/app/assets/scss/modules/_btn.scss @@ -6,6 +6,10 @@ display: inline-block; border-radius: 30px; + &--l-margin{ + margin-left: 20px; + } + &--medium { margin-bottom:1.5rem; diff --git a/app/assets/scss/modules/_footer.scss b/app/assets/scss/modules/_footer.scss new file mode 100644 index 0000000..98218ba --- /dev/null +++ b/app/assets/scss/modules/_footer.scss @@ -0,0 +1,8 @@ +.footer{ + position: absolute; + bottom: -40px; + width: 100%; + background-color: $myRed; + color: white; + text-align: center; +} \ No newline at end of file diff --git a/app/assets/scss/modules/_generic-content-container.scss b/app/assets/scss/modules/_generic-content-container.scss index d2adb20..d1dc1a5 100644 --- a/app/assets/scss/modules/_generic-content-container.scss +++ b/app/assets/scss/modules/_generic-content-container.scss @@ -1,10 +1,11 @@ .generic-content-container{ &--t-b-margin{ - margin-top: 5rem; - margin-bottom: 70px; + margin-top: 4rem; + margin-bottom: 2.5rem; @include atLarge{ + margin-top: 5rem; margin-bottom: 0px; } } @@ -17,7 +18,7 @@ font-weight: 300; line-height: 1.25; margin: 0; - font-size: 1.2rem; + font-size: 1.1rem; @include atMedium{ margin: 0 0 1.8rem 0; diff --git a/app/assets/scss/modules/_headline.scss b/app/assets/scss/modules/_headline.scss index a512dd8..9a73246 100644 --- a/app/assets/scss/modules/_headline.scss +++ b/app/assets/scss/modules/_headline.scss @@ -24,7 +24,7 @@ &__title { font-weight: 400; - font-size: 1.7rem; + font-size: 1.6rem; @include atMedium(){ font-size: 2.1rem; @@ -33,7 +33,7 @@ &__subtitle { font-weight: 300; - font-size: 1.4rem; + font-size: 1.3rem; @include atMedium(){ font-size: 1.6rem; diff --git a/app/assets/scss/modules/_how-it-works.scss b/app/assets/scss/modules/_how-it-works.scss index 4624df2..a54e36f 100644 --- a/app/assets/scss/modules/_how-it-works.scss +++ b/app/assets/scss/modules/_how-it-works.scss @@ -1,5 +1,5 @@ .how-it-works{ - margin: 50px 0px; + margin-bottom: 2.5rem; strong { font-weight: 800; @@ -14,10 +14,10 @@ } &--atSmall-t-margin{ - margin-top: 70px !important; + margin-top: 6rem !important; - @include atSmall{ - margin-top: 20px; + @include atMedium{ + margin-top: 4rem !important; } @include atLarge{ @@ -44,8 +44,12 @@ } &__last-section{ - padding: 100px 0px 50px 0px; + padding: 3rem 0px 50px 0px; background-color: rgba(white,0.9); + + @include atLarge{ + padding: 100px 0px 50px 0px; + } } p{ @@ -72,11 +76,32 @@ } - &__img{ - display: none; + &__title-small{ + font-weight: 300; + font-size: 1.4rem; + margin-bottom: 45px; - @include atLarge{ + @include atMedium(){ + margin-top: 10px; + font-size: 2.1rem; + } + + } + + &__img{ + // display: none; + + // @include atLarge{ + // display: inline-block; + // } + + &--small-only{ display: inline-block; + margin: 10px 0px; + + @include atLarge{ + display: none; + } } } @@ -94,15 +119,24 @@ } &__icon--2{ - width: 130px; + width: 100px; margin-right: .8rem; - margin-bottom: -45px; + margin-bottom: -35px; } &__icon--3{ - width: 130px; + width: 100px; margin-right: .8rem; - margin-bottom: -35px; + margin-bottom: -30px; + margin-top: 1.2rem; + + @include atMedium{ + margin-top: 3.2rem; + } + + @include atLarge{ + margin-top: 0rem; + } } diff --git a/app/assets/scss/modules/_large-hero.scss b/app/assets/scss/modules/_large-hero.scss index f5a0ebc..71cb5e2 100644 --- a/app/assets/scss/modules/_large-hero.scss +++ b/app/assets/scss/modules/_large-hero.scss @@ -8,7 +8,7 @@ } &__text-content { - padding-top: 88px; + // padding-top: 88px; position: absolute; top: 50%; left: 0px; @@ -24,7 +24,7 @@ &__title { font-family: "CocogooseBold"; color: white; - font-size: 2.5rem; + font-size: 2.2rem; margin: 0; @include atSmall(){ @@ -41,7 +41,7 @@ // font-family: "CocogooseNormal"; font-weight: 400; color: white; - font-size: 1.4rem; + font-size: 1.3rem; margin: 0; @include atSmall(){ diff --git a/app/assets/scss/modules/_page-section.scss b/app/assets/scss/modules/_page-section.scss index aa5120d..2487e01 100644 --- a/app/assets/scss/modules/_page-section.scss +++ b/app/assets/scss/modules/_page-section.scss @@ -22,12 +22,21 @@ } &--t-padding{ - padding-top: 1.2rem; + padding-top: 5.2rem; @include atMedium(){ position: unset; padding-top: 4.5rem; } + + &-larger{ + padding-top: 5.2rem; + + @include atMedium(){ + position: unset; + padding-top: 6rem; + } + } } &--b-padding-small{ diff --git a/app/assets/scss/modules/_primary-nav.scss b/app/assets/scss/modules/_primary-nav.scss index fdbaabb..802d674 100644 --- a/app/assets/scss/modules/_primary-nav.scss +++ b/app/assets/scss/modules/_primary-nav.scss @@ -2,7 +2,7 @@ padding-top: 10px; @include atMedium(){ - padding: 31px 0px; + padding: 22px 0px; } &--pull-right{ @@ -22,6 +22,7 @@ list-style: none; display: inline-block; padding-right: 7px; + padding-top: 10px; @include atMedium(){ float: left; diff --git a/app/assets/scss/modules/_rows.scss b/app/assets/scss/modules/_rows.scss index bc2959d..5f9f3c8 100644 --- a/app/assets/scss/modules/_rows.scss +++ b/app/assets/scss/modules/_rows.scss @@ -2,6 +2,14 @@ @include clearfix(); + &--large-only{ + display: none; + + @include atLarge{ + display: inline-block; + } + } + &--gutters { margin-right: -60px; } diff --git a/app/assets/scss/modules/_site-header.scss b/app/assets/scss/modules/_site-header.scss index 24946b2..239c31e 100644 --- a/app/assets/scss/modules/_site-header.scss +++ b/app/assets/scss/modules/_site-header.scss @@ -23,19 +23,21 @@ } &__language{ - margin: 13px auto 5px auto; + position: absolute; + top: 10px; + left: -5px; border-radius: 15px; overflow: hidden; width: 25px; height: 25px; @include atMedium(){ + position: unset; margin: 40px 20px 0px 0px; float: right; } } - &__menu-icon{ width: 20px; height: 19px; @@ -108,14 +110,17 @@ z-index: -10; padding-top: 90px; text-align: center; + display: none; &--is-visible{ + display: block; transform: scale(1); opacity: 1; z-index: 1; } @include atMedium(){ + display: inline; opacity: 1; z-index: 1; padding-top: 0; @@ -125,7 +130,7 @@ &__logo{ position: absolute; - top: 0px; + top: -1px; padding: 5px 15px; left: 50%; transform-origin: 50% 0%; diff --git a/app/assets/scss/modules/_video-container.scss b/app/assets/scss/modules/_video-container.scss index 427860c..d6e3960 100644 --- a/app/assets/scss/modules/_video-container.scss +++ b/app/assets/scss/modules/_video-container.scss @@ -1,6 +1,6 @@ .video-container { position:relative; - padding-bottom:61.15%; + padding-bottom:63.15%; height:0; overflow:hidden; box-shadow: -3px 3px 10px #000000ba; diff --git a/app/assets/scss/style.scss b/app/assets/scss/style.scss index 1860f27..9c727cf 100644 --- a/app/assets/scss/style.scss +++ b/app/assets/scss/style.scss @@ -1,4 +1,4 @@ -@import './base/_normalize'; +@import './base/normalize'; @import './base/variables'; @import './base/fonts'; @import './base/global'; @@ -8,12 +8,12 @@ @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'; -@import './modules/_how-it-works.scss'; -@import './modules/_arrow.scss'; - +@import './modules/page-section'; +@import './modules/headline'; +@import './modules/rows'; +@import './modules/generic-content-container'; +@import './modules/video-container'; +@import './modules/how-it-works'; +@import './modules/arrow'; +@import './modules/footer'; diff --git a/app/index.html b/app/index.html index 124fe56..cd91ef0 100644 --- a/app/index.html +++ b/app/index.html @@ -19,22 +19,18 @@
-
-
Place your Order
-
Netherlands flag
-