bio bulke bende
+The organic autonomous foodcoop
of Rotterdam
+ Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, bio bulk bende is the first food co-op in Rotterdam.
+diff --git a/app/assets/js/App.js b/app/assets/js/App.js new file mode 100644 index 0000000..d78dea0 --- /dev/null +++ b/app/assets/js/App.js @@ -0,0 +1,3 @@ +import MobileMenu from './modules/MobileMenu'; + +var mobileMenu = new MobileMenu(); \ No newline at end of file diff --git a/app/assets/js/Vendor.js b/app/assets/js/Vendor.js new file mode 100644 index 0000000..d89b25c --- /dev/null +++ b/app/assets/js/Vendor.js @@ -0,0 +1 @@ +import '../temp/modernizr'; \ No newline at end of file diff --git a/app/assets/js/modules/MobileMenu.js b/app/assets/js/modules/MobileMenu.js new file mode 100644 index 0000000..0f94467 --- /dev/null +++ b/app/assets/js/modules/MobileMenu.js @@ -0,0 +1,26 @@ +import $ from 'jquery'; + +class MobileMenu{ + + constructor(){ + this.siteHeader = $(".site-header"); + this.menuIcon = $(".site-header__menu-icon"); + this.menuContent = $(".site-header__menu-content"); + this.siteHeaderLogo= $(".site-header__logo"); + this.events(); + } + + events(){ + this.menuIcon.click(this.toggleTheMenu.bind(this)); + } + + toggleTheMenu(){ + this.menuContent.toggleClass("site-header__menu-content--is-visible"); + this.siteHeader.toggleClass("site-header--is-expanded"); + this.menuIcon.toggleClass("site-header__menu-icon--close-x"); + this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg"); + + } +} + +export default MobileMenu; \ No newline at end of file diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 1.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 1.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 1.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 10.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 10.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 10.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 11.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 11.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 11.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 12.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 12.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 12.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 13.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 13.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 13.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 14.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 14.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 14.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 2.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 2.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 2.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 3.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 3.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 3.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 4.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 4.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 4.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 5.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 5.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 5.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 6.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 6.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 6.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 7.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 7.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 7.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 8.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 8.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 8.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 9.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 9.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 9.woff differ diff --git a/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT.woff b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT.woff new file mode 100644 index 0000000..2d86200 Binary files /dev/null and b/app/assets/media/fonts/bahnschrift/BAHNSCHRIFT.woff differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose Pro Family (CC BY-NC)License.pdf b/app/assets/media/fonts/cocogoose/Cocogoose Pro Family (CC BY-NC)License.pdf new file mode 100644 index 0000000..fecb5a8 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose Pro Family (CC BY-NC)License.pdf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf b/app/assets/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf new file mode 100644 index 0000000..f111fcc Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose Pro Light Italic-trial.ttf b/app/assets/media/fonts/cocogoose/Cocogoose Pro Light Italic-trial.ttf new file mode 100644 index 0000000..7225071 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose Pro Light Italic-trial.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose Pro Semilight Italic-trial.ttf b/app/assets/media/fonts/cocogoose/Cocogoose Pro Semilight Italic-trial.ttf new file mode 100644 index 0000000..8bdd056 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose Pro Semilight Italic-trial.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose Pro Thin Italic-trial.ttf b/app/assets/media/fonts/cocogoose/Cocogoose Pro Thin Italic-trial.ttf new file mode 100644 index 0000000..24e2dd7 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose Pro Thin Italic-trial.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose Pro UltraLight Italic-trial.ttf b/app/assets/media/fonts/cocogoose/Cocogoose Pro UltraLight Italic-trial.ttf new file mode 100644 index 0000000..6d095a0 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose Pro UltraLight Italic-trial.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose_bold.ttf b/app/assets/media/fonts/cocogoose/Cocogoose_bold.ttf new file mode 100644 index 0000000..d9d7dd9 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose_bold.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose_extraBold.ttf b/app/assets/media/fonts/cocogoose/Cocogoose_extraBold.ttf new file mode 100644 index 0000000..6d4bf8c Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose_extraBold.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose_extraLight.ttf b/app/assets/media/fonts/cocogoose/Cocogoose_extraLight.ttf new file mode 100644 index 0000000..01f4418 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose_extraLight.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose_light.ttf b/app/assets/media/fonts/cocogoose/Cocogoose_light.ttf new file mode 100644 index 0000000..4ac9644 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose_light.ttf differ diff --git a/app/assets/media/fonts/cocogoose/Cocogoose_medium.ttf b/app/assets/media/fonts/cocogoose/Cocogoose_medium.ttf new file mode 100644 index 0000000..1972aa2 Binary files /dev/null and b/app/assets/media/fonts/cocogoose/Cocogoose_medium.ttf differ diff --git a/app/assets/media/images/bbb_logo.png b/app/assets/media/images/bbb_logo.png new file mode 100644 index 0000000..c9bba6f Binary files /dev/null and b/app/assets/media/images/bbb_logo.png differ diff --git a/app/assets/media/images/bbb_logo_white.png b/app/assets/media/images/bbb_logo_white.png new file mode 100644 index 0000000..8d8d118 Binary files /dev/null and b/app/assets/media/images/bbb_logo_white.png differ diff --git a/app/assets/media/images/boxes_small.jpg b/app/assets/media/images/boxes_small.jpg new file mode 100644 index 0000000..8775aea Binary files /dev/null and b/app/assets/media/images/boxes_small.jpg differ diff --git a/app/assets/media/images/logo.jpg b/app/assets/media/images/logo.jpg new file mode 100644 index 0000000..341a260 Binary files /dev/null and b/app/assets/media/images/logo.jpg differ diff --git a/app/assets/media/images/netherlands_flag.gif b/app/assets/media/images/netherlands_flag.gif new file mode 100644 index 0000000..47c24f9 Binary files /dev/null and b/app/assets/media/images/netherlands_flag.gif differ diff --git a/app/assets/media/images/veg.png b/app/assets/media/images/veg.png new file mode 100644 index 0000000..6ef00e4 Binary files /dev/null and b/app/assets/media/images/veg.png differ diff --git a/app/assets/media/images/veg_large.png b/app/assets/media/images/veg_large.png new file mode 100644 index 0000000..1d73d12 Binary files /dev/null and b/app/assets/media/images/veg_large.png differ diff --git a/app/assets/media/images/veg_medium.png b/app/assets/media/images/veg_medium.png new file mode 100644 index 0000000..7d7433d Binary files /dev/null and b/app/assets/media/images/veg_medium.png differ diff --git a/app/assets/media/images/veg_small.png b/app/assets/media/images/veg_small.png new file mode 100644 index 0000000..2dc9a4b Binary files /dev/null and b/app/assets/media/images/veg_small.png differ diff --git a/app/assets/media/images/veg_smaller.png b/app/assets/media/images/veg_smaller.png new file mode 100644 index 0000000..1adb977 Binary files /dev/null and b/app/assets/media/images/veg_smaller.png differ diff --git a/app/assets/scss/base/_fonts.scss b/app/assets/scss/base/_fonts.scss new file mode 100644 index 0000000..496867b --- /dev/null +++ b/app/assets/scss/base/_fonts.scss @@ -0,0 +1,19 @@ +@font-face { + font-family: "CocogooseNormal"; + src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); +} + +@font-face { + font-family: "CocogooseLight"; + src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); +} + +@font-face { + font-family: "CocogooseBold"; + src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); +} + +@font-face { + font-family: "CocogooseExtra"; + src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); +} \ No newline at end of file diff --git a/app/assets/scss/base/_mixins.scss b/app/assets/scss/base/_mixins.scss index 3898f7d..99335b8 100644 --- a/app/assets/scss/base/_mixins.scss +++ b/app/assets/scss/base/_mixins.scss @@ -8,4 +8,12 @@ @mixin atLarge { @media (min-width: 1200px) { @content }; +} + +@mixin clearfix { + &::after{ + content: ""; + clear: both; + display: table; + } } \ No newline at end of file diff --git a/app/assets/scss/modules/_btn.scss b/app/assets/scss/modules/_btn.scss new file mode 100644 index 0000000..ce6796d --- /dev/null +++ b/app/assets/scss/modules/_btn.scss @@ -0,0 +1,18 @@ +.btn{ + background-color: #00ab00;; + color: #fff; + text-decoration: none; + padding: .75rem 1.2rem; + display: inline-block; + border-radius: 30px; + + &--large { + padding: 1.1rem 1.9rem; + + @include atSmall(){ + font-size: 1.25rem; + } + } + + +} \ No newline at end of file diff --git a/app/assets/scss/modules/_large-hero.scss b/app/assets/scss/modules/_large-hero.scss new file mode 100644 index 0000000..2114912 --- /dev/null +++ b/app/assets/scss/modules/_large-hero.scss @@ -0,0 +1,74 @@ +.large-hero { + border-bottom: 10px solid white; + text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); + position: relative; + + &__image{ + display: block; + } + + &__text-content { + padding-top: 88px; + position: absolute; + top: 50%; + left: 0px; + width: 100%; + transform: translateY(-50%); + text-align: center; + + @include atMedium(){ + padding-top: 60px; + } + } + + &__title { + font-family: "CocogooseBold"; + color: white; + font-size: 2.8rem; + margin: 0; + + @include atSmall(){ + font-size: 3.2rem; + } + + @include atMedium(){ + font-size: 4.8rem; + } + + } + + &__subtitle { + // font-family: "CocogooseNormal"; + font-weight: 400; + color: white; + font-size: 1.5rem; + margin: 0; + + @include atSmall(){ + font-size: 1.8rem; + } + + @include atMedium(){ + font-size: 2.4rem; + } + } + + &__description { + color: #FFF; + font-weight: 00; + font-size: 1.1rem; + max-width: 50rem; + margin-left: auto; + margin-right: auto; + + @include atSmall(){ + font-size: 1.3rem; + } + + @include atMedium(){ + font-size: 1.875rem; + } + } + + +} \ No newline at end of file diff --git a/app/assets/scss/modules/_primary-nav.scss b/app/assets/scss/modules/_primary-nav.scss new file mode 100644 index 0000000..fdbaabb --- /dev/null +++ b/app/assets/scss/modules/_primary-nav.scss @@ -0,0 +1,62 @@ +.primary-nav{ + padding-top: 10px; + + @include atMedium(){ + padding: 31px 0px; + } + + &--pull-right{ + @include atMedium(){ + float: right; + } + } + + ul { + margin: 0; + padding: 0; + + @include clearfix(); + } + + li{ + list-style: none; + display: inline-block; + padding-right: 7px; + + @include atMedium(){ + float: left; + display: block; + padding-right: 20px; + + } + } + + li:last-child { + padding-right: 0; + + @include atMedium(){ + padding-right: 20px; + } + } + + a{ + color: #fff; + font-weight: 400; + text-decoration: none; + display: block; + padding: 5px 8px; + font-size: .8rem; + background:rgba(black, .5); + border-radius: 30px; + + @include atMedium(){ + background:transparent; + font-size: 1.10rem; + padding: 12px 0; + + &.is-current-link { + color: #fabb69; + } + } + } +} \ No newline at end of file diff --git a/app/assets/scss/modules/_site-header.scss b/app/assets/scss/modules/_site-header.scss new file mode 100644 index 0000000..24946b2 --- /dev/null +++ b/app/assets/scss/modules/_site-header.scss @@ -0,0 +1,152 @@ +.site-header{ + position: fixed; + width: 100%; + z-index: 2; + transition: background-color .3s ease-out; + + &--is-expanded { + background-color: orange; + padding-bottom: 18px; + } + + @include atMedium(){ + position: absolute; + position: fixed; + background-color: rgba(#000, 0.4); + } + + &__btn-container{ + @include atMedium(){ + padding: 32px 0px 32px 0px; + float: right; + } + } + + &__language{ + margin: 13px auto 5px auto; + border-radius: 15px; + overflow: hidden; + width: 25px; + height: 25px; + + @include atMedium(){ + margin: 40px 20px 0px 0px; + float: right; + } + } + + + &__menu-icon{ + width: 20px; + height: 19px; + position: absolute; + z-index: 10; + top: 10px; + right: 10px; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 3px; + background: #FFF; + transform-origin: 0 0; + transition: transform .3s ease-out; + } + + &__middle { + position: absolute; + top: 8px; + left: 0; + width: 20px; + height: 3px; + background: #FFF; + transition: all .3s ease-out; + transform-origin: 0 50%; + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 20px; + height: 3px; + background: #FFF; + transform-origin: 0 100%; + transition: transform .3s ease-out; + } + + @include atMedium { + display: none; + } + } + + &__menu-icon--close-x { + &::before { + transform: rotate(45deg) scaleX(1.25); + } + + .site-header__menu-icon__middle{ + transform: scaleX(0); + opacity: 0; + } + + &::after { + transform: rotate(-45deg) scaleX(1.25) translateY(1px); + + } + } + + &__menu-content{ + opacity: 0; + transform: scale(1.2); + transtion: all .3s ease-out; + position: relative; + z-index: -10; + padding-top: 90px; + text-align: center; + + &--is-visible{ + transform: scale(1); + opacity: 1; + z-index: 1; + } + + @include atMedium(){ + opacity: 1; + z-index: 1; + padding-top: 0; + transform: scale(1); + } + } + + &__logo{ + position: absolute; + top: 0px; + padding: 5px 15px; + left: 50%; + transform-origin: 50% 0%; + transform: translateX(-50%) scale(.8); + transition: transform .3s ease-out; + background-color: rgba(black, 0.5); + + &--orange-bg { + transition: background-color .3s ease-out; + background-color: orange; + } + + @include atMedium(){ + padding: 0; + top: 3px; + position: relative; + float: left; + left: auto; + transform: translateX(0); + background-color: rgba(black, 0); + } + } + +} \ No newline at end of file diff --git a/app/assets/scss/modules/_wrapper.scss b/app/assets/scss/modules/_wrapper.scss new file mode 100644 index 0000000..aa7a1d5 --- /dev/null +++ b/app/assets/scss/modules/_wrapper.scss @@ -0,0 +1,12 @@ +.wrapper{ + overflow: hidden; + padding-left: 18px; + padding-right: 18px; + max-width: 1300px; + margin-left: auto; + margin-right: auto; + + &--medium{ + max-width: 976px; + } +} \ No newline at end of file diff --git a/app/assets/scss/style.scss b/app/assets/scss/style.scss index 5bedf46..b699b12 100644 --- a/app/assets/scss/style.scss +++ b/app/assets/scss/style.scss @@ -1,6 +1,12 @@ @import './base/_normalize'; @import './base/variables'; +@import './base/fonts'; @import './base/global'; @import './base/mixins'; +@import './modules/site-header'; +@import './modules/primary-nav'; +@import './modules/wrapper'; +@import './modules/large-hero'; +@import './modules/btn'; diff --git a/app/index.html b/app/index.html index f7c23ca..37a3418 100644 --- a/app/index.html +++ b/app/index.html @@ -4,45 +4,65 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.n
- +Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, bio bulk bende is the first food co-op in Rotterdam.
+